feat(web): mermaid diagrams in chat (upstream #15067)

[TheDarkPhantom]

What users get

Mermaid code blocks in chat (assistant messages, plans, side questions, anywhere ChatMarkdown renders) now render as diagrams once the response finishes streaming. The block keeps its normal code block header with a new Show code / Show diagram toggle, copy still copies the source, and clicking the diagram opens it in the existing zoomable image dialog. Diagrams follow the light and dark theme. An invalid diagram shows the parser error above the normal highlighted code, so nothing is lost.

How it was ported

Upstream pingdotgg#15067 (by maria), re-expressed against the fork's diverged ChatMarkdown.tsx:

• New apps/web/src/components/chat/MermaidDiagram.tsx carries the upstream render queue, cache, strict Mermaid config, and DOMPurify SVG hardening.
• mermaid and dompurify are both dynamically imported on first diagram, so neither lands in the main bundle (upstream imported DOMPurify statically).
• The fork has no expandMedia context, so the diagram portals the existing ExpandedImageDialog itself and revokes its blob URL on close or unmount.
• The fork's error boundary has no reset keys, so it is keyed by theme plus source instead.
• Mermaid edge animations (opt-in diagram syntax) are forced off so a diagram can never repaint continuously.
• The diagram renders inside the fork's code block chrome rather than upstream's bare layout with actions underneath, so mermaid blocks look like every other code block and the error state can reuse the highlighted source.
• MarkdownCodeBlock gains two optional props (leadingActions, canWrap), and the Shiki subtree is hoisted into a variable so both paths share it.

No follow-up upstream mermaid commits exist after pingdotgg#15067.

Left out

• third-party-licenses.config.json: the fork has no generated npm license notices. apps/web/THIRD_PARTY_NOTICES.md only covers vendored source.
• Upstream feat(web): find in diffs with Cmd+F pingdotgg/t3code#14623 (find in diffs with Cmd+F): the feature is almost entirely an ~870 line patch to @pierre/diffs@1.5.2 dist internals (new CodeViewSearch module, CodeView scroll and reveal hooks). The fork is on @pierre/diffs@1.3.0-beta.10, so porting it means rewriting a library patch against a different internal version. Skipped.

Verification

• tsgo --noEmit -p apps/web/tsconfig.json: clean
• vp lint on changed files: no errors. The 8 no-unstable-nested-components warnings in ChatMarkdown.tsx were already on main.
• vp fmt: clean
• vp test run apps/web/src/markdown-links.test.ts apps/web/src/components/chat/ExpandedImageDialog.test.tsx: 37 passed
• vp run check:avicode: passed. vp run test:avicode: 7/7 passed.
• vp run --filter @t3tools/web build: passed. Mermaid is code-split: mermaid.core 35.9 kB (12.0 kB gzip), purify.es 28.1 kB, and per-diagram chunks such as sequenceDiagram 116 kB, katex 259 kB, and cytoscape 436 kB, all loaded on demand. Mermaid and DOMPurify internals are absent from the index chunk.
• No new automated test: web unit tests run in node without a DOM, and Mermaid needs a real layout engine. Not yet checked in a running client.

🤖 Generated with Claude Code