@co0ontty/wand 1.36.0 → 1.37.0

package/dist/claude-sdk-runner.d.ts

@@ -6,6 +6,13 @@ export declare class ClaudeRunError extends Error {
 export interface RunClaudePrintOptions {
     cwd?: string;
     timeoutMs: number;
+    /**
+     * 用户偏好的回复语言（取自 config.language）。传进来时会以
+     * `appendSystemPrompt` 形式灌给 Claude，保证 quick-commit / prompt-optimizer
+     * 这种一次性调用也跟用户主会话同语言——之前 wand 的 git commit message 会
+     * 莫名其妙变中英混搭，根因就在这。
+     */
+    language?: string;
 }
 /**
  * 用 `@anthropic-ai/claude-agent-sdk` 跑一次"prompt → 单段纯文本"调用，

package/dist/claude-sdk-runner.js

@@ -1,6 +1,7 @@
 import { existsSync } from "node:fs";
 import { createRequire } from "node:module";
 import { query as sdkQuery, } from "@anthropic-ai/claude-agent-sdk";
+import { buildLanguageDirective } from "./language-prompt.js";
 export class ClaudeRunError extends Error {
     code;
     constructor(message, code) {
@@ -79,12 +80,14 @@ export async function runClaudePrint(prompt, options) {
     const abortController = new AbortController();
     const timeoutHandle = setTimeout(() => abortController.abort(), options.timeoutMs);
     const sdkClaudeBinary = resolveSdkClaudeBinary();
+    const languageDirective = options.language ? buildLanguageDirective(options.language) : "";
     const sdkOptions = {
         abortController,
         tools: [],
         persistSession: false,
         ...(cwd ? { cwd } : {}),
         ...(sdkClaudeBinary ? { pathToClaudeCodeExecutable: sdkClaudeBinary } : {}),
+        ...(languageDirective ? { appendSystemPrompt: languageDirective } : {}),
     };
     // 单条 user message → AsyncGenerator，SDK 的 streaming input 协议要求。
     async function* singleShot() {

package/dist/git-quick-commit.js

@@ -240,9 +240,9 @@ export class QuickCommitError extends Error {
     }
 }
 // ── AI commit message generation ──
-async function callClaudeText(prompt, cwd) {
+async function callClaudeText(prompt, cwd, language) {
     try {
-        return await runClaudePrint(prompt, { cwd, timeoutMs: CLAUDE_MESSAGE_TIMEOUT_MS });
+        return await runClaudePrint(prompt, { cwd, timeoutMs: CLAUDE_MESSAGE_TIMEOUT_MS, language });
     }
     catch (error) {
         if (error instanceof ClaudeRunError) {
@@ -283,7 +283,7 @@ async function generateCommitMessage(cwd, language) {
     const diff = collectStagedDiff(cwd);
     const lang = language.trim() || "中文";
     const prompt = `阅读以下 git diff，用${lang}写一条简洁的 commit message。要求：祈使句，不超过 50 字，描述「做了什么」。只输出 message 本身，不要引号、不要 Markdown 格式、不要任何额外说明。\n\n${diff}`;
-    const raw = await callClaudeText(prompt, cwd);
+    const raw = await callClaudeText(prompt, cwd, language);
     const message = raw.replace(/^["'`]+|["'`]+$/g, "").trim();
     if (!message) {
         throw new QuickCommitError("Claude 返回了空的 commit message。", "EMPTY_AI_MESSAGE");
@@ -339,7 +339,7 @@ async function generateCommitMessageWithTag(cwd, language) {
 
 git diff:
 ${diff}`;
-    const raw = await callClaudeText(prompt, cwd);
+    const raw = await callClaudeText(prompt, cwd, language);
     const parsed = tryParseJson(raw);
     let message;
     let suggestedTag;
@@ -413,7 +413,7 @@ commit message：${commitMessage}
 
 git diff：
 ${diff}`;
-    const raw = await callClaudeText(prompt, cwd);
+    const raw = await callClaudeText(prompt, cwd, language);
     const parsed = tryParseJson(raw);
     let suggested;
     if (parsed && typeof parsed.tag === "string") {

package/dist/language-prompt.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 强语言指令生成器：供 PTY runner、structured-session-manager（CLI + SDK 两个分支）、
+ * 一次性 SDK 调用（claude-sdk-runner.ts）共用。
+ *
+ * 原本各 runner 散落写 "请使用中文回复" 这种软指令，Claude 写技术内容时还是会条件
+ * 反射切英文（"Now let me ..."、"OK, ..."），用户设置中文也照样夹英文。
+ *
+ * 这一版用三招把约束做硬：
+ *   1. 明确禁止常见英文起句模式（"Now let me"、"Let me check"、"OK,"、"First,"
+ *      …）并给出反例——给 Claude 一组具体可识别可避免的字串
+ *   2. 区分"自然语言"（必须目标语言）和"技术标识符"（路径/命令/API 名可保留原文），
+ *      避免 Claude 误以为"代码也要翻译"
+ *   3. 自检指令：让 Claude 发现自己即将出错时主动重写
+ *
+ * 英文模式（"English"）下 Claude 默认就用英文，只补一句 subagent 透传。
+ */
+export declare function buildLanguageDirective(language: string): string;

package/dist/language-prompt.js

@@ -0,0 +1,68 @@
+/**
+ * 强语言指令生成器：供 PTY runner、structured-session-manager（CLI + SDK 两个分支）、
+ * 一次性 SDK 调用（claude-sdk-runner.ts）共用。
+ *
+ * 原本各 runner 散落写 "请使用中文回复" 这种软指令，Claude 写技术内容时还是会条件
+ * 反射切英文（"Now let me ..."、"OK, ..."），用户设置中文也照样夹英文。
+ *
+ * 这一版用三招把约束做硬：
+ *   1. 明确禁止常见英文起句模式（"Now let me"、"Let me check"、"OK,"、"First,"
+ *      …）并给出反例——给 Claude 一组具体可识别可避免的字串
+ *   2. 区分"自然语言"（必须目标语言）和"技术标识符"（路径/命令/API 名可保留原文），
+ *      避免 Claude 误以为"代码也要翻译"
+ *   3. 自检指令：让 Claude 发现自己即将出错时主动重写
+ *
+ * 英文模式（"English"）下 Claude 默认就用英文，只补一句 subagent 透传。
+ */
+export function buildLanguageDirective(language) {
+    const trimmed = language?.trim();
+    if (!trimmed)
+        return "";
+    const isChinese = trimmed === "中文";
+    const isEnglish = trimmed === "English" || trimmed.toLowerCase() === "english";
+    if (isEnglish) {
+        return "When you dispatch a subagent via the Task tool, instruct the subagent in its prompt to also respond in English.";
+    }
+    if (isChinese) {
+        return [
+            "【语言要求 — 最高优先级】",
+            "你必须始终使用中文进行所有自然语言交流。这是硬性约束，不是建议。",
+            "",
+            "覆盖范围：",
+            "- 所有解释、说明、推理、对话、注释、错误描述、TODO 标题、git commit message、思考内容",
+            "- 包括开场白、过渡句、状态汇报、回答用户问题",
+            "",
+            "严禁以下英文起句模式（即使是技术内容也不要用）：",
+            "- 不要写 \"Now let me ...\"、\"Now I'll ...\"、\"Now remove ...\"——改用 \"现在 ...\" 或直接进入正题",
+            "- 不要写 \"Let me check ...\"、\"Let me look at ...\"——改用 \"我看一下 ...\"、\"我检查一下 ...\"",
+            "- 不要写 \"OK, ...\"、\"Alright, ...\"、\"Great, ...\"——改用 \"好的\"、\"OK\" 中文或直接省略",
+            "- 不要写 \"First, ...\"、\"Then, ...\"、\"Finally, ...\"——改用 \"先\"、\"然后\"、\"最后\"",
+            "- 不要写 \"Found it!\"、\"Got it!\"——改用 \"找到了\"、\"明白\"",
+            "",
+            "可以保留原文的部分（这些不算\"自然语言\"）：",
+            "- 代码片段、shell 命令、文件路径、URL、API 名、库名、变量名、CSS 属性名等技术标识符",
+            "- 引用用户原话、错误信息原文、日志原文",
+            "",
+            "自检：如果你发现自己即将用英文开始一句话或一段话，立即停下，用中文重新组织语言。",
+            "",
+            "子代理：当你通过 Task 工具派发 subagent 时，必须在传给 subagent 的 prompt 里明确加上一句中文要求（例如 \"请用中文回复所有自然语言内容\"），保证子代理输出同样遵循。",
+        ].join("\n");
+    }
+    // 其他语言（日语、法语等）——用英文模板，把 language 替进去
+    return [
+        `[Language requirement — top priority]`,
+        `You MUST always use ${trimmed} for all natural-language communication. This is a hard constraint, not a suggestion.`,
+        "",
+        `Scope: all explanations, narration, reasoning, conversation, comments, error descriptions, TODO titles, git commit messages, and thinking content — including opening phrases, transitions, status updates, and answers to the user.`,
+        "",
+        `Strictly avoid starting sentences in English (e.g. "Now let me ...", "Let me check ...", "OK, ...", "First, ...", "Found it!"). Use the equivalent ${trimmed} phrasing instead, or skip the transition.`,
+        "",
+        `What may stay in its original form (these are NOT natural language):`,
+        `- Code, shell commands, file paths, URLs, API/library/variable names, CSS properties, other technical identifiers`,
+        `- Direct quotes of user input, raw error messages, raw log lines`,
+        "",
+        `Self-check: if you notice you are about to start a sentence in English, stop and rewrite it in ${trimmed}.`,
+        "",
+        `Subagent: when you dispatch a subagent via the Task tool, you MUST explicitly instruct the subagent in its prompt to also respond in ${trimmed}.`,
+    ].join("\n");
+}

package/dist/process-manager.js

@@ -10,6 +10,7 @@ import { ClaudePtyBridge } from "./claude-pty-bridge.js";
 import { truncateMessagesForTransport } from "./message-truncator.js";
 import { appendWindow, hasExplicitConfirmSyntax, hasPermissionActionContext, normalizePromptText, PTY_OUTPUT_MAX_SIZE } from "./pty-text-utils.js";
 import { buildChildEnv } from "./env-utils.js";
+import { buildLanguageDirective } from "./language-prompt.js";
 import { prepareSessionWorktree } from "./git-worktree.js";
 import { getResumeCommandSessionId } from "./resume-policy.js";
 import { applyThinkingEffortToPrompt, normalizeThinkingEffort } from "./structured-session-manager.js";
@@ -1657,11 +1658,13 @@ export class ProcessManager extends EventEmitter {
             result += ` --append-system-prompt '${escaped}'`;
         }
         if (language) {
-            const langPrompt = isChinese
-                ? "请使用中文回复。所有解释、注释和对话文本都使用中文。"
-                : `Please respond in ${language}. Use ${language} for all your explanations, comments, and conversational text.`;
-            const escaped = langPrompt.replace(/'/g, "'\\''");
-            result += ` --append-system-prompt '${escaped}'`;
+            // 与 structured-session-manager.ts 走同一个 buildLanguageDirective，保证 PTY 与
+            // structured 两种 runner 用同一条强约束指令——避免"换个模式 Claude 又开始夹英文"。
+            const langPrompt = buildLanguageDirective(language);
+            if (langPrompt) {
+                const escaped = langPrompt.replace(/'/g, "'\\''");
+                result += ` --append-system-prompt '${escaped}'`;
+            }
         }
         return result;
     }

package/dist/prompt-optimizer.js

@@ -9,9 +9,9 @@ export class PromptOptimizeError extends Error {
         this.name = "PromptOptimizeError";
     }
 }
-async function callClaudeText(prompt, cwd) {
+async function callClaudeText(prompt, cwd, language) {
     try {
-        return await runClaudePrint(prompt, { cwd, timeoutMs: CLAUDE_TIMEOUT_MS });
+        return await runClaudePrint(prompt, { cwd, timeoutMs: CLAUDE_TIMEOUT_MS, language });
     }
     catch (error) {
         if (error instanceof ClaudeRunError) {
@@ -50,7 +50,7 @@ export async function optimizePrompt(rawText, language, cwd) {
         throw new PromptOptimizeError(`输入过长（${text.length} 字符），请缩短到 ${MAX_INPUT_LENGTH} 以内。`, "INPUT_TOO_LONG");
     }
     const prompt = buildOptimizePrompt(text, language);
-    const raw = await callClaudeText(prompt, cwd);
+    const raw = await callClaudeText(prompt, cwd, language);
     const cleaned = raw
         .replace(/^```[a-zA-Z]*\n?/, "")
         .replace(/\n?```$/, "")

package/dist/pwa.js

@@ -1,15 +1,45 @@
 /**
  * PWA manifest and Service Worker generation.
  */
-import { readFileSync } from "node:fs";
+import { readFileSync, existsSync, statSync } from "node:fs";
 import { createHash } from "node:crypto";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const pkgPath = path.join(__dirname, "..", "package.json");
 const pkgVersion = JSON.parse(readFileSync(pkgPath, "utf-8")).version ?? "0";
-/** Cache version derived from package version — only busts on actual releases */
-const CACHE_VERSION = createHash("md5").update(pkgVersion).digest("hex").slice(0, 8);
+/** Cache version: package version + content fingerprint.
+ *
+ * 之前只用 pkgVersion 派生，本地 dev 时同一个 1.36.0 下改了几次 CSS / scripts，
+ * SW 的 cache key 都没变 → 旧的 RUNTIME_CACHE 会一直回放老 HTML 给已安装 PWA，
+ * 用户表现是"我明明改了 UI，怎么手机上一点变化都没有"。
+ * 把内容 mtime 也喂进 hash，dev iterate 时每次磁盘改动都换 cache key，
+ * SW activate 会把不匹配前缀的缓存 keys 删掉，从而强制重拉。
+ * 正式发版时由于 pkgVersion 也会变，效果叠加，无副作用。
+ */
+function buildCacheVersion() {
+    const h = createHash("md5").update(pkgVersion);
+    const fingerprintTargets = [
+        path.join(__dirname, "web-ui", "content", "scripts.js"),
+        path.join(__dirname, "web-ui", "content", "styles.css"),
+    ];
+    for (const p of fingerprintTargets) {
+        try {
+            if (existsSync(p)) {
+                const s = statSync(p);
+                h.update(":").update(p).update(":").update(String(s.mtimeMs)).update(":").update(String(s.size));
+            }
+        }
+        catch {
+            // best effort — fingerprint 只是为了 bust 缓存，失败就退化成 pkg-only
+        }
+    }
+    return h.digest("hex").slice(0, 8);
+}
+// 不 freeze 进模块加载时——SW JS 是每次请求 generateServiceWorker() 现拼的，
+// 这里也对应每次现算，dev 改 CSS 不用重启进程都能 bust 浏览器/PWA 端缓存。
+// 缓存层会自己做 mtime check（styles.ts 的 mtime 缓存模式同思路），这里直接
+// statSync，磁盘命中本地 fs 几十微秒级，可忽略。
 export function generatePwaManifest() {
     return JSON.stringify({
         id: "/wand",
@@ -44,9 +74,10 @@ export function generatePwaManifest() {
     });
 }
 export function generateServiceWorker() {
+    const cacheVersion = buildCacheVersion();
     return `
-const STATIC_CACHE = 'wand-static-${CACHE_VERSION}';
-const RUNTIME_CACHE = 'wand-runtime-${CACHE_VERSION}';
+const STATIC_CACHE = 'wand-static-${cacheVersion}';
+const RUNTIME_CACHE = 'wand-runtime-${cacheVersion}';
 const APP_SHELL = '/';
 const STATIC_ASSETS = [
   '/manifest.json',

package/dist/server.js

@@ -1097,6 +1097,9 @@ export async function startServer(config, configPath) {
             ],
             structuredChatPersona,
             cardDefaults: config.cardDefaults,
+            // 把语言偏好暴露给前端做 UI 文案 i18n。后端原本只用它给 Claude 拼 system prompt，
+            // 前端没收到 → "SUBAGENT" / "Read" 这些 UI label 一直是英文，跟用户设的中文不匹配。
+            language: config.language ?? "",
             updateAvailable: cachedUpdateInfo?.updateAvailable ?? false,
             latestVersion: cachedUpdateInfo?.latest ?? null,
             currentVersion: PKG_VERSION,

package/dist/structured-session-manager.js

@@ -8,6 +8,7 @@ import { query as sdkQuery } from "@anthropic-ai/claude-agent-sdk";
 import { prepareSessionWorktree } from "./git-worktree.js";
 import { truncateMessagesForTransport } from "./message-truncator.js";
 import { buildChildEnv } from "./env-utils.js";
+import { buildLanguageDirective } from "./language-prompt.js";
 function defaultStructuredRunner(provider) {
     return provider === "codex" ? "codex-cli-exec" : "claude-cli-print";
 }
@@ -389,9 +390,9 @@ function buildAppendSystemPromptParts(language, mode) {
             : "You are running in a fully managed, autonomous mode. The user may not be available to respond to questions or confirmations in a timely manner. You MUST make all decisions independently — choose the best approach yourself instead of asking the user for preferences, confirmations, or clarifications. If multiple approaches are viable, pick the one you judge most appropriate and proceed. Never block on user input unless the task is fundamentally ambiguous and cannot be reasonably inferred. Be decisive and self-directed.");
     }
     if (trimmedLanguage) {
-        parts.push(isChinese
-            ? "请使用中文回复。所有解释、注释和对话文本都使用中文。当你通过 Task 工具派发子代理（subagent）时，必须在传给子代理的 prompt 里明确要求它也使用中文回复，确保所有子代理的输出同样遵循该语言偏好。"
-            : `Please respond in ${trimmedLanguage}. Use ${trimmedLanguage} for all your explanations, comments, and conversational text. When you dispatch a subagent via the Task tool, you MUST explicitly instruct the subagent in its prompt to also respond in ${trimmedLanguage}, so every subagent's output follows the same language preference.`);
+        const directive = buildLanguageDirective(trimmedLanguage);
+        if (directive)
+            parts.push(directive);
     }
     return parts;
 }

package/dist/web-ui/content/scripts.js

@@ -384,6 +384,81 @@
         })()
       };
 
+      // ── 前端 i18n（最小化）──
+      // 后端 config.language 是给 Claude 用的"回答语言"偏好（"中文" / "English" / 任意字符串），
+      // 之前 frontend 完全没收 → UI label 一直 hardcoded 中文 + 个别英文（"SUBAGENT" 那个 tag）。
+      // 用户设的是中文时，"SUBAGENT" 这类英文残留就和"配置语言不一致"。
+      //
+      // 设计取舍：
+      //   - 只维护两套：中文（默认） + 英文。其它取值（"日本語"、"Français"等）回退到英文，
+      //     因为 Claude 会按用户语言回答，UI 至少不卡在中文上让英语圈用户看不懂。
+      //   - 不引入 i18n 库，几十个 key 用平铺对象，t(key, params) 是个十行 helper。
+      //   - params 支持 "{name}" 占位符替换，避免在调用点拼字符串。
+      //   - 缺 key 时回退到中文表，再没有就返回 key 本身（debug 友好）。
+      var I18N_DEFAULT_LANG = "中文";
+      var I18N = {
+        "中文": {
+          "subagent.tag": "子代理",
+          "subagent.handoff": "{parent} 让 {sub} 帮忙",
+          "subagent.handoff.with_desc": "{parent} 让 {sub} 帮忙：",
+          "subagent.continued": "继续输出",
+          "subagent.task.done": "任务完成",
+          "subagent.task.failed": "任务失败",
+          "subagent.running": "运行中",
+          "subagent.no_output": "（无输出）",
+          "subagent.helper_fallback_prefix": "协作猫·",
+          "subagent.title_aria": "点击展开 / 收起子代理输出",
+          "subagent.tag_title": "子代理 / subagent",
+          "ui.expand": "展开",
+          "ui.collapse": "收起",
+          "ui.expand_panel_aria": "展开子代理输出",
+          "ui.collapse_panel_aria": "收起子代理输出"
+        },
+        "English": {
+          "subagent.tag": "Subagent",
+          "subagent.handoff": "{parent} asked {sub} for help",
+          "subagent.handoff.with_desc": "{parent} asked {sub} for help with: ",
+          "subagent.continued": "continued",
+          "subagent.task.done": "Task complete",
+          "subagent.task.failed": "Task failed",
+          "subagent.running": "Running",
+          "subagent.no_output": "(no output)",
+          "subagent.helper_fallback_prefix": "Helper·",
+          "subagent.title_aria": "Click to expand / collapse subagent output",
+          "subagent.tag_title": "Subagent",
+          "ui.expand": "Expand",
+          "ui.collapse": "Collapse",
+          "ui.expand_panel_aria": "Expand subagent output",
+          "ui.collapse_panel_aria": "Collapse subagent output"
+        }
+      };
+      function getActiveLang() {
+        var raw = state.config && typeof state.config.language === "string" ? state.config.language.trim() : "";
+        if (!raw) return I18N_DEFAULT_LANG;
+        if (I18N[raw]) return raw;
+        // 模糊匹配：用户可能写 "english" / "en" / "ENG"
+        var lower = raw.toLowerCase();
+        if (lower === "english" || lower === "en" || lower.indexOf("english") === 0 || lower.indexOf("英") === 0) return "English";
+        if (lower === "中文" || lower === "zh" || lower.indexOf("zh") === 0 || lower.indexOf("中") === 0 || lower.indexOf("chinese") === 0) return "中文";
+        return "English"; // 其它语言走英文 fallback（Claude 会按 raw 回答，UI 至少英文不卡）
+      }
+      function t(key, params) {
+        var lang = getActiveLang();
+        var table = I18N[lang] || I18N[I18N_DEFAULT_LANG];
+        var template = table && key in table ? table[key] : null;
+        if (template == null) {
+          var def = I18N[I18N_DEFAULT_LANG];
+          template = def && key in def ? def[key] : key;
+        }
+        if (params && typeof template === "string") {
+          for (var k in params) {
+            if (!Object.prototype.hasOwnProperty.call(params, k)) continue;
+            template = template.split("{" + k + "}").join(params[k]);
+          }
+        }
+        return template;
+      }
+
       // ── 统一线性图标库 ──
       // 替代页面里散落的 emoji（🛡 / ⌨ / 📁 / 🔔 …）。这些 emoji 在系统字体里渲染成
       // 彩色卡通形态，与项目温暖米色 + 棕橙的复古主题视觉冲突明显。这里集中维护
@@ -1070,6 +1145,10 @@
           }
           case "tool-group":
             return el.getAttribute("data-expanded") === "true";
+          case "subagent-reply":
+            return el.getAttribute("data-expanded") === "true";
+          case "subagent-panel":
+            return el.getAttribute("data-expanded") === "true";
           default:
             return false;
         }
@@ -1118,6 +1197,35 @@
             if (chevron) chevron.style.transform = expanded ? "rotate(180deg)" : "";
             break;
           }
+          case "subagent-reply": {
+            el.setAttribute("data-expanded", expanded ? "true" : "false");
+            var subLabel = el.querySelector(".subagent-reply-toggle-label");
+            if (subLabel) subLabel.textContent = expanded ? "收起" : "展开";
+            var subToggleBtn = el.querySelector(".subagent-reply-toggle");
+            if (subToggleBtn) {
+              subToggleBtn.setAttribute("aria-expanded", expanded ? "true" : "false");
+              subToggleBtn.setAttribute("aria-label", expanded ? "收起子代理回复" : "展开子代理回复全文");
+            }
+            break;
+          }
+          case "subagent-panel": {
+            el.setAttribute("data-expanded", expanded ? "true" : "false");
+            // 头/尾两个按钮都得同步——label、aria-expanded、aria-label
+            var panelBtns = el.querySelectorAll(".subagent-panel-toggle");
+            for (var pbi = 0; pbi < panelBtns.length; pbi++) {
+              var pb = panelBtns[pbi];
+              pb.setAttribute("aria-expanded", expanded ? "true" : "false");
+              pb.setAttribute("aria-label", expanded ? "收起子代理输出" : "展开子代理输出");
+              var pblbl = pb.querySelector(".subagent-panel-toggle-label");
+              if (pblbl) pblbl.textContent = expanded ? "收起" : "展开";
+            }
+            // 展开时把 body 滚到顶，避免延续上次的滚动位置造成"展开后看到一半"
+            if (expanded) {
+              var pbody = el.querySelector(".subagent-panel-body");
+              if (pbody) pbody.scrollTop = 0;
+            }
+            break;
+          }
         }
       }
 
@@ -5658,35 +5766,28 @@
         }
         persistElementExpandState(el, "thinking");
       };
-      // Toggle function for subagent reply bubbles — cycles preview → expanded → collapsed.
-      // 三态循环（preview 默认 ~5 行可滚 / expanded 大区可滚 / collapsed 完全收起）。
-      window.__subagentReplyCycle = function(e, btn) {
+      // Toggle function for subagent reply bubbles — simple two-state preview/expanded.
+      // 参考 opencode 的折叠面板：默认固定高度预览（含底部渐隐 mask），点击切到全文展开。
+      // 状态写在 data-expanded 上，配套 CSS 控制 max-height + mask；用 data-expand-key
+      // 走通用持久化通道（applyPersistedExpandState 会自动恢复用户上次的选择）。
+      window.__subagentReplyToggle = function(e, target) {
         if (e) { e.preventDefault(); e.stopPropagation(); }
-        var bubble = btn.closest(".subagent-reply");
+        var bubble = target && target.closest ? target.closest(".subagent-reply") : null;
         if (!bubble) return;
-        var modes = ["preview", "expanded", "collapsed"];
-        var current = bubble.getAttribute("data-collapse-mode") || "preview";
-        var idx = modes.indexOf(current);
-        if (idx < 0) idx = 0;
-        var next = modes[(idx + 1) % modes.length];
-        bubble.setAttribute("data-collapse-mode", next);
-        var label = btn.querySelector(".subagent-reply-cycle-label");
-        var icon = btn.querySelector(".subagent-reply-cycle-icon");
-        if (label) {
-          label.textContent = next === "preview" ? "展开"
-            : next === "expanded" ? "收起"
-            : "预览";
-        }
-        if (icon) {
-          icon.textContent = next === "collapsed" ? "▸"
-            : next === "expanded" ? "▴"
-            : "▾";
-        }
-        btn.setAttribute("aria-label",
-          next === "preview" ? "点击展开全部" :
-          next === "expanded" ? "点击完全收起" :
-          "点击切回预览"
-        );
+        var expanded = bubble.getAttribute("data-expanded") === "true";
+        applyExpandedState(bubble, "subagent-reply", !expanded);
+        persistElementExpandState(bubble, "subagent-reply");
+      };
+      // Toggle function for whole subagent panel (handoff + body + footer)。
+      // 头部 / 尾部按钮、整条 header 都绑这个；data-expanded 一变，CSS 切 body max-height
+      // + 旋转 chevron，applyExpandedState 走通用通道写持久化。
+      window.__subagentPanelToggle = function(e, target) {
+        if (e) { e.preventDefault(); e.stopPropagation(); }
+        var panel = target && target.closest ? target.closest(".subagent-panel") : null;
+        if (!panel) return;
+        var expanded = panel.getAttribute("data-expanded") === "true";
+        applyExpandedState(panel, "subagent-panel", !expanded);
+        persistElementExpandState(panel, "subagent-panel");
       };
       // Toggle function for inline tool rows (Read, Glob, Grep, etc.)
       window.__inlineToolToggle = function(el) {
@@ -18905,8 +19006,8 @@
         var agentType = sub.agentType || "";
         if (agentType && SUBAGENT_NAME_MAP[agentType]) return SUBAGENT_NAME_MAP[agentType];
         if (agentType) return agentType;
-        var tail = (sub.taskId || "").slice(-4) || "未知";
-        return "协作猫·" + tail;
+        var tail = (sub.taskId || "").slice(-4) || (getActiveLang() === "English" ? "?" : "未知");
+        return t("subagent.helper_fallback_prefix") + tail;
       }
       function getSubagentPalette(sub) {
         // 哈希优先用 agentType，让同类型 agent 跨 turn 颜色稳定；没有 agentType 时
@@ -18924,33 +19025,35 @@
         '</div>';
       }
 
-      // subagent tool_result → 独立 reply 气泡（markdown 渲染）。出错时显示红色错误体，
-      // 没文本时显示打字指示器（subagent 还在跑）。
+      // subagent 最终回复（父 Task 的 tool_result）——现在外层 .subagent-panel 已经
+      // 负责整段折叠 / 滚动，这里只需把"任务完成 / 失败"做个轻量标记块，markdown
+      // 内容平铺，让 panel 的 body 滚动条统一接管。
       function renderSubagentReplyBubble(block, role) {
         if (!block || block.type !== "tool_result") return "";
         var text = extractToolResultText(block.content);
         var isError = block.is_error === true;
-
-        if (isError) {
-          return '<div class="subagent-reply error">' +
-            '<span class="subagent-reply-icon">✗</span>' +
-            '<div class="subagent-reply-body">' + (text ? renderMarkdown(text) : escapeHtml("（无输出）")) + '</div>' +
+        var rawText = typeof text === "string" ? text : (text == null ? "" : String(text));
+
+        // pending：subagent 还在跑，没收到结果。在 panel body 里画一个 typing 指示器
+        // 占位，告诉用户"还在跑"。
+        if (!isError && !rawText.trim()) {
+          return '<div class="subagent-reply pending">' +
+            '<span class="subagent-reply-marker pending">' + escapeHtml(t("subagent.running")) + '</span>' +
+            '<span class="typing-indicator"><span></span><span></span><span></span></span>' +
           '</div>';
         }
 
-        if (!text || !String(text).trim()) {
-          return '<div class="subagent-reply pending"><span class="typing-indicator"><span></span><span></span><span></span></span></div>';
-        }
+        var displayText = rawText.trim() ? rawText : t("subagent.no_output");
+        var bodyHtml = rawText.trim() ? renderMarkdown(displayText) : escapeHtml(displayText);
+        var markerLabel = isError ? t("subagent.task.failed") : t("subagent.task.done");
+        var markerSymbol = isError ? "✗" : "✓";
 
-        // 三态折叠：preview（默认 ~5 行预览，内部可滚）→ expanded（高一些上限，可滚）→
-        // collapsed（完全收起，只剩工具条）→ preview。按钮一直可见在右下，状态写在
-        // data-collapse-mode 上，配套 CSS 控制 max-height。
-        return '<div class="subagent-reply collapsible" data-collapse-mode="preview">' +
-          '<div class="subagent-reply-scroll">' + renderMarkdown(text) + '</div>' +
-          '<button type="button" class="subagent-reply-cycle" onclick="__subagentReplyCycle(event, this)" title="展开 / 收起">' +
-            '<span class="subagent-reply-cycle-label">展开</span>' +
-            '<span class="subagent-reply-cycle-icon" aria-hidden="true">▾</span>' +
-          '</button>' +
+        return '<div class="subagent-reply final' + (isError ? ' error' : '') + '">' +
+          '<div class="subagent-reply-marker ' + (isError ? 'error' : 'done') + '">' +
+            '<span class="subagent-reply-marker-icon" aria-hidden="true">' + markerSymbol + '</span>' +
+            '<span class="subagent-reply-marker-label">' + escapeHtml(markerLabel) + '</span>' +
+          '</div>' +
+          '<div class="subagent-reply-content">' + bodyHtml + '</div>' +
         '</div>';
       }
       var PIXEL_AVATAR = {
@@ -19301,23 +19404,12 @@
           // 跳过整段。否则会渲染出"只有头像没内容"的空气泡。
           if (!segHtml || !segHtml.trim()) continue;
           if (seg.subagent) {
-            var subPalette = getSubagentPalette(seg.subagent);
-            if (showHandoff && lastSubId !== seg.subagent.taskId) {
-              var subName = getSubagentDisplayName(seg.subagent);
-              var desc = seg.subagent.taskDescription
-                ? '：<span class="chat-handoff-desc">' + escapeHtml(seg.subagent.taskDescription) + '</span>'
-                : '';
-              html += '<div class="chat-handoff" style="--agent-color:' + subPalette.primary + '">' +
-                '<span class="chat-handoff-arrow">↳</span> ' +
-                escapeHtml(parentPersonaName) + ' 让 <strong>' + escapeHtml(subName) + '</strong>' +
-                '<span class="chat-handoff-tag" title="子代理 / subagent">subagent</span>' +
-                '帮忙' + desc +
-              '</div>';
-            }
-            html += '<div class="chat-message-segment subagent" data-agent-id="' + escapeHtml(seg.subagent.taskId) + '" style="--agent-color:' + subPalette.primary + '">' +
-              subagentAvatarHtml(seg.subagent) +
-              '<div class="chat-message-content">' + segHtml + '</div>' +
-            '</div>';
+            // 整段 subagent 输出包成一个统一的可折叠面板：
+            // 头部 = handoff title + 展开按钮；body = segHtml（所有工具卡、文本、最终回复
+            // 都在 body 里）；footer = 同款按钮。同一 taskId 的连续段（极少出现的
+            // parent→sub→parent→sub 交错）只在第一次露 handoff title。
+            var includeHandoff = showHandoff && lastSubId !== seg.subagent.taskId;
+            html += buildSubagentPanelHtml(seg, parentPersonaName, segHtml, messageKey, includeHandoff);
             lastSubId = seg.subagent.taskId;
           } else {
             html += '<div class="chat-message-segment parent">' +
@@ -19330,6 +19422,85 @@
         return html;
       }
 
+      // 渲染整段 subagent 输出为一个可折叠面板：
+      //   ┌─ subagent-panel ──────────────────────────────────┐
+      //   │ [🐱] ↳ 勤劳初二 让 协作猫 帮忙：xxx     [展开 ▾] │  ← header (always visible)
+      //   ├───────────────────────────────────────────────────┤
+      //   │ <tool 卡 1>                                       │
+      //   │ <text>                                            │  ← body
+      //   │ <tool 卡 2>                                       │     默认 max-height 22em
+      //   │ <... 最终回复 ...>                                │     + 内部 overflow-y:auto
+      //   ├───────────────────────────────────────────────────┤
+      //   │                              [展开 ▾]            │  ← footer (always visible)
+      //   └───────────────────────────────────────────────────┘
+      // 状态写在 .subagent-panel[data-expanded]，按 messageKey + taskId 持久化。
+      // 默认折叠（preview）；用户点头/尾按钮或头部标题条都能切。
+      function buildSubagentPanelHtml(seg, parentPersonaName, segHtml, messageKey, includeHandoff) {
+        var sub = seg.subagent;
+        var subPalette = getSubagentPalette(sub);
+        var subName = getSubagentDisplayName(sub);
+        var taskId = sub.taskId || "";
+        var avatarSvg = buildPixelSvg(buildCatGrid(subPalette));
+
+        var titleHtml;
+        if (includeHandoff) {
+          // 用 i18n 模板拼 handoff title。{parent}/{sub} 用占位符避免在调用点拼字符串导致
+          // 顺序错乱（中文 "X 让 Y 帮忙"，英文 "X asked Y for help"，词序完全不同）。
+          // tag 是单独的彩色 chip，所以把模板里的 {sub} 替换成空 span 占位，然后再 splice
+          // 进 <strong> + chip——保证模板可读、调用点不脏。
+          var subInlineHtml = '<strong class="subagent-panel-name">' + escapeHtml(subName) + '</strong>' +
+            '<span class="subagent-panel-tag" title="' + escapeHtml(t("subagent.tag_title")) + '">' + escapeHtml(t("subagent.tag")) + '</span>';
+          var hasDesc = !!(sub.taskDescription && String(sub.taskDescription).trim());
+          var handoffTpl = hasDesc ? t("subagent.handoff.with_desc", { parent: escapeHtml(parentPersonaName), sub: subInlineHtml })
+                                   : t("subagent.handoff", { parent: escapeHtml(parentPersonaName), sub: subInlineHtml });
+          var descSpan = hasDesc
+            ? '<span class="subagent-panel-task-desc">' + escapeHtml(sub.taskDescription) + '</span>'
+            : '';
+          titleHtml = '<span class="subagent-panel-arrow" aria-hidden="true">↳</span>' +
+            '<span class="subagent-panel-attribution">' + handoffTpl + descSpan + '</span>';
+        } else {
+          titleHtml = '<span class="subagent-panel-attribution">' +
+            '<strong class="subagent-panel-name">' + escapeHtml(subName) + '</strong>' +
+            '<span class="subagent-panel-task-desc"> ' + escapeHtml(t("subagent.continued")) + '</span>' +
+          '</span>';
+        }
+
+        var expandKey = buildExpandKey("subagent-panel", [messageKey, taskId]);
+        var persisted = getPersistedExpandState(expandKey);
+        var expanded = persisted === null ? false : !!persisted;
+
+        function toggleBtnHtml(position) {
+          return '<button type="button" class="subagent-panel-toggle" ' +
+                          'data-position="' + position + '" ' +
+                          'onclick="__subagentPanelToggle(event, this)" ' +
+                          'aria-expanded="' + (expanded ? "true" : "false") + '" ' +
+                          'aria-label="' + escapeHtml(expanded ? t("ui.collapse_panel_aria") : t("ui.expand_panel_aria")) + '">' +
+              '<span class="subagent-panel-toggle-label">' + escapeHtml(expanded ? t("ui.collapse") : t("ui.expand")) + '</span>' +
+              '<svg class="subagent-panel-toggle-icon" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">' +
+                '<path d="M2.5 3.75L5 6.25L7.5 3.75" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>' +
+              '</svg>' +
+            '</button>';
+        }
+
+        return '<div class="subagent-panel" ' +
+                    'data-expand-kind="subagent-panel" ' +
+                    'data-expand-key="' + escapeHtml(expandKey) + '" ' +
+                    'data-agent-id="' + escapeHtml(taskId) + '" ' +
+                    'data-expanded="' + (expanded ? "true" : "false") + '" ' +
+                    'style="--agent-color:' + subPalette.primary + '">' +
+          '<div class="subagent-panel-header" onclick="__subagentPanelToggle(event, this)" role="button" tabindex="0" aria-label="' + escapeHtml(t("subagent.title_aria")) + '">' +
+            '<span class="subagent-panel-avatar" aria-hidden="true">' + avatarSvg + '</span>' +
+            titleHtml +
+            toggleBtnHtml("top") +
+          '</div>' +
+          '<div class="subagent-panel-body">' + segHtml + '</div>' +
+          '<div class="subagent-panel-footer">' +
+            '<span class="subagent-panel-footer-hint" aria-hidden="true">— ' + escapeHtml(subName) + ' —</span>' +
+            toggleBtnHtml("bottom") +
+          '</div>' +
+        '</div>';
+      }
+
       function renderStructuredMessage(msg, roundUsage, messageIndex, legacyTaskMap) {
         var role = msg.role;
         var messageKey = getMessageKey(msg, messageIndex);

package/dist/web-ui/content/styles.css

@@ -112,9 +112,21 @@
       --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
     }
 
-    /* 尊重用户的减少动画偏好 */
+    /* 尊重用户的减少动画偏好。
+       但 Android WebView 例外: Chromium 在 Android 上会把系统 Developer
+       Options 里的 "Animator duration scale" / "Transition animation scale"
+       (设为 0 = 关) 直接映射成 prefers-reduced-motion: reduce — 这俩开关其实
+       是为 Android 原生 UI 转场设计的, 不少老用户为求"启动快"长期关着,
+       省电模式也会强制关掉。结果就是 Wand APK 内所有入场动画 (queueBarEnter、
+       messageSlideUser 等) 被压成 0.01ms, 用户看不到"消息已加入排队"这种
+       关键反馈, 跟浏览器版表现不一致。
+       html.is-wand-app 由 scripts.js 在 UA 含 WandApp/* 时挂到 <html> 上 ——
+       Wand APK 内自己定义动画策略, 不跟 Android 系统级开关绑死; 浏览器 /
+       普通 PWA / 桌面端仍然完整尊重用户偏好 (排除 .is-wand-app 后规则不变)。 */
     @media (prefers-reduced-motion: reduce) {
-      *, *::before, *::after {
+      html:not(.is-wand-app) *,
+      html:not(.is-wand-app) *::before,
+      html:not(.is-wand-app) *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
@@ -4380,7 +4392,7 @@
        的 WebView，会把 color-mix(...) 当作 invalid 整条扔掉，导致背景/边框消失。
        下面凡是 color-mix 的属性都先写一条 rgba()/纯色 fallback，再被 color-mix
        覆盖；旧浏览器看到 fallback、新浏览器自动用 color-mix。同一文件里下方
-       .chat-handoff-tag / .subagent-reply / .subagent-reply-cycle 等也是同思路。 */
+       .chat-handoff-tag / .subagent-reply / .subagent-reply-toggle 等也是同思路。 */
     .chat-handoff {
       align-self: flex-start;
       margin: 4px 0 2px 4px;
@@ -4466,15 +4478,18 @@
       padding: 14px 16px;
     }
 
+    /* 短内容（error）形态：图标 + body 并列。用 flex 而不是 inline-block + display:inline，
+       后者在 body 内含块级 markdown（段落 / 代码块）时会塌掉。 */
+    .subagent-reply:not(.collapsible) {
+      display: flex;
+      align-items: flex-start;
+      gap: 6px;
+    }
     .subagent-reply-icon {
-      display: inline-block;
+      flex: 0 0 auto;
       color: var(--danger, #e2574c);
-      margin-right: 6px;
       font-weight: 700;
-    }
-
-    .subagent-reply-body {
-      display: inline;
+      line-height: 1.55;
     }
 
     .subagent-reply pre,
@@ -4495,98 +4510,250 @@
       min-width: 0;
     }
 
-    /* ===== subagent 回复三态折叠 =====
-       preview（默认）→ 限高 ~5 行 + 渐隐 mask + 内部可滚
-       expanded       → 拉到一个比较大的上限，内部可滚
-       collapsed      → 完全收起，只剩底部一条工具栏，按钮还能再点回来 */
-    .subagent-reply.collapsible {
-      position: relative;
-      padding-right: 14px;
-      padding-bottom: 28px;
-    }
-
-    .subagent-reply-scroll {
+    /* ===== subagent panel（整段输出统一折叠面板）=====
+       结构：header（handoff + 展开按钮）+ body（max-height 22em 滚动）+ footer（同款按钮）
+       状态：data-expanded="false" 预览 / "true" 展开（body 拉到 70vh 仍可滚）
+       色彩：跟随 --agent-color（外层 inline style 注入），同 agent 跨 turn 颜色稳定 */
+    .subagent-panel {
+      margin: 8px 0;
+      border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 25%, transparent);
+      border-left: 3px solid color-mix(in srgb, var(--agent-color, var(--accent)) 55%, transparent);
+      border-radius: 10px;
       overflow: hidden;
-      transition: max-height 0.32s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
-      min-width: 0;
-      max-width: 100%;
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 3%, var(--bg-surface));
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
     }
-    .subagent-reply-scroll > :first-child { margin-top: 0; }
-    .subagent-reply-scroll > :last-child { margin-bottom: 0; }
 
-    .subagent-reply.collapsible[data-collapse-mode="preview"] .subagent-reply-scroll {
-      max-height: 7.5em; /* ~5 行 */
-      overflow-y: auto;
-      -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
-              mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
+    .subagent-panel-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 10%, var(--bg-surface));
+      border-bottom: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 16%, transparent);
+      cursor: pointer;
+      user-select: none;
+      font-size: 0.78rem;
+      line-height: 1.35;
+      transition: background 0.15s ease;
+    }
+    .subagent-panel-header:hover {
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 14%, var(--bg-surface));
+    }
+    .subagent-panel-header:focus-visible {
+      outline: 2px solid color-mix(in srgb, var(--agent-color, var(--accent)) 55%, transparent);
+      outline-offset: -2px;
     }
 
-    .subagent-reply.collapsible[data-collapse-mode="expanded"] .subagent-reply-scroll {
-      max-height: 360px;
-      overflow-y: auto;
+    .subagent-panel-avatar {
+      flex: 0 0 auto;
+      width: 22px;
+      height: 22px;
+      border-radius: 5px;
+      overflow: hidden;
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 18%, transparent);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .subagent-panel-avatar svg,
+    .subagent-panel-avatar img {
+      width: 100%;
+      height: 100%;
+      display: block;
     }
 
-    .subagent-reply.collapsible[data-collapse-mode="collapsed"] {
-      padding-top: 6px;
-      padding-bottom: 26px;
+    .subagent-panel-arrow {
+      flex: 0 0 auto;
+      color: color-mix(in srgb, var(--agent-color, var(--accent)) 65%, var(--text-primary));
+      opacity: 0.8;
+      font-weight: 600;
     }
-    .subagent-reply.collapsible[data-collapse-mode="collapsed"] .subagent-reply-scroll {
-      max-height: 0;
+
+    .subagent-panel-attribution {
+      flex: 1 1 auto;
+      min-width: 0;
+      color: var(--text-primary);
       overflow: hidden;
-      margin: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .subagent-panel-name {
+      color: color-mix(in srgb, var(--agent-color, var(--accent)) 88%, var(--text-primary));
+      font-weight: 600;
+    }
+    .subagent-panel-tag {
+      display: inline-block;
+      margin: 0 6px;
+      padding: 0 6px;
+      font-size: 0.62rem;
+      font-weight: 500;
+      letter-spacing: 0.04em;
+      color: var(--agent-color, var(--accent));
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 12%, transparent);
+      border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 30%, transparent);
+      border-radius: 4px;
+      vertical-align: 1px;
+      line-height: 1.4;
+      white-space: nowrap;
+      /* 注意：不要加 text-transform: uppercase。之前用 lowercase "subagent" + uppercase 强转
+         出来 "SUBAGENT"，结果中文 UI 里冒出来一个英文大写词跟用户配置语言（中文）对不上。
+         现在文案直接走 i18n（t("subagent.tag") = "子代理" / "Subagent"），无需大小写强制。 */
+    }
+    .subagent-panel-task-desc {
+      color: var(--text-muted);
+      font-weight: 400;
     }
 
-    /* 三态循环按钮：固定在气泡右下角，三种模式下都可见 */
-    .subagent-reply-cycle {
-      position: absolute;
-      right: 8px;
-      bottom: 6px;
+    .subagent-panel-toggle {
+      flex: 0 0 auto;
       display: inline-flex;
       align-items: center;
-      gap: 3px;
-      padding: 2px 8px;
+      gap: 4px;
+      padding: 3px 10px;
       font-size: 0.7rem;
       font-weight: 500;
-      line-height: 1.4;
-      color: var(--accent);
-      color: var(--agent-color, var(--accent));
-      background: rgba(255, 248, 240, 0.95);
-      background: color-mix(in srgb, var(--agent-color, var(--accent)) 8%, var(--bg-surface, #fff));
-      border: 1px solid rgba(197, 101, 61, 0.28);
-      border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 28%, transparent);
+      line-height: 1.3;
+      color: color-mix(in srgb, var(--agent-color, var(--accent)) 78%, var(--text-primary));
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 8%, var(--bg-surface));
+      border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 30%, transparent);
       border-radius: 999px;
       cursor: pointer;
       user-select: none;
-      transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
+      transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
     }
-    .subagent-reply-cycle:hover {
-      background: rgba(248, 226, 210, 1);
-      background: color-mix(in srgb, var(--agent-color, var(--accent)) 16%, var(--bg-surface, #fff));
-      border-color: rgba(197, 101, 61, 0.45);
+    .subagent-panel-toggle:hover {
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 18%, var(--bg-surface));
       border-color: color-mix(in srgb, var(--agent-color, var(--accent)) 45%, transparent);
     }
-    .subagent-reply-cycle:active {
+    .subagent-panel-toggle:active {
       transform: translateY(1px);
     }
-    .subagent-reply-cycle-icon {
-      font-size: 0.7rem;
-      line-height: 1;
+    .subagent-panel-toggle-icon {
+      transition: transform 0.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+    }
+    .subagent-panel[data-expanded="true"] .subagent-panel-toggle-icon {
+      transform: rotate(180deg);
     }
 
-    /* 内部滚动条做小一点，别抢戏 */
-    .subagent-reply-scroll::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
+    /* body：默认 max-height 22em（≈14 行），内部滚动；展开后拉到 70vh 仍内部可滚，
+       避免一个超长 subagent 把整页撑爆。展开过渡只动 max-height，body 内的卡片
+       不动，不会有抖动。 */
+    .subagent-panel-body {
+      padding: 10px 14px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      min-width: 0;
+      max-width: 100%;
+      transition: max-height 0.28s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+      scrollbar-gutter: stable;
     }
-    .subagent-reply-scroll::-webkit-scrollbar-thumb {
-      background: rgba(197, 101, 61, 0.35);
-      background: color-mix(in srgb, var(--agent-color, var(--accent)) 35%, transparent);
-      border-radius: 3px;
+    .subagent-panel[data-expanded="false"] .subagent-panel-body {
+      max-height: 22em;
+    }
+    .subagent-panel[data-expanded="true"] .subagent-panel-body {
+      max-height: 70vh;
+    }
+    .subagent-panel-body > :first-child { margin-top: 0; }
+    .subagent-panel-body > :last-child { margin-bottom: 0; }
+
+    /* body 里的工具卡 / 文本：缩一点字号 + 减小 margin，让 22em 能装下更多内容 */
+    .subagent-panel-body .tool-use-card,
+    .subagent-panel-body .tool-group,
+    .subagent-panel-body .inline-tool,
+    .subagent-panel-body .inline-terminal,
+    .subagent-panel-body .inline-diff {
+      margin: 4px 0;
+    }
+    .subagent-panel-body .markdown-content {
+      font-size: 0.875rem;
+    }
+
+    /* body 滚动条：弱化但仍可见，对应 agent 色 */
+    .subagent-panel-body::-webkit-scrollbar {
+      width: 7px;
+      height: 7px;
+    }
+    .subagent-panel-body::-webkit-scrollbar-thumb {
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 32%, transparent);
+      border-radius: 4px;
     }
-    .subagent-reply-scroll::-webkit-scrollbar-track {
+    .subagent-panel-body::-webkit-scrollbar-thumb:hover {
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 50%, transparent);
+    }
+    .subagent-panel-body::-webkit-scrollbar-track {
       background: transparent;
     }
 
+    /* footer：跟 header 对称，永远可见在 panel 底部。滚到 body 最下时用户能就近点。
+       hint 是个软提示"— 协作猫 —"，告诉用户 panel 边界，避免与下一段父消息混淆。 */
+    .subagent-panel-footer {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 6px 12px;
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 6%, var(--bg-surface));
+      border-top: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 14%, transparent);
+      font-size: 0.7rem;
+    }
+    .subagent-panel-footer-hint {
+      flex: 1 1 auto;
+      min-width: 0;
+      color: var(--text-muted);
+      opacity: 0.7;
+      font-family: var(--font-mono);
+      letter-spacing: 0.04em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* ===== panel 内最终回复的简化标记块（外层 panel 已经管折叠，这里只剩"任务完成"标记）===== */
+    .subagent-reply.collapsible {
+      padding: 0;
+      overflow: hidden;
+    }
+    .subagent-reply.final {
+      margin: 6px 0 0;
+      padding: 10px 12px;
+      border-radius: 8px;
+      border-left: 3px solid color-mix(in srgb, var(--agent-color, var(--accent)) 60%, transparent);
+      background: color-mix(in srgb, var(--agent-color, var(--accent)) 5%, var(--bg-surface));
+    }
+    .subagent-reply.final.error {
+      border-left-color: var(--danger, #e2574c);
+      background: color-mix(in srgb, var(--danger, #e2574c) 5%, var(--bg-surface));
+    }
+    .subagent-reply-marker {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      margin-bottom: 4px;
+      font-size: 0.68rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: color-mix(in srgb, var(--agent-color, var(--accent)) 78%, var(--text-primary));
+    }
+    .subagent-reply-marker.error {
+      color: var(--danger, #e2574c);
+    }
+    .subagent-reply-marker.pending {
+      color: var(--text-muted);
+      text-transform: none;
+      letter-spacing: 0;
+      font-weight: 500;
+    }
+    .subagent-reply-marker-icon {
+      font-weight: 700;
+    }
+    .subagent-reply.final .subagent-reply-content > :first-child { margin-top: 0; }
+    .subagent-reply.final .subagent-reply-content > :last-child { margin-bottom: 0; }
+
+    /* （旧的 .subagent-reply-header / .subagent-reply-toggle / .subagent-reply-body /
+       .subagent-reply-fade / .subagent-reply-body-inline 系列已移除——现在外层
+       .subagent-panel 接管整段折叠 + 滚动，内层最终回复退化为简化标记块。） */
+
     /* ===== 消息使用量信息 ===== */
     .message-usage {
       margin-top: 8px;
@@ -10723,6 +10890,26 @@
       .tool-use-file { max-width: 100%; }
       .tool-use-body { padding: 10px 12px; }
       .subagent-reply { padding: 9px 12px; }
+      .subagent-reply.collapsible { padding: 0; }
+      .subagent-reply.final { padding: 9px 11px; }
+      /* subagent-panel：窄屏头部不省略 attribution（可换行多行 vs 单行省略），
+         body 高度收紧一点，footer hint 隐掉只留按钮。 */
+      .subagent-panel { margin: 6px 0; }
+      .subagent-panel-header {
+        padding: 7px 10px;
+        gap: 6px;
+        font-size: 0.74rem;
+      }
+      .subagent-panel-attribution {
+        white-space: normal;
+        line-height: 1.4;
+      }
+      .subagent-panel-tag { margin: 0 4px; padding: 0 4px; }
+      .subagent-panel-body { padding: 9px 11px; }
+      .subagent-panel[data-expanded="false"] .subagent-panel-body { max-height: 18em; }
+      .subagent-panel[data-expanded="true"] .subagent-panel-body { max-height: 60vh; }
+      .subagent-panel-footer { padding: 5px 10px; }
+      .subagent-panel-footer-hint { display: none; }
       .markdown-content .code-block { margin: 8px 0; }
       .markdown-content pre,
       .markdown-content .code-block pre,

package/dist/web-ui/styles.js

@@ -2,12 +2,26 @@ import * as fs from "node:fs";
 import * as path from "node:path";
 import { fileURLToPath } from "node:url";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-// Cache the CSS content
+// 用 mtime 做缓存键，磁盘上 CSS 一变（npm run build / 手工 edit dist/）下次请求
+// 就会自动 re-read。否则进程启动时缓存的 CSS 会粘住整个生命周期，UI 改动看不到效果，
+// 必须重启 wand 才能生效——开发 / 修 UI 的时候这点尤其难受。
+// 同步 stat 的成本：本地 fs，~几十微秒，相对一次 HTML 渲染可忽略。
 let _cssCache = null;
+let _cssCacheMtimeMs = 0;
 export function getCSSStyles() {
-    if (!_cssCache) {
-        const cssPath = path.join(__dirname, "content", "styles.css");
-        _cssCache = fs.readFileSync(cssPath, "utf-8");
+    const cssPath = path.join(__dirname, "content", "styles.css");
+    try {
+        const stat = fs.statSync(cssPath);
+        if (_cssCache === null || stat.mtimeMs !== _cssCacheMtimeMs) {
+            _cssCache = fs.readFileSync(cssPath, "utf-8");
+            _cssCacheMtimeMs = stat.mtimeMs;
+        }
+    }
+    catch {
+        // 文件丢了就退化到旧缓存（如果有），还没缓存过就抛出原错误让 server 知道。
+        if (_cssCache === null) {
+            _cssCache = fs.readFileSync(cssPath, "utf-8");
+        }
     }
     return _cssCache;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@co0ontty/wand",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "description": "A web terminal for local CLI tools like Claude.",
   "type": "module",
   "bin": {