Support Mermaid diagram rendering in fenced code blocks

[onestone1879]

Background

The Web GUI renders assistant markdown through MarkdownText in @deepseek-ai/dsh-client-ui-primitives (markdown renderer under lib/types/markdown/). The pipeline is:

MarkdownText → renderNode → renderCode → CodeBlock

renderCode special-cases exactly one fence language — math — routing it to the KaTeX renderer once streaming has settled (!context.streaming && lang === "math"). Every other language goes to CodeBlock, which only knows the shiki grammar map (TypeScript, shell, …); an unknown language such as mermaid renders as a plain <pre> with the diagram source text and a copy button.

Result: mermaid fences written by the model (e.g. flowcharts in architecture explanations) are shown to users as raw source code instead of diagrams.

Requirements

1. A mermaid fenced code block in a rendered markdown message displays as an actual SVG diagram, not as source text.
2. Rendering timing must match the existing math fence: the diagram renders only after streaming of the message has settled. While a message is still streaming, the block must go through the plain CodeBlock path exactly as it does today.
3. Graceful degradation: if the source fails to parse or render, fall back to the current CodeBlock output so the user still sees the source text and keeps the copy button — the same error-chain philosophy as the KaTeX renderer (strict → strict: 'ignore' → error span).
4. The source must remain retrievable after successful rendering: the copy action keeps copying the mermaid source (optionally a "view source" toggle).
5. Theme awareness: rendered diagrams follow the active theme (light/dark), including re-render/restyle when the theme changes.
6. Sanitization: the SVG produced by mermaid is injected into the DOM; script tags and javascript:-style hrefs must be stripped, consistent with the trust model applied to shiki output.
7. No performance regression: mermaid is a large dependency and must not enter the initial bundle — it should load lazily, only when a mermaid fence is actually encountered.
8. No behavior change for any other fence language.

Recommended implementation approach

Make the seam generic instead of hard-coding mermaid:

1. Extension point in the core renderer

In dsh-client-ui-primitives, introduce a fence-renderer registry beside renderCode, e.g.:

type FenceRenderer = (props: {
  code: string;          // fence body
  lang: string;          // matched fence language
  copyLabel?: string;
  copiedLabel?: string;
}) => ReactElement | null;

registerFenceRenderer(lang: string, renderer: FenceRenderer): () => void;

renderCode consults the registry only when !context.streaming — the same gate as the math arm, so streaming messages keep today's plain CodeBlock. A renderer returning null (or throwing) falls back to CodeBlock. Whether math is migrated onto the same seam or left as-is is secondary; the point is that mermaid (and future diagram languages) no longer require touching the core renderer.

2. New client plugin dsh-client-ui-mermaid

Registers mermaid (plus the mmd alias if desired) on the seam:

• lazy-loads mermaid (dynamic import → separate web chunk) on first use; until the diagram is ready, renders the CodeBlock source (or a placeholder sized to avoid layout shift);
• renders the diagram inside the existing CodeBlock chrome (banner, infostring, copy button) by reusing/exporting CodeBlock from primitives, so requirements 3 and 4 fall out naturally;
• maps the active theme (theme service) to mermaid theme/themeVariables and re-renders on theme change;
• on parse/render failure, returns null so the core falls back to CodeBlock (requirement 3);
• sanitizes the resulting SVG before injection (requirement 6).

3. Composition

One new row in the web profile bundle patch (dsh-web-app cordis.patch.yml, or a dedicated bundle layer):

- id: client-ui-mermaid
  name: '@deepseek-ai/dsh-client-ui-mermaid'

4. Tests / verification

• unit: registry dispatch (registered lang, unknown lang, streaming gate, null fallback);
• component: valid diagram → SVG; invalid source → CodeBlock fallback; theme switch re-render; copy copies the source;
• bundle: confirm mermaid is split into a lazy chunk absent from the initial JS;
• visual: existing languages (ts/shell/math) pixel-unchanged.

Non-goals (for this issue)

• Diagram editing, interactivity (click callbacks), or export in the UI.
• Other diagram languages (plantuml, d2, …) — enabled by the seam but implemented separately.