fix: resolve lint errors in QR pick flow

- Move ref updates into effects to satisfy react-hooks/refs rule
- Remove synchronous setState in effects (set-state-in-effect rule)
- Compute non-localhost URL eagerly in usePickUrl initializer

Author: NathanTarbert

apps/app/src/app/page.tsx

@@ -24,8 +24,8 @@ export default function HomePage() {
   // Ref to always have the latest agent/copilotkit for async callbacks
   const agentRef = useRef(agent);
   const copilotkitRef = useRef(copilotkit);
-  agentRef.current = agent;
-  copilotkitRef.current = copilotkit;
+  useEffect(() => { agentRef.current = agent; }, [agent]);
+  useEffect(() => { copilotkitRef.current = copilotkit; }, [copilotkit]);
 
   const sendPrompt = useCallback((prompt: string) => {
     const a = agentRef.current;
@@ -39,10 +39,10 @@ export default function HomePage() {
     sendPrompt(demo.prompt);
   };
 
-  // Reset scan status when QR modal opens
-  useEffect(() => {
-    if (qrOpen) setScanStatus("waiting");
-  }, [qrOpen]);
+  const openQrModal = () => {
+    setScanStatus("waiting");
+    setQrOpen(true);
+  };
 
   // Poll for QR pick status
   useEffect(() => {
@@ -116,7 +116,7 @@ export default function HomePage() {
                 </p>
               </div>
               <div className="flex items-center gap-1.5 sm:gap-2">
-                <QrButton onClick={() => setQrOpen(true)} />
+                <QrButton onClick={openQrModal} />
                 <button
                   onClick={() => setDemoDrawerOpen(true)}
                   className="inline-flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-medium no-underline whitespace-nowrap transition-all duration-150 hover:-translate-y-px cursor-pointer"

apps/app/src/components/qr-modal/index.tsx

@@ -7,28 +7,30 @@ import { QRCodeSVG } from "qrcode.react";
 /*  Hook: resolves the pick URL (uses LAN IP on localhost for phones)  */
 /* ------------------------------------------------------------------ */
 function usePickUrl(sessionId: string) {
-  const [url, setUrl] = useState("");
+  const isLocalhost =
+    typeof window !== "undefined" &&
+    (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+
+  const fallbackUrl =
+    typeof window !== "undefined"
+      ? `${window.location.origin}/pick?session=${sessionId}`
+      : "";
+
+  const [url, setUrl] = useState(() => (isLocalhost ? "" : fallbackUrl));
 
   useEffect(() => {
-    const origin = window.location.origin;
-    if (
-      window.location.hostname === "localhost" ||
-      window.location.hostname === "127.0.0.1"
-    ) {
-      fetch("/api/pick/ip")
-        .then((r) => r.json())
-        .then((data) => {
-          if (data.ip) {
-            setUrl(`http://${data.ip}:${window.location.port}/pick?session=${sessionId}`);
-          } else {
-            setUrl(`${origin}/pick?session=${sessionId}`);
-          }
-        })
-        .catch(() => setUrl(`${origin}/pick?session=${sessionId}`));
-    } else {
-      setUrl(`${origin}/pick?session=${sessionId}`);
-    }
-  }, [sessionId]);
+    if (!isLocalhost) return;
+    fetch("/api/pick/ip")
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.ip) {
+          setUrl(`http://${data.ip}:${window.location.port}/pick?session=${sessionId}`);
+        } else {
+          setUrl(fallbackUrl);
+        }
+      })
+      .catch(() => setUrl(fallbackUrl));
+  }, [sessionId, isLocalhost, fallbackUrl]);
 
   return url;
 }