建立 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>

src/App.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { FloorPlan } from "./components/FloorPlan";
+import { HeaderBar } from "./components/HeaderBar";
+import { SidePanel } from "./components/SidePanel";
+import { startRuntime } from "./sim/runtime";
+import { useOfficeStore } from "./store/office-store";
+
+export default function App() {
+  const theme = useOfficeStore((s) => s.theme);
+
+  useEffect(() => {
+    startRuntime();
+  }, []);
+
+  return (
+    <div className={`app ${theme}`}>
+      <HeaderBar />
+      <div className="main-row">
+        <FloorPlan />
+        <SidePanel />
+      </div>
+    </div>
+  );
+}