Use shared Shiki highlighting for chat markdown code fences

[juliusmarminge]

Summary

• Replace rehype-highlight/highlight.js in chat markdown with shared Shiki highlighting via @pierre/diffs.
• Add async code-fence rendering in ChatMarkdown with in-flight deduping plus LRU-based caching, and bypass cache while messages are streaming.
• Wire chat rendering to streaming state (isStreaming) so partial responses render safely before final cached highlight.
• Extract shared diff theme resolution into src/lib/diffThemes.ts and reuse it in diff panel/worker theme sync.
• Add unit tests for the new LRUCache utility and remove obsolete highlight CSS/dependencies.

Testing

• apps/web/src/lib/lruCache.test.ts: verifies cache miss behavior, max-entry eviction, LRU promotion semantics, and memory-budget eviction.
• Project lint: Not run.
• Full test suite: Not run.

---

Note

Medium Risk
Changes markdown code-block rendering to async dangerouslySetInnerHTML output with caching and streaming-aware behavior, which could affect rendering correctness/performance and introduces some XSS/regression risk if highlighting output isn’t properly escaped. Diff UI theming is also adjusted via injected unsafeCSS, which may cause visual regressions.

Overview
Chat markdown code fences now use shared Shiki highlighting instead of rehype-highlight/highlight.js. ChatMarkdown switches to a Suspense-based async highlighter from @pierre/diffs, adds a code-block copy button, and introduces an LRU cache (bypassed while messages are streaming) to reuse highlighted HTML.

Diff theming/styling is consolidated and adjusted. Theme name resolution is centralized in lib/diffRendering and reused by the diff panel and worker pool; the diff panel also injects new unsafeCSS plus minor surface/background class changes to better match the app palette.

Cleanup and tests. Removes highlight.js/rehype-highlight dependencies and CSS import, and adds unit tests for the new LRUCache utility.

^{Written by Cursor Bugbot for commit c0f8c29. This will update automatically on new commits. Configure here.}

Note

Switch chat markdown code fences to shared Shiki highlighting via @pierre/diffs and remove highlight.js/rehype-highlight from the web app

Replace rehype-based highlighting with Shiki in ChatMarkdown, add theme-aware rendering and a copy button for code blocks, introduce an LRU cache for highlighted HTML, and pass a streaming flag from ChatView. Update diff panel theming and remove legacy highlight assets.

📍Where to Start

Start with ChatMarkdown rendering and Shiki integration in ChatMarkdown.tsx.

📊 Macroscope summarized c832b7c. 6 files reviewed, 6 issues evaluated, 0 issues filtered, 2 comments posted

🗂️ Filtered Issues

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codething/dfc16aa0

---

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

[macroscopeapp]

🟠 High components/ChatMarkdown.tsx:168

Calling useMemo and useEffect after the conditional return on line 172 violates the Rules of Hooks. If a re-render hits the cache after an initial miss, React will throw "Rendered fewer hooks than during the previous render." Consider moving all hooks before the conditional return.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file apps/web/src/components/ChatMarkdown.tsx around line 168:

Calling `useMemo` and `useEffect` after the conditional return on line 172 violates the Rules of Hooks. If a re-render hits the cache after an initial miss, React will throw "Rendered fewer hooks than during the previous render." Consider moving all hooks before the conditional return.

Evidence trail:
apps/web/src/components/ChatMarkdown.tsx lines 160-199 at REVIEWED_COMMIT. Line 172 shows conditional return `if (cachedHighlightedHtml != null)`. Lines 180-183 show `useMemo` call after the conditional. Lines 185-193 show `useEffect` call after the conditional. React Rules of Hooks documentation: https://react.dev/reference/rules/rules-of-hooks

[macroscopeapp]

🟡 Medium components/ChatMarkdown.tsx:44

Consider handling rejected promises in getHighlighterPromise — if getSharedHighlighter fails, the rejected promise stays cached forever, breaking that language until page reload. Adding a .catch() to delete the entry on failure would fix this.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file apps/web/src/components/ChatMarkdown.tsx around line 44:

Consider handling rejected promises in `getHighlighterPromise` — if `getSharedHighlighter` fails, the rejected promise stays cached forever, breaking that language until page reload. Adding a `.catch()` to delete the entry on failure would fix this.

Evidence trail:
apps/web/src/components/ChatMarkdown.tsx lines 44, 94-105 at REVIEWED_COMMIT: `highlighterPromiseCache` is a Map that caches promises. Line 103 stores the promise immediately via `highlighterPromiseCache.set(language, promise)`. Lines 95-96 return the cached promise without checking rejection state. No `.catch()` handler exists to remove failed promises from the cache.

[macroscopeapp]

🟢 Low components/ChatMarkdown.tsx:44

highlighterPromiseCache can grow unbounded with arbitrary language keys (including partials while streaming). Consider validating language against SupportedLanguages before caching, or replacing the Map with an LRUCache.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file apps/web/src/components/ChatMarkdown.tsx around line 44:

`highlighterPromiseCache` can grow unbounded with arbitrary language keys (including partials while streaming). Consider validating `language` against `SupportedLanguages` before caching, or replacing the `Map` with an `LRUCache`.

Evidence trail:
apps/web/src/components/ChatMarkdown.tsx: Line 44 shows `highlighterPromiseCache = new Map<string, Promise<DiffsHighlighter>>()` (unbounded Map). Lines 38-41 show `highlightedCodeCache = new LRUCache<string>(MAX_HIGHLIGHT_CACHE_ENTRIES, MAX_HIGHLIGHT_CACHE_MEMORY_BYTES)` (bounded). Lines 100-111 show `getHighlighterPromise` adds entries without any cleanup/eviction. Line 108 uses `language as SupportedLanguages` - type assertion only, no runtime validation. apps/web/src/lib/lruCache.ts shows LRUCache implementation with `evictIfNeeded` - this is not used for highlighterPromiseCache.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is ON, but it could not run because the spend limit has been reached. To enable Bugbot Autofix, raise your spend limit in the Cursor dashboard.}

[cursor]

Conditional return before hooks violates Rules of Hooks

High Severity

SuspenseShikiCodeBlock has a conditional early return before useMemo and useEffect are called. While React 19's use() is allowed conditionally, useMemo and useEffect are not — they must be called in the same order on every render. When a code block transitions from cache-miss (all hooks called) to cache-hit (early return, no hooks called), React will throw "Rendered fewer hooks than expected" and crash the component tree.

Additional Locations (1)

• apps/web/src/components/ChatMarkdown.tsx#L181-L195