JianMiauandClaude Fable 5
7d9d477166
摘要： 以 claude-office 為基底改造的 Codex CLI 版虛擬辦公室:終端機綠 + 冷灰主題、 >_ 游標標誌,實況模式改為監看 ~/.codex/sessions/ 的 rollout transcripts, 依 cwd 將 session 分組成專案顯示。 根本原因： 既有 claude-office 只能監看 Claude Code 活動,Codex CLI 的 session 格式 (rollout JSONL:session_meta / turn_context / event_msg / response_item) 與存放結構(YYYY/MM/DD 日期目錄)完全不同,需要獨立的轉譯器。 影響： 新專案,與 claude-office 並存:web 5182(0.0.0.0)、watch 5181(僅 127.0.0.1), 與 5179/5180 不衝突,可同時常駐 PM2。 修法： - server/watch.mjs 重寫:遞迴掃描日期目錄、tail 新增位元組、 由 session_meta/turn_context 的 cwd 分組專案, custom_tool_call/function_call/MCP → 工具事件,agent_message/task_complete → 回覆 - 主題改造:constants 配色(石墨綠)、Sora/Manrope/JetBrains Mono 字型、 >_ 閃爍游標標誌、agents 改為 Codex/Sol/Nova/Mini、工具改為 exec/apply_patch 等 - live.ts 新增 thinking 事件(對應 reasoning),port 5181 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
>_ Codex Office
Codex CLI 風格的 multi-agent 虛擬辦公室視覺化。與姊妹作 claude-office 同架構
(參考 WW-AI-Lab/openclaw-office,MIT),
改為 OpenAI Codex 的語意:終端機綠 + 冷灰科技感、>_ 游標標誌、
工具氣泡顯示 exec / apply_patch / shell 等 Codex 工具。
功能
- 2D 平面圖辦公室 — 主力工位區、Worker 熱桌區、會議區、休息區,十字走廊尋路
- Chibi 小人 — 依 id 確定性生成外觀;狀態驅動姿勢(站/坐/走)與動作(打字/說話/搖晃)
- 狀態表情氣泡 — 思考雲、工具膠囊(轉動齒輪 + 工具名)、對話氣泡、錯誤、生成火花
- 模擬導演 — 進場 → 接任務 → 思考 → 調用工具 → 派 worker → 回報 → 開會 → 倒咖啡
- 實況模式 — tail
~/.codex/sessions/的 rollout transcripts,依 cwd 分專案顯示真實活動 - RWD — 直版滿寬顯示辦公室,面板移到下方;側欄可收合
快速開始
npm install
npm run dev # http://localhost:5173(劇本模擬模式)
實況模式(LIVE)— 顯示真實 Codex CLI 活動
npm run watch # http://localhost:5181/events (SSE)
server/watch.mjs 輪詢 ~/.codex/sessions/YYYY/MM/DD/rollout-*.jsonl,
只讀新增位元組,依 session_meta / turn_context 的 cwd 把 session 分組成專案:
| Rollout 內容 | 辦公室畫面 |
|---|---|
| 近 7 天有活動的專案(cwd) | 一位 agent 入座主力工位(最多 6 席) |
user_message |
收到新任務(思考雲) |
reasoning / task_started |
思考中 |
custom_tool_call / function_call / MCP 工具 |
工具調用(齒輪膠囊 + 工具名) |
agent_message / task_complete |
回覆中(對話氣泡) |
| 15 秒沒動靜 / 5 分鐘沒動靜 | 待命 / 離線(Zzz) |
注意:監看伺服器會讀取本機的 Codex 對話記錄,只綁 127.0.0.1、不要對外開放。
PM2 部署
npm run build
pm2 start ecosystem.config.cjs
pm2 save
| App | Port | 綁定 | 說明 |
|---|---|---|---|
codex-office-web |
5182 | 0.0.0.0 | 靜態服務 dist/(區網可看,模擬模式) |
codex-office-watch |
5181 | 127.0.0.1 | rollout 監看,僅本機(實況模式限本機瀏覽器) |
與 claude-office 的 5179/5180 不衝突,可同時常駐。
架構
src/
├── lib/ # 幾何常數、外觀生成、走廊尋路、座位分配、台詞庫
├── store/ # Zustand:agents/links/meetings/events
├── sim/ # director.ts 模擬 FSM + runtime.ts rAF 迴圈
├── gateway/ # live.ts:SSE 事件 → store action
└── components/ # FloorPlan / Pawn / Emotes / 家具 / Header / SidePanel
server/
├── watch.mjs # Codex rollout 監看(零依賴,SSE)
└── serve.mjs # 生產用靜態伺服器(零依賴,SPA fallback)