CanvasNEW

Canvas is a splitscreen surface that opens next to the chat whenever an agent produces a sizable artifact — HTML, a React component, a Python script, a Markdown document, an SVG diagram. Instead of pasting code into chat, the agent writes it into Canvas and the right pane shows a live preview you can edit.

It's the "artifact" concept but integrated into Sophon: the canvas is scoped to a chat session, the agent keeps editing in place across turns, and you can review its versions, export, or promote the result.

When Canvas opens

Canvas opens automatically when the agent generates:

• Runnable web content — HTML, React/Vue single-file components, inline SVG
• Code files — Python, TypeScript, C#, etc. that are more than a snippet
• Long-form documents — Markdown documents, slide outlines, structured plans
• Diagrams — Mermaid, PlantUML, DOT, or SVG

The agent decides based on the output type and size. You can also nudge it: "open this in Canvas."

Manually open Canvas at /canvas?session=<id> or from the chat header: Split view → Canvas.

What you see

The screen splits vertically (left chat, right canvas) or toggleable horizontal. Each artifact lives in its own frame on the canvas, and every frame has:

• Editor — Monaco editor with syntax highlighting, find/replace, multi-cursor
• Preview — live rendered output (HTML / Markdown / diagram). Toggleable.
• Tabs — if the agent produces multiple files (HTML + CSS + JS), each gets a tab.
• Frame toolbar — along the top of the frame: Copy, Export (download the frame's content in its native format), and a History toggle that opens the version stepper (see Versions below)

Each frame also carries a width setting — one of a few presets (auto, half, full). A half-width frame centres at 50% so two frames can sit side by side; the setting reads best in the expanded or standalone canvas, where there's room for it to matter.

Edits you make in the editor are sent back to the agent. On the next turn, the agent sees your modifications and reasons about them.

Agent-canvas protocol

Under the hood, Canvas is driven by structured artifact blocks the agent emits:

<artifact id="my-component" type="react" title="Counter">
<source file="Counter.jsx">
export default function Counter() { … }
</source>
<source file="styles.css">
.counter { … }
</source>
</artifact>

The Gateway parses these blocks, serves them to the Canvas panel over SignalR, and hands edits back to the agent as <user_edited_artifact> in the conversation.

Versions

Version history is per frame: every content-changing update snapshots the previous state, and each frame carries its own version trail, independent of the others on the canvas. The frame toolbar's History toggle opens a version stepper — step back and forward through the trail to review the agent's last few attempts, then Back to latest returns you to the live frame.

The stepper is for reviewing, not restoring: it shows a read-only view of each prior snapshot, and switching frames or a fresh agent update never disturbs where you're pinned.

Version snapshots are race-safe under concurrency: several updates landing on a frame close together — or a burst of frames updating at once — each produce a consistent, distinct snapshot rather than one clobbering another.

Useful when the agent takes a frame in a wrong direction: step back through the history to compare its recent attempts before deciding how to steer it next.

Promoting to documents

If a canvas is worth keeping beyond the chat, Save to Documents snapshots it into the Documents library. It becomes a normal document with extractable text, indexed and referenceable by other agents.

Document frames

The flow works in the other direction too. A DocumentFrame opens a document from the library — uploaded by you or generated by an agent — directly on the canvas, rendered through the same rich viewer as the Documents app: PDFs, spreadsheets, DOCX, images, audio, Markdown, Mermaid, syntax-highlighted code.

Handy for keeping the source material in view: the agent builds in one frame while the spec, dataset, or reference PDF sits open in a document frame beside it.

Runnable canvases

HTML / React / Vue canvases render live with an iframe-sandboxed preview. The sandbox has no parent-window access, no outgoing network by default, and a strict CSP. You can toggle allow network for prototypes that need to fetch — at your own risk.

Python / C# canvases don't run in the browser. If you want to execute them, the agent can route through the Skills sandbox (Docker + gVisor) and stream results back into the canvas.

Use cases

• UI prototyping — "build me a pricing table with four tiers" — the agent writes the HTML/CSS, you tweak spacing in the editor, it adapts.
• Data snippets — the agent writes a data-transformation script, you see the output, iterate.
• Document drafting — long-form articles, design docs, press releases.
• Diagram authoring — the agent writes Mermaid, the preview renders the diagram, you rewire it by editing source.

From the CLI

sophon canvas list --session <id>
sophon canvas show <canvas-id>
sophon canvas export <canvas-id> --out ./artifact/

export pulls every file in the canvas to a local directory, handy for promoting a prototype out of Sophon.

Limits

• Canvas max size: 10 MB per artifact across all tabs.
• Runnable preview cap: 5 concurrent canvases per session (older ones freeze).
• Editor buffer: up to 50,000 lines — beyond that, the agent gets a truncated view in its context.

Where to go next

• Claude Code Sessions — persistent multi-file projects, a step up from ad-hoc canvases
• Documents — promote a canvas to the library
• Skills — how runnable canvases execute non-browser code