REQ-003: Real-time Session Monitoring【免费下载链接】cannbot-skillsCANNBot 是面向 CANN 开发的用于提升开发效率的系列智能体本仓库为其提供可复用的 Skills 模块。项目地址: https://gitcode.com/cann/cannbot-skills概述实现 WebSocket 实时监听 opencode sessions.db 变化支持在 session 运行过程中实时查看 turn 数据。背景当前只能导入已完成的 session无法在 agent 运行过程中实时观察。对于长时间的 coding session用户希望边跑边看及时发现问题。功能要求1. 后端 WebSocket 服务在 Next.js 中添加 WebSocket 支持使用ws库 Next.js custom server 或 API route WebSocket upgrade方案选择推荐使用 Next.js 的instrumentation.ts或自定义 server 方案// src/lib/ws/server.ts import { WebSocketServer } from ws; export function setupWebSocket(server: HTTPServer) { const wss new WebSocketServer({ server, path: /ws/monitor }); wss.on(connection, (ws) { // 处理连接 }); }WebSocket 协议客户端连接时发送订阅消息// 客户端 → 服务端订阅某个 DB 文件 {action: subscribe, dbPath: /path/to/sessions.db} // 服务端 → 客户端推送新增 turn {type: turn, data: {...TurnRow...}} // 服务端 → 客户端推送 session 更新 {type: session_update, data: {...SessionRow...}}2. DB 文件监听使用轮询方式监听 opencode DB 变化SQLite 不支持 inotify// src/lib/ws/db-watcher.ts export function watchDb(dbPath: string, callback: (changes: Change[]) void, intervalMs 2000) { // 每 2 秒检查一次 // 记录上次读取的最大 time_created // 查询新增的 message 记录 // 转换为 RawInteraction 并通过 callback 返回 }轮询逻辑记录已读取的最新 messagetime_created每 2 秒查询WHERE time_created lastTime ORDER BY time_created将新消息转换为RawInteraction调用splitIntoTurns生成 turn 行增量推送到 WebSocket 客户端3. 前端实时页面新建src/app/monitor/page.tsx3.1 连接面板输入 opencode DB 文件路径Connect 按钮建立 WebSocket 连接连接状态指示器Connecting / Connected / Disconnected3.2 实时 Turn 流新 turn 到达时自动追加到 timeline最新 turn 自动滚动到可视区域正在进行的 turn 显示加载动画如果 assistant 消息还未完成3.3 实时指标顶部指标卡实时更新Turn 计数user/assistant累计 Token 数累计费用已用时间4. API 变更不需要新的 REST API数据通过 WebSocket 推送。但需要一个初始加载的 APIGET /api/monitor/initial?dbPath...sessionId...返回当前已有的 turn 数据WebSocket 连接后只推送增量。实现要求文件变更文件变更src/lib/ws/server.ts新建— WebSocket 服务src/lib/ws/db-watcher.ts新建— DB 轮询监听src/lib/ws/types.ts新建— WS 消息类型定义src/app/monitor/page.tsx新建— 实时监控页面src/components/monitor/ConnectionPanel.tsx新建— 连接面板src/components/monitor/LiveTurnStream.tsx新建— 实时 turn 流src/components/monitor/LiveMetrics.tsx新建— 实时指标卡src/hooks/useWebSocket.ts新建— WebSocket React hooknext.config.ts可能需要 custom server 配置package.json添加ws依赖server.ts新建— 自定义 server 入口设计约束WebSocket 断线后自动重连指数退避最多 5 次轮询间隔默认 2 秒可通过 UI 调节1s / 2s / 5s大量 turn 时做好虚拟滚动复用 TurnTimeline 的渲染逻辑不修改现有 opencode DB 文件只读方式打开测试要求tests/ws/db-watcher.test.ts— DB 轮询逻辑测试tests/ws/server.test.ts— WebSocket 服务测试tests/hooks/useWebSocket.test.ts— Hook 测试关键文件参考src/lib/ingest/adapters/opencode-db.ts— 复用readSession和listSessionssrc/lib/ingest/turn-split.ts— 复用splitIntoTurnssrc/lib/ingest/data-service.ts— 了解导入流程src/components/observe/TurnTimeline.tsx— 复用 turn 展示组件src/components/observe/TurnDetail.tsx— 复用 turn 详情组件src/app/page.tsx— 参考页面结构【免费下载链接】cannbot-skillsCANNBot 是面向 CANN 开发的用于提升开发效率的系列智能体本仓库为其提供可复用的 Skills 模块。项目地址: https://gitcode.com/cann/cannbot-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考