# Ticket 11.7 — Mermaid Diagram Modal + PNG Export

**Phase**: 11 — UI/UX Polish
**Priority**: Medium
**Depends on**: None

## Description

claude-relay supports clicking on mermaid diagrams to open them in a zoomed modal with a PNG download button. conduit renders mermaid inline but has no zoom or export. During the vanilla JS phase, ticket 8.24 added a mermaid expand feature to `markdown.ts` and `modal.ts`, but it may not have been fully ported to the Svelte migration.

Implement:
- Click on any mermaid diagram to open it in a centered modal overlay
- Modal shows the diagram at full size with scroll if needed
- "Download PNG" button converts the SVG to a PNG and triggers download
- Modal closes on backdrop click, Escape key, or close button

## Acceptance Criteria

### AC1: Clicking a mermaid diagram opens a fullscreen modal
```gherkin
Given a mermaid diagram is rendered in an assistant message
When the user clicks on the mermaid diagram
Then a fullscreen modal overlay opens
And the modal contains the mermaid diagram rendered at full resolution
```

### AC2: The modal shows the diagram at full resolution
```gherkin
Given the mermaid modal is open
When the user views the diagram
Then the diagram is displayed at its natural SVG size
And scroll bars appear if the diagram exceeds the viewport
```

### AC3: A "Download PNG" button is available in the modal
```gherkin
Given the mermaid modal is open
When the user looks at the modal controls
Then a "Download PNG" button is visible in the modal header or footer
```

### AC4: Clicking "Download PNG" downloads a PNG file
```gherkin
Given the mermaid modal is open with a diagram
When the user clicks the "Download PNG" button
Then the SVG diagram is converted to a PNG image
And the browser triggers a file download with a descriptive filename
```

### AC5: Modal closes on Escape, backdrop click, or close button
```gherkin
Given the mermaid modal is open
When the user presses the Escape key
Then the modal closes
When the user clicks the backdrop (outside the modal content)
Then the modal closes
When the user clicks the close button
Then the modal closes
```

### AC6: Multiple mermaid diagrams each open their own modal
```gherkin
Given two or more mermaid diagrams are rendered in the conversation
When the user clicks on the second diagram
Then the modal opens showing the second diagram's content
And it does not show the first diagram
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Click handler attaches to mermaid containers | E2E | Clicking a `.mermaid` container opens the modal overlay |
| Modal opens with correct SVG content | E2E | The modal's inner SVG matches the clicked diagram's SVG |
| SVG-to-PNG conversion | Unit | Canvas-based conversion produces a valid PNG blob from SVG input |
| Download trigger | Unit | `URL.createObjectURL` and anchor click trigger a file download |
| Modal close on Escape | E2E | Pressing Escape key closes the modal and removes the overlay |
| Modal close on backdrop click | E2E | Clicking outside the modal content area closes it |

## Reference

- claude-relay mermaid modal: `../claude-relay/lib/public/modules/markdown.js` (modal zoom + PNG download)
- Existing mermaid rendering: `conduit/src/lib/public/utils/markdown.ts`
- AssistantMessage post-render: `conduit/src/lib/public/components/chat/AssistantMessage.svelte`
- Image lightbox (similar pattern): `conduit/src/lib/public/components/overlays/ImageLightbox.svelte`
