Agent Viewer

Agent Viewer 帮助文档

Agent Viewer 是 Hawa Code 的 Web 端实时观测面板。开启后，它会启动一个本地 HTTP + WebSocket 服务，你可以在浏览器里同步查看主 Agent 以及各个 SubAgent 的运行消息，效果与终端 CLI 保持一致。

---

1. 启用 Agent Viewer

方式一：通过 /config 配置界面

1. 在 Hawa Code REPL 中输入 /config，进入配置界面。

2. 找到 Web Server 选项，将其切换为 on。

3. 配置保存后服务会自动启动，终端会打印访问地址，例如：

   WebServer started at http://127.0.0.1:3210

4. 用浏览器打开该地址即可进入 Agent Viewer。

方式二：直接修改 settings.json

在全局 settings.json 中新增 webServer 配置：

{
  "webServer": {
    "enabled": true,
    "port": 3210,
    "host": "127.0.0.1"
  }
}

配置说明：

字段	类型	默认值	说明
enabled	boolean	false	是否启用 WebServer
port	number	3210	监听端口
host	string	127.0.0.1	监听地址，默认仅本地访问

重启 Hawa Code 后服务会自动启动。

---

2. 界面布局

Agent Viewer 界面由四部分组成：

1. 顶部标题栏：显示 Hawa Code - Agent Viewer 和 WebSocket 连接状态。
2. Agent 标签栏：切换当前显示的 Agent，包括 main 主 Agent 和各个 SubAgent。
3. 消息列表区：展示当前 Agent 的对话消息、工具调用、执行结果等。
4. 底部状态栏：显示 Agent 总数、活跃 Agent 数、消息数量以及 WebSocket 连接状态。

---

3. 自动滚动与手动暂停

• 默认开启自动滚动，新消息会自动跟随到底部。
• 当你手动向上滚动查看历史消息时，自动滚动会自动暂停。
• 暂停后，界面会出现 Resume auto-scroll 按钮，点击可恢复自动滚动。

---

4. WebSocket 实时连接

• Agent Viewer 通过 WebSocket 与 Hawa Code 后端保持长连接。
• 连接断开后，前端会每 3 秒自动尝试重连。
• 连接状态显示在顶部标题栏和底部状态栏：
  • connected：已连接
  • connecting：连接中
  • disconnected：已断开

---

5. 多 Agent 切换

当 Hawa Code 启用 Agent Team 或多 Agent 协作时，Agent Viewer 会在标签栏显示所有活跃的 Agent：

• main：主 Agent，始终存在。
• 其他 SubAgent：显示 Agent 名称和类型，例如 Explore、Coder 等。
• 标签上的圆点颜色表示 Agent 状态：
  • 绿色/运行中：正在执行
  • 灰色/已结束：任务结束

点击标签即可切换查看对应 Agent 的消息流。