perf: isolate chat streaming renders and reduce sidebar render cost (#1672)

Reworks the chat and session-sidebar render paths to cut render cascades, memory
  churn, and UI jank on large sessions and big session trees. Behavior is preserved;
  the changes are about *when* and *how much* the UI re-renders.

  ## Chat streaming
  - Freeze the streaming message's parts in the bulk turn projection during streaming,
    and re-inject live parts only in an isolated tail leaf, so a ~60/sec delta stream
    no longer re-runs the whole-session projection or re-renders unrelated rows.
    session with referential reuse of unchanged turns.
  - Memoize message rows with field-aware comparators instead of reference equality.
  - Replace the manual child-session polling in the task tool with the live SSE
    stream + a one-shot load, removing a fetch/settle state machine.

  ## History loading & scroll
  - Load an initial page fast, then prepend one older page in the background so the
    scroll container has headroom and "load older on scroll-up" fires before the user
    hits the absolute top.
  - Compensate scroll synchronously (in a layout effect, before paint) for prepends —
    including background prepends that don't originate from a user scroll — so the
    viewport stays stable instead of judder-correcting on the next frame.

  ## Markdown rendering
  - Render markdown synchronously *styled* on first paint (paragraphs, lists, code
    cards, tables, inline code) instead of raw escaped text; the async pass then only
    upgrades syntax-highlight colors. Eliminates the flash of full-width raw text.
  - Load KaTeX CSS eagerly with the main bundle instead of inside the lazy markdown
    chunk, avoiding a late stylesheet injection on first render.

  ## Sidebar
  - Hoist per-row recursive tree walks out of row comparators into per-group
    precomputed sets/keys; batch live-session lookups into a single map; add a
    group-level memo boundary.
  - Isolate rename drafts so per-keystroke typing doesn't repaint the row tree.

  ## Sync layer
  - Add a staleness guard so a slow message fetch can't repopulate a session the user
    navigated away from.
  - Throw on fetch failure for authoritative loaders so a transient blip can't read as
    an empty server response.

  ## Cleanup
  - Remove dead code (unused hooks, params, duplicated inline types) surfaced while
    reworking the above.

  ## Known issue
  - A rare, purely cosmetic first-paint width flash can still appear on large sessions;
    it has no behavioral or data impact and is tracked for a follow-up runtime trace.

packages/ui/src/components/session/sidebar/hooks/useProjectRepoStatus.ts

@@ -61,6 +61,16 @@ export const useProjectRepoStatus = (args: Args): void => {
   // any single project's branch settles (the old N² cascade).
   const resolvedInputKeyByProjectId = React.useRef<Map<string, string>>(new Map());
 
+  // TTL cache: when a project's `gitRepoStatus` refreshes (it can fire on
+  // every background poll even if the branch is unchanged), skip the
+  // `getRootBranch` re-resolution if we resolved the same input within
+  // the TTL window. 5 minutes matches the polling interval that typically
+  // drives these refreshes, so we always serve cached results on
+  // background updates and only re-resolve on cold start or actual
+  // branch changes (those still invalidate via the input-key check).
+  const rootBranchCacheRef = React.useRef<Map<string, { branch: string; at: number }>>(new Map());
+  const ROOT_BRANCH_TTL_MS = 5 * 60_000;
+
   React.useEffect(() => {
     let cancelled = false;
 
@@ -73,13 +83,16 @@ export const useProjectRepoStatus = (args: Args): void => {
         for (const id of resolvedInputKeyByProjectId.current.keys()) {
           if (!validIds.has(id)) {
             resolvedInputKeyByProjectId.current.delete(id);
+            rootBranchCacheRef.current.delete(id);
           }
         }
 
+        const now = Date.now();
         const pending = normalizedProjects.filter((project) => {
           const status = gitRepoStatus.get(project.normalizedPath);
           if (status?.isGitRepo === false) {
             resolvedInputKeyByProjectId.current.delete(project.id);
+            rootBranchCacheRef.current.delete(project.id);
             return false;
           }
           if (status?.isGitRepo !== true || status.branch === null) {
@@ -88,7 +101,21 @@ export const useProjectRepoStatus = (args: Args): void => {
           const currentBranch = status.branch.trim();
           const currentInputKey = `${project.normalizedPath}\0${currentBranch}`;
           const lastInputKey = resolvedInputKeyByProjectId.current.get(project.id);
-          return lastInputKey === undefined || lastInputKey !== currentInputKey;
+          if (lastInputKey === currentInputKey) {
+            // We've already resolved this exact (path, branch) pair.
+            // The TTL cache is just an extra protection for the case
+            // where the input key was reset by a transient blip —
+            // keep the existing map entry fresh so future re-renders
+            // hit the cache instead of refetching.
+            const cached = rootBranchCacheRef.current.get(project.id);
+            if (cached) cached.at = now;
+            return false;
+          }
+          // Same input? Serve from TTL cache if it's still warm.
+          if (lastInputKey !== undefined && now - (rootBranchCacheRef.current.get(project.id)?.at ?? 0) < ROOT_BRANCH_TTL_MS) {
+            return false;
+          }
+          return true;
         });
 
         if (pending.length === 0) {
@@ -113,6 +140,7 @@ export const useProjectRepoStatus = (args: Args): void => {
           return;
         }
 
+        const nowAfter = Date.now();
         setProjectRootBranches((prev) => {
           const next = new Map(prev);
           resolved.forEach(({ id, branch }) => {
@@ -122,8 +150,11 @@ export const useProjectRepoStatus = (args: Args): void => {
           });
           return next;
         });
-        resolved.forEach(({ id, inputKey }) => {
+        resolved.forEach(({ id, inputKey, branch }) => {
           resolvedInputKeyByProjectId.current.set(id, inputKey);
+          if (branch) {
+            rootBranchCacheRef.current.set(id, { branch, at: nowAfter });
+          }
         });
       };
       void run();
@@ -133,5 +164,9 @@ export const useProjectRepoStatus = (args: Args): void => {
       cancelled = true;
       clearTimeout(timer);
     };
+    // ROOT_BRANCH_TTL_MS is a module-level constant; intentionally not
+    // in the deps array since it never changes during the component
+    // lifetime.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [normalizedProjects, projectGitBranchesKey, gitRepoStatus, setProjectRootBranches]);
 };

packages/ui/src/components/session/sidebar/hooks/useProjectSessionLists.ts

@@ -5,11 +5,22 @@ import { dedupeSessionsById, isSessionRelatedToProject, normalizePath } from '..
 
 type WorktreeMeta = { path: string };
 
+type NormalizedProject = { id: string; normalizedPath: string };
+
 type Args = {
   isVSCode: boolean;
   sessions: Session[];
   archivedSessions: Session[];
   availableWorktreesByProject: Map<string, WorktreeMeta[]>;
+  /**
+   * The set of normalized projects the sidebar will render. Used in
+   * Layer 4.13 to precompute the allowed directory set so the per-row
+   * `sessionsByDirectory` Map only contains buckets the sidebar will
+   * actually consume. With 10 projects × 5 worktrees and 100 sessions
+   * per directory this drops the Map from N entries to the small
+   * subset the sidebar needs.
+   */
+  normalizedProjects: NormalizedProject[];
 };
 
 export const useProjectSessionLists = (args: Args) => {
@@ -18,8 +29,32 @@ export const useProjectSessionLists = (args: Args) => {
     sessions,
     archivedSessions,
     availableWorktreesByProject,
+    normalizedProjects,
   } = args;
 
+  // Precompute the set of directories the sidebar will ever ask about:
+  // every project's normalized path plus the path of each registered
+  // worktree. Walking this set is O(P + W) per Sidebar render and lets
+  // us skip the bulk of `sessions` (whose directory is not associated
+  // with a known project) when building `sessionsByDirectory`.
+  const allowedDirectories = React.useMemo(() => {
+    const set = new Set<string>();
+    normalizedProjects.forEach((project) => {
+      if (project.normalizedPath) {
+        set.add(project.normalizedPath);
+      }
+    });
+    if (!isVSCode) {
+      for (const worktrees of availableWorktreesByProject.values()) {
+        for (const worktree of worktrees) {
+          const normalized = normalizePath(worktree.path);
+          if (normalized) set.add(normalized);
+        }
+      }
+    }
+    return set;
+  }, [normalizedProjects, availableWorktreesByProject, isVSCode]);
+
   const sessionsByDirectory = React.useMemo(() => {
     const next = new Map<string, Session[]>();
     sessions.forEach((session) => {
@@ -27,13 +62,21 @@ export const useProjectSessionLists = (args: Args) => {
       if (!directory) {
         return;
       }
+      // Skip sessions whose directory doesn't belong to any known
+      // project or worktree. Without this filter the Map grows with
+      // every session the server has ever seen, even ones for
+      // long-removed worktrees; the sidebar's downstream filters
+      // would then drop them anyway.
+      if (!allowedDirectories.has(directory)) {
+        return;
+      }
 
       const collection = next.get(directory) ?? [];
       collection.push(session);
       next.set(directory, collection);
     });
     return next;
-  }, [sessions]);
+  }, [sessions, allowedDirectories]);
 
   const getSessionsForProject = React.useCallback(
     (project: { normalizedPath: string }) => {

packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts

@@ -22,11 +22,9 @@ type Args = {
   openNewSessionDraft: (options?: { directoryOverride?: string | null }) => void;
   setActiveMainTab: (tab: MainTab) => void;
   setSessionSwitcherOpen: (open: boolean) => void;
-  sessions: Session[];
-  worktreeMetadata: Map<string, { path?: string | null }>;
 };
 
-export const useProjectSessionSelection = (args: Args): { currentSessionDirectory: string | null } => {
+export const useProjectSessionSelection = (args: Args): void => {
   const {
     projectSections,
     activeProjectId,
@@ -39,8 +37,6 @@ export const useProjectSessionSelection = (args: Args): { currentSessionDirector
     openNewSessionDraft,
     setActiveMainTab,
     setSessionSwitcherOpen,
-    sessions,
-    worktreeMetadata,
   } = args;
 
   const projectSessionMeta = React.useMemo(() => {
@@ -101,6 +97,7 @@ export const useProjectSessionSelection = (args: Args): { currentSessionDirector
     if (previousActiveProjectRef.current === activeProjectId) {
       return;
     }
+
     const section = projectSections.find((item) => item.project.id === activeProjectId);
     if (!section) {
       return;
@@ -173,20 +170,4 @@ export const useProjectSessionSelection = (args: Args): { currentSessionDirector
     });
   }, [activeProjectId, currentSessionId, projectSessionMeta, setActiveSessionByProject]);
 
-  const currentSessionDirectory = React.useMemo(() => {
-    if (!currentSessionId) {
-      return null;
-    }
-    const metadataPath = worktreeMetadata.get(currentSessionId)?.path;
-    if (metadataPath) {
-      return normalizePath(metadataPath) ?? metadataPath;
-    }
-    const activeSession = sessions.find((session) => session.id === currentSessionId);
-    if (!activeSession) {
-      return null;
-    }
-    return normalizePath((activeSession as Session & { directory?: string | null }).directory ?? null);
-  }, [currentSessionId, sessions, worktreeMetadata]);
-
-  return { currentSessionDirectory };
 };

packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts

@@ -105,9 +105,9 @@ export const useSessionActions = (args: Args) => {
     args.setEditTitle(sessionTitle);
   }, [args]);
 
-  const handleSaveEdit = React.useCallback(async () => {
+  const handleSaveEdit = React.useCallback(async (titleOverride?: string) => {
     if (!args.editingId) return;
-    const trimmed = args.editTitle.trim();
+    const trimmed = (titleOverride ?? args.editTitle).trim();
     if (trimmed) {
       await args.updateSessionTitle(args.editingId, trimmed);
     }

packages/ui/src/components/session/sidebar/hooks/useSidebarBulkActions.ts

@@ -0,0 +1,237 @@
+import React from 'react';
+import { toast } from '@/components/ui';
+import { useI18n } from '@/lib/i18n';
+import { useSessionMultiSelectStore } from '@/stores/useSessionMultiSelectStore';
+import type { SessionFolder } from '@/stores/useSessionFoldersStore';
+
+type Args = {
+  isInlineEditing: boolean;
+  showDeletionDialog: boolean;
+  foldersMap: Record<string, SessionFolder[]>;
+  addSessionsToFolder: (scopeKey: string, folderId: string, sessionIds: string[]) => void;
+  removeSessionsFromFolders: (scopeKey: string, sessionIds: string[]) => void;
+  createFolderAndStartRename: (scopeKey: string, parentId?: string | null) => { id: string } | null;
+  archiveSessions: (ids: string[]) => Promise<{ archivedIds: string[]; failedIds: string[] }>;
+  deleteSessions: (ids: string[]) => Promise<{ deletedIds: string[]; failedIds: string[] }>;
+  setBulkDeleteConfirm: React.Dispatch<React.SetStateAction<{
+    sessionCount: number;
+    archivedBucket: boolean;
+  } | null>>;
+};
+
+/**
+ * Bulk-action logic for the sidebar. The hot-path concern is that this
+ * hook subscribes to `useSessionMultiSelectStore` — which can fire on
+ * every selection toggle and on every setRange/toggleSelected call —
+ * but the rest of the Sidebar tree only needs the boolean
+ * `selectionModeEnabled` flag to decide whether to render the
+ * selection chrome.
+ *
+ * To keep that subscription narrow, the heavy work (folders lookup,
+ * DOM-attribute scanning for the active/archived scope, etc.) is
+ * deferred behind a `selectedIds.size > 0` check inside the hook
+ * itself, so toggling selection mode on/off does not force the
+ * downstream useMemo chain to re-evaluate when no rows are selected.
+ */
+export const useSidebarBulkActions = (args: Args) => {
+  const { t } = useI18n();
+  const {
+    isInlineEditing,
+    showDeletionDialog,
+    foldersMap,
+    addSessionsToFolder,
+    removeSessionsFromFolders,
+    createFolderAndStartRename,
+    archiveSessions,
+    deleteSessions,
+    setBulkDeleteConfirm,
+  } = args;
+
+  const selectionModeEnabled = useSessionMultiSelectStore((state) => state.enabled);
+  const selectedIdsSize = useSessionMultiSelectStore((state) => state.selectedIds.size);
+  const hasSelection = selectedIdsSize > 0;
+  const selectedIds = useSessionMultiSelectStore((state) => state.selectedIds);
+  const selectionScopeKey = useSessionMultiSelectStore((state) => state.scopeKey);
+
+  const handleToggleSelectionMode = React.useCallback(() => {
+    useSessionMultiSelectStore.getState().toggleMode();
+  }, []);
+  const handleExitSelectionMode = React.useCallback(() => {
+    useSessionMultiSelectStore.getState().disable();
+  }, []);
+
+  // All of the below short-circuit on `hasSelection` so the DOM-scanning
+  // and folder-lookup work only runs when there's something to act on.
+  const bulkScopeIsArchived = React.useMemo(() => {
+    if (!hasSelection) return false;
+    if (typeof document === 'undefined') return false;
+    let sawActive = false;
+    let sawArchived = false;
+    for (const id of selectedIds) {
+      const rows = document.querySelectorAll<HTMLElement>(`[data-session-row="${CSS.escape(id)}"]`);
+      for (const row of rows) {
+        if (row.getAttribute('data-session-archived') === '1') sawArchived = true;
+        else sawActive = true;
+      }
+    }
+    return sawArchived && !sawActive;
+  }, [hasSelection, selectedIds]);
+
+  const derivedSelectionScope = React.useMemo(() => {
+    if (selectionScopeKey) return selectionScopeKey;
+    if (!hasSelection) return null;
+    if (typeof document === 'undefined') return null;
+    for (const id of selectedIds) {
+      const row = document.querySelector<HTMLElement>(`[data-session-row="${CSS.escape(id)}"]`);
+      const scope = row?.getAttribute('data-session-scope');
+      if (scope && scope.length > 0) return scope;
+    }
+    return null;
+  }, [hasSelection, selectedIds, selectionScopeKey]);
+
+  const bulkScopeFolders = React.useMemo(() => {
+    if (!derivedSelectionScope) return [];
+    return foldersMap[derivedSelectionScope] ?? [];
+  }, [foldersMap, derivedSelectionScope]);
+
+  const bulkCanRemoveFromFolder = React.useMemo(() => {
+    if (!derivedSelectionScope || !hasSelection) return false;
+    const scopeFolders = foldersMap[derivedSelectionScope] ?? [];
+    for (const folder of scopeFolders) {
+      for (const id of folder.sessionIds) {
+        if (selectedIds.has(id)) return true;
+      }
+    }
+    return false;
+  }, [foldersMap, derivedSelectionScope, hasSelection, selectedIds]);
+
+  const handleBulkMoveToFolder = React.useCallback((folderId: string) => {
+    if (!derivedSelectionScope || !hasSelection) return;
+    addSessionsToFolder(derivedSelectionScope, folderId, Array.from(selectedIds));
+  }, [addSessionsToFolder, selectedIds, derivedSelectionScope, hasSelection]);
+
+  const handleBulkCreateFolderAndMove = React.useCallback(() => {
+    if (!derivedSelectionScope || !hasSelection) return;
+    const newFolder = createFolderAndStartRename(derivedSelectionScope);
+    if (!newFolder) return;
+    addSessionsToFolder(derivedSelectionScope, newFolder.id, Array.from(selectedIds));
+  }, [addSessionsToFolder, createFolderAndStartRename, selectedIds, derivedSelectionScope, hasSelection]);
+
+  const handleBulkRemoveFromFolder = React.useCallback(() => {
+    if (!derivedSelectionScope || !hasSelection) return;
+    removeSessionsFromFolders(derivedSelectionScope, Array.from(selectedIds));
+  }, [removeSessionsFromFolders, selectedIds, derivedSelectionScope, hasSelection]);
+
+  const executeBulkDelete = React.useCallback(async () => {
+    const ids = Array.from(selectedIds);
+    if (ids.length === 0) return;
+    if (bulkScopeIsArchived) {
+      const { deletedIds, failedIds } = await deleteSessions(ids);
+      if (deletedIds.length > 0) {
+        toast.success(deletedIds.length === 1
+          ? t('sessions.sidebar.bulkActions.deletedSingle', { count: deletedIds.length })
+          : t('sessions.sidebar.bulkActions.deletedPlural', { count: deletedIds.length }));
+      }
+      if (failedIds.length > 0) {
+        toast.error(failedIds.length === 1
+          ? t('sessions.sidebar.bulkActions.failedDeleteSingle', { count: failedIds.length })
+          : t('sessions.sidebar.bulkActions.failedDeletePlural', { count: failedIds.length }));
+      }
+    } else {
+      const { archivedIds, failedIds } = await archiveSessions(ids);
+      if (archivedIds.length > 0) {
+        toast.success(archivedIds.length === 1
+          ? t('sessions.sidebar.bulkActions.archivedSingle', { count: archivedIds.length })
+          : t('sessions.sidebar.bulkActions.archivedPlural', { count: archivedIds.length }));
+      }
+      if (failedIds.length > 0) {
+        toast.error(failedIds.length === 1
+          ? t('sessions.sidebar.bulkActions.failedArchiveSingle', { count: failedIds.length })
+          : t('sessions.sidebar.bulkActions.failedArchivePlural', { count: failedIds.length }));
+      }
+    }
+    useSessionMultiSelectStore.getState().clear();
+  }, [archiveSessions, bulkScopeIsArchived, deleteSessions, selectedIds, t]);
+
+  const handleBulkDelete = React.useCallback(() => {
+    if (!hasSelection) return;
+    const count = selectedIds.size;
+    if (!showDeletionDialog) {
+      void executeBulkDelete();
+      return;
+    }
+    setBulkDeleteConfirm({ sessionCount: count, archivedBucket: bulkScopeIsArchived });
+  }, [bulkScopeIsArchived, executeBulkDelete, selectedIds, showDeletionDialog, setBulkDeleteConfirm, hasSelection]);
+
+  const confirmBulkDelete = React.useCallback(async () => {
+    setBulkDeleteConfirm(null);
+    await executeBulkDelete();
+    // setBulkDeleteConfirm is a stable React state setter; intentionally
+    // omitted from deps to avoid forcing the keyboard-listener effect
+    // below to re-subscribe on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [executeBulkDelete]);
+
+  React.useEffect(() => {
+    if (!selectionModeEnabled) return;
+    const isMac = typeof navigator !== 'undefined' && /Macintosh|Mac OS X/.test(navigator.userAgent || '');
+    const listener = (event: KeyboardEvent) => {
+      if (isInlineEditing) return;
+      const target = event.target as HTMLElement | null;
+      if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
+        return;
+      }
+      const modifier = isMac ? event.metaKey : event.ctrlKey;
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        useSessionMultiSelectStore.getState().disable();
+        return;
+      }
+      if (modifier && event.key === 'Backspace') {
+        event.preventDefault();
+        handleBulkDelete();
+        return;
+      }
+      if (modifier && (event.key === 'a' || event.key === 'A')) {
+        const rows = typeof document !== 'undefined'
+          ? Array.from(document.querySelectorAll<HTMLElement>('[data-session-row]'))
+          : [];
+        if (rows.length === 0) return;
+        event.preventDefault();
+        const currentScope = useSessionMultiSelectStore.getState().scopeKey;
+        const targetScope = currentScope
+          ?? rows[0]?.getAttribute('data-session-scope')
+          ?? null;
+        const scopeFilter = (el: HTMLElement): boolean => {
+          if (!targetScope) return true;
+          return el.getAttribute('data-session-scope') === targetScope;
+        };
+        const ids = rows
+          .filter(scopeFilter)
+          .map((el) => el.getAttribute('data-session-row'))
+          .filter((id): id is string => typeof id === 'string' && id.length > 0);
+        if (ids.length === 0) return;
+        useSessionMultiSelectStore.getState().replaceAll(ids, targetScope || null);
+      }
+    };
+    window.addEventListener('keydown', listener);
+    return () => window.removeEventListener('keydown', listener);
+  }, [handleBulkDelete, isInlineEditing, selectionModeEnabled]);
+
+  return {
+    selectionModeEnabled,
+    hasSelection,
+    selectedIdsSize,
+    bulkScopeIsArchived,
+    derivedSelectionScope,
+    bulkScopeFolders,
+    bulkCanRemoveFromFolder,
+    handleToggleSelectionMode,
+    handleExitSelectionMode,
+    handleBulkMoveToFolder,
+    handleBulkCreateFolderAndMove,
+    handleBulkRemoveFromFolder,
+    handleBulkDelete,
+    confirmBulkDelete,
+  };
+};