🤖 Fix sidebar re-renders and infinite loops with custom MapStore (#246)

Replaces Zustand with custom MapStore to fix sidebar re-render
performance and eliminate unnecessary state management complexity.

## Problems Fixed

**Sidebar flickering during streaming** - Every stream delta caused full
sidebar re-renders because global state tracking forced all components
to update.

**Infinite render loops** - React's `useSyncExternalStore` requires
stable snapshot references. Previous implementation returned new objects
on every call.

## Solution

**Removed global state cache** - Moved unread computation to individual
`WorkspaceListItem` components. Each component subscribes only to its
workspace using `useWorkspaceSidebarState(workspaceId)`.

**Stable snapshot references** - Hooks using `getAllStates()` now cache
Maps and use `compareMaps()` to return stable references when underlying
data hasn't changed.

## Implementation Details

- Custom `MapStore` with versioned caching replaces Zustand
- `StreamingMessageAggregator` caches recency timestamps (O(1) access,
no recalculation on every delta)
- `useResumeManager` and `useAutoCompactContinue` cache workspace state
snapshots
- Each `WorkspaceListItem` computes its own unread state from
`lastReadTimestamp` prop

## Result

**Zero sidebar re-renders during streaming** - Components only update
when their specific workspace changes.

**~400 lines net change** (+775/-383) - Removes Zustand dependency and
CacheManager, adds MapStore.

_Generated with `cmux`_

Author: ammar-agent

bun.lock

@@ -34,7 +34,6 @@
         "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",
@@ -2245,8 +2244,6 @@
 
     "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,8 +59,7 @@
     "undici": "^7.16.0",
     "write-file-atomic": "^6.0.0",
     "zod": "^4.1.11",
-    "zod-to-json-schema": "^3.24.6",
-    "zustand": "^5.0.8"
+    "zod-to-json-schema": "^3.24.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

src/App.tsx

@@ -185,8 +185,8 @@ function AppInner() {
     }
   }, [workspaceMetadata, gitStatusStore]);
 
-  // Track unread message status for all workspaces
-  const { unreadStatus, toggleUnread } = useUnreadTracking(selectedWorkspace);
+  // Track last-read timestamps for unread indicators
+  const { lastReadTimestamps, onToggleUnread } = useUnreadTracking(selectedWorkspace);
 
   // Auto-resume interrupted streams on app startup and when failures occur
   useResumeManager();
@@ -587,8 +587,8 @@ function AppInner() {
           onRemoveProject={(path) => void handleRemoveProject(path)}
           onRemoveWorkspace={removeWorkspace}
           onRenameWorkspace={renameWorkspace}
-          unreadStatus={unreadStatus}
-          onToggleUnread={toggleUnread}
+          lastReadTimestamps={lastReadTimestamps}
+          onToggleUnread={onToggleUnread}
           collapsed={sidebarCollapsed}
           onToggleCollapsed={() => setSidebarCollapsed((prev) => !prev)}
           onGetSecrets={handleGetSecrets}

src/components/LeftSidebar.tsx

@@ -35,7 +35,7 @@ interface LeftSidebarProps {
     workspaceId: string,
     newName: string
   ) => Promise<{ success: boolean; error?: string }>;
-  unreadStatus: Map<string, boolean>;
+  lastReadTimestamps: Record<string, number>;
   onToggleUnread: (workspaceId: string) => void;
   collapsed: boolean;
   onToggleCollapsed: () => void;

src/components/ProjectSidebar.tsx

@@ -586,7 +586,7 @@ interface ProjectSidebarProps {
     workspaceId: string,
     newName: string
   ) => Promise<{ success: boolean; error?: string }>;
-  unreadStatus: Map<string, boolean>;
+  lastReadTimestamps: Record<string, number>;
   onToggleUnread: (workspaceId: string) => void;
   collapsed: boolean;
   onToggleCollapsed: () => void;
@@ -603,7 +603,7 @@ interface WorkspaceListItemProps {
   projectPath: string;
   projectName: string;
   isSelected: boolean;
-  isUnread: boolean;
+  lastReadTimestamp: number;
   isEditing: boolean;
   editingName: string;
   originalName: string;
@@ -623,7 +623,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
   projectPath,
   projectName,
   isSelected,
-  isUnread,
+  lastReadTimestamp,
   isEditing,
   editingName,
   renameError,
@@ -643,6 +643,12 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
   const isStreaming = sidebarState.canInterrupt;
   const streamingModel = sidebarState.currentModel;
 
+  // Compute unread status locally based on recency vs last read timestamp
+  // Note: We don't check !isSelected here because user should be able to see
+  // and toggle unread status even for the selected workspace
+  const isUnread =
+    sidebarState.recencyTimestamp !== null && sidebarState.recencyTimestamp > lastReadTimestamp;
+
   return (
     <React.Fragment>
       <WorkspaceItem
@@ -752,7 +758,7 @@ const ProjectSidebar: React.FC<ProjectSidebarProps> = ({
   onRemoveProject,
   onRemoveWorkspace,
   onRenameWorkspace,
-  unreadStatus,
+  lastReadTimestamps,
   onToggleUnread: _onToggleUnread,
   collapsed,
   onToggleCollapsed,
@@ -1125,7 +1131,6 @@ const ProjectSidebar: React.FC<ProjectSidebarProps> = ({
                               if (!metadata) return null;
 
                               const workspaceId = metadata.id;
-                              const isUnread = unreadStatus.get(workspaceId) ?? false;
                               const isEditing = editingWorkspaceId === workspaceId;
                               const isSelected =
                                 selectedWorkspace?.workspacePath === workspace.path;
@@ -1139,7 +1144,7 @@ const ProjectSidebar: React.FC<ProjectSidebarProps> = ({
                                   projectPath={projectPath}
                                   projectName={projectName}
                                   isSelected={isSelected}
-                                  isUnread={isUnread}
+                                  lastReadTimestamp={lastReadTimestamps[metadata.id] ?? 0}
                                   isEditing={isEditing}
                                   editingName={editingName}
                                   originalName={originalName}

src/hooks/useAutoCompactContinue.ts

@@ -1,7 +1,8 @@
-import { useRef, useEffect } from "react";
-import { useWorkspaceStoreZustand } from "@/stores/WorkspaceStore";
+import { useRef, useEffect, useSyncExternalStore } from "react";
+import { useWorkspaceStoreRaw, type WorkspaceState } from "@/stores/WorkspaceStore";
 import { getCompactContinueMessageKey } from "@/constants/storage";
 import { buildSendMessageOptions } from "@/hooks/useSendMessageOptions";
+import { compareMaps } from "./useStableReference";
 
 /**
  * Hook to manage auto-continue after compaction
@@ -19,7 +20,21 @@ import { buildSendMessageOptions } from "@/hooks/useSendMessageOptions";
  */
 export function useAutoCompactContinue() {
   // Get workspace states from store (subscribe to all changes)
-  const workspaceStates = useWorkspaceStoreZustand((state) => state.store.getAllStates());
+  const store = useWorkspaceStoreRaw();
+
+  // Cache the Map to avoid infinite re-renders (getAllStates returns new Map each time)
+  const cachedStatesRef = useRef<Map<string, WorkspaceState>>(new Map());
+  const getSnapshot = (): Map<string, WorkspaceState> => {
+    const newStates = store.getAllStates();
+    // Only return new reference if something actually changed (compare by reference)
+    if (compareMaps(cachedStatesRef.current, newStates)) {
+      return cachedStatesRef.current;
+    }
+    cachedStatesRef.current = newStates;
+    return newStates;
+  };
+
+  const workspaceStates = useSyncExternalStore(store.subscribe, getSnapshot);
 
   // Prevent duplicate auto-sends if effect runs more than once while the same
   // compacted summary is visible (e.g., rapid state updates after replaceHistory)

src/hooks/useResumeManager.ts

@@ -1,10 +1,11 @@
-import { useEffect, useRef } from "react";
-import { useWorkspaceStoreZustand } from "@/stores/WorkspaceStore";
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { useWorkspaceStoreRaw, type WorkspaceState } from "@/stores/WorkspaceStore";
 import { CUSTOM_EVENTS } from "@/constants/events";
 import { getAutoRetryKey, getRetryStateKey } from "@/constants/storage";
 import { getSendOptionsFromStorage } from "@/utils/messages/sendOptions";
 import { readPersistedState } from "./usePersistedState";
 import { hasInterruptedStream } from "@/utils/messages/retryEligibility";
+import { compareMaps } from "./useStableReference";
 
 interface RetryState {
   attempt: number;
@@ -55,7 +56,21 @@ const MAX_DELAY = 60000; // 60 seconds
  */
 export function useResumeManager() {
   // Get workspace states from store (subscribe to all changes)
-  const workspaceStates = useWorkspaceStoreZustand((state) => state.store.getAllStates());
+  const store = useWorkspaceStoreRaw();
+
+  // Cache the Map to avoid infinite re-renders (getAllStates returns new Map each time)
+  const cachedStatesRef = useRef<Map<string, WorkspaceState>>(new Map());
+  const getSnapshot = (): Map<string, WorkspaceState> => {
+    const newStates = store.getAllStates();
+    // Only return new reference if something actually changed (compare by reference)
+    if (compareMaps(cachedStatesRef.current, newStates)) {
+      return cachedStatesRef.current;
+    }
+    cachedStatesRef.current = newStates;
+    return newStates;
+  };
+
+  const workspaceStates = useSyncExternalStore(store.subscribe, getSnapshot);
 
   // Use ref to avoid effect re-running on every state change
   const workspaceStatesRef = useRef(workspaceStates);

src/hooks/useStableReference.test.ts

@@ -5,8 +5,7 @@
  * The comparator functions are the critical logic and are thoroughly tested here.
  * The hook itself is a thin wrapper around useMemo and useRef with manual testing.
  */
-import { compareMaps, compareRecords, compareArrays, compareGitStatus } from "./useStableReference";
-import type { GitStatus } from "@/types/workspace";
+import { compareMaps, compareRecords, compareArrays } from "./useStableReference";
 
 describe("compareMaps", () => {
   it("returns true for empty maps", () => {
@@ -132,48 +131,6 @@ describe("compareArrays", () => {
   });
 });
 
-describe("compareGitStatus", () => {
-  it("returns true for two null values", () => {
-    expect(compareGitStatus(null, null)).toBe(true);
-  });
-
-  it("returns false when one is null and the other is not", () => {
-    const status: GitStatus = { ahead: 0, behind: 0, dirty: false };
-    expect(compareGitStatus(null, status)).toBe(false);
-    expect(compareGitStatus(status, null)).toBe(false);
-  });
-
-  it("returns true for identical git status", () => {
-    const a: GitStatus = { ahead: 1, behind: 2, dirty: true };
-    const b: GitStatus = { ahead: 1, behind: 2, dirty: true };
-    expect(compareGitStatus(a, b)).toBe(true);
-  });
-
-  it("returns false when ahead differs", () => {
-    const a: GitStatus = { ahead: 1, behind: 2, dirty: false };
-    const b: GitStatus = { ahead: 2, behind: 2, dirty: false };
-    expect(compareGitStatus(a, b)).toBe(false);
-  });
-
-  it("returns false when behind differs", () => {
-    const a: GitStatus = { ahead: 1, behind: 2, dirty: false };
-    const b: GitStatus = { ahead: 1, behind: 3, dirty: false };
-    expect(compareGitStatus(a, b)).toBe(false);
-  });
-
-  it("returns false when dirty differs", () => {
-    const a: GitStatus = { ahead: 1, behind: 2, dirty: false };
-    const b: GitStatus = { ahead: 1, behind: 2, dirty: true };
-    expect(compareGitStatus(a, b)).toBe(false);
-  });
-
-  it("returns true for clean status (all zeros)", () => {
-    const a: GitStatus = { ahead: 0, behind: 0, dirty: false };
-    const b: GitStatus = { ahead: 0, behind: 0, dirty: false };
-    expect(compareGitStatus(a, b)).toBe(true);
-  });
-});
-
 // Hook integration tests would require jsdom setup with bun.
 // The comparator functions above are the critical logic and are thoroughly tested.
 // The hook itself is tested manually through its usage in useUnreadTracking,

src/hooks/useStableReference.ts

@@ -1,5 +1,4 @@
 import { useRef, useMemo, type DependencyList } from "react";
-import type { GitStatus } from "@/types/workspace";
 
 /**
  * Compare two Maps for deep equality (same keys and values).
@@ -75,21 +74,6 @@ export function compareArrays<V>(
   return true;
 }
 
-/**
- * Compare two GitStatus objects for equality.
- * Used to stabilize git status Map identity when values haven't changed.
- *
- * @param a Previous GitStatus
- * @param b Next GitStatus
- * @returns true if GitStatus objects are equal, false otherwise
- */
-export function compareGitStatus(a: GitStatus | null, b: GitStatus | null): boolean {
-  if (a === null && b === null) return true;
-  if (a === null || b === null) return false;
-
-  return a.ahead === b.ahead && a.behind === b.behind && a.dirty === b.dirty;
-}
-
 /**
  * Hook to stabilize reference identity for computed values.
  *