Preview & Comments

Sandboxed Preview

TF Design renders generated artifacts in a sandboxed iframe using the srcdoc attribute. The preview supports both HTML and JSX (with a vendored React 18 + Babel runtime).

How It Works

1. The agent emits an <artifact> block with a type and content.
2. The artifact parser (artifacts/parser.ts) extracts the content.
3. The renderer registry (artifacts/renderer-registry.ts) selects the appropriate renderer based on artifact type.
4. The content is injected into the iframe via srcdoc — no network requests, fully isolated.
5. The preview updates live as the agent continues generating.

Preview Controls

Control	Action
Frame toggle	Switch between desktop, tablet, and mobile viewport sizes
⌘/Ctrl+\\	Cycle through preview frames
Fullscreen	Open the preview in a modal overlay
Refresh	Re-render the current artifact

Live Todo Progress

As the agent works, it streams a TodoWrite plan that appears as a live card in the chat pane. Each todo item transitions from in_progress to completed in real time.

• Watch the plan — see what steps the agent is taking.
• Interrupt — cancel generation mid-flight if the plan goes in the wrong direction.
• Redirect — send a message while the agent is working to change course.

The todo card updates incrementally — you see the agent's plan evolve without waiting for completion.

Tool-Call Feed

The agent's tool calls (file reads, writes, searches) are rendered in the chat pane as tool-call cards. This gives you visibility into what the agent is doing:

• Which files it read.
• What it searched for.
• What it wrote or modified.

Inline Comments

Comment mode lets you annotate elements directly in the preview and send them to the agent as edit instructions.

Using Comment Mode

1. Toggle comment mode with ⌘/Ctrl+;.
2. Click any element in the preview — a popover appears.
3. Type your comment: "This button should be larger", "Change this colour to match the brand".
4. Submit — the comment is saved and a surgical-edit instruction is sent to the agent.

How Comments Work

• Comments are persisted by the Desktop app as you add them.
• The agent receives a targeted edit instruction referencing the commented element.
• Comment status is tracked (open, addressed, resolved) via updatePreviewCommentStatus.
• Comments appear as attachments in the chat history, linked to their preview position.

Inline comment-based surgical patching is a partial feature — the agent attempts targeted edits based on the comment, but reliability depends on the artifact's structure. For complex changes, use the chat pane to describe what you need.

Design System Preview

When previewing a design system (before selecting it), the design system preview modal shows:

• DESIGN.md view — the full 9-section design rules in a readable format.
• Swatch grid — colour palette with hex values.
• Component showcase — sample components rendered from components.html.
• Design spec view — a structured view of the active design system's tokens.

File Workspace

The file workspace panel shows real on-disk project files:

• Browse — navigate the project's file tree.
• View — open any file in the file viewer with syntax highlighting.
• Edit — use the manual edit panel to make changes directly.
• Download — download individual files as chips.
• Search — search across project files using the file workspace's search field.

Changes to files are reflected in the preview on the next render.