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:
@@ -72,8 +72,8 @@ import { useChatSearchDirectory } from '@/hooks/useChatSearchDirectory';
|
||||
import { opencodeClient } from '@/lib/opencode/client';
|
||||
import { useGitStore, useIsGitRepo } from '@/stores/useGitStore';
|
||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
import { useSkillsStore } from '@/stores/useSkillsStore';
|
||||
import { useCommandsStore } from '@/stores/useCommandsStore';
|
||||
import { selectSkillsForDirectory, useSkillsStore } from '@/stores/useSkillsStore';
|
||||
import { selectCommandsForDirectory, useCommandsStore } from '@/stores/useCommandsStore';
|
||||
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
|
||||
import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
|
||||
import { usePermissionStore } from '@/stores/permissionStore';
|
||||
@@ -602,8 +602,8 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
|
||||
|
||||
// Known slash-invocations (commands + skills + built-ins) used to highlight
|
||||
// matching /tokens in the composer, the same way confirmed @files are.
|
||||
const availableCommands = useCommandsStore((s) => s.commands);
|
||||
const availableSkills = useSkillsStore((s) => s.skills);
|
||||
const availableCommands = useCommandsStore((s) => selectCommandsForDirectory(s, currentDirectory));
|
||||
const availableSkills = useSkillsStore((s) => selectSkillsForDirectory(s, currentDirectory));
|
||||
const knownSlashNames = React.useMemo(() => {
|
||||
const names = new Set<string>([
|
||||
'init', 'review', 'undo', 'redo', 'timeline', 'compact', 'btw', 'summary', 'workspace-review', 'plan-feature', 'craft-goal', 'schedule-task', 'catch-up', 'debug', 'weigh', 'explore',
|
||||
@@ -1140,7 +1140,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
|
||||
: [];
|
||||
|
||||
const availableSkillNames = new Set(
|
||||
useSkillsStore.getState().skills.map((skill) => skill.name),
|
||||
selectSkillsForDirectory(useSkillsStore.getState(), currentDirectory).map((skill) => skill.name),
|
||||
);
|
||||
|
||||
const outgoing = buildOutgoingMessage({
|
||||
@@ -2262,10 +2262,14 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
if (active && currentSessionId && composerRef.current && !isMobile) {
|
||||
composerRef.current.focus();
|
||||
}
|
||||
if (!active || !currentSessionId || isMobile) return;
|
||||
// Focusing forces layout. Right after a session switch the layout is
|
||||
// dirty from the whole timeline mounting, so the focus call would pay
|
||||
// for that layout inside the commit; a frame later it is nearly free.
|
||||
const frame = window.requestAnimationFrame(() => {
|
||||
composerRef.current?.focus();
|
||||
});
|
||||
return () => window.cancelAnimationFrame(frame);
|
||||
}, [active, currentSessionId, isMobile]);
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user