@co0ontty/wand 1.14.6 → 1.15.0

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

@@ -71,6 +71,7 @@
         suggestionTimer: null,
         terminal: null,
         fitAddon: null,
+        terminalFitInProgress: false,
         serializeAddon: null,
         terminalDomView: null,
         terminalDomUpdateTimer: null,
@@ -134,9 +135,14 @@
         ws: null,
         wsConnected: false,
         _updateBubbleShown: false,
+        notificationHistory: {},
+        delayedNotificationTimer: null,
         notifSound: (function() {
           try { var v = localStorage.getItem("wand-notif-sound"); return v === null ? true : v === "true"; } catch (e) { return true; }
         })(),
+        notifVolume: (function() {
+          try { var v = localStorage.getItem("wand-notif-volume"); return v === null ? 80 : Math.max(0, Math.min(100, parseInt(v, 10) || 80)); } catch (e) { return 80; }
+        })(),
         notifBubble: (function() {
           try { var v = localStorage.getItem("wand-notif-bubble"); return v === null ? true : v === "true"; } catch (e) { return true; }
         })(),
@@ -891,8 +897,7 @@
               refreshAll();
               requestNotificationPermission();
               if (config.updateAvailable && config.latestVersion) {
-                showUpdateBubble(config.currentVersion || "-", config.latestVersion);
-                sendBrowserNotification("Wand \u53d1\u73b0\u65b0\u7248\u672c", "\u5f53\u524d " + (config.currentVersion || "-") + " \u2192 \u6700\u65b0 " + config.latestVersion, { tag: "wand-update" });
+                notifyUpdateAvailable(config.currentVersion || "-", config.latestVersion);
               }
               if (state.claudeHistoryExpanded && !state.claudeHistoryLoaded) {
                 loadClaudeHistory();
@@ -1316,23 +1321,55 @@
       function renderSettingsModal() {
         return '<section id="settings-modal" class="modal-backdrop hidden">' +
           '<div class="modal settings-modal">' +
-            '<div class="modal-header">' +
-              '<h2 class="modal-title">设置</h2>' +
+            '<div class="modal-header settings-modal-header">' +
+              '<div class="settings-modal-title-group">' +
+                '<h2 class="modal-title">设置</h2>' +
+                '<p class="settings-modal-subtitle">调整应用配置、通知、安全和显示偏好</p>' +
+              '</div>' +
               '<button id="close-settings-button" class="btn btn-ghost btn-icon">×</button>' +
             '</div>' +
-            '<div class="modal-body">' +
-              // Tabs
-              '<div class="settings-tabs">' +
-                '<button class="settings-tab active" data-tab="about">\u5173\u4e8e</button>' +
-                '<button class="settings-tab" data-tab="general">\u57fa\u672c\u914d\u7f6e</button>' +
-                '<button class="settings-tab" data-tab="notifications">\u901a\u77e5</button>' +
-                '<button class="settings-tab" data-tab="security">\u5b89\u5168</button>' +
-                '<button class="settings-tab" data-tab="presets">\u547d\u4ee4\u9884\u8bbe</button>' +
-                '<button class="settings-tab" data-tab="display">\u663e\u793a</button>' +
-              '</div>' +
+            '<div class="modal-body settings-modal-body">' +
+              '<div class="settings-layout">' +
+                '<aside class="settings-sidebar">' +
+                  '<div class="settings-sidebar-header">' +
+                    '<div class="settings-sidebar-title">偏好设置</div>' +
+                    '<div class="settings-sidebar-hint">左侧切换分区，右侧查看详细说明与选项。</div>' +
+                  '</div>' +
+                  '<div class="settings-tabs" role="tablist" aria-label="设置分组" aria-orientation="vertical">' +
+                    '<button class="settings-tab active" data-tab="about" role="tab" aria-selected="true" aria-controls="settings-tab-about">' +
+                      '<span class="settings-tab-main">关于</span>' +
+                      '<span class="settings-tab-meta">版本、更新与连接方式</span>' +
+                    '</button>' +
+                    '<button class="settings-tab" data-tab="general" role="tab" aria-selected="false" aria-controls="settings-tab-general">' +
+                      '<span class="settings-tab-main">基本配置</span>' +
+                      '<span class="settings-tab-meta">主机、模式、语言、目录</span>' +
+                    '</button>' +
+                    '<button class="settings-tab" data-tab="notifications" role="tab" aria-selected="false" aria-controls="settings-tab-notifications">' +
+                      '<span class="settings-tab-main">通知</span>' +
+                      '<span class="settings-tab-meta">提示音与浏览器通知</span>' +
+                    '</button>' +
+                    '<button class="settings-tab" data-tab="security" role="tab" aria-selected="false" aria-controls="settings-tab-security">' +
+                      '<span class="settings-tab-main">安全</span>' +
+                      '<span class="settings-tab-meta">密码与证书</span>' +
+                    '</button>' +
+                    '<button class="settings-tab" data-tab="presets" role="tab" aria-selected="false" aria-controls="settings-tab-presets">' +
+                      '<span class="settings-tab-main">命令预设</span>' +
+                      '<span class="settings-tab-meta">查看已有预设</span>' +
+                    '</button>' +
+                    '<button class="settings-tab" data-tab="display" role="tab" aria-selected="false" aria-controls="settings-tab-display">' +
+                      '<span class="settings-tab-main">显示</span>' +
+                      '<span class="settings-tab-meta">卡片默认展开行为</span>' +
+                    '</button>' +
+                  '</div>' +
+                '</aside>' +
+                '<div class="settings-content">' +
 
               // About tab
-              '<div class="settings-panel active" id="settings-tab-about">' +
+              '<div class="settings-panel active" id="settings-tab-about" role="tabpanel">' +
+                '<div class="settings-panel-header">' +
+                  '<h3 class="settings-panel-title">关于 Wand</h3>' +
+                  '<p class="settings-panel-desc">查看版本信息、更新状态和 Android App 连接方式。</p>' +
+                '</div>' +
                 '<div class="settings-about-info">' +
                   '<div class="settings-about-row"><span class="settings-label">包名</span><span class="settings-value" id="settings-pkg-name">-</span></div>' +
                   '<div class="settings-about-row"><span class="settings-label">当前版本</span><span class="settings-value" id="settings-version">-</span></div>' +
@@ -1379,13 +1416,24 @@
               '</div>' +
 
               // Notifications tab
-              '<div class="settings-panel" id="settings-tab-notifications">' +
+              '<div class="settings-panel" id="settings-tab-notifications" role="tabpanel">' +
+                '<div class="settings-panel-header">' +
+                  '<h3 class="settings-panel-title">通知</h3>' +
+                  '<p class="settings-panel-desc">设置提示音、系统通知和浏览器通知的行为。</p>' +
+                '</div>' +
                 '<div class="settings-section-title">\u901a\u77e5\u504f\u597d</div>' +
                 '<div class="field field-inline">' +
                   '<input id="cfg-notif-sound" type="checkbox" class="field-checkbox" />' +
                   '<label class="field-label" for="cfg-notif-sound">\u64ad\u653e\u63d0\u793a\u97f3</label>' +
                 '</div>' +
                 '<p class="hint" style="margin-top:0;margin-bottom:10px">\u91cd\u8981\u901a\u77e5\uff08\u7248\u672c\u66f4\u65b0\u3001\u6743\u9650\u7b49\u5f85\u7b49\uff09\u65f6\u64ad\u653e\u67d4\u548c\u7684\u63d0\u793a\u97f3</p>' +
+                '<div class="field" id="notif-volume-field" style="margin-bottom:10px">' +
+                  '<label class="field-label" style="margin-bottom:4px">\u97f3\u91cf</label>' +
+                  '<div style="display:flex;align-items:center;gap:8px">' +
+                    '<input id="cfg-notif-volume" type="range" min="0" max="100" step="5" style="flex:1;accent-color:var(--accent)" />' +
+                    '<span id="cfg-notif-volume-val" style="min-width:32px;text-align:right;font-size:12px;color:var(--text-secondary)">80%</span>' +
+                  '</div>' +
+                '</div>' +
                 '<div class="field field-inline">' +
                   '<input id="cfg-notif-bubble" type="checkbox" class="field-checkbox" />' +
                   '<label class="field-label" for="cfg-notif-bubble">\u5e94\u7528\u5185\u901a\u77e5\u6c14\u6ce1</label>' +
@@ -1412,13 +1460,18 @@
                     '<button id="notification-request-btn" class="btn btn-ghost btn-sm hidden">\u6388\u6743\u901a\u77e5</button>' +
                     '<button id="notification-reset-btn" class="btn btn-ghost btn-sm hidden">\u91cd\u65b0\u6388\u6743</button>' +
                     '<button id="notification-test-btn" class="btn btn-ghost btn-sm">\u53d1\u9001\u6d4b\u8bd5\u901a\u77e5</button>' +
+                    '<button id="notification-test-delay-btn" class="btn btn-ghost btn-sm">10 \u79d2\u540e\u53d1\u9001</button>' +
                   '</div>' +
                   '<p id="notification-test-message" class="hint hidden"></p>' +
                 '</div>' +
               '</div>' +
 
               // General config tab
-              '<div class="settings-panel" id="settings-tab-general">' +
+              '<div class="settings-panel" id="settings-tab-general" role="tabpanel">' +
+                '<div class="settings-panel-header">' +
+                  '<h3 class="settings-panel-title">基本配置</h3>' +
+                  '<p class="settings-panel-desc">配置服务监听地址、默认模式、语言和工作目录。</p>' +
+                '</div>' +
                 '<div class="field-row">' +
                   '<div class="field">' +
                     '<label class="field-label" for="cfg-host">监听地址 (host)</label>' +
@@ -1492,12 +1545,18 @@
                   '<p id="app-icon-message" class="hint hidden" style="margin-top:8px"></p>' +
                 '</div>'
                 : '') +
-                '<button id="save-config-button" class="btn btn-primary btn-block">保存配置</button>' +
-                '<p id="config-message" class="hint hidden"></p>' +
+                '<div class="settings-actions settings-actions-sticky">' +
+                  '<button id="save-config-button" class="btn btn-primary btn-block">保存配置</button>' +
+                '</div>' +
+                '<p id="config-message" class="hint hidden settings-status-message"></p>' +
               '</div>' +
 
               // Security tab
-              '<div class="settings-panel" id="settings-tab-security">' +
+              '<div class="settings-panel" id="settings-tab-security" role="tabpanel">' +
+                '<div class="settings-panel-header">' +
+                  '<h3 class="settings-panel-title">安全</h3>' +
+                  '<p class="settings-panel-desc">管理登录密码与 SSL 证书，敏感变更请确认后再保存。</p>' +
+                '</div>' +
                 '<div class="settings-card">' +
                   '<h3 class="settings-section-title">\ud83d\udd12 修改密码</h3>' +
                   '<div class="field">' +
@@ -1529,14 +1588,22 @@
               '</div>' +
 
               // Command presets tab
-              '<div class="settings-panel" id="settings-tab-presets">' +
+              '<div class="settings-panel" id="settings-tab-presets" role="tabpanel">' +
+                '<div class="settings-panel-header">' +
+                  '<h3 class="settings-panel-title">命令预设</h3>' +
+                  '<p class="settings-panel-desc">当前命令预设从 config.json 读取，可在这里快速查看已有配置。</p>' +
+                '</div>' +
                 '<div id="presets-list" class="presets-list"></div>' +
               '</div>' +
 
               // Display settings tab
-              '<div class="settings-panel" id="settings-tab-display">' +
+              '<div class="settings-panel" id="settings-tab-display" role="tabpanel">' +
+                '<div class="settings-panel-header">' +
+                  '<h3 class="settings-panel-title">显示</h3>' +
+                  '<p class="settings-panel-desc">控制聊天视图里不同卡片类型的默认展开状态。</p>' +
+                '</div>' +
                 '<div class="settings-section-title">卡片默认展开状态</div>' +
-                '<p class="hint" style="margin-top:-4px;margin-bottom:12px">设置结构化聊天视图中各类卡片的默认展开/折叠状态。手动操作的展开状态优先于此默认设置。</p>' +
+                '<p class="hint settings-inline-hint">设置结构化聊天视图中各类卡片的默认展开/折叠状态。手动操作的展开状态优先于此默认设置。</p>' +
                 '<div class="switch-card-list">' +
                   '<label class="switch-card" for="cfg-card-edit">' +
                     '<div class="switch-card-header">' +
@@ -1579,8 +1646,10 @@
                     '<div class="switch-card-desc">连续同类工具调用的折叠组</div>' +
                   '</label>' +
                 '</div>' +
-                '<button id="save-display-button" class="btn btn-primary btn-block" style="margin-top:16px">保存显示设置</button>' +
-                '<p id="display-message" class="hint hidden"></p>' +
+                '<div class="settings-actions settings-actions-sticky">' +
+                  '<button id="save-display-button" class="btn btn-primary btn-block">保存显示设置</button>' +
+                '</div>' +
+                '<p id="display-message" class="hint hidden settings-status-message"></p>' +
               '</div>' +
             '</div>' +
           '</div>' +
@@ -2796,6 +2865,29 @@
           });
       }
 
+      function getCardDefault(key) {
+        return !!(state.config && state.config.cardDefaults && state.config.cardDefaults[key]);
+      }
+
+      function lazyLoadTruncatedToolContent(container, targetEl, renderContent, renderError) {
+        if (!container || container.dataset.truncated !== "true" || container.dataset.loaded === "true") return;
+        var toolUseId = container.dataset.toolUseId;
+        if (!toolUseId) return;
+        if (targetEl) targetEl.innerHTML = '<div class="tool-content-loading">加载中…</div>';
+        container.dataset.loaded = "loading";
+        __fetchToolContent(toolUseId, function(err, data) {
+          if (err) {
+            if (targetEl) targetEl.innerHTML = renderError || '<div class="tool-content-error">加载失败，点击重试</div>';
+            container.dataset.loaded = "";
+            return;
+          }
+          container.dataset.truncated = "false";
+          container.dataset.loaded = "true";
+          var content = typeof data.content === "string" ? data.content : JSON.stringify(data.content);
+          renderContent(content, data);
+        });
+      }
+
       window.__tcToggle = function(e, headerEl) {
         var card = headerEl.closest(".tool-use-card") || headerEl.closest(".inline-diff");
         if (card) {
@@ -2803,23 +2895,16 @@
           card.classList.toggle("collapsed");
           var expandKind = card.dataset.expandKind || "tool-card";
           persistElementExpandState(card, expandKind);
-          // Lazy-load truncated content on expand
-          if (wasCollapsed && card.dataset.truncated === "true" && card.dataset.loaded !== "true") {
-            var toolUseId = card.dataset.toolUseId;
+          if (wasCollapsed) {
             var resultDiv = card.querySelector(".tool-use-result");
-            if (resultDiv) resultDiv.innerHTML = '<div class="tool-content-loading">加载中…</div>';
-            card.dataset.loaded = "loading";
-            __fetchToolContent(toolUseId, function(err, data) {
-              if (err) {
-                if (resultDiv) resultDiv.innerHTML = '<div class="tool-content-error" onclick="__tcToggle(null, card.querySelector(\'.tool-use-header\'))">加载失败，点击重试</div>';
-                card.dataset.loaded = "";
-              } else {
-                card.dataset.truncated = "false";
-                card.dataset.loaded = "true";
-                var content = typeof data.content === "string" ? data.content : JSON.stringify(data.content);
+            lazyLoadTruncatedToolContent(
+              card,
+              resultDiv,
+              function(content) {
                 if (resultDiv) resultDiv.innerHTML = '<pre class="tool-use-result-content">' + escapeHtml(content) + '</pre>';
-              }
-            });
+              },
+              '<div class="tool-content-error" onclick="__tcToggle(null, this.closest(\'.tool-use-card,.inline-diff\').querySelector(\'.tool-use-header,.diff-header\'))">加载失败，点击重试</div>'
+            );
           }
         }
         if (e) { e.preventDefault(); e.stopPropagation(); }
@@ -2859,22 +2944,10 @@
             statusSpan.textContent = "✓";
           }
         }
-        // Lazy-load truncated content on expand
-        if (expanded && el.dataset.truncated === "true" && el.dataset.loaded !== "true") {
-          var toolUseId = el.dataset.toolUseId;
-          if (body) body.innerHTML = '<div class="tool-content-loading">加载中…</div>';
-          el.dataset.loaded = "loading";
-          __fetchToolContent(toolUseId, function(err, data) {
-            if (err) {
-              if (body) body.innerHTML = '<div class="tool-content-error">加载失败，点击重试</div>';
-              el.dataset.loaded = "";
-            } else {
-              el.dataset.truncated = "false";
-              el.dataset.loaded = "true";
-              var content = typeof data.content === "string" ? data.content : JSON.stringify(data.content);
-              el.dataset.result = content;
-              if (body) body.innerHTML = '<div class="inline-tool-result">' + formatInlineResult(content, "") + '</div>';
-            }
+        if (expanded) {
+          lazyLoadTruncatedToolContent(el, body, function(content) {
+            el.dataset.result = content;
+            if (body) body.innerHTML = '<div class="inline-tool-result">' + formatInlineResult(content, "") + '</div>';
           });
         }
         persistElementExpandState(el, "inline-tool");
@@ -2891,29 +2964,17 @@
           var toggleIcon = el.querySelector(".term-toggle-icon");
           if (toggleIcon) toggleIcon.textContent = isHidden ? "▼" : "▶";
           persistElementExpandState(container, "terminal");
-          // Lazy-load truncated content on expand
-          if (isHidden && container.dataset.truncated === "true" && container.dataset.loaded !== "true") {
-            var toolUseId = container.dataset.toolUseId;
+          if (isHidden) {
             var termOutput = body.querySelector(".term-output");
-            if (termOutput) termOutput.innerHTML = '<div class="tool-content-loading">加载中…</div>';
-            container.dataset.loaded = "loading";
-            __fetchToolContent(toolUseId, function(err, data) {
-              if (err) {
-                if (termOutput) termOutput.innerHTML = '<div class="tool-content-error">加载失败，点击重试</div>';
-                container.dataset.loaded = "";
-              } else {
-                container.dataset.truncated = "false";
-                container.dataset.loaded = "true";
-                var content = typeof data.content === "string" ? data.content : JSON.stringify(data.content);
-                if (termOutput) {
-                  var lines = content.split("\n");
-                  var html = "";
-                  for (var i = 0; i < lines.length; i++) {
-                    if (!lines[i] && i === lines.length - 1) continue;
-                    html += '<div class="term-line">' + escapeHtml(lines[i]) + '</div>';
-                  }
-                  termOutput.innerHTML = html;
+            lazyLoadTruncatedToolContent(container, termOutput, function(content) {
+              if (termOutput) {
+                var lines = content.split("\n");
+                var html = "";
+                for (var i = 0; i < lines.length; i++) {
+                  if (!lines[i] && i === lines.length - 1) continue;
+                  html += '<div class="term-line">' + escapeHtml(lines[i]) + '</div>';
                 }
+                termOutput.innerHTML = html;
               }
             });
           }
@@ -3235,6 +3296,33 @@
             try { localStorage.setItem("wand-notif-sound", String(state.notifSound)); } catch (e) {}
             // Preview sound when toggling on
             if (state.notifSound) _doPlaySound();
+            // Toggle volume slider visibility
+            var volField = document.getElementById("notif-volume-field");
+            if (volField) volField.style.display = state.notifSound ? "" : "none";
+          });
+        }
+        // Volume slider
+        var notifVolumeEl = document.getElementById("cfg-notif-volume");
+        var notifVolumeVal = document.getElementById("cfg-notif-volume-val");
+        if (notifVolumeEl) {
+          notifVolumeEl.value = state.notifVolume;
+          if (notifVolumeVal) notifVolumeVal.textContent = state.notifVolume + "%";
+          // Hide if sound is off
+          var volField = document.getElementById("notif-volume-field");
+          if (volField) volField.style.display = state.notifSound ? "" : "none";
+          var _volDebounce = null;
+          notifVolumeEl.addEventListener("input", function() {
+            state.notifVolume = parseInt(notifVolumeEl.value, 10);
+            if (notifVolumeVal) notifVolumeVal.textContent = state.notifVolume + "%";
+            try { localStorage.setItem("wand-notif-volume", String(state.notifVolume)); } catch (e) {}
+            // Also sync to native bridge if available
+            if (_hasNativeBridge && typeof WandNative.setNotificationVolume === "function") {
+              try { WandNative.setNotificationVolume(state.notifVolume); } catch (_e) {}
+            }
+          });
+          // Preview on release
+          notifVolumeEl.addEventListener("change", function() {
+            _doPlaySound();
           });
         }
         var notifBubbleEl = document.getElementById("cfg-notif-bubble");
@@ -3262,6 +3350,8 @@
         if (notifResetBtn) notifResetBtn.addEventListener("click", resetNotificationPermission);
         var notifTestBtn = document.getElementById("notification-test-btn");
         if (notifTestBtn) notifTestBtn.addEventListener("click", testNotification);
+        var notifTestDelayBtn = document.getElementById("notification-test-delay-btn");
+        if (notifTestDelayBtn) notifTestDelayBtn.addEventListener("click", scheduleTestNotification);
         updateNotificationStatus();
         // Native notification sound selector (APK only)
         if (_hasNativeBridge && typeof WandNative.getAvailableSounds === "function") {
@@ -5240,7 +5330,6 @@
         }
         state.selectedId = id;
         persistSelectedId();
-        // Clear tool content cache on session switch
         state.toolContentCache = {};
         // Clear queued inputs from the previous session to prevent cross-session leaks
         state.messageQueue = [];
@@ -5603,6 +5692,7 @@
           if (confirmEl) confirmEl.value = "";
           hideSettingsMessages();
           setupFocusTrap(modal);
+          bindSettingsTabKeyboardNavigation();
           // Activate first tab
           switchSettingsTab("about");
           // Load settings data
@@ -5612,18 +5702,35 @@
           var bubbleEl = document.getElementById("cfg-notif-bubble");
           if (soundEl) soundEl.checked = state.notifSound;
           if (bubbleEl) bubbleEl.checked = state.notifBubble;
+          var volEl = document.getElementById("cfg-notif-volume");
+          var volValEl = document.getElementById("cfg-notif-volume-val");
+          if (volEl) {
+            volEl.value = state.notifVolume;
+            if (volValEl) volValEl.textContent = state.notifVolume + "%";
+          }
+          var volField = document.getElementById("notif-volume-field");
+          if (volField) volField.style.display = state.notifSound ? "" : "none";
           updateNotificationStatus();
           // Load current app icon selection (APK only)
           if (typeof WandNative !== "undefined" && typeof WandNative.getAppIcon === "function") {
             try { _updateAppIconSelection(WandNative.getAppIcon() || "shorthair"); } catch (_e) {}
           }
-          // Sync native notification sound selector (APK only)
+          // Sync native notification sound selector and volume (APK only)
           if (_hasNativeBridge && typeof WandNative.getNotificationSound === "function") {
             try {
               var nsSel = document.getElementById("native-sound-select");
               if (nsSel) nsSel.value = WandNative.getNotificationSound();
             } catch (_e) {}
           }
+          if (_hasNativeBridge && typeof WandNative.getNotificationVolume === "function") {
+            try {
+              var nativeVol = WandNative.getNotificationVolume();
+              state.notifVolume = nativeVol;
+              if (volEl) volEl.value = nativeVol;
+              if (volValEl) volValEl.textContent = nativeVol + "%";
+              try { localStorage.setItem("wand-notif-volume", String(nativeVol)); } catch (_e) {}
+            } catch (_e) {}
+          }
         }
       }
 
@@ -5700,21 +5807,76 @@
         var tabs = document.querySelectorAll(".settings-tab");
         var panels = document.querySelectorAll(".settings-panel");
         for (var i = 0; i < tabs.length; i++) {
-          if (tabs[i].getAttribute("data-tab") === tabName) {
+          var isActive = tabs[i].getAttribute("data-tab") === tabName;
+          if (isActive) {
             tabs[i].classList.add("active");
           } else {
             tabs[i].classList.remove("active");
           }
+          tabs[i].setAttribute("aria-selected", isActive ? "true" : "false");
+          tabs[i].setAttribute("tabindex", isActive ? "0" : "-1");
         }
         for (var j = 0; j < panels.length; j++) {
-          if (panels[j].id === "settings-tab-" + tabName) {
+          var isPanelActive = panels[j].id === "settings-tab-" + tabName;
+          if (isPanelActive) {
             panels[j].classList.add("active");
+            panels[j].removeAttribute("hidden");
           } else {
             panels[j].classList.remove("active");
+            panels[j].setAttribute("hidden", "hidden");
           }
         }
       }
 
+      function handleSettingsTabKeydown(event) {
+        if (!event) return;
+        if (event.key !== "ArrowUp" && event.key !== "ArrowDown" && event.key !== "Home" && event.key !== "End") {
+          return;
+        }
+        var tabs = Array.prototype.slice.call(document.querySelectorAll(".settings-tab"));
+        if (!tabs.length) return;
+        var currentIndex = tabs.indexOf(event.currentTarget);
+        if (currentIndex === -1) return;
+        event.preventDefault();
+        var nextIndex = currentIndex;
+        if (event.key === "ArrowUp") nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+        if (event.key === "ArrowDown") nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+        if (event.key === "Home") nextIndex = 0;
+        if (event.key === "End") nextIndex = tabs.length - 1;
+        var nextTab = tabs[nextIndex];
+        if (!nextTab) return;
+        var nextName = nextTab.getAttribute("data-tab");
+        if (nextName) switchSettingsTab(nextName);
+        if (typeof nextTab.focus === "function") nextTab.focus();
+      }
+
+      function bindSettingsTabKeyboardNavigation() {
+        var tabs = document.querySelectorAll(".settings-tab");
+        for (var i = 0; i < tabs.length; i++) {
+          tabs[i].removeEventListener("keydown", handleSettingsTabKeydown);
+          tabs[i].addEventListener("keydown", handleSettingsTabKeydown);
+        }
+      }
+
+      function updateSettingsSidebarStatus(data) {
+        if (!data) return;
+        var cfg = data.config || {};
+        var metaMap = {
+          about: data.version ? ("当前 v" + data.version) : "版本与更新信息",
+          general: [cfg.defaultMode || "default", cfg.language || "自动语言"].filter(Boolean).join(" · "),
+          notifications: state.notifSound ? ("提示音 " + state.notifVolume + "%") : "提示音已关闭",
+          security: data.hasCert ? "已安装 SSL 证书" : "密码与证书管理",
+          presets: cfg.commandPresets && cfg.commandPresets.length ? (cfg.commandPresets.length + " 条预设") : "暂无预设",
+          display: "控制卡片默认展开"
+        };
+        for (var key in metaMap) {
+          if (!Object.prototype.hasOwnProperty.call(metaMap, key)) continue;
+          var tab = document.querySelector('.settings-tab[data-tab="' + key + '"] .settings-tab-meta');
+          if (tab) tab.textContent = metaMap[key] || "";
+        }
+      }
+
+
       function copyToClipboard(text, triggerBtn) {
         if (!text) return;
         navigator.clipboard.writeText(text).then(function() {
@@ -5759,6 +5921,7 @@
         fetch("/api/settings", { credentials: "same-origin" })
           .then(function(res) { return res.json(); })
           .then(function(data) {
+            updateSettingsSidebarStatus(data);
             // About
             var nameEl = document.getElementById("settings-pkg-name");
             var verEl = document.getElementById("settings-version");
@@ -5843,7 +6006,7 @@
                 apkMessageEl.classList.remove("hidden");
               }
             } else {
-              // ── 浏览器模式：只显示线上版本 + 下载按钮 ──
+              // ── 浏览器模式：显示线上版本 + 本地版本 + 下载按钮 ──
               if (androidApk.github && apkGithubRow && apkGithubEl) {
                 var ghLabel2 = androidApk.github.version ? ("v" + androidApk.github.version) : androidApk.github.fileName;
                 if (typeof androidApk.github.size === "number") ghLabel2 += " · " + formatBytes(androidApk.github.size);
@@ -5856,7 +6019,22 @@
                     window.open(androidApk.github.downloadUrl, "_blank");
                   };
                 }
-              } else if (apkMessageEl) {
+              }
+              // 本地版本
+              if (androidApk.local && apkLocalRow && apkLocalEl) {
+                var lcLabel2 = androidApk.local.version ? ("v" + androidApk.local.version) : androidApk.local.fileName;
+                if (typeof androidApk.local.size === "number") lcLabel2 += " · " + formatBytes(androidApk.local.size);
+                apkLocalEl.textContent = lcLabel2;
+                apkLocalRow.classList.remove("hidden");
+                if (apkLocalBtn) {
+                  apkLocalBtn.textContent = "下载";
+                  apkLocalBtn.classList.remove("hidden");
+                  apkLocalBtn.onclick = function() {
+                    window.open(androidApk.local.downloadUrl, "_self");
+                  };
+                }
+              }
+              if (!androidApk.github && !androidApk.local && apkMessageEl) {
                 apkMessageEl.textContent = "暂未提供";
                 apkMessageEl.classList.remove("hidden");
               }
@@ -6262,9 +6440,44 @@
         });
       }
 
+      function resetDelayedNotificationButton() {
+        var delayBtn = document.getElementById("notification-test-delay-btn");
+        if (!delayBtn) return;
+        delayBtn.disabled = false;
+        delayBtn.textContent = "10 秒后发送";
+      }
+
+      function scheduleTestNotification() {
+        var testMsgEl = document.getElementById("notification-test-message");
+        if (state.delayedNotificationTimer) {
+          clearTimeout(state.delayedNotificationTimer);
+          state.delayedNotificationTimer = null;
+        }
+        var delayBtn = document.getElementById("notification-test-delay-btn");
+        if (delayBtn) {
+          delayBtn.disabled = true;
+          delayBtn.textContent = "已安排（10s）";
+        }
+        if (testMsgEl) {
+          testMsgEl.innerHTML = "已安排 10 秒后发送测试通知，请切到后台等待。";
+          testMsgEl.style.color = "var(--text-secondary)";
+          testMsgEl.classList.remove("hidden");
+        }
+        state.delayedNotificationTimer = setTimeout(function() {
+          state.delayedNotificationTimer = null;
+          resetDelayedNotificationButton();
+          testNotification();
+        }, 10000);
+      }
+
       function testNotification() {
         var testMsgEl = document.getElementById("notification-test-message");
         var results = [];
+        if (state.delayedNotificationTimer) {
+          clearTimeout(state.delayedNotificationTimer);
+          state.delayedNotificationTimer = null;
+          resetDelayedNotificationButton();
+        }
 
         // 1. Test sound playback
         var soundOk = tryPlayNotificationSound();
@@ -9549,8 +9762,13 @@
       }
 
       function ensureTerminalFit() {
+        if (state.terminalFitInProgress) return;
+        state.terminalFitInProgress = true;
         var maxAttempts = 20;
         var attempt = 0;
+        function finishFit() {
+          state.terminalFitInProgress = false;
+        }
         function tryFit() {
           attempt++;
           state.terminalViewportSize = { width: 0, height: 0 };
@@ -9560,20 +9778,20 @@
             if (state.terminal) {
               sendTerminalResize(state.terminal.cols, state.terminal.rows);
             }
-            // Validate: if the fitted cols look suspiciously small relative to
-            // the container width, schedule another attempt — the font metrics
-            // or layout may not have settled yet.
             var output = document.getElementById("output");
             if (output && state.terminal) {
               var containerW = output.getBoundingClientRect().width;
-              var expectedMinCols = Math.floor(containerW / 20); // very conservative estimate
+              var expectedMinCols = Math.floor(containerW / 20);
               if (state.terminal.cols < expectedMinCols && attempt < maxAttempts) {
                 requestAnimationFrame(tryFit);
                 return;
               }
             }
+            finishFit();
           } else if (attempt < maxAttempts) {
             requestAnimationFrame(tryFit);
+          } else {
+            finishFit();
           }
         }
         requestAnimationFrame(tryFit);
@@ -9784,16 +10002,7 @@
             } else {
               endedNotifBody = endedSession ? (endedSession.command || msg.sessionId) : msg.sessionId;
             }
-            sendBrowserNotification(
-              endedNotifTitle,
-              endedNotifBody,
-              {
-                tag: "wand-ended-" + msg.sessionId,
-                onClick: function() {
-                  if (msg.sessionId !== state.selectedId) selectSession(msg.sessionId);
-                }
-              }
-            );
+            notifyTaskEnded(msg.sessionId, endedNotifTitle, endedNotifBody);
             if (msg.sessionId !== state.selectedId || document.hidden) {
               showNotificationBubble({
                 title: endedNotifTitle,
@@ -9879,6 +10088,7 @@
               state.currentTask = msg.data || null;
               updateTaskDisplay();
             }
+            notifyTaskProgress(msg.sessionId, msg.data || null);
             // Update session list to reflect current activity (debounced)
             scheduleSessionListUpdate();
             break;
@@ -9925,18 +10135,7 @@
                 } else {
                   permBody += "\n" + permDetail;
                 }
-                sendBrowserNotification(
-                  "需要你的授权",
-                  permBody,
-                  {
-                    tag: "wand-perm-" + msg.sessionId,
-                    onClick: function() {
-                      if (msg.sessionId !== state.selectedId) {
-                        selectSession(msg.sessionId);
-                      }
-                    }
-                  }
-                );
+                notifyPermissionRequest(msg.sessionId, permBody);
                 // In-app bubble if not currently viewing this session
                 if (msg.sessionId !== state.selectedId) {
                   showNotificationBubble({
@@ -9980,12 +10179,7 @@
           case 'notification':
             if (msg.data) {
               if (msg.data.kind === "update") {
-                showUpdateBubble(msg.data.current || "-", msg.data.latest || "-");
-                sendBrowserNotification(
-                  "Wand \u53d1\u73b0\u65b0\u7248\u672c",
-                  "\u5f53\u524d " + (msg.data.current || "-") + " \u2192 \u6700\u65b0 " + (msg.data.latest || "-"),
-                  { tag: "wand-update" }
-                );
+                notifyUpdateAvailable(msg.data.current || "-", msg.data.latest || "-");
               } else if (msg.data.kind === "restart") {
                 showRestartOverlay();
               }
@@ -11754,7 +11948,7 @@
         if (msg.role === "thinking") {
           var thinkingKey = buildExpandKey("thinking", [getMessageKey(msg, messageIndex), "pty"]);
           var thinkingPersisted = getPersistedExpandState(thinkingKey);
-          var thinkingExpanded = thinkingPersisted === null ? !!(state.config && state.config.cardDefaults && state.config.cardDefaults.thinking) : thinkingPersisted;
+          var thinkingExpanded = thinkingPersisted === null ? getCardDefault("thinking") : thinkingPersisted;
           return '<div class="chat-message thinking">' +
             '<div class="thinking-inline thinking-pty ' + (thinkingExpanded ? 'expanded' : 'collapsed') + '" data-expand-kind="thinking" data-expand-key="' + escapeHtml(thinkingKey) + '" data-thinking="" onclick="__thinkingToggle(this)">' +
               '<span class="thinking-inline-icon">⦿</span>' +
@@ -11892,7 +12086,7 @@
         var summaryText = parts.join(" · ");
         var groupKey = buildExpandKey("tool-group", [messageKey, items[0] && items[0].index, items.length]);
         var persistedExpanded = getPersistedExpandState(groupKey);
-        var shouldExpand = persistedExpanded === null ? !!(state.config && state.config.cardDefaults && state.config.cardDefaults.toolGroup) : persistedExpanded;
+        var shouldExpand = persistedExpanded === null ? getCardDefault("toolGroup") : persistedExpanded;
 
         // Render each item's inline-tool card
         var innerHtml = "";
@@ -12004,7 +12198,7 @@
             }
             var thinkingKey = buildExpandKey("thinking", [messageKey, index]);
             var thinkingPersisted = getPersistedExpandState(thinkingKey);
-          var thinkingExpanded = thinkingPersisted === null ? !!(state.config && state.config.cardDefaults && state.config.cardDefaults.thinking) : thinkingPersisted;
+          var thinkingExpanded = thinkingPersisted === null ? getCardDefault("thinking") : thinkingPersisted;
             return '<div class="thinking-inline ' + (thinkingExpanded ? 'expanded' : 'collapsed') + '" data-expand-kind="thinking" data-expand-key="' + escapeHtml(thinkingKey) + '" data-thinking="' + escapeHtml(thinkingText) + '" onclick="__thinkingToggle(this)">' +
               '<span class="thinking-inline-icon">⦿</span>' +
               '<span class="thinking-inline-preview">' + escapeHtml(thinkingExpanded ? thinkingText : preview) + '</span>' +
@@ -12101,7 +12295,7 @@
         var fullResult = resultContent;
 
         var expandedHtml = "";
-        var shouldExpand = persistedExpanded === null ? !!(state.config && state.config.cardDefaults && state.config.cardDefaults.inlineTools) : persistedExpanded;
+        var shouldExpand = persistedExpanded === null ? getCardDefault("inlineTools") : persistedExpanded;
         if (hasResult) {
           expandedHtml = '<div class="inline-tool-expanded" style="display: ' + (shouldExpand ? 'block' : 'none') + ';">' +
             '<div class="inline-tool-result">' + formatInlineResult(resultContent, toolName) + '</div>' +
@@ -12186,7 +12380,7 @@
 
         // Show command preview in header (truncate long commands)
         var cmdPreview = command.length > 80 ? command.slice(0, 77) + "…" : command;
-        var shouldExpand = persistedExpanded === null ? !!(state.config && state.config.cardDefaults && state.config.cardDefaults.terminal) : persistedExpanded;
+        var shouldExpand = persistedExpanded === null ? getCardDefault("terminal") : persistedExpanded;
 
         var termTruncated = toolResult && toolResult._truncated === true;
         var termTruncAttrs = termTruncated
@@ -12275,7 +12469,7 @@
         // Expand state: respect cardDefaults.editCards and persisted state
         var expandKey = buildExpandKey("diff", [messageKey, toolId || index, index]);
         var persistedExpanded = getPersistedExpandState(expandKey);
-        var cardDefaultExpand = !!(state.config && state.config.cardDefaults && state.config.cardDefaults.editCards);
+        var cardDefaultExpand = getCardDefault("editCards");
         var shouldExpand = persistedExpanded === null ? (statusClass === "diff-pending" || cardDefaultExpand) : persistedExpanded;
         var collapsedClass = shouldExpand ? "" : " collapsed";
 
@@ -12484,7 +12678,7 @@
 
         var expandKey = buildExpandKey("tool-card", [messageKey, toolId]);
         var persistedExpanded = getPersistedExpandState(expandKey);
-        var cardDefaultExpand = !!(state.config && state.config.cardDefaults && state.config.cardDefaults.editCards);
+        var cardDefaultExpand = getCardDefault("editCards");
         var shouldExpand = persistedExpanded === null ? (statusClass === "loading" || cardDefaultExpand) : persistedExpanded;
         var tcTruncated = toolResult && toolResult._truncated === true;
         var collapsedClass = shouldExpand ? "" : " collapsed";
@@ -13041,13 +13235,39 @@
         }
       }
 
+      function _shouldSendSystemNotification(opts) {
+        var options = opts || {};
+        if (options.onlyWhenHidden && !document.hidden) return false;
+        if (options.skipWhenSelectedSessionId && options.skipWhenSelectedSessionId === state.selectedId && !document.hidden) {
+          return false;
+        }
+        return true;
+      }
+
+      function _isNotificationThrottled(tag, minIntervalMs) {
+        if (!tag || !minIntervalMs || minIntervalMs <= 0) return false;
+        var lastAt = state.notificationHistory[tag] || 0;
+        var now = Date.now();
+        if (now - lastAt < minIntervalMs) return true;
+        state.notificationHistory[tag] = now;
+        return false;
+      }
+
       function sendBrowserNotification(title, body, opts) {
+        var options = opts || {};
+        var tag = options.tag || "";
+        if (!_shouldSendSystemNotification(options)) return;
+        if (_isNotificationThrottled(tag, options.minIntervalMs || 0)) return;
         // Native Android bridge path
         if (_hasNativeBridge) {
           var perm = _getNativePermission();
           if (perm !== "granted") return;
           try {
-            WandNative.sendNotification(title || "Wand", body || "", (opts && opts.tag) || "");
+            var nativeTag = tag;
+            if (options.kind) {
+              nativeTag = options.kind + (tag ? ":" + tag : "");
+            }
+            WandNative.sendNotification(title || "Wand", body || "", nativeTag || "");
           } catch (_e) {}
           return;
         }
@@ -13057,13 +13277,13 @@
         try {
           var n = new Notification(title, {
             body: body || "",
-            icon: (opts && opts.icon) || "/favicon.ico",
-            tag: (opts && opts.tag) || undefined,
+            icon: options.icon || "/favicon.ico",
+            tag: tag || undefined,
           });
           n.onclick = function() {
             window.focus();
             n.close();
-            if (opts && opts.onClick) opts.onClick();
+            if (options.onClick) options.onClick();
           };
           // Auto-close after 10s
           setTimeout(function() { n.close(); }, 10000);
@@ -13072,6 +13292,76 @@
         }
       }
 
+      function notifyTaskProgress(sessionId, task) {
+        if (!task || !task.title) return;
+        var session = state.sessions.find(function(s) { return s.id === sessionId; });
+        if (!session) return;
+        var sessionLabel = session.summary || session.command || sessionId;
+        sendBrowserNotification(
+          "任务进行中",
+          sessionLabel + "\n" + task.title,
+          {
+            kind: "task",
+            tag: "wand-task-" + sessionId + "-" + task.title,
+            minIntervalMs: 90000,
+            onlyWhenHidden: true,
+            skipWhenSelectedSessionId: sessionId,
+            onClick: function() {
+              if (sessionId !== state.selectedId) selectSession(sessionId);
+            }
+          }
+        );
+      }
+
+      function notifyUpdateAvailable(currentVersion, latestVersion) {
+        showUpdateBubble(currentVersion || "-", latestVersion || "-");
+        sendBrowserNotification(
+          "Wand 发现新版本",
+          "当前 " + (currentVersion || "-") + " → 最新 " + (latestVersion || "-"),
+          {
+            kind: "update",
+            tag: "wand-update",
+            minIntervalMs: 300000,
+          }
+        );
+      }
+
+      function notifyPermissionRequest(sessionId, body) {
+        sendBrowserNotification(
+          "需要你的授权",
+          body,
+          {
+            kind: "permission",
+            tag: "wand-perm-" + sessionId,
+            minIntervalMs: 60000,
+            onlyWhenHidden: true,
+            skipWhenSelectedSessionId: sessionId,
+            onClick: function() {
+              if (sessionId !== state.selectedId) {
+                selectSession(sessionId);
+              }
+            }
+          }
+        );
+      }
+
+      function notifyTaskEnded(sessionId, title, body) {
+        sendBrowserNotification(
+          title,
+          body,
+          {
+            kind: "task-ended",
+            tag: "wand-ended-" + sessionId,
+            minIntervalMs: 10000,
+            onClick: function() {
+              if (sessionId !== state.selectedId) selectSession(sessionId);
+            }
+          }
+        );
+      }
+
+      /**
+
       /**
        * Play a soft, rounded notification chime using Web Audio API.
        * Two ascending sine tones with smooth gain envelope — gentle on the ears.
@@ -13099,13 +13389,15 @@
           // Some browsers suspend AudioContext until user gesture — resume it
           if (ctx.state === "suspended") ctx.resume();
 
+          var vol = (state.notifVolume || 0) / 100;
+
           function tone(freq, start, dur) {
             var osc = ctx.createOscillator();
             var gain = ctx.createGain();
             osc.type = "sine";
             osc.frequency.value = freq;
             gain.gain.setValueAtTime(0, ctx.currentTime + start);
-            gain.gain.linearRampToValueAtTime(0.18, ctx.currentTime + start + 0.04);
+            gain.gain.linearRampToValueAtTime(0.5 * vol, ctx.currentTime + start + 0.04);
             gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + start + dur);
             osc.connect(gain);
             gain.connect(ctx.destination);