Web GUI: render Mermaid fenced code blocks as diagrams in chat messages

[phpmac]

Summary

The Web GUI renders markdown in chat messages, but fenced mermaid code blocks are shown as plain code. Agents frequently emit Mermaid flowcharts / sequence diagrams to explain architecture, pipelines or decision flows, and none of them render in the browser UI — the user only sees raw Mermaid source.

Current behavior

• A mermaid fenced block falls through to the generic code block renderer (packages/client/ui-primitives/src/markdown/CodeBlock.tsx) and displays as source text.

Expected behavior

• Detect lang == "mermaid" on fenced blocks and render the diagram client-side (e.g. lazy-loaded mermaid package), following the same pattern already used for math (katex.tsx).
• On Mermaid parse error, fall back to the plain code block instead of dropping content.
• Respect light/dark theme via mermaid.initialize({ theme }).
• Keep the raw source reachable (e.g. click to toggle diagram/code) for copy-paste.

Where

• Markdown pipeline: packages/client/ui-primitives/src/markdown/ (MarkdownText.tsx, CodeBlock.tsx, render.tsx, parse.ts)
• Precedent for optional client renderers: katex.tsx + apps/web/tests/math-rendering.e2e.ts. A sibling mermaid-rendering.e2e.ts could assert an <svg> is emitted for a simple flowchart TD block, and that a syntax error falls back to the code block.

Notes

• Rendering must be client-side only (Mermaid needs a DOM); the chunk should not load unless a mermaid block actually appears in a message.
• Real-world case: I asked the agent to draw a strategy cover-ladder flow as Mermaid in the session; the GUI just showed a code block and the diagram was unreadable.