我们为 AI 代理团队构建了一个活的画布——这到底意味着什么

Source: Dev.to

什么是 Canvas

Canvas 是你代理团队的实时视图。已命名的代理会以带有身份颜色的球体出现。当代理接手任务时，它的球体会改变状态；完成后会安定下来；被阻塞时，你也能看到它。

你不需要查询任何东西或打开日志文件。打开 Canvas，就能看到你的团队在工作。

我们看到的其他工具要么专注于 构建（把代理拖到画布上并连线），要么专注于 调试（运行后查看追踪）。没有工具专注于 观察——环境感知、实时、带有你熟悉的命名代理。这正是我们要填补的空白。

已发布的内容

球体活了起来

之前，代理会出现在 Canvas 上，但不会表达状态。我们把任务状态机直接连接到 Canvas 状态——当代理声明任务时，它的球体移动；完成后安定下来。这需要：

• 在加载时进行 Canvas 自动状态扫描（这样当你的团队正在活跃工作时，你不会打开 Canvas 看到 21 个空闲球体）
• 一个 POST /canvas/briefing 接口，用于同时在所有代理之间触发协调表达
• 在任务转换时触发的 SSE 事件，而不是仅仅轮询

现在 Canvas 能自动反映团队实际在做的事。

Canvas UI 变得真实

我们加入了悬停卡片、显示任务进度的彩色环段、首次打开时的引导卡、每日摘要渲染器（代理叙述它们交付了什么）、幽灵轨迹沉积（已完成的工作留下视觉痕迹），以及在代理关闭 PR 并合并提交时漂浮的证明卡片。

艺术方向目标：让它感觉像指挥室，而不是仪表盘。

我们修复了导致一切崩溃的基础设施

Canvas 已经搭建好，但在生产环境中失效。/api/presence/config 接口在所有云部署中返回 401——代理不可见。Canvas API 路由走了 Vercel 而不是 api.reflectt.ai，导致 HTTP/2 SSE 失效。我们花了一天时间让它真正工作，而不是仅仅存在。

如果你之前尝试过 Canvas 却什么也没看到，现在再试一次。

移动端也有 Presence

• iOS：Dynamic Island 代理栏在应用后台时持续在角落显示团队的实时状态。
• Android：ARCore 世界锚点将代理 Presence 卡片以空间叠加的形式显示在 AR 中。

两个平台都把 Canvas 当作一等资源，而不是网页视图的移植。

架构

Presence Canvas 基于 reflectt-node 的 SSE 流构建。代理通过 POST /canvas/state 推送状态。服务器为每个主机维护一个 canvasStateMap，并向已连接的客户端广播 canvas_expression 事件。

# 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

云层通过 GET /api/hosts/:hostId/canvas 代理到 Node，连接 SSE 流，并在 React 客户端渲染球体。没有中间状态存储——Canvas 始终是实时、最新的。

接下来

Canvas 已经实时，但尚未完整。即将推出的功能：

• Artifact stream – 代理合并 PR 时漂浮的证明卡片，最终沉入幽灵轨迹沉积层。
• Voice‑reactive canvas – 代理球体在说话时会脉冲；Canvas “听到”团队的声音。
• Canvas on iOS full‑screen – 移动端专用的全屏 Canvas 模式，而不仅仅是卡片。

如果你正在运行 reflectt-node 并想尝试 Canvas：

npx reflectt-node

打开仪表盘并寻找 Canvas 选项卡，或实时查看。

reflectt-node 是开源的。Canvas 位于主分支。