@co0ontty/wand 1.21.11 → 1.21.13

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

@@ -215,6 +215,12 @@
         fileSearchQuery: "",
         fileExplorerLoading: false,
         allFiles: [],
+        fileExplorerCwd: "",
+        fileExplorerTruncated: false,
+        fileExplorerTotal: 0,
+        fileExplorerShowHidden: (function() {
+          try { return localStorage.getItem("wand-file-show-hidden") === "1"; } catch (e) { return false; }
+        })(),
         claudeHistory: [],
         claudeHistoryLoaded: false,
         claudeHistoryExpanded: true,
@@ -1346,16 +1352,7 @@
                 '<div class="topbar-right">' +
                   (selectedSession && selectedSession.cwd ? '<button id="topbar-file-button" class="topbar-btn square' + (state.filePanelOpen ? ' active' : '') + '" type="button" aria-label="文件" title="文件"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></button>' : '') +
                   '<span id="topbar-git-slot" class="topbar-git-slot">' + renderTopbarGitBadgeHtml() + '</span>' +
-                  '<div class="topbar-more-wrap">' +
-                    '<button id="topbar-more-button" class="topbar-btn square' + (state.topbarMoreOpen ? ' active' : '') + '" type="button" aria-label="更多" aria-haspopup="menu" aria-expanded="' + (state.topbarMoreOpen ? 'true' : 'false') + '" title="更多"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>' +
-                    '<div id="topbar-more-menu" class="topbar-more-menu' + (state.topbarMoreOpen ? '' : ' hidden') + '" role="menu">' +
-                      '<button class="topbar-more-item" data-action="settings" type="button" role="menuitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg><span>设置</span></button>' +
-                      '<button class="topbar-more-item" data-action="refresh" type="button" role="menuitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg><span>刷新</span></button>' +
-                      '<button class="topbar-more-item' + (state.showInstallPrompt && state.deferredPrompt ? '' : ' hidden') + '" id="topbar-install-item" data-action="install" type="button" role="menuitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg><span>安装应用</span></button>' +
-                      (hasNativeSwitchServer() ? '<button class="topbar-more-item" data-action="switch-server" type="button" role="menuitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/><line x1="6" y1="7" x2="6.01" y2="7"/><line x1="6" y1="17" x2="6.01" y2="17"/></svg><span>切换服务器</span></button>' : '') +
-                      '<button class="topbar-more-item topbar-more-item-danger" data-action="logout" type="button" role="menuitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg><span>退出</span></button>' +
-                    '</div>' +
-                  '</div>' +
+                  (selectedSession ? renderTopbarMoreMenuHtml(selectedSession) : '') +
                 '</div>' +
               '</div>' +
               // File panel backdrop (mobile)
@@ -1368,7 +1365,9 @@
                 '</div>' +
                 '<div class="file-side-panel-body">' +
                   '<div class="file-explorer-header">' +
-                    '<span class="file-explorer-path" id="file-explorer-cwd">' + escapeHtml(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '</span>' +
+                    '<button class="file-explorer-up" id="file-explorer-up" type="button" title="返回上级目录" aria-label="返回上级目录">⬆</button>' +
+                    '<span class="file-explorer-path" id="file-explorer-cwd" title="' + escapeHtml(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '">' + escapeHtml(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '</span>' +
+                    '<button class="file-explorer-toggle-hidden' + (state.fileExplorerShowHidden ? ' active' : '') + '" id="file-explorer-toggle-hidden" type="button" title="' + (state.fileExplorerShowHidden ? "隐藏点开头文件" : "显示隐藏文件") + '" aria-pressed="' + (state.fileExplorerShowHidden ? "true" : "false") + '">' + (state.fileExplorerShowHidden ? "👁" : "👁‍🗨") + '</button>' +
                     '<button class="file-explorer-refresh" id="file-explorer-refresh" title="刷新" aria-label="刷新文件列表">↻</button>' +
                   '</div>' +
                   '<div class="file-search-box">' +
@@ -1549,6 +1548,60 @@
         }
       }
 
+      /**
+       * Render the topbar three-dot menu. Items are scoped to the currently
+       * selected session — global actions (settings/install/switch-server/
+       * logout) live in the sidebar footer, so we don't duplicate them here.
+       */
+      function renderTopbarMoreMenuHtml(session) {
+        if (!session) return "";
+        var open = state.topbarMoreOpen;
+        var hasClaudeId = !!session.claudeSessionId;
+        var hasCwd = !!session.cwd;
+        var canOpenMerge = session.worktreeEnabled && session.worktree && session.worktree.branch && session.worktree.path;
+        var needsCleanup = session.worktreeMergeStatus === "merged" && session.worktreeMergeInfo && session.worktreeMergeInfo.cleanupDone === false;
+        var mergeDisabled = session.status === "running" || session.worktreeMergeStatus === "merging";
+        var showMerge = canOpenMerge && session.worktreeMergeStatus !== "merged";
+        var showCleanup = needsCleanup;
+        var hasInfoGroup = hasClaudeId || hasCwd || true; // session-id button always renders
+        var hasActionGroup = showMerge || showCleanup || true; // delete button always renders
+
+        var copyIconSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+        var cloudIconSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19a4.5 4.5 0 1 0-1.5-8.74A6 6 0 1 0 6 14h11.5z"/></svg>';
+        var folderIconSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
+        var hashIconSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>';
+        var mergeIconSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10"/><path d="M7 12h10"/><path d="M7 17h10"/><path d="M5 7l-2 2 2 2"/><path d="M19 15l2 2-2 2"/></svg>';
+        var trashIconSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg>';
+
+        var infoItems = "";
+        if (hasClaudeId) {
+          infoItems += '<button class="topbar-more-item" data-action="copy-claude-session-id" type="button" role="menuitem">' + cloudIconSvg + '<span>复制 Claude 会话 ID</span></button>';
+        }
+        if (hasCwd) {
+          infoItems += '<button class="topbar-more-item" data-action="copy-cwd" type="button" role="menuitem">' + folderIconSvg + '<span>复制工作目录</span></button>';
+        }
+        infoItems += '<button class="topbar-more-item" data-action="copy-session-id" type="button" role="menuitem">' + hashIconSvg + '<span>复制会话 ID</span></button>';
+
+        var actionItems = "";
+        if (showMerge) {
+          actionItems += '<button class="topbar-more-item" data-action="worktree-merge" type="button" role="menuitem"' + (mergeDisabled ? ' disabled' : '') + '>' + mergeIconSvg + '<span>合并到主分支…</span></button>';
+        } else if (showCleanup) {
+          actionItems += '<button class="topbar-more-item" data-action="worktree-cleanup" type="button" role="menuitem">' + mergeIconSvg + '<span>重试 worktree 清理</span></button>';
+        }
+        actionItems += '<button class="topbar-more-item topbar-more-item-danger" data-action="delete-session" type="button" role="menuitem">' + trashIconSvg + '<span>删除当前会话</span></button>';
+
+        var divider = (hasInfoGroup && hasActionGroup) ? '<div class="topbar-more-divider" role="separator"></div>' : '';
+
+        return '<div class="topbar-more-wrap">' +
+          '<button id="topbar-more-button" class="topbar-btn square' + (open ? ' active' : '') + '" type="button" aria-label="当前会话操作" aria-haspopup="menu" aria-expanded="' + (open ? 'true' : 'false') + '" title="当前会话操作"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>' +
+          '<div id="topbar-more-menu" class="topbar-more-menu' + (open ? '' : ' hidden') + '" role="menu" aria-label="当前会话">' +
+            infoItems +
+            divider +
+            actionItems +
+          '</div>' +
+        '</div>';
+      }
+
       function loadGitStatus(sessionId, options) {
         if (!sessionId) return Promise.resolve(null);
         var force = options && options.force;
@@ -2169,10 +2222,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>' +
@@ -2849,118 +2905,205 @@
       function renderFileExplorer(cwd) {
         var root = cwd || getConfigCwd();
         if (!root) {
-          return '<div class="file-explorer empty">No working directory configured.</div>';
+          return '<div class="file-explorer empty">未配置工作目录。</div>';
         }
         return '<div class="file-tree" id="file-tree" data-cwd="' + escapeHtml(root) + '">' +
-          '<div class="tree-loading">Loading...</div>' +
+          '<div class="tree-loading">加载中…</div>' +
         '</div>';
       }
 
-      function refreshFileExplorer() {
-        var explorer = document.getElementById("file-explorer");
-        var cwdEl = document.getElementById("file-explorer-cwd");
-        if (!explorer) return;
-        // Get cwd from current session or config
-        var cwd = "";
+      // ── File tree helpers ──
+
+      var FILE_ICON_MAP = {
+        // images
+        png: "🖼️", jpg: "🖼️", jpeg: "🖼️", gif: "🖼️", webp: "🖼️", svg: "🖼️",
+        avif: "🖼️", bmp: "🖼️", ico: "🖼️", heic: "🖼️", heif: "🖼️",
+        // pdf / doc
+        pdf: "📕", doc: "📘", docx: "📘", odt: "📘",
+        xls: "📊", xlsx: "📊", csv: "📊", tsv: "📊",
+        ppt: "📙", pptx: "📙",
+        // video / audio
+        mp4: "🎬", webm: "🎬", mov: "🎬", mkv: "🎬", m4v: "🎬", ogv: "🎬",
+        mp3: "🎵", wav: "🎵", ogg: "🎵", m4a: "🎵", flac: "🎵", aac: "🎵", opus: "🎵",
+        // archives
+        zip: "📦", tar: "📦", gz: "📦", tgz: "📦", bz2: "📦", "7z": "📦", rar: "📦", xz: "📦",
+        // markup / docs
+        md: "📝", markdown: "📝", mdx: "📝", rst: "📝", txt: "📝", log: "📝",
+        // web / styles
+        html: "🌐", htm: "🌐", xml: "🌐",
+        css: "🎨", scss: "🎨", less: "🎨",
+        // configs
+        json: "⚙️", jsonc: "⚙️", yaml: "⚙️", yml: "⚙️", toml: "⚙️",
+        ini: "⚙️", cfg: "⚙️", conf: "⚙️", env: "⚙️", editorconfig: "⚙️",
+        // code (default 📜)
+        ts: "📜", tsx: "📜", js: "📜", jsx: "📜", mjs: "📜", cjs: "📜",
+        py: "📜", rb: "📜", go: "📜", rs: "📜", java: "📜", c: "📜", cpp: "📜",
+        h: "📜", hpp: "📜", cs: "📜", swift: "📜", kt: "📜", scala: "📜",
+        php: "📜", sh: "📜", bash: "📜", zsh: "📜", fish: "📜", lua: "📜",
+        sql: "📜", graphql: "📜", proto: "📜", vue: "📜", svelte: "📜",
+        diff: "📜", patch: "📜",
+        // fonts / binary
+        ttf: "🔤", otf: "🔤", woff: "🔤", woff2: "🔤", eot: "🔤",
+      };
+
+      function getFileIcon(item) {
+        if (!item) return "📄";
+        if (item.type === "dir") return "📁";
+        var name = (item.name || "").toLowerCase();
+        // basename-only matches first
+        if (name === "dockerfile") return "🐳";
+        if (name === "makefile") return "🛠️";
+        if (name === "license") return "📜";
+        if (name === "readme") return "📝";
+        var dot = name.lastIndexOf(".");
+        if (dot < 0 || dot === name.length - 1) return "📄";
+        var ext = name.slice(dot + 1);
+        return FILE_ICON_MAP[ext] || "📄";
+      }
+
+      function formatFileSize(bytes) {
+        if (typeof bytes !== "number" || !isFinite(bytes) || bytes < 0) return "";
+        if (bytes < 1024) return bytes + " B";
+        var kb = bytes / 1024;
+        if (kb < 1024) return (kb >= 10 ? Math.round(kb) : kb.toFixed(1)) + " KB";
+        var mb = kb / 1024;
+        if (mb < 1024) return (mb >= 10 ? Math.round(mb) : mb.toFixed(1)) + " MB";
+        var gb = mb / 1024;
+        return (gb >= 10 ? Math.round(gb) : gb.toFixed(1)) + " GB";
+      }
+
+      function formatRelativeTime(iso) {
+        if (!iso) return "";
+        var t = Date.parse(iso);
+        if (isNaN(t)) return "";
+        return new Date(t).toLocaleString();
+      }
+
+      function getEffectiveExplorerCwd() {
+        if (state.fileExplorerCwd) return state.fileExplorerCwd;
         if (state.selectedId) {
           var session = state.sessions.find(function(s) { return s.id === state.selectedId; });
-          if (session) cwd = session.cwd || "";
-        }
-        if (!cwd) {
-          cwd = getConfigCwd();
+          if (session && session.cwd) return session.cwd;
         }
+        return getConfigCwd();
+      }
+
+      function refreshFileExplorer(opts) {
+        opts = opts || {};
+        var explorer = document.getElementById("file-explorer");
+        var cwdEl = document.getElementById("file-explorer-cwd");
+        if (!explorer) return;
+        var cwd = opts.cwd || getEffectiveExplorerCwd();
         if (!cwd) {
-          explorer.innerHTML = '<div class="file-explorer empty">No working directory.</div>';
+          explorer.innerHTML = '<div class="file-explorer empty">没有可显示的工作目录。</div>';
           return;
         }
+        state.fileExplorerCwd = cwd;
         state.fileExplorerLoading = true;
         state.allFiles = [];
-        explorer.innerHTML = '<div class="file-explorer"><div class="tree-loading" style="padding:12px;color:var(--text-muted);font-size:0.8125rem;">Loading...</div></div>';
-        // Update the cwd display
-        if (cwdEl) cwdEl.textContent = cwd;
-        // Fetch with git status
-        fetch("/api/directory?q=" + encodeURIComponent(cwd) + "&gitStatus=true", { credentials: "same-origin" })
+        state.fileExplorerTruncated = false;
+        state.fileExplorerTotal = 0;
+        explorer.innerHTML = '<div class="file-explorer"><div class="tree-loading" style="padding:12px;color:var(--text-muted);font-size:0.8125rem;">加载中…</div></div>';
+        if (cwdEl) {
+          cwdEl.textContent = cwd;
+          cwdEl.title = cwd;
+        }
+        var url = "/api/directory?q=" + encodeURIComponent(cwd) +
+          "&gitStatus=true" +
+          (state.fileExplorerShowHidden ? "&showHidden=true" : "");
+        fetch(url, { credentials: "same-origin" })
           .then(function(res) {
-            if (!res.ok) {
-              throw new Error("Failed to load directory.");
-            }
+            if (!res.ok) throw new Error("Failed to load directory.");
             return res.json();
           })
-          .then(function(items) {
+          .then(function(payload) {
             state.fileExplorerLoading = false;
+            // Backend returns { items, truncated, total }; tolerate the legacy array shape too.
+            var items, truncated, total;
+            if (Array.isArray(payload)) {
+              items = payload; truncated = false; total = payload.length;
+            } else {
+              items = (payload && payload.items) || [];
+              truncated = !!(payload && payload.truncated);
+              total = (payload && payload.total) || items.length;
+            }
             if (!items || items.length === 0) {
-              explorer.innerHTML = '<div class="file-explorer empty">Empty directory or inaccessible.</div>';
+              explorer.innerHTML = '<div class="file-explorer empty">空目录或无法访问。</div>';
               return;
             }
             state.allFiles = items;
+            state.fileExplorerTruncated = truncated;
+            state.fileExplorerTotal = total;
             filterFileTree();
           })
           .catch(function() {
             state.fileExplorerLoading = false;
-            explorer.innerHTML = '<div class="file-explorer empty">Failed to load files.</div>';
+            explorer.innerHTML = '<div class="file-explorer empty">加载失败，请检查路径或权限。</div>';
           });
       }
 
       function filterFileTree() {
         var explorer = document.getElementById("file-explorer");
-        var cwdEl = document.getElementById("file-explorer-cwd");
         if (!explorer) return;
-        var cwd = cwdEl ? cwdEl.textContent : "";
+        var cwd = state.fileExplorerCwd || "";
         if (!cwd) return;
 
         var query = state.fileSearchQuery;
         var items = state.allFiles || [];
+        var filtered = items;
 
-        // 如果没有搜索词，显示所有文件
-        if (!query) {
-          explorer.innerHTML = '<div class="file-tree" id="file-tree" data-cwd="' + escapeHtml(cwd) + '">' +
-            items.map(function(item) {
-              return renderFileTreeItem(item);
-            }).join("") +
-          '</div>';
-          attachFileTreeListeners();
-          return;
+        if (query) {
+          var lowerQuery = query.toLowerCase();
+          filtered = items.filter(function(item) {
+            return item.name.toLowerCase().indexOf(lowerQuery) !== -1;
+          });
         }
 
-        // 模糊匹配文件名（大小写不敏感）
-        var lowerQuery = query.toLowerCase();
-        var filtered = items.filter(function(item) {
-          return item.name.toLowerCase().indexOf(lowerQuery) !== -1;
-        });
-
         if (filtered.length === 0) {
-          explorer.innerHTML = '<div class="file-explorer empty">没有找到匹配的文件</div>';
+          explorer.innerHTML = '<div class="file-explorer empty">' + (query ? '没有找到匹配的文件' : '空目录') + '</div>';
           return;
         }
 
+        var truncatedNotice = "";
+        if (!query && state.fileExplorerTruncated) {
+          var shown = items.length;
+          truncatedNotice = '<div class="tree-truncated" title="后端按字母序最多返回 ' + shown + ' 项">显示前 ' + shown + ' 项 / 共 ' + state.fileExplorerTotal + ' 项</div>';
+        }
+
         explorer.innerHTML = '<div class="file-tree" id="file-tree" data-cwd="' + escapeHtml(cwd) + '">' +
           filtered.map(function(item) {
             return renderFileTreeItem(item);
           }).join("") +
-        '</div>';
+        '</div>' + truncatedNotice;
         attachFileTreeListeners();
       }
 
-      function renderFileTreeItem(item) {
+      function renderFileTreeItem(item, depth) {
+        depth = depth || 0;
         var name = escapeHtml(item.name);
         var isDir = item.type === "dir";
-        // Use clear emoji icons: 📁 for folders, 📄 for files
-        var displayIcon = isDir ? "📁" : "📄";
+        var displayIcon = getFileIcon(item);
         var toggleIcon = isDir ? "▸" : "";
         var toggleClass = isDir ? "" : " empty";
         var gitStatus = item.gitStatus;
         var statusBadge = renderGitStatusBadge(gitStatus);
-        return '<div class="tree-item" data-path="' + escapeHtml(item.path) + '" data-type="' + escapeHtml(item.type) + '">' +
+        var meta = "";
+        if (!isDir && typeof item.size === "number") {
+          meta = '<span class="tree-meta" title="大小：' + escapeHtml(formatFileSize(item.size)) +
+            (item.mtime ? '\n修改时间：' + escapeHtml(formatRelativeTime(item.mtime)) : '') +
+            '">' + escapeHtml(formatFileSize(item.size)) + '</span>';
+        }
+        return '<div class="tree-item" data-path="' + escapeHtml(item.path) + '" data-type="' + escapeHtml(item.type) + '" data-name="' + escapeHtml(item.name) + '" tabindex="0">' +
           '<span class="tree-toggle' + toggleClass + '">' + toggleIcon + '</span>' +
           '<span class="tree-icon">' + displayIcon + '</span>' +
           '<span class="tree-name">' + name + '</span>' +
+          meta +
           (statusBadge ? '<span class="git-status-badge ' + statusBadge.class + '" title="' + statusBadge.title + '">' + statusBadge.text + '</span>' : '') +
         '</div>';
       }
 
       function renderGitStatusBadge(gitStatus) {
         if (!gitStatus) return null;
-        // Priority: staged > unstaged > untracked
         if (gitStatus.staged === "added") return { text: "A", class: "git-added", title: "已暂存（新增）" };
         if (gitStatus.staged === "modified") return { text: "M", class: "git-modified", title: "已暂存（修改）" };
         if (gitStatus.staged === "deleted") return { text: "D", class: "git-deleted", title: "已暂存（删除）" };
@@ -2975,19 +3118,44 @@
         var tree = document.getElementById("file-tree");
         if (!tree) return;
         tree.querySelectorAll(".tree-item[data-type='dir']").forEach(function(item) {
-          item.addEventListener("click", function() {
+          item.addEventListener("click", function(e) {
+            // Don't toggle when click came from the meta/badge area
             toggleTreeNode(item);
           });
         });
         tree.querySelectorAll(".tree-item[data-type='file']").forEach(function(item) {
-          item.addEventListener("dblclick", function() {
-            openFilePreview(item.dataset.path);
+          var openHandler = function() { openFilePreview(item.dataset.path); };
+          item.addEventListener("click", openHandler);
+          // Keep dblclick for old muscle memory; both work.
+          item.addEventListener("dblclick", openHandler);
+        });
+        // Long-press / right-click context menu (path actions)
+        var pressTimer = null;
+        var pressFired = false;
+        tree.querySelectorAll(".tree-item").forEach(function(item) {
+          item.addEventListener("contextmenu", function(e) {
+            e.preventDefault();
+            showFileContextMenu(e.clientX, e.clientY, item);
+          });
+          item.addEventListener("touchstart", function(e) {
+            pressFired = false;
+            pressTimer = setTimeout(function() {
+              pressFired = true;
+              var t = e.touches && e.touches[0];
+              showFileContextMenu(t ? t.clientX : 0, t ? t.clientY : 0, item);
+            }, 500);
+          }, { passive: true });
+          item.addEventListener("touchend", function() {
+            if (pressTimer) { clearTimeout(pressTimer); pressTimer = null; }
+          });
+          item.addEventListener("touchmove", function() {
+            if (pressTimer) { clearTimeout(pressTimer); pressTimer = null; }
           });
         });
       }
 
       function toggleTreeNode(item) {
-        var path = item.dataset.path;
+        var p = item.dataset.path;
         var toggle = item.querySelector(".tree-toggle");
         var children = item.nextElementSibling;
 
@@ -2995,14 +3163,24 @@
           var isOpen = children.classList.contains("open");
           children.classList.toggle("open");
           if (toggle) toggle.classList.toggle("open", !isOpen);
+          // swap folder icon between 📁 and 📂
+          var iconEl = item.querySelector(".tree-icon");
+          if (iconEl) iconEl.textContent = isOpen ? "📁" : "📂";
           return;
         }
 
-        // Load children with git status
         if (toggle) toggle.classList.add("open");
-        fetch("/api/directory?q=" + encodeURIComponent(path) + "&gitStatus=true", { credentials: "same-origin" })
+        var iconEl2 = item.querySelector(".tree-icon");
+        if (iconEl2) iconEl2.textContent = "📂";
+        var url = "/api/directory?q=" + encodeURIComponent(p) +
+          "&gitStatus=true" +
+          (state.fileExplorerShowHidden ? "&showHidden=true" : "");
+        fetch(url, { credentials: "same-origin" })
           .then(function(res) { return res.json(); })
-          .then(function(items) {
+          .then(function(payload) {
+            var items;
+            if (Array.isArray(payload)) items = payload;
+            else items = (payload && payload.items) || [];
             var childrenDiv = document.createElement("div");
             childrenDiv.className = "tree-children open";
             if (!items || items.length === 0) {
@@ -3018,81 +3196,458 @@
           .catch(function() {});
       }
 
+      // Walk up to the parent directory and re-render the tree.
+      function navigateExplorerUp() {
+        var cwd = getEffectiveExplorerCwd();
+        if (!cwd) return;
+        var parent = cwd.replace(/\/+$/, "").replace(/\/[^\/]+$/, "");
+        if (!parent) parent = "/";
+        if (parent === cwd) return;
+        refreshFileExplorer({ cwd: parent });
+      }
+
+      // Toggle the show-hidden flag and persist it.
+      function toggleExplorerHidden() {
+        state.fileExplorerShowHidden = !state.fileExplorerShowHidden;
+        try { localStorage.setItem("wand-file-show-hidden", state.fileExplorerShowHidden ? "1" : "0"); } catch (e) {}
+        var btn = document.getElementById("file-explorer-toggle-hidden");
+        if (btn) {
+          btn.classList.toggle("active", state.fileExplorerShowHidden);
+          btn.setAttribute("aria-pressed", state.fileExplorerShowHidden ? "true" : "false");
+          btn.textContent = state.fileExplorerShowHidden ? "👁" : "👁‍🗨";
+          btn.title = state.fileExplorerShowHidden ? "隐藏点开头文件" : "显示隐藏文件";
+        }
+        refreshFileExplorer();
+      }
+
+      function appendToComposer(text) {
+        var inputBox = document.getElementById("input-box");
+        if (!inputBox) return false;
+        var current = inputBox.value || "";
+        var sep = current && !current.endsWith(" ") && !current.endsWith("\n") ? " " : "";
+        inputBox.value = current + sep + text;
+        inputBox.dispatchEvent(new Event("input", { bubbles: true }));
+        try { inputBox.focus(); inputBox.setSelectionRange(inputBox.value.length, inputBox.value.length); } catch (e) {}
+        return true;
+      }
+
+      function copyTextSafely(text) {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          return navigator.clipboard.writeText(text).then(function() { return true; }).catch(function() { return fallback(); });
+        }
+        return Promise.resolve(fallback());
+        function fallback() {
+          try {
+            var ta = document.createElement("textarea");
+            ta.value = text;
+            ta.style.position = "fixed";
+            ta.style.left = "-9999px";
+            document.body.appendChild(ta);
+            ta.select();
+            var ok = document.execCommand("copy");
+            document.body.removeChild(ta);
+            return ok;
+          } catch (e) { return false; }
+        }
+      }
+
+      function showToastIfPossible(msg) {
+        if (typeof window.showToast === "function") { window.showToast(msg); return; }
+        // Lightweight transient toast.
+        var t = document.createElement("div");
+        t.className = "wand-mini-toast";
+        t.textContent = msg;
+        document.body.appendChild(t);
+        setTimeout(function() { t.classList.add("show"); }, 10);
+        setTimeout(function() {
+          t.classList.remove("show");
+          setTimeout(function() { t.remove(); }, 220);
+        }, 1600);
+      }
+
+      function dismissFileContextMenu() {
+        var menu = document.getElementById("file-context-menu");
+        if (menu) menu.remove();
+        document.removeEventListener("click", dismissFileContextMenu, true);
+        document.removeEventListener("scroll", dismissFileContextMenu, true);
+      }
+
+      function showFileContextMenu(x, y, item) {
+        dismissFileContextMenu();
+        var fullPath = item.dataset.path || "";
+        var type = item.dataset.type || "file";
+        var cwd = state.fileExplorerCwd || "";
+        var relativePath = fullPath;
+        if (cwd && fullPath.indexOf(cwd) === 0) {
+          relativePath = fullPath.slice(cwd.length).replace(/^\/+/, "") || ".";
+        }
+
+        var menu = document.createElement("div");
+        menu.id = "file-context-menu";
+        menu.className = "file-context-menu";
+        var actions = [];
+        if (type === "file") {
+          actions.push({ label: "打开预览", icon: "👁", run: function() { openFilePreview(fullPath); } });
+        } else {
+          actions.push({ label: "进入此目录", icon: "📂", run: function() { refreshFileExplorer({ cwd: fullPath }); } });
+        }
+        actions.push({ label: "复制完整路径", icon: "📋", run: function() {
+          copyTextSafely(fullPath).then(function() { showToastIfPossible("已复制路径"); });
+        }});
+        if (relativePath && relativePath !== fullPath) {
+          actions.push({ label: "复制相对路径", icon: "📋", run: function() {
+            copyTextSafely(relativePath).then(function() { showToastIfPossible("已复制相对路径"); });
+          }});
+        }
+        actions.push({ label: "粘贴路径到输入框", icon: "✏️", run: function() {
+          if (appendToComposer(fullPath)) showToastIfPossible("已粘贴到输入框");
+        }});
+        if (type === "file") {
+          actions.push({ label: "下载文件", icon: "⬇", run: function() {
+            var a = document.createElement("a");
+            a.href = "/api/file-raw?download=1&path=" + encodeURIComponent(fullPath);
+            a.rel = "noopener";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+          }});
+        }
+
+        menu.innerHTML = actions.map(function(act, i) {
+          return '<button type="button" class="file-context-menu-item" data-idx="' + i + '"><span class="ctx-icon">' + act.icon + '</span><span class="ctx-label">' + escapeHtml(act.label) + '</span></button>';
+        }).join("");
+        document.body.appendChild(menu);
+
+        // Position with viewport-bound clamp
+        var vw = window.innerWidth;
+        var vh = window.innerHeight;
+        var rect = menu.getBoundingClientRect();
+        var left = Math.min(x, vw - rect.width - 8);
+        var top = Math.min(y, vh - rect.height - 8);
+        menu.style.left = Math.max(8, left) + "px";
+        menu.style.top = Math.max(8, top) + "px";
+
+        menu.querySelectorAll(".file-context-menu-item").forEach(function(btn) {
+          btn.addEventListener("click", function(ev) {
+            ev.stopPropagation();
+            var idx = parseInt(btn.dataset.idx, 10);
+            dismissFileContextMenu();
+            if (actions[idx]) actions[idx].run();
+          });
+        });
+
+        // Close on outside click / scroll
+        setTimeout(function() {
+          document.addEventListener("click", dismissFileContextMenu, true);
+          document.addEventListener("scroll", dismissFileContextMenu, true);
+        }, 0);
+      }
+
+      // Module-level handle for keyboard nav between siblings.
+      var _activeFilePreview = null;
+
       function openFilePreview(filePath) {
-        var overlay = document.createElement("div");
-        overlay.className = "file-preview-overlay";
-        overlay.innerHTML =
-          '<div class="file-preview-modal">' +
-            '<div class="file-preview-header">' +
-              '<div class="file-preview-title">' +
-                '<span>📄</span>' +
-                '<span class="file-preview-filename">Loading...</span>' +
+        // If a modal is already open, just swap content (used by ←/→ navigation).
+        var overlay = _activeFilePreview && _activeFilePreview.overlay;
+        if (!overlay) {
+          overlay = document.createElement("div");
+          overlay.className = "file-preview-overlay";
+          overlay.innerHTML =
+            '<div class="file-preview-modal" tabindex="-1">' +
+              '<div class="file-preview-header">' +
+                '<div class="file-preview-title">' +
+                  '<span class="file-preview-icon">📄</span>' +
+                  '<span class="file-preview-filename">加载中…</span>' +
+                '</div>' +
+                '<div class="file-preview-path" title=""></div>' +
+                '<div class="file-preview-toolbar"></div>' +
+                '<button class="file-preview-close" title="关闭 (Esc)" aria-label="关闭">✕</button>' +
               '</div>' +
-              '<div class="file-preview-path" title="' + escapeHtml(filePath) + '">' + escapeHtml(filePath) + '</div>' +
-              '<button class="file-preview-close" title="Close">✕</button>' +
-            '</div>' +
-            '<div class="file-preview-body">' +
-              '<div class="file-preview-loading">Loading preview...</div>' +
-            '</div>' +
-          '</div>';
-        document.body.appendChild(overlay);
+              '<div class="file-preview-body">' +
+                '<div class="file-preview-loading">加载预览…</div>' +
+              '</div>' +
+            '</div>';
+          document.body.appendChild(overlay);
 
-        var closeBtn = overlay.querySelector(".file-preview-close");
-        var closeModal = function() {
-          overlay.remove();
-          document.removeEventListener("keydown", escHandler);
-        };
-        closeBtn.addEventListener("click", closeModal);
-        overlay.addEventListener("click", function(e) {
-          if (e.target === overlay) closeModal();
-        });
-        var escHandler = function(e) {
-          if (e.key === "Escape") closeModal();
-        };
-        document.addEventListener("keydown", escHandler);
+          var closeBtn = overlay.querySelector(".file-preview-close");
+          var closeModal = function() {
+            overlay.remove();
+            document.removeEventListener("keydown", keyHandler);
+            _activeFilePreview = null;
+          };
+          closeBtn.addEventListener("click", closeModal);
+          overlay.addEventListener("click", function(e) {
+            if (e.target === overlay) closeModal();
+          });
+          var keyHandler = function(e) {
+            if (e.key === "Escape") { closeModal(); return; }
+            if (!_activeFilePreview) return;
+            if (e.target && (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")) return;
+            if (e.key === "ArrowLeft") { e.preventDefault(); navigatePreviewSibling(-1); }
+            else if (e.key === "ArrowRight") { e.preventDefault(); navigatePreviewSibling(1); }
+          };
+          document.addEventListener("keydown", keyHandler);
+
+          _activeFilePreview = { overlay: overlay, close: closeModal, path: filePath, data: null };
+        } else {
+          _activeFilePreview.path = filePath;
+          // Reset header / body for the new file.
+          var titleEl = overlay.querySelector(".file-preview-title");
+          if (titleEl) {
+            titleEl.innerHTML = '<span class="file-preview-icon">📄</span><span class="file-preview-filename">加载中…</span>';
+          }
+          var toolbarEl = overlay.querySelector(".file-preview-toolbar");
+          if (toolbarEl) toolbarEl.innerHTML = "";
+          var pathEl = overlay.querySelector(".file-preview-path");
+          if (pathEl) { pathEl.textContent = ""; pathEl.title = ""; }
+          var bodyReset = overlay.querySelector(".file-preview-body");
+          if (bodyReset) bodyReset.innerHTML = '<div class="file-preview-loading">加载预览…</div>';
+        }
+
+        var pathDisplayEl = overlay.querySelector(".file-preview-path");
+        if (pathDisplayEl) {
+          pathDisplayEl.textContent = filePath;
+          pathDisplayEl.title = filePath;
+        }
 
         fetch("/api/file-preview?path=" + encodeURIComponent(filePath), { credentials: "same-origin" })
-          .then(function(res) { return res.json(); })
-          .then(function(data) {
-            if (data.error) {
-              var body = overlay.querySelector(".file-preview-body");
-              body.innerHTML = '<div class="file-preview-error"><span class="preview-error-icon">⚠</span><span>' + escapeHtml(data.error) + '</span></div>';
+          .then(function(res) {
+            return res.json().then(function(data) { return { ok: res.ok, status: res.status, data: data }; });
+          })
+          .then(function(result) {
+            var body = overlay.querySelector(".file-preview-body");
+            if (!result.ok || (result.data && result.data.error)) {
+              var msg = (result.data && result.data.error) || "加载失败";
+              if (result.status === 413 && result.data && result.data.size) {
+                msg += "（文件大小：" + formatFileSize(result.data.size) + "）";
+              }
+              body.innerHTML = '<div class="file-preview-error"><span class="preview-error-icon">⚠</span><span>' + escapeHtml(msg) + '</span></div>';
+              // Even when text preview is rejected for size, still allow download.
+              if (result.status === 413) {
+                renderPreviewToolbar(overlay, {
+                  kind: "binary",
+                  path: filePath,
+                  name: filePath.split("/").pop() || filePath,
+                  ext: "",
+                  size: (result.data && result.data.size) || 0,
+                });
+              }
               return;
             }
-            renderPreviewContent(overlay, data);
+            _activeFilePreview.data = result.data;
+            renderPreviewContent(overlay, result.data);
           })
-          .catch(function(err) {
+          .catch(function() {
             var body = overlay.querySelector(".file-preview-body");
-            body.innerHTML = '<div class="file-preview-error"><span class="preview-error-icon">⚠</span><span>Failed to load preview</span></div>';
+            body.innerHTML = '<div class="file-preview-error"><span class="preview-error-icon">⚠</span><span>加载预览失败</span></div>';
           });
       }
 
-      function renderPreviewContent(overlay, data) {
-        var filename = overlay.querySelector(".file-preview-filename");
-        filename.textContent = data.name;
+      // Move to the previous/next file sibling in the current explorer view.
+      function navigatePreviewSibling(direction) {
+        if (!_activeFilePreview) return;
+        var siblings = (state.allFiles || []).filter(function(item) { return item.type === "file"; });
+        if (!siblings.length) return;
+        var currentPath = _activeFilePreview.path;
+        var idx = -1;
+        for (var i = 0; i < siblings.length; i++) {
+          if (siblings[i].path === currentPath) { idx = i; break; }
+        }
+        if (idx < 0) return;
+        var nextIdx = (idx + direction + siblings.length) % siblings.length;
+        var nextPath = siblings[nextIdx].path;
+        if (nextPath && nextPath !== currentPath) openFilePreview(nextPath);
+      }
 
+      function renderPreviewContent(overlay, data) {
+        var filenameEl = overlay.querySelector(".file-preview-filename");
+        if (filenameEl) filenameEl.textContent = data.name;
+        var iconEl = overlay.querySelector(".file-preview-icon");
+        if (iconEl) iconEl.textContent = getFileIcon({ name: data.name, type: "file" });
+
+        // Title-bar badge: language for text, kind label for media/binary
+        var titleEl = overlay.querySelector(".file-preview-title");
+        var existingBadge = overlay.querySelector(".file-preview-lang");
+        if (existingBadge) existingBadge.remove();
         var langBadge = document.createElement("span");
         langBadge.className = "file-preview-lang";
-        langBadge.textContent = data.lang || data.ext.replace(".", "");
-        overlay.querySelector(".file-preview-title").appendChild(langBadge);
+        var labelMap = { image: "图片", pdf: "PDF", video: "视频", audio: "音频", binary: "二进制" };
+        if (data.kind === "text") {
+          langBadge.textContent = data.lang || (data.ext || "").replace(".", "") || "text";
+        } else {
+          langBadge.textContent = labelMap[data.kind] || (data.ext || "").replace(".", "") || data.kind;
+        }
+        if (titleEl) titleEl.appendChild(langBadge);
 
-        var body = overlay.querySelector(".file-preview-body");
+        renderPreviewToolbar(overlay, data);
 
-        if (data.lang === "markdown") {
-          body.innerHTML = '<div class="markdown-preview">' + renderMarkdownPreview(data.content) + '</div>';
+        var body = overlay.querySelector(".file-preview-body");
+        body.innerHTML = "";
+        body.classList.remove("kind-text", "kind-image", "kind-pdf", "kind-video", "kind-audio", "kind-binary");
+        body.classList.add("kind-" + (data.kind || "text"));
+
+        if (data.kind === "image") {
+          renderImagePreview(body, data);
+        } else if (data.kind === "pdf") {
+          renderPdfPreview(body, data);
+        } else if (data.kind === "video") {
+          renderVideoPreview(body, data);
+        } else if (data.kind === "audio") {
+          renderAudioPreview(body, data);
+        } else if (data.kind === "binary") {
+          renderBinaryPreview(body, data);
+        } else if ((data.lang === "markdown") || /\.(md|markdown|mdx)$/i.test(data.name || "")) {
+          body.innerHTML = '<div class="markdown-preview">' + renderMarkdownPreview(data.content || "") + '</div>';
         } else {
-          var highlighted = highlightCodePreview(data.content, data.lang);
-          var lines = highlighted.split("\n");
-          var lineNums = lines.map(function(_, i) { return i + 1; });
-
-          body.innerHTML =
-            '<div class="code-preview-wrapper">' +
-              '<div class="code-preview-lines">' + lineNums.join("\n") + '</div>' +
-              '<div class="code-preview-content"><pre>' + lines.join("\n") + '</pre></div>' +
-            '</div>';
+          renderTextPreview(body, data);
         }
       }
 
+      function renderTextPreview(body, data) {
+        var highlighted = highlightCodePreview(data.content || "", data.lang);
+        var lines = highlighted.split("\n");
+        var lineNums = lines.map(function(_, i) { return i + 1; });
+        body.innerHTML =
+          '<div class="code-preview-wrapper">' +
+            '<div class="code-preview-lines">' + lineNums.join("\n") + '</div>' +
+            '<div class="code-preview-content"><pre>' + lines.join("\n") + '</pre></div>' +
+          '</div>';
+      }
+
+      function renderImagePreview(body, data) {
+        var src = "/api/file-raw?path=" + encodeURIComponent(data.path);
+        body.innerHTML =
+          '<div class="image-preview-wrapper">' +
+            '<img class="image-preview-img" src="' + src + '" alt="' + escapeHtml(data.name) + '" />' +
+          '</div>';
+        var img = body.querySelector(".image-preview-img");
+        if (!img) return;
+        var zoomed = false;
+        img.addEventListener("click", function() {
+          zoomed = !zoomed;
+          img.classList.toggle("zoomed", zoomed);
+        });
+      }
+
+      function renderPdfPreview(body, data) {
+        var src = "/api/file-raw?path=" + encodeURIComponent(data.path);
+        body.innerHTML =
+          '<iframe class="pdf-preview-frame" src="' + src + '" title="' + escapeHtml(data.name) + '"></iframe>';
+      }
+
+      function renderVideoPreview(body, data) {
+        var src = "/api/file-raw?path=" + encodeURIComponent(data.path);
+        body.innerHTML =
+          '<div class="media-preview-wrapper">' +
+            '<video class="media-preview-video" controls preload="metadata" src="' + src + '">您的浏览器不支持 video 标签。</video>' +
+            '<div class="media-preview-meta">' + escapeHtml(formatFileSize(data.size)) + '</div>' +
+          '</div>';
+      }
+
+      function renderAudioPreview(body, data) {
+        var src = "/api/file-raw?path=" + encodeURIComponent(data.path);
+        body.innerHTML =
+          '<div class="media-preview-wrapper audio">' +
+            '<div class="media-preview-icon">🎵</div>' +
+            '<div class="media-preview-name">' + escapeHtml(data.name) + '</div>' +
+            '<audio class="media-preview-audio" controls preload="metadata" src="' + src + '">您的浏览器不支持 audio 标签。</audio>' +
+            '<div class="media-preview-meta">' + escapeHtml(formatFileSize(data.size)) + '</div>' +
+          '</div>';
+      }
+
+      function renderBinaryPreview(body, data) {
+        var rawUrl = "/api/file-raw?download=1&path=" + encodeURIComponent(data.path);
+        body.innerHTML =
+          '<div class="binary-preview-card">' +
+            '<div class="binary-preview-icon">📦</div>' +
+            '<div class="binary-preview-name">' + escapeHtml(data.name) + '</div>' +
+            '<div class="binary-preview-meta">' +
+              '<span>' + escapeHtml((data.ext || "").replace(/^\./, "") || "未知格式") + '</span>' +
+              '<span>·</span>' +
+              '<span>' + escapeHtml(formatFileSize(data.size)) + '</span>' +
+            '</div>' +
+            '<div class="binary-preview-path" title="' + escapeHtml(data.path) + '">' + escapeHtml(data.path) + '</div>' +
+            '<div class="binary-preview-actions">' +
+              '<a class="binary-preview-btn" href="' + rawUrl + '" download="' + escapeHtml(data.name) + '">下载文件</a>' +
+              '<button class="binary-preview-btn" type="button" data-action="view-cat">在终端中查看</button>' +
+            '</div>' +
+          '</div>';
+        var catBtn = body.querySelector('[data-action="view-cat"]');
+        if (catBtn) catBtn.addEventListener("click", function() {
+          if (appendToComposer('cat -- "' + data.path + '"')) {
+            showToastIfPossible("命令已粘贴到输入框");
+          }
+        });
+      }
+
+      function renderPreviewToolbar(overlay, data) {
+        var bar = overlay.querySelector(".file-preview-toolbar");
+        if (!bar) return;
+        bar.innerHTML = "";
+        var buttons = [];
+
+        // Common actions across all kinds
+        buttons.push({ label: "复制路径", icon: "📋", action: function() {
+          copyTextSafely(data.path).then(function() { showToastIfPossible("已复制路径"); });
+        }});
+        buttons.push({ label: "粘贴到输入框", icon: "✏️", action: function() {
+          if (appendToComposer(data.path)) showToastIfPossible("已粘贴到输入框");
+        }});
+        buttons.push({ label: "下载", icon: "⬇", action: function() {
+          var a = document.createElement("a");
+          a.href = "/api/file-raw?download=1&path=" + encodeURIComponent(data.path);
+          a.download = data.name || "";
+          document.body.appendChild(a);
+          a.click();
+          a.remove();
+        }});
+
+        if (data.kind === "text") {
+          buttons.push({ label: "复制全部", icon: "📄", action: function() {
+            copyTextSafely(data.content || "").then(function() { showToastIfPossible("已复制内容"); });
+          }});
+          buttons.push({ label: "自动换行", icon: "↩", toggleClass: "toolbar-active",
+            getInitial: function() {
+              var pre = overlay.querySelector(".code-preview-content pre");
+              return pre && pre.classList.contains("wrap");
+            },
+            action: function(btn) {
+              var pre = overlay.querySelector(".code-preview-content pre");
+              if (!pre) return;
+              pre.classList.toggle("wrap");
+              btn.classList.toggle("toolbar-active", pre.classList.contains("wrap"));
+            }
+          });
+          buttons.push({ label: "字号 −", icon: "A−", action: function() { adjustPreviewFontSize(overlay, -1); }});
+          buttons.push({ label: "字号 +", icon: "A+", action: function() { adjustPreviewFontSize(overlay, +1); }});
+        }
+
+        buttons.forEach(function(b) {
+          var btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "file-preview-toolbar-btn";
+          btn.title = b.label;
+          btn.setAttribute("aria-label", b.label);
+          btn.innerHTML = '<span class="toolbar-icon">' + b.icon + '</span>';
+          if (b.getInitial && b.getInitial()) btn.classList.add("toolbar-active");
+          btn.addEventListener("click", function(ev) {
+            ev.stopPropagation();
+            b.action(btn);
+          });
+          bar.appendChild(btn);
+        });
+      }
+
+      function adjustPreviewFontSize(overlay, delta) {
+        var pre = overlay.querySelector(".code-preview-content pre");
+        var nums = overlay.querySelector(".code-preview-lines");
+        if (!pre) return;
+        var current = parseFloat(getComputedStyle(pre).fontSize) || 13;
+        var next = Math.max(10, Math.min(22, current + delta));
+        pre.style.fontSize = next + "px";
+        if (nums) nums.style.fontSize = next + "px";
+      }
+
       function highlightCodePreview(code, lang) {
         // Escape HTML first
         var escaped = code
@@ -4020,6 +4575,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)
@@ -4415,27 +4972,28 @@
             topbarMoreBtn.classList.remove("active");
             topbarMoreBtn.setAttribute("aria-expanded", "false");
             switch (action) {
-              case "settings":
-                openSettingsModal();
+              case "copy-claude-session-id":
+                copySelectedSessionField("claudeSessionId", "Claude 会话 ID 已复制");
                 break;
-              case "refresh":
-                window.location.reload();
+              case "copy-cwd":
+                copySelectedSessionField("cwd", "工作目录已复制");
                 break;
-              case "install":
-                if (state.deferredPrompt) {
-                  state.deferredPrompt.prompt();
-                  state.deferredPrompt.userChoice.then(function() {
-                    state.deferredPrompt = null;
-                    state.showInstallPrompt = false;
-                    updateInstallPrompt();
-                  });
-                }
+              case "copy-session-id":
+                copySelectedSessionField("id", "会话 ID 已复制");
+                break;
+              case "worktree-merge":
+                if (state.selectedId) openWorktreeMergeModal(state.selectedId);
                 break;
-              case "logout":
-                logout();
+              case "worktree-cleanup":
+                if (state.selectedId) retryWorktreeCleanup(state.selectedId);
                 break;
-              case "switch-server":
-                switchServer();
+              case "delete-session":
+                if (state.selectedId) {
+                  var pendingId = state.selectedId;
+                  if (confirm("确定要删除当前会话吗？")) {
+                    deleteSession(pendingId);
+                  }
+                }
                 break;
             }
           });
@@ -4496,7 +5054,11 @@
           setChatAutoFollow(true, { scrollNow: true, smooth: true });
         });
         var fileRefresh = document.getElementById("file-explorer-refresh");
-        if (fileRefresh) fileRefresh.addEventListener("click", refreshFileExplorer);
+        if (fileRefresh) fileRefresh.addEventListener("click", function() { refreshFileExplorer(); });
+        var fileUp = document.getElementById("file-explorer-up");
+        if (fileUp) fileUp.addEventListener("click", navigateExplorerUp);
+        var fileToggleHidden = document.getElementById("file-explorer-toggle-hidden");
+        if (fileToggleHidden) fileToggleHidden.addEventListener("click", toggleExplorerHidden);
 
         // File search
         var fileSearchInput = document.getElementById("file-search-input");
@@ -5069,6 +5631,20 @@
         }
       }
 
+      /** Copy a string field of the currently selected session to clipboard. */
+      function copySelectedSessionField(field, successMsg) {
+        var session = state.sessions.find(function(s) { return s.id === state.selectedId; });
+        if (!session) return;
+        var value = session[field];
+        if (!value) {
+          showToast("当前会话没有可复制的内容。", "error");
+          return;
+        }
+        copyToClipboard(String(value), null, function() {
+          showToast(successMsg || "已复制", "info");
+        });
+      }
+
       /** Copy Claude session ID from badge to clipboard */
       function handleClaudeIdCopy(event) {
         var badge = event.target.closest("#claude-session-id-badge");
@@ -6002,31 +6578,14 @@
       }
 
       function getComposerPlaceholder(session, terminalInteractive) {
-        if (terminalInteractive) {
-          return "终端交互模式开启中，请直接在终端中输入";
-        }
-        if (session && isStructuredSession(session)) {
-          return session.provider === "codex"
-            ? "向 Codex 发送消息；chat 为结构化对话视图"
-            : "向 Claude 发送消息；chat 为结构化对话视图";
-        }
-        if (session && session.provider === "codex") {
-          if (session.status !== "running") {
-            return "Codex 会话已结束，无法继续发送";
-          }
-          return state.currentView === "terminal"
-            ? "向 Codex 发送输入；terminal 为原始 TUI 输出"
-            : "向 Codex 发送输入；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 && !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 +6766,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 +9949,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 +9970,7 @@
         .then(function(data) {
           if (data.error) {
             showToast(data.error, "error");
-            welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+            welcomeInput.placeholder = "输入消息";
             welcomeInput.disabled = false;
             return;
           }
@@ -9287,7 +9983,7 @@
           switchToSessionView(data.id);
           subscribeToSession(data.id);
           loadOutput(data.id).then(function() {
-            welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+            welcomeInput.placeholder = "输入消息";
             welcomeInput.disabled = false;
             focusInputBox(true);
           });
@@ -9296,7 +9992,7 @@
           showToast((error && error.message) || (preferredTool === "codex"
             ? "无法启动 Codex 会话。"
             : "无法启动 Claude 会话。"), "error");
-          welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+          welcomeInput.placeholder = "输入消息";
           welcomeInput.disabled = false;
         });
       }
@@ -10672,7 +11368,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 +11390,7 @@
         .then(function(data) {
           if (data.error) {
             showToast(data.error, "error");
-            welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+            welcomeInput.placeholder = "输入消息";
             welcomeInput.disabled = false;
             return null;
           }
@@ -10702,11 +11398,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 +16668,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 +16757,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.
        */