@co0ontty/wand 1.31.2 → 1.32.0

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

@@ -1,22 +1,28 @@
     // Register Service Worker for PWA
-    // For self-signed certificates, we need to handle certificate errors gracefully
+    // 自签证书场景下 SW 注册会被浏览器强拒（规范要求 secure context + 证书可信，
+    // 即便用户已"高级 → 继续访问"也不行）。这里只能优雅降级，并把解决路径打到 console。
     if ('serviceWorker' in navigator) {
-      // First, try to fetch the service worker script with a custom handler for certificate errors
       fetch('/sw.js', { cache: 'no-cache' })
         .then(function(response) {
           if (response.ok) {
             return navigator.serviceWorker.register('/sw.js');
           }
-          // If fetch fails (e.g., certificate error), skip service worker registration
           console.log('SW fetch failed, skipping service worker registration');
           return Promise.reject('Service worker script not available');
         })
         .catch(function(e) {
-          // Distinguish between certificate errors and other failures
-          if (e.name === 'TypeError' || e.message.includes('certificate')) {
-            console.log('SW registration skipped: likely self-signed certificate issue');
+          var msg = (e && e.message) || String(e || '');
+          var isCertIssue = (e && e.name === 'TypeError') || /certificate|SSL|ERR_CERT/i.test(msg);
+          if (isCertIssue && location.protocol === 'https:') {
+            console.warn(
+              '[wand] PWA / Service Worker 因 TLS 证书不可信而跳过。\n' +
+              '解决办法（任选一种）：\n' +
+              '  1) 从 ' + location.origin + '/cert/server.crt 下载本机自签证书，导入到系统/浏览器"受信任根证书颁发机构"\n' +
+              '  2) 在本机用 mkcert 签发受信任证书，并在 ~/.wand/config.json 配置 tls.certPath / tls.keyPath\n' +
+              '  3) 用内网 CA 或 Let\'s Encrypt 给域名签真证书（同上配置 tls）'
+            );
           } else {
-            console.log('SW registration failed:', e.message || e);
+            console.log('SW registration failed:', msg);
           }
         });
 
@@ -137,11 +143,9 @@
         })(), // 跨会话排队消息 [{ id, text, cwd, mode, tool }]
         structuredInputQueue: [], // 结构化会话同会话排队消息
         // 排队条 UI 局部状态 ——
-        //   queueBarExpanded: 折叠条点击展开成下拉面板
-        //   queueBarItemExpanded: 展开面板里被点开看完整内容的 item 下标集合
+        //   queueBarHoverIndex: 当前被鼠标悬停的气泡下标（null 时默认展开队首）
         //   queueBarDrag: 拖拽排序进行中时的临时状态（pointer 捕获、起始坐标、参考 rect）
-        queueBarExpanded: false,
-        queueBarItemExpanded: {},
+        queueBarHoverIndex: null,
         queueBarDrag: null,
         drafts: {},
         isSyncingInputBox: false,
@@ -293,9 +297,6 @@
         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,
@@ -318,6 +319,59 @@
         })()
       };
 
+      // ── 统一线性图标库 ──
+      // 替代页面里散落的 emoji（🛡 / ⌨ / 📁 / 🔔 …）。这些 emoji 在系统字体里渲染成
+      // 彩色卡通形态，与项目温暖米色 + 棕橙的复古主题视觉冲突明显。这里集中维护
+      // currentColor 线性 SVG，让图标跟随父级文字颜色变化，hover / active 状态自然继承。
+      var ICON_PATHS = {
+        // shape sets — 24x24 viewbox, currentColor stroke
+        shield:    '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
+        shieldCheck: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/>',
+        keyboard:  '<rect x="2" y="6" width="20" height="12" rx="2"/><line x1="6" y1="10" x2="6" y2="10"/><line x1="10" y1="10" x2="10" y2="10"/><line x1="14" y1="10" x2="14" y2="10"/><line x1="18" y1="10" x2="18" y2="10"/><line x1="6" y1="14" x2="6" y2="14"/><line x1="18" y1="14" x2="18" y2="14"/><line x1="9" y1="14" x2="15" y2="14"/>',
+        cloud:     '<path d="M17.5 19a4.5 4.5 0 1 0-1-8.9 6 6 0 0 0-11.5 1.7A4 4 0 0 0 6 19h11.5z"/>',
+        terminal:  '<polyline points="4 7 9 12 4 17"/><line x1="12" y1="17" x2="20" y2="17"/>',
+        chat:      '<path d="M21 12a8 8 0 0 1-12.9 6.3L3 20l1.7-5.1A8 8 0 1 1 21 12z"/>',
+        folder:    '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+        folderOpen:'<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2"/><path d="M3 9h18l-2 8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+        trash:     '<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>',
+        slash:     '<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>',
+        chevronDown: '<polyline points="6 9 12 15 18 9"/>',
+        chevronUp:   '<polyline points="6 15 12 9 18 15"/>',
+        chevronRight:'<polyline points="9 6 15 12 9 18"/>',
+        bell:      '<path d="M18 16v-5a6 6 0 1 0-12 0v5l-2 2h16z"/><path d="M10 21a2 2 0 0 0 4 0"/>',
+        music:     '<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>',
+        vibrate:   '<rect x="9" y="4" width="6" height="16" rx="1"/><path d="M5 8v8"/><path d="M3 10v4"/><path d="M19 8v8"/><path d="M21 10v4"/>',
+        globe:     '<circle cx="12" cy="12" r="9"/><line x1="3" y1="12" x2="21" y2="12"/><path d="M12 3a14 14 0 0 1 0 18"/><path d="M12 3a14 14 0 0 0 0 18"/>',
+        smartphone:'<rect x="6" y="2" width="12" height="20" rx="2.5"/><line x1="11" y1="18" x2="13" y2="18"/>',
+        desktop:   '<rect x="3" y="4" width="18" height="12" rx="2"/><line x1="8" y1="20" x2="16" y2="20"/><line x1="12" y1="16" x2="12" y2="20"/>',
+        link:      '<path d="M10 14a4.5 4.5 0 0 0 6.36 0l3-3a4.5 4.5 0 1 0-6.36-6.36l-1.42 1.41"/><path d="M14 10a4.5 4.5 0 0 0-6.36 0l-3 3a4.5 4.5 0 1 0 6.36 6.36l1.42-1.41"/>',
+        palette:   '<circle cx="13.5" cy="6.5" r="1"/><circle cx="17.5" cy="10.5" r="1"/><circle cx="8.5" cy="7.5" r="1"/><circle cx="6.5" cy="12.5" r="1"/><path d="M12 3a9 9 0 1 0 0 18 1.5 1.5 0 0 0 1.1-2.5 1.5 1.5 0 0 1 1.1-2.5h2.3A4.5 4.5 0 0 0 21 11.5C21 6.8 16.97 3 12 3z"/>',
+        play:      '<polygon points="6 4 20 12 6 20 6 4"/>',
+        inbox:     '<polyline points="22 13 16 13 14 16 10 16 8 13 2 13"/><path d="M5 5h14l3 8v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z"/>',
+        zap:       '<polygon points="13 2 4 14 11 14 10 22 20 9 13 9 13 2"/>',
+        wrench:    '<path d="M14.7 6.3a4 4 0 1 1 4 4l-9 9-3.5 1 1-3.5 7.5-7.5z"/>',
+        edit:      '<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/>',
+        check:     '<polyline points="5 12 10 17 19 7"/>',
+        signal:    '<path d="M2 12a15 15 0 0 1 20 0"/><path d="M5 16a10 10 0 0 1 14 0"/><path d="M9 20a4 4 0 0 1 6 0"/><circle cx="12" cy="20" r="0.5" fill="currentColor"/>',
+        file:      '<path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="14 3 14 9 20 9"/>',
+        image:     '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.5"/><polyline points="3 18 9 12 14 17 21 12"/>',
+        sigma:     '<polyline points="18 4 6 4 13 12 6 20 18 20"/>'
+      };
+      // 渲染 SVG 字符串。size 默认 14，strokeWidth 默认 1.8（与现有 send/stop 按钮线宽接近）。
+      // cls 用于添加额外 class（如 .composer-pill-icon），便于 CSS 微调。
+      function iconSvg(name, opts) {
+        var path = ICON_PATHS[name];
+        if (!path) return "";
+        opts = opts || {};
+        var size = opts.size || 14;
+        var stroke = opts.strokeWidth || 1.8;
+        var cls = opts.cls ? ' class="' + opts.cls + '"' : "";
+        var fill = opts.fill || "none";
+        return '<svg' + cls + ' width="' + size + '" height="' + size + '" viewBox="0 0 24 24"' +
+          ' fill="' + fill + '" stroke="currentColor" stroke-width="' + stroke + '"' +
+          ' stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + path + '</svg>';
+      }
+
       // ── Structured session status bar (in-flight timer) ──
       var _statusBarTimerId = null;
       var _statusBarStartTime = 0;
@@ -1313,7 +1367,7 @@
                 app.innerHTML =
                   '<div class="boot-loading">' +
                     '<div class="boot-loading-card">' +
-                      '<div class="boot-loading-text" style="font-size:1.3em;margin-bottom:12px">📡 无法连接到服务器</div>' +
+                      '<div class="boot-loading-text" style="font-size:1.3em;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px">' + iconSvg("signal", { size: 20, strokeWidth: 1.8 }) + '<span>无法连接到服务器</span></div>' +
                       '<div class="boot-loading-text" style="opacity:0.7;font-size:0.95em">请检查网络连接或确认 Wand 服务正在运行。</div>' +
                       '<button onclick="location.reload()" style="margin-top:18px;padding:8px 24px;border-radius:8px;border:1px solid rgba(150,118,85,0.3);background:rgba(255,255,255,0.8);cursor:pointer;font-size:0.95em">重试</button>' +
                     '</div>' +
@@ -1418,10 +1472,10 @@
           '</span>' +
           '<span class="approval-stats-popup" id="approval-stats-popup">' +
             '<span class="approval-stats-popup-title">自动批准统计</span>' +
-            (stats.command > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">⚡</span><span class="approval-stats-row-label">命令执行</span><span class="approval-stats-row-count">' + stats.command + '</span></span>' : '') +
-            (stats.file > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">📝</span><span class="approval-stats-row-label">文件写入</span><span class="approval-stats-row-count">' + stats.file + '</span></span>' : '') +
-            (stats.tool > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">🔧</span><span class="approval-stats-row-label">其他工具</span><span class="approval-stats-row-count">' + stats.tool + '</span></span>' : '') +
-            '<span class="approval-stats-row approval-stats-row-total"><span class="approval-stats-row-icon">∑</span><span class="approval-stats-row-label">合计</span><span class="approval-stats-row-count">' + stats.total + '</span></span>' +
+            (stats.command > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">' + iconSvg("terminal", { size: 12, strokeWidth: 1.8 }) + '</span><span class="approval-stats-row-label">命令执行</span><span class="approval-stats-row-count">' + stats.command + '</span></span>' : '') +
+            (stats.file > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">' + iconSvg("edit", { size: 12, strokeWidth: 1.8 }) + '</span><span class="approval-stats-row-label">文件写入</span><span class="approval-stats-row-count">' + stats.file + '</span></span>' : '') +
+            (stats.tool > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">' + iconSvg("wrench", { size: 12, strokeWidth: 1.8 }) + '</span><span class="approval-stats-row-label">其他工具</span><span class="approval-stats-row-count">' + stats.tool + '</span></span>' : '') +
+            '<span class="approval-stats-row approval-stats-row-total"><span class="approval-stats-row-icon">' + iconSvg("sigma", { size: 12, strokeWidth: 1.8 }) + '</span><span class="approval-stats-row-label">合计</span><span class="approval-stats-row-count">' + stats.total + '</span></span>' +
           '</span>' +
         '</span>';
       }
@@ -1633,12 +1687,6 @@
                     '<span class="file-side-panel-title">文件</span>' +
                   '</div>' +
                   '<div class="file-side-panel-header-actions">' +
-                    '<button class="file-side-panel-iconbtn file-explorer-toggle-hidden' +
-                      (state.fileExplorerShowHidden ? ' active' : '') + '" id="file-explorer-toggle-hidden" type="button" title="' +
-                      (state.fileExplorerShowHidden ? "隐藏点开头文件" : "显示隐藏文件") + '" aria-pressed="' +
-                      (state.fileExplorerShowHidden ? "true" : "false") + '" aria-label="切换显示隐藏文件">' +
-                      wandFileIcon(state.fileExplorerShowHidden ? "eye" : "eye-off", { size: 15 }) +
-                    '</button>' +
                     '<button class="file-side-panel-iconbtn" id="file-explorer-refresh" type="button" title="刷新" aria-label="刷新文件列表">' +
                       wandFileIcon("refresh", { size: 15 }) +
                     '</button>' +
@@ -1687,26 +1735,30 @@
                   '<p class="blank-chat-subtitle">支持终端 PTY 会话与结构化 chat 会话，两种模式可并存。</p>' +
                   '<div class="blank-chat-tools">' +
                     '<button class="blank-chat-tool-btn" id="welcome-tool-claude" type="button">' +
-                      '<span class="tool-icon">🤖</span>新建终端会话' +
+                      '<span class="tool-icon">' + iconSvg("terminal", { size: 16, strokeWidth: 1.8 }) + '</span>新建终端会话' +
                     '</button>' +
                     '<button class="blank-chat-tool-btn" id="welcome-tool-codex" type="button">' +
-                      '<span class="tool-icon">⌘</span>新建 Codex 会话' +
+                      '<span class="tool-icon tool-icon-text">⌘</span>新建 Codex 会话' +
                     '</button>' +
                     '<button class="blank-chat-tool-btn" id="welcome-tool-structured" type="button">' +
-                      '<span class="tool-icon">💬</span>新建结构化会话' +
+                      '<span class="tool-icon">' + iconSvg("chat", { size: 16, strokeWidth: 1.8 }) + '</span>新建结构化会话' +
                     '</button>' +
                   '</div>' +
                   '<div class="blank-chat-cwd-wrap">' +
                     '<div class="blank-chat-cwd" id="blank-chat-cwd" role="button" tabindex="0" title="点击切换工作目录">' +
-                      '<span class="blank-chat-cwd-icon">📁</span>' +
+                      '<span class="blank-chat-cwd-icon">' + iconSvg("folder", { size: 13, strokeWidth: 1.8 }) + '</span>' +
                       '<span class="blank-chat-cwd-path" id="blank-chat-cwd-path">' + escapeHtml(getEffectiveCwd()) + '</span>' +
-                      '<span class="blank-chat-cwd-arrow" id="blank-chat-cwd-arrow">▼</span>' +
+                      '<span class="blank-chat-cwd-arrow" id="blank-chat-cwd-arrow">' + iconSvg("chevronDown", { size: 11, strokeWidth: 2 }) + '</span>' +
                     '</div>' +
                     '<div class="blank-chat-cwd-dropdown hidden" id="blank-chat-cwd-dropdown"></div>' +
                   '</div>' +
                 '</div>' +
               '</div>' +
               '<div class="input-panel' + (state.selectedId ? "" : " hidden") + '">' +
+                // 排队气泡宿主：默认 display:none，updateQueueBar() 在 queuedMessages 非空时
+                // 显形。位置在 composer-top-row（含 "回复中" 状态条）之上，对话框右下角，
+                // 不进入输入框内部。所有内容由 updater 注入；这里只保留稳定的外层骨架。
+                '<div id="queue-bar-host" class="queue-bar-host" hidden></div>' +
                 '<div class="composer-top-row">' +
                   '<div id="todo-progress" class="todo-progress hidden">' +
                     '<div class="todo-progress-header" id="todo-progress-toggle">' +
@@ -1727,11 +1779,6 @@
                     '<ul class="todo-progress-list" id="todo-progress-list"></ul>' +
                   '</div>' +
                 '</div>' +
-                // 排队条宿主：默认 display:none，updateQueueBar() 在 queuedMessages 非空时
-                // 显形。结构上夹在 composer-top-row（todo 进度）和 input-composer（输入框 +
-                // 工具栏）之间，位置正好"在输入框上方、对话框右下角"。所有内容由 updater
-                // 注入；这里只保留稳定的外层骨架，便于 renderAppShell 全量重建后无缝复位。
-                '<div id="queue-bar-host" class="queue-bar-host" hidden></div>' +
                 '<div class="input-composer">' +
                   '<button id="prompt-optimize-btn" class="prompt-optimize-btn" type="button" title="提示词优化（AI）" aria-label="提示词优化">' +
                     '<svg class="prompt-optimize-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
@@ -1778,7 +1825,7 @@
                         '</span>' +
                       '</span>' +
                       renderAutoApproveChip(selectedSession) +
-                      '<button id="terminal-interactive-toggle-top" class="composer-pill composer-pill-chip composer-interactive-toggle' + (state.terminalInteractive ? " active" : "") + '" type="button" title="切换终端交互模式">⌨</button>' +
+                      '<button id="terminal-interactive-toggle-top" class="composer-pill composer-pill-chip composer-interactive-toggle' + (state.terminalInteractive ? " active" : "") + '" type="button" title="切换终端交互模式" aria-label="切换终端交互模式">' + iconSvg("keyboard", { size: 13, strokeWidth: 1.7, cls: "composer-pill-icon" }) + '</button>' +
                       '<span class="permission-actions hidden" id="permission-actions">' +
                         '<span class="permission-actions-divider"></span>' +
                         '<span class="permission-actions-label" id="permission-actions-label">等待授权</span>' +
@@ -1813,7 +1860,7 @@
                     ? (function() {
                         var bits = "";
                         if (selectedSession.provider === "claude" && selectedSession.claudeSessionId) {
-                          bits += '<span id="claude-session-id-badge" class="claude-session-id-badge" data-claude-id="' + escapeHtml(selectedSession.claudeSessionId) + '" title="点击复制 Claude 会话 ID">☁ ' + escapeHtml(selectedSession.claudeSessionId.slice(0, 8)) + '</span>';
+                          bits += '<span id="claude-session-id-badge" class="claude-session-id-badge" data-claude-id="' + escapeHtml(selectedSession.claudeSessionId) + '" title="点击复制 Claude 会话 ID">' + iconSvg("cloud", { size: 11, strokeWidth: 1.7, cls: "claude-session-id-icon" }) + '<span class="claude-session-id-text">' + escapeHtml(selectedSession.claudeSessionId.slice(0, 8)) + '</span></span>';
                         }
                         if (!isStructuredSession(selectedSession) && selectedSession.exitCode !== undefined && selectedSession.exitCode !== null) {
                           if (bits) bits += '<span class="session-info-separator">|</span>';
@@ -1834,12 +1881,12 @@
                   '</div>' +
                   '<div class="modal-body">' +
                     '<div class="folder-picker-quick-row">' +
-                      '<button class="folder-picker-quick-btn" data-path="/tmp">🗑️ 临时目录</button>' +
-                      '<button class="folder-picker-quick-btn" data-path="/">📁 根目录</button>' +
+                      '<button class="folder-picker-quick-btn btn-with-icon" data-path="/tmp">' + iconSvg("trash", { size: 13, strokeWidth: 1.7 }) + '<span>临时目录</span></button>' +
+                      '<button class="folder-picker-quick-btn btn-with-icon" data-path="/">' + iconSvg("folder", { size: 13, strokeWidth: 1.7 }) + '<span>根目录</span></button>' +
                     '</div>' +
                     '<div id="folder-breadcrumb" class="folder-breadcrumb"></div>' +
                     '<div class="folder-picker">' +
-                      '<span class="folder-picker-icon">📁</span>' +
+                      '<span class="folder-picker-icon">' + iconSvg("folder", { size: 15, strokeWidth: 1.7 }) + '</span>' +
                       '<input type="text" id="folder-picker-input" class="folder-picker-input" value="" placeholder="输入或选择工作目录..." autocomplete="off" />' +
                     '</div>' +
                     '<div id="folder-picker-dropdown" class="folder-picker-dropdown hidden"></div>' +
@@ -2751,7 +2798,7 @@
                 '</div>' +
                 '<div class="settings-update-section" id="web-update-section">' +
                   '<div class="settings-section-head">' +
-                    '<span class="settings-section-icon">🌐</span>' +
+                    '<span class="settings-section-icon">' + iconSvg("globe", { size: 18, strokeWidth: 1.7 }) + '</span>' +
                     '<div class="settings-section-head-text">' +
                       '<h4 class="settings-section-heading">Web 端</h4>' +
                       '<p class="settings-section-sub">浏览器访问的服务版本</p>' +
@@ -2780,7 +2827,7 @@
                 '</div>' +
                 '<div class="settings-update-section hidden" id="android-apk-section">' +
                   '<div class="settings-section-head">' +
-                    '<span class="settings-section-icon">📱</span>' +
+                    '<span class="settings-section-icon">' + iconSvg("smartphone", { size: 18, strokeWidth: 1.7 }) + '</span>' +
                     '<div class="settings-section-head-text">' +
                       '<h4 class="settings-section-heading">Android App</h4>' +
                       '<p class="settings-section-sub">原生客户端版本与 APK 下载</p>' +
@@ -2814,7 +2861,7 @@
                 '</div>' +
                 '<div class="settings-update-section hidden" id="macos-dmg-section">' +
                   '<div class="settings-section-head">' +
-                    '<span class="settings-section-icon">🖥️</span>' +
+                    '<span class="settings-section-icon">' + iconSvg("desktop", { size: 18, strokeWidth: 1.7 }) + '</span>' +
                     '<div class="settings-section-head-text">' +
                       '<h4 class="settings-section-heading">macOS App</h4>' +
                       '<p class="settings-section-sub">原生客户端版本与 DMG 下载</p>' +
@@ -2848,7 +2895,7 @@
                 '</div>' +
                 '<div class="settings-update-section" id="android-connect-section">' +
                   '<div class="settings-section-head">' +
-                    '<span class="settings-section-icon">🔗</span>' +
+                    '<span class="settings-section-icon">' + iconSvg("link", { size: 18, strokeWidth: 1.7 }) + '</span>' +
                     '<div class="settings-section-head-text">' +
                       '<h4 class="settings-section-heading">App 连接码</h4>' +
                       '<p class="settings-section-sub">粘贴到 Android App 即可自动连接，无需密码；改密码后失效。</p>' +
@@ -2876,7 +2923,7 @@
                 '</div>' +
                 '<div class="settings-notification-section">' +
                   '<div class="settings-section-head">' +
-                    '<span class="settings-section-icon">🔔</span>' +
+                    '<span class="settings-section-icon">' + iconSvg("bell", { size: 18, strokeWidth: 1.7 }) + '</span>' +
                     '<div class="settings-section-head-text">' +
                       '<h4 class="settings-section-heading">通知偏好</h4>' +
                       '<p class="settings-section-sub">提示音与应用内通知气泡</p>' +
@@ -2910,7 +2957,7 @@
                 '</div>' +
                 '<div id="native-sound-section" class="settings-notification-section hidden">' +
                   '<div class="settings-section-head">' +
-                    '<span class="settings-section-icon">🎵</span>' +
+                    '<span class="settings-section-icon">' + iconSvg("music", { size: 18, strokeWidth: 1.7 }) + '</span>' +
                     '<div class="settings-section-head-text">' +
                       '<h4 class="settings-section-heading">系统通知铃声</h4>' +
                       '<p class="settings-section-sub">选择 Android 系统通知使用的铃声</p>' +
@@ -2918,12 +2965,12 @@
                   '</div>' +
                   '<div class="settings-row-with-action">' +
                     '<select id="native-sound-select" class="field-input field-select"></select>' +
-                    '<button id="native-sound-preview" class="btn btn-secondary btn-sm" type="button">▶ 试听</button>' +
+                    '<button id="native-sound-preview" class="btn btn-secondary btn-sm btn-with-icon" type="button">' + iconSvg("play", { size: 11, strokeWidth: 1.8, fill: "currentColor" }) + '<span>试听</span></button>' +
                   '</div>' +
                 '</div>' +
                 '<div id="native-haptic-section" class="settings-notification-section hidden">' +
                   '<div class="settings-section-head">' +
-                    '<span class="settings-section-icon">📳</span>' +
+                    '<span class="settings-section-icon">' + iconSvg("vibrate", { size: 18, strokeWidth: 1.7 }) + '</span>' +
                     '<div class="settings-section-head-text">' +
                       '<h4 class="settings-section-heading">触感反馈</h4>' +
                       '<p class="settings-section-sub">按钮操作和任务完成时提供振动反馈</p>' +
@@ -2941,7 +2988,7 @@
                 '</div>' +
                 '<div class="settings-notification-section">' +
                   '<div class="settings-section-head">' +
-                    '<span class="settings-section-icon">🌐</span>' +
+                    '<span class="settings-section-icon">' + iconSvg("globe", { size: 18, strokeWidth: 1.7 }) + '</span>' +
                     '<div class="settings-section-head-text">' +
                       '<h4 class="settings-section-heading">浏览器通知</h4>' +
                       '<p class="settings-section-sub">来自系统通知中心的弹窗</p>' +
@@ -3059,7 +3106,7 @@
                 (typeof WandNative !== "undefined" && typeof WandNative.getAppIcon === "function" ?
                 '<div class="settings-app-icon-block">' +
                   '<div class="settings-section-head">' +
-                    '<span class="settings-section-icon">🎨</span>' +
+                    '<span class="settings-section-icon">' + iconSvg("palette", { size: 18, strokeWidth: 1.7 }) + '</span>' +
                     '<div class="settings-section-head-text">' +
                       '<h4 class="settings-section-heading">应用图标</h4>' +
                       '<p class="settings-section-sub">选择 App 启动器图标，返回桌面后生效</p>' +
@@ -3937,8 +3984,7 @@
           cwdEl.title = cwd;
         }
         var url = "/api/directory?q=" + encodeURIComponent(cwd) +
-          "&gitStatus=true" +
-          (state.fileExplorerShowHidden ? "&showHidden=true" : "");
+          "&gitStatus=true";
         fetch(url, { credentials: "same-origin" })
           .then(function(res) {
             if (!res.ok) throw new Error("Failed to load directory.");
@@ -4101,8 +4147,7 @@
         var iconEl2 = item.querySelector(".tree-icon");
         if (iconEl2) iconEl2.textContent = "📂";
         var url = "/api/directory?q=" + encodeURIComponent(p) +
-          "&gitStatus=true" +
-          (state.fileExplorerShowHidden ? "&showHidden=true" : "");
+          "&gitStatus=true";
         fetch(url, { credentials: "same-origin" })
           .then(function(res) { return res.json(); })
           .then(function(payload) {
@@ -4134,20 +4179,6 @@
         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.innerHTML = wandFileIcon(state.fileExplorerShowHidden ? "eye" : "eye-off", { size: 15 });
-          btn.title = state.fileExplorerShowHidden ? "隐藏点开头文件" : "显示隐藏文件";
-        }
-        refreshFileExplorer();
-      }
-
       function appendToComposer(text) {
         var inputBox = document.getElementById("input-box");
         if (!inputBox) return false;
@@ -4982,9 +5013,9 @@
         // 新建会话时显示简化的目录选择器（单行紧凑设计）
         return '<div class="folder-picker-compact" id="folder-picker-container">' +
           '<div class="folder-picker-compact-row">' +
-            '<span class="folder-picker-compact-icon">📁</span>' +
+            '<span class="folder-picker-compact-icon">' + iconSvg("folder", { size: 13, strokeWidth: 1.7 }) + '</span>' +
             '<input type="text" id="folder-picker-input" class="folder-picker-compact-input" value="' + escapeHtml(currentDir) + '" placeholder="工作目录" autocomplete="off" />' +
-            '<button type="button" id="folder-picker-toggle" class="folder-picker-toggle" title="选择目录">▼</button>' +
+            '<button type="button" id="folder-picker-toggle" class="folder-picker-toggle" title="选择目录" aria-label="选择目录">' + iconSvg("chevronDown", { size: 11, strokeWidth: 2 }) + '</button>' +
           '</div>' +
           '<div id="folder-picker-dropdown" class="folder-picker-dropdown hidden">' +
             '<div class="folder-picker-quick-row">' +
@@ -5014,7 +5045,7 @@
         }
 
         return '<div class="working-dir-indicator" id="working-dir-indicator" title="' + escapeHtml(displayDir) + '" data-path="' + escapeHtml(displayDir) + '">' +
-          '<span class="working-dir-indicator-icon">📁</span>' +
+          '<span class="working-dir-indicator-icon">' + iconSvg("folder", { size: 12, strokeWidth: 1.7 }) + '</span>' +
           '<span class="working-dir-indicator-path">' + escapeHtml(displayPath) + '</span>' +
         '</div>';
       }
@@ -6337,8 +6368,6 @@
         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);
 
         // 路径输入框：支持点击修改路径，回车跳转，Esc 撤销。
         var fileCwdInput = document.getElementById("file-explorer-cwd");
@@ -6787,14 +6816,8 @@
         setupVisualViewportHandlers();
 
         // 排队条：每次 shell 重渲后，重新挂事件代理 + 刷新内容。
-        // document-level 的 ESC / 外点击 handler 只挂一次（state.__queueBarGlobalAttached 守门）。
         attachQueueBarDelegates();
         updateQueueBar();
-        if (!state.__queueBarGlobalAttached) {
-          state.__queueBarGlobalAttached = true;
-          document.addEventListener("pointerdown", handleQueueBarOutsideClick, true);
-          document.addEventListener("keydown", handleQueueBarKeydown, true);
-        }
       }
 
       function saveWorkingDir(path) {
@@ -8417,8 +8440,8 @@
         if (isAutoApproveImpliedByMode(session)) return "";
         var enabled = !!session.autoApprovePermissions;
         return enabled
-          ? '<span id="auto-approve-toggle" class="composer-pill composer-pill-chip auto-approve-indicator active" title="自动批准已启用 — 点击关闭">🛡 自动</span>'
-          : '<span id="auto-approve-toggle" class="composer-pill composer-pill-chip auto-approve-indicator" title="自动批准已关闭 — 点击开启">🛡 手动</span>';
+          ? '<span id="auto-approve-toggle" class="composer-pill composer-pill-chip auto-approve-indicator active" title="自动批准已启用 — 点击关闭">' + iconSvg("shieldCheck", { size: 12, strokeWidth: 1.7, cls: "composer-pill-icon" }) + '<span class="composer-pill-label">自动</span></span>'
+          : '<span id="auto-approve-toggle" class="composer-pill composer-pill-chip auto-approve-indicator" title="自动批准已关闭 — 点击开启">' + iconSvg("shield", { size: 12, strokeWidth: 1.7, cls: "composer-pill-icon" }) + '<span class="composer-pill-label">手动</span></span>';
       }
 
       function fetchAvailableModels() {
@@ -11478,7 +11501,7 @@
           var a = items[i];
           var thumb = a.previewUrl
             ? '<img src="' + escapeHtml(a.previewUrl) + '" alt="">'
-            : '<span class="att-icon">📄</span>';
+            : '<span class="att-icon">' + iconSvg("file", { size: 13, strokeWidth: 1.7 }) + '</span>';
           html += '<span class="attachment-pill" data-index="' + i + '">' +
             thumb +
             '<span class="att-name" title="' + escapeHtml(a.name) + '">' + escapeHtml(a.name) + '</span>' +
@@ -12430,104 +12453,79 @@
       }
 
       // ──────────────────────────────────────────────────────────────────────────
-      // 排队条（.queue-bar）—— 输入框上方独立浮条，承担三个事情：
-      //   1) 折叠态：● 排队 N + 队尾预览 + ⌃ chevron + ⚡ 立即 按钮
-      //   2) 展开面板：列出所有排队消息，支持拖拽换序 / 单条删除 / 一键清空
-      //   3) 立即按钮：中断当前回复，把队首作为新消息插队发出去（剩余队列保留）
-      // 数据源：session.queuedMessages（由后端 WS 推送 + postStructuredInput 乐观更新）。
+      // 排队气泡条（.queue-bar）—— 垂直堆叠，浮在 "回复中" 状态条上方。
+      // 交互参考 iOS 通讯录右侧的字母选择条：
+      //   · 默认只展开队首（即下一个要发的那条），显示编号 + 文本 + × 删除
+      //   · 其他消息收起成一根小横杠（指示存在但不占空间）
+      //   · 鼠标悬到任意小横杠 → 该条展开、原本展开的那条收回小横杠
+      //   · 悬停期间可以按住展开的那条向上 / 向下拖拽 → 换序
+      // 末尾跟一个 ⚡ "立即" 按钮：中断当前回复、把队首作为新输入插队发出去。
+      // 数据源：session.queuedMessages（后端 WS + postStructuredInput 乐观更新）。
       // ──────────────────────────────────────────────────────────────────────────
 
-      var QUEUE_BAR_MAX = 10; // 后端硬上限
+      var QUEUE_BAR_MAX = 10;            // 后端硬上限
+      var QUEUE_CHIP_MAX_TEXT = 24;      // 单个气泡展开时显示的字数上限
 
-      function queueBarTruncatePreview(text) {
+      function queueChipTruncate(text) {
         if (typeof text !== "string") return "";
         var s = text.replace(/\s+/g, " ").trim();
-        if (s.length <= 48) return s;
-        return s.slice(0, 46) + "…";
+        if (s.length <= QUEUE_CHIP_MAX_TEXT) return s;
+        return s.slice(0, QUEUE_CHIP_MAX_TEXT) + "…";
       }
 
-      function renderQueueBarSkeleton(count, latestPreview, inFlight, atCapacity, immediateLabel) {
-        // 折叠条 + 展开面板的 HTML 一次性渲染好，靠 .queue-bar.expanded class 切换可见性。
-        // 这样展开/收起不需要拼字符串，纯 class toggle，动画也好做。
-        var dotClass = inFlight ? "queue-bar-dot queue-bar-dot-pulse" : "queue-bar-dot";
-        var barClass = "queue-bar";
-        if (state.queueBarExpanded) barClass += " expanded";
-        if (atCapacity) barClass += " queue-bar-capacity";
-        if (inFlight) barClass += " queue-bar-inflight";
-        var html =
-          '<div class="' + barClass + '" data-queue-bar="1">' +
-            '<button type="button" class="queue-bar-toggle" data-action="toggle"' +
-                   ' aria-expanded="' + (state.queueBarExpanded ? "true" : "false") + '"' +
-                   ' title="点击查看 / 收起排队消息">' +
-              '<span class="' + dotClass + '" aria-hidden="true"></span>' +
-              '<span class="queue-bar-count">' + (atCapacity ? "队列已满 " : "排队 ") + count + '</span>' +
-              '<span class="queue-bar-sep" aria-hidden="true">·</span>' +
-              '<span class="queue-bar-preview">' + escapeHtml(latestPreview) + '</span>' +
-              '<svg class="queue-bar-chevron" width="11" height="11" viewBox="0 0 24 24"' +
-                  ' fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"' +
-                  ' stroke-linejoin="round" aria-hidden="true"><polyline points="6 15 12 9 18 15"/></svg>' +
-            '</button>' +
-            '<span class="queue-bar-divider" aria-hidden="true"></span>' +
-            '<button type="button" class="queue-bar-promote" data-action="promote"' +
-                   ' title="中断当前回复，立刻发送队首这条" aria-label="立即发送队首">' +
-              '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">' +
-                '<path d="M13 2 L4 14 L11 14 L10 22 L20 9 L13 9 Z"/>' +
-              '</svg>' +
-              '<span class="queue-bar-promote-label">' + escapeHtml(immediateLabel) + '</span>' +
-            '</button>' +
-            '<div class="queue-bar-panel" data-queue-panel="1" role="region" aria-label="排队消息列表">' +
-              '<div class="queue-bar-panel-header">' +
-                '<span class="queue-bar-panel-title">📥 排队中 (' + count + ')</span>' +
-                '<button type="button" class="queue-bar-clear" data-action="clear"' +
-                       (count === 0 ? " disabled" : "") + '>清空</button>' +
-                '<button type="button" class="queue-bar-collapse" data-action="collapse" aria-label="收起">' +
-                  '收起' +
-                  '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor"' +
-                      ' stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
-                      '<polyline points="6 9 12 15 18 9"/></svg>' +
-                '</button>' +
-              '</div>' +
-              '<ol class="queue-bar-list" data-queue-list="1"></ol>' +
-            '</div>' +
-          '</div>';
-        return html;
+      // 当前应该展开的下标：拖拽中 → 被拖的那条（data-index 不变）；hover → 被 hover 的；否则 → 第 0 项
+      function queueBarExpandedIndex(itemsLength) {
+        if (state.queueBarDrag && typeof state.queueBarDrag.origIndex === "number") {
+          return state.queueBarDrag.origIndex;
+        }
+        if (typeof state.queueBarHoverIndex === "number"
+            && state.queueBarHoverIndex >= 0
+            && state.queueBarHoverIndex < itemsLength) {
+          return state.queueBarHoverIndex;
+        }
+        return 0;
       }
 
-      function renderQueueBarItems(listEl, items) {
-        // ol 内容单独 render —— 拖拽 / 删除 / 展开会频繁动它，外层骨架不重建避免抖动。
+      function renderQueueBarHtml(items, inFlight, atCapacity, immediateLabel) {
         var single = items.length <= 1;
-        var html = "";
+        var barClass = "queue-bar";
+        if (atCapacity) barClass += " queue-bar-capacity";
+        if (inFlight) barClass += " queue-bar-inflight";
+        var expandedIdx = queueBarExpandedIndex(items.length);
+        var chips = "";
         for (var i = 0; i < items.length; i++) {
           var raw = items[i] == null ? "" : String(items[i]);
-          var expanded = !!state.queueBarItemExpanded[i];
+          var isExpanded = i === expandedIdx;
           var itemClass = "queue-bar-item";
-          if (expanded) itemClass += " expanded";
+          if (isExpanded) itemClass += " expanded";
           if (single) itemClass += " queue-bar-item-single";
-          html +=
-            '<li class="' + itemClass + '" data-index="' + i + '">' +
-              '<button type="button" class="queue-bar-item-drag" data-action="drag" aria-label="拖动调整顺序"' +
-                     ' title="按住拖动调整顺序"' + (single ? " disabled" : "") + '>' +
-                '<svg width="10" height="14" viewBox="0 0 10 14" fill="currentColor" aria-hidden="true">' +
-                  '<circle cx="2.2" cy="2.2" r="1.2"/><circle cx="7.8" cy="2.2" r="1.2"/>' +
-                  '<circle cx="2.2" cy="7"   r="1.2"/><circle cx="7.8" cy="7"   r="1.2"/>' +
-                  '<circle cx="2.2" cy="11.8" r="1.2"/><circle cx="7.8" cy="11.8" r="1.2"/>' +
-                '</svg>' +
-              '</button>' +
-              '<span class="queue-bar-item-index">#' + (i + 1) + '</span>' +
-              '<button type="button" class="queue-bar-item-text" data-action="expand-text"' +
-                     ' aria-expanded="' + (expanded ? "true" : "false") + '"' +
-                     ' title="点击展开 / 收起完整内容">' +
-                escapeHtml(raw) +
-              '</button>' +
+          // 拖拽起手区是整个 chip，但 delete 按钮要独占点击。
+          var titleAttr = isExpanded ? raw + "（按住可拖动调整顺序）" : raw;
+          chips +=
+            '<li class="' + itemClass + '" data-index="' + i + '" data-action="drag"' +
+                ' title="' + escapeHtml(titleAttr) + '">' +
+              '<span class="queue-bar-item-index" aria-hidden="true">' + (i + 1) + '</span>' +
+              '<span class="queue-bar-item-text">' + escapeHtml(queueChipTruncate(raw)) + '</span>' +
               '<button type="button" class="queue-bar-item-delete" data-action="delete"' +
-                     ' aria-label="删除这条排队消息" title="删除">' +
-                '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor"' +
-                    ' stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+                    ' aria-label="删除这条排队消息" title="删除" tabindex="' + (isExpanded ? "0" : "-1") + '">' +
+                '<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor"' +
+                    ' stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
                     '<line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>' +
               '</button>' +
             '</li>';
         }
-        listEl.innerHTML = html;
+        return (
+          '<div class="' + barClass + '" data-queue-bar="1">' +
+            '<ol class="queue-bar-list" data-queue-list="1">' + chips + '</ol>' +
+            '<button type="button" class="queue-bar-promote" data-action="promote"' +
+                  ' title="中断当前回复，立刻发送队首这条"' +
+                  ' aria-label="' + escapeHtml(immediateLabel) + '队首">' +
+              '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">' +
+                '<path d="M13 2 L4 14 L11 14 L10 22 L20 9 L13 9 Z"/>' +
+              '</svg>' +
+            '</button>' +
+          '</div>'
+        );
       }
 
       function updateQueueBar() {
@@ -12539,64 +12537,50 @@
         queue = Array.isArray(queue) ? queue : [];
 
         if (!isStructured || queue.length === 0) {
-          // 队列空 / 非结构化会话：整条隐藏，并清掉展开/逐条展开的本地态。
           host.hidden = true;
           host.innerHTML = "";
-          state.queueBarExpanded = false;
-          state.queueBarItemExpanded = {};
+          state.queueBarHoverIndex = null;
           return;
         }
 
+        // 拖拽进行中绝不重建 DOM，否则 pointer capture 丢失、气泡闪屏。
+        if (state.queueBarDrag) return;
+
         host.hidden = false;
         var inFlight = !!(session.structuredState && session.structuredState.inFlight && session.status === "running");
         var atCapacity = queue.length >= QUEUE_BAR_MAX;
-        var latest = queueBarTruncatePreview(queue[queue.length - 1]);
-        // inFlight=false 时按钮语义从"插队"退化为"立刻发"；文案一并切换让用户不疑惑。
         var immediateLabel = inFlight ? "立即" : "发送";
 
-        // 拖拽进行中绝不重建骨架，否则 pointer capture 丢失、items 闪屏。
-        // 只更新列表内容（且如果数量不变也跳过整段重排）。
-        var existing = host.querySelector(".queue-bar");
-        if (state.queueBarDrag && existing) {
-          var listInDrag = existing.querySelector('[data-queue-list="1"]');
-          if (listInDrag && listInDrag.children.length !== queue.length) {
-            renderQueueBarItems(listInDrag, queue);
-          }
-          return;
-        }
-
-        host.innerHTML = renderQueueBarSkeleton(queue.length, latest, inFlight, atCapacity, immediateLabel);
-        var listEl = host.querySelector('[data-queue-list="1"]');
-        if (listEl) renderQueueBarItems(listEl, queue);
+        host.innerHTML = renderQueueBarHtml(queue, inFlight, atCapacity, immediateLabel);
       }
 
-      // ── 折叠 / 展开 ──
-      function setQueueBarExpanded(expanded) {
-        var next = !!expanded;
-        if (state.queueBarExpanded === next) return;
-        state.queueBarExpanded = next;
-        if (!next) state.queueBarItemExpanded = {};
-        updateQueueBar();
-      }
-      function toggleQueueBar() { setQueueBarExpanded(!state.queueBarExpanded); }
-
-      function handleQueueBarOutsideClick(ev) {
-        if (!state.queueBarExpanded) return;
+      // 只切换 .expanded class，不重建 DOM —— 避免鼠标移过去触发的重建
+      // 让拖拽/输入框焦点等丢失。所有同步状态（hoverIndex / drag）的改变都通过这里反映到 DOM。
+      function reflectQueueBarExpansion() {
         var host = document.getElementById("queue-bar-host");
-        if (!host) return;
-        if (host.contains(ev.target)) return;
-        setQueueBarExpanded(false);
-      }
-      function handleQueueBarKeydown(ev) {
-        if (!state.queueBarExpanded) return;
-        if (ev.key === "Escape" || ev.key === "Esc") {
-          setQueueBarExpanded(false);
-          // 焦点回到 toggle 按钮，方便键盘党
-          var toggle = document.querySelector(".queue-bar-toggle");
-          if (toggle) toggle.focus();
+        if (!host || host.hidden) return;
+        var list = host.querySelector('[data-queue-list="1"]');
+        if (!list) return;
+        var children = list.children;
+        var expandedIdx = queueBarExpandedIndex(children.length);
+        for (var i = 0; i < children.length; i++) {
+          var el = children[i];
+          var should = i === expandedIdx;
+          if (el.classList.contains("expanded") !== should) {
+            el.classList.toggle("expanded", should);
+            var del = el.querySelector('.queue-bar-item-delete');
+            if (del) del.tabIndex = should ? 0 : -1;
+          }
         }
       }
 
+      function setQueueBarHoverIndex(idx) {
+        var next = (idx == null ? null : Number(idx));
+        if (state.queueBarHoverIndex === next) return;
+        state.queueBarHoverIndex = next;
+        reflectQueueBarExpansion();
+      }
+
       // ── 单条删除 / 全部清空 / 队首插队 ──
       function rollbackQueueOptimistic(session, prevQueue) {
         updateSessionSnapshot({ id: session.id, queuedMessages: prevQueue });
@@ -12613,15 +12597,11 @@
         if (index < 0 || index >= queue.length) return;
         var prev = queue.slice();
         var next = queue.slice(0, index).concat(queue.slice(index + 1));
-        // 调整 queueBarItemExpanded 的下标偏移
-        var nextExpanded = {};
-        Object.keys(state.queueBarItemExpanded).forEach(function(k) {
-          var i = Number(k);
-          if (i === index) return;
-          if (i > index) nextExpanded[i - 1] = state.queueBarItemExpanded[k];
-          else nextExpanded[i] = state.queueBarItemExpanded[k];
-        });
-        state.queueBarItemExpanded = nextExpanded;
+        // hover 下标也要随之收缩，否则删完后展开的是错位的那条
+        if (typeof state.queueBarHoverIndex === "number") {
+          if (state.queueBarHoverIndex === index) state.queueBarHoverIndex = null;
+          else if (state.queueBarHoverIndex > index) state.queueBarHoverIndex -= 1;
+        }
         updateSessionSnapshot({ id: session.id, queuedMessages: next });
         var refreshed = state.sessions.find(function(s) { return s.id === session.id; }) || session;
         state.currentMessages = buildMessagesForRender(refreshed, getPreferredMessages(refreshed, refreshed.output, false));
@@ -12649,7 +12629,7 @@
         if (!session) return;
         var prev = Array.isArray(session.queuedMessages) ? session.queuedMessages.slice() : [];
         if (prev.length === 0) return;
-        state.queueBarItemExpanded = {};
+        state.queueBarHoverIndex = null;
         updateSessionSnapshot({ id: session.id, queuedMessages: [] });
         var refreshed = state.sessions.find(function(s) { return s.id === session.id; }) || session;
         state.currentMessages = buildMessagesForRender(refreshed, getPreferredMessages(refreshed, refreshed.output, false));
@@ -12683,21 +12663,13 @@
         var prev = queue.slice();
         var inFlight = !!(session.structuredState && session.structuredState.inFlight && session.status === "running");
 
-        // 乐观：剥掉队首
-        state.queueBarItemExpanded = (function() {
-          var out = {};
-          Object.keys(state.queueBarItemExpanded).forEach(function(k) {
-            var i = Number(k);
-            if (i === 0) return;
-            out[i - 1] = state.queueBarItemExpanded[k];
-          });
-          return out;
-        })();
+        // 乐观：剥掉队首；hover 下标随之收缩
+        if (typeof state.queueBarHoverIndex === "number") {
+          if (state.queueBarHoverIndex === 0) state.queueBarHoverIndex = null;
+          else state.queueBarHoverIndex -= 1;
+        }
         updateSessionSnapshot({ id: session.id, queuedMessages: rest });
 
-        // 收起面板，让用户视线回到 chat（新消息马上要进 user turn）
-        setQueueBarExpanded(false);
-
         var idempotencyKey = (typeof crypto !== "undefined" && crypto.randomUUID)
           ? crypto.randomUUID()
           : (Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10));
@@ -12742,53 +12714,78 @@
         });
       }
 
-      // ── 拖拽排序（Pointer Events + 简化版 sort/animate）──
-      function queueBarDragStart(ev, handleEl) {
+      // ── 拖拽排序（Pointer Events + 真实高度的 sort/animate）──
+      function queueBarDragStart(ev, chipEl) {
         var session = state.sessions.find(function(s) { return s.id === state.selectedId; });
         if (!session) return;
         var queue = Array.isArray(session.queuedMessages) ? session.queuedMessages.slice() : [];
         if (queue.length <= 1) return;
-        var itemEl = handleEl.closest(".queue-bar-item");
-        if (!itemEl) return;
-        var listEl = itemEl.parentElement;
+        if (!chipEl) return;
+        var listEl = chipEl.parentElement;
         if (!listEl) return;
-        var origIndex = Number(itemEl.getAttribute("data-index"));
+        var origIndex = Number(chipEl.getAttribute("data-index"));
         var siblings = Array.prototype.slice.call(listEl.children);
         var rects = siblings.map(function(el) { return el.getBoundingClientRect(); });
-        var rect0 = rects[origIndex];
-        var itemHeight = rect0.height;
-        var gap = 6; // 与 CSS .queue-bar-list 的 gap 保持一致
+        // 真实间距：相邻两个 chip 的 top 差减去前一个高度（容错 hover 状态变化后的高度切换）
+        var gap = 3;
+        if (rects.length >= 2) gap = Math.max(0, rects[1].top - rects[0].top - rects[0].height);
 
         ev.preventDefault();
-        try { handleEl.setPointerCapture(ev.pointerId); } catch (_e) {}
+        try { chipEl.setPointerCapture(ev.pointerId); } catch (_e) {}
         if (navigator && navigator.vibrate) { try { navigator.vibrate(8); } catch (_e2) {} }
 
         state.queueBarDrag = {
           pointerId: ev.pointerId,
-          handleEl: handleEl,
-          itemEl: itemEl,
+          handleEl: chipEl,
+          itemEl: chipEl,
           listEl: listEl,
           siblings: siblings,
           rects: rects,
           origIndex: origIndex,
           targetIndex: origIndex,
           startY: ev.clientY,
-          itemHeight: itemHeight,
           gap: gap,
           queueSnapshot: queue,
         };
 
-        itemEl.classList.add("dragging");
+        chipEl.classList.add("dragging");
+        // 让被拖元素保持 expanded（即便鼠标已经离开它）
+        reflectQueueBarExpansion();
         // 把所有兄弟先标记为"参与平滑动画"
-        siblings.forEach(function(el) { if (el !== itemEl) el.classList.add("queue-bar-item-sliding"); });
+        siblings.forEach(function(el) { if (el !== chipEl) el.classList.add("queue-bar-item-sliding"); });
 
         var move = function(e) { queueBarDragMove(e); };
         var up = function(e) { queueBarDragEnd(e); };
         state.queueBarDrag.moveHandler = move;
         state.queueBarDrag.upHandler = up;
-        handleEl.addEventListener("pointermove", move);
-        handleEl.addEventListener("pointerup", up);
-        handleEl.addEventListener("pointercancel", up);
+        chipEl.addEventListener("pointermove", move);
+        chipEl.addEventListener("pointerup", up);
+        chipEl.addEventListener("pointercancel", up);
+      }
+
+      // 给定 origIndex / target / 真实 rects，算出新排列下每个 sibling 的目标 top。
+      // 用真实高度而不是固定 shift，因为 expanded chip 比 collapsed 高很多。
+      function queueBarComputeNewTops(origIndex, target, rects, gap) {
+        var n = rects.length;
+        var order = [];
+        for (var i = 0; i < n; i++) order.push(i);
+        order.splice(origIndex, 1);
+        order.splice(target, 0, origIndex);
+        var top = rects[0].top;
+        // list 是右对齐 column flex，所有元素相对 list 左边对齐 — 我们只关心 top
+        // 用第一个 rect 的 top 作为锚点累加。
+        // 但 list 起始位置不一定是 rects[0].top（rects[0] 现在变到 order[0] 的位置）
+        // 这里需要找原本的 list top —— 取 rects 里最小 top 即可。
+        var listTop = rects[0].top;
+        for (var k = 1; k < n; k++) if (rects[k].top < listTop) listTop = rects[k].top;
+        var newTops = {};
+        var cursor = listTop;
+        for (var newPos = 0; newPos < n; newPos++) {
+          var oldIdx = order[newPos];
+          newTops[oldIdx] = cursor;
+          cursor += rects[oldIdx].height + gap;
+        }
+        return newTops;
       }
 
       function queueBarDragMove(ev) {
@@ -12809,13 +12806,11 @@
         }
         if (target !== d.targetIndex) {
           d.targetIndex = target;
-          // 重排兄弟元素的 translateY
-          var shift = d.itemHeight + d.gap;
+          // 按真实高度精确算每个 sibling 的新 top
+          var newTops = queueBarComputeNewTops(d.origIndex, target, d.rects, d.gap);
           d.siblings.forEach(function(el, idx) {
             if (idx === d.origIndex) return;
-            var move = 0;
-            if (d.origIndex < target && idx > d.origIndex && idx <= target) move = -shift;
-            else if (d.origIndex > target && idx < d.origIndex && idx >= target) move = shift;
+            var move = newTops[idx] - d.rects[idx].top;
             el.style.transform = move ? "translateY(" + move + "px)" : "";
           });
         }
@@ -12855,14 +12850,8 @@
         order.splice(targetIndex, 0, origIndex);
         var nextQueue = order.map(function(i) { return queueSnapshot[i]; });
 
-        // 同步迁移 queueBarItemExpanded 下标
-        var nextExpanded = {};
-        Object.keys(state.queueBarItemExpanded).forEach(function(k) {
-          var oldI = Number(k);
-          var newI = order.indexOf(oldI);
-          if (newI >= 0) nextExpanded[newI] = state.queueBarItemExpanded[k];
-        });
-        state.queueBarItemExpanded = nextExpanded;
+        // hover 下标迁移到新位置（拖拽放手时鼠标停在 targetIndex 上）
+        state.queueBarHoverIndex = targetIndex;
 
         var session = state.sessions.find(function(s) { return s.id === state.selectedId; });
         if (!session) { updateQueueBar(); return; }
@@ -12897,33 +12886,36 @@
           var actionEl = ev.target && ev.target.closest ? ev.target.closest("[data-action]") : null;
           if (!actionEl || !host.contains(actionEl)) return;
           var action = actionEl.getAttribute("data-action");
-          if (action === "drag") return; // 拖拽由 pointerdown 处理，吞掉点击避免误触发
+          if (action === "drag") return; // 拖拽由 pointerdown 处理，吞掉 click
           ev.preventDefault();
           ev.stopPropagation();
-          if (action === "toggle") { toggleQueueBar(); return; }
-          if (action === "collapse") { setQueueBarExpanded(false); return; }
           if (action === "promote") { queueBarPromoteHead(); return; }
-          if (action === "clear") { queueBarClearAll(); return; }
           if (action === "delete") {
             var itemEl = actionEl.closest(".queue-bar-item");
             if (itemEl) queueBarDeleteItem(Number(itemEl.getAttribute("data-index")));
             return;
           }
-          if (action === "expand-text") {
-            var item = actionEl.closest(".queue-bar-item");
-            if (!item) return;
-            var idx = Number(item.getAttribute("data-index"));
-            state.queueBarItemExpanded[idx] = !state.queueBarItemExpanded[idx];
-            item.classList.toggle("expanded", !!state.queueBarItemExpanded[idx]);
-            actionEl.setAttribute("aria-expanded", state.queueBarItemExpanded[idx] ? "true" : "false");
-            return;
-          }
         });
+        // hover 跟随：鼠标移到哪一条，哪一条就展开（拖拽进行中不响应，免得抢拖拽）
+        host.addEventListener("mouseover", function(ev) {
+          if (state.queueBarDrag) return;
+          var chip = ev.target && ev.target.closest ? ev.target.closest(".queue-bar-item") : null;
+          if (!chip || !host.contains(chip)) return;
+          setQueueBarHoverIndex(Number(chip.getAttribute("data-index")));
+        });
+        host.addEventListener("mouseleave", function() {
+          if (state.queueBarDrag) return;
+          setQueueBarHoverIndex(null);
+        });
+        // 整个气泡都是拖拽起手区。delete / promote 按钮通过 closest 检查跳过
         host.addEventListener("pointerdown", function(ev) {
           if (ev.button !== undefined && ev.button !== 0) return;
-          var handle = ev.target && ev.target.closest ? ev.target.closest('[data-action="drag"]') : null;
-          if (!handle || handle.disabled) return;
-          queueBarDragStart(ev, handle);
+          if (ev.target && ev.target.closest && ev.target.closest('[data-action="delete"], [data-action="promote"]')) return;
+          var chip = ev.target && ev.target.closest ? ev.target.closest('.queue-bar-item') : null;
+          if (!chip) return;
+          // 拖拽前先把这条切到 expanded（鼠标按下时通常已经 hovered，但触屏没 hover）
+          setQueueBarHoverIndex(Number(chip.getAttribute("data-index")));
+          queueBarDragStart(ev, chip);
         });
       }
 
@@ -16173,10 +16165,10 @@
           '</span>' +
           '<span class="approval-stats-popup" id="approval-stats-popup">' +
             '<span class="approval-stats-popup-title">自动批准统计</span>' +
-            (stats.command > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">⚡</span><span class="approval-stats-row-label">命令执行</span><span class="approval-stats-row-count">' + stats.command + '</span></span>' : '') +
-            (stats.file > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">📝</span><span class="approval-stats-row-label">文件写入</span><span class="approval-stats-row-count">' + stats.file + '</span></span>' : '') +
-            (stats.tool > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">🔧</span><span class="approval-stats-row-label">其他工具</span><span class="approval-stats-row-count">' + stats.tool + '</span></span>' : '') +
-            '<span class="approval-stats-row approval-stats-row-total"><span class="approval-stats-row-icon">∑</span><span class="approval-stats-row-label">合计</span><span class="approval-stats-row-count">' + stats.total + '</span></span>' +
+            (stats.command > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">' + iconSvg("terminal", { size: 12, strokeWidth: 1.8 }) + '</span><span class="approval-stats-row-label">命令执行</span><span class="approval-stats-row-count">' + stats.command + '</span></span>' : '') +
+            (stats.file > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">' + iconSvg("edit", { size: 12, strokeWidth: 1.8 }) + '</span><span class="approval-stats-row-label">文件写入</span><span class="approval-stats-row-count">' + stats.file + '</span></span>' : '') +
+            (stats.tool > 0 ? '<span class="approval-stats-row"><span class="approval-stats-row-icon">' + iconSvg("wrench", { size: 12, strokeWidth: 1.8 }) + '</span><span class="approval-stats-row-label">其他工具</span><span class="approval-stats-row-count">' + stats.tool + '</span></span>' : '') +
+            '<span class="approval-stats-row approval-stats-row-total"><span class="approval-stats-row-icon">' + iconSvg("sigma", { size: 12, strokeWidth: 1.8 }) + '</span><span class="approval-stats-row-label">合计</span><span class="approval-stats-row-count">' + stats.total + '</span></span>' +
           '</span>';
         // Pulse animation on the badge
         var badge = container.querySelector(".approval-stats-badge");
@@ -16292,11 +16284,11 @@
         if (enabled) {
           toggle.className = base + " active";
           toggle.title = "自动批准已启用 — 点击关闭";
-          toggle.textContent = "🛡 自动";
+          toggle.innerHTML = iconSvg("shieldCheck", { size: 12, strokeWidth: 1.7, cls: "composer-pill-icon" }) + '<span class="composer-pill-label">自动</span>';
         } else {
           toggle.className = base;
           toggle.title = "自动批准已关闭 — 点击开启";
-          toggle.textContent = "🛡 手动";
+          toggle.innerHTML = iconSvg("shield", { size: 12, strokeWidth: 1.7, cls: "composer-pill-icon" }) + '<span class="composer-pill-label">手动</span>';
         }
       }