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,98 @@
+import { describe, expect, test } from 'bun:test';
+import type { Message, Part } from '@opencode-ai/sdk/v2/client';
+import type { State } from './types';
+
+import { EMPTY_USER_MESSAGE_HISTORY_SNAPSHOT, buildUserMessageHistorySnapshot } from './user-message-history';
+
+const message = (id: string, role: 'user' | 'assistant'): Message => ({
+  id,
+  role,
+  sessionID: 'ses_1',
+  time: { created: 1 },
+} as Message);
+
+const textPart = (id: string, text: string): Part => ({
+  id,
+  type: 'text',
+  text,
+} as Part);
+
+const state = (partial: Partial<State>): Pick<State, 'session' | 'message' | 'part'> => ({
+  session: [],
+  message: {},
+  part: {},
+  ...partial,
+});
+
+describe('buildUserMessageHistorySnapshot', () => {
+  test('returns a shared empty snapshot without a session id', () => {
+    expect(buildUserMessageHistorySnapshot(state({}), '')).toBe(EMPTY_USER_MESSAGE_HISTORY_SNAPSHOT);
+  });
+
+  test('keeps history stable when assistant parts change', () => {
+    const user = message('user_1', 'user');
+    const assistant = message('assistant_1', 'assistant');
+    const userParts = [textPart('part_user', 'hello')];
+    const first = buildUserMessageHistorySnapshot(
+      state({
+        message: { ses_1: [user, assistant] },
+        part: { user_1: userParts, assistant_1: [textPart('part_a', 'stream')] },
+      }),
+      'ses_1',
+    );
+
+    const second = buildUserMessageHistorySnapshot(
+      state({
+        message: { ses_1: [user, assistant] },
+        part: { user_1: userParts, assistant_1: [textPart('part_a2', 'streaming')] },
+      }),
+      'ses_1',
+      first,
+    );
+
+    expect(second).toBe(first);
+    expect(second.history).toEqual(['hello']);
+  });
+
+  test('updates history when a user part changes', () => {
+    const user = message('user_1', 'user');
+    const first = buildUserMessageHistorySnapshot(
+      state({
+        message: { ses_1: [user] },
+        part: { user_1: [textPart('part_user', 'hello')] },
+      }),
+      'ses_1',
+    );
+
+    const second = buildUserMessageHistorySnapshot(
+      state({
+        message: { ses_1: [user] },
+        part: { user_1: [textPart('part_user_updated', 'updated')] },
+      }),
+      'ses_1',
+      first,
+    );
+
+    expect(second).not.toBe(first);
+    expect(second.history).toEqual(['updated']);
+  });
+
+  test('excludes user messages hidden by session revert state', () => {
+    const beforeRevert = message('user_1', 'user');
+    const reverted = message('user_2', 'user');
+
+    const snapshot = buildUserMessageHistorySnapshot(
+      state({
+        session: [{ id: 'ses_1', revert: { messageID: 'user_2' } } as State['session'][number]],
+        message: { ses_1: [beforeRevert, reverted] },
+        part: {
+          user_1: [textPart('part_user_1', 'kept')],
+          user_2: [textPart('part_user_2', 'reverted')],
+        },
+      }),
+      'ses_1',
+    );
+
+    expect(snapshot.history).toEqual(['kept']);
+  });
+});