AI/claude-office
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
9 Commits 1 Branch 0 Tags
d45070d9f96181b04090723ea5cca59f6a0f7dca
Commit Graph
9 Commits
This Branch
This Branch
All Branches
Author SHA1 Message Date
JianMiauandClaude Fable 5 d45070d9f9 README 增加模擬模式截圖 
摘要：
在 README 頂部加入「畫面預覽」章節,附四張模擬模式截圖
(總覽、subagent 協作連線、agent 詳情面板、深色主題)。

影響：
純文件更新;截圖存於 docs/screenshots/(約 1MB)。

修法：
以正式版於模擬模式 2x 速度截圖,涵蓋協作連線、熱桌 subagent、
詳情面板與明暗主題;README 以相對路徑嵌入。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
 2026-07-20 15:35:48 +08:00
JianMiauandClaude Fable 5 aa6a8b8242 對話可切全螢幕,亦可縮回側邊面板回到辦公室 
摘要：
LIVE 模式對話新增「⛶ 全螢幕」按鈕,展開為置中的全螢幕聊天卡片
(辦公室模糊在後);全螢幕內有「⊟ 回到辦公室」鈕、對話列有「縮小」,
按 Esc 亦可返回。

根本原因：
對話擠在 300px 側欄裡,長對話讀起來侷促,需要一個能專心對話的大畫面,
且要能隨時縮回辦公室繼續看小人。

影響：
新增純 UI 覆蓋層,不影響資料流;側欄與全螢幕共用同一對話元件,
狀態同步(同一 store thread)。取消選取或切換模式時自動關閉全螢幕。

修法：
- 抽出 ChatConversation 共用元件(variant: panel | full)
- ChatFullscreen 覆蓋層(頂欄 agent 資訊 + Esc 關閉)
- store 新增 chatFullscreen / setChatFullscreen;selectAgent(null) 與
  clearWorld 時歸零;App 依 chatFullscreen && live && 已選取 渲染覆蓋層
- styles:.chat-full-overlay 毛玻璃背景、卡片版面、full variant 撐滿高度

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
 2026-07-20 15:19:26 +08:00
JianMiauandClaude Fable 5 b12627a9ef LIVE 模式改為雙向對話,參考 claudecodeui 的 resume 接力機制 
摘要：
側邊面板從單向任務派發升級為聊天室:每則訊息 spawn
claude -p --output-format stream-json,捕捉 session_id 後
下一則自動 --resume 接力,對話得以連續;回覆同步顯示在
聊天串與小人頭上的對話氣泡。

根本原因：
單向 /task 發出後看不到回覆內容,也無法追問;claudecodeui
證明 headless + resume 接力即可實現連續對話,無需常駐 runtime。

影響：
watcher 新增 POST /chat(每專案一個 office thread、busy 檢查、
reset 會終止進行中的執行);SSE 新增 chat_start/chat_text/chat_done。
/task API 保留。已實測兩輪對話,第二輪正確記得第一輪內容。

修法：
- watch.mjs:launchChat 解析 stream-json(init 抓 session_id、
  assistant 文字轉發、result 收尾),chatThreads 記憶 thread
- store:chats Map + chatAppend/chatSetBusy/chatClear
- live.ts:sendChat/resetChat + chat_* 事件對映
- SidePanel:ChatPanel(氣泡串、自動捲底、Enter 送出、新對話)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
 2026-07-20 14:59:19 +08:00
JianMiauandClaude Fable 5 a967306a2f 任務派發按鈕加 hover 氣泡提示 
摘要：
「續上次 session」與「派發任務」滑鼠停留時顯示氣泡說明,
講清楚 resume 的限制:只能延續已結束的 session,
無法插入正在終端機進行中的互動對話。

根本原因：
resume 的行為(--resume 最新已結束 session、執行中任務會排隊)
只寫在 README,介面上沒有任何說明,容易誤以為能接管進行中的對話。

影響：
純 UI 提示,無行為變更。

修法：
styles.css 新增 .tip 通用氣泡(data-tip 屬性 + ::before/::after,
延遲淡入、面板內靠右對齊);SidePanel 兩個控制項掛上說明文字。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
 2026-07-20 14:35:00 +08:00
JianMiauandClaude Fable 5 b324775f65 記住主題/模式/面板偏好,重開頁面自動還原 
摘要：
深色模式、LIVE 模式與面板收合狀態存入 localStorage,
頁面載入時自動套用,不需每次手動切換。

根本原因：
theme/mode/panelOpen 只存在 Zustand 記憶體 state,
重新整理即重置為淺色 + 模擬模式。

影響：
使用者偏好跨重整保留;LIVE 偏好在開機時由 runtime.setMode 套用,
確保 SSE 連線流程正確執行。無痕模式等 localStorage 不可用時安全降級。

修法：
- office-store:loadPref/savePref 包裝(try/catch),
  theme/panelOpen 初始值讀取,setTheme/setMode/togglePanel 寫入
- App:啟動時 loadPreferredMode() === "live" 則呼叫 setMode("live")

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
 2026-07-20 14:29:38 +08:00
JianMiauandClaude Fable 5 a8cb82cd6f LIVE 模式可直接在辦公室對專案派發任務 
摘要：
點選專案 agent 後可輸入任務派發,監看伺服器在該專案 cwd spawn
headless session(claude -p),執行過程即時演在辦公室,結束回報事件。

根本原因：
原本實況模式只能唯讀觀察 transcript,無法像 openclaw-office 的
chat.send 一樣從辦公室出手;缺一個能驅動真實 agent 的通道。

影響：
watcher 新增 POST /task(Origin 白名單 5173/5180、每專案排隊上限 3、
15 分鐘逾時);headless 以 acceptEdits 權限執行,等於允許 AI 改檔案,
僅限 localhost 使用。新產生的 session 檔改為從頭讀取,派發過程完整可視。

修法：
- server/watch.mjs:launchTask(prompt 走 stdin 防注入、--resume 支援、
  stderr 摘要回報)、handleTaskRequest(CORS/驗證/排隊)、born-now 檔案從頭 tail
- live.ts:dispatchTask() + task_accepted/task_done 事件對映
- SidePanel:LIVE 模式 TaskComposer(textarea + 續 session 勾選 + Ctrl+Enter)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
 2026-07-20 14:21:25 +08:00
JianMiauandClaude Fable 5 bc78457372 新增 PM2 部署設定與生產用靜態伺服器 
摘要：
加入 ecosystem.config.cjs(web + watch 兩個 app)與零依賴靜態伺服器
server/serve.mjs,並將監看伺服器改為僅綁 127.0.0.1。

根本原因：
先前只能用 vite dev server 開發模式跑,沒有常駐部署方式;
且 watch.mjs 預設綁所有介面,transcript 資料有暴露到區網的風險。

影響：
pm2 start ecosystem.config.cjs 即可常駐:
- claude-office-web:5180,綁 0.0.0.0,區網可看(模擬模式)
- claude-office-watch:5179,僅 127.0.0.1,實況模式限本機瀏覽器

修法：
- server/serve.mjs:零依賴靜態服務 dist/,SPA fallback,
  assets 走 immutable 快取
- watch.mjs listen 加上 127.0.0.1
- README 補 PM2 部署章節(含 Windows 開機自啟說明)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
 2026-07-20 13:53:54 +08:00
JianMiauandClaude Fable 5 1dc4920b32 RWD:直版改直向堆疊讓辦公室區域最大化 
摘要：
直版/窄螢幕時辦公室改為滿寬顯示並鎖定 1200:700 比例,側邊面板移到下方;
另新增面板收合按鈕,桌面版也能全畫面看辦公室。

根本原因：
原本任何螢幕都是「辦公室 + 300px 側欄」左右排,SVG 以 meet 等比縮放,
直版視窗寬度受限時上下大量留白,辦公室被壓得很小。

影響：
直版(手機/平板)辦公室寬度從約一半提升到 100%;
窄橫版維持左右排但側欄縮為 232px;桌面版行為不變,多一顆 ⊞ 收合鈕。

修法：
- styles.css:orientation: portrait 時 main-row 改 column,
  floorplan-wrap 用 aspect-ratio 1200/7 00 撐滿寬度,不再靠 flex 留白;
  ≤900px 壓縮 header(隱藏圖例/副標、按鈕縮小、允許換行)
- store 新增 panelOpen/togglePanel,App 據此條件渲染 SidePanel

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
 2026-07-20 13:40:38 +08:00
JianMiauandClaude Fable 5 f935a2ef2d 建立 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