perf(chat): make session switching feel instant

Switching sessions ran as one synchronous commit: sidebar highlight, URL, a full timeline remount with markdown re-parse, and around nine requests, so nothing changed on screen for 150-250ms after the click. - ChatContainer swaps the timeline on a deferred copy of the selection, so the active row, URL, and tab commit first and the timeline renders behind them; selection policy keeps reading the live store value. - The message fetch starts before the selection is published. - Sidebar rows stop re-rendering on a project switch: directory-scoped sync hooks read the runtime context and a subscribable current-directory source instead of the directory-bearing context; the grouping builder reads git branches through a ref and section caches key the branches they use; descendant ids are keyed by content. Rows per switch went from 73 to 8. - Markdown skips the async re-render when the settled cached blocks are already painted, and mounts synchronously once its lazy module is loaded; the module is preloaded at boot. - A timeline reveal gate holds a freshly opened session at opacity 0 while any provisional markdown paint catches up (250ms cap), then fades the whole timeline in once, so text, tools, and recap appear together. - Switch fan-out trimmed: knowledge summary deduped, MCP status refreshed only when stale, non-repo directories cached by the git repo check, OpenChamber defaults cached briefly, agent memory reused for the same project, goal text cached, PWA manifest rebuilt after the switch settles. - Header tabs snap into the active state and keep the title at the same height in both states. - Prefetch on row press; composer focus moved off the commit. `bun run profile:switch` records ack/content latency, longest task, and requests per switch, cold and warm, and compares runs against a baseline. Measured warm switch: ack 228ms to about 40-60ms, content 228ms to about 100-120ms.
2026-08-29 17:01:15 +03:00
parent 123c14260a
commit edfc9779cf
32 changed files with 947 additions and 118 deletions
@@ -232,6 +232,7 @@ const VisibleSessionProjects: React.FC<SessionProjectCollectionProps> = ({ topol
    availableWorktreesByProject: topology.availableWorktreesByProject,
    projectRepoStatus: topology.projectRepoStatus,
    projectRootBranches: topology.projectRootBranches,
+    gitBranches: topology.gitBranches,
    lastRepoStatus: topology.lastRepoStatus,
    buildGroupedSessions,
    hasSessionSearchQuery: view.hasSessionSearchQuery,
@@ -28,6 +28,12 @@ const isArchivedSession = (session: Session): boolean => Boolean(session.time?.a

 export const useSessionGrouping = (args: Args) => {
  const { t } = useI18n();
+  // Read at call time rather than captured: the branch map is rebuilt whenever
+  // any directory's git status changes, and a builder that changed identity
+  // with it would invalidate every project section in the sidebar. The section
+  // cache compares the branches each project actually uses instead.
+  const gitBranchesRef = React.useRef(args.gitBranches);
+  gitBranchesRef.current = args.gitBranches;
  const buildGroupSearchText = React.useCallback((group: SessionGroup): string => {
    return [group.label, group.branch ?? '', group.description ?? '', group.directory ?? ''].join(' ').toLowerCase();
  }, []);
@@ -233,7 +239,7 @@ export const useSessionGrouping = (args: Args) => {
      const worktreeGroups = args.isVSCode ? [] : sortedWorktrees;
      worktreeGroups.forEach((meta) => {
        const directory = normalizePath(meta.path) ?? meta.path;
-        const currentBranch = args.gitBranches.get(directory)?.trim() || null;
+        const currentBranch = gitBranchesRef.current.get(directory)?.trim() || null;
        const metadataBranch = meta.branch?.trim() || null;
        const shouldSyncLabelWithBranch = Boolean(
          currentBranch && metadataBranch && meta.label && normalizeForBranchComparison(meta.label) === normalizeForBranchComparison(metadataBranch),
@@ -274,7 +280,7 @@ export const useSessionGrouping = (args: Args) => {

      return groups;
    },
-    [args.homeDirectory, args.worktreeMetadata, args.sessionOrderRanks, args.gitBranches, args.isVSCode, t],
+    [args.homeDirectory, args.worktreeMetadata, args.sessionOrderRanks, args.isVSCode, t],
  );

  return {
@@ -55,6 +55,7 @@ const renderSections = (group: SessionGroup, query: string): Sections => {
      availableWorktreesByProject: new Map(),
      projectRepoStatus: new Map(),
      projectRootBranches: new Map(),
+      gitBranches: new Map(),
      lastRepoStatus: false,
      buildGroupedSessions: grouping.buildGroupedSessions,
      hasSessionSearchQuery: query.length > 0,
@@ -29,11 +29,23 @@ type ProjectSectionCacheEntry = {
  archivedSessions: Session[];
  availableWorktrees: WorktreeMetadata[];
  rootBranch: string | null;
+  /** Current branch of every worktree directory the section renders. */
+  worktreeBranchesKey: string;
  isRepo: boolean;
  buildGroupedSessions: Args['buildGroupedSessions'];
  section: ProjectSection;
 };

+const worktreeBranchesKeyFor = (
+  worktrees: WorktreeMetadata[],
+  gitBranches: ReadonlyMap<string, string | null>,
+): string => worktrees
+  .map((worktree) => {
+    const directory = normalizePath(worktree.path) ?? worktree.path;
+    return `${directory}=${gitBranches.get(directory) ?? ''}`;
+  })
+  .join('\n');
+
 const EMPTY_WORKTREES: WorktreeMetadata[] = [];

 type Args = {
@@ -43,6 +55,7 @@ type Args = {
  availableWorktreesByProject: Map<string, WorktreeMetadata[]>;
  projectRepoStatus: Map<string, boolean | null>;
  projectRootBranches: Map<string, string | null>;
+  gitBranches: ReadonlyMap<string, string | null>;
  lastRepoStatus: boolean;
  buildGroupedSessions: (
    sessions: Session[],
@@ -73,6 +86,7 @@ export const useSessionSidebarSections = (args: Args) => {
    availableWorktreesByProject,
    projectRepoStatus,
    projectRootBranches,
+    gitBranches,
    lastRepoStatus,
    buildGroupedSessions,
    hasSessionSearchQuery,
@@ -101,6 +115,7 @@ export const useSessionSidebarSections = (args: Args) => {
        ? Boolean(projectRepoStatus.get(project.id))
        : lastRepoStatus;
      const rootBranch = projectRootBranches.get(project.id) ?? null;
+      const worktreeBranchesKey = worktreeBranchesKeyFor(worktreesForProject, gitBranches);
      const cached = previousCache.get(project.id);
      if (
        cached
@@ -109,6 +124,7 @@ export const useSessionSidebarSections = (args: Args) => {
        && sameSessions(cached.archivedSessions, archivedSessions)
        && cached.availableWorktrees === worktreesForProject
        && cached.rootBranch === rootBranch
+        && cached.worktreeBranchesKey === worktreeBranchesKey
        && cached.isRepo === isRepo
        && cached.buildGroupedSessions === buildGroupedSessions
      ) {
@@ -118,6 +134,19 @@ export const useSessionSidebarSections = (args: Args) => {
      }

      rebuiltSections += 1;
+      if (cached) {
+        // Diagnostic: name what invalidated the cached section so a sidebar
+        // that rebuilds on every session switch can be traced to its input.
+        const reason = cached.project !== project ? 'project'
+          : !sameSessions(cached.activeSessions, activeSessions) ? 'sessions'
+          : !sameSessions(cached.archivedSessions, archivedSessions) ? 'archived'
+          : cached.availableWorktrees !== worktreesForProject ? 'worktrees'
+          : cached.rootBranch !== rootBranch ? 'branch'
+          : cached.worktreeBranchesKey !== worktreeBranchesKey ? 'worktreeBranches'
+          : cached.isRepo !== isRepo ? 'repo'
+          : 'builder';
+        streamPerfCount(`ui.sidebar.project_section.rebuilt_reason.${reason}`);
+      }
      const projectSessions = dedupeSessionsById([...activeSessions, ...archivedSessions]);
      const groups = buildGroupedSessions(
        projectSessions,
@@ -133,6 +162,7 @@ export const useSessionSidebarSections = (args: Args) => {
        archivedSessions,
        availableWorktrees: worktreesForProject,
        rootBranch,
+        worktreeBranchesKey,
        isRepo,
        buildGroupedSessions,
        section,
@@ -152,6 +182,7 @@ export const useSessionSidebarSections = (args: Args) => {
    lastRepoStatus,
    buildGroupedSessions,
    projectRootBranches,
+    gitBranches,
  ]);

  const visibleProjectSections = React.useMemo(() => {
@@ -23,7 +23,8 @@ import { Icon } from "@/components/icon/Icon";
 import { buildExportFilename, downloadAsMarkdown, formatSessionAsMarkdown, getExportRevealLabelKey, revealExportedMarkdown, saveAsMarkdownDesktop } from '@/lib/exportSession';
 import type { ChildSessionExport } from '@/lib/exportSession';
 import { useGlobalSessionStatus, useSessionPermissions, useSessionQuestionCount } from '@/sync/sync-context';
-import { useSessionMessageRecordsForExport } from '@/sync/use-sync';
+import { usePrefetchSessionMessages, useSessionMessageRecordsForExport } from '@/sync/use-sync';
+import { getSyncSessionMaterializationStatus } from '@/sync/sync-refs';
 import { useViewportStore, viewportSessionKey } from '@/sync/viewport-store';
 import { DraggableSessionRow } from '../folders/sessionFolderDnd';
 import { canShowSessionWorktreeMenu, getSessionWorktreeMenuDisabled, nodeContainsSessionId, nodeHasPinnedMembershipChange, selectQuestionBadgeSessionScopes, selectRowBadgeVisibilityClass } from './sessionNodeItemUtils';
@@ -406,6 +407,10 @@ function SessionNodeItemComponent(props: SessionNodeItemProps): React.ReactNode
  // selection must survive mixing sessions from different worktrees.
  const selectionScopeKey = projectId ?? sessionDirectory ?? null;
  const loadExportRecords = useSessionMessageRecordsForExport();
+  const prefetchSessionMessages = usePrefetchSessionMessages();
+  // Same gate as the sidebar's neighbor prefetch: the VS Code webview keeps
+  // its message traffic to what is actually opened.
+  const prefetchOnPressDisabled = isVSCode;

  const selectionModeEnabled = useSessionMultiSelectStore((state) => state.enabled);
  const isRowSelected = useSessionMultiSelectStore(
@@ -908,6 +913,20 @@ function SessionNodeItemComponent(props: SessionNodeItemProps): React.ReactNode
    if (mobileVariant && event.pointerType === 'touch') {
      setIsTouchPressed(true);
    }
+    // The press is the earliest signal that this row is about to be opened.
+    // Starting the message load here puts the request on the wire before the
+    // click handler and the render it triggers, so a cold open overlaps the
+    // network round trip with that work instead of waiting for it.
+    if (
+      event.button === 0
+      && !isActive
+      && !selectionModeEnabled
+      && !prefetchOnPressDisabled
+      && sessionDirectory
+      && !getSyncSessionMaterializationStatus(session.id, sessionDirectory).renderable
+    ) {
+      void prefetchSessionMessages({ directory: sessionDirectory, sessionID: session.id }).catch(() => undefined);
+    }
  };
  const handleRowPointerEnd = (event: React.PointerEvent<HTMLButtonElement>) => {
    if (mobileVariant && event.pointerType === 'touch') {
@@ -1334,6 +1353,7 @@ function SessionNodeItemComponent(props: SessionNodeItemProps): React.ReactNode
                data-session-row={session.id}
                data-session-scope={selectionScopeKey ?? ''}
                data-session-archived={archivedBucket ? '1' : '0'}
+                aria-current={isActive ? 'page' : undefined}
                onClick={handleRowBackgroundClick}
                // Row geometry mirrors the zone-header band: full container
                // width, px-1.5 inner edge, a 14px icon-wide gutter (status
@@ -1707,24 +1727,27 @@ const areSessionRenderSemanticsEqual = (prev: Session, next: Session): boolean =
  && prev.time?.archived === next.time?.archived
 );

-const areSessionNodeItemPropsEqual = (prev: SessionNodeItemProps, next: SessionNodeItemProps): boolean => {
-  if (prev.node.session.id !== next.node.session.id) return false;
-  if (!areSessionRenderSemanticsEqual(prev.node.session, next.node.session)) return false;
-  if (!areNodeWorktreeRenderSemanticsEqual(prev.node, next.node)) return false;
-  if (prev.depth !== next.depth) return false;
-  if (prev.groupDirectory !== next.groupDirectory) return false;
-  if (prev.projectId !== next.projectId) return false;
-  if (prev.archivedBucket !== next.archivedBucket) return false;
-  if ((prev.renderContext ?? 'project') !== (next.renderContext ?? 'project')) return false;
-  if (prev.mobileVariant !== next.mobileVariant) return false;
-  if (prev.alwaysShowActions !== next.alwaysShowActions) return false;
-  if (prev.hasSessionSearchQuery !== next.hasSessionSearchQuery) return false;
-  if (prev.normalizedSessionSearchQuery !== next.normalizedSessionSearchQuery) return false;
-  if (prev.notifyOnSubtasks !== next.notifyOnSubtasks) return false;
-  if (prev.nodeStructureKey !== next.nodeStructureKey) return false;
-  if (prev.relativeTimeTick !== next.relativeTimeTick) return false;
-  if (getNodeSessionDirectory(prev.node) !== getNodeSessionDirectory(next.node)) return false;
-  if (!isSecondaryMetaEqual(prev.secondaryMeta, next.secondaryMeta)) return false;
+// Returns the name of the first prop whose change requires a render, or null
+// when the row can skip it. The name feeds the stream perf counters so sidebar
+// churn is explained, not only counted.
+const sessionNodeItemPropsChange = (prev: SessionNodeItemProps, next: SessionNodeItemProps): string | null => {
+  if (prev.node.session.id !== next.node.session.id) return 'node';
+  if (!areSessionRenderSemanticsEqual(prev.node.session, next.node.session)) return 'node';
+  if (!areNodeWorktreeRenderSemanticsEqual(prev.node, next.node)) return 'node';
+  if (prev.depth !== next.depth) return 'depth';
+  if (prev.groupDirectory !== next.groupDirectory) return 'groupDirectory';
+  if (prev.projectId !== next.projectId) return 'projectId';
+  if (prev.archivedBucket !== next.archivedBucket) return 'archivedBucket';
+  if ((prev.renderContext ?? 'project') !== (next.renderContext ?? 'project')) return 'renderContext';
+  if (prev.mobileVariant !== next.mobileVariant) return 'mobileVariant';
+  if (prev.alwaysShowActions !== next.alwaysShowActions) return 'alwaysShowActions';
+  if (prev.hasSessionSearchQuery !== next.hasSessionSearchQuery) return 'hasSessionSearchQuery';
+  if (prev.normalizedSessionSearchQuery !== next.normalizedSessionSearchQuery) return 'normalizedSessionSearchQuery';
+  if (prev.notifyOnSubtasks !== next.notifyOnSubtasks) return 'notifyOnSubtasks';
+  if (prev.nodeStructureKey !== next.nodeStructureKey) return 'nodeStructureKey';
+  if (prev.relativeTimeTick !== next.relativeTimeTick) return 'relativeTimeTick';
+  if (getNodeSessionDirectory(prev.node) !== getNodeSessionDirectory(next.node)) return 'nodeDirectory';
+  if (!isSecondaryMetaEqual(prev.secondaryMeta, next.secondaryMeta)) return 'secondaryMeta';

  if (prev.pinnedSessionIds !== next.pinnedSessionIds
    && nodeHasPinnedMembershipChange(
@@ -1735,11 +1758,11 @@ const areSessionNodeItemPropsEqual = (prev: SessionNodeItemProps, next: SessionN
      prev.groupDirectory,
      next.groupDirectory,
    )) {
-    return false;
+    return 'pinnedSessionIds';
  }

  if (prev.expandedParents !== next.expandedParents && hasExpansionMembershipChange(prev, next)) {
-    return false;
+    return 'expandedParents';
  }

  if (prev.editingId !== next.editingId
@@ -1747,7 +1770,7 @@ const areSessionNodeItemPropsEqual = (prev: SessionNodeItemProps, next: SessionN
      subtreeContainsSession(prev, prev.editingId, prev.subtreeContainsEditing)
      || subtreeContainsSession(next, next.editingId, next.subtreeContainsEditing)
    )) {
-    return false;
+    return 'editingId';
  }

  if (prev.editTitle !== next.editTitle
@@ -1755,7 +1778,7 @@ const areSessionNodeItemPropsEqual = (prev: SessionNodeItemProps, next: SessionN
      subtreeContainsSession(prev, prev.editingId, prev.subtreeContainsEditing)
      || subtreeContainsSession(next, next.editingId, next.subtreeContainsEditing)
    )) {
-    return false;
+    return 'editTitle';
  }

  if (prev.copiedSessionId !== next.copiedSessionId
@@ -1763,18 +1786,18 @@ const areSessionNodeItemPropsEqual = (prev: SessionNodeItemProps, next: SessionN
      nodeContainsSessionId(prev.node, prev.copiedSessionId)
      || nodeContainsSessionId(next.node, next.copiedSessionId)
    )) {
-    return false;
+    return 'copiedSessionId';
  }

  if (prev.openSidebarMenuKey !== next.openSidebarMenuKey) {
    const prevMenuSessionId = getRelevantMenuSessionId(prev);
    const nextMenuSessionId = getRelevantMenuSessionId(next);
    if (nodeContainsSessionId(prev.node, prevMenuSessionId) || nodeContainsSessionId(next.node, nextMenuSessionId)) {
-      return false;
+      return 'openSidebarMenuKey';
    }
  }

-  return prev.setEditingId === next.setEditingId
+  const callbacksEqual = prev.setEditingId === next.setEditingId
    && prev.setEditTitle === next.setEditTitle
    && prev.handleSaveEdit === next.handleSaveEdit
    && prev.handleCancelEdit === next.handleCancelEdit
@@ -1791,6 +1814,15 @@ const areSessionNodeItemPropsEqual = (prev: SessionNodeItemProps, next: SessionN
    && prev.handleRestoreSession === next.handleRestoreSession
    && prev.startSessionWorktreeMenuLoad === next.startSessionWorktreeMenuLoad
    && prev.children === next.children;
+  if (!callbacksEqual) return 'callbacks';
+  return null;
+};
+
+const areSessionNodeItemPropsEqual = (prev: SessionNodeItemProps, next: SessionNodeItemProps): boolean => {
+  const changed = sessionNodeItemPropsChange(prev, next);
+  if (changed === null) return true;
+  streamPerfCount(`ui.sidebar_session_node.props_changed.${changed}`);
+  return false;
 };

 export const SessionNodeItem = React.memo(SessionNodeItemComponent, areSessionNodeItemPropsEqual);
@@ -97,15 +97,23 @@ export function SessionTreeItem({
  const toggleFolderCollapse = useSessionFoldersStore((state) => state.toggleFolderCollapse);
  const showDeletionDialog = useUIStore((state) => state.showDeletionDialog);
  const setShowDeletionDialog = useUIStore((state) => state.setShowDeletionDialog);
-  const descendantIds = React.useMemo(() => {
+  // Keyed by the descendant ids themselves, not by node identity: the sidebar
+  // rebuilds a project's node tree whenever one of its session records
+  // changes, and a fresh array here would give every row in that project a
+  // new delete handler and force it to re-render.
+  const descendantIdsKey = React.useMemo(() => {
    const ids: string[] = [];
    const visit = (current: SessionNode) => current.children.forEach((child) => {
      ids.push(child.session.id);
      visit(child);
    });
    visit(node);
-    return ids;
+    return ids.join('\n');
  }, [node]);
+  const descendantIds = React.useMemo(
+    () => (descendantIdsKey ? descendantIdsKey.split('\n') : []),
+    [descendantIdsKey],
+  );
  const createFolderAndStartRename = React.useCallback((scopeKey: string, parentId?: string | null) => {
    if (!scopeKey) return null;
    if (parentId && useSessionFoldersStore.getState().collapsedFolderIds.has(parentId)) toggleFolderCollapse(parentId);