feat(web): mermaid diagram lightbox / maximize on click

[heavygee]

Summary

Mermaid diagrams render inline in assistant markdown (#567) but cannot be opened full-screen or zoomed. Chat images already use a lightbox (#715, polish in #723). Operators expect the same affordance for diagrams: tap/click to maximize, especially on mobile.

Problem

MermaidDiagram (web/src/components/assistant-ui/mermaid-diagram.tsx) renders SVG via dangerouslySetInnerHTML with horizontal scroll only. There is no cursor-zoom-in, no modal viewer, and no way to inspect dense flowcharts on a phone.

Related work

PR	What it ships
#567	Inline mermaid render in chat
#715	Shared ImagePreview (zoom/pan/full-screen) for attachments
#723	Lightbox interaction polish (backdrop dismiss, propagation)
#509	Tool-result inline images + lightbox (not mermaid)

Proposal

1. Per-diagram maximize (required)

• Wrap each rendered [data-mermaid-diagram] block in a clickable surface (cursor-zoom-in, keyboard: Enter/Space).
• On activate: open modal/sheet reusing ImagePreview interaction model (pinch/wheel zoom, pan, backdrop close) OR a thin shared MediaLightbox shell used by images + mermaid.
• Prefer re-render from source at larger size: store data-mermaid-source (escaped) on the container; modal calls mermaid.render() again rather than scaling rasterized inline SVG only.
• Preserve theme (data-theme light/dark) in modal render.

2. Per-message "all diagrams" view (nice-to-have, can be follow-up)

• When an assistant message contains N > 1 mermaid blocks, show a compact control (e.g. "View N diagrams") in the message chrome or on first diagram.
• Opens scrollable full-screen gallery; each item uses the same viewer as (1).

3. Accessibility

• Focus trap in modal; Escape closes.
• aria-label on diagram trigger: "Open diagram full screen".

Acceptance criteria

• Click/tap a rendered mermaid diagram in chat → full-screen (or near full-screen) viewer opens.
• Viewer supports zoom in/out and pan (parity with image lightbox gestures where platform allows).
• Backdrop click and Escape dismiss viewer; click on diagram does not bubble to message actions (#723 pattern).
• Failed mermaid fallback (data-rendered="false") is not clickable.
• Dark/light theme matches app theme in modal.
• No regression to inline render or horizontal scroll for small diagrams.
• (Optional follow-up) Messages with multiple diagrams expose "view all" entry point.

Implementation notes

• Touch points: mermaid-diagram.tsx, possibly extract shared viewer from web/src/components/ImagePreview.tsx.
• Tests: extend mermaid-diagram.test.tsx for click opens viewer; optional live test for re-render in modal.
• Security: keep securityLevel: 'strict' on mermaid init; modal must not execute arbitrary HTML from model output beyond mermaid SVG.

Non-goals

• Export to PNG/SVG download (separate enhancement).
• Editing mermaid source in viewer.

[github-actions]

Confirmed. Current web code renders Mermaid diagrams inline only; image lightbox behavior exists separately and is already used for attachments/generated images/file previews.

The requested behavior is not currently implemented for Mermaid: MermaidDiagram renders SVG into an overflow container, sets data-rendered=\"true\", and falls back to a non-rendered <pre> on render failure. I did not find a Mermaid-specific modal/lightbox or click handler in the current component.

Implementation should likely start in MermaidDiagram and either reuse/refactor the existing ImagePreview viewer behavior or extract a shared viewer shell, while preserving securityLevel: 'strict' and the existing failed-render fallback.

Relevant code:

• web/src/components/assistant-ui/mermaid-diagram.tsx:24 - Mermaid initialization uses securityLevel: 'strict' and theme-specific config.
• web/src/components/assistant-ui/mermaid-diagram.tsx:122 - failed render returns fallback with data-rendered=\"false\".
• web/src/components/assistant-ui/mermaid-diagram.tsx:126 - successful render returns inline data-mermaid-diagram container with horizontal overflow and injected SVG.
• web/src/components/assistant-ui/markdown-text.tsx:47 - markdown language override wires mermaid code blocks to MermaidDiagram.
• web/src/components/ImagePreview.tsx:26 - existing image preview/lightbox component with modal state.
• web/src/components/ImagePreview.tsx:85 - existing wheel zoom handling.
• web/src/components/ImagePreview.tsx:105 - existing pointer drag/pinch handling.
• web/src/components/ImagePreview.tsx:193 - existing Escape/keyboard zoom/reset handling.
• web/src/components/AssistantChat/messages/MessageAttachments.tsx:15 - chat image attachments use ImagePreview with cursor-zoom-in.
• web/src/components/assistant-ui/mermaid-diagram.test.tsx:21 - current Mermaid test coverage only verifies wiring/render/security initialization.

---

HAPI Bot