@co0ontty/wand 1.5.1 → 1.5.4

package/README.md

@@ -1,22 +1,18 @@
 # wand
 
-通过浏览器访问本地终端，支持 Claude 等命令行工具。
+通过浏览器远程访问和管理本地 CLI 工具的 Web 控制台。专为 Claude Code 设计，支持终端和结构化对话双视图、会话持久化与恢复、权限管控、文件浏览等功能。
 
-## 功能
+## 安装
 
-- Web 终端 / Chat 模式双视图
-- 会话持久化与恢复
-- Claude Code 集成
-- 文件浏览器
-- HTTPS 安全连接（可选，配置 `https: true` 启用）
+### 一键安装
 
-## 一键安装
+自动检测并安装 Node.js（需要 v22+），然后安装 wand：
 
 ```bash
 bash <(curl -Ls https://raw.githubusercontent.com/co0ontty/wand/master/install.sh)
 ```
 
-## 手动安装
+### 手动安装
 
 ```bash
 npm install -g @co0ontty/wand
@@ -24,16 +20,73 @@ wand init
 wand web
 ```
 
-配置文件：`~/.wand/config.json`
+安装完成后打开浏览器访问终端中提示的地址即可。
+
+## 配置
+
+配置文件位于 `~/.wand/config.json`，首次 `wand init` 时自动生成。
+
+```bash
+wand config:path           # 查看配置文件路径
+wand config:show           # 查看当前配置
+wand config:set host 0.0.0.0  # 修改配置项
+wand config:set port 9443
+```
+
+常用配置项：
+
+| 字段 | 默认值 | 说明 |
+|------|--------|------|
+| `host` | `127.0.0.1` | 监听地址，`0.0.0.0` 允许远程访问 |
+| `port` | `8443` | 监听端口 |
+| `https` | `false` | 启用 HTTPS（自签证书自动生成） |
+| `password` | (随机生成) | 登录密码 |
+| `replyLanguage` | `""` | Claude 回复语言偏好 |
+
+## 功能
+
+- **双视图模式** — 终端原始输出和结构化对话视图可随时切换
+- **会话管理** — 创建、归档、恢复会话；支持从 Claude 原生历史记录恢复
+- **权限控制** — 可视化权限提示，支持逐次确认、单次批准、本轮记忆等策略
+- **文件浏览器** — 内置路径浏览、搜索和收藏功能
+- **多种运行模式** — full-access / default / auto-edit 等 Claude 运行模式
+- **PWA 支持** — 可添加到主屏幕作为独立应用使用
+- **HTTPS** — 可选自签证书，适合远程或移动端访问
 
 ## 开发
 
 ```bash
-npm install
-npm run build
-npm run dev
+npm install                # 安装依赖
+npm run dev                # 从源码直接启动开发服务器
+npm run check              # TypeScript 类型检查
+npm run build              # 编译 + 复制静态资源到 dist/
+```
+
+隔离测试环境（不影响生产实例）：
+
+```bash
+npm run dev -- -c /tmp/wand-test/config.json
 ```
 
+## 项目结构
+
+```
+src/
+  cli.ts                    # CLI 入口，解析命令和参数
+  server.ts                 # Express 服务器、REST API、WebSocket
+  server-session-routes.ts  # 会话/恢复/历史相关路由
+  process-manager.ts        # PTY 会话编排、输入输出路由、权限处理
+  claude-pty-bridge.ts      # PTY 输出解析为结构化对话数据
+  storage.ts                # SQLite 持久化
+  config.ts                 # 配置加载与合并
+  session-lifecycle.ts      # 会话状态机（idle/thinking/waiting/archived）
+  session-logger.ts         # 文件日志 ~/.wand/sessions/
+  resume-policy.ts          # Claude 历史绑定与恢复策略
+  web-ui/                   # 服务端渲染的前端 HTML/CSS/JS
+```
+
+数据存储在 `~/.wand/` 下：`config.json`（配置）、`wand.db`（SQLite）、`sessions/`（日志）。
+
 ## License
 
-MIT
+MIT

package/dist/server.js

@@ -604,55 +604,6 @@ export async function startServer(config, configPath) {
             { path: "/", name: "根目录", icon: "📁" },
         ]);
     });
-    app.get("/api/favorite-paths", (_req, res) => {
-        const stored = storage.getConfigValue("favorite_paths");
-        const favorites = parseStoredPathList(stored);
-        res.json(favorites.filter((f) => !isBlockedFolderPath(normalizeFolderPath(f.path))));
-    });
-    app.post("/api/favorite-paths", (req, res) => {
-        const { path: favPath, name, icon } = req.body;
-        if (!favPath) {
-            res.status(400).json({ error: "路径不能为空。" });
-            return;
-        }
-        const resolvedFavoritePath = normalizeFolderPath(favPath);
-        if (isBlockedFolderPath(resolvedFavoritePath)) {
-            res.status(403).json({ error: "访问被拒绝：无法收藏系统敏感目录。" });
-            return;
-        }
-        const stored = storage.getConfigValue("favorite_paths");
-        const favorites = parseStoredPathList(stored);
-        if (favorites.some((f) => normalizeFolderPath(f.path) === resolvedFavoritePath)) {
-            res.status(400).json({ error: "该路径已在收藏列表中。" });
-            return;
-        }
-        const newFavorite = {
-            path: resolvedFavoritePath,
-            name: name || path.basename(resolvedFavoritePath),
-            icon: icon || "⭐",
-            addedAt: new Date().toISOString(),
-        };
-        favorites.push(newFavorite);
-        storage.setConfigValue("favorite_paths", JSON.stringify(favorites));
-        res.status(201).json(newFavorite);
-    });
-    app.delete("/api/favorite-paths", (req, res) => {
-        const { path: delPath } = req.body;
-        if (!delPath) {
-            res.status(400).json({ error: "路径不能为空。" });
-            return;
-        }
-        const stored = storage.getConfigValue("favorite_paths");
-        const favorites = parseStoredPathList(stored);
-        const index = favorites.findIndex((f) => f.path === delPath);
-        if (index === -1) {
-            res.status(404).json({ error: "未找到该收藏路径。" });
-            return;
-        }
-        favorites.splice(index, 1);
-        storage.setConfigValue("favorite_paths", JSON.stringify(favorites));
-        res.json({ ok: true });
-    });
     app.get("/api/recent-paths", (_req, res) => {
         const stored = storage.getConfigValue("recent_paths");
         const recent = parseStoredPathList(stored);

package/dist/structured-session-manager.js

@@ -627,6 +627,23 @@ export class StructuredSessionManager {
                     sessionId,
                     data: { status: finished.status, exitCode: 0, messages: finished.messages, sessionKind: "structured", structuredState: finished.structuredState },
                 });
+                // Auto-continue after plan mode exit: when Claude calls ExitPlanMode,
+                // the `-p` process exits because stdin is "ignore" and it cannot get
+                // user confirmation.  Detect this and automatically resume execution
+                // so the plan is actually carried out.
+                const lastToolUse = [...turnState.blocks].reverse().find((b) => b.type === "tool_use");
+                if (lastToolUse && lastToolUse.name === "ExitPlanMode" && turnState.sessionId) {
+                    console.log("[WAND] ExitPlanMode detected – auto-continuing plan execution for session:", sessionId);
+                    resolve();
+                    // Schedule the continuation outside the current promise chain so it
+                    // does not block the close handler.
+                    setImmediate(() => {
+                        this.sendMessage(sessionId, "Plan approved. Proceed with the implementation.").catch((err) => {
+                            console.error("[WAND] Auto-continue after ExitPlanMode failed:", err);
+                        });
+                    });
+                    return;
+                }
                 resolve();
             });
         });

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

@@ -100,7 +100,7 @@
         cwdValue: "",
         modeValue: "managed",
         chatMode: "managed",
-        sessionCreateKind: "pty",
+        sessionCreateKind: "structured",
         sessionTool: "claude",
         preferredCommand: "claude",
         structuredRunner: "claude-cli-print",
@@ -1030,14 +1030,13 @@
 
       function selectAllVisibleItems() {
         var nextSessionIds = {};
-        state.sessions.forEach(function(session) {
+        state.sessions.filter(function(session) {
+          return !session.resumedToSessionId;
+        }).forEach(function(session) {
           nextSessionIds[session.id] = true;
         });
-        var cutoff = Date.now() - 24 * 60 * 60 * 1000;
         var nextHistoryIds = {};
-        getVisibleClaudeHistorySessions().filter(function(session) {
-          return !session.timestamp || new Date(session.timestamp).getTime() <= cutoff;
-        }).forEach(function(session) {
+        getVisibleClaudeHistorySessions().forEach(function(session) {
           nextHistoryIds[session.claudeSessionId] = true;
         });
         state.selectedSessionIds = nextSessionIds;
@@ -1815,7 +1814,7 @@
           { id: "full-access", label: "全权限",   desc: "自动确认权限" },
           { id: "auto-edit",   label: "自动编辑", desc: "自动确认修改" },
           { id: "default",     label: "标准",     desc: "逐步确认操作" },
-          { id: "native",      label: "原生",     desc: "结构化单轮输出" }
+          { id: "native",      label: "原生",     desc: "原生结构化输出" }
         ];
         return modes.map(function(m) {
           var active = m.id === selectedMode ? " active" : "";
@@ -1828,8 +1827,8 @@
 
       function renderSessionKindOptions(selectedKind) {
         var kinds = [
-          { id: "pty", label: "PTY", desc: "交互式终端会话" },
-          { id: "structured", label: "Structured", desc: "单轮结构化输出" }
+          { id: "structured", label: "结构化", desc: "智能对话模式" },
+          { id: "pty", label: "PTY", desc: "交互式终端会话" }
         ];
         return kinds.map(function(kind) {
           var active = kind.id === selectedKind ? " active" : "";
@@ -1842,15 +1841,15 @@
 
       function getSessionKindHint(kind) {
         if (kind === "structured") {
-          return "直接使用 claude -p 获取结构化单轮结果。";
+          return "结构化聊天界面，支持多轮对话、流式输出和工具调用展示。";
         }
-        return "默认 PTY 会话，支持持续交互、终端视图和权限流。";
+        return "原始 PTY 终端会话，支持持续交互、终端视图和权限流。";
       }
 
       function renderSessionModal() {
         var modalTool = getPreferredTool();
         var modalMode = getSafeModeForTool(modalTool, state.modeValue || state.chatMode || "default");
-        var sessionKind = state.sessionCreateKind || "pty";
+        var sessionKind = state.sessionCreateKind || "structured";
         return '<section id="session-modal" class="modal-backdrop hidden">' +
           '<div class="modal session-modal">' +
             '<div class="modal-header">' +
@@ -2349,69 +2348,58 @@
           }
         }
 
-        // Helper functions for recent paths
-        function getRecentPaths() {
-          try {
-            var saved = localStorage.getItem("wand-recent-paths");
-            return saved ? JSON.parse(saved) : [];
-          } catch (e) {
-            return [];
-          }
+        // Helper functions for recent paths (single source: backend API)
+        function fetchRecentPaths(callback) {
+          fetch("/api/recent-paths", { credentials: "same-origin" })
+            .then(function(res) { return res.json(); })
+            .then(function(items) { callback(items || []); })
+            .catch(function() { callback([]); });
         }
 
         function addRecentPath(path) {
-          var recent = getRecentPaths();
-          // Remove if already exists
-          recent = recent.filter(function(p) { return p !== path; });
-          // Add to front
-          recent.unshift(path);
-          // Keep only last 5
-          recent = recent.slice(0, 5);
-          try {
-            localStorage.setItem("wand-recent-paths", JSON.stringify(recent));
-          } catch (e) {
-            // Ignore localStorage errors
-          }
+          return fetch("/api/recent-paths", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            credentials: "same-origin",
+            body: JSON.stringify({ path: path })
+          }).catch(function() {});
         }
 
-        function renderRecentPaths() {
-          var recent = getRecentPaths();
-          if (recent.length === 0) return "";
-
+        function renderRecentPathsHtml(items) {
+          if (!items.length) return "";
           var html = '<div class="folder-recent-section">' +
             '<div class="folder-recent-title">最近使用</div>';
-
-          recent.forEach(function(path) {
-            html += '<div class="folder-recent-item" data-path="' + escapeHtml(path) + '">' +
-              '<span class="folder-recent-item-icon">📁</span>' +
-              '<span class="folder-recent-item-path">' + escapeHtml(path) + '</span>' +
+          items.forEach(function(item) {
+            var p = item.path || item;
+            html += '<div class="folder-recent-item" data-path="' + escapeHtml(p) + '">' +
+              '<span class="folder-recent-item-path">' + escapeHtml(p) + '</span>' +
             '</div>';
           });
-
           html += '</div>';
           return html;
         }
 
         function showRecentPathsDropdown() {
           if (!folderPickerDropdown) return;
-          var recentHtml = renderRecentPaths();
-          if (recentHtml) {
-            folderPickerDropdown.innerHTML = recentHtml;
-            folderPickerDropdown.classList.remove("hidden");
-            // Add click handlers for recent paths
-            folderPickerDropdown.querySelectorAll(".folder-recent-item").forEach(function(item) {
-              item.addEventListener("click", function() {
-                var path = this.dataset.path;
-                if (folderPickerInput) {
-                  folderPickerInput.value = path;
-                  saveWorkingDir(path);
-                  loadFolderSuggestions(path);
-                }
+          fetchRecentPaths(function(items) {
+            var recentHtml = renderRecentPathsHtml(items);
+            if (recentHtml) {
+              folderPickerDropdown.innerHTML = recentHtml;
+              folderPickerDropdown.classList.remove("hidden");
+              folderPickerDropdown.querySelectorAll(".folder-recent-item").forEach(function(item) {
+                item.addEventListener("click", function() {
+                  var path = this.dataset.path;
+                  if (folderPickerInput) {
+                    folderPickerInput.value = path;
+                    saveWorkingDir(path);
+                    loadFolderSuggestions(path);
+                  }
+                });
               });
-            });
-          } else {
-            hideFolderDropdown();
-          }
+            } else {
+              hideFolderDropdown();
+            }
+          });
         }
 
         // Working directory indicator click handler for active sessions
@@ -2472,7 +2460,6 @@
                     var path = entry.fullPath;
                     folderPickerInput.value = path;
                     saveWorkingDir(path);
-                    addRecentPath(path);
                     loadFolderSuggestions(path);
                     break;
                   }
@@ -3462,7 +3449,7 @@
           return "保留交互式会话，同时更偏向直接编辑代码。";
         }
         if (mode === "native") {
-          return "按单轮消息调用 Claude 原生输出，适合快速问答或一次性生成。";
+          return "调用 Claude 原生 API 输出，适合快速问答或一次性生成。";
         }
         if (mode === "managed") {
           return "AI 自动完成所有工作，无需中途确认，适合有明确目标的任务。";
@@ -3612,7 +3599,7 @@
         var modeHint = document.getElementById("mode-description");
         var kindHint = document.getElementById("session-kind-description");
         var tool = "claude";
-        var sessionKind = state.sessionCreateKind || "pty";
+        var sessionKind = state.sessionCreateKind || "structured";
 
         state.sessionTool = tool;
         state.modeValue = getSafeModeForTool(tool, state.modeValue || state.chatMode || "default");
@@ -4007,7 +3994,7 @@
           modal.classList.remove("hidden");
           lastFocusedElement = document.activeElement;
           state.sessionTool = getPreferredTool();
-          state.sessionCreateKind = "pty";
+          state.sessionCreateKind = "structured";
           state.modeValue = getSafeModeForTool(state.sessionTool, state.modeValue || state.chatMode);
           syncSessionModalUI();
           loadRecentPathBubbles();
@@ -4535,7 +4522,7 @@
         var cwdEl = document.getElementById("cwd");
         var errorEl = document.getElementById("modal-error");
         var command = getPreferredTool();
-        var sessionKind = state.sessionCreateKind || "pty";
+        var sessionKind = state.sessionCreateKind || "structured";
 
         hideError(errorEl);
 
@@ -4560,6 +4547,7 @@
         syncComposerModeSelect();
         return createStructuredSession(undefined, cwd, mode)
           .then(function(data) {
+            saveWorkingDir(cwd);
             closeSessionModal();
             closeSessionsDrawer();
             return data;
@@ -4597,6 +4585,7 @@
           state.selectedId = data.id;
           console.log("[WAND] runPtyCommandFromModal created session:", data.id, "sessionKind:", data.sessionKind, "runner:", data.runner);
           persistSelectedId();
+          saveWorkingDir(cwd);
           state.drafts[data.id] = "";
           resetChatRenderCache();
           closeSessionModal();
@@ -4655,18 +4644,14 @@
       function loadBlankChatCwdDropdown(dropdown) {
         var defaultCwd = getConfigCwd();
         dropdown.innerHTML = '<div class="blank-chat-cwd-loading">加载中...</div>';
-        fetch("/api/recent-paths", { credentials: "same-origin" })
-          .then(function(res) { return res.json(); })
-          .then(function(items) {
+        fetchRecentPaths(function(items) {
             var html = "";
-            // Default directory always first
             var currentDir = state.workingDir || defaultCwd;
             html += '<div class="blank-chat-cwd-item' + (currentDir === defaultCwd ? " active" : "") + '" data-path="' + escapeHtml(defaultCwd) + '">' +
               '<span class="blank-chat-cwd-item-label">默认</span>' +
               '<span class="blank-chat-cwd-item-path">' + escapeHtml(defaultCwd) + '</span>' +
             '</div>';
-            // Recent paths (exclude default to avoid duplicate)
-            if (items && items.length) {
+            if (items.length) {
               var seen = {};
               seen[defaultCwd] = true;
               items.forEach(function(item) {
@@ -4689,26 +4674,18 @@
                 dropdown.classList.add("hidden");
                 var arrow = document.getElementById("blank-chat-cwd-arrow");
                 if (arrow) arrow.textContent = "▼";
-                // Update folder picker input if exists
                 var fpInput = document.getElementById("folder-picker-input");
                 if (fpInput) fpInput.value = path;
               });
             });
-          })
-          .catch(function() {
-            dropdown.innerHTML = '<div class="blank-chat-cwd-item" data-path="' + escapeHtml(defaultCwd) + '">' +
-              '<span class="blank-chat-cwd-item-path">' + escapeHtml(defaultCwd) + '</span>' +
-            '</div>';
-          });
+        });
       }
 
       function loadRecentPathBubbles() {
         var container = document.getElementById("recent-paths-bubbles");
         if (!container) return;
-        fetch("/api/recent-paths", { credentials: "same-origin" })
-          .then(function(res) { return res.json(); })
-          .then(function(items) {
-            if (!items || !items.length) {
+        fetchRecentPaths(function(items) {
+            if (!items.length) {
               container.innerHTML = "";
               return;
             }
@@ -4726,10 +4703,7 @@
                 }
               });
             });
-          })
-          .catch(function() {
-            if (container) container.innerHTML = "";
-          });
+        });
       }
 
       function schedulePathSuggestions() {
@@ -8040,12 +8014,12 @@
         function fullRenderChat() {
           // Extract system info from PTY output
           var systemInfo = extractPtySystemInfo(selectedSession.output, messages);
-          
+
           // Build HTML with system info cards interleaved
           var html = '';
           var reversedMessages = messages.slice().reverse();
           var msgCount = messages.length;
-          
+
           for (var i = 0; i < reversedMessages.length; i++) {
             var msg = reversedMessages[i];
             var originalIndex = msgCount - 1 - i; // Original index in messages array
@@ -8070,7 +8044,7 @@
             }
             
             // Render message
-            html += renderChatMessage(msg);
+            html += renderChatMessage(msg, roundUsageByIndex[originalIndex] || null);
           }
           
           chatMessages.innerHTML = html;
@@ -8107,6 +8081,47 @@
           });
         }
 
+        // Pre-compute per-round cumulative usage.
+        // A "round" starts at a user message and includes all subsequent assistant turns
+        // until the next user message. Only the last assistant in each round shows the total.
+        var roundUsageByIndex = {};
+        (function() {
+          var acc = { inputTokens: 0, outputTokens: 0, cacheReadInputTokens: 0, totalCostUsd: 0 };
+          var lastAssistantIdx = -1;
+          for (var mi = 0; mi < messages.length; mi++) {
+            var m = messages[mi];
+            if (m.role === "user") {
+              if (lastAssistantIdx >= 0 && (acc.inputTokens > 0 || acc.outputTokens > 0 || acc.totalCostUsd > 0)) {
+                roundUsageByIndex[lastAssistantIdx] = {
+                  inputTokens: acc.inputTokens,
+                  outputTokens: acc.outputTokens,
+                  cacheReadInputTokens: acc.cacheReadInputTokens,
+                  totalCostUsd: acc.totalCostUsd
+                };
+              }
+              acc = { inputTokens: 0, outputTokens: 0, cacheReadInputTokens: 0, totalCostUsd: 0 };
+              lastAssistantIdx = -1;
+            } else if (m.role === "assistant" && m.usage) {
+              var u = m.usage;
+              acc.inputTokens += (u.inputTokens || 0);
+              acc.outputTokens += (u.outputTokens || 0);
+              acc.cacheReadInputTokens += (u.cacheReadInputTokens || 0);
+              acc.totalCostUsd += (u.totalCostUsd || 0);
+              lastAssistantIdx = mi;
+            } else if (m.role === "assistant") {
+              lastAssistantIdx = mi;
+            }
+          }
+          if (lastAssistantIdx >= 0 && (acc.inputTokens > 0 || acc.outputTokens > 0 || acc.totalCostUsd > 0)) {
+            roundUsageByIndex[lastAssistantIdx] = {
+              inputTokens: acc.inputTokens,
+              outputTokens: acc.outputTokens,
+              cacheReadInputTokens: acc.cacheReadInputTokens,
+              totalCostUsd: acc.totalCostUsd
+            };
+          }
+        })();
+
         if (needsFullRender) {
           fullRenderChat();
         } else if (msgCount > existingCount) {
@@ -8118,7 +8133,8 @@
           var insertedEls = [];
           for (var i = 0; i < newMessages.length; i++) {
             var div = document.createElement("div");
-            div.innerHTML = renderChatMessage(newMessages[i]);
+            var nmOrigIdx = existingCount + (newMessages.length - 1 - i);
+            div.innerHTML = renderChatMessage(newMessages[i], roundUsageByIndex[nmOrigIdx] || null);
             var el = div.firstElementChild;
             if (el) {
               el.classList.add("animate-in");
@@ -8143,7 +8159,8 @@
           for (var mi = 0; mi < reversedMessages.length && mi < existingEls.length; mi++) {
             var currentEl = existingEls[mi];
             var tmpWrap = document.createElement("div");
-            tmpWrap.innerHTML = renderChatMessage(reversedMessages[mi]);
+            var srOrigIdx = reversedMessages.length - 1 - mi;
+            tmpWrap.innerHTML = renderChatMessage(reversedMessages[mi], roundUsageByIndex[srOrigIdx] || null);
             var replacementEl = tmpWrap.firstElementChild;
             if (!replacementEl) continue;
             if (currentEl.innerHTML !== replacementEl.innerHTML || currentEl.className !== replacementEl.className) {
@@ -8859,7 +8876,7 @@
         return messages;
       }
 
-      function renderChatMessage(msg) {
+      function renderChatMessage(msg, roundUsage) {
         // Thinking card (deep thought) — from PTY parsing
         if (msg.role === "thinking") {
           return '<div class="chat-message thinking">' +
@@ -8883,7 +8900,7 @@
 
         // Structured content blocks (from JSON chat mode)
         if (Array.isArray(msg.content)) {
-          return renderStructuredMessage(msg);
+          return renderStructuredMessage(msg, roundUsage);
         }
 
         // Legacy string content (from PTY parsing)
@@ -8938,7 +8955,7 @@
         return '<div class="structured-tool-hint">已自动恢复一次 ' + escapeHtml(getToolDisplayName(toolName)) + ' 参数问题</div>';
       }
 
-      function renderStructuredMessage(msg) {
+      function renderStructuredMessage(msg, roundUsage) {
         var role = msg.role;
         var avatar = role === "assistant" ? '<div class="chat-message-avatar">赛博虎妞</div>' : "";
 
@@ -8972,13 +8989,13 @@
         }
 
         var usageHtml = "";
-        if (role === "assistant" && msg.usage) {
-          var u = msg.usage;
+        if (role === "assistant" && roundUsage) {
+          var u = roundUsage;
           var parts = [];
-          if (u.inputTokens !== undefined) parts.push("输入 " + u.inputTokens);
-          if (u.outputTokens !== undefined) parts.push("输出 " + u.outputTokens);
-          if (u.cacheReadInputTokens !== undefined && u.cacheReadInputTokens > 0) parts.push("缓存 " + u.cacheReadInputTokens);
-          if (u.totalCostUsd !== undefined) parts.push("$" + u.totalCostUsd.toFixed(4));
+          if (u.inputTokens > 0) parts.push("输入 " + u.inputTokens);
+          if (u.outputTokens > 0) parts.push("输出 " + u.outputTokens);
+          if (u.cacheReadInputTokens > 0) parts.push("缓存 " + u.cacheReadInputTokens);
+          if (u.totalCostUsd > 0) parts.push("$" + u.totalCostUsd.toFixed(4));
           if (parts.length > 0) {
             usageHtml = '<div class="message-usage">' + parts.join(" · ") + '</div>';
           }

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

@@ -7525,29 +7525,29 @@
     .structured-status-bar {
       display: flex;
       align-items: center;
-      gap: 10px;
-      margin: 8px 0 4px;
-      padding: 8px 12px;
+      gap: 8px;
+      margin: 0;
+      padding: 4px 10px;
       border-radius: var(--radius-sm);
-      background: rgba(var(--accent-rgb, 99, 102, 241), 0.06);
-      border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.12);
-      font-size: 0.75rem;
-      color: var(--text-secondary);
+      background: transparent;
+      border: none;
+      font-size: 0.6875rem;
+      color: var(--text-muted);
       transition: all 0.3s ease;
       overflow: hidden;
     }
 
     .structured-status-bar .status-bar-label {
       flex-shrink: 0;
-      font-weight: 600;
-      color: var(--accent-soft);
+      font-weight: 500;
+      color: var(--text-muted);
     }
 
     .structured-status-bar .status-bar-track {
       flex: 1;
-      height: 3px;
-      border-radius: 2px;
-      background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
+      height: 2px;
+      border-radius: 1px;
+      background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
       overflow: hidden;
       position: relative;
     }
@@ -7556,9 +7556,9 @@
       position: absolute;
       top: 0;
       left: 0;
-      width: 40%;
+      width: 30%;
       height: 100%;
-      border-radius: 2px;
+      border-radius: 1px;
       background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
       animation: marqueeScroll 1.5s ease-in-out infinite;
     }
@@ -7572,14 +7572,14 @@
       flex-shrink: 0;
       font-variant-numeric: tabular-nums;
       font-family: var(--font-mono);
-      font-size: 0.6875rem;
+      font-size: 0.625rem;
       color: var(--text-muted);
     }
 
     /* 完成态 */
     .structured-status-bar.completed {
-      background: rgba(79, 122, 88, 0.06);
-      border-color: rgba(79, 122, 88, 0.15);
+      background: transparent;
+      border-color: transparent;
       animation: statusBarFadeOut 2s ease-out 1s forwards;
     }
 
@@ -7600,9 +7600,9 @@
     }
 
     @keyframes statusBarFadeOut {
-      0%   { opacity: 1; max-height: 50px; margin: 8px 0 4px; padding: 8px 12px; }
-      70%  { opacity: 0; max-height: 50px; margin: 8px 0 4px; padding: 8px 12px; }
-      100% { opacity: 0; max-height: 0; margin: 0; padding: 0 12px; border-width: 0; }
+      0%   { opacity: 1; max-height: 30px; margin: 0; padding: 4px 10px; }
+      70%  { opacity: 0; max-height: 30px; margin: 0; padding: 4px 10px; }
+      100% { opacity: 0; max-height: 0; margin: 0; padding: 0 10px; border-width: 0; }
     }
 
     /* 结束标记 */

package/package.json

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