@co0ontty/wand 1.4.0 → 1.5.1

package/dist/config.js

@@ -15,7 +15,7 @@ export const defaultConfig = () => ({
     startupCommands: [],
     allowedCommandPrefixes: [],
     shortcutLogMaxBytes: 10 * 1024 * 1024,
-    experimentalDomTerminal: false,
+    language: "",
     commandPresets: [
         {
             label: "Claude",
@@ -107,7 +107,8 @@ function mergeWithDefaults(input) {
                 command: normalizePresetCommand(preset.command),
                 mode: isExecutionMode(preset.mode) ? preset.mode : undefined
             }))
-            : defaults.commandPresets
+            : defaults.commandPresets,
+        language: typeof input.language === "string" ? input.language.trim() : defaults.language,
     };
 }
 export function isExecutionMode(value) {

package/dist/process-manager.js

@@ -1559,6 +1559,13 @@ export class ProcessManager extends EventEmitter {
             const escaped = autonomousPrompt.replace(/'/g, "'\\''");
             result += ` --append-system-prompt '${escaped}'`;
         }
+        // Append language preference if configured
+        const language = this.config.language?.trim();
+        if (language) {
+            const langPrompt = `Please respond in ${language}. Use ${language} for all your explanations, comments, and conversational text.`;
+            const escaped = langPrompt.replace(/'/g, "'\\''");
+            result += ` --append-system-prompt '${escaped}'`;
+        }
         return result;
     }
 }

package/dist/server.js

@@ -253,14 +253,14 @@ export async function startServer(config, configPath) {
     const configDir = resolveConfigDir(configPath);
     const avatarSeed = await ensureAvatarSeed(configDir);
     const processes = new ProcessManager(config, storage, configDir);
-    const structuredSessions = new StructuredSessionManager(storage);
+    const structuredSessions = new StructuredSessionManager(storage, config);
     const useHttps = config.https === true;
     const protocol = useHttps ? "https" : "http";
     const nodeModulesDir = path.join(RUNTIME_ROOT_DIR, "node_modules");
     app.use(express.json({ limit: "1mb" }));
-    app.use("/vendor/xterm", express.static(path.join(nodeModulesDir, "xterm")));
+    app.use("/vendor/xterm", express.static(path.join(nodeModulesDir, "@xterm", "xterm")));
     app.use("/vendor/xterm-addon-fit", express.static(path.join(nodeModulesDir, "@xterm", "addon-fit")));
-    app.use("/vendor/xterm-addon-serialize", express.static(path.join(nodeModulesDir, "xterm-addon-serialize")));
+    app.use("/vendor/xterm-addon-serialize", express.static(path.join(nodeModulesDir, "@xterm", "addon-serialize")));
     // ── Web UI and PWA endpoints ──
     app.get("/", (_req, res) => {
         res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
@@ -336,7 +336,6 @@ export async function startServer(config, configPath) {
             defaultCwd: config.defaultCwd,
             commandPresets: config.commandPresets,
             structuredRunners: [{ label: "Claude Structured", runner: "claude-cli-print" }],
-            experimentalDomTerminal: config.experimentalDomTerminal ?? false,
             updateAvailable: cachedUpdateInfo?.updateAvailable ?? false,
             latestVersion: cachedUpdateInfo?.latest ?? null,
             currentVersion: PKG_VERSION,
@@ -360,7 +359,7 @@ export async function startServer(config, configPath) {
     });
     app.post("/api/settings/config", async (req, res) => {
         const body = req.body;
-        const allowedFields = ["host", "port", "https", "defaultMode", "defaultCwd", "shell", "experimentalDomTerminal"];
+        const allowedFields = ["host", "port", "https", "defaultMode", "defaultCwd", "shell", "language"];
         let changed = false;
         for (const field of allowedFields) {
             if (field in body && body[field] !== undefined) {
@@ -391,8 +390,8 @@ export async function startServer(config, configPath) {
                 else if (field === "shell") {
                     config.shell = String(body.shell);
                 }
-                else if (field === "experimentalDomTerminal") {
-                    config.experimentalDomTerminal = body.experimentalDomTerminal === true;
+                else if (field === "language") {
+                    config.language = typeof body.language === "string" ? body.language.trim() : "";
                 }
                 changed = true;
             }

package/dist/structured-session-manager.d.ts

@@ -1,5 +1,5 @@
 import { WandStorage } from "./storage.js";
-import { ExecutionMode, SessionRunner, SessionSnapshot } from "./types.js";
+import { ExecutionMode, SessionRunner, SessionSnapshot, WandConfig } from "./types.js";
 import { ProcessEvent } from "./ws-broadcast.js";
 interface CreateStructuredSessionOptions {
     cwd: string;
@@ -9,10 +9,11 @@ interface CreateStructuredSessionOptions {
 }
 export declare class StructuredSessionManager {
     private readonly storage;
+    private readonly config;
     private readonly sessions;
     private readonly pendingChildren;
     private emitEvent;
-    constructor(storage: WandStorage);
+    constructor(storage: WandStorage, config: WandConfig);
     setEventEmitter(emitEvent: (event: ProcessEvent) => void): void;
     list(): SessionSnapshot[];
     get(id: string): SessionSnapshot | null;

package/dist/structured-session-manager.js

@@ -1,6 +1,6 @@
 import { randomUUID } from "node:crypto";
 import { spawn } from "node:child_process";
-const STREAM_EMIT_DEBOUNCE_MS = 50;
+const STREAM_EMIT_DEBOUNCE_MS = 16;
 function isRunningAsRoot() {
     return process.getuid?.() === 0 || process.geteuid?.() === 0;
 }
@@ -10,11 +10,13 @@ function shouldAutoApproveForMode(mode) {
 }
 export class StructuredSessionManager {
     storage;
+    config;
     sessions = new Map();
     pendingChildren = new Map();
     emitEvent = null;
-    constructor(storage) {
+    constructor(storage, config) {
         this.storage = storage;
+        this.config = config;
         for (const snapshot of this.storage.loadSessions()) {
             if ((snapshot.sessionKind ?? "pty") !== "structured")
                 continue;
@@ -369,6 +371,11 @@ export class StructuredSessionManager {
             if (session.mode === "managed") {
                 args.push("--append-system-prompt", "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.");
             }
+            // Append language preference if configured
+            const language = this.config.language?.trim();
+            if (language) {
+                args.push("--append-system-prompt", `Please respond in ${language}. Use ${language} for all your explanations, comments, and conversational text.`);
+            }
             if (session.claudeSessionId) {
                 args.push("--resume", session.claudeSessionId);
             }
@@ -456,9 +463,9 @@ export class StructuredSessionManager {
                     if (extracted.content.length > 0) {
                         turnState.blocks.push(...extracted.content);
                     }
-                    if (extracted.usage) {
-                        turnState.usage = extracted.usage;
-                    }
+                    // NOTE: usage from streaming "assistant" events contains partial/incremental
+                    // token counts (e.g. output_tokens=1 during streaming) and is NOT accurate.
+                    // We only use the authoritative usage from the final "result" event.
                     syncSnapshot();
                     scheduleEmit();
                     return;

package/dist/types.d.ts

@@ -45,8 +45,8 @@ export interface WandConfig {
     commandPresets: CommandPreset[];
     /** Max total size (bytes) for shortcut interaction logs per session (default: 10 MB). Set 0 to disable logging. */
     shortcutLogMaxBytes?: number;
-    /** Experimental: use DOM-based terminal rendering on mobile for native text selection (default: false) */
-    experimentalDomTerminal?: boolean;
+    /** Preferred response language for Claude (e.g. "中文", "English"). Empty string means no override. */
+    language?: string;
 }
 export interface CommandRequest {
     command: string;

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

@@ -821,11 +821,21 @@
                   '<label class="field-label" for="cfg-shell">Shell</label>' +
                   '<input id="cfg-shell" type="text" class="field-input" placeholder="/bin/bash" />' +
                 '</div>' +
-                '<div class="field field-inline">' +
-                  '<label class="field-label" for="cfg-dom-terminal">终端 DOM 渲染 <span style="font-size:0.7em;color:var(--warning);font-weight:600;">实验性</span></label>' +
-                  '<input id="cfg-dom-terminal" type="checkbox" class="field-checkbox" />' +
+                '<div class="field">' +
+                  '<label class="field-label" for="cfg-language">回复语言</label>' +
+                  '<select id="cfg-language" class="field-input">' +
+                    '<option value="">自动（不指定）</option>' +
+                    '<option value="中文">中文</option>' +
+                    '<option value="English">English</option>' +
+                    '<option value="日本語">日本語</option>' +
+                    '<option value="한국어">한국어</option>' +
+                    '<option value="Español">Español</option>' +
+                    '<option value="Français">Français</option>' +
+                    '<option value="Deutsch">Deutsch</option>' +
+                    '<option value="Русский">Русский</option>' +
+                  '</select>' +
+                  '<p class="hint" style="margin-top:4px;margin-bottom:0;">设置后，Claude 将尽量使用指定语言回复。</p>' +
                 '</div>' +
-                '<p class="hint" style="margin-top:-8px;margin-bottom:8px;">移动端使用 DOM 渲染终端，支持原生文本选择与复制。保存后刷新页面生效。</p>' +
                 '<button id="save-config-button" class="btn btn-primary btn-block">保存配置</button>' +
                 '<p id="config-message" class="hint hidden"></p>' +
               '</div>' +
@@ -1916,21 +1926,23 @@
         var statusSpan = el.querySelector(".inline-tool-status");
         if (statusSpan) {
           if (el.dataset.status === "error") {
-            statusSpan.textContent = "⚠️";
+            statusSpan.textContent = "✗";
           } else if (el.dataset.status === "done") {
-            statusSpan.textContent = expanded ? "✅" : "✅";
+            statusSpan.textContent = "✓";
           }
         }
       };
       // Toggle function for terminal tool blocks
       window.__terminalExpand = function(el) {
-        var body = el.querySelector(".term-body");
+        var container = el.closest(".inline-terminal");
+        if (!container) return;
+        var body = container.querySelector(".term-body");
         if (body) {
           var isHidden = body.style.display === "none";
           body.style.display = isHidden ? "block" : "none";
-          el.dataset.expanded = isHidden ? "true" : "false";
+          container.dataset.expanded = isHidden ? "true" : "false";
           var toggleIcon = el.querySelector(".term-toggle-icon");
-          if (toggleIcon) toggleIcon.textContent = isHidden ? "▼" : "▲";
+          if (toggleIcon) toggleIcon.textContent = isHidden ? "▼" : "▶";
         }
       };
       // Update streaming thinking content (called from WebSocket handler)
@@ -4196,8 +4208,8 @@
             if (modeEl) modeEl.value = cfg.defaultMode || "default";
             if (cwdEl) cwdEl.value = cfg.defaultCwd || "";
             if (shellEl) shellEl.value = cfg.shell || "";
-            var domTermEl = document.getElementById("cfg-dom-terminal");
-            if (domTermEl) domTermEl.checked = cfg.experimentalDomTerminal === true;
+            var langEl = document.getElementById("cfg-language");
+            if (langEl) langEl.value = cfg.language || "";
 
             // Cert status
             var certStatus = document.getElementById("cert-status");
@@ -4235,7 +4247,7 @@
           defaultMode: (document.getElementById("cfg-mode") || {}).value,
           defaultCwd: (document.getElementById("cfg-cwd") || {}).value,
           shell: (document.getElementById("cfg-shell") || {}).value,
-          experimentalDomTerminal: (document.getElementById("cfg-dom-terminal") || {}).checked,
+          language: (document.getElementById("cfg-language") || {}).value || "",
         };
 
         fetch("/api/settings/config", {
@@ -7357,7 +7369,8 @@
         switch (msg.type) {
           case 'output':
             // Update session output (for terminal display and local message parsing)
-            if (msg.data && msg.data.output && msg.sessionId) {
+            // NOTE: For structured sessions, output may be "" during streaming — check messages too
+            if (msg.data && (msg.data.output || msg.data.messages) && msg.sessionId) {
               var snapshot = { id: msg.sessionId, output: msg.data.output };
               if (Object.prototype.hasOwnProperty.call(msg.data, 'permissionBlocked')) {
                 snapshot.permissionBlocked = !!msg.data.permissionBlocked;
@@ -7381,7 +7394,12 @@
                   }
                 }
                 updateTaskDisplay();
-                scheduleChatRender();
+                // Structured sessions: render immediately for responsiveness
+                if (msg.data.sessionKind === 'structured') {
+                  renderChat();
+                } else {
+                  scheduleChatRender();
+                }
               }
 
             }
@@ -8446,10 +8464,8 @@
       // ===== Terminal copy button for mobile =====
       // ===== Mobile DOM terminal view =====
       function initMobileDomTerminal(container) {
-        var isTouch = window.matchMedia("(pointer: coarse)").matches;
-        if (!isTouch) return;
-        // Gated by experimental config flag
-        if (!state.config || !state.config.experimentalDomTerminal) return;
+        // DOM terminal feature removed — always return
+        return;
 
         // Create DOM view container
         var domView = document.createElement("div");
@@ -8848,7 +8864,7 @@
         if (msg.role === "thinking") {
           return '<div class="chat-message thinking">' +
             '<div class="thinking-inline thinking-pty collapsed" data-thinking="" onclick="__thinkingToggle(this)">' +
-              '<span class="thinking-inline-icon">🧠</span>' +
+              '<span class="thinking-inline-icon">⦿</span>' +
               '<span class="thinking-inline-preview">' + escapeHtml(msg.content) + '</span>' +
               '<span class="thinking-inline-action">展开</span>' +
             '</div>' +
@@ -8859,7 +8875,7 @@
         if (msg.role === "prompt") {
           return '<div class="chat-message prompt">' +
             '<div class="prompt-card">' +
-              '<div class="prompt-icon">💡</div>' +
+              '<div class="prompt-icon">→</div>' +
               '<div class="prompt-content">试试：<span class="prompt-text">' + escapeHtml(msg.content) + '</span></div>' +
             '</div>' +
           '</div>';
@@ -8871,7 +8887,7 @@
         }
 
         // Legacy string content (from PTY parsing)
-        var avatar = msg.role === "assistant" ? '<div class="chat-message-avatar">AI</div>' : "";
+        var avatar = msg.role === "assistant" ? '<div class="chat-message-avatar">赛博虎妞</div>' : "";
         var bubbleContent = msg.role === "assistant" ? renderMarkdown(msg.content) : escapeHtml(msg.content);
         return '<div class="chat-message ' + msg.role + '">' +
           avatar +
@@ -8924,7 +8940,7 @@
 
       function renderStructuredMessage(msg) {
         var role = msg.role;
-        var avatar = role === "assistant" ? '<div class="chat-message-avatar">AI</div>' : "";
+        var avatar = role === "assistant" ? '<div class="chat-message-avatar">赛博虎妞</div>' : "";
 
         if (!msg.content || msg.content.length === 0) {
           if (role === "assistant") {
@@ -8951,7 +8967,7 @@
         } catch (e) {
           return '<div class="chat-message ' + role + '">' +
             avatar +
-            '<div class="chat-message-bubble"><div class="render-error">消息渲染失败</div></div>' +
+            '<div class="chat-message-content"><div class="render-error">消息渲染失败</div></div>' +
           '</div>';
         }
 
@@ -8970,7 +8986,7 @@
 
         return '<div class="chat-message ' + role + '">' +
           avatar +
-          '<div class="chat-message-bubble">' + blocksHtml + '</div>' +
+          '<div class="chat-message-content">' + blocksHtml + '</div>' +
           usageHtml +
         '</div>';
       }
@@ -8991,13 +9007,13 @@
             if (isStreaming) {
               return '<div class="thinking-inline thinking-streaming" data-thinking="">' +
                 '<div class="thinking-streaming-inner">' +
-                  '<span class="thinking-streaming-icon spinning">🧠</span>' +
+                  '<span class="thinking-streaming-icon spinning">⦿</span>' +
                   '<div class="thinking-streaming-text"></div>' +
                 '</div>' +
               '</div>';
             }
             return '<div class="thinking-inline collapsed" data-thinking="' + escapeHtml(thinkingText) + '" onclick="__thinkingToggle(this)">' +
-              '<span class="thinking-inline-icon">🧠</span>' +
+              '<span class="thinking-inline-icon">⦿</span>' +
               '<span class="thinking-inline-preview">' + escapeHtml(preview) + '</span>' +
               '<span class="thinking-inline-action">展开</span>' +
             '</div>';
@@ -9025,7 +9041,7 @@
 
         var isError = toolResult && toolResult.is_error;
         var hasResult = resultContent.length > 0;
-        var statusIcon = isError ? "⚠️" : (hasResult ? "✅" : "⏳");
+        var statusIcon = isError ? "✗" : (hasResult ? "✓" : "…");
 
         // Build the inline preview line
         var icon = "";
@@ -9090,7 +9106,7 @@
         var fullResult = resultContent;
 
         var expandedHtml = "";
-        var shouldExpand = hasResult;
+        var shouldExpand = false;  // All inline tools collapsed by default
         if (hasResult) {
           expandedHtml = '<div class="inline-tool-expanded" style="display: ' + (shouldExpand ? 'block' : 'none') + ';">' +
             '<div class="inline-tool-result">' + formatInlineResult(resultContent, toolName) + '</div>' +
@@ -9104,7 +9120,7 @@
 
         var extraInfoHtml = meta ? '<span class="inline-tool-meta">' + escapeHtml(meta) + '</span>' : '';
         var extraClass = isError ? 'inline-tool-error-inline' : '';
-        if (hasResult) extraClass += ' inline-tool-open';
+        if (shouldExpand) extraClass += ' inline-tool-open';
 
         return '<div class="inline-tool ' + extraClass + '" ' +
           'data-result="' + escapeHtml(fullResult) + '" ' +
@@ -9161,13 +9177,16 @@
           exitCodeHtml = '<div class="term-exit ' + codeClass + '">exit ' + exitCode + '</div>';
         }
 
-        return '<div class="inline-terminal" data-expanded="true">' +
+        // Show command preview in header (truncate long commands)
+        var cmdPreview = command.length > 80 ? command.slice(0, 77) + "…" : command;
+
+        return '<div class="inline-terminal" data-expanded="false">' +
           '<div class="term-header" onclick="__terminalExpand(this)">' +
             statusDot +
-            '<span class="term-title">执行命令</span>' +
-            '<span class="term-toggle-icon">▼</span>' +
+            '<span class="term-cmd-preview"><span class="term-prompt">$</span> ' + escapeHtml(cmdPreview) + '</span>' +
+            '<span class="term-toggle-icon">▶</span>' +
           '</div>' +
-          '<div class="term-body">' +
+          '<div class="term-body" style="display:none;">' +
             '<div class="term-command"><span class="term-prompt">$</span> ' + cmdDisplay + '</div>' +
             (outputHtml ? '<div class="term-output">' + outputHtml + '</div>' : '') +
             exitCodeHtml +
@@ -9230,15 +9249,15 @@
           if (isError) {
             statusClass = "diff-error";
             statusText = toolResultText.indexOf("haven't granted") !== -1 || toolResultText.indexOf("permission") !== -1
-              ? "⏸ 等待授权"
-              : "❌ 修改失败";
+              ? "等待授权"
+              : "失败";
           } else {
             statusClass = "diff-success";
-            statusText = "✅ 已修改";
+            statusText = "已修改";
           }
         } else {
           statusClass = "diff-pending";
-          statusText = "⏳ 执行中…";
+          statusText = "执行中";
         }
 
         // If only one column has content, show full width
@@ -9247,7 +9266,7 @@
 
         return '<div class="inline-diff" data-tool-name="' + escapeHtml(toolName) + '">' +
           '<div class="diff-header">' +
-            '<span class="diff-file-icon">📄</span>' +
+            '<span class="diff-file-icon"></span>' +
             '<span class="diff-file-name">' + escapeHtml(fileName) + '</span>' +
             '<span class="diff-path">' + escapeHtml(path) + '</span>' +
             '<span class="diff-status ' + statusClass + '">' + statusText + '</span>' +
@@ -9306,7 +9325,7 @@
             }
             return '<div class="tool-use-card ask-user" data-tool-use-id="' + escapeHtml(toolId) + '">' +
               '<div class="tool-use-header" data-tool-toggle onclick="__tcToggle(event,this)">' +
-                '<span class="tool-use-icon">❓</span>' +
+                '<span class="tool-use-icon">?</span>' +
                 '<span class="tool-use-name">提问</span>' +
               '</div>' +
               '<div class="tool-use-body ask-user-body">' +
@@ -9397,23 +9416,23 @@
 
       function getToolIcon(toolName) {
         var icons = {
-          "Read": "📄",
-          "Write": "✏️",
-          "Edit": "📝",
-          "MultiEdit": "📝",
-          "Bash": "💻",
-          "Grep": "🔍",
-          "Glob": "📂",
-          "WebFetch": "🌐",
-          "WebSearch": "🔎",
-          "Task": "📋",
-          "TodoWrite": "📝",
-          "TodoRead": "📋",
-          "NotebookEdit": "📓",
-          "Agent": "🤖",
-          "Exit": "🚪"
+          "Read": "R",
+          "Write": "W",
+          "Edit": "E",
+          "MultiEdit": "E",
+          "Bash": "$",
+          "Grep": "G",
+          "Glob": "F",
+          "WebFetch": "⇣",
+          "WebSearch": "⇢",
+          "Task": "T",
+          "TodoWrite": "☐",
+          "TodoRead": "☑",
+          "NotebookEdit": "N",
+          "Agent": "A",
+          "Exit": "×"
         };
-        return icons[toolName] || "🔧";
+        return icons[toolName] || "·";
       }
 
       function generateInputSummary(toolName, input) {

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

@@ -2231,6 +2231,7 @@
 
     .chat-message.assistant {
       align-self: flex-start;
+      max-width: 95%;
     }
 
     .chat-message.system-info {
@@ -2296,9 +2297,11 @@
     }
 
     .chat-message.assistant .chat-message-avatar {
-      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
-      color: var(--text-inverse);
-      box-shadow: 0 2px 8px rgba(197, 101, 61, 0.3);
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--accent);
+      padding: 0 2px 4px 2px;
+      letter-spacing: 0.03em;
     }
 
     /* ===== 消息气泡 ===== */
@@ -2351,23 +2354,44 @@
       box-shadow: var(--shadow-md);
     }
 
+    /* ===== 结构化消息内容（无气泡包裹） ===== */
+    .chat-message-content {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      max-width: 100%;
+      font-size: 0.875rem;
+      line-height: var(--line-height-relaxed);
+      word-wrap: break-word;
+      color: var(--text-primary);
+    }
+
+    .chat-message-content > .thinking-inline,
+    .chat-message-content > .inline-tool,
+    .chat-message-content > .terminal-tool,
+    .chat-message-content > .diff-tool,
+    .chat-message-content > .tool-use-card {
+      margin: 1px 0;
+    }
+
     /* ===== 消息使用量信息 ===== */
     .message-usage {
-      margin-top: 12px;
-      padding-top: 10px;
-      border-top: 1px dashed var(--border-subtle);
+      margin-top: 8px;
+      padding-top: 6px;
+      border-top: 1px solid var(--border-subtle);
       font-family: var(--font-mono);
-      font-size: 0.6875rem;
-      color: var(--text-tertiary);
+      font-size: 0.625rem;
+      color: var(--text-muted);
       display: flex;
-      gap: 12px;
+      gap: 10px;
       align-items: center;
       flex-wrap: wrap;
+      opacity: 0.5;
     }
 
     .message-usage::before {
-      content: '✦';
-      color: var(--accent-soft);
+      content: '·';
+      color: var(--text-muted);
       font-size: 0.625rem;
     }
 
@@ -2488,9 +2512,9 @@
 
     /* Tool Use Card */
     .tool-use-card {
-      margin: 6px 0;
+      margin: 3px 0;
       border: 1px solid var(--border-subtle);
-      border-radius: var(--radius-sm);
+      border-radius: 8px;
       overflow: hidden;
       width: 100%;
       box-sizing: border-box;
@@ -2498,9 +2522,8 @@
       transition: all 0.3s var(--ease-out-expo);
     }
     .tool-use-card:hover {
-      border-color: rgba(79, 122, 88, 0.3);
-      transform: translateX(4px);
-      box-shadow: -4px 4px 16px rgba(79, 122, 88, 0.08);
+      border-color: rgba(79, 122, 88, 0.25);
+      box-shadow: 0 2px 8px rgba(79, 122, 88, 0.06);
     }
     .tool-use-card.loading {
       border-color: rgba(79, 122, 88, 0.4);
@@ -2515,8 +2538,8 @@
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 10px 12px;
-      background: rgba(79, 122, 88, 0.06);
+      padding: 8px 12px;
+      background: rgba(79, 122, 88, 0.04);
       cursor: pointer;
       font-size: 0.8125rem;
       user-select: none;
@@ -2524,7 +2547,7 @@
       -webkit-tap-highlight-color: transparent;
       touch-action: manipulation;
       transition: all 0.2s var(--ease-out-expo);
-      min-height: 44px;
+      min-height: 36px;
       flex-wrap: nowrap;
     }
     .tool-use-header:hover {
@@ -2543,12 +2566,18 @@
       background: rgba(178, 79, 69, 0.1);
     }
     .tool-use-icon {
-      font-size: 1.1rem;
+      font-size: 0.6875rem;
+      font-family: var(--font-mono);
+      font-weight: 600;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
-      min-width: 20px;
+      min-width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      background: rgba(79, 122, 88, 0.1);
+      color: var(--success);
     }
     .tool-use-spinner {
       display: inline-block;
@@ -2745,22 +2774,22 @@
     .thinking-inline {
       display: flex;
       align-items: baseline;
-      gap: 6px;
-      margin: 8px 0;
-      padding: 6px 10px;
-      border-radius: var(--radius-sm);
-      background: rgba(138, 108, 178, 0.05);
+      gap: 5px;
+      margin: 2px 0;
+      padding: 3px 8px;
+      border-radius: 6px;
+      background: rgba(138, 108, 178, 0.04);
       cursor: pointer;
-      font-size: 0.8125rem;
-      line-height: 1.5;
-      color: rgba(138, 108, 178, 0.7);
+      font-size: 0.75rem;
+      line-height: 1.4;
+      color: rgba(138, 108, 178, 0.55);
       transition: background var(--transition-fast), color var(--transition-fast);
       word-break: break-word;
       overflow-wrap: break-word;
     }
     .thinking-inline:hover {
-      background: rgba(138, 108, 178, 0.1);
-      color: rgba(138, 108, 178, 0.9);
+      background: rgba(138, 108, 178, 0.08);
+      color: rgba(138, 108, 178, 0.8);
     }
     .thinking-inline.expanded {
       color: var(--text-secondary);
@@ -2771,7 +2800,7 @@
     }
     .thinking-inline-icon {
       flex-shrink: 0;
-      font-size: 0.875rem;
+      font-size: 0.625rem;
     }
     .thinking-inline-preview {
       flex: 1;
@@ -2786,42 +2815,42 @@
     }
     .thinking-inline-action {
       flex-shrink: 0;
-      font-size: 0.75rem;
-      color: rgba(138, 108, 178, 0.5);
-      padding: 1px 6px;
+      font-size: 0.625rem;
+      color: rgba(138, 108, 178, 0.4);
+      padding: 0 4px;
       border-radius: 3px;
-      background: rgba(138, 108, 178, 0.1);
+      background: rgba(138, 108, 178, 0.08);
       margin-left: auto;
     }
     .thinking-inline:hover .thinking-inline-action {
-      color: rgba(138, 108, 178, 0.8);
+      color: rgba(138, 108, 178, 0.7);
     }
     .thinking-inline.thinking-pty {
-      background: rgba(138, 108, 178, 0.05);
+      background: rgba(138, 108, 178, 0.03);
     }
 
     /* Streaming thinking: 3-line scrollable area during thinking */
     .thinking-streaming {
       display: flex;
       align-items: flex-start;
-      gap: 6px;
-      margin: 8px 0;
-      padding: 6px 10px;
-      border-radius: var(--radius-sm);
-      background: rgba(138, 108, 178, 0.06);
+      gap: 5px;
+      margin: 2px 0;
+      padding: 3px 8px;
+      border-radius: 6px;
+      background: rgba(138, 108, 178, 0.04);
       cursor: default;
-      font-size: 0.8125rem;
-      line-height: 1.5;
-      color: rgba(138, 108, 178, 0.7);
+      font-size: 0.75rem;
+      line-height: 1.4;
+      color: rgba(138, 108, 178, 0.55);
     }
     .thinking-streaming-inner {
       display: flex;
       align-items: flex-start;
-      gap: 6px;
+      gap: 5px;
       width: 100%;
     }
     .thinking-streaming-icon {
-      font-size: 0.875rem;
+      font-size: 0.625rem;
       flex-shrink: 0;
       margin-top: 1px;
     }
@@ -2851,33 +2880,38 @@
     .inline-tool {
       display: flex;
       flex-direction: column;
-      margin: 4px 0;
-      border-radius: var(--radius-sm);
+      margin: 1px 0;
+      border-radius: 6px;
       cursor: pointer;
       transition: background var(--transition-fast);
     }
     .inline-tool-row {
       display: flex;
       align-items: center;
-      gap: 6px;
-      padding: 4px 8px;
-      font-size: 0.8125rem;
+      gap: 5px;
+      padding: 2px 6px;
+      font-size: 0.6875rem;
       color: var(--text-muted);
       font-family: var(--font-mono);
-      line-height: 1.5;
+      line-height: 1.4;
+      opacity: 0.7;
     }
     .inline-tool:hover .inline-tool-row {
-      background: rgba(0, 0, 0, 0.03);
-      border-radius: var(--radius-sm);
+      opacity: 1;
+      background: rgba(0, 0, 0, 0.02);
+      border-radius: 6px;
     }
     .inline-tool-status {
-      font-size: 0.75rem;
+      font-size: 0.625rem;
       flex-shrink: 0;
     }
     .inline-tool-icon {
       flex-shrink: 0;
       color: var(--text-muted);
-      margin: 0 2px;
+      margin: 0 1px;
+      opacity: 0.6;
+      width: 12px;
+      height: 12px;
     }
     .inline-tool-title {
       flex: 1;
@@ -2885,13 +2919,13 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: var(--text-secondary);
+      color: var(--text-muted);
     }
     .inline-tool-meta {
       flex-shrink: 0;
-      font-size: 0.7rem;
+      font-size: 0.625rem;
       color: var(--text-muted);
-      opacity: 0.7;
+      opacity: 0.5;
       max-width: 200px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -2958,9 +2992,9 @@
 
     /* ── Inline Terminal Display (Bash) ── */
     .inline-terminal {
-      margin: 6px 0;
+      margin: 3px 0;
       border: 1px solid rgba(255, 255, 255, 0.06);
-      border-radius: var(--radius-sm);
+      border-radius: 8px;
       background: #1a1714;
       overflow: hidden;
     }
@@ -2968,12 +3002,15 @@
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 6px 10px;
+      padding: 5px 10px;
       background: rgba(255, 255, 255, 0.03);
       font-size: 0.75rem;
       cursor: pointer;
       user-select: none;
     }
+    .term-header:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
     .term-status-dot {
       width: 6px;
       height: 6px;
@@ -2988,6 +3025,22 @@
       0%, 100% { opacity: 1; }
       50% { opacity: 0.4; }
     }
+    .term-cmd-preview {
+      flex: 1;
+      min-width: 0;
+      font-family: var(--font-mono);
+      font-size: 0.6875rem;
+      color: rgba(255, 255, 255, 0.45);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .term-cmd-preview .term-prompt {
+      color: rgba(110, 224, 154, 0.6);
+      font-weight: 500;
+      margin-right: 4px;
+      font-size: 0.6875rem;
+    }
     .term-title {
       flex: 1;
       font-family: var(--font-mono);
@@ -2995,8 +3048,8 @@
       color: rgba(255, 255, 255, 0.3);
     }
     .term-toggle-icon {
-      font-size: 0.625rem;
-      color: rgba(255, 255, 255, 0.3);
+      font-size: 0.5rem;
+      color: rgba(255, 255, 255, 0.25);
       transition: transform var(--transition-fast);
     }
     .term-body {
@@ -3040,9 +3093,9 @@
 
     /* ── Inline Diff Display (Edit, Write, MultiEdit) ── */
     .inline-diff {
-      margin: 6px 0;
-      border: 1px solid rgba(0, 0, 0, 0.08);
-      border-radius: var(--radius-sm);
+      margin: 3px 0;
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      border-radius: 8px;
       overflow: hidden;
       background: var(--bg-secondary);
     }
@@ -3055,8 +3108,7 @@
       font-size: 0.75rem;
     }
     .diff-file-icon {
-      flex-shrink: 0;
-      font-size: 0.875rem;
+      display: none;
     }
     .diff-file-name {
       font-family: var(--font-mono);
@@ -5480,7 +5532,7 @@
       .btn-sm { min-height: 32px; }
 
       .chat-message-bubble { padding: 8px 10px; font-size: 0.75rem; }
-      .chat-message-avatar { width: 24px; height: 24px; font-size: 11px; }
+      .chat-message-avatar { font-size: 0.6875rem; }
 
       /* 模态框移动端优化 */
       .modal-backdrop {

package/dist/web-ui/index.js

@@ -37,7 +37,7 @@ ${cssStyles}
   <div id="app"></div>
 ${scriptOpen} src="/vendor/xterm/lib/xterm.js">${scriptClose}
 ${scriptOpen} src="/vendor/xterm-addon-fit/lib/addon-fit.js">${scriptClose}
-${scriptOpen} src="/vendor/xterm-addon-serialize/lib/xterm-addon-serialize.js">${scriptClose}
+${scriptOpen} src="/vendor/xterm-addon-serialize/lib/addon-serialize.js">${scriptClose}
 ${scriptOpen}>
 ${scriptContent}
 ${scriptClose}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@co0ontty/wand",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "A web terminal for local CLI tools like Claude.",
   "type": "module",
   "bin": {
@@ -35,12 +35,12 @@
   "dependencies": {
     "@types/cookie": "^0.6.0",
     "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-serialize": "^0.14.0",
+    "@xterm/xterm": "^5.5.0",
     "express": "^4.21.2",
     "node-pty": "^1.1.0",
     "puppeteer": "^24.40.0",
-    "ws": "^8.19.0",
-    "xterm": "^5.3.0",
-    "xterm-addon-serialize": "^0.11.0"
+    "ws": "^8.19.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",