2026-07-20 14:02:32 +08:00
|
|
|
# >_ Codex Office
|
|
|
|
|
|
|
|
|
|
Codex CLI 風格的 multi-agent 虛擬辦公室視覺化。與姊妹作 `claude-office` 同架構
|
|
|
|
|
(參考 [WW-AI-Lab/openclaw-office](https://github.com/WW-AI-Lab/openclaw-office),MIT),
|
|
|
|
|
改為 OpenAI Codex 的語意:終端機綠 + 冷灰科技感、`>_` 游標標誌、
|
|
|
|
|
工具氣泡顯示 exec / apply_patch / shell 等 Codex 工具。
|
|
|
|
|
|
2026-07-20 15:33:42 +08:00
|
|
|
## 畫面預覽
|
|
|
|
|
|
|
|
|
|
### 淺色模式
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 深色模式與 subagent 協作
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2026-07-20 14:02:32 +08:00
|
|
|
## 功能
|
|
|
|
|
|
|
|
|
|
- **2D 平面圖辦公室** — 主力工位區、Worker 熱桌區、會議區、休息區,十字走廊尋路
|
|
|
|
|
- **Chibi 小人** — 依 id 確定性生成外觀;狀態驅動姿勢(站/坐/走)與動作(打字/說話/搖晃)
|
|
|
|
|
- **狀態表情氣泡** — 思考雲、工具膠囊(轉動齒輪 + 工具名)、對話氣泡、錯誤、生成火花
|
|
|
|
|
- **模擬導演** — 進場 → 接任務 → 思考 → 調用工具 → 派 worker → 回報 → 開會 → 倒咖啡
|
|
|
|
|
- **實況模式** — tail `~/.codex/sessions/` 的 rollout transcripts,依 cwd 分專案顯示真實活動
|
|
|
|
|
- **RWD** — 直版滿寬顯示辦公室,面板移到下方;側欄可收合
|
|
|
|
|
|
|
|
|
|
## 快速開始
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm install
|
|
|
|
|
npm run dev # http://localhost:5173(劇本模擬模式)
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 實況模式(LIVE)— 顯示真實 Codex CLI 活動
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
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、不要對外開放**。
|
|
|
|
|
|
2026-07-20 14:59:24 +08:00
|
|
|
### 在辦公室對話(LIVE 模式)
|
|
|
|
|
|
|
|
|
|
點選專案 agent 後,側邊面板是一個**雙向聊天室**:每則訊息 spawn 一次
|
|
|
|
|
`codex exec --json`,從輸出捕捉 `thread_id`,下一則自動 `codex exec resume`
|
|
|
|
|
接力。回覆同時顯示在聊天串和小人頭上的對話氣泡。
|
|
|
|
|
|
|
|
|
|
- 「接續專案最近 session」:第一句改從該專案最近的 rollout 接續
|
|
|
|
|
- 「🔄 新對話」:清空 office 對話串(會終止進行中的執行)
|
|
|
|
|
- 事件:`POST /chat` → SSE 廣播 `chat_start` / `chat_text` / `chat_done`
|
|
|
|
|
|
|
|
|
|
### 在辦公室下任務(API)
|
2026-07-20 14:21:44 +08:00
|
|
|
|
|
|
|
|
點選任一專案 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 在該專案內改檔案跑指令 — **請理解風險後再用**
|
|
|
|
|
|
2026-07-20 14:02:32 +08:00
|
|
|
## PM2 部署
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
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)
|
|
|
|
|
```
|
