🤖 Migrate to Zustand for simpler state management (#243)

Migrates workspace state and git status management to Zustand for
simpler, more maintainable architecture.

## What Changed

**Replaced hooks with stores + Zustand:**
- `useWorkspaceAggregators` → `WorkspaceStore` class + Zustand wrapper
- `GitStatusContext` → `GitStatusStore` class + Zustand wrapper

**Benefits:**
- Centralized business logic in testable store classes
- Eliminated manual subscription boilerplate
- Fine-grained selector-based rendering (components only re-render when
their data changes)
- Removed provider nesting from App.tsx

**Component changes:**
- `AIView`: Uses `useWorkspaceState()` and `useGitStatus()` hooks
instead of context
- `ProjectSidebar`: Extracted `WorkspaceListItem` component - each
workspace subscribes independently instead of all workspaces
re-rendering together

## Testing

- ✅ 438 tests pass (1 skipped)
- ✅ Types check (`make typecheck`)

Author: ammar-agent

bun.lock

@@ -34,6 +34,7 @@
         "write-file-atomic": "^6.0.0",
         "zod": "^4.1.11",
         "zod-to-json-schema": "^3.24.6",
+        "zustand": "^5.0.8",
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -2244,6 +2245,8 @@
 
     "zod-to-json-schema": ["zod-to-json-schema@3.24.6", "", { "peerDependencies": { "zod": "^3.24.1" } }, "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg=="],
 
+    "zustand": ["zustand@5.0.8", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw=="],
+
     "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
     "@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],

package.json

@@ -59,7 +59,8 @@
     "undici": "^7.16.0",
     "write-file-atomic": "^6.0.0",
     "zod": "^4.1.11",
-    "zod-to-json-schema": "^3.24.6"
+    "zod-to-json-schema": "^3.24.6",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

src/App.tsx

@@ -14,16 +14,16 @@ import { usePersistedState, updatePersistedState } from "./hooks/usePersistedSta
 import { matchesKeybind, KEYBINDS } from "./utils/ui/keybinds";
 import { useProjectManagement } from "./hooks/useProjectManagement";
 import { useWorkspaceManagement } from "./hooks/useWorkspaceManagement";
-import { useWorkspaceAggregators } from "./hooks/useWorkspaceAggregators";
 import { useResumeManager } from "./hooks/useResumeManager";
 import { useUnreadTracking } from "./hooks/useUnreadTracking";
 import { useAutoCompactContinue } from "./hooks/useAutoCompactContinue";
+import { useWorkspaceStoreRaw, useWorkspaceRecency } from "./stores/WorkspaceStore";
+import { useGitStatusStoreRaw } from "./stores/GitStatusStore";
 
 import { CommandRegistryProvider, useCommandRegistry } from "./contexts/CommandRegistryContext";
 import type { CommandAction } from "./contexts/CommandRegistryContext";
 import { CommandPalette } from "./components/CommandPalette";
 import { buildCoreSources, type BuildSourcesParams } from "./utils/commands/sources";
-import { GitStatusProvider } from "./contexts/GitStatusContext";
 
 import type { ThinkingLevel } from "./types/thinking";
 import { CUSTOM_EVENTS } from "./constants/events";
@@ -167,26 +167,32 @@ function AppInner() {
       onSelectedWorkspaceUpdate: setSelectedWorkspace,
     });
 
-  // Use workspace aggregators hook for message state
-  const { getWorkspaceState, getAggregator, workspaceStates, workspaceRecency } =
-    useWorkspaceAggregators(workspaceMetadata);
+  // NEW: Sync workspace metadata with the stores
+  const workspaceStore = useWorkspaceStoreRaw();
+  const gitStatusStore = useGitStatusStoreRaw();
+
+  useEffect(() => {
+    // Only sync when metadata has actually loaded (not empty initial state)
+    if (workspaceMetadata.size > 0) {
+      workspaceStore.syncWorkspaces(workspaceMetadata);
+    }
+  }, [workspaceMetadata, workspaceStore]);
+
+  useEffect(() => {
+    // Only sync when metadata has actually loaded (not empty initial state)
+    if (workspaceMetadata.size > 0) {
+      gitStatusStore.syncWorkspaces(workspaceMetadata);
+    }
+  }, [workspaceMetadata, gitStatusStore]);
 
   // Track unread message status for all workspaces
-  const { unreadStatus, toggleUnread } = useUnreadTracking(selectedWorkspace, workspaceStates);
+  const { unreadStatus, toggleUnread } = useUnreadTracking(selectedWorkspace);
 
   // Auto-resume interrupted streams on app startup and when failures occur
-  useResumeManager(workspaceStates);
+  useResumeManager();
 
   // Handle auto-continue after compaction (when user uses /compact -c)
-  const { handleCompactStart } = useAutoCompactContinue(workspaceStates);
-
-  const streamingModels = new Map<string, string>();
-  for (const metadata of workspaceMetadata.values()) {
-    const state = getWorkspaceState(metadata.id);
-    if (state.canInterrupt) {
-      streamingModels.set(metadata.id, state.currentModel);
-    }
-  }
+  const { handleCompactStart } = useAutoCompactContinue();
 
   // Sync selectedWorkspace with URL hash
   useEffect(() => {
@@ -287,6 +293,9 @@ function AppInner() {
     []
   );
 
+  // NEW: Get workspace recency from store
+  const workspaceRecency = useWorkspaceRecency();
+
   // Sort workspaces by recency (most recent first)
   // This ensures navigation follows the visual order displayed in the sidebar
   const sortedWorkspacesByProject = useMemo(() => {
@@ -490,7 +499,6 @@ function AppInner() {
     projects,
     workspaceMetadata,
     selectedWorkspace,
-    streamingModels,
     getThinkingLevel: getThinkingLevelForWorkspace,
     onSetThinkingLevel: setThinkingLevelFromPalette,
     onOpenNewWorkspaceModal: openNewWorkspaceFromPalette,
@@ -510,15 +518,25 @@ function AppInner() {
     const unregister = registerSource(() => {
       const params = registerParamsRef.current;
       if (!params) return [];
-      const factories = buildCoreSources(params);
+
+      // Compute streaming models here (only when command palette opens)
+      const allStates = workspaceStore.getAllStates();
+      const streamingModels = new Map<string, string>();
+      for (const [workspaceId, state] of allStates) {
+        if (state.canInterrupt) {
+          streamingModels.set(workspaceId, state.currentModel);
+        }
+      }
+
+      const factories = buildCoreSources({ ...params, streamingModels });
       const actions: CommandAction[] = [];
       for (const factory of factories) {
         actions.push(...factory());
       }
       return actions;
     });
     return unregister;
-  }, [registerSource]);
+  }, [registerSource, workspaceStore]);
 
   // Handle keyboard shortcuts
   useEffect(() => {
@@ -558,72 +576,67 @@ function AppInner() {
       <GlobalFonts />
       <GlobalScrollbars />
       <Global styles={globalStyles} />
-      <GitStatusProvider workspaceMetadata={workspaceMetadata}>
-        <AppContainer>
-          <LeftSidebar
-            projects={projects}
-            workspaceMetadata={workspaceMetadata}
-            selectedWorkspace={selectedWorkspace}
-            onSelectWorkspace={setSelectedWorkspace}
-            onAddProject={() => void addProject()}
-            onAddWorkspace={(projectPath) => void handleAddWorkspace(projectPath)}
-            onRemoveProject={(path) => void handleRemoveProject(path)}
-            onRemoveWorkspace={removeWorkspace}
-            onRenameWorkspace={renameWorkspace}
-            getWorkspaceState={getWorkspaceState}
-            unreadStatus={unreadStatus}
-            onToggleUnread={toggleUnread}
-            collapsed={sidebarCollapsed}
-            onToggleCollapsed={() => setSidebarCollapsed((prev) => !prev)}
-            onGetSecrets={handleGetSecrets}
-            onUpdateSecrets={handleUpdateSecrets}
-            sortedWorkspacesByProject={sortedWorkspacesByProject}
-          />
-          <MainContent>
-            <ContentArea>
-              {selectedWorkspace ? (
-                <ErrorBoundary
-                  workspaceInfo={`${selectedWorkspace.projectName}/${selectedWorkspace.workspacePath.split("/").pop() ?? ""}`}
-                >
-                  <AIView
-                    workspaceId={selectedWorkspace.workspaceId}
-                    projectName={selectedWorkspace.projectName}
-                    branch={selectedWorkspace.workspacePath.split("/").pop() ?? ""}
-                    workspacePath={selectedWorkspace.workspacePath}
-                    workspaceState={getWorkspaceState(selectedWorkspace.workspaceId)}
-                    getAggregator={getAggregator}
-                    onCompactStart={(continueMessage) =>
-                      handleCompactStart(selectedWorkspace.workspaceId, continueMessage)
-                    }
-                  />
-                </ErrorBoundary>
-              ) : (
-                <WelcomeView>
-                  <h2>Welcome to Cmux</h2>
-                  <p>Select a workspace from the sidebar or add a new one to get started.</p>
-                </WelcomeView>
-              )}
-            </ContentArea>
-          </MainContent>
-          <CommandPalette
-            getSlashContext={() => ({
-              providerNames: [],
-              workspaceId: selectedWorkspace?.workspaceId,
-            })}
+      <AppContainer>
+        <LeftSidebar
+          projects={projects}
+          workspaceMetadata={workspaceMetadata}
+          selectedWorkspace={selectedWorkspace}
+          onSelectWorkspace={setSelectedWorkspace}
+          onAddProject={() => void addProject()}
+          onAddWorkspace={(projectPath) => void handleAddWorkspace(projectPath)}
+          onRemoveProject={(path) => void handleRemoveProject(path)}
+          onRemoveWorkspace={removeWorkspace}
+          onRenameWorkspace={renameWorkspace}
+          unreadStatus={unreadStatus}
+          onToggleUnread={toggleUnread}
+          collapsed={sidebarCollapsed}
+          onToggleCollapsed={() => setSidebarCollapsed((prev) => !prev)}
+          onGetSecrets={handleGetSecrets}
+          onUpdateSecrets={handleUpdateSecrets}
+          sortedWorkspacesByProject={sortedWorkspacesByProject}
+        />
+        <MainContent>
+          <ContentArea>
+            {selectedWorkspace ? (
+              <ErrorBoundary
+                workspaceInfo={`${selectedWorkspace.projectName}/${selectedWorkspace.workspacePath.split("/").pop() ?? ""}`}
+              >
+                <AIView
+                  workspaceId={selectedWorkspace.workspaceId}
+                  projectName={selectedWorkspace.projectName}
+                  branch={selectedWorkspace.workspacePath.split("/").pop() ?? ""}
+                  workspacePath={selectedWorkspace.workspacePath}
+                  onCompactStart={(continueMessage) =>
+                    handleCompactStart(selectedWorkspace.workspaceId, continueMessage)
+                  }
+                />
+              </ErrorBoundary>
+            ) : (
+              <WelcomeView>
+                <h2>Welcome to Cmux</h2>
+                <p>Select a workspace from the sidebar or add a new one to get started.</p>
+              </WelcomeView>
+            )}
+          </ContentArea>
+        </MainContent>
+        <CommandPalette
+          getSlashContext={() => ({
+            providerNames: [],
+            workspaceId: selectedWorkspace?.workspaceId,
+          })}
+        />
+        {workspaceModalOpen && workspaceModalProject && (
+          <NewWorkspaceModal
+            isOpen={workspaceModalOpen}
+            projectPath={workspaceModalProject}
+            onClose={() => {
+              setWorkspaceModalOpen(false);
+              setWorkspaceModalProject(null);
+            }}
+            onAdd={handleCreateWorkspace}
           />
-          {workspaceModalOpen && workspaceModalProject && (
-            <NewWorkspaceModal
-              isOpen={workspaceModalOpen}
-              projectPath={workspaceModalProject}
-              onClose={() => {
-                setWorkspaceModalOpen(false);
-                setWorkspaceModalProject(null);
-              }}
-              onAdd={handleCreateWorkspace}
-            />
-          )}
-        </AppContainer>
-      </GitStatusProvider>
+        )}
+      </AppContainer>
     </>
   );
 }