>_ 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、不要對外開放。

在辦公室下任務(LIVE 模式)

點選任一專案 agent,側邊面板會出現任務輸入框 —「🚀 派發任務」會透過 POST /task 讓監看伺服器在該專案目錄 spawn 一個 headless session:

codex exec --full-auto --skip-git-repo-check -   # prompt 由 stdin 傳入

• 勾「續上次 session」= codex exec resume <該專案最新 sessionId>
• 執行過程即時演在辦公室裡,結束時事件紀錄顯示 🏁(失敗會顯示 ⚠️ 與 stderr 摘要)
• 同專案同時只跑一個任務,其餘排隊(上限 3);單一任務 15 分鐘逾時
• 安全:/task 僅接受 localhost 來源 + Origin 白名單(5173/5182), --full-auto 允許 AI 在該專案內改檔案跑指令 — 請理解風險後再用

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)