Split streaming markdown into settled prefix + live tail; gate mermaid; row containment (C1, C3, C4)

[SawyerHood]

What was wrong

• The in-progress assistant message re-ran the whole react-markdown pipeline on every text delta (MarkdownPreview memoizes on content ===), 2-5 full parses per second of a growing document, 10-30 ms each on a phone (C3).
• Mermaid blocks called mermaid.render on mount and on every streaming delta, with no viewport gate and no reuse of a previous SVG (C4).
• Every loaded top-level timeline row stayed in layout/paint; each style/layout pass on a phone (keyboard, orientation, streaming growth) walked all mounted rows (C1 step 1).

What changed

• streaming-markdown-split.ts: splitStreamingMarkdown(text) returns a settled prefix and a live tail. The boundary is the last blank line that is outside an open fenced block / $$ math block / list continuation and is followed by a complete line, so the boundary only moves forward as text streams. ConversationMessageContent renders the streaming assistant row as two memoized MarkdownPreview documents (settled + tail) and falls back to one document when no boundary exists or when the row is complete. Seam classes restore the last:mb-0 / first:mt-0 margins at the split so completion does not shift layout. ThreadTimelineRows computes the streaming row (findStreamingAssistantMessageId: trailing leaf row while the runtime runs, descending pending turns and pending delegations) and provides it through a context; delegation output uses the split while pending.
• markdown-mermaid-render-cache.ts + MarkdownMermaidDiagram: one shared IntersectionObserver gates the first render (256px root margin); source changes after the first render are debounced 300 ms trailing and keep the previous SVG visible; rendered SVGs are stored in a 32-entry LRU keyed by (source, theme, palette epoch); a cached diagram paints synchronously on mount.
• timeline-row-containment.ts + TimelineRowsList: top-level row wrappers get max-md:[content-visibility:auto] max-md:[contain-intrinsic-block-size:auto_1.25rem]; conversation rows add an inline length-based contain-intrinsic-block-size estimate (bucketed). Nested lists keep plain wrappers. Compact-only because paint containment clips the assistant table breakout on wide layouts.

How you verified

• New tests: streaming-markdown-split.test.ts (fences incl. marker matching, $$ blocks and inline $$x$$, loose lists / indented continuation, headings, monotonic boundary while streaming); ConversationMessageContent.streaming.test.tsx (mocks react-markdown to count parses: only the tail re-parses per delta, boundary moves forward, completion collapses to one document, open fence stays in the tail); ThreadTimelineRows.streaming.test.ts (streaming row selection incl. pending turn children, pending delegation childRows, completed turn -> null); markdown-mermaid-diagram.render.test.tsx (no render before viewport entry, one shared observer, 300 ms debounce keeps previous SVG, remount served from cache without calling mermaid, LRU eviction); ThreadTimelineRows.containment.test.tsx (top-level wrappers get the class + conversation rows carry the estimate, nested wrappers do not).
• pnpm exec turbo run typecheck --filter=@bb/app: pass. pnpm exec turbo run lint --filter=@bb/app: 0 errors, 147 warnings (same count as baseline; touched files carry the same 12 pre-existing warnings as before). pnpm exec turbo run test --filter=@bb/app -- src/components/thread/timeline src/components/ui/markdown-* src/components/thread/embedded-chat/EmbeddedThreadChat.test.tsx src/views/thread-detail: 48 files, 411 tests pass.

Update (2026-08-19)

content-visibility: auto is now armed only where CSS scroll anchoring exists (CSS.supports("overflow-anchor", "none"): Chromium, Firefox). WebKit has no scroll anchoring, so a replayed size that differs from the real row size moved the visible content and read as a flash-and-scroll while a thread settled on iOS. iOS keeps the inert intrinsic-size estimate; Chromium/Firefox keep the layout/paint savings. Test added for the WebKit path.

Fixes: part of the mobile / iOS Safari performance program (verified sweep report in the bb thread; no single issue).

Stack context

Layer 20 of 22 in the bb/mobile-perf/* stack (bottom → top: quick wins first, big rocks last).

• Prerequisite (layer below): bb/mobile-perf/rerender-amplifiers (Remove re-render amplifiers across slots, contexts, banners and the prompt area (C6-C13, D2, D4, E9, E11, E12, H8) #1898).
• Next layer: bb/mobile-perf/mobile-interactions (Phone interactions: long-press menu, touch listeners, sidebar across routes, composer retention (E1, E6, E7, E10, D3, J3, J4, I6, B28) #1900).
• Audit findings addressed: see title IDs. Review: approved-with-fixes; 1 review fix commit(s).
• Reviewer notes / follow-ups: C1 still needs an iOS Simulator pass (Linux review box; caniuse confirms iOS Safari through 26.3 has no scroll anchoring). With the fix, rows are laid out once before opting in, so | C3 (design trade-off, not fixed): plugin message-directive components and stateful markdown widgets (code-block wrap toggle) that sit in the live tail remount when the boundary mov | C4: cached SVGs reuse the first renderer's element ids, so two simultaneously mounted copies of the same diagram (e.g. split view of the same thread) share ids; visually identical | C1: paint containment can clip the assistant table breakout by ~2px inside expanded turn bodies on compact (nested list is pl-3/pr-2 asymmetric). Negligible.
• Wire/contract: None. No server/daemon wire, route, command or protocol-version change. New required prop streaming: boolean on the assistant variant of ConversationMessageContent (app-internal component contract; stories/tests updated).

AGENT GENERATED: by Claude Opus 5