.

app/components/manager/gateway-websocket-connection-manager.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { useGatewayWebSocketStore } from '~/store/gateway-websocket';
+import { useTokenStore } from '~/store/token';
+
+export function GatewayWebSocketConnectionManager() {
+    const connectWebSocket = useGatewayWebSocketStore((state) => state.connect);
+    const disconnectWebSocket = useGatewayWebSocketStore((state) => state.disconnect);
+    const wsStatus = useGatewayWebSocketStore((state) => state.status);
+
+    const token = useTokenStore((state) =>
+        state.token,
+    );
+
+    useEffect(() => {
+        console.debug(`WS Manager: Status (${wsStatus})`);
+
+        if (!!token) {
+            // Connect if we should be connected and are currently idle, disconnected, or errored out
+            if (wsStatus === 'IDLE' || wsStatus === 'DISCONNECTED' || wsStatus === 'ERROR') {
+                console.log("WS Manager: Conditions met. Calling connect...");
+                // Pass the stable token getter function reference
+                connectWebSocket(() => token);
+            }
+        } else {
+            // Disconnect if we shouldn't be connected and are currently in any connected/connecting state
+            if (wsStatus !== 'IDLE' && wsStatus !== 'DISCONNECTED') {
+                console.log("WS Manager: Conditions no longer met. Calling disconnect...");
+                disconnectWebSocket(true); // Intentional disconnect
+            }
+        }
+
+        // The disconnect logic for component unmount (e.g., user logs out entirely)
+        return () => {
+            // Check status on unmount to avoid disconnecting if already idle/disconnected
+            const currentStatus = useGatewayWebSocketStore.getState().status;
+            if (currentStatus !== 'IDLE' && currentStatus !== 'DISCONNECTED') {
+                console.log("WS Manager: Unmounting. Calling disconnect...");
+                // Ensure Zustand has the latest state before calling disconnect
+                useGatewayWebSocketStore.getState().disconnect(true); // Intentional disconnect on unmount
+            }
+        };
+        // Dependencies: connect/disconnect actions, auth status, route location
+    }, [connectWebSocket, disconnectWebSocket]);
+
+    // This component doesn't render anything itself
+    return null;
+}