bashrusakh
59ecd86b4b
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.
99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
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']);
|
|
});
|
|
});
|