feat: option to make mermaid graphs full size

[jschwxrz]

No description provided.

[greptile-apps]

Greptile Summary

This PR adds a "full size" expand option for inline Mermaid diagrams. The existing MermaidDiagram component is split into MermaidDiagramPreview (inline view with a hover-reveal expand button) and MermaidDiagramDialog (a near-fullscreen dialog with zoom/pan/pinch powered by react-zoom-pan-pinch@4).

• Dialog zoom UX: TransformWrapper is re-keyed via an openSession counter (incremented on every open=true + renderKey change) so zoom/pan state is always reset to a fit-to-view on reopen, avoiding the stale-session problem.
• Fit-to-view on init: onInit schedules a requestAnimationFrame that reads wrapperComponent / contentComponent layout dimensions to compute a content-aware initial scale, then derives dynamic minScale/maxScale bounds so the zoom slider range feels proportional to the diagram size.

Confidence Score: 5/5

Safe to merge; the changes are well-scoped and the zoom/session-reset logic is handled correctly.

The refactor correctly splits inline preview from the dialog, the session-keyed TransformWrapper remount reliably resets zoom on every open, fit-to-view dimensions are computed after layout via requestAnimationFrame, and the dynamic zoom bounds are proportional to diagram size. No data flow regressions were found in the changed paths.

No files require special attention.

Important Files Changed

Filename	Overview
src/renderer/lib/ui/mermaid-diagram-dialog.tsx	New file: full-size dialog with zoom/pan/pinch controls using react-zoom-pan-pinch; handles session-keyed remount to reset state on reopen, fit-to-view on init via rAF.
src/renderer/lib/ui/mermaid-diagram-preview.tsx	New file: extracts the inline diagram preview with a hover-revealed expand button; preserves original my-3/my-2 margin and overflow-x-auto styling.
src/renderer/lib/ui/mermaid-diagram.tsx	Refactored: replaces inline JSX with MermaidDiagramPreview + MermaidDiagramDialog, adds isExpanded state; error and loading paths unchanged.
package.json	Adds react-zoom-pan-pinch@^4.0.3 dependency; lock file updated accordingly.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    MC["MermaidDiagram"]
    MDP["MermaidDiagramPreview"]
    MDD["MermaidDiagramDialog"]
    TW["TransformWrapper\nkeyed by renderKey + openSession"]
    TC["TransformComponent\nSVG via dangerouslySetInnerHTML"]
    TB["MermaidToolbar\nzoom in / out / fit / close"]
    FIT["fitDiagramToView\nrAF layout measurement"]
    ZB["ZoomBounds state"]

    MC -->|svg + compact| MDP
    MC -->|open + svg + renderKey| MDD
    MDP -->|onExpand click| MC
    MDD --> TW
    TW -->|onInit| FIT
    FIT --> ZB
    ZB -->|minScale + maxScale props| TW
    TW --> TB
    TW --> TC

Loading

_{Reviews (2): Last reviewed commit: "fix(renderer): reset expanded mermaid di..." | Re-trigger Greptile}

[jschwxrz]

@greptileai