perf: isolate chat streaming renders and reduce sidebar render cost (#1672)

Reworks the chat and session-sidebar render paths to cut render cascades, memory churn, and UI jank on large sessions and big session trees. Behavior is preserved; the changes are about *when* and *how much* the UI re-renders. ## Chat streaming - Freeze the streaming message's parts in the bulk turn projection during streaming, and re-inject live parts only in an isolated tail leaf, so a ~60/sec delta stream no longer re-runs the whole-session projection or re-renders unrelated rows. session with referential reuse of unchanged turns. - Memoize message rows with field-aware comparators instead of reference equality. - Replace the manual child-session polling in the task tool with the live SSE stream + a one-shot load, removing a fetch/settle state machine. ## History loading & scroll - Load an initial page fast, then prepend one older page in the background so the scroll container has headroom and "load older on scroll-up" fires before the user hits the absolute top. - Compensate scroll synchronously (in a layout effect, before paint) for prepends — including background prepends that don't originate from a user scroll — so the viewport stays stable instead of judder-correcting on the next frame. ## Markdown rendering - Render markdown synchronously *styled* on first paint (paragraphs, lists, code cards, tables, inline code) instead of raw escaped text; the async pass then only upgrades syntax-highlight colors. Eliminates the flash of full-width raw text. - Load KaTeX CSS eagerly with the main bundle instead of inside the lazy markdown chunk, avoiding a late stylesheet injection on first render. ## Sidebar - Hoist per-row recursive tree walks out of row comparators into per-group precomputed sets/keys; batch live-session lookups into a single map; add a group-level memo boundary. - Isolate rename drafts so per-keystroke typing doesn't repaint the row tree. ## Sync layer - Add a staleness guard so a slow message fetch can't repopulate a session the user navigated away from. - Throw on fetch failure for authoritative loaders so a transient blip can't read as an empty server response. ## Cleanup - Remove dead code (unused hooks, params, duplicated inline types) surfaced while reworking the above. ## Known issue - A rare, purely cosmetic first-paint width flash can still appear on large sessions; it has no behavioral or data impact and is tracked for a follow-up runtime trace.
2026-06-18 00:43:16 +03:00
parent 077a766f94
commit 59ecd86b4b
47 changed files with 3168 additions and 1829 deletions
@@ -0,0 +1,134 @@
+import { describe, expect, test } from 'bun:test';
+import type { Message, Part } from '@opencode-ai/sdk/v2';
+
+import { buildLiveStreamingEntry, type StreamingTailEntry } from './streamingTailEntry';
+import type { ChatMessageEntry, TurnRecord } from './types';
+
+const message = (id: string, role: 'user' | 'assistant', parentID?: string, parts: Part[] = []): ChatMessageEntry => ({
+    info: {
+        id,
+        role,
+        sessionID: 'ses_1',
+        ...(parentID ? { parentID } : {}),
+        time: { created: 1 },
+    } as Message,
+    parts,
+});
+
+const textPart = (id: string, text: string): Part => ({
+    id,
+    type: 'text',
+    text,
+} as Part);
+
+const syntheticTextPart = (id: string, text: string): Part => ({
+    id,
+    type: 'text',
+    text,
+    synthetic: true,
+} as Part);
+
+const reasoningPart = (id: string, text: string): Part => ({
+    id,
+    type: 'reasoning',
+    text,
+} as Part);
+
+const turnEntry = (assistant: ChatMessageEntry): StreamingTailEntry => {
+    const user = message('user_1', 'user');
+    return {
+        kind: 'turn',
+        key: 'turn:user_1',
+        isLastTurn: true,
+        turn: {
+            turnId: 'user_1',
+            userMessageId: 'user_1',
+            userMessage: user,
+            headerMessageId: assistant.info.id,
+            messages: [],
+            assistantMessageIds: [assistant.info.id],
+            assistantMessages: [assistant],
+            activityParts: [],
+            activitySegments: [],
+            summary: {},
+            hasTools: false,
+            hasReasoning: false,
+            stream: { isStreaming: true, isRetrying: false },
+        } satisfies TurnRecord,
+    };
+};
+
+describe('buildLiveStreamingEntry', () => {
+    test('returns the same entry when the active message is not in the tail', () => {
+        const assistant = message('assistant_1', 'assistant', 'user_1', [textPart('part_1', 'old')]);
+        const entry = turnEntry(assistant);
+
+        const next = buildLiveStreamingEntry(entry, {
+            activeStreamingMessageId: 'assistant_other',
+            liveParts: [textPart('part_live', 'live')],
+            showTextJustificationActivity: true,
+            showTurnChangedFiles: false,
+        });
+
+        expect(next).toBe(entry);
+    });
+
+    test('rebuilds only the streaming turn with live parts', () => {
+        const assistant = message('assistant_1', 'assistant', 'user_1', [textPart('part_1', 'hel')]);
+        const entry = turnEntry(assistant);
+        const liveParts = [reasoningPart('part_1_live', 'thinking')];
+
+        const next = buildLiveStreamingEntry(entry, {
+            activeStreamingMessageId: 'assistant_1',
+            liveParts,
+            showTextJustificationActivity: true,
+            showTurnChangedFiles: false,
+        });
+
+        expect(next).not.toBe(entry);
+        expect(next.kind).toBe('turn');
+        if (next.kind !== 'turn') return;
+        expect(next.turn.assistantMessages[0]?.parts).toBe(liveParts);
+        expect(next.turn.activityParts.length).toBeGreaterThan(0);
+    });
+
+    test('updates an ungrouped streaming message with live parts', () => {
+        const stale = message('assistant_1', 'assistant', undefined, [textPart('part_1', 'old')]);
+        const entry: StreamingTailEntry = {
+            kind: 'ungrouped',
+            key: 'msg:assistant_1',
+            message: stale,
+        };
+        const liveParts = [textPart('part_1_live', 'live')];
+
+        const next = buildLiveStreamingEntry(entry, {
+            activeStreamingMessageId: 'assistant_1',
+            liveParts,
+            showTextJustificationActivity: false,
+            showTurnChangedFiles: false,
+        });
+
+        expect(next).not.toBe(entry);
+        expect(next.kind).toBe('ungrouped');
+        if (next.kind !== 'ungrouped') return;
+        expect(next.message.parts).toBe(liveParts);
+    });
+
+    test('normalizes live tail parts with the display filtering path', () => {
+        const stale = message('assistant_1', 'assistant', 'user_1', [textPart('part_1', 'old')]);
+        const entry = turnEntry(stale);
+        const visible = textPart('part_visible', 'visible');
+        const synthetic = syntheticTextPart('part_synthetic', 'hidden while streaming');
+
+        const next = buildLiveStreamingEntry(entry, {
+            activeStreamingMessageId: 'assistant_1',
+            liveParts: [synthetic, visible],
+            showTextJustificationActivity: true,
+            showTurnChangedFiles: false,
+        });
+
+        expect(next.kind).toBe('turn');
+        if (next.kind !== 'turn') return;
+        expect(next.turn.assistantMessages[0]?.parts).toEqual([visible]);
+    });
+});