摘要: 參考 WW-AI-Lab/openclaw-office(MIT)的 office-2d 邏輯,重新實作 Claude 風格的 multi-agent 虛擬辦公室:四分區平面圖、走廊尋路、chibi 小人、狀態表情氣泡、 subagent 熱桌、會議聚集,以及可視化真實 Claude Code 活動的實況模式。 根本原因: 需要一個能一眼看出各專案 Claude Code 工作狀態(是否派發任務、調用工具、 派生 subagent)的監控介面,現有工具沒有對應的視覺化。 影響: 新專案,不影響既有系統。實況模式的監看伺服器僅綁 localhost:5179, 會讀取本機 ~/.claude/projects/ 的 session transcripts。 修法: - Vite 6 + React 19 + Zustand,SVG 平面圖 + CSS 動畫,實測 60fps - src/sim/director.ts:劇本模擬引擎(FSM + 會議排程) - server/watch.mjs:零依賴 Node watcher,tail JSONL 轉譯為 SSE 事件 - src/gateway/live.ts:事件對映 store action,支援模式即時切換 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
26 lines
540 B
JSON
26 lines
540 B
JSON
{
|
|
"name": "claude-office",
|
|
"private": true,
|
|
"version": "0.1.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vite build",
|
|
"preview": "vite preview",
|
|
"typecheck": "tsc --noEmit",
|
|
"watch": "node server/watch.mjs"
|
|
},
|
|
"dependencies": {
|
|
"react": "^19.1.0",
|
|
"react-dom": "^19.1.0",
|
|
"zustand": "^5.0.5"
|
|
},
|
|
"devDependencies": {
|
|
"@types/react": "^19.1.8",
|
|
"@types/react-dom": "^19.1.6",
|
|
"@vitejs/plugin-react": "^4.5.2",
|
|
"typescript": "~5.8.3",
|
|
"vite": "^6.3.5"
|
|
}
|
|
}
|