Add unit tests for various components and stores in the terminal dashboard

- Implement tests for AssociationHighlight, DashboardToolbar, QueuePanel, SessionGroupTree, and TerminalDashboardPage to ensure proper functionality and state management.
- Create tests for cliSessionStore, issueQueueIntegrationStore, queueExecutionStore, queueSchedulerStore, sessionManagerStore, and terminalGridStore to validate state resets and workspace scoping.
- Mock necessary dependencies and state management hooks to isolate tests and ensure accurate behavior.

ccw/frontend/src/App.tsx

@@ -11,13 +11,19 @@ import { Toaster } from 'sonner';
 import { router } from './router';
 import queryClient from './lib/query-client';
 import type { Locale } from './lib/i18n';
-import { useWorkflowStore } from '@/stores/workflowStore';
+import { fetchCliSessions, initializeCsrfToken } from './lib/api';
+import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
 import { useCliStreamStore } from '@/stores/cliStreamStore';
+import { useCliSessionStore } from '@/stores/cliSessionStore';
 import { useExecutionMonitorStore } from '@/stores/executionMonitorStore';
+import { useSessionManagerStore } from '@/stores/sessionManagerStore';
+import { useIssueQueueIntegrationStore } from '@/stores/issueQueueIntegrationStore';
+import { useQueueExecutionStore } from '@/stores/queueExecutionStore';
+import { useQueueSchedulerStore } from '@/stores/queueSchedulerStore';
 import { useTerminalPanelStore } from '@/stores/terminalPanelStore';
+import { useTerminalGridStore } from '@/stores/terminalGridStore';
 import { useActiveCliExecutions, ACTIVE_CLI_EXECUTIONS_QUERY_KEY } from '@/hooks/useActiveCliExecutions';
 import { DialogStyleProvider } from '@/contexts/DialogStyleContext';
-import { initializeCsrfToken } from './lib/api';
 
 interface AppProps {
   locale: Locale;
@@ -39,6 +45,7 @@ function App({ locale, messages }: AppProps) {
       <QueryClientProvider client={queryClient}>
         <DialogStyleProvider>
           <QueryInvalidator />
+          <CliSessionSync />
           <CliExecutionSync />
           <RouterProvider router={router} />
           <Toaster richColors position="top-right" />
@@ -59,8 +66,21 @@ function QueryInvalidator() {
     // Register callback to invalidate all workspace-related queries on workspace switch
     const callback = () => {
       useCliStreamStore.getState().resetState();
+      useCliSessionStore.getState().resetState();
       useExecutionMonitorStore.getState().resetState();
+      useSessionManagerStore.getState().resetState();
+      useIssueQueueIntegrationStore.getState().resetState();
+      useQueueExecutionStore.getState().resetState();
+      const queueSchedulerStore = useQueueSchedulerStore.getState();
+      queueSchedulerStore.resetState();
+      const nextProjectPath = useWorkflowStore.getState().projectPath;
+      if (nextProjectPath) {
+        void queueSchedulerStore.loadInitialState().catch((error) => {
+          console.error('[QueueSchedulerSync] Failed to sync scheduler state:', error);
+        });
+      }
       useTerminalPanelStore.getState().resetState();
+      useTerminalGridStore.getState().resetWorkspaceState();
       queryClient.invalidateQueries({ queryKey: ACTIVE_CLI_EXECUTIONS_QUERY_KEY });
       queryClient.invalidateQueries({
         predicate: (query) => {
@@ -86,6 +106,41 @@ function QueryInvalidator() {
  * CLI Execution Sync component
  * Syncs active CLI executions in the background to keep the count updated in Header
  */
+function CliSessionSync() {
+  const projectPath = useWorkflowStore(selectProjectPath);
+  const setSessions = useCliSessionStore((state) => state.setSessions);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    if (!projectPath) {
+      setSessions([]);
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    fetchCliSessions(projectPath)
+      .then(({ sessions }) => {
+        if (!cancelled) {
+          setSessions(sessions);
+        }
+      })
+      .catch((error) => {
+        console.error('[CliSessionSync] Failed to sync CLI sessions:', error);
+        if (!cancelled) {
+          setSessions([]);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [projectPath, setSessions]);
+
+  return null;
+}
+
 function CliExecutionSync() {
   // Always sync active CLI executions with a longer polling interval
   // This ensures the activeCliCount badge in Header shows correct count on initial load