perf: reduce UI render fanout and scroll jitter

- Cut broad render fanout across the app by replacing shared-store whole-object subscriptions with leaf selectors, memoizing hot chrome boundaries, and isolating disabled global providers from live session/message state. This keeps header controls, composer toolbars, side panels, and other non-hot UI surfaces from repainting on every assistant update or keystroke.

- Rework sidebar session ordering so recent, project groups, and worktree groups derive from one ordering source while avoiding streaming-time thrash. The sidebar now uses a stabilized session snapshot, preserves structural identity for unchanged rows, reads live row status/details per session, and applies a one-shot sort bump on idle->busy instead of continuously resorting during activity.

- Fix chat/input scroll instability by separating viewport-resize handling from message-growth handling, disabling conflicting native scroll anchoring, and stopping textarea autosize from collapsing on every growth keystroke. This removes the multiline typing jiggle during streaming and reduces unnecessary composer rerenders.

- Also gate voice context wiring behind voice-mode enablement and codify the learned render/scroll/order anti-patterns in AGENTS.md so future changes avoid the same classes of regressions.
This commit is contained in:
Bohdan Triapitsyn
2026-04-04 02:19:55 +03:00
parent c5497e9823
commit 8587db89b1
42 changed files with 1713 additions and 1047 deletions
@@ -1,7 +1,6 @@
import { useSessionUIStore } from '@/sync/session-ui-store';
import { useSessions } from '@/sync/sync-context';
import { useSessionDirectory } from '@/sync/sync-context';
import { useDirectoryStore } from '@/stores/useDirectoryStore';
import type { Session } from '@opencode-ai/sdk/v2';
/**
* Hook that resolves the effective working directory for tabs (Git, Diff, Files, Terminal).
@@ -18,7 +17,7 @@ import type { Session } from '@opencode-ai/sdk/v2';
export const useEffectiveDirectory = (): string | undefined => {
const currentSessionId = useSessionUIStore((s) => s.currentSessionId);
const newSessionDraft = useSessionUIStore((s) => s.newSessionDraft);
const sessions = useSessions();
const currentSessionDirectory = useSessionDirectory(currentSessionId);
const worktreeMap = useSessionUIStore((s) => s.worktreeMetadata);
const fallbackDirectory = useDirectoryStore((s) => s.currentDirectory);
@@ -28,12 +27,8 @@ export const useEffectiveDirectory = (): string | undefined => {
if (worktreeMetadata?.path) {
return worktreeMetadata.path;
}
const currentSession = sessions.find((session) => session.id === currentSessionId);
type SessionWithDirectory = Session & { directory?: string };
const sessionDirectory = (currentSession as SessionWithDirectory | undefined)?.directory;
if (sessionDirectory) {
return sessionDirectory;
if (currentSessionDirectory) {
return currentSessionDirectory;
}
}