perf(web): resume syntax highlighting from completed lines

[juliusmarminge]

Growing code fences tokenize every earlier line on each streamed chunk. Resume Shiki from the grammar state after the last completed line and tokenize the changing suffix. This adapts the incremental document work in Legend Code using Shiki's grammar-state API.

Completed messages keep the existing cached path. Non-append edits invalidate the prefix; CR/CRLF, plain text, ANSI and missing grammar state fall back to full highlighting. Multiline syntax and embedded languages retain their grammar context.

Five alternating production-browser runs at 1440 × 1000, each with 10 warm-up updates and 40 measured updates. The fixture starts with 200 TypeScript lines and appends one line per update.

Synchronous client update	Base, including parser layer	This layer
Median of run medians	170.8 ms	120.3 ms
Median of run p95s	211.5 ms	152.6 ms

The median reduction is 29.6%; every paired run improved. This is a deliberately heavy client-rendering workload, not provider throughput or typical-user latency. Probe and samples. The codeToHtmlMs counter excludes direct codeToHast work; the complete synchronous update is the comparison metric.

100 focused Markdown/highlighting tests and web typecheck pass. Actual WASM highlighting matches full output through streaming prefixes across 11 languages and two themes, including multiline comments, strings, heredocs, embedded HTML, edits, truncation and fallback languages. Targeted lint reports two warnings in unchanged code.

This improves streaming code in web and Electron's shared renderer. It does not change mobile, file/diff viewers, the wire protocol or provider adapters. Both hosted and locally served web clients use this code; no transport timing claim is made.

Before:

After:

Before streaming:

https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/2fd3e3038ca91da9/highlight-before-realtime.webm

After streaming:

https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/cd992d3d57a131d6/highlight-after-realtime.webm

The videos reconstruct Chrome screenshot frames with their original timestamps, retaining gaps between paints. They are separate from the unrecorded timing runs. The same synthetic fixture and viewport are used; no private transcripts or credentials are included. No observed new blank frames or color flashes during the exercised stream.

Integration follow-up: rebased on current main; the integrated stack passes 94 focused Markdown/highlighting tests and 159 timeline tests, plus web typecheck. The timing table remains pinned to the original measured builds.

Model: GPT-6. Harness: Codex.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — The PR replaces full streaming syntax highlighting with a stateful grammar/HAST-resumption path in the production chat renderer. Tests cover many languages, themes, edits, and fallbacks, but the runtime algorithm is sufficiently nontrivial that its streaming behavior warrants human review.

No code changes detected at ba2471b. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ No successful main baseline artifact is available yet. This run establishes the initial measurement.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	—	13.6 KiB	—	15.1 KiB	✅
Codex	Thread snapshot wire	—	7.0 KiB	—	7.3 KiB	✅
Codex	Live turn WebSocket wire	—	6.6 KiB	—	7.8 KiB	✅
Codex	Live turn WebSocket decoded	—	57.1 KiB	—	66.4 KiB	✅
Codex	Live turn messages	—	10	—	21	✅
Claude	Total thread wire	—	13.6 KiB	—	15.1 KiB	✅
Claude	Thread snapshot wire	—	7.1 KiB	—	7.3 KiB	✅
Claude	Live turn WebSocket wire	—	6.5 KiB	—	7.8 KiB	✅
Claude	Live turn WebSocket decoded	—	57.8 KiB	—	66.4 KiB	✅
Claude	Live turn messages	—	9	—	21	✅

Baseline: unavailable · PR result: ba2471b · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 113.9 KiB
• Claude decoded thread snapshot: 114.6 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 5c212aaa-db8b-4400-8ed0-2430509ef6c0

📥 Commits

Reviewing files that changed from the base of the PR and between a660ad9 and ba2471b.

📒 Files selected for processing (3)

• apps/web/src/components/ChatMarkdown.tsx
• apps/web/src/lib/incrementalHighlighting.test.ts
• apps/web/src/lib/incrementalHighlighting.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The change adds incremental syntax highlighting for streaming code blocks. It preserves grammar state across complete lines, falls back to full highlighting when needed, and adds tests for languages, themes, edits, truncation, plaintext, ANSI-like input, and line endings.

Changes

Incremental syntax highlighting

Layer / File(s)	Summary
Incremental highlighter implementation apps/web/src/lib/incrementalHighlighting.ts	createIncrementalHighlighter caches grammar state, reuses highlighted nodes, invalidates changed prefixes, and applies full-highlighter fallbacks.
Incremental highlighter validation apps/web/src/lib/incrementalHighlighting.test.ts	Tests compare incremental output with full highlighting across languages, themes, edits, truncation, plaintext, ANSI-like input, and partial CRLF or CR endings.
Streaming code-block integration apps/web/src/components/ChatMarkdown.tsx	Streaming blocks use the incremental highlighter. Non-streaming blocks continue to use full-document highlighting.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Refactor

Sequence Diagram(s)

sequenceDiagram
  participant UncachedShikiCodeBlock
  participant createIncrementalHighlighter
  participant DiffsHighlighter
  UncachedShikiCodeBlock->>createIncrementalHighlighter: Highlight streaming content
  createIncrementalHighlighter->>DiffsHighlighter: Highlight uncached complete lines
  DiffsHighlighter-->>createIncrementalHighlighter: Return highlighted nodes and grammar state
  createIncrementalHighlighter-->>UncachedShikiCodeBlock: Return incremental HTML

Loading

Merge Risk: ⚪ Minimal · up to ba247

The streaming highlighting change has no confirmed current-head issue requiring resolution before merge.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely describes the main change: resuming syntax highlighting from completed lines during streaming.
Description check	✅ Passed	The description explains the change, motivation, implementation scope, performance results, testing, and UI evidence. It does not use the template headings or include the checklist, but it is mostly c…

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch legend-perf/streaming-highlighting

---

_{Comment @coderabbitai help to get the list of available commands.}