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.
This commit is contained in:
@@ -88,7 +88,11 @@ const decorateCodeBlocks = (root: HTMLElement, labels: DecorateLabels): void =>
|
||||
// Already wrapped (idempotent across morphdom passes).
|
||||
if (parent.closest('[data-component="markdown-code"]')) continue;
|
||||
|
||||
const language = pre.getAttribute('data-md-lang') ?? 'text';
|
||||
// `data-md-lang` is stamped by the async highlight pass; on the synchronous
|
||||
// first paint it isn't set yet, so fall back to the `language-*` class marked
|
||||
// emits — keeps the card header label stable instead of flashing 'text'.
|
||||
const classLang = pre.querySelector('code')?.className.match(/language-([\w+#.-]+)/)?.[1];
|
||||
const language = pre.getAttribute('data-md-lang') ?? classLang ?? 'text';
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.setAttribute('data-component', 'markdown-code');
|
||||
|
||||
@@ -306,16 +306,6 @@ const sanitize = (html: string): string => {
|
||||
return DOMPurify.sanitize(html, SANITIZE_CONFIG) as unknown as string;
|
||||
};
|
||||
|
||||
const escapeHtml = (text: string): string =>
|
||||
text
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
|
||||
export const fallbackHtml = (markdown: string): string =>
|
||||
escapeHtml(markdown).replace(/\r\n?/g, '\n').replace(/\n/g, '<br>');
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Per-block HTML cache (LRU, mirrors OpenCode's checksum cache)
|
||||
@@ -349,6 +339,22 @@ const parseBlock = async (block: MarkdownBlock): Promise<string> => {
|
||||
return sanitize(highlighted);
|
||||
};
|
||||
|
||||
/**
|
||||
* Synchronous styled render for the first paint, before the async pipeline
|
||||
* (Shiki-in-worker highlight) resolves. Produces the SAME structural HTML as
|
||||
* `renderMarkdownBlocks` minus syntax coloring: paragraphs, lists, code blocks
|
||||
* and bold all render at their final width, so the async pass only upgrades
|
||||
* code-block colors — no flash of full-width raw markdown source. `parser.parse`
|
||||
* is synchronous (marked is not configured `async`), so this never blocks on a
|
||||
* worker round-trip.
|
||||
*/
|
||||
export const renderMarkdownSync = (text: string): string => {
|
||||
if (!text) return '';
|
||||
const parsed = parser.parse(text) as string;
|
||||
const withMath = renderMathExpressions(parsed);
|
||||
return sanitize(withMath);
|
||||
};
|
||||
|
||||
export type RenderedBlock = {
|
||||
// Stable identity across renders for per-block DOM reconciliation. Encodes
|
||||
// content + mode + highlight so any change forces that block (and only that
|
||||
|
||||
Reference in New Issue
Block a user