建立 Claude Office 虛擬辦公室(模擬 + 實況雙模式)

摘要：參考 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>
2026-07-20 12:31:18 +08:00
commit f935a2ef2d
29 changed files with 5802 additions and 0 deletions
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="zh-Hant">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Claude Office — 虛擬辦公室</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='80' font-size='80'%3E%E2%9C%B3%3C/text%3E%3C/svg%3E" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>