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
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
import type { Message, Part } from '@opencode-ai/sdk/v2/client';
|
|
import type { State } from './types';
|
|
|
|
type UserMessageHistoryRecord = {
|
|
message: Message;
|
|
parts: Part[];
|
|
};
|
|
|
|
export type UserMessageHistorySnapshot = {
|
|
sessionID: string;
|
|
revertMessageID?: string;
|
|
records: UserMessageHistoryRecord[];
|
|
history: string[];
|
|
};
|
|
|
|
const EMPTY_PARTS: Part[] = [];
|
|
const EMPTY_RECORDS: UserMessageHistoryRecord[] = [];
|
|
const EMPTY_HISTORY: string[] = [];
|
|
|
|
export const EMPTY_USER_MESSAGE_HISTORY_SNAPSHOT: UserMessageHistorySnapshot = {
|
|
sessionID: '',
|
|
revertMessageID: undefined,
|
|
records: EMPTY_RECORDS,
|
|
history: EMPTY_HISTORY,
|
|
};
|
|
|
|
const getPartText = (part: Part): string => {
|
|
if (part?.type !== 'text') return '';
|
|
const text = (part as { text?: unknown }).text;
|
|
return typeof text === 'string' ? text : '';
|
|
};
|
|
|
|
const getFirstTextFromParts = (parts: Part[]): string => {
|
|
for (const part of parts) {
|
|
const text = getPartText(part);
|
|
if (text.length > 0) return text;
|
|
}
|
|
return '';
|
|
};
|
|
|
|
const areRecordsEqual = (left: UserMessageHistoryRecord[], right: UserMessageHistoryRecord[]): boolean => {
|
|
if (left === right) return true;
|
|
if (left.length !== right.length) return false;
|
|
for (let index = 0; index < left.length; index += 1) {
|
|
if (left[index]?.message !== right[index]?.message || left[index]?.parts !== right[index]?.parts) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
|
|
export const buildUserMessageHistorySnapshot = (
|
|
state: Pick<State, 'session' | 'message' | 'part'>,
|
|
sessionID: string,
|
|
previous: UserMessageHistorySnapshot = EMPTY_USER_MESSAGE_HISTORY_SNAPSHOT,
|
|
): UserMessageHistorySnapshot => {
|
|
if (!sessionID) {
|
|
return EMPTY_USER_MESSAGE_HISTORY_SNAPSHOT;
|
|
}
|
|
|
|
const messages = state.message[sessionID] ?? [];
|
|
const session = state.session.find((candidate) => candidate.id === sessionID);
|
|
const revertMessageID = (session as { revert?: { messageID?: string } } | undefined)?.revert?.messageID;
|
|
const records: UserMessageHistoryRecord[] = [];
|
|
for (let index = messages.length - 1; index >= 0; index -= 1) {
|
|
const message = messages[index];
|
|
if (message.role !== 'user') {
|
|
continue;
|
|
}
|
|
if (revertMessageID && message.id >= revertMessageID) {
|
|
continue;
|
|
}
|
|
records.push({
|
|
message,
|
|
parts: state.part[message.id] ?? EMPTY_PARTS,
|
|
});
|
|
}
|
|
|
|
if (records.length === 0) {
|
|
return previous.sessionID === sessionID && previous.revertMessageID === revertMessageID && previous.records.length === 0
|
|
? previous
|
|
: { sessionID, revertMessageID, records: EMPTY_RECORDS, history: EMPTY_HISTORY };
|
|
}
|
|
|
|
if (previous.sessionID === sessionID && previous.revertMessageID === revertMessageID && areRecordsEqual(previous.records, records)) {
|
|
return previous;
|
|
}
|
|
|
|
const history: string[] = [];
|
|
for (const record of records) {
|
|
const text = getFirstTextFromParts(record.parts);
|
|
if (text.length > 0) {
|
|
history.push(text);
|
|
}
|
|
}
|
|
|
|
return { sessionID, revertMessageID, records, history };
|
|
};
|