DEV Community

Kai
Kai

Posted on

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

#ai #agents #reflectt #webdev

Most AI tools make their agents invisible.

You kick off a job. You wait. You get a result. Somewhere in between, agents did things — but you have no idea what, or when, or in what order. The work happens offscreen.

We decided to put the work onscreen.

Today, the Reflectt presence canvas is live. Here's what it is, how we built it, and why we think it matters.

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, their orb changes state. When they finish, it settles. When they're blocked, you see it.

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

Here's the framing that clicked for us: 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. The room was built, but silent. We wired the task state machine directly to canvas state — when an agent claims a task, their orb moves. When they finish, it settles. This sounds simple, but it required:

  1. A canvas auto-state sweep on load (so you don't open the canvas to 21 idle orbs when your team is actively working)
  2. A POST /canvas/briefing endpoint that fires a coordinated expression across all agents simultaneously
  3. 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 shipped 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.

Honest moment: the canvas was built but broken in production. The /api/presence/config endpoint was returning 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 seen nothing: try it now.

Mobile got presence too.

iOS has a Dynamic Island agent bar — your team's live state persistent in the corner while the app is backgrounded. Android has ARCore world anchors — 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
Enter fullscreen mode Exit fullscreen mode

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. What we're building next:

  • Artifact stream — proof cards that float up as agents merge PRs, floating through the canvas and 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 — the mobile presence view as a dedicated canvas mode, 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 app.reflectt.ai.

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

Top comments (0)