minesweeper: hold the client in a ref, not in a dependency list

confirmed playable after this.

useClient() rebuilds its verbs on every render, so `refresh` — which
listed `client` — got a new identity every render, its mount effect
re-ran every render, and each run set state and caused another render.
an endless fetch loop that starved the socket, so onReady never ran and
the panel sat at 'connecting…' forever.

the backend was never at fault: the relay completed a full rfb handshake
through wss://platform.officer.dev with a real token before this was
found. ruling the server out is what left only the client.

same trap and same fix as the jellyfin playback reports, which CLAUDE.md
already warned about.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/workspaces/officerdev/src/apps/Minesweeper/MinesweeperPanel.tsx

@@ -17,7 +17,14 @@ const VISIBLE = { width: 164, height: 226 };
 const BUTTON_MASK: Record<number, number> = { 0: 1, 1: 2, 2: 4 };
 
 export const MinesweeperPanel = () => {
+  // useClient() rebuilds its verbs on EVERY render, so putting one in a dependency list gives that
+  // list a new identity every render. Held in a ref instead — the same fix the Jellyfin player needed
+  // after its playback reports silently stopped for days. Getting this wrong here meant `refresh` was
+  // unstable, its mount effect re-ran every render, and each run set state and caused another render:
+  // an endless fetch loop that starved the socket and left the panel saying "connecting…" forever.
   const client = useClient();
+  const clientRef = useRef(client);
+  clientRef.current = client;
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const offscreenRef = useRef<HTMLCanvasElement | null>(null);
   const rfbRef = useRef<RfbClient | null>(null);
@@ -38,11 +45,11 @@ export const MinesweeperPanel = () => {
 
   const refresh = useCallback(async () => {
     try {
-      adopt(await client.get<SessionStatus>("/minesweeper/status"));
+      adopt(await clientRef.current.get<SessionStatus>("/minesweeper/status"));
     } catch {
       setError("Could not reach the server.");
     }
-  }, [client, adopt]);
+  }, [adopt]);
 
   useEffect(() => {
     void refresh();
@@ -52,7 +59,7 @@ export const MinesweeperPanel = () => {
     setBusy(true);
     setError(null);
     try {
-      adopt(await client.post<SessionStatus>("/minesweeper/start", {}));
+      adopt(await clientRef.current.post<SessionStatus>("/minesweeper/start", {}));
     } catch {
       setError("The session would not start. Is wine-minesweeper installed on the server?");
     } finally {
@@ -131,7 +138,7 @@ export const MinesweeperPanel = () => {
     if (!connected) return;
     const timer = setInterval(async () => {
       try {
-        const next = await client.get<SessionStatus>("/minesweeper/status");
+        const next = await clientRef.current.get<SessionStatus>("/minesweeper/status");
         if (!next.window) return;
         const { width, height } = next.window;
         if (width !== geometryRef.current.width || height !== geometryRef.current.height) {
@@ -143,7 +150,7 @@ export const MinesweeperPanel = () => {
       }
     }, 4000);
     return () => clearInterval(timer);
-  }, [connected, client, present]);
+  }, [connected, present]);
 
   const toFramebuffer = (ev: React.MouseEvent<HTMLCanvasElement>) => {
     const rect = ev.currentTarget.getBoundingClientRect();