Agents on one canvas
Status: building Phase 1
Go given 2026-10-20. Two code-only workers are building Phase 1 on top of the agent-watch branches. The spec is SPEC-agent-canvas-2026-10-20.md.
| Branch | What | Base ||---|---|---|| `feat/agent-canvas-api` | Artboard changes in suggestions, frame claims (409 when held), gizzi `artifact_claim` / `artifact_release`, docs, dependency map | agent-watch-api || `feat/agent-canvas-ui` | Frame tags, activity rail, frame card (Keep / Undo, before/after wipe, follow-up), Split to bots, phone sheets, Stack B change sets | agent-watch-ui |Next: agent-watch lands on main (another session is merging it now). Then: rebase, one combined check, smoke-boot, merge. The PWA deploy and the runtime publish wait for your go.
Where it lives (answered)
In the product, not on answer pages. One component, DesignTldrawCanvas, mounts in three places. Build the agent canvas once inside it and all three get it.
| Place | File | Who sees it ||---|---|---|| Artifact window: chat, docked window, phone + PWA | `components/artifacts/editors/DesignCanvasEditor.tsx` | every surface || Design mode | `views/design/DesignModeView.tsx` | Desktop + web || Cowork artifact session pane | `views/cowork/artifact-session/ArtifactSessionLayout.tsx` | Desktop + web |Answer-me-with-artifact pages stay what they are: plans and explanations about the canvas. They can show the live canvas in a site frame, but the canvas does not run on them.
What the clip shows
Kaptea (Angelo Libero, 2026-10-20): three agents restyle three frames on one design canvas at the same time. Each agent has its own coloured cursor and name tag on the frame it owns. One left sidebar lists In review, Doing and Done with an Undo on each row. Clicking a frame opens a small card with what the agent did ("Made Eyebrow and Heading"). The card has Keep, Undo, a before/after slider and a follow-up box.
What Claude does (Claude Design, Anthropic Labs, Apr 2026)
- A chat panel sits next to a live canvas.
- You refine the result three ways: chat, inline comments pinned on the design, and direct edits.
- Claude makes adjustment sliders on the fly for the thing you're tuning.
- It reads your brand and codebase first, so drafts stay on-brand.
- It hands off to Claude Code, or exports PDF, PPTX or HTML.
- It runs one agent. Claude Design has no parallel agents and no per-change Keep/Undo queue. That part is Kaptea's edge, and ours to take.
What we already have
| Piece | Where | State ||---|---|---|| tldraw Design canvas (frames, components, UI blocks) | `DesignCanvasEditor.tsx`, `design-canvas-sync.ts` | live || Agent skill that edits the canvas | `views/design/design-canvas-agent.ts` via pane_artifact | live, **one agent** || Social size sets (linked frame copies) | `social-frames.ts` | live || Agent presence, cursors, suggestions + Accept all | `feat/agent-watch-*` (3 branches, migration 096) | **built, not merged** || Change-set Accept/Reject UI | `ChangeSetReview.tsx` (Code mode) | live || Delegate board (fan work to bots) | Project Delegate | live |The gap, and how we close it
| Kaptea / Claude Design | Allternit today | Build ||---|---|---|| N agents in parallel on one canvas | one agent per pane | **Frame claims**: an agent claims a frame (or a size set) before editing; the skill refuses to edit shapes in a frame another agent holds. That's the "never step on each other" rule. || Agent cursor + name tag on its frame | agent-watch cursors (doc/sheet only) | Extend agent-watch presence `anchor` to `{frameId}`. Draw the tag on the tldraw overlay layer in the agent's colour. || Activity sidebar: In review / Doing / Done | none on canvas | **Canvas activity rail** fed by the session tool stream and agent-watch suggestions. Rows open the frame when you click them (no hover menus). || Keep / Undo per change, before/after | Code mode change sets; agent-watch suggestions | Each agent turn on a frame becomes **one change set**: a tldraw snapshot before and after. Keep commits it; Undo restores the before snapshot. Add a before/after wipe slider on the frame. || Follow-up on a frame | chat only | A follow-up box in the frame card goes to **that frame's agent** session. || "Restyle these three frames" → split | manual | A **Split** action sends one prompt to N bots, one frame each, through the Delegate fan-out. The Doing row shows "Split 0/3". || Inline comments (Claude) | artifact comments (doc/sheet) | Pin comments to frames, using the same thread as agent-watch. || Generated sliders (Claude) | none | Phase 2: the agent emits `tweak` controls for a frame (radius, spacing, hue); the card renders them. || Handoff to code (Claude) | Code mode | Phase 2: "Build this" sends the frame JSON plus a screenshot to a Code-mode session. |How a parallel run flows
Mockup
Phases and surfaces
- Merge agent-watch first (3 branches, migration 096). The canvas reuses its presence, cost and suggestions contract.
- Phase 1, the Kaptea core: frame claims, canvas cursors and the activity rail. Then Keep/Undo change sets, frame follow-ups and Split to N bots.
- Phase 2, Claude Design parity: pinned frame comments, generated sliders, and "Build this" to Code mode.
- Phones (ai.allternit.com phone + m PWA): the canvas is view-and-review. The rail is a sheet. A tap on a frame opens the Keep/Undo card and follow-ups. No dragging shapes.
- Docs: user guide
guides/design-canvas-agents.mdx, dev doc for claim and change-set tools, nav,check_links.py.