@co0ontty/wand 1.21.11 → 1.21.12

package/dist/server.js

@@ -13,6 +13,7 @@ import { WebSocketServer } from "ws";
 import { ensureAvatarSeed, getAvatarSvg } from "./avatar.js";
 import { createSession, revokeSession, setAuthStorage, validateSession } from "./auth.js";
 import { ensureCertificates } from "./cert.js";
+import { buildChildEnv } from "./env-utils.js";
 import { isExecutionMode, PREFERENCE_KEYS, resolveConfigDir, saveConfig, writePreferenceToStorage, } from "./config.js";
 import { getCachedModels, refreshModels } from "./models.js";
 import { ProcessManager } from "./process-manager.js";
@@ -804,6 +805,45 @@ export async function startServer(config, configPath) {
             github: ghApk ? { fileName: ghApk.fileName, version: ghApk.version, size: ghApk.size, downloadUrl: ghApk.downloadUrl } : null,
         });
     });
+    // 返回当前 inheritEnv 配置下，wand 启动 PTY / 结构化子进程时实际会传给
+    // claude / codex 的环境变量集合。值会按下面的规则做掩码：
+    //   - 名字里含 KEY/TOKEN/SECRET/PASSWORD/AUTH/CREDENTIAL/COOKIE/SESSION 的视为敏感
+    //   - 敏感值默认显示为 ***（保留长度提示），可通过 ?reveal=1 取消掩码
+    // 即使开启 reveal，仍只对已认证用户可见（路由由全局 requireAuth 保护）。
+    app.get("/api/settings/env-preview", (req, res) => {
+        const inheritEnv = config.inheritEnv !== false;
+        // 复用与 process-manager / structured-session-manager 相同的组装逻辑，
+        // 这样 UI 上看到的就是真正会被注入到子进程的那一份环境。
+        const env = buildChildEnv(inheritEnv, {
+            // PTY runner 还会注入 WAND_* 用于 mode 协调，这里也展示出来便于排查。
+            WAND_MODE: "<runtime>",
+            WAND_AUTO_CONFIRM: "<runtime>",
+            WAND_AUTO_EDIT: "<runtime>",
+        });
+        const reveal = req.query.reveal === "1" || req.query.reveal === "true";
+        const SENSITIVE_PATTERN = /(KEY|TOKEN|SECRET|PASSWORD|AUTH|CREDENTIAL|COOKIE|SESSION)/i;
+        const entries = Object.keys(env)
+            .sort()
+            .map((name) => {
+            const raw = env[name] ?? "";
+            const sensitive = SENSITIVE_PATTERN.test(name);
+            const masked = sensitive && !reveal;
+            // WAND_* 占位值不算敏感，保持原样。
+            const isPlaceholder = raw.startsWith("<") && raw.endsWith(">");
+            return {
+                name,
+                value: masked && !isPlaceholder ? "***" : raw,
+                length: raw.length,
+                sensitive,
+            };
+        });
+        res.json({
+            inheritEnv,
+            total: entries.length,
+            reveal,
+            entries,
+        });
+    });
     app.get("/api/app-connect-code", requireAuth, (req, res) => {
         const dbPassword = storage.getPassword();
         const effectivePassword = dbPassword ?? config.password;

package/dist/structured-session-manager.js

@@ -1536,9 +1536,13 @@ export class StructuredSessionManager {
                 : `Please respond in ${language}. Use ${language} for all your explanations, comments, and conversational text.`);
         }
         const sdkClaudeBinary = resolveSdkClaudeBinary();
+        // SDK 默认会把整个 process.env 透传给 claude 子进程；这里显式按 inheritEnv 配置组装，
+        // 否则关闭"继承环境变量"开关时 SDK 路径会被静默忽略。
+        const sdkEnv = buildChildEnv(this.config.inheritEnv !== false);
         const sdkOptions = {
             cwd: session.cwd,
             abortController,
+            env: sdkEnv,
             permissionMode,
             ...(permissionMode === "bypassPermissions" ? { allowDangerouslySkipPermissions: true } : {}),
             ...(allowedToolsForRoot ? { allowedTools: allowedToolsForRoot } : {}),

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

@@ -2169,10 +2169,13 @@
                     '<label class="settings-toggle-title" for="cfg-inherit-env">继承环境变量</label>' +
                     '<span class="settings-toggle-desc">启动 PTY / 结构化子进程时，把当前服务进程的环境变量传给 claude / codex。关闭后子进程仅获得最小可用环境（PATH/HOME/SHELL/LANG/TERM 等），可用于隔离 API key 等敏感凭据。</span>' +
                   '</div>' +
-                  '<label class="settings-switch">' +
-                    '<input id="cfg-inherit-env" type="checkbox" class="switch-toggle" />' +
-                    '<span class="switch-slider"></span>' +
-                  '</label>' +
+                  '<div class="settings-toggle-aside">' +
+                    '<button type="button" id="cfg-view-env-btn" class="btn btn-secondary btn-sm" title="查看实际会注入到子进程的环境变量">查看</button>' +
+                    '<label class="settings-switch">' +
+                      '<input id="cfg-inherit-env" type="checkbox" class="switch-toggle" />' +
+                      '<span class="switch-slider"></span>' +
+                    '</label>' +
+                  '</div>' +
                 '</div>' +
                 '<div class="field">' +
                   '<label class="field-label" for="cfg-default-model">默认模型</label>' +
@@ -4020,6 +4023,8 @@
         if (saveConfigBtn) saveConfigBtn.addEventListener("click", saveConfigSettings);
         var defaultModelRefreshBtn = document.getElementById("cfg-default-model-refresh");
         if (defaultModelRefreshBtn) defaultModelRefreshBtn.addEventListener("click", refreshAvailableModels);
+        var viewEnvBtn = document.getElementById("cfg-view-env-btn");
+        if (viewEnvBtn) viewEnvBtn.addEventListener("click", openEnvPreviewModal);
         var saveDisplayBtn = document.getElementById("save-display-button");
         if (saveDisplayBtn) saveDisplayBtn.addEventListener("click", saveDisplaySettings);
         // App icon picker (APK only)
@@ -6002,31 +6007,14 @@
       }
 
       function getComposerPlaceholder(session, terminalInteractive) {
-        if (terminalInteractive) {
-          return "终端交互模式开启中，请直接在终端中输入";
-        }
-        if (session && isStructuredSession(session)) {
-          return session.provider === "codex"
-            ? "向 Codex 发送消息；chat 为结构化对话视图"
-            : "向 Claude 发送消息；chat 为结构化对话视图";
+        // Keep placeholders short so they don't wrap on portrait mobile screens.
+        // Only show informative state hints; drop the redundant "send to X" labels.
+        if (terminalInteractive) return "终端交互中";
+        if (session && session.status !== "running") {
+          if (canAutoResumeSession(session)) return "";
+          return "会话已结束";
         }
-        if (session && session.provider === "codex") {
-          if (session.status !== "running") {
-            return "Codex 会话已结束，无法继续发送";
-          }
-          return state.currentView === "terminal"
-            ? "向 Codex 发送输入；terminal 为原始 TUI 输出"
-            : "向 Codex 发送输入；chat 为解析后的阅读视图";
-        }
-        if (session && !isStructuredSession(session) && session.status !== "running") {
-          if (canAutoResumeSession(session)) {
-            return "输入消息...";
-          }
-          return "会话已结束，无法继续发送";
-        }
-        return session && isStructuredSession(session) && session.structuredState && session.structuredState.inFlight
-          ? "思考中 · 发送新消息将中断当前回复"
-          : "输入消息...";
+        return "";
       }
 
       function getToolModeHint(tool, mode) {
@@ -6207,6 +6195,143 @@
           });
       }
 
+      // ── Environment-variable preview modal ──
+      // Lazily creates a modal showing the exact env vars wand will inject
+      // into PTY / structured child processes (mirrors buildChildEnv()).
+      function openEnvPreviewModal() {
+        var modal = document.getElementById("env-preview-modal");
+        if (!modal) {
+          modal = document.createElement("section");
+          modal.id = "env-preview-modal";
+          modal.className = "modal-backdrop hidden";
+          modal.innerHTML =
+            '<div class="modal env-preview-modal" role="dialog" aria-labelledby="env-preview-title" aria-modal="true">' +
+              '<div class="modal-header">' +
+                '<div>' +
+                  '<h2 class="modal-title" id="env-preview-title">将注入子进程的环境变量</h2>' +
+                  '<p class="modal-subtitle" id="env-preview-subtitle">这些变量会被传给 claude / codex（PTY 与结构化运行器一致）。</p>' +
+                '</div>' +
+                '<button id="env-preview-close" class="btn btn-ghost btn-icon modal-close-btn" type="button" aria-label="关闭">' +
+                  '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">' +
+                    '<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>' +
+                  '</svg>' +
+                '</button>' +
+              '</div>' +
+              '<div class="modal-body env-preview-body">' +
+                '<div class="env-preview-toolbar">' +
+                  '<div class="env-preview-meta" id="env-preview-meta">加载中…</div>' +
+                  '<div class="env-preview-controls">' +
+                    '<input id="env-preview-search" class="env-preview-search" type="search" placeholder="搜索变量名…" />' +
+                    '<label class="env-preview-reveal">' +
+                      '<input id="env-preview-reveal-toggle" type="checkbox" />' +
+                      '<span>显示敏感值</span>' +
+                    '</label>' +
+                  '</div>' +
+                '</div>' +
+                '<div class="env-preview-list" id="env-preview-list" tabindex="0">' +
+                  '<div class="env-preview-loading">加载中…</div>' +
+                '</div>' +
+              '</div>' +
+              '<div class="modal-footer env-preview-footer">' +
+                '<span class="env-preview-hint">敏感字段（含 KEY/TOKEN/SECRET 等）默认掩码，可勾选「显示敏感值」临时还原。</span>' +
+                '<button id="env-preview-close-2" class="btn btn-secondary btn-sm" type="button">关闭</button>' +
+              '</div>' +
+            '</div>';
+          document.body.appendChild(modal);
+
+          // Click outside to close
+          modal.addEventListener("click", function(e) {
+            if (e.target === modal) closeEnvPreviewModal();
+          });
+          var closeBtn = modal.querySelector("#env-preview-close");
+          if (closeBtn) closeBtn.addEventListener("click", closeEnvPreviewModal);
+          var closeBtn2 = modal.querySelector("#env-preview-close-2");
+          if (closeBtn2) closeBtn2.addEventListener("click", closeEnvPreviewModal);
+          var searchEl = modal.querySelector("#env-preview-search");
+          if (searchEl) searchEl.addEventListener("input", function() { renderEnvPreviewList(); });
+          var revealEl = modal.querySelector("#env-preview-reveal-toggle");
+          if (revealEl) revealEl.addEventListener("change", function() { loadEnvPreview(revealEl.checked); });
+        }
+
+        modal.classList.remove("closing");
+        modal.classList.remove("hidden");
+        var revealEl = modal.querySelector("#env-preview-reveal-toggle");
+        if (revealEl) revealEl.checked = false;
+        var searchEl = modal.querySelector("#env-preview-search");
+        if (searchEl) searchEl.value = "";
+        loadEnvPreview(false);
+      }
+
+      function closeEnvPreviewModal() {
+        var modal = document.getElementById("env-preview-modal");
+        if (!modal) return;
+        animateModalClose(modal);
+      }
+
+      function loadEnvPreview(reveal) {
+        var listEl = document.getElementById("env-preview-list");
+        var metaEl = document.getElementById("env-preview-meta");
+        if (listEl) listEl.innerHTML = '<div class="env-preview-loading">加载中…</div>';
+        if (metaEl) metaEl.textContent = "加载中…";
+        var url = "/api/settings/env-preview" + (reveal ? "?reveal=1" : "");
+        fetch(url, { credentials: "same-origin" })
+          .then(function(res) { return res.json(); })
+          .then(function(data) {
+            if (!data || !Array.isArray(data.entries)) {
+              if (listEl) listEl.innerHTML = '<div class="env-preview-empty">读取失败。</div>';
+              if (metaEl) metaEl.textContent = "读取失败";
+              return;
+            }
+            state._envPreview = data;
+            if (metaEl) {
+              var inheritLabel = data.inheritEnv ? "继承父进程" : "最小白名单";
+              metaEl.innerHTML =
+                '<span class="env-preview-pill ' + (data.inheritEnv ? "is-inherit" : "is-minimal") + '">' + inheritLabel + '</span>' +
+                '<span class="env-preview-count">共 ' + data.total + ' 项</span>';
+            }
+            renderEnvPreviewList();
+          })
+          .catch(function() {
+            if (listEl) listEl.innerHTML = '<div class="env-preview-empty">读取失败，请稍后重试。</div>';
+            if (metaEl) metaEl.textContent = "读取失败";
+          });
+      }
+
+      function renderEnvPreviewList() {
+        var listEl = document.getElementById("env-preview-list");
+        if (!listEl) return;
+        var data = state._envPreview;
+        if (!data || !Array.isArray(data.entries)) {
+          listEl.innerHTML = '<div class="env-preview-empty">尚未加载。</div>';
+          return;
+        }
+        var searchEl = document.getElementById("env-preview-search");
+        var query = (searchEl && searchEl.value || "").trim().toLowerCase();
+        var html = "";
+        var shown = 0;
+        for (var i = 0; i < data.entries.length; i++) {
+          var entry = data.entries[i];
+          if (query && entry.name.toLowerCase().indexOf(query) === -1) continue;
+          shown++;
+          var isPlaceholder = typeof entry.value === "string" && entry.value.charAt(0) === "<" && entry.value.charAt(entry.value.length - 1) === ">";
+          html += '<div class="env-preview-row' + (entry.sensitive ? " is-sensitive" : "") + '">' +
+            '<div class="env-preview-name">' +
+              escapeHtml(entry.name) +
+              (entry.sensitive ? '<span class="env-preview-badge" title="被识别为敏感字段">敏感</span>' : '') +
+              (isPlaceholder ? '<span class="env-preview-badge env-preview-badge-runtime" title="按会话动态注入">运行时</span>' : '') +
+            '</div>' +
+            '<div class="env-preview-value' + (isPlaceholder ? " is-runtime" : "") + '" title="' + escapeHtml(String(entry.value)) + '">' +
+              escapeHtml(String(entry.value)) +
+            '</div>' +
+            '<div class="env-preview-len">' + entry.length + ' 字符</div>' +
+          '</div>';
+        }
+        if (shown === 0) {
+          html = '<div class="env-preview-empty">没有匹配的变量。</div>';
+        }
+        listEl.innerHTML = html;
+      }
+
       function updateSettingsDefaultModelSelect(data) {
         var select = document.getElementById("cfg-default-model");
         if (!select) return;
@@ -9253,7 +9378,7 @@
         var todoEl = document.getElementById("todo-progress");
         if (todoEl) todoEl.classList.add("hidden");
         welcomeInput.value = "";
-        welcomeInput.placeholder = "正在启动会话...";
+        welcomeInput.placeholder = "正在启动…";
         welcomeInput.disabled = true;
         var mode = state.chatMode || "managed";
         var defaultCwd = getEffectiveCwd();
@@ -9274,7 +9399,7 @@
         .then(function(data) {
           if (data.error) {
             showToast(data.error, "error");
-            welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+            welcomeInput.placeholder = "输入消息";
             welcomeInput.disabled = false;
             return;
           }
@@ -9287,7 +9412,7 @@
           switchToSessionView(data.id);
           subscribeToSession(data.id);
           loadOutput(data.id).then(function() {
-            welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+            welcomeInput.placeholder = "输入消息";
             welcomeInput.disabled = false;
             focusInputBox(true);
           });
@@ -9296,7 +9421,7 @@
           showToast((error && error.message) || (preferredTool === "codex"
             ? "无法启动 Codex 会话。"
             : "无法启动 Claude 会话。"), "error");
-          welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+          welcomeInput.placeholder = "输入消息";
           welcomeInput.disabled = false;
         });
       }
@@ -10672,7 +10797,7 @@
       function createSessionFromWelcomeInput(value) {
         var welcomeInput = document.getElementById("welcome-input");
         if (!welcomeInput) return;
-        welcomeInput.placeholder = "Claude 正在思考，请稍候...";
+        welcomeInput.placeholder = "正在思考…";
         welcomeInput.disabled = true;
         var mode = state.chatMode || "managed";
         var defaultCwd = getEffectiveCwd();
@@ -10694,7 +10819,7 @@
         .then(function(data) {
           if (data.error) {
             showToast(data.error, "error");
-            welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+            welcomeInput.placeholder = "输入消息";
             welcomeInput.disabled = false;
             return null;
           }
@@ -10702,11 +10827,11 @@
         })
         .catch(function(error) {
           showToast((error && error.message) || "无法启动会话。", "error");
-          welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+          welcomeInput.placeholder = "输入消息";
           welcomeInput.disabled = false;
         })
         .finally(function() {
-          welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+          welcomeInput.placeholder = "输入消息";
           welcomeInput.disabled = false;
         });
       }
@@ -15972,43 +16097,87 @@
         playNotificationSound();
 
         var id = ++notificationIdCounter;
-        var bubble = document.createElement("div");
-        bubble.className = "notification-bubble";
-        bubble.setAttribute("data-nid", id);
-
-        bubble.innerHTML =
-          '<div class="notification-bubble-header">' +
-            '<span class="notification-bubble-icon info">\u2191</span>' +
-            '<span class="notification-bubble-title">\u53d1\u73b0\u65b0\u7248\u672c</span>' +
-            '<button class="notification-bubble-close" title="\u5173\u95ed">\u00d7</button>' +
+        var card = document.createElement("div");
+        // Reuse the notification stacking system but with a richer card style.
+        card.className = "notification-bubble update-card";
+        card.setAttribute("data-nid", id);
+
+        card.innerHTML =
+          '<div class="update-card-shine" aria-hidden="true"></div>' +
+          '<div class="update-card-header">' +
+            '<div class="update-card-icon" aria-hidden="true">' +
+              '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">' +
+                '<path d="M12 19V5"/><path d="M5 12l7-7 7 7"/>' +
+              '</svg>' +
+            '</div>' +
+            '<div class="update-card-heading">' +
+              '<div class="update-card-title">\u53d1\u73b0\u65b0\u7248\u672c</div>' +
+              '<div class="update-card-subtitle" id="update-card-subtitle">\u70b9\u51fb\u4e0b\u65b9\u6309\u94ae\u4e00\u952e\u66f4\u65b0</div>' +
+            '</div>' +
+            '<button class="update-card-close" title="\u7a0d\u540e\u63d0\u9192" aria-label="\u5173\u95ed">' +
+              '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">' +
+                '<path d="M18 6L6 18"/><path d="M6 6l12 12"/>' +
+              '</svg>' +
+            '</button>' +
+          '</div>' +
+          '<div class="update-card-version">' +
+            '<span class="update-card-version-chip update-card-version-current">v' + escapeHtml(String(currentVer).replace(/^v/, "")) + '</span>' +
+            '<svg class="update-card-version-arrow" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+              '<path d="M5 12h14"/><path d="M13 5l7 7-7 7"/>' +
+            '</svg>' +
+            '<span class="update-card-version-chip update-card-version-latest">v' + escapeHtml(String(latestVer).replace(/^v/, "")) + '</span>' +
           '</div>' +
-          '<div class="notification-bubble-body">' +
-            escapeHtml(currentVer) + ' \u2192 ' + escapeHtml(latestVer) +
+          '<div class="update-card-progress" id="update-card-progress" aria-hidden="true">' +
+            '<div class="update-card-progress-track"><div class="update-card-progress-fill"></div></div>' +
           '</div>' +
-          '<div class="notification-bubble-actions">' +
-            '<button class="primary" id="update-bubble-action">\u7acb\u5373\u66f4\u65b0</button>' +
+          '<div class="update-card-status hidden" id="update-card-status"></div>' +
+          '<div class="update-card-actions">' +
+            '<button class="update-card-action update-card-action-primary" id="update-bubble-action" type="button">' +
+              '<span class="update-card-action-label">\u7acb\u5373\u66f4\u65b0</span>' +
+            '</button>' +
           '</div>';
 
-        document.body.appendChild(bubble);
+        document.body.appendChild(card);
 
-        var entry = { id: id, el: bubble };
+        var entry = { id: id, el: card };
         notificationStack.push(entry);
         repositionNotifications();
 
-        var closeBtn = bubble.querySelector(".notification-bubble-close");
+        var closeBtn = card.querySelector(".update-card-close");
         if (closeBtn) closeBtn.onclick = function() {
           dismissNotification(id);
           state._updateBubbleShown = false;
         };
 
-        var actionBtn = bubble.querySelector("#update-bubble-action");
-        var bodyEl = bubble.querySelector(".notification-bubble-body");
+        var actionBtn = card.querySelector("#update-bubble-action");
+        var actionLabel = card.querySelector(".update-card-action-label");
+        var subtitleEl = card.querySelector("#update-card-subtitle");
+        var statusEl = card.querySelector("#update-card-status");
+        var progressEl = card.querySelector("#update-card-progress");
+
+        function setStatus(text, kind) {
+          if (!statusEl) return;
+          statusEl.textContent = text || "";
+          statusEl.classList.remove("hidden", "error", "success");
+          if (!text) { statusEl.classList.add("hidden"); return; }
+          if (kind) statusEl.classList.add(kind);
+        }
+        function setSubtitle(text) {
+          if (subtitleEl) subtitleEl.textContent = text || "";
+        }
+        function setProgress(active) {
+          if (!progressEl) return;
+          progressEl.classList.toggle("active", !!active);
+        }
 
         if (actionBtn) actionBtn.onclick = function() {
           // Phase 1: Performing update
           actionBtn.disabled = true;
-          actionBtn.textContent = "\u66f4\u65b0\u4e2d\u2026";
-          if (bodyEl) bodyEl.textContent = "\u6b63\u5728\u4e0b\u8f7d\u5e76\u5b89\u88c5\u65b0\u7248\u672c\u2026";
+          card.classList.add("is-busy");
+          if (actionLabel) actionLabel.textContent = "\u66f4\u65b0\u4e2d\u2026";
+          setSubtitle("\u6b63\u5728\u4e0b\u8f7d\u5e76\u5b89\u88c5\u65b0\u7248\u672c\u2026");
+          setProgress(true);
+          setStatus("");
 
           fetch("/api/update", {
             method: "POST",
@@ -16017,39 +16186,58 @@
           })
           .then(function(res) { return res.json(); })
           .then(function(data) {
+            setProgress(false);
+            card.classList.remove("is-busy");
             if (data.error) {
               // Update failed
-              if (bodyEl) {
-                bodyEl.textContent = data.error;
-                bodyEl.style.color = "var(--error)";
-              }
+              setSubtitle("\u66f4\u65b0\u672a\u5b8c\u6210");
+              setStatus(data.error, "error");
               actionBtn.disabled = false;
-              actionBtn.textContent = "\u91cd\u8bd5";
+              if (actionLabel) actionLabel.textContent = "\u91cd\u8bd5";
               return;
             }
             // Phase 2: Update succeeded, show restart button
-            if (bodyEl) {
-              bodyEl.textContent = data.message || "\u66f4\u65b0\u5b8c\u6210";
-              bodyEl.style.color = "var(--success)";
-            }
-            actionBtn.textContent = "\u91cd\u542f\u751f\u6548";
+            setSubtitle(data.message || "\u66f4\u65b0\u5b8c\u6210\uff0c\u91cd\u542f\u540e\u751f\u6548");
+            setStatus("");
+            card.classList.add("is-success");
+            if (actionLabel) actionLabel.textContent = "\u91cd\u542f\u751f\u6548";
             actionBtn.disabled = false;
-            actionBtn.className = "primary success";
             actionBtn.onclick = function() {
-              performRestart(actionBtn, bodyEl);
+              actionBtn.disabled = true;
+              if (actionLabel) actionLabel.textContent = "\u6b63\u5728\u91cd\u542f\u2026";
+              setSubtitle("\u670d\u52a1\u6b63\u5728\u91cd\u542f\u2026");
+              setProgress(true);
+              performRestartCard(actionBtn, actionLabel, subtitleEl, statusEl, progressEl);
             };
           })
           .catch(function() {
-            if (bodyEl) {
-              bodyEl.textContent = "\u66f4\u65b0\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u7f51\u7edc\u8fde\u63a5\u3002";
-              bodyEl.style.color = "var(--error)";
-            }
+            setProgress(false);
+            card.classList.remove("is-busy");
+            setSubtitle("\u66f4\u65b0\u672a\u5b8c\u6210");
+            setStatus("\u8bf7\u68c0\u67e5\u7f51\u7edc\u8fde\u63a5\u540e\u91cd\u8bd5", "error");
             actionBtn.disabled = false;
-            actionBtn.textContent = "\u91cd\u8bd5";
+            if (actionLabel) actionLabel.textContent = "\u91cd\u8bd5";
           });
         };
       }
 
+      // Restart driver used by the new update card.
+      function performRestartCard(btn, labelEl, subtitleEl, statusEl, progressEl) {
+        fetch("/api/restart", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin"
+        })
+        .then(function(res) { return res.json(); })
+        .then(function() {
+          showRestartOverlay();
+        })
+        .catch(function() {
+          // Network error likely means the server already shut down \u2014 show overlay anyway
+          showRestartOverlay();
+        });
+      }
+
       /**
        * Call POST /api/restart and show the restart overlay.
        */

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

@@ -9185,6 +9185,258 @@
 
     /* .btn-success defined globally in the button system above */
 
+    /* ── Update Card (richer than the generic notification bubble) ── */
+    .notification-bubble.update-card {
+      width: min(360px, calc(100vw - 24px));
+      max-width: min(360px, calc(100vw - 24px));
+      min-width: 0;
+      padding: 14px 14px 12px;
+      border-radius: var(--radius-md);
+      background:
+        radial-gradient(120% 120% at 0% 0%, var(--accent-muted) 0%, transparent 55%),
+        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-primary) 100%);
+      border: 1px solid var(--border-strong);
+      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.4) inset;
+      overflow: hidden;
+      isolation: isolate;
+    }
+    .update-card-shine {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: linear-gradient(115deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.18) 45%,
+        rgba(255, 255, 255, 0.32) 50%,
+        rgba(255, 255, 255, 0.18) 55%,
+        transparent 100%);
+      background-size: 220% 100%;
+      background-position: 120% 0;
+      mix-blend-mode: overlay;
+      opacity: 0.65;
+      animation: update-card-shine 6s ease-in-out infinite;
+      z-index: 0;
+    }
+    @keyframes update-card-shine {
+      0%   { background-position: 120% 0; }
+      55%  { background-position: -20% 0; }
+      100% { background-position: -20% 0; }
+    }
+    .update-card.is-success {
+      background:
+        radial-gradient(120% 120% at 0% 0%, var(--success-muted) 0%, transparent 55%),
+        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-primary) 100%);
+      border-color: var(--success);
+      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.4) inset, var(--shadow-glow-success);
+    }
+    .update-card-header {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+    }
+    .update-card-icon {
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      border-radius: var(--radius-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
+      box-shadow: 0 4px 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.35);
+    }
+    .update-card.is-success .update-card-icon {
+      background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
+      box-shadow: 0 4px 12px var(--success-glow), inset 0 1px 0 rgba(255,255,255,0.35);
+    }
+    .update-card-heading {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .update-card-title {
+      font-size: 0.88rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      letter-spacing: 0.01em;
+      line-height: 1.25;
+    }
+    .update-card-subtitle {
+      font-size: 0.72rem;
+      color: var(--text-tertiary);
+      line-height: 1.35;
+    }
+    .update-card-close {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      border: none;
+      border-radius: var(--radius-sm);
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      transition: background 0.15s, color 0.15s;
+    }
+    .update-card-close:hover {
+      background: var(--bg-tertiary);
+      color: var(--text-primary);
+    }
+
+    .update-card-version {
+      position: relative;
+      z-index: 1;
+      margin: 12px 0 10px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: nowrap;
+    }
+    .update-card-version-chip {
+      font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+      font-size: 0.74rem;
+      font-weight: 600;
+      padding: 3px 10px;
+      border-radius: var(--radius-full);
+      border: 1px solid var(--border-subtle);
+      white-space: nowrap;
+    }
+    .update-card-version-current {
+      color: var(--text-tertiary);
+      background: var(--bg-tertiary);
+    }
+    .update-card-version-latest {
+      color: var(--accent);
+      background: var(--accent-muted);
+      border-color: var(--accent);
+      box-shadow: 0 1px 6px var(--accent-glow);
+    }
+    .update-card.is-success .update-card-version-latest {
+      color: var(--success);
+      background: var(--success-muted);
+      border-color: var(--success);
+      box-shadow: 0 1px 6px var(--success-glow);
+    }
+    .update-card-version-arrow {
+      color: var(--text-muted);
+      flex-shrink: 0;
+    }
+
+    .update-card-progress {
+      position: relative;
+      z-index: 1;
+      height: 0;
+      overflow: hidden;
+      margin: 0;
+      transition: height 0.25s ease, margin 0.25s ease;
+    }
+    .update-card-progress.active {
+      height: 6px;
+      margin: 0 0 10px;
+    }
+    .update-card-progress-track {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background: var(--bg-tertiary);
+      border-radius: var(--radius-full);
+      overflow: hidden;
+    }
+    .update-card-progress-fill {
+      position: absolute;
+      top: 0;
+      left: -40%;
+      width: 40%;
+      height: 100%;
+      border-radius: var(--radius-full);
+      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
+      box-shadow: 0 0 10px var(--accent-glow);
+      animation: update-card-progress-sweep 1.4s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
+    }
+    @keyframes update-card-progress-sweep {
+      0%   { left: -45%; width: 40%; }
+      50%  { left: 25%; width: 55%; }
+      100% { left: 105%; width: 40%; }
+    }
+
+    .update-card-status {
+      position: relative;
+      z-index: 1;
+      font-size: 0.72rem;
+      line-height: 1.4;
+      padding: 6px 10px;
+      border-radius: var(--radius-sm);
+      margin-bottom: 10px;
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
+      border: 1px solid var(--border-subtle);
+    }
+    .update-card-status.error {
+      background: var(--danger-muted);
+      color: var(--danger);
+      border-color: var(--danger);
+    }
+    .update-card-status.success {
+      background: var(--success-muted);
+      color: var(--success);
+      border-color: var(--success);
+    }
+
+    .update-card-actions {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+    .update-card-action {
+      font-size: 0.78rem;
+      font-weight: 600;
+      padding: 7px 16px;
+      border-radius: var(--radius-sm);
+      border: 1px solid transparent;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
+    }
+    .update-card-action-primary {
+      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
+      color: white;
+      box-shadow: 0 4px 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
+    }
+    .update-card-action-primary:hover:not(:disabled) {
+      filter: brightness(1.05);
+      transform: translateY(-1px);
+      box-shadow: 0 6px 16px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3);
+    }
+    .update-card-action-primary:active:not(:disabled) {
+      transform: translateY(0);
+      filter: brightness(0.96);
+    }
+    .update-card-action:disabled {
+      opacity: 0.7;
+      cursor: progress;
+      filter: none;
+      transform: none;
+    }
+    .update-card.is-success .update-card-action-primary {
+      background: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
+      box-shadow: 0 4px 12px var(--success-glow), inset 0 1px 0 rgba(255,255,255,0.25);
+    }
+    .update-card.is-success .update-card-action-primary:hover:not(:disabled) {
+      box-shadow: 0 6px 16px var(--success-glow), inset 0 1px 0 rgba(255,255,255,0.3);
+    }
+
     /* Restart overlay */
     .restart-overlay {
       position: fixed;
@@ -11676,6 +11928,202 @@
       cursor: pointer;
       display: inline-block;
     }
+    /* Toggle 行右侧附属操作（如「查看」按钮 + 开关同列） */
+    .settings-toggle-aside {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    /* ── Env preview modal ── */
+    .env-preview-modal {
+      max-width: 720px;
+    }
+    .env-preview-body {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 18px 24px 8px;
+      min-height: 0;
+    }
+    .env-preview-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    .env-preview-meta {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.78rem;
+      color: var(--text-secondary);
+    }
+    .env-preview-pill {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 10px;
+      border-radius: var(--radius-full);
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      border: 1px solid var(--border-subtle);
+    }
+    .env-preview-pill.is-inherit {
+      color: var(--accent);
+      background: var(--accent-muted);
+      border-color: var(--accent);
+    }
+    .env-preview-pill.is-minimal {
+      color: var(--success);
+      background: var(--success-muted);
+      border-color: var(--success);
+    }
+    .env-preview-count {
+      font-size: 0.72rem;
+      color: var(--text-muted);
+    }
+    .env-preview-controls {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .env-preview-search {
+      width: 200px;
+      max-width: 100%;
+      padding: 6px 10px;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+      background: var(--bg-elevated);
+      font-size: 0.78rem;
+      color: var(--text-primary);
+    }
+    .env-preview-search:focus {
+      outline: none;
+      border-color: var(--border-focus);
+      box-shadow: 0 0 0 3px var(--accent-glow);
+    }
+    .env-preview-reveal {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.74rem;
+      color: var(--text-secondary);
+      cursor: pointer;
+      user-select: none;
+    }
+    .env-preview-reveal input {
+      accent-color: var(--accent);
+      cursor: pointer;
+    }
+    .env-preview-list {
+      max-height: min(56vh, 460px);
+      overflow-y: auto;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border-subtle);
+      background: var(--bg-elevated);
+      padding: 4px;
+    }
+    .env-preview-list:focus { outline: none; }
+    .env-preview-row {
+      display: grid;
+      grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
+      gap: 12px;
+      align-items: center;
+      padding: 8px 10px;
+      border-radius: var(--radius-xs);
+      font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+      font-size: 0.74rem;
+      transition: background 0.12s;
+    }
+    .env-preview-row:hover {
+      background: var(--bg-tertiary);
+    }
+    .env-preview-row + .env-preview-row {
+      border-top: 1px dashed var(--border-subtle);
+    }
+    .env-preview-name {
+      color: var(--text-primary);
+      font-weight: 600;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+      overflow-wrap: anywhere;
+    }
+    .env-preview-row.is-sensitive .env-preview-name {
+      color: var(--warning);
+    }
+    .env-preview-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 1px 6px;
+      border-radius: var(--radius-full);
+      font-family: inherit;
+      font-size: 0.62rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      background: var(--warning-muted);
+      color: var(--warning);
+      border: 1px solid var(--warning);
+    }
+    .env-preview-badge-runtime {
+      background: var(--info-muted);
+      color: var(--info);
+      border-color: var(--info);
+    }
+    .env-preview-value {
+      color: var(--text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+    .env-preview-value.is-runtime {
+      font-style: italic;
+      color: var(--text-muted);
+    }
+    .env-preview-len {
+      color: var(--text-muted);
+      font-size: 0.68rem;
+      white-space: nowrap;
+    }
+    .env-preview-loading,
+    .env-preview-empty {
+      padding: 24px 8px;
+      text-align: center;
+      color: var(--text-muted);
+      font-size: 0.78rem;
+    }
+    .env-preview-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 14px 24px 18px;
+    }
+    .env-preview-hint {
+      font-size: 0.7rem;
+      color: var(--text-muted);
+      flex: 1;
+      min-width: 0;
+    }
+
+    @media (max-width: 640px) {
+      .env-preview-modal { max-width: calc(100vw - 24px); }
+      .env-preview-row {
+        grid-template-columns: 1fr;
+        gap: 4px;
+      }
+      .env-preview-len {
+        justify-self: end;
+      }
+      .env-preview-search { width: 100%; }
+      .env-preview-controls { width: 100%; }
+    }
 
     /* Range 行（音量等） */
     .settings-range-row {

package/package.json

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