[opencode-agent]

Mermaid diagrams in a message are fitted to the column, so a wide graph like a state machine ends up with labels too small to read and no way to get closer. This adds a maximize button to every rendered diagram that opens it over the page, where it can be zoomed and moved around.

• Open: a maximize button in the diagram's top-right corner, shown on hover or keyboard focus like the code copy button. It also works for .mmd artifacts, which render through the same Markdown path.
• Zoom: pinch or Cmd/Ctrl + wheel at the cursor, the − / + controls, Cmd/Ctrl + = / -, and double-click to zoom into a spot (again to fit). Clicking the percentage, 0, or the first Escape goes back to fit.
• Navigate: drag or scroll to pan, and arrow keys move the view (Shift moves a whole screen).
• Close: the second Escape, the close button, or a click on the backdrop. Focus returns to the maximize button.

The maximized diagram is a copy of the live SVG, not an image, so it keeps the app's fonts and theme and stays sharp at every zoom. It fits to the window without enlarging past the size it was drawn at, and zooms up to 4× that. The gestures, controls, and shortcuts match the image preview: the shared wheel and shortcut helpers moved from image-preview.tsx into image-zoom.ts, and image preview behavior is unchanged.

Other changes:

• The --pele-* theme variables apply to both the inline and the maximized diagram.
• The code-block button state is generalized so the maximize button shares the copy button's label refresh and disposal.
• New outline-maximize icon.
• New Conversation/Mermaid diagrams → State graph story with a wide state diagram.

Screenshots

The GitHub App can't upload attachments, so the before/after screenshots (dark, light, and narrow) and a short demo video are in the Slack thread for this request. They were taken from the State graph story at 1000×720 @2x, with origin/dev (ed74ec82ce) as the before and this branch as the after.

Visual

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 72" width="240" height="72" fill="none" stroke="currentColor" stroke-width="1"><rect x="6" y="4" width="228" height="64" rx="5" stroke-opacity=".35"><animate attributeName="x" values="84;84;6;6;84" keyTimes="0;.2;.35;.85;1" dur="5s" repeatCount="indefinite"/><animate attributeName="y" values="24;24;4;4;24" keyTimes="0;.2;.35;.85;1" dur="5s" repeatCount="indefinite"/><animate attributeName="width" values="72;72;228;228;72" keyTimes="0;.2;.35;.85;1" dur="5s" repeatCount="indefinite"/><animate attributeName="height" values="24;24;64;64;24" keyTimes="0;.2;.35;.85;1" dur="5s" repeatCount="indefinite"/></rect><path d="M146 27h3v3M149 42v3h-3" stroke-opacity="0"><animate attributeName="stroke-opacity" values="0;.8;0;0;0" keyTimes="0;.1;.2;.95;1" dur="5s" repeatCount="indefinite"/></path><svg x="6" y="4" width="228" height="64" viewBox="6 4 228 64"><g transform="translate(120 36)"><g><animateTransform attributeName="transform" type="scale" values=".3;.3;1;1;1.35;1.35;1;.3" keyTimes="0;.2;.35;.5;.6;.75;.85;1" dur="5s" repeatCount="indefinite"/><g transform="translate(-120 -36)"><g><animateTransform attributeName="transform" type="translate" values="0 0;0 0;0 0;0 0;-30 0;30 0;0 0;0 0" keyTimes="0;.2;.35;.5;.6;.75;.85;1" dur="5s" repeatCount="indefinite"/><rect x="22" y="27" width="40" height="18" rx="4"/><rect x="100" y="27" width="40" height="18" rx="4"/><rect x="178" y="14" width="40" height="18" rx="4"/><rect x="178" y="40" width="40" height="18" rx="4"/><path d="M62 36h36M140 36c18 0 20-13 36-13M140 36c18 0 20 13 36 13" stroke-opacity=".6"/><path d="M95 33l3 3-3 3M173 20l3 3-3 3M173 46l3 3-3 3" stroke-opacity=".6"/></g></g></g></g></svg></svg>

Verified

• bun run typecheck in packages/ui, packages/session-ui and packages/app
• bun run lint:changed
• bun test src in packages/session-ui (313 pass) and image-zoom.test.ts in packages/ui
• Component tests: new mermaid-preview.spec.ts, plus markdown.spec.ts and session-timeline.spec.ts in packages/session-ui (44 passed), and image-preview.spec.ts in packages/app (6 passed)

Requested by: @neriousy (Filip via Slack)

---

Added by the opencode bot (AI-generated).

Fixes #57620

Related: #54800

[opencode-agent]

Looks good. I opened the Mermaid diagrams story in Chromium on the base and on this branch. On the base there is no maximize button. Here the button shows on hover, opens the diagram over the page at its drawn size with the zoom controls, and Escape closes it and returns focus to the button. The new mermaid-preview.spec.ts, plus markdown.spec.ts and session-timeline.spec.ts, all pass (63). bun test src in session-ui and image-zoom.test.ts in ui pass. tsc is clean in packages/ui and packages/session-ui.

The cloned SVG is safe: each render gets its own ID prefix, so the copy's markers still resolve. Escape goes through the dialog stack's existing data-owns-escape, like the image preview, and the shared zoom helpers keep the image preview's behaviour.

Public API: unchanged. The additions are internal UI pieces: a component, an icon, two translation keys and a story.

No blocking concerns.

Fixes #57620
Related: #54800

[opencode-agent]

Since my last review this was only rebased onto beta: the commit's own changes are identical to the version I reviewed, and no earlier points were open. On the new base, tsc is clean in packages/ui and packages/session-ui. The mermaid-preview, markdown and session-timeline component tests pass (63), and so does bun test src in session-ui.

Public API: unchanged.

No new concerns.

[JasonHonKL]

@thdxr please merge this !! it is really really really really useful !

[politexnik]

Guys, please don't let this feature MR to die, i need it.