fix(demo): populate Zustand store and fake WS connected in demo mode

- Fix rules-of-hooks violation in useAgents by calling all hooks
  unconditionally and using enabled:false + useEffect to seed the store
- filteredAgents in the grid now shows mock agents correctly
- wsConnected is faked as true in demo mode (no more "Reconnecting...")

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: yarin-mag

apps/web/src/features/agents/hooks/useAgents.ts

@@ -11,14 +11,15 @@ import { DEMO_AGENTS } from "../../../lib/demo-data";
 
 export function useAgents(statusFilter?: AgentStatus) {
   const isDemoMode = useDemoMode();
-  if (isDemoMode) {
-    const agents = statusFilter ? DEMO_AGENTS.filter((a) => a.status === statusFilter) : DEMO_AGENTS;
-    return { agents, loading: false, error: null, refetch: async () => {} };
-  }
   const queryClient = useQueryClient();
   const setAgents = useAgentsStore((state) => state.setAgents);
   const updateAgent = useAgentsStore((state) => state.updateAgent);
 
+  // Populate the Zustand store with mock data in demo mode
+  useEffect(() => {
+    if (isDemoMode) setAgents(DEMO_AGENTS);
+  }, [isDemoMode, setAgents]);
+
   // Query with automatic caching and offline support
   const {
     data: agents = [],
@@ -27,6 +28,7 @@ export function useAgents(statusFilter?: AgentStatus) {
     refetch,
   } = useQuery({
     queryKey: [...QUERY_KEYS.agents, statusFilter],
+    enabled: !isDemoMode,
     queryFn: async (): Promise<AgentSnapshot[]> => {
       try {
         // Try network first
@@ -62,6 +64,8 @@ export function useAgents(statusFilter?: AgentStatus) {
 
   // WebSocket for real-time updates
   useEffect(() => {
+    if (isDemoMode) return;
+
     let debounceTimer: ReturnType<typeof setTimeout> | undefined;
 
     const unsubscribe = wsService.subscribe((message) => {
@@ -98,7 +102,12 @@ export function useAgents(statusFilter?: AgentStatus) {
       clearTimeout(debounceTimer);
       unsubscribe();
     };
-  }, [queryClient, updateAgent]);
+  }, [queryClient, updateAgent, isDemoMode]);
+
+  if (isDemoMode) {
+    const demoAgents = statusFilter ? DEMO_AGENTS.filter((a) => a.status === statusFilter) : DEMO_AGENTS;
+    return { agents: demoAgents, loading: false, error: null, refetch: async () => {} };
+  }
 
   return {
     agents,

apps/web/src/features/dashboard/hooks/useMissionControlState.ts

@@ -6,23 +6,26 @@ import { useAgentsStore } from "../../agents/stores/agents.store";
 import { apiService } from "../../../services/api.service";
 import { QUERY_KEYS } from "../../../lib/constants";
 import type { AgentSession } from "../../../services/calendar.service";
+import { useDemoMode } from "../../../hooks/useDemoMode";
 
 type ViewMode = "grid" | "calendar" | "table" | "kanban" | "analytics" | "compare";
 
 const WS_POLL_INTERVAL_MS = 2_000;
 
 export function useMissionControlState() {
+  const isDemoMode = useDemoMode();
   const { agents, loading, error } = useAgents();
   const [clearing, setClearing] = useState(false);
   const [selectedSession, setSelectedSession] = useState<AgentSession | null>(null);
-  const [wsConnected, setWsConnected] = useState(wsService.isConnected);
+  const [wsConnected, setWsConnected] = useState(isDemoMode || wsService.isConnected);
 
   useEffect(() => {
+    if (isDemoMode) return;
     const interval = setInterval(() => {
       setWsConnected(wsService.isConnected);
     }, WS_POLL_INTERVAL_MS);
     return () => clearInterval(interval);
-  }, []);
+  }, [isDemoMode]);
 
   const hideDisconnected = useAgentsStore((state) => state.hideDisconnected);
   const toggleHideDisconnected = useAgentsStore((state) => state.toggleHideDisconnected);