The Editor

The editor (/prototype/:id) is where the redesign happens. Canvas on the left, chat with the agent on the right.

Canvas (Left)

The canvas renders the captured webpage (or blank canvas) in a same-origin iframe. The iframe is locked to the prototype — link clicks and form submissions are intercepted so you can't navigate away by accident.

Toolbar

The toolbar at the top of the canvas has four control groups.

Select Element

The Select element button (mouse cursor icon) toggles a click-to-select mode.

When active:

• The button shows "Click an element..." with a primary accent
• Hover over any element in the canvas to see a 2px purple outline
• Click to select. The system generates a CSS selector (prefers #id, then tag.class.class, then ancestor walk with :nth-of-type())
• The next message you send is prefixed with [Selected element: <selector>] so the agent scopes its edits to exactly that element

Click the button again or click anywhere outside an element to exit select mode.

Viewport

Four buttons control the canvas width:

Your choice persists in localStorage — the editor remembers it across reloads.

Sidebar Toggle

The panel-icon button collapses the right chat sidebar to give the canvas full width. Useful when you want a closer look. State persists across reloads.

Iframe Behavior

• The captured HTML loads via srcdoc with inlined stylesheets
• On every version change, the iframe remounts at the base, then replays the patch log to reconstruct state
• Links are intercepted by a capture-phase click listener — e.preventDefault() prevents navigation
• Forms are similarly blocked from submitting
• Thumbnails (480×300, JPEG quality 0.7) capture client-side after each edit using html-to-image

Chat Sidebar (Right)

The chat sidebar holds the conversation with the agent.

Header

• All prototypes — back link to /prototypes
• Prototype name — click to rename inline (max 200 chars)
• Origin URL — source domain shown below the name (or blank for blank-canvas prototypes)
• Share menu — copy as prompt or copy a link
• Delete — trash icon (red on hover)

Conversation

The chat history shows user messages and agent responses in order.

Agent responses combine three things:

• Narration — short prose ("I updated the hero background and increased the headline size")
• Tool calls — cards showing the agent's tool name, parameters, and output summary
• Summary lines — e.g., "Modified .card (styles)" or "Removed 3 elements matching .footer-cta"

Empty state: "Describe a change. Try: 'make the hero headline red and bigger' or 'remove the footer'."

While the agent is working, you'll see a "Working..." spinner. Errors surface in a banner with a retry option.

Composer

The text input at the bottom of the sidebar accepts your prompts.

• Placeholder: "Tell the agent how to redesign this page..."
• Submit on Enter
• Disabled when viewing an older version (the placeholder changes to "Return to the latest version to keep editing" — see Versions & Forking)

Quick Prompts

The Quick prompts dropdown (wand icon) below the composer holds a menu of pre-written prompts. Clicking one inserts the full text into the composer for review — it doesn't auto-submit. See AI Editing for the full list.

Iterations Strip

When more than one version exists, the Iterations strip appears at the bottom of the canvas.

• Header shows total version count and a "Viewing older" badge if you're not on the latest
• Scrollable strip of 136×84 thumbnails labeled v0, v1, etc.
• Click a thumbnail to switch to that version (read-only; composer disables)
• Hover for two actions:
  • Fork (git-fork icon) — see Versions & Forking
  • Share link (link icon) — copies a ?version=<id> URL scoped to that version
• Back to latest → button at the end when viewing an older version
• Tooltip shows full timestamp on hover

Auto-Save

Every completed turn (user message + agent response) saves a new version. There's no manual save button. If a save is in flight and a new turn completes, the latest snapshot queues and saves once the in-flight request finishes.

Tip: If you're about to try a risky change, use Fork first. You get a clean prototype to experiment in, and the original keeps its current version as the latest.