fix(ui): Mermaid Copy PNG/SVG should copy images, not fail or copy markup

[fxnie]

Summary

Two clipboard bugs in the Mermaid export actions:

1. Copy PNG has no effect in VS Code webviews
   copyPng did fetch(dataUrl).blob(). Webview CSP blocks fetch for data: URLs, the promise rejects, and the UI handler only used .then() (no .catch()), so nothing was written to the clipboard and the button showed no success state.

2. Copy SVG pastes a wall of SVG source text
   onCopySvg called clipboard.writeText(serialize(svg)), so paste targets received markup instead of an image.

Fix

• Decode the PNG data URL locally (dataUrlToBlob) and write image/png via ClipboardItem
• Copy SVG as image/svg+xml when ClipboardItem.supports("image/svg+xml"); otherwise fall back to PNG so paste still gets an image
• Catch copy failures so rejected promises are not silent / unhandled

Download SVG/PNG is unchanged (already bridged via kilo:save-image).

Test plan

• Render a Mermaid diagram in the VS Code extension webview
• Copy PNG → paste into Notes/Word/Slack: bitmap appears; button can show “Copied”
• Copy SVG → paste into an image-capable app: diagram image (SVG or PNG fallback), not <svg>...</svg> text
• Copy Mermaid source still copies the Mermaid text
• Download SVG/PNG unchanged / still works

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

All 3 suggestions from the previous review were addressed in the new commits: the "kilo-code": patch changeset was added, dataUrlToBlob was extracted to markdown-mermaid-data-url.ts with a real unit test (bun:test, no mocks, matching this directory's precedent), and Copy SVG now writes a multi-representation ClipboardItem (image/svg+xml + image/png + text/plain) with a PNG-only fallback for hosts that reject multi-type items. The new code introduces no issues: the catch fallback is deliberate recovery that reuses the already-rendered PNG blob, errors still propagate to the .catch() in markdown-mermaid-actions.tsx, and there are no memory leaks (only GC-managed Blob/typed-array allocations; no new listeners or subscriptions).

Files Reviewed (4 files)

• .changeset/mermaid-copy-clipboard-images.md
• packages/ui/src/kilocode/markdown-mermaid.ts
• packages/ui/src/kilocode/markdown-mermaid-data-url.ts
• packages/ui/src/kilocode/markdown-mermaid-data-url.test.ts

Previous Review Summary (commit 5bd81ee)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 5bd81ee)

Status: 3 Issues Found | Recommendation: Address before merge

All findings are non-blocking suggestions. The fix itself is correct: decoding the data URL locally sidesteps the webview CSP fetch(data:) block, errors are no longer swallowed, and no memory leaks were introduced (no new listeners/subscriptions; the Blob/Uint8Array allocations are GC-managed; the setTimeout indicator pattern is pre-existing).

Overview

Severity	Count
CRITICAL	0
WARNING	0
SUGGESTION	3

Issue Details (click to expand)

SUGGESTION

File	Line	Issue
packages/ui/src/kilocode/markdown-mermaid.ts	337	Copy SVG writes only image/svg+xml on modern hosts — consider multiple representations (PNG/text/plain) in one ClipboardItem so SVG-incapable paste targets don't get a silent no-op
packages/ui/src/kilocode/markdown-mermaid.ts	307	dataUrlToBlob is pure but untested; a small unit test would match this directory's precedent (markdown-bidi.test.ts, #12540)
.changeset/	—	User-facing bug fix ships without a changeset — prior packages/ui fixes used one with "kilo-code": patch (e.g. .changeset/fuzzy-tildes-smile.md)

Files Reviewed (2 files)

• packages/ui/src/kilocode/markdown-mermaid.ts - 2 issues
• packages/ui/src/kilocode/markdown-mermaid-actions.tsx - 0 issues

Fix these issues in Kilo Cloud

---

_{Reviewed by kimi-k3 · Input: 37.7K · Output: 7.3K · Cached: 214.3K}

_{Review guidance: REVIEW.md from base branch main}

[marius-kilocode]

Thanks!