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.
This commit is contained in:
Bohdan Triapitsyn
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user