实时 Web 仪表盘
Real-time Web Dashboard
基于 Next.js + SSE 的实时 Agent 监控面板,展示 session 状态和 PR 进度
子问题
1.SSE 事件流推送
2.TTL 缓存减少 API 调用
3.attention level 分级
4.session 序列化
5.SSR 首屏与 SSE 增量更新的数据一致性协调
6.PR enrichment 超时保护与部分降级
7.动态 favicon 健康度可视化
各项目的解法1 solutions
Signals
横向对比
| 维度 | AgentOrchestrator |
|---|---|
| 推送机制 | ReadableStream SSE + 5s setInterval 轮询,非事件驱动 |
| 缓存策略 | TTLCache 双 TTL:正常 5min,rate limited 60min |
| 注意力分级 | 六级分区(merge/respond/review/pending/working/done)按人类 ROI 排序 |
| 降级策略 | Promise.allSettled 过半判定 + 部分结果应用 + rate limit blocker 标记 |
| 首屏策略 | Next.js SSR + enrichment 超时保护(metadata 3s, PR 4s) |
| 健康度可视化 | DynamicFavicon 三色(green/yellow/red)+ StatusLine 统计 |
最佳实践
1.TTL 缓存 PR enrichment 数据减少 GitHub API 限流
2.globalThis 缓存服务单例适配 Next.js HMR
3.SSE 心跳用注释格式(冒号开头)不触发客户端 onmessage
4.Promise.allSettled 过半判定实现部分降级而非全部失败
5.rate limit 时自动延长缓存 TTL 到 API 限流重置周期