Mission Control Web App
Date: 2026-03-30 Status: Planning
概念
Steven 想要嘅 AI Agent 管理介面 — 自己 host 嘅 claude.ai，有 grid view + 多 agent + real-time streaming。
核心功能
- Grid View — 10 格顯示所有 AI agent 狀態
- Chat Window — 撳任何 agent → 右邊彈出 chat，可以即時對話
- Real-time Streaming — 見到 agent 一路思考一路輸出（唔使等完成）
- Mobile Responsive — 出街手機都用得
- Authentication — 只有 Steven 可以入
技術架構
Streaming 方案
- Telegram: 用
editMessage不斷更新訊息（同 OpenClaw 一樣） - Web App: WebSocket 即時 push tokens
- CC Output 捕捉:
tmux pipe-pane或讀 CC CLI stdout - 唔需要 Anthropic API — 月費計劃 CC CLI 本身支援 streaming output
Tech Stack
| 組件 | 技術 |
|---|---|
| 前端 | React + Tailwind CSS |
| Real-time | WebSocket (ws / socket.io) |
| 後端 | Node.js on VPS |
| Agent 管理 | tmux sessions / claude -p processes |
| 部署 | Cloudflare tunnel (出街都入得) |
| Auth | 簡單 token 或 password |
Agent Session 管理
- 每個 agent = 一個
claude -pprocess 或 tmux session - WebSocket server 管理所有 sessions
- 前端 grid 顯示每個 session 嘅狀態
同現有工具比較
| Mission Control | Telegram | claude.ai Web | PaperClip | |
|---|---|---|---|---|
| 多 agent grid | ✅ | ❌ | ❌ | ✅（只睇） |
| Chat 互動 | ✅ | ✅ | ✅ | ❌ |
| Real-time streaming | ✅ | ✅ (editMessage) | ✅ | ❌ |
| 手機 | ✅ | ✅ | ✅ | ❌ |
| 自己 VPS MCP tools | ✅ | ✅ | ❌ | ❌ |
| 三層記憶系統 | ✅ | ✅ | ❌ | ❌ |
開發計劃
- MVP: 單個 agent chat + streaming (proof of concept)
- Grid view + 多 agent session 管理
- Mobile responsive
- Auth + Cloudflare tunnel
- 整合 Telegram notifications
重要決定
- 用月費計劃，唔用 API credits
- Streaming 靠捕捉 CC CLI stdout
- Telegram streaming 靠 editMessage（已驗證 OpenClaw 做到）