Claude parity: open a reply's HTML/SVG/Markdown in a side preview panel (cx-ncc.63)

Merged
TE
1mo ago
+9244-7975

Summary

Claude desktop parity (cx-ncc.63): a document a reply carries in a fence opens in a panel beside the chat, like Claude's artifacts.

  • HTML, SVG and Markdown fences (and an xml fence holding one SVG) get an Open preview button in the code card header.
  • The panel sits to the right of the chat and composer, with Preview and Code tabs, Copy and Close. Escape closes it. On a narrow pane it covers the chat.
  • HTML and SVG draw in the existing render frame (cmux-agent://render/frame). That frame is its own origin, sandboxed without same-origin, with connect-src 'none', so the document can't reach the pane, its bridge, acpmux or the network. Markdown draws the way the transcript draws it.
  • A page with no render frame (the dev server) shows HTML and SVG as Code only, so no tab is ever dead.
  • The panel closes when the chat changes.

Not in this slice: Save. The only native save, pane.saveLog, is the inspector's .jsonl export, so a document save needs a new Swift pane method. It is filed as cx-ncc.75. Mermaid rendering stays with cx-eku / cx-ncc.52.

Testing

New webviews/test/artifact-panel.test.tsx, run by hosted web / react-apps-check:

  • Red on 8dd2492fa1e9 (test plus stubs): FAIL test/artifact-panel.test.tsx. There was no Open preview button (:55) and no panel (:84). run 38157197256
  • Green on bb4bc525ecf0: PASS test/artifact-panel.test.tsx. run 38158008492
    • Open appears on html, svg and SVG-in-xml fences, and is absent on others.
    • A Markdown preview renders; the Code tab, Copy, Close and Escape work.
    • HTML without a render frame shows Code only.
    • Gallery coverage passes with the new agent-pane.artifact-panel entry (closed / markdown / html, played by clicking Open preview).
  • Locally: bun run check, bunx tsc --noEmit -p ., plus bun test on ui-rules, gallery-coverage and gallery-play.
  • The remaining reds are base reds that fail on every PR:
    • composer-send-stop.test.ts (31 s timeout);
    • theme-colors on pages/home-channels/styles.css:1025, which isn't in this PR. It passes on this branch locally; CI's merge ref picks it up from base.

Review fixes, from a review subagent:

  • HTML or SVG that can run script waits for Run, as render cards do, because the frame shares the pane's web process.
  • Quick Chat has no room for the panel, so its fences show no Open preview.

Not tested: no test covers the Run gate, because the test page isn't the bundled pane and so has no render frame. Not dogfooded on a DEV build.

Changelog

Added: Open an HTML, SVG or Markdown block from a reply in a preview panel beside the agent chat, with Preview and Code tabs.

🤖 Generated with Claude Code