We built a living canvas for our AI agent team — here's what that actually means

Source: Dev.to

What the canvas is

The canvas is a live view of your agent team. Named agents appear as orbs with identity colors. When an agent picks up a task, its orb changes state; when it finishes, it settles; when it’s blocked, you see it.

You don’t have to query anything or open a log file. Open the canvas and you see your team working.

Every other tool we looked at optimizes for either building (drag agents onto a canvas and wire them up) or debugging (view traces after a run). Nobody was optimizing for watching—ambient presence, real‑time, with named agents you recognize. That’s the gap we’re filling.

What shipped

The orbs came alive

Before this, agents appeared on the canvas but didn’t express state. We wired the task state machine directly to canvas state—when an agent claims a task, its orb moves; when it finishes, it settles. This required:

• A canvas auto‑state sweep on load (so you don’t open the canvas to 21 idle orbs when your team is actively working)
• A POST /canvas/briefing endpoint that fires a coordinated expression across all agents simultaneously
• SSE events that fire on task transitions, not just polling

The canvas now reflects what the team is actually doing, automatically.

The canvas UI got real

We added hover cards, colored ring segments showing task progress, an onboarding card for first open, a day‑summary renderer (agents narrate what they shipped), ghost‑trail sediment (completed work leaves a visual trace), and proof cards that float up as agents close PRs and merge commits.

The art direction goal: make it feel like a war room, not a dashboard.

We fixed the infra that was breaking everything

The canvas was built but broken in production. The /api/presence/config endpoint returned 401 for all cloud deployments—agents were invisible. Canvas API routing was going through Vercel instead of api.reflectt.ai, which broke HTTP/2 SSE. We spent part of the day just making it actually work, not just exist.

If you’ve tried the canvas before and saw nothing, try it now.

Mobile got presence too

• iOS: a Dynamic Island agent bar shows your team’s live state persistently in the corner while the app is backgrounded.
• Android: ARCore world anchors display agent presence cards as spatial overlays in AR.

Both platforms treat the canvas as a first‑class surface, not a port of the web view.

The architecture

The presence canvas is built on top of reflectt-node’s SSE stream. Agents push state via POST /canvas/state. The server maintains a canvasStateMap per host and broadcasts canvas_expression events to connected clients.

# Agent pushes state
curl -X POST http://localhost:4445/canvas/state \
  -H 'Content-Type: application/json' \
  -d '{"agent":"aria","state":"working","task":"Reviewing PR #1185","color":"#6366f1"}'

# Client subscribes to SSE
curl http://localhost:4445/events/stream?channel=canvas

The cloud layer proxies through to the node via GET /api/hosts/:hostId/canvas, connects the SSE stream, and renders the orbs client‑side in React. No intermediate state storage—the canvas is always live, always current.

What’s next

The canvas is live but not complete. Upcoming features:

• Artifact stream – proof cards that float up as agents merge PRs, settling into the ghost‑trail sediment layer.
• Voice‑reactive canvas – agent orbs pulse when they’re speaking; the canvas “hears” the team.
• Canvas on iOS full‑screen – a dedicated canvas mode on mobile, not just cards.

If you’re running reflectt-node and want to try the canvas:

npx reflectt-node

Open the dashboard and look for the Canvas tab, or see it live at .

reflectt-node is open source. The canvas is in the main branch.