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:
@@ -159,8 +159,11 @@ const SessionTabItem: React.FC<{
|
||||
}}
|
||||
data-controls-open={overlayVisible ? 'true' : 'false'}
|
||||
className={cn(
|
||||
// No color transition: activation must snap. A crossfade
|
||||
// here reads as the switch itself being slow, since the
|
||||
// old and new tab trade colors over several frames right
|
||||
// after the click.
|
||||
'session-tab group/session-tab relative flex h-7 w-full min-w-0 select-none items-center rounded-md px-2',
|
||||
'transition-colors duration-75',
|
||||
isActive
|
||||
? 'bg-interactive-selection'
|
||||
: cn(
|
||||
@@ -180,8 +183,15 @@ const SessionTabItem: React.FC<{
|
||||
!suppressControls && 'session-tab-title',
|
||||
)}
|
||||
>
|
||||
{/* Same box as the active content the header renders
|
||||
(a centered column with a block title), so the
|
||||
title sits at the same height before and after
|
||||
activation and does not jump when the tab swaps
|
||||
its content. */}
|
||||
{isActive ? children : (
|
||||
<span className="text-[13px] font-medium leading-4">{title}</span>
|
||||
<div className="flex min-w-0 flex-col justify-center">
|
||||
<span className="block max-w-full overflow-hidden whitespace-nowrap text-[13px] font-medium leading-4">{title}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{showDot ? (
|
||||
|
||||
Reference in New Issue
Block a user