xitto-kernel 0.6.1 → 0.8.4

package/CHANGELOG.md

@@ -1,5 +1,88 @@
 # Changelog
 
+## 0.8.4
+
+- **桌面雙欄佈局（善用寬螢幕）**：原本單條 760px 窄欄、左右大量留白。改用 CSS grid 雙欄：
+  - **許願頁** = 主區（許願輸入 + 當前任務/成品）+ **歷史側欄**（sticky，捲動主區時歷史保持可見）
+  - **工作台** = 檔案瀏覽器在左、**檔案預覽在右**（並排，不必上下捲）
+  - 容器加寬到 1180px；` (max-width:860px)` 自動收成單欄（窄螢幕/手機不變）
+  - 純 CSS/HTML 結構調整；測試 188/188，內嵌 JS 語法檢查 + 服務頁面結構驗證通過
+
+## 0.8.3
+
+- **工作台改逐層瀏覽（不一次攤平整個專案）**：原本 `listWorkspaceFiles` 會遞迴把所有檔案攤成一長串,對真實專案太雜。改成像檔案總管:只列當前目錄的子資料夾+檔案,點資料夾才進去,有「上一層」。
+  - 新增 `listDir(wsDir, sub)`（列單層,排除內部目錄,防穿越）；`/v1/workspaces/files` 改吃 `sub=` 逐層
+  - 網頁工作台改可導航（麵包屑 + 進子資料夾 + 上一層）；切換空間/分頁時重置到根
+  - 1 個新測試（listDir 不遞迴/子目錄分開/防穿越）+ 真實 server 端到端（根→src→src/utils）。測試 188/188
+
+## 0.8.2
+
+- **`npm run serve:local`**：一行啟動本地就地模式（= `XITTO_SERVER_LOCAL=1 XITTO_SERVER_SANDBOX=off`，token 預設 `secret`、可用 `XITTO_SERVER_TOKEN` 覆寫）。不用每次手打那串環境變數。
+
+## 0.8.1
+
+- **資料夾用「選」的（本地模式）**：不用打路徑。
+  - 瀏覽器原生選資料夾拿不到絕對路徑(安全限制),改由 **local server 端列資料夾** → 網頁「📁 選資料夾」鈕,從家目錄點進去挑一個
+  - 新增 `GET /v1/fs?path=`（**僅本地模式**;列子資料夾,排除 . 開頭/node_modules;託管模式回 403,不洩漏主機結構）
+  - 網頁資料夾瀏覽器 modal（上一層/家目錄/選定）；空間下拉以 📁 標真實資料夾
+  - 1 個新測試（/v1/fs 本地列檔 / 託管 403）+ 真實 server 端到端（家目錄→xiza→選 xitto*）。測試 187/187
+
+## 0.8.0
+
+- **本地就地模式（許願台像 Claude Code 改你選的真實資料夾）**：打通「隔離(許願台)」與「就地(Claude Code)」兩個檔案模型。
+  - `XITTO_SERVER_LOCAL=1` 時,workspace 可為**真實資料夾的絕對路徑** → 任務**就地改該資料夾的檔**(無隔離副本);網頁「新專案」可貼路徑
+  - 新增 `workspaceDir(baseDir, ws, local)`：local + 絕對路徑 → 就地；**否則(含託管收到絕對路徑)→ 消毒成管理空間,不逃逸**
+  - 工作台端點改 query `?ws=`（容納絕對路徑）；in-place 資料夾不存在 → 400
+  - 網頁注入 `__LOCAL__`；空間下拉以 `📁` 標真實資料夾
+  - 4 個新測試（workspaceDir 就地/不逃逸/管理）+ 真實 server 端到端
+    （local：就地改 /tmp/myproj/calc.js 的 a-b→a+b、無副本；hosted：絕對路徑被消毒不逃逸）。測試 186/186
+
+## 0.7.1
+
+- **成品迭代「繼續／調整」（迭代有脈絡）**：在許願台補上迭代閉環。
+  - 完成的成品上加「↳ 繼續／調整這個成果」→ 送出**後續任務**,接續這次的對話（`sessionId`）+ 同工作區
+    → agent 同時有「**檔案 + 當時的討論與理由**」,不只是檔案
+  - 預設每個許願是乾淨新對話（不暴脹）；按「繼續」才接續那條線（像 ChatGPT 新對話 vs 接著聊）
+  - 任務 view 加 `continued`（帶 sessionId = 接續）；歷史以 `↳` 標出接續鏈
+  - 底層 sessionId 接續 kernel 本已支援,本版只是接到 UI + 標記
+  - 1 個測試（view.continued）+ 真實 server 端到端：任務1 私下說「最不喜歡 Go」(只在對話、不在檔案)→ 後續任務「刪掉我最不喜歡的」→ 正確刪掉 Go（langs.txt 剩 Rust/Zig）。測試 185/185
+
+## 0.7.0
+
+- **工作台分頁（看見並管理持久工作區）**：許願台加「許願 | 📂 工作台」**同頁分頁**（不是另開頁面,共用空間/檢視器/認證）。
+  - **許願**=交辦任務的主流程（不變）；**工作台**=列出當前專案累積的**所有檔案**（看/下載/刪）
+  - server 新增 `GET /v1/workspaces/:ws/files`（列檔,排除 .xitto-kernel/tmp/node_modules）、`GET/DELETE /v1/workspaces/:ws/file`（取/刪,防穿越）
+  - 檔案檢視器抽為通用 `renderFile(base,…)`，任務成品與工作台共用；`serveFile` 抽出（content-type/下載）
+  - 讓持久工作空間從「半成品（檔案累積但看不見）」變成可見可管理；刻意保持輕量（檔案清單,非 IDE）
+  - 4 個新測試（safeWs 防穿越 / listWorkspaceFiles 排除內部目錄）+ 真實 server 端到端（兩任務累積→列/取/刪/防穿越）。測試 184/184
+
+## 0.6.4
+
+- **許願台「展開過程」+ 彩色 diff（借 Claude Code 的工具卡/⌥展開,翻譯成非技術版）**：
+  - 任務 `progress.log` 累積**完整步驟**（人話動作 + 參數摘要 + isError + 編輯的 `diff`）；`mapEvent` 的 `tool_end` 帶 `diff`
+  - 網頁加「**展開過程（N 步）**」摺疊：預設安靜(只給進度+成品),展開才顯示步驟卡 + **綠 +/紅 - 彩色 diff** → 同畫面服務「只要結果」與「想看細節」兩種人
+  - `_diff` 由 kernel 算好(v0.6.3),這版只是把它帶進網頁
+  - 3 個新測試（tool_end 帶 diff / log 累積 + diff 補齊）+ 真實 server 端到端（建檔→改檔,改檔步驟帶 `- a-b` / `+ a+b`）。測試 182/182
+
+## 0.6.3
+
+- **彩色 diff（編輯一目了然）**：
+  - kernel 新增 `diff.js`（LCS 行級 diff）；**在 `wrapUndo` 集中計算**——用既有的 undo 快照(before)+ 改後內容(after),
+    把 `_diff` 掛在工具結果上（不進 LLM content,僅供 app 渲染）。**所有 pack 的 edit/write 免改**,二進位/超大檔自動跳過
+  - TUI 渲染 `diffBlock`：`⎿ +N -N 行` + 綠 `+` / 紅 `-` 變更行（過長摺疊）
+  - 4 個測試（lineDiff 增刪/新檔/超大、diffBlock 渲染、kernel edit 自動掛 _diff）+ 視覺驗證。測試 180/180
+  - 註：`_diff` 已在 kernel 算好,日後接到許願台網頁很容易（目前先做 TUI）
+
+## 0.6.2
+
+- **TUI 補強（對標 Claude Code 的工具卡）**：
+  - **工具卡**：`⏺ name(args)` 標頭 + `⎿` **多行**結果（首行對齊、續行縮排），過長摺疊成「… +N 行」（取代原本單行截斷）
+  - **參數摘要人性化**：`bash(npm test)`、`edit(src/a.js)`——取最有意義的參數，不再倒整包 JSON
+  - **待辦清單** ☑/◐/☐ 渲染（已有，微調配色）
+  - 成功 `⎿ ✓`（綠）/ 失敗 `⎿ ✗`（紅，多顯示幾行）
+  - `summarize` / `toolBlock` 抽為純函數並匯出 + 2 個測試。測試 176/176。
+  - 仍缺（後續）：編輯的彩色 diff（需 edit 工具回傳前後內容）、底部模式/快捷鍵提示列強化
+
 ## 0.6.1
 
 - **成品溯源/位置**：分邏輯與實體兩層。

package/README.md

@@ -42,7 +42,7 @@ xitto-kernel init
 **3. 跑內建 pack（互動 CLI）**
 ```bash
 xitto-kernel                  # coding agent（讀寫檔案、跑命令）
-xitto-kernel --tui            # 完整 Ink TUI（持久狀態列、串流、Esc 中斷；需真實終端）
+xitto-kernel --tui            # 完整 Ink TUI（持久狀態列、串流、Esc 中斷、工具卡⏺/⎿、彩色 diff、待辦☑；需真實終端）
 xitto-kernel --pack notes     # 筆記 / 知識庫 agent
 xitto-kernel --pack data-query
 xitto-kernel --sandbox        # 啟動就開 Seatbelt 沙箱
@@ -96,18 +96,28 @@ const o = await kernel.runOutcome('建立 greet.js 並寫個範例驗證');
 **🪄 許願台網頁（給非技術使用者：瀏覽器打開就用）**
 ```bash
 XITTO_SERVER_TOKEN=secret npm run serve   # 然後瀏覽器開 http://localhost:8787/
+# 本地就地模式（可選真實資料夾、就地改檔，沙箱關）：
+npm run serve:local                        # = LOCAL=1 SANDBOX=off,token 預設 secret(可用 XITTO_SERVER_TOKEN 覆寫)
 ```
 不用終端機、不用碰金鑰(伺服器端管)。介面以**結果**為中心,不是聊天:
 - **許願**:打一句「你想完成什麼」→ 交辦(背景跑 goal loop)
 - **進行中**:**即時進度 + 活著的證明**——每秒跳動的「已進行 Ns」心跳時鐘、目前階段(思考中/執行中/驗收中)、agent 當下的**思考文字**(💭)、工具動作翻成人話、第幾輪 + 動作數。看得到它在想什麼、做什麼
 - **待辦打勾**:agent 用 `todo_write` 規劃多步任務時,顯示 ☐/◐/☑ 清單,把「未知時長」變成「看得到的剩餘步數」(對標 Claude Code)
 - **隨時可停**:每個進行中任務有「停止」鈕 → `POST /v1/tasks/:id/cancel`(abort 正在跑的 agent)。控制權在使用者手上,降低「啟動了控制不了的東西」的焦慮
+- **展開過程**:預設安靜(只給進度與成品);想看細節按「展開過程」→ 完整步驟卡(讀/改/跑,人話)+ **編輯的彩色 diff**(綠 +/紅 -)。同一畫面服務「只要結果」與「想看細節」兩種人(對標 Claude Code 的 ⏺/⎿ + ctrl+r 展開)
 - **需要你回答**:agent 暫停提問時,跳出問題 + 回答框(澄清通道)
 - **收成品**:完成後顯示摘要 + **產出的檔案**,點檔名可直接看內容(`GET /v1/tasks/:id/file`,防路徑穿越)
+- **繼續／調整(迭代有脈絡)**:成品上有「↳ 繼續／調整這個成果」——打一句想改什麼/想深入什麼,送出一個**後續任務**,**接續這次的對話(sessionId)+ 同工作區**。agent 同時有「檔案 + 當時的討論與理由」,不只是檔案。預設每個許願是乾淨新對話(不暴脹),按「繼續」才接續那條線(像 ChatGPT 開新對話 vs 接著聊)。歷史以 `↳` 標出接續鏈
 - **歷史成品**:過往交辦的清單(願望 + 狀態),不是聊天串
 
+**桌面雙欄佈局**:許願頁=主區(許願+當前任務/成品)+ 歷史 sticky 側欄;工作台=檔案瀏覽器左、預覽右並排。容器 1180px,窄螢幕自動收單欄。
+
+**工作台分頁(看見並管理你的工作區)**:許願台頂部有「許願 | 📂 工作台」分頁(同頁切換,不是另開頁面)。**許願**=交辦任務的主流程;**工作台**=**逐層瀏覽**當前專案的檔案(像檔案總管:只列當前目錄的子資料夾+檔案,點資料夾才進去,不一次遞迴攤平),看/下載/刪。單一任務用許願就夠;做專案的人切到工作台看「我累積了什麼、拿任意檔、清理」——讓持久工作空間從隱形變成可見可管理。刻意保持輕量(檔案清單,不是 IDE)。
+
 **持久工作空間(成品間的關係)**:每個成品是**獨立的對話**(不續接前一個,避免 context 暴脹),但**共用一個持久工作空間**(`.xitto-server/ws/<workspace>`,預設 `default`)——所以 ① **檔案留存**,後面的任務能接續前面的成果(「把我上次做的 plan.md 翻成英文」);② **五層沉澱跨成品累積**(偏好/技能/經驗/信任)——它**越用越懂你**,不再是每次都從零開始的陌生人。`workspace` 可在 POST 時指定(多使用者各自一個);網頁有「專案」下拉切換,每份成品卡標出 `📁 所屬空間`。
 
+**本地就地模式(像 Claude Code 改你選的真實資料夾)**:`XITTO_SERVER_LOCAL=1` 時,網頁多一個「**📁 選資料夾**」鈕——**用點的**從家目錄瀏覽進你的真實資料夾並選定(不用打路徑;瀏覽器拿不到絕對路徑,所以由 local server 端列資料夾),或「新專案」直接貼絕對路徑也行。任務就**就地改那個資料夾的檔**(不另開隔離副本),工作台列的也是它。這把「許願台(隔離,服務非技術使用者)」和「Claude Code(就地,改你現有的 codebase)」兩個模型打通:**本機自用想就地 → 給路徑;隔離/託管 → 給名稱**。**安全**:只在 `local` 模式才認絕對路徑;**託管模式收到絕對路徑會被消毒成管理空間,不會逃逸到主機任意路徑**。
+
 **溯源/檔案位置**:成品記錄它的**邏輯位置(workspace)**;**實體絕對路徑**預設不外露(託管不洩漏伺服器路徑),只在**本地模式**(`XITTO_SERVER_LOCAL=1`)才在成品附「📂 檔案位置」供你到 Finder/Explorer 找檔。
 
 零依賴單一 HTML(`src/app/web/index.html`),polling 不靠 SSE。token 注入頁面供同源呼叫——本地自用零設定;**正式部署請前置真實認證**。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xitto-kernel",
-  "version": "0.6.1",
+  "version": "0.8.4",
   "type": "module",
   "description": "領域無關的 agent 底座（kernel + 可插拔 DomainPack），從 xitto-code 抽象而來",
   "keywords": [
@@ -42,6 +42,7 @@
     "demo": "node examples/demo.js",
     "eval": "node eval/run.js",
     "serve": "node src/app/server.js",
+    "serve:local": "XITTO_SERVER_LOCAL=1 XITTO_SERVER_SANDBOX=off XITTO_SERVER_TOKEN=${XITTO_SERVER_TOKEN:-secret} node src/app/server.js",
     "start": "node bin/xitto-kernel.js"
   },
   "exports": {

package/src/app/server.js

@@ -3,9 +3,10 @@
 // JSON 或 SSE 串流，以及「背景任務 + 完成通知（webhook）」—— 派任務出去、做完回呼，不用一直盯著。
 // 這是「另一個 app 消費同一組 kernel 事件」—— 不動 kernel 核心。
 import { createServer } from 'node:http';
-import { mkdirSync, readFileSync, existsSync, rmSync } from 'node:fs';
+import { mkdirSync, readFileSync, existsSync, rmSync, readdirSync, statSync } from 'node:fs';
 import { join, dirname, isAbsolute, relative, basename, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { homedir } from 'node:os';
 import { createKernel } from '../kernel/index.js';
 import { loadModel } from './providers.js';
 import { createCodingPack } from '../packs/coding/index.js';
@@ -27,6 +28,47 @@ const newId = (p = 's') => p + Date.now().toString(36) + Math.random().toString(
 const MIME = { md: 'text/markdown', markdown: 'text/markdown', txt: 'text/plain', log: 'text/plain', json: 'application/json', csv: 'text/csv', html: 'text/html', htm: 'text/html', js: 'text/javascript', mjs: 'text/javascript', ts: 'text/plain', py: 'text/plain', sh: 'text/plain', css: 'text/css', xml: 'application/xml', yaml: 'text/plain', yml: 'text/plain', png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', webp: 'image/webp', svg: 'image/svg+xml', pdf: 'application/pdf', pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' };
 export function contentTypeFor(name) { const ext = (String(name).split('.').pop() || '').toLowerCase(); return MIME[ext] || 'application/octet-stream'; }
 
+// 工具參數摘要（給「展開過程」步驟卡）：取最有意義的參數。
+const argSummary = (args) => { if (!args || typeof args !== 'object') return ''; const v = args.command ?? args.path ?? args.pattern ?? args.query ?? args.url ?? args.name ?? args.topic; return (v != null && v !== '') ? String(v).replace(/\s+/g, ' ').slice(0, 80) : ''; };
+
+// workspace 名稱消毒（防穿越）。
+export const safeWs = (w) => (String(w || 'default').replace(/[^a-zA-Z0-9_-]/g, '') || 'default');
+
+// 解析 workspace → 真實目錄。本地模式 + 絕對路徑 → 就地用該真實資料夾（像 Claude Code）；
+// 否則（含託管模式收到絕對路徑）→ 消毒成管理空間 ws/<name>，不會逃逸到主機任意路徑。
+export function workspaceDir(baseDir, ws, local) {
+  return (local && isAbsolute(String(ws || ''))) ? String(ws) : join(baseDir, 'ws', safeWs(ws));
+}
+
+// 列工作區檔案（給「工作台」分頁）：遞迴,排除內部目錄,回 [{path,size,mtime}]。
+const SKIP_WS = new Set(['.xitto-kernel', 'node_modules', '.git', 'tmp', '.swebench-repos']);
+export function listWorkspaceFiles(dir, base = dir, out = [], depth = 0) {
+  if (depth > 8 || out.length > 2000) return out;
+  let entries; try { entries = readdirSync(dir, { withFileTypes: true }); } catch { return out; }
+  for (const e of entries) {
+    if (SKIP_WS.has(e.name)) continue;
+    const full = join(dir, e.name);
+    if (e.isDirectory()) listWorkspaceFiles(full, base, out, depth + 1);
+    else if (e.isFile()) { try { const s = statSync(full); out.push({ path: relative(base, full), size: s.size, mtime: s.mtimeMs }); } catch { /* 略 */ } }
+  }
+  return out;
+}
+
+// 列單一層級（給工作台逐層瀏覽,不一次遞迴攤平整個專案）：回 { sub, dirs:[], files:[{name,size,mtime}] }。
+export function listDir(wsDir, sub) {
+  const rel = String(sub || '').replace(/^\/+|\/+$/g, '');
+  const dir = rel === '' ? wsDir : resolveArtifact(wsDir, rel);
+  if (!dir || !existsSync(dir)) return null;
+  const dirs = [], files = [];
+  let entries; try { entries = readdirSync(dir, { withFileTypes: true }); } catch { return null; }
+  for (const e of entries) {
+    if (SKIP_WS.has(e.name)) continue;
+    if (e.isDirectory()) dirs.push(e.name);
+    else if (e.isFile()) { try { const s = statSync(join(dir, e.name)); files.push({ name: e.name, size: s.size, mtime: s.mtimeMs }); } catch { /* 略 */ } }
+  }
+  return { sub: rel, dirs: dirs.sort(), files: files.sort((a, b) => b.mtime - a.mtime) };
+}
+
 // 交付檔案路徑解析（防穿越）：rel 必須是 workdir 內的相對路徑,否則回 null。
 export function resolveArtifact(workdir, rel) {
   if (typeof rel !== 'string' || !rel || isAbsolute(rel)) return null;
@@ -41,7 +83,7 @@ const webHtml = () => (_webHtml ??= readFileSync(join(dirname(fileURLToPath(impo
 // 把原始 kernel 事件壓成精簡的對外事件（串流端與背景任務共用，避免重複映射）
 export const mapEvent = (ev) => {
   if (ev.type === 'tool_execution_start') return { type: 'tool', name: ev.toolName, args: ev.args };
-  if (ev.type === 'tool_execution_end') return { type: 'tool_end', name: ev.toolName, isError: !!ev.isError };
+  if (ev.type === 'tool_execution_end') return { type: 'tool_end', name: ev.toolName, isError: !!ev.isError, diff: ev.result?._diff || undefined };
   if (ev.type === 'message_update' && ev.assistantMessageEvent?.type === 'text_delta') return { type: 'text', delta: ev.assistantMessageEvent.delta };
   if (ev.type === 'round') return { type: 'round', round: ev.round, maxRounds: ev.maxRounds };
   if (ev.type === 'verify_start') return { type: 'phase', phase: 'verifying' };
@@ -64,15 +106,22 @@ export function createTaskStore({ runJob, concurrency = 2, onFinish, maxEvents =
   const subs = new Map();    // id -> Set<(ev)=>void>
   let active = 0;
 
-  const view = (t) => ({ taskId: t.id, status: t.status, pack: t.spec.pack || 'general', mode: t.spec.mode || 'turn', workspace: t.spec.workspace || 'default', goal: t.spec.goal || t.spec.input || '', sessionId: t.result?.sessionId || t.spec.sessionId || null, createdAt: t.createdAt, startedAt: t.startedAt, finishedAt: t.finishedAt, error: t.error, pending: t.pending || null, progress: t.progress || null });
+  const view = (t) => ({ taskId: t.id, status: t.status, pack: t.spec.pack || 'general', mode: t.spec.mode || 'turn', workspace: t.spec.workspace || 'default', goal: t.spec.goal || t.spec.input || '', sessionId: t.result?.sessionId || t.spec.sessionId || null, continued: !!t.spec.sessionId, createdAt: t.createdAt, startedAt: t.startedAt, finishedAt: t.finishedAt, error: t.error, pending: t.pending || null, progress: t.progress || null });
 
   const emit = (t, ev) => {
     t.events.push(ev);
     if (t.events.length > maxEvents) t.events.shift();
     // 進度追蹤（給 UI 顯示「正在做什麼」,不要只顯示進行中；排除 text 雜訊）
-    const p = (t.progress ||= { steps: 0, round: 0, maxRounds: 0, recent: [], phase: 'starting', thinking: '', todos: [] });
+    const p = (t.progress ||= { steps: 0, round: 0, maxRounds: 0, recent: [], phase: 'starting', thinking: '', todos: [], log: [] });
     if (ev.type === 'tool' && ev.name === 'todo_write') { if (Array.isArray(ev.args?.todos)) p.todos = ev.args.todos; } // 待辦清單（給 UI 打勾）
-    else if (ev.type === 'tool') { p.steps++; p.phase = 'acting'; p.thinking = ''; t._textbuf = ''; p.recent.push({ name: ev.name, args: ev.args }); if (p.recent.length > 6) p.recent.shift(); }
+    else if (ev.type === 'tool') {
+      p.steps++; p.phase = 'acting'; p.thinking = ''; t._textbuf = '';
+      p.recent.push({ name: ev.name, args: ev.args }); if (p.recent.length > 6) p.recent.shift();
+      if (p.log.length < 100) p.log.push({ name: ev.name, summary: argSummary(ev.args) }); // 完整步驟（給「展開過程」）
+    } else if (ev.type === 'tool_end') {
+      const last = p.log[p.log.length - 1];
+      if (last && last.name === ev.name && !('isError' in last)) { last.isError = ev.isError; if (ev.diff) last.diff = ev.diff; }
+    }
     else if (ev.type === 'text') { p.phase = 'thinking'; t._textbuf = ((t._textbuf || '') + (ev.delta || '')).slice(-400); p.thinking = t._textbuf.replace(/\s+/g, ' ').trim().slice(-150); }
     else if (ev.type === 'round') { p.round = ev.round; if (ev.maxRounds) p.maxRounds = ev.maxRounds; p.thinking = ''; t._textbuf = ''; }
     else if (ev.type === 'phase') p.phase = ev.phase;
@@ -172,6 +221,17 @@ export function createServerApp({ model, getApiKey, token, baseDir = '.xitto-ser
   const log = (o) => console.log(JSON.stringify({ ts: new Date().toISOString(), ...o }));
   const readBody = (req) => new Promise((resolve) => { let b = ''; req.on('data', (c) => { b += c; if (b.length > 1e6) req.destroy(); }); req.on('end', () => { try { resolve(JSON.parse(b || '{}')); } catch { resolve({}); } }); });
   const sseHead = (res) => res.writeHead(200, { 'content-type': 'text/event-stream; charset=utf-8', 'cache-control': 'no-cache', connection: 'keep-alive' });
+  // 依副檔名給 content-type 回傳檔案（圖片顯示/md 渲染/下載皆走這）。
+  const serveFile = (res, full, rel, download) => {
+    if (!existsSync(full)) return json(res, 404, { error: '檔案不存在' });
+    try {
+      const ct = contentTypeFor(rel);
+      const isText = /^text\/|json|xml|javascript|svg/.test(ct);
+      const headers = { 'content-type': ct + (isText ? '; charset=utf-8' : '') };
+      if (download) headers['content-disposition'] = `attachment; filename="${encodeURIComponent(basename(rel))}"`;
+      res.writeHead(200, headers); return res.end(readFileSync(full));
+    } catch (e) { return json(res, 500, { error: e.message }); }
+  };
 
   // 共用：跑一輪/一目標，回傳 { sessionId, text, usage, rounds, done }；onEvent 收原始 kernel 事件；
   // ask（可選）= 澄清通道,讓 agent 在背景任務中暫停問使用者。
@@ -179,8 +239,9 @@ export function createServerApp({ model, getApiKey, token, baseDir = '.xitto-ser
     const make = PACKS[spec.pack || 'general'];
     if (!make) throw new Error(`未知 pack「${spec.pack}」，可用：${Object.keys(PACKS).join(', ')}`);
     // 持久工作空間（B 模型）：workdir 綁 workspace（非 sessionId）→ 檔案留存 + 五層沉澱跨成品累積。
-    const workspace = (spec.workspace || 'default').replace(/[^a-zA-Z0-9_-]/g, '') || 'default';
-    const workdir = join(baseDir, 'ws', workspace); mkdirSync(workdir, { recursive: true });
+    // 本地模式 + workspace 是絕對路徑 → 就地用該真實資料夾（像 Claude Code 改你現有的檔）。
+    const workspace = spec.workspace || 'default';
+    const workdir = workspaceDir(baseDir, workspace, local); mkdirSync(workdir, { recursive: true });
     // history 仍綁 sessionId（每個成品獨立對話：無 sessionId → 全新,不續接,避免 context 暴脹/混淆）
     const sessionId = spec.sessionId || newId();
     const sess = sessions.get(sessionId) || { history: [] };
@@ -224,7 +285,7 @@ export function createServerApp({ model, getApiKey, token, baseDir = '.xitto-ser
     if (req.method === 'GET' && (path === '/' || path === '/index.html')) {
       let html; try { html = webHtml(); } catch { return json(res, 500, { error: 'web UI 未找到' }); }
       res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' });
-      return res.end(html.replace(/__SERVER_TOKEN__/g, token || '').replace(/__PACKS__/g, JSON.stringify(Object.keys(PACKS))));
+      return res.end(html.replace(/__SERVER_TOKEN__/g, token || '').replace(/__PACKS__/g, JSON.stringify(Object.keys(PACKS))).replace(/__LOCAL__/g, local ? 'true' : 'false'));
     }
 
     if (!authed(req)) return json(res, 401, { error: 'unauthorized（帶 Authorization: Bearer <token>）' });
@@ -252,6 +313,7 @@ export function createServerApp({ model, getApiKey, token, baseDir = '.xitto-ser
       const body = await readBody(req);
       if (!PACKS[body.pack || 'general']) return json(res, 400, { error: `未知 pack「${body.pack}」，可用：${Object.keys(PACKS).join(', ')}` });
       if (body.webhook && !/^https?:\/\//.test(body.webhook)) return json(res, 400, { error: 'webhook 需為 http(s) URL' });
+      if (local && body.workspace && isAbsolute(body.workspace) && !existsSync(body.workspace)) return json(res, 400, { error: `資料夾不存在：${body.workspace}` });
       const t = tasks.enqueue({ pack: body.pack, mode: body.mode, input: body.input, goal: body.goal, sessionId: body.sessionId, webhook: body.webhook, workspace: body.workspace });
       log({ task: t.id, action: 'enqueue', pack: body.pack || 'general', mode: body.mode || 'turn' });
       return json(res, 202, { taskId: t.id, status: t.status, ...tasks.stats() });
@@ -288,16 +350,37 @@ export function createServerApp({ model, getApiKey, token, baseDir = '.xitto-ser
       const t = tasks.get(mFile[1]); const ws = t?.result?.workspace;
       if (!ws) return json(res, 404, { error: '無交付物（任務尚未完成?）' });
       const rel = url.searchParams.get('path');
-      const full = resolveArtifact(join(baseDir, 'ws', ws), rel);
+      const full = resolveArtifact(workspaceDir(baseDir, ws, local), rel);
       if (!full) return json(res, 400, { error: 'path 不合法' });
-      if (!existsSync(full)) return json(res, 404, { error: '檔案不存在' });
+      return serveFile(res, full, rel, url.searchParams.get('download'));
+    }
+
+    // 資料夾瀏覽器（僅本地模式）：列某路徑下的子資料夾,給網頁「用選的」挑真實資料夾
+    if (req.method === 'GET' && path === '/v1/fs') {
+      if (!local) return json(res, 403, { error: '僅本地模式可瀏覽資料夾' });
+      const dir = resolve(url.searchParams.get('path') || homedir());
       try {
-        const ct = contentTypeFor(rel);
-        const isText = /^text\/|json|xml|javascript|svg/.test(ct);
-        const headers = { 'content-type': ct + (isText ? '; charset=utf-8' : '') };
-        if (url.searchParams.get('download')) headers['content-disposition'] = `attachment; filename="${encodeURIComponent(basename(rel))}"`;
-        res.writeHead(200, headers); return res.end(readFileSync(full));
-      } catch (e) { return json(res, 500, { error: e.message }); }
+        const dirs = readdirSync(dir, { withFileTypes: true }).filter((e) => e.isDirectory() && e.name !== 'node_modules' && !e.name.startsWith('.')).map((e) => e.name).sort();
+        return json(res, 200, { path: dir, parent: dirname(dir), home: homedir(), dirs });
+      } catch (e) { return json(res, 400, { error: '無法讀取：' + e.message }); }
+    }
+
+    // 工作台：逐層列檔（sub=子目錄,不一次遞迴攤平整個專案；ws 走 query 以容納本地絕對路徑）
+    if (req.method === 'GET' && path === '/v1/workspaces/files') {
+      const dir = workspaceDir(baseDir, url.searchParams.get('ws') || 'default', local);
+      return json(res, 200, listDir(dir, url.searchParams.get('sub') || '') || { sub: '', dirs: [], files: [] });
+    }
+    // 工作台：取檔（看/下載）/ 刪檔
+    if (path === '/v1/workspaces/file' && (req.method === 'GET' || req.method === 'DELETE')) {
+      const dir = workspaceDir(baseDir, url.searchParams.get('ws') || 'default', local);
+      const rel = url.searchParams.get('path');
+      const full = resolveArtifact(dir, rel);
+      if (!full) return json(res, 400, { error: 'path 不合法' });
+      if (req.method === 'DELETE') {
+        try { if (existsSync(full)) rmSync(full); log({ action: 'delete', path: rel }); return json(res, 200, { ok: true }); }
+        catch (e) { return json(res, 500, { error: e.message }); }
+      }
+      return serveFile(res, full, rel, url.searchParams.get('download'));
     }
 
     // 附掛背景任務的事件流（replay 緩衝 + 即時；已結束則回放後關閉）

package/src/app/tui-run.js

@@ -8,8 +8,39 @@ import { createKernel } from '../kernel/index.js';
 import { createStore, mountTui, gutter } from './tui.js';
 import { md } from './md-render.js';
 
-const summarize = (args) => { const s = JSON.stringify(args ?? {}); return s.length > 60 ? s.slice(0, 57) + '…' : s; };
-const Y = (s) => `\x1b[33m${s}\x1b[39m`; const G = (s) => `\x1b[90m${s}\x1b[39m`; const R = (s) => `\x1b[31m${s}\x1b[39m`; const C = (s) => `\x1b[36m${s}\x1b[39m`;
+// 取最有意義的參數當摘要（像 Claude Code：bash(npm test) 而非 bash({"command":...})）
+export const summarize = (args) => {
+  if (!args || typeof args !== 'object') return '';
+  const v = args.command ?? args.path ?? args.pattern ?? args.query ?? args.url ?? args.name ?? args.topic ?? args.file;
+  if (v != null && v !== '') return String(v).replace(/\s+/g, ' ').slice(0, 60);
+  const s = JSON.stringify(args); return s === '{}' ? '' : (s.length > 60 ? s.slice(0, 57) + '…' : s);
+};
+const Y = (s) => `\x1b[33m${s}\x1b[39m`; const G = (s) => `\x1b[90m${s}\x1b[39m`; const R = (s) => `\x1b[31m${s}\x1b[39m`; const C = (s) => `\x1b[36m${s}\x1b[39m`; const Gn = (s) => `\x1b[32m${s}\x1b[39m`;
+
+// 工具卡（對標 Claude Code）：⏺ name(args) 標頭 + ⎿ 多行結果,過長摺疊成「… +N 行」。純函數,可測。
+export function toolBlock(name, summary, result, isError) {
+  const head = Y(`⏺ ${name}`) + (summary ? G(`(${summary})`) : '');
+  const raw = (result?.content || []).map((c) => c.text || '').join('\n').replace(/\s+$/, '');
+  if (!raw.trim()) return head + '\n' + (isError ? R('  ⎿ ✗') : Gn('  ⎿ ✓'));
+  const lines = raw.split('\n');
+  const MAX = isError ? 12 : 6;
+  const shown = lines.slice(0, MAX).map((l, i) => '  ' + (i === 0 ? '⎿ ' : '  ') + l.slice(0, 200));
+  let out = head + '\n' + (isError ? R : G)(shown.join('\n'));
+  if (lines.length > MAX) out += '\n' + G(`     … +${lines.length - MAX} 行`);
+  return out;
+}
+
+// 彩色 diff 區塊（綠 + / 紅 -）：渲染 kernel 掛在 result._diff 的行級 diff。
+export function diffBlock(d) {
+  if (!d) return '';
+  const head = G('  ⎿ ') + Gn(`+${d.added}`) + ' ' + R(`-${d.removed}`) + G(' 行');
+  if (d.tooBig) return head + G('（差異過大,省略內容）');
+  const changed = (d.lines || []).filter((l) => l.t !== ' ');
+  if (!changed.length) return '';
+  const MAX = 30;
+  const body = changed.slice(0, MAX).map((l) => (l.t === '+' ? Gn('    + ' + l.s.slice(0, 200)) : R('    - ' + l.s.slice(0, 200)))).join('\n');
+  return head + '\n' + body + (changed.length > MAX ? '\n' + G(`     … +${changed.length - MAX} 行變更`) : '');
+}
 
 const SLASH = { '/help': '說明', '/goal': '目標循環', '/sandbox': '沙箱', '/auto': '自動核准', '/plan': '計劃模式', '/undo': '撤銷', '/tools': '工具', '/memory': '記憶', '/sessions': '對話', '/resume': '續接', '/cost': '成本', '/clear': '清除', '/exit': '離開' };
 
@@ -48,10 +79,7 @@ export function runTui({ pack, model, getApiKey, sandbox = false, resume = null
   const persist = () => { try { kernel.session.save(sessionId, history); } catch { /* 略 */ } };
 
   // ── kernel 事件 → store ──
-  const toolBlock = (name, result, isError) => {
-    const text = (result?.content || []).map((c) => c.text || '').join(' ').replace(/\s+/g, ' ').trim();
-    return Y(`⏺ ${name}`) + '\n' + (isError ? R('  ⎿ ✗ ' + text.slice(0, 200)) : G('  ⎿ ✓ ' + text.slice(0, 120)));
-  };
+  let pendingSummary = '';
   const onEvent = (ev) => {
     switch (ev.type) {
       case 'message_update': {
@@ -68,15 +96,25 @@ export function runTui({ pack, model, getApiKey, sandbox = false, resume = null
       case 'tool_execution_start':
         store.finalizeLive();
         if (ev.toolName === 'todo_write' && Array.isArray(ev.args?.todos)) {
-          store.pushBlock(C('☑ 待辦') + '\n' + ev.args.todos.map((t) => '  ' + (t.status === 'completed' ? '\x1b[32m☑\x1b[39m ' + G(t.content) : t.status === 'in_progress' ? Y('◐ ') + t.content : G('☐ ' + t.content))).join('\n'));
+          store.pushBlock(C('☑ 待辦') + '\n' + ev.args.todos.map((t) => '  ' + (t.status === 'completed' ? Gn('☑ ') + G(t.content) : t.status === 'in_progress' ? Y('◐ ') + t.content : G('☐ ' + t.content))).join('\n'));
         } else {
-          store.setTool({ name: ev.toolName, summary: summarize(ev.args) });
+          pendingSummary = summarize(ev.args);
+          store.setTool({ name: ev.toolName, summary: pendingSummary });
         }
         break;
-      case 'tool_execution_end':
+      case 'tool_execution_end': {
         store.setTool(null);
-        if (ev.toolName !== 'todo_write') store.pushBlock(toolBlock(ev.toolName, ev.result, ev.isError));
+        if (ev.toolName !== 'todo_write') {
+          const d = ev.result?._diff;
+          if (d && !ev.isError && (d.added || d.removed || d.tooBig)) {
+            store.pushBlock(Y(`⏺ ${ev.toolName}`) + (pendingSummary ? G(`(${pendingSummary})`) : '') + '\n' + diffBlock(d));
+          } else {
+            store.pushBlock(toolBlock(ev.toolName, pendingSummary, ev.result, ev.isError));
+          }
+        }
+        pendingSummary = '';
         break;
+      }
       case 'verify_start': store.finalizeLive(); store.pushBlock(G('  🔎 自動驗收…')); break;
       case 'verify_end': store.pushBlock(ev.ok ? G('  ✓ 驗收通過') : Y('  ✗ 驗收失敗，修正中…')); break;
       case 'compact': store.pushBlock(G(`  ⊙ 已壓縮上下文：${ev.tokensBefore}→${ev.tokensAfter} tokens`)); break;

package/src/app/web/index.html

@@ -8,7 +8,14 @@
   :root { --bg:#0f1115; --card:#181b22; --line:#272b34; --fg:#e7e9ee; --dim:#8b919e; --accent:#6ea8fe; --ok:#5fd38a; --warn:#f0c674; --me:#222630; }
   * { box-sizing:border-box; }
   body { margin:0; font:15px/1.6 -apple-system,"PingFang TC","Microsoft JhengHei",system-ui,sans-serif; background:var(--bg); color:var(--fg); }
-  .wrap { max-width:760px; margin:0 auto; padding:28px 18px 80px; }
+  .wrap { max-width:1180px; margin:0 auto; padding:24px 22px 80px; }
+  /* 雙欄佈局：許願頁=主區+歷史側欄；工作台=檔案左+預覽右。窄螢幕自動收成單欄 */
+  .cols { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start; }
+  .cols2 { display:grid; grid-template-columns:340px minmax(0,1fr); gap:26px; align-items:start; }
+  .side, .wbleft { position:sticky; top:14px; }
+  .side h3, .wbleft h3 { margin-top:0; }
+  .wbright { position:sticky; top:14px; min-height:120px; }
+  @media (max-width:860px){ .cols,.cols2{ grid-template-columns:1fr; } .side,.wbleft,.wbright{ position:static; } }
   header { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
   header h1 { font-size:22px; margin:0; }
   header .sub { color:var(--dim); font-size:13px; }
@@ -42,6 +49,15 @@
   .wsbadge { display:inline-block; font-size:12px; color:var(--dim); margin-left:8px; }
   .loc { margin-top:10px; font-size:12px; color:var(--dim); }
   .loc code { background:#0c0e12; border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--fg); cursor:pointer; }
+  .logtoggle { margin-top:12px; font-size:13px; color:var(--accent); cursor:pointer; user-select:none; }
+  .loglist { margin-top:6px; border-left:2px solid var(--line); padding-left:12px; }
+  .logstep { font-size:13px; color:var(--fg); padding:3px 0; }
+  .logstep.err { color:#f08a8a; }
+  .logstep .dim { color:var(--dim); }
+  .diff { margin:5px 0 6px 14px; font:12px/1.5 ui-monospace,Menlo,monospace; }
+  .dh { color:var(--dim); font-size:11px; margin-bottom:2px; }
+  .dl { white-space:pre-wrap; }
+  .dl.add { color:var(--ok); } .dl.del { color:#f08a8a; }
   .dots::after { content:""; animation:dots 1.4s steps(4,end) infinite; }
   @keyframes dots { 0%{content:""} 25%{content:"·"} 50%{content:"··"} 75%{content:"···"} }
   .summary { margin-top:10px; white-space:pre-wrap; }
@@ -56,6 +72,23 @@
   .hist:hover { border-color:var(--accent); }
   .hist .g { font-size:14px; } .hist .m { color:var(--dim); font-size:12px; }
   .empty { color:var(--dim); font-size:13px; }
+  .tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:14px 0 4px; }
+  .tab { padding:8px 16px; font-size:14px; color:var(--dim); cursor:pointer; border-bottom:2px solid transparent; }
+  .tab.active { color:var(--fg); border-bottom-color:var(--accent); }
+  .wbrow { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--card); border:1px solid var(--line); border-radius:8px; margin:6px 0; }
+  .wbname { flex:1; color:var(--accent); cursor:pointer; font-size:14px; }
+  .wbmeta { color:var(--dim); font-size:12px; }
+  .wbdel { cursor:pointer; opacity:.6; } .wbdel:hover { opacity:1; }
+  .followup { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
+  .followup textarea { width:100%; background:#0c0e12; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:10px; font:inherit; resize:vertical; min-height:52px; margin-bottom:8px; }
+  .cont { color:var(--accent); }
+  .modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10; }
+  .modalbox { background:var(--card); border:1px solid var(--line); border-radius:14px; width:min(560px,92vw); max-height:80vh; display:flex; flex-direction:column; padding:14px; }
+  .fspath { font:12px ui-monospace,Menlo,monospace; color:var(--dim); margin-bottom:8px; word-break:break-all; }
+  .fslist { flex:1; overflow:auto; border:1px solid var(--line); border-radius:8px; }
+  .fsrow { padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line); font-size:14px; }
+  .fsrow:hover { background:#0c0e12; } .fsrow.up { color:var(--dim); }
+  .fsbar { display:flex; align-items:center; gap:8px; margin-top:10px; }
   .viewer { margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:12px; background:#0c0e12; }
   .vbar { font-size:12px; color:var(--dim); margin-bottom:8px; }
   .vbar a { color:var(--accent); text-decoration:none; }
@@ -75,27 +108,63 @@
     <span class="sub">說出你想完成的事，交給它去做、做完給你成品</span>
     <span class="spacer"></span>
     <select id="space" title="專案／空間：不同專案的檔案與記憶各自獨立"></select>
+    <button class="ghost" id="browsebtn" title="瀏覽並選一個真實資料夾（本地模式）" style="display:none">📁 選資料夾</button>
     <button class="ghost" id="newspace" title="新專案">＋</button>
   </header>
 
-  <div class="ask">
-    <textarea id="goal" placeholder="例如：把這個資料夾的 .md 檔整理成一份目錄 index.md；或：抓 example.com 的標題寫進 title.txt"></textarea>
-    <div class="row">
-      <select id="pack" title="領域"></select>
-      <span class="spacer"></span>
-      <button id="go">交辦 →</button>
+  <div id="fsmodal" class="modal" style="display:none">
+    <div class="modalbox">
+      <div style="margin-bottom:8px;font-weight:600">選一個資料夾（就地工作）</div>
+      <div class="fspath" id="fspath"></div>
+      <div class="fslist" id="fslist"></div>
+      <div class="fsbar">
+        <button class="ghost" onclick="fsHome()">🏠 家目錄</button>
+        <button class="ghost" onclick="closeFs()">取消</button>
+        <span class="spacer"></span>
+        <button onclick="chooseFs()">✓ 選這個資料夾</button>
+      </div>
     </div>
   </div>
 
-  <div id="current"></div>
+  <div class="tabs">
+    <span class="tab active" id="tab-wish" onclick="switchTab('wish')">許願</span>
+    <span class="tab" id="tab-wb" onclick="switchTab('wb')">📂 工作台</span>
+  </div>
 
-  <h3>歷史成品</h3>
-  <div id="history"><div class="empty">還沒有任何任務。上面交辦一件事試試。</div></div>
+  <div id="wishview" class="cols">
+    <div class="main">
+      <div class="ask">
+        <textarea id="goal" placeholder="例如：把這個資料夾的 .md 檔整理成一份目錄 index.md；或：抓 example.com 的標題寫進 title.txt"></textarea>
+        <div class="row">
+          <select id="pack" title="領域"></select>
+          <span class="spacer"></span>
+          <button id="go">交辦 →</button>
+        </div>
+      </div>
+      <div id="current"></div>
+    </div>
+    <aside class="side">
+      <h3>歷史成品</h3>
+      <div id="history"><div class="empty">還沒有任何任務。<br>左邊交辦一件事試試。</div></div>
+    </aside>
+  </div>
+
+  <div id="workbench" class="cols2" style="display:none">
+    <div class="wbleft">
+      <h3>📂 工作台</h3>
+      <div id="wbfiles"></div>
+    </div>
+    <div class="wbright">
+      <div id="wbhint" class="empty">← 點左邊的檔案，在這裡預覽</div>
+      <div class="viewer" id="wbview" style="display:none"></div>
+    </div>
+  </div>
 </div>
 
 <script>
 const TOKEN = "__SERVER_TOKEN__";
 const PACKS = __PACKS__;
+const LOCAL = __LOCAL__;  // 本地模式：可把專案指向真實資料夾（就地工作,像 Claude Code）
 const $ = (s) => document.querySelector(s);
 const api = (p, opts={}) => fetch(p, { ...opts, headers: { authorization:"Bearer "+TOKEN, "content-type":"application/json", ...(opts.headers||{}) } });
 const esc = (s) => String(s==null?"":s).replace(/[&<>]/g, c=>({"&":"&amp;","<":"&lt;",">":"&gt;"}[c]));
@@ -123,11 +192,36 @@ $("#pack").innerHTML = PACKS.map(p=>`<option value="${p}" ${p==="general"?"selec
 // 專案／空間（對應 Claude Code 的「目錄」,但可選＋命名＋有預設；不同空間的檔案與沉澱各自獨立）
 let spaces = JSON.parse(localStorage.getItem("xk_spaces")||'["default"]');
 let curSpace = localStorage.getItem("xk_space")||"default";
-function renderSpaces(){ $("#space").innerHTML = spaces.map(s=>`<option ${s===curSpace?"selected":""}>${esc(s)}</option>`).join(""); }
-$("#space").onchange = () => { curSpace=$("#space").value; localStorage.setItem("xk_space",curSpace); $("#current").innerHTML=""; loadHistory(); };
-$("#newspace").onclick = () => { const n=(prompt("新專案名稱（英數/底線/連字號）：")||"").trim().replace(/[^a-zA-Z0-9_-]/g,""); if(!n)return; if(!spaces.includes(n))spaces.push(n); curSpace=n; localStorage.setItem("xk_spaces",JSON.stringify(spaces)); localStorage.setItem("xk_space",curSpace); renderSpaces(); $("#current").innerHTML=""; loadHistory(); };
+const spaceLabel=s=>s.startsWith("/")?("📁 "+(s.split("/").filter(Boolean).pop()||s)):s;
+function renderSpaces(){ $("#space").innerHTML = spaces.map(s=>`<option value="${esc(s)}" ${s===curSpace?"selected":""}>${esc(spaceLabel(s))}</option>`).join(""); }
+$("#space").onchange = () => { curSpace=$("#space").value; localStorage.setItem("xk_space",curSpace); $("#current").innerHTML=""; loadHistory(); if($("#workbench").style.display!=="none"){ wbSub=""; loadWorkbench(); } };
+$("#newspace").onclick = () => {
+  const raw=(prompt(LOCAL?"新專案：輸入名稱，或貼上一個真實資料夾的絕對路徑（本地模式會就地改該資料夾的檔，像 Claude Code）":"新專案名稱（英數/底線/連字號）：")||"").trim();
+  if(!raw) return;
+  const n = (LOCAL && raw.startsWith("/")) ? raw : raw.replace(/[^a-zA-Z0-9_-]/g,"");
+  if(!n) return;
+  if(!spaces.includes(n)) spaces.push(n);
+  curSpace=n; localStorage.setItem("xk_spaces",JSON.stringify(spaces)); localStorage.setItem("xk_space",curSpace);
+  renderSpaces(); $("#current").innerHTML=""; loadHistory();
+};
 renderSpaces();
 
+// 資料夾瀏覽器（本地模式「用選的」）：伺服器端列資料夾,網頁點進去挑一個
+if(LOCAL) $("#browsebtn").style.display="";
+$("#browsebtn").onclick = ()=>{ $("#fsmodal").style.display="flex"; fsGo(null); };
+let fsPath=null;
+async function fsGo(p){
+  const r=await api("/v1/fs"+(p?("?path="+encodeURIComponent(p)):"")).then(r=>r.json()).catch(()=>({error:"讀取失敗"}));
+  if(r.error){ alert(r.error); return; }
+  fsPath=r.path; window._fsHome=r.home;
+  $("#fspath").textContent="📂 "+r.path;
+  const base=r.path.endsWith("/")?r.path:r.path+"/";
+  $("#fslist").innerHTML=`<div class="fsrow up" onclick="fsGo('${esc(r.parent)}')">⬆ 上一層</div>`+(r.dirs.length?r.dirs.map(d=>`<div class="fsrow" onclick="fsGo('${esc(base+d)}')">📁 ${esc(d)}</div>`).join(""):`<div class="empty" style="padding:10px">（沒有子資料夾，可直接選這個）</div>`);
+}
+function fsHome(){ fsGo(window._fsHome||null); }
+function closeFs(){ $("#fsmodal").style.display="none"; }
+function chooseFs(){ if(!fsPath) return; const p=fsPath; if(!spaces.includes(p)) spaces.push(p); curSpace=p; localStorage.setItem("xk_spaces",JSON.stringify(spaces)); localStorage.setItem("xk_space",curSpace); renderSpaces(); closeFs(); $("#current").innerHTML=""; loadHistory(); }
+
 // 極簡 markdown 渲染（零依賴、可離線；夠用於 agent 產的報告）
 function mdRender(src){
   const lines=String(src).replace(/\r/g,"").split("\n"); const out=[]; let inCode=false,buf=[],inList=false;
@@ -145,14 +239,33 @@ function mdRender(src){
   return out.join("");
 }
 const IMG=/\.(png|jpe?g|gif|webp|svg)$/i, MD=/\.(md|markdown)$/i, HTMLF=/\.html?$/i, JSONF=/\.json$/i;
-const fileUrl=(id,path,extra="")=>"/v1/tasks/"+id+"/file?path="+encodeURIComponent(path)+"&token="+encodeURIComponent(TOKEN)+extra;
-async function viewFile(id, encPath, name){
-  const path=decodeURIComponent(encPath); const v=$("#fview"); v.style.display="block";
-  const bar=`<div class="vbar">📄 ${esc(name)} · <a href="${fileUrl(id,path)}" target="_blank">開新分頁</a> · <a href="${fileUrl(id,path,'&download=1')}">下載</a></div>`;
-  if(IMG.test(name)){ v.innerHTML=bar+`<img class="vimg" src="${fileUrl(id,path)}">`; return; }
-  if(HTMLF.test(name)){ v.innerHTML=bar+`<iframe class="vframe" sandbox src="${fileUrl(id,path)}"></iframe>`; return; }
+// 取檔 URL 產生器（任務成品走 /tasks/<id>，工作台走 /workspaces?ws=，後者 ws 可為本地絕對路徑）
+const TOK="&token="+encodeURIComponent(TOKEN);
+const taskFileUrl=id=>(path,extra="")=>"/v1/tasks/"+id+"/file?path="+encodeURIComponent(path)+TOK+extra;
+const wsFileUrl=ws=>(path,extra="")=>"/v1/workspaces/file?ws="+encodeURIComponent(ws)+"&path="+encodeURIComponent(path)+TOK+extra;
+// 彩色 diff（綠 +／紅 -）：渲染 kernel 算好的 _diff
+function diffHtml(d){
+  if(!d) return "";
+  if(d.tooBig) return `<div class="diff"><span class="dh">+${d.added} -${d.removed} 行（差異過大，省略）</span></div>`;
+  const ch=(d.lines||[]).filter(l=>l.t!==" ").slice(0,40);
+  if(!ch.length) return "";
+  return `<div class="diff"><div class="dh">+${d.added} -${d.removed}</div>${ch.map(l=>`<div class="dl ${l.t==="+"?"add":"del"}">${esc(l.t+" "+l.s)}</div>`).join("")}</div>`;
+}
+// 完整步驟卡（展開過程）：人話動作 + 編輯的彩色 diff
+function logHtml(p){
+  if(!p||!(p.log||[]).length) return `<div class="empty">（尚無步驟）</div>`;
+  return p.log.map(s=>`<div class="logstep ${s.isError?"err":""}">▸ ${esc(TOOL_ZH[s.name]||s.name)}${s.summary?` <span class="dim">${esc(s.summary)}</span>`:""}${s.diff?diffHtml(s.diff):""}</div>`).join("");
+}
+let expandedLog=false;
+function toggleLog(){ expandedLog=!expandedLog; if(liveTask) renderCurrent(liveTask); }
+
+async function renderFile(urlFn, encPath, name, sel){
+  const path=decodeURIComponent(encPath); const v=document.querySelector(sel); v.style.display="block";
+  const bar=`<div class="vbar">📄 ${esc(name)} · <a href="${urlFn(path)}" target="_blank">開新分頁</a> · <a href="${urlFn(path,'&download=1')}">下載</a></div>`;
+  if(IMG.test(name)){ v.innerHTML=bar+`<img class="vimg" src="${urlFn(path)}">`; return; }
+  if(HTMLF.test(name)){ v.innerHTML=bar+`<iframe class="vframe" sandbox src="${urlFn(path)}"></iframe>`; return; }
   v.innerHTML=bar+`<div class="empty">載入中…</div>`;
-  const txt=await fetch(fileUrl(id,path)).then(r=>r.ok?r.text():null).catch(()=>null);
+  const txt=await fetch(urlFn(path)).then(r=>r.ok?r.text():null).catch(()=>null);
   if(txt==null){ v.innerHTML=bar+`<div class="empty">（無法以文字呈現，請下載）</div>`; return; }
   let body;
   if(MD.test(name)) body=`<div class="md">${mdRender(txt)}</div>`;
@@ -160,6 +273,34 @@ async function viewFile(id, encPath, name){
   else body=`<pre class="viewer-pre">${esc(txt)}</pre>`;
   v.innerHTML=bar+body;
 }
+function viewFile(id, encPath, name){ return renderFile(taskFileUrl(id), encPath, name, "#fview"); }
+function wbView(encPath, name){ const h=$("#wbhint"); if(h) h.style.display="none"; return renderFile(wsFileUrl(curSpace), encPath, name, "#wbview"); }
+
+// 工作台分頁：逐層瀏覽 / 看 / 刪
+function fmtSize(n){ return n<1024?n+" B":n<1048576?(n/1024).toFixed(1)+" KB":(n/1048576).toFixed(1)+" MB"; }
+let wbSub="";
+function wbNav(s){ wbSub=decodeURIComponent(s); loadWorkbench(); }
+function wbUp(){ wbSub=wbSub.includes("/")?wbSub.slice(0,wbSub.lastIndexOf("/")):""; loadWorkbench(); }
+async function loadWorkbench(){
+  $("#wbview").style.display="none"; { const h=$("#wbhint"); if(h) h.style.display=""; }
+  const r=await api("/v1/workspaces/files?ws="+encodeURIComponent(curSpace)+"&sub="+encodeURIComponent(wbSub)).then(r=>r.json()).catch(()=>({dirs:[],files:[]}));
+  const root=curSpace.startsWith("/")?curSpace:curSpace;
+  let html=`<div class="loc">📂 ${esc(root)}${wbSub?" / "+esc(wbSub):""}</div>`;
+  if(wbSub) html+=`<div class="wbrow up" onclick="wbUp()"><span class="wbname">⬆ 上一層</span></div>`;
+  html+=(r.dirs||[]).map(d=>`<div class="wbrow" onclick="wbNav('${encodeURIComponent((wbSub?wbSub+'/':'')+d)}')"><span class="wbname">📁 ${esc(d)}/</span></div>`).join("");
+  html+=(r.files||[]).map(f=>{const full=(wbSub?wbSub+'/':'')+f.name;return `<div class="wbrow"><span class="wbname" onclick="wbView('${encodeURIComponent(full)}','${esc(f.name)}')">📄 ${esc(f.name)}</span><span class="wbmeta">${fmtSize(f.size)}</span><span class="wbdel" title="刪除" onclick="wbDelete('${encodeURIComponent(full)}','${esc(f.name)}')">🗑</span></div>`;}).join("");
+  if(!(r.dirs||[]).length && !(r.files||[]).length) html+=`<div class="empty">（${wbSub?"這個資料夾是空的":"這個專案還沒有檔案，去「許願」交辦一件事吧"}）</div>`;
+  $("#wbfiles").innerHTML=html;
+}
+async function wbDelete(encPath, name){ if(!confirm("刪除 "+name+"？此動作無法復原。")) return; await api("/v1/workspaces/file?ws="+encodeURIComponent(curSpace)+"&path="+encodeURIComponent(decodeURIComponent(encPath)),{method:"DELETE"}); loadWorkbench(); }
+function switchTab(name){
+  const wish=name==="wish";
+  $("#wishview").style.display=wish?"":"none";
+  $("#workbench").style.display=wish?"none":"";
+  $("#tab-wish").classList.toggle("active",wish);
+  $("#tab-wb").classList.toggle("active",!wish);
+  if(!wish){ wbSub=""; loadWorkbench(); }
+}
 
 let activeId = null, polling = null;
 
@@ -192,12 +333,15 @@ async function poll() {
 
 function renderCurrent(t) {
   const a = t.result?.artifacts, files = a ? [...(a.created||[]).map(f=>[f,"new"]), ...(a.modified||[]).map(f=>[f,"mod"])] : [];
+  const p = t.progress||{}, nLog=(p.log||[]).length;
+  const logSec = nLog ? `<div class="logtoggle" onclick="toggleLog()">${expandedLog?"▾ 收合過程":"▸ 展開過程（"+nLog+" 步）"}</div>${expandedLog?`<div class="loglist">${logHtml(p)}</div>`:""}` : "";
   $("#current").innerHTML = `<div class="card">
     <div class="goal">${esc(t.goal||"任務")}<span class="wsbadge">📁 ${esc(t.workspace||"default")}</span></div>
     <span class="status ${statusClass(t.status)}">${statusText(t.status)}${t.rounds?` · ${t.rounds} 輪`:""}</span>
     ${CANCELLABLE.includes(t.status)?`<button class="cancel" onclick="cancelTask('${t.taskId}')">停止</button>`:""}
     ${t.status==="running"||t.status==="queued"?progressHtml(t):""}
     ${todosHtml(t.progress)}
+    ${logSec}
     ${t.status==="needs-input"?`<div class="qbox"><div class="q">❓ ${esc(t.pending?.question)}</div>
       <input id="ans" placeholder="輸入你的回答，按 Enter 送出"></div>`:""}
     ${t.status==="done"?`<div class="summary">${esc(t.result?.text||"")}</div>`:""}
@@ -205,6 +349,13 @@ function renderCurrent(t) {
     ${files.length?`<div class="files">📦 成品：${files.map(([f,k])=>`<span class="file ${k==="mod"?"mod":""}" onclick="viewFile('${t.taskId}','${encodeURIComponent(f)}','${esc(f)}')">${k==="mod"?"~":"+"} ${esc(f)}</span>`).join("")}</div>`:""}
     ${t.result&&t.result.workspaceDir?`<div class="loc">📂 檔案位置：<code title="點擊複製" onclick="navigator.clipboard&&navigator.clipboard.writeText('${esc(t.result.workspaceDir)}')">${esc(t.result.workspaceDir)}</code></div>`:""}
     <div class="viewer" id="fview" style="display:none"></div>
+    ${t.status==="done"?`<div class="followup">
+      <button class="ghost" onclick="toggleFollowup()">↳ 繼續／調整這個成果</button>
+      <div id="fubox" style="display:none;margin-top:8px">
+        <textarea id="fugoal" placeholder="想怎麼調整或繼續深入？（會接續這次的對話與檔案，agent 記得來龍去脈）"></textarea>
+        <button onclick="submitFollowup('${esc(t.sessionId||"")}','${esc(t.pack||"general")}','${esc(t.workspace||"default")}')">送出 →</button>
+      </div>
+    </div>`:""}
   </div>`;
   if (t.status==="needs-input") {
     const inp = $("#ans"); inp.focus();
@@ -216,11 +367,20 @@ function renderCurrent(t) {
   }
 }
 
+// 繼續／調整：送出接續上一個任務對話(sessionId)+ 同工作區的後續任務
+function toggleFollowup(){ const b=$("#fubox"); if(b){ b.style.display=b.style.display==="none"?"":"none"; if(b.style.display!=="none") $("#fugoal").focus(); } }
+async function submitFollowup(sessionId, pack, workspace){
+  const goal=$("#fugoal").value.trim(); if(!goal) return;
+  const r=await api("/v1/tasks",{method:"POST",body:JSON.stringify({pack, mode:"goal", goal, workspace, sessionId})}).then(r=>r.json());
+  if(r.error){ alert(r.error); return; }
+  activeId=r.taskId; expandedLog=false; liveTask=null; poll(); window.scrollTo({top:0,behavior:"smooth"});
+}
+
 async function loadHistory() {
   const r = await api("/v1/tasks").then(r=>r.json());
   const list = (r.tasks||[]).filter(t=>t.mode==="goal" && (t.workspace||"default")===curSpace).reverse();
   $("#history").innerHTML = list.length ? list.map(t=>`<div class="hist" onclick="openTask('${t.taskId}')">
-    <div class="g">${esc(t.goal||t.taskId)} <span class="status ${statusClass(t.status)}">${statusText(t.status)}</span></div>
+    <div class="g">${t.continued?'<span class="cont" title="接續前一個任務">↳</span> ':''}${esc(t.goal||t.taskId)} <span class="status ${statusClass(t.status)}">${statusText(t.status)}</span></div>
     <div class="m">${esc(t.createdAt)}</div></div>`).join("") : `<div class="empty">還沒有任何任務。</div>`;
 }
 async function openTask(id){ activeId=id; const t=await api("/v1/tasks/"+id).then(r=>r.json()); liveTask=t; renderCurrent(t); if(t.status==="running"||t.status==="queued"){poll();} window.scrollTo({top:0,behavior:"smooth"}); }

package/src/kernel/diff.js

@@ -0,0 +1,30 @@
+// 行級 diff（LCS）— 給 TUI/app 渲染彩色 diff。回傳 { lines:[{t,s}], added, removed } 或 { tooBig } 或 null（無變化）。
+// kernel 在 wrapUndo 已抓到 before（undo 快照），改完讀 after，集中算 diff,所有 pack 的 edit/write 免改。
+export function lineDiff(before, after, { maxLines = 600 } = {}) {
+  if (before === after) return null;
+  const a = before == null ? [] : String(before).replace(/\n$/, '').split('\n');
+  const b = after == null ? [] : String(after).replace(/\n$/, '').split('\n');
+  if (a.length === 1 && a[0] === '' && before == null) a.length = 0;
+  if (b.length === 1 && b[0] === '' && after == null) b.length = 0;
+  const m = a.length, n = b.length;
+  if (m > maxLines || n > maxLines) return { tooBig: true, added: n, removed: m };
+
+  // LCS DP（自後往前）
+  const dp = Array.from({ length: m + 1 }, () => new Uint32Array(n + 1));
+  for (let i = m - 1; i >= 0; i--) for (let j = n - 1; j >= 0; j--) dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+
+  const lines = [];
+  let i = 0, j = 0;
+  while (i < m && j < n) {
+    if (a[i] === b[j]) { lines.push({ t: ' ', s: a[i] }); i++; j++; }
+    else if (dp[i + 1][j] >= dp[i][j + 1]) { lines.push({ t: '-', s: a[i] }); i++; }
+    else { lines.push({ t: '+', s: b[j] }); j++; }
+  }
+  while (i < m) lines.push({ t: '-', s: a[i++] });
+  while (j < n) lines.push({ t: '+', s: b[j++] });
+
+  const added = lines.filter((l) => l.t === '+').length;
+  const removed = lines.filter((l) => l.t === '-').length;
+  if (!added && !removed) return null;
+  return { lines, added, removed };
+}

package/src/kernel/index.js

@@ -11,6 +11,7 @@ import { createPermissionStep } from './security/permission-step.js';
 import { fileAllowStore, memoryAllowStore } from './security/allow-store.js';
 import { normalizeSandbox, wrapWithSeatbelt, sandboxViolation } from './security/sandbox.js';
 import { dangerousReason } from './security/danger.js';
+import { lineDiff } from './diff.js';
 import { spawnSync } from 'node:child_process';
 import { createMemory } from './memory.js';
 import { createPlaybook } from './playbook.js';
@@ -94,20 +95,31 @@ function wrapSandboxable(tool, { cwd, getSandbox, getSandboxConfig }) {
 
 // undo 快照：mutating 且帶 args.path 的工具（檔案編輯類），執行前記錄檔案原狀，供 kernel.undo() 還原。
 // 「以 path 指涉被改檔案」是常見約定；非檔案型 mutating 工具（bash/sql_exec 無 path）不受影響。
+const isTextContent = (s) => s == null || !String(s).includes("\u0000");
 function wrapUndo(tool, { cwd, undoStack }) {
   if (tool.mutating !== true || typeof tool.execute !== 'function') return tool;
   const orig = tool.execute.bind(tool);
   return {
     ...tool,
-    execute: (id, params, ...rest) => {
+    execute: async (id, params, ...rest) => {
+      let abs = null, before = null;
       if (params?.path) {
-        const p = isAbsolute(params.path) ? params.path : join(cwd, params.path);
+        abs = isAbsolute(params.path) ? params.path : join(cwd, params.path);
         try {
-          undoStack.push({ path: p, rel: params.path, before: existsSync(p) ? readFileSync(p, 'utf8') : null });
+          before = existsSync(abs) ? readFileSync(abs, 'utf8') : null;
+          undoStack.push({ path: abs, rel: params.path, before });
           if (undoStack.length > 50) undoStack.shift();
         } catch { /* 略 */ }
       }
-      return orig(id, params, ...rest);
+      const result = await orig(id, params, ...rest);
+      // 集中算 diff：用 before 快照 + 改後內容，掛在 result._diff（不進 LLM content，僅供 app 渲染）
+      if (abs && result && typeof result === 'object' && isTextContent(before)) {
+        try {
+          const after = existsSync(abs) ? readFileSync(abs, 'utf8') : null;
+          if (isTextContent(after)) { const d = lineDiff(before, after); if (d) result._diff = { path: params.path, ...d }; }
+        } catch { /* 略 */ }
+      }
+      return result;
     },
   };
 }