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:
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* Coordinates the first paint of a freshly opened session so the timeline
|
||||
* appears as one finished picture instead of arriving in pieces.
|
||||
*
|
||||
* Renderers that mount with a provisional paint (markdown whose blocks are not
|
||||
* in the settled cache yet, so code is unhighlighted) take a hold while they
|
||||
* catch up. The timeline stays invisible while any hold is open, then reveals
|
||||
* everything at once. The gate accepts holds only during the opening commit:
|
||||
* rows that mount later, while scrolling, must never hide the timeline.
|
||||
*
|
||||
* A hold that never releases must not hide the chat forever, so the owner
|
||||
* reveals after `TIMELINE_REVEAL_CAP_MS` regardless.
|
||||
*/
|
||||
type TimelineRevealGate = {
|
||||
/** Take a hold; returns the release. Returns null once the gate is closed. */
|
||||
hold: () => (() => void) | null;
|
||||
/** Stops accepting holds. Existing holds still count. */
|
||||
close: () => void;
|
||||
readonly holds: number;
|
||||
/** Called when the last hold releases, if the gate is closed by then. */
|
||||
onEmpty: (() => void) | null;
|
||||
};
|
||||
|
||||
export const TIMELINE_REVEAL_CAP_MS = 250;
|
||||
|
||||
export const createTimelineRevealGate = (): TimelineRevealGate => {
|
||||
let holds = 0;
|
||||
let accepting = true;
|
||||
const gate: TimelineRevealGate = {
|
||||
hold: () => {
|
||||
if (!accepting) return null;
|
||||
holds += 1;
|
||||
let released = false;
|
||||
return () => {
|
||||
if (released) return;
|
||||
released = true;
|
||||
holds -= 1;
|
||||
if (holds === 0 && !accepting) gate.onEmpty?.();
|
||||
};
|
||||
},
|
||||
close: () => {
|
||||
accepting = false;
|
||||
},
|
||||
get holds() {
|
||||
return holds;
|
||||
},
|
||||
onEmpty: null,
|
||||
};
|
||||
return gate;
|
||||
};
|
||||
|
||||
export const TimelineRevealGateContext = React.createContext<TimelineRevealGate | null>(null);
|
||||
Reference in New Issue
Block a user