@co0ontty/wand 1.14.3 → 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,
@@ -109,6 +110,9 @@
         loginChecked: false,
         bootstrapping: true,
         sessionsDrawerOpen: false,
+        sidebarPinned: (function() {
+          try { return localStorage.getItem("wand-sidebar-pinned") === "true"; } catch (e) { return false; }
+        })(),
         modalOpen: false,
         presetValue: "",
         cwdValue: "",
@@ -131,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; }
         })(),
@@ -652,6 +661,7 @@
         if (!el) return false;
         switch (kind) {
           case "tool-card":
+          case "diff":
             return !el.classList.contains("collapsed");
           case "thinking":
             return el.classList.contains("expanded") && !el.classList.contains("collapsed");
@@ -672,7 +682,8 @@
       function applyExpandedState(el, kind, expanded) {
         if (!el) return;
         switch (kind) {
-          case "tool-card": {
+          case "tool-card":
+          case "diff": {
             el.classList.toggle("collapsed", !expanded);
             break;
           }
@@ -886,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();
@@ -932,6 +942,10 @@
         // Suppress CSS transitions during initial DOM build
         document.documentElement.classList.add("no-transition");
 
+        // Apply persisted pin state before rendering
+        if (state.sidebarPinned && !isMobileLayout()) {
+          state.sessionsDrawerOpen = true;
+        }
         app.innerHTML = isLoggedIn ? renderAppShell() : renderLogin();
         // Reset chat render tracking since DOM was fully replaced
         resetChatRenderCache();
@@ -1083,8 +1097,8 @@
 
         return '<div class="app-container">' +
           '<div id="sessions-drawer-backdrop" class="drawer-backdrop' + drawerClass + '"></div>' +
-          '<div class="main-layout' + (state.sessionsDrawerOpen ? ' sidebar-open' : '') + '">' +
-            '<aside id="sessions-drawer" class="sidebar' + drawerClass + '">' +
+          '<div class="main-layout' + (state.sessionsDrawerOpen ? ' sidebar-open' : '') + (state.sidebarPinned && !isMobileLayout() ? ' sidebar-pinned' : '') + '">' +
+            '<aside id="sessions-drawer" class="sidebar' + drawerClass + (state.sidebarPinned && !isMobileLayout() ? ' pinned' : '') + '">' +
               '<div class="sidebar-header">' +
                 '<div class="sidebar-header-main">' +
                   '<div class="topbar-logo-icon">W</div>' +
@@ -1098,6 +1112,9 @@
                   '<button id="sidebar-refresh-btn" class="btn btn-ghost btn-sm" type="button" title="刷新页面">' +
                     '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>' +
                   '</button>' +
+                  '<button id="sidebar-pin-btn" class="btn btn-ghost btn-sm sidebar-pin-toggle' + (state.sidebarPinned ? ' pinned' : '') + '" type="button" title="' + (state.sidebarPinned ? '取消固定侧栏' : '固定侧栏') + '">' +
+                    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24z"/></svg>' +
+                  '</button>' +
                   '<button id="close-drawer-button" class="btn btn-ghost btn-sm sidebar-close" type="button" aria-label="关闭菜单">×</button>' +
                 '</div>' +
               '</div>' +
@@ -1304,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>' +
@@ -1367,18 +1416,40 @@
               '</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>' +
                 '</div>' +
                 '<p class="hint" style="margin-top:0;margin-bottom:10px">\u5728\u9875\u9762\u9876\u90e8\u5f39\u51fa\u6d6e\u52a8\u901a\u77e5\u6c14\u6ce1</p>' +
+                '<div id="native-sound-section" class="settings-notification-section hidden" style="margin-top:6px">' +
+                  '<div class="settings-section-title">\u7cfb\u7edf\u901a\u77e5\u94c3\u58f0</div>' +
+                  '<div class="settings-about-row">' +
+                    '<span class="settings-label">\u94c3\u58f0</span>' +
+                    '<div style="display:flex;align-items:center;gap:6px">' +
+                      '<select id="native-sound-select" class="field-select" style="min-width:100px"></select>' +
+                      '<button id="native-sound-preview" class="btn btn-ghost btn-sm">\u25b6 \u8bd5\u542c</button>' +
+                    '</div>' +
+                  '</div>' +
+                  '<p class="hint" style="margin-top:0">\u9009\u62e9 Android \u7cfb\u7edf\u901a\u77e5\u4f7f\u7528\u7684\u94c3\u58f0</p>' +
+                '</div>' +
                 '<div class="settings-notification-section" style="margin-top:6px">' +
                   '<div class="settings-section-title">\u6d4f\u89c8\u5668\u901a\u77e5</div>' +
                   '<div class="settings-about-row">' +
@@ -1389,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>' +
@@ -1469,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">' +
@@ -1506,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">' +
@@ -1556,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>' +
@@ -2773,29 +2865,46 @@
           });
       }
 
+      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");
+        var card = headerEl.closest(".tool-use-card") || headerEl.closest(".inline-diff");
         if (card) {
           var wasCollapsed = card.classList.contains("collapsed");
           card.classList.toggle("collapsed");
-          persistElementExpandState(card, "tool-card");
-          // Lazy-load truncated content on expand
-          if (wasCollapsed && card.dataset.truncated === "true" && card.dataset.loaded !== "true") {
-            var toolUseId = card.dataset.toolUseId;
+          var expandKind = card.dataset.expandKind || "tool-card";
+          persistElementExpandState(card, expandKind);
+          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(); }
@@ -2835,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");
@@ -2867,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;
               }
             });
           }
@@ -3130,6 +3215,8 @@
         if (drawerBackdrop) drawerBackdrop.addEventListener("click", closeSessionsDrawer);
         var closeDrawerBtn = document.getElementById("close-drawer-button");
         if (closeDrawerBtn) closeDrawerBtn.addEventListener("click", closeSessionsDrawer);
+        var pinBtn = document.getElementById("sidebar-pin-btn");
+        if (pinBtn) pinBtn.addEventListener("click", toggleSidebarPin);
         var homeBtn = document.getElementById("sidebar-home-btn");
         if (homeBtn) homeBtn.addEventListener("click", function() {
           state.selectedId = null;
@@ -3209,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");
@@ -3236,7 +3350,38 @@
         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") {
+          var nativeSoundSection = document.getElementById("native-sound-section");
+          var nativeSoundSelect = document.getElementById("native-sound-select");
+          var nativeSoundPreview = document.getElementById("native-sound-preview");
+          if (nativeSoundSection && nativeSoundSelect) {
+            nativeSoundSection.classList.remove("hidden");
+            try {
+              var sounds = JSON.parse(WandNative.getAvailableSounds());
+              var current = WandNative.getNotificationSound();
+              nativeSoundSelect.innerHTML = "";
+              for (var si = 0; si < sounds.length; si++) {
+                var opt = document.createElement("option");
+                opt.value = sounds[si].id;
+                opt.textContent = sounds[si].name;
+                if (sounds[si].id === current) opt.selected = true;
+                nativeSoundSelect.appendChild(opt);
+              }
+              nativeSoundSelect.addEventListener("change", function() {
+                try { WandNative.setNotificationSound(nativeSoundSelect.value); } catch (_e) {}
+              });
+              if (nativeSoundPreview) {
+                nativeSoundPreview.addEventListener("click", function() {
+                  try { WandNative.previewSound(nativeSoundSelect.value); } catch (_e) {}
+                });
+              }
+            } catch (_e) {}
+          }
+        }
         var newSessBtn = document.getElementById("topbar-new-session-button");
         if (newSessBtn) newSessBtn.addEventListener("click", openSessionModal);
         var drawerNewSessBtn = document.getElementById("drawer-new-session-button");
@@ -3803,7 +3948,9 @@
         } else {
           selectSession(sessionId);
         }
-        closeSessionsDrawer();
+        if (!state.sidebarPinned || isMobileLayout()) {
+          closeSessionsDrawer();
+        }
       }
 
       function handleSessionItemClick(event) {
@@ -4308,6 +4455,12 @@
         } else {
           updateTerminalJumpToBottomButton();
         }
+        // When switching sessions, re-fit the terminal so the PTY receives
+        // the correct dimensions for this client's viewport.
+        if (sessionChanged && state.fitAddon) {
+          state.terminalViewportSize = { width: 0, height: 0 };
+          scheduleTerminalResize(true);
+        }
         return wrote || sessionChanged;
       }
 
@@ -4382,6 +4535,26 @@
         state.fitAddon = fitAddonConstructor ? new fitAddonConstructor() : null;
         if (state.fitAddon) {
           state.terminal.loadAddon(state.fitAddon);
+          // Patch: FitAddon subtracts 14px for a scrollbar that CSS hides;
+          // recalculate cols without the scrollbar deduction.
+          var _origPropose = state.fitAddon.proposeDimensions;
+          state.fitAddon.proposeDimensions = function() {
+            var result = _origPropose.call(state.fitAddon);
+            if (result && state.terminal) {
+              try {
+                var core = state.terminal._core;
+                var cellW = core._renderService.dimensions.css.cell.width;
+                var el = state.terminal.element;
+                if (cellW > 0 && el && el.parentElement) {
+                  var pw = Math.max(0, parseInt(window.getComputedStyle(el.parentElement).getPropertyValue("width")));
+                  var es = window.getComputedStyle(el);
+                  var ePad = parseInt(es.getPropertyValue("padding-left")) + parseInt(es.getPropertyValue("padding-right"));
+                  result.cols = Math.max(2, Math.floor((pw - ePad) / cellW));
+                }
+              } catch(e) {}
+            }
+            return result;
+          };
         } else {
           console.error("[wand] xterm fit addon failed to load; continuing without fit support.");
         }
@@ -4400,6 +4573,24 @@
         // Retry-based fit: wait for browser to complete layout before measuring and fitting
         if (state.fitAddon) {
           ensureTerminalFit();
+          // Secondary fit after fonts are loaded — FitAddon measures character
+          // dimensions from the rendered font; if a custom web font (e.g. Geist
+          // Mono) hasn't loaded yet the initial fit() uses fallback metrics and
+          // computes too few columns.
+          if (document.fonts && document.fonts.ready) {
+            document.fonts.ready.then(function() {
+              state.terminalViewportSize = { width: 0, height: 0 };
+              ensureTerminalFit();
+            });
+          }
+          // Safety-net fit after layout has fully stabilised (CSS transitions,
+          // deferred reflows, late font loads, etc.)
+          setTimeout(function() {
+            if (state.terminal && state.fitAddon) {
+              state.terminalViewportSize = { width: 0, height: 0 };
+              ensureTerminalFit();
+            }
+          }, 500);
         }
 
         var viewport = getTerminalViewport();
@@ -5139,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 = [];
@@ -5170,6 +5360,22 @@
         subscribeToSession(id);
       }
 
+      function updatePinState() {
+        var drawer = document.getElementById("sessions-drawer");
+        var mainLayout = document.querySelector(".main-layout");
+        var pinBtn = document.getElementById("sidebar-pin-btn");
+        if (drawer) {
+          drawer.classList.toggle("pinned", state.sidebarPinned && !isMobileLayout());
+        }
+        if (mainLayout) {
+          mainLayout.classList.toggle("sidebar-pinned", state.sidebarPinned && !isMobileLayout());
+        }
+        if (pinBtn) {
+          pinBtn.classList.toggle("pinned", state.sidebarPinned);
+          pinBtn.title = state.sidebarPinned ? "取消固定侧栏" : "固定侧栏";
+        }
+      }
+
       function updateDrawerState() {
         var drawer = document.getElementById("sessions-drawer");
         var backdrop = document.getElementById("sessions-drawer-backdrop");
@@ -5187,9 +5393,11 @@
         if (toggleBtn) {
           toggleBtn.classList.toggle("active", state.sessionsDrawerOpen);
         }
+        updatePinState();
       }
 
       function toggleSessionsDrawer() {
+        if (state.sidebarPinned && !isMobileLayout()) return;
         state.sessionsDrawerOpen = !state.sessionsDrawerOpen;
         if (state.sessionsDrawerOpen && isMobileLayout()) {
           state.filePanelOpen = false;
@@ -5201,12 +5409,38 @@
       }
 
       function closeSessionsDrawer() {
+        if (state.sidebarPinned && !isMobileLayout()) return;
         if (!state.sessionsDrawerOpen) return;
         closeSwipedItem();
         state.sessionsDrawerOpen = false;
         updateLayoutState();
       }
 
+      function toggleSidebarPin() {
+        if (isMobileLayout()) return;
+        state.sidebarPinned = !state.sidebarPinned;
+        try {
+          localStorage.setItem("wand-sidebar-pinned", String(state.sidebarPinned));
+        } catch (e) {}
+        if (state.sidebarPinned) {
+          state.sessionsDrawerOpen = true;
+        }
+        updateLayoutState();
+        // Refit terminal after padding-left transition completes
+        var mainLayout = document.querySelector(".main-layout");
+        if (mainLayout) {
+          var onEnd = function(e) {
+            if (e.propertyName === "padding-left") {
+              mainLayout.removeEventListener("transitionend", onEnd);
+              scheduleTerminalResize(true);
+            }
+          };
+          mainLayout.addEventListener("transitionend", onEnd);
+        }
+        // Fallback refit in case transition doesn't fire
+        setTimeout(function() { scheduleTerminalResize(true); }, 350);
+      }
+
       // Store last focused element for focus trap
       var lastFocusedElement = null;
       var focusTrapHandler = null;
@@ -5458,6 +5692,7 @@
           if (confirmEl) confirmEl.value = "";
           hideSettingsMessages();
           setupFocusTrap(modal);
+          bindSettingsTabKeyboardNavigation();
           // Activate first tab
           switchSettingsTab("about");
           // Load settings data
@@ -5467,11 +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 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) {}
+          }
         }
       }
 
@@ -5548,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() {
@@ -5607,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");
@@ -5691,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);
@@ -5704,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");
               }
@@ -6110,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();
@@ -9295,7 +9660,22 @@
           state.resizeObserver = new ResizeObserver(function() { scheduleTerminalResize(true); });
           state.resizeObserver.observe(output);
         }
-        state.resizeHandler = function() { scheduleTerminalResize(true); };
+        var lastKnownDesktop = !isMobileLayout();
+        state.resizeHandler = function() {
+          scheduleTerminalResize(true);
+          // Handle sidebar pin state across mobile/desktop breakpoint
+          var isDesktop = !isMobileLayout();
+          if (lastKnownDesktop !== isDesktop) {
+            lastKnownDesktop = isDesktop;
+            if (!isDesktop && state.sidebarPinned && state.sessionsDrawerOpen) {
+              state.sessionsDrawerOpen = false;
+              updateDrawerState();
+            } else if (isDesktop && state.sidebarPinned && !state.sessionsDrawerOpen) {
+              state.sessionsDrawerOpen = true;
+              updateDrawerState();
+            }
+          }
+        };
         window.addEventListener("resize", state.resizeHandler);
         // Also listen to visualViewport resize for pinch-zoom / browser zoom
         if (window.visualViewport) {
@@ -9365,32 +9745,53 @@
         updateTerminalJumpToBottomButton();
       }
 
+      function sendTerminalResize(cols, rows) {
+        if (!state.selectedId) return;
+        var selectedSess = state.sessions.find(function(s) { return s.id === state.selectedId; });
+        if (isStructuredSession(selectedSess)) return;
+        var nextSize = { cols: cols, rows: rows };
+        if (state.lastResize.cols !== nextSize.cols || state.lastResize.rows !== nextSize.rows) {
+          state.lastResize = nextSize;
+          fetch("/api/sessions/" + state.selectedId + "/resize", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            credentials: "same-origin",
+            body: JSON.stringify(nextSize)
+          }).catch(function() {});
+        }
+      }
+
       function ensureTerminalFit() {
-        var maxAttempts = 10;
+        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 };
           if (shouldResizeTerminalViewport() && state.fitAddon) {
             state.fitAddon.fit();
             maybeScrollTerminalToBottom("resize");
-            if (state.selectedId && state.terminal) {
-              var selectedSess = state.sessions.find(function(s) { return s.id === state.selectedId; });
-              if (!isStructuredSession(selectedSess)) {
-                var nextSize = { cols: state.terminal.cols, rows: state.terminal.rows };
-                if (state.lastResize.cols !== nextSize.cols || state.lastResize.rows !== nextSize.rows) {
-                  state.lastResize = nextSize;
-                  fetch("/api/sessions/" + state.selectedId + "/resize", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    credentials: "same-origin",
-                    body: JSON.stringify(nextSize)
-                  }).catch(function() {});
-                }
+            if (state.terminal) {
+              sendTerminalResize(state.terminal.cols, state.terminal.rows);
+            }
+            var output = document.getElementById("output");
+            if (output && state.terminal) {
+              var containerW = output.getBoundingClientRect().width;
+              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);
@@ -9419,27 +9820,7 @@
           maybeScrollTerminalToBottom("resize");
         }
 
-        var nextSize = {
-          cols: state.terminal.cols,
-          rows: state.terminal.rows
-        };
-
-        if (!state.selectedId) return;
-
-        // Skip resize for structured sessions (no PTY)
-        var resizeSess = state.sessions.find(function(s) { return s.id === state.selectedId; });
-        if (isStructuredSession(resizeSess)) return;
-
-        // Only send resize API call if dimensions actually changed
-        if (state.lastResize.cols !== nextSize.cols || state.lastResize.rows !== nextSize.rows) {
-          state.lastResize = nextSize;
-          fetch("/api/sessions/" + state.selectedId + "/resize", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            credentials: "same-origin",
-            body: JSON.stringify(nextSize)
-          }).catch(function() {});
-        }
+        sendTerminalResize(state.terminal.cols, state.terminal.rows);
       }
 
       function startPolling() {
@@ -9482,6 +9863,12 @@
             subscribeToSession(state.selectedId);
             // Flush pending messages after reconnection
             flushPendingMessages();
+            // Re-fit terminal on reconnect — the viewport may have changed
+            // while disconnected, and the PTY needs up-to-date dimensions.
+            if (state.terminal && state.fitAddon) {
+              state.terminalViewportSize = { width: 0, height: 0 };
+              ensureTerminalFit();
+            }
           };
 
           ws.onmessage = function(event) {
@@ -9615,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,
@@ -9710,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;
@@ -9756,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({
@@ -9811,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();
               }
@@ -10335,7 +10698,7 @@
           // Only expand the single newest tool card (first chat-message = newest due to column-reverse)
           var firstMsg = chatMessages.querySelector(".chat-message:not(.system-info)");
           if (firstMsg) {
-            var cards = firstMsg.querySelectorAll(".tool-use-card");
+            var cards = firstMsg.querySelectorAll(".tool-use-card, .inline-diff[data-expand-key]");
             if (cards.length > 0) {
               var firstCard = cards[0];
               var firstCardKey = getElementExpandKey(firstCard);
@@ -10345,6 +10708,8 @@
               for (var ci = 1; ci < cards.length; ci++) {
                 var cardKey = getElementExpandKey(cards[ci]);
                 if (getPersistedExpandState(cardKey) === null) {
+                  // Never collapse unanswered AskUserQuestion cards
+                  if (cards[ci].classList.contains("ask-user") && !cards[ci].classList.contains("ask-user-answered")) continue;
                   cards[ci].classList.add("collapsed");
                 }
               }
@@ -10360,10 +10725,13 @@
         // Collapse all tool-use cards except those in the new message elements (marked with animate-in)
         // newEls: NodeList/Array of newly added message elements, or null to keep only the first card expanded
         function collapseOldToolCards(container, newEls) {
-          var allCards = container.querySelectorAll(".tool-use-card");
+          var allCards = container.querySelectorAll(".tool-use-card, .inline-diff[data-expand-key]");
           allCards.forEach(function(c) {
             var cardKey = getElementExpandKey(c);
             if (getPersistedExpandState(cardKey) !== null) return;
+            // Never collapse unanswered AskUserQuestion cards — the user
+            // needs to interact with the options.
+            if (c.classList.contains("ask-user") && !c.classList.contains("ask-user-answered")) return;
             // Keep expanded if this card is inside a newly added message
             if (newEls) {
               for (var i = 0; i < newEls.length; i++) {
@@ -10483,11 +10851,13 @@
               smartScrollToBottom(chatMessages);
             });
             var newestMsgEl = chatMessages.querySelector(".chat-message");
-            var allCards = chatMessages.querySelectorAll(".tool-use-card");
+            var allCards = chatMessages.querySelectorAll(".tool-use-card, .inline-diff[data-expand-key]");
             var newestCard = null;
             allCards.forEach(function(c) {
               var cardKey = getElementExpandKey(c);
               if (getPersistedExpandState(cardKey) !== null) return;
+              // Never collapse unanswered AskUserQuestion cards
+              if (c.classList.contains("ask-user") && !c.classList.contains("ask-user-answered")) return;
               if (newestMsgEl && newestMsgEl.contains(c)) {
                 if (!newestCard) newestCard = c;
                 else c.classList.add("collapsed");
@@ -11578,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>' +
@@ -11716,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 = "";
@@ -11828,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>' +
@@ -11925,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>' +
@@ -12010,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
@@ -12047,10 +12417,11 @@
         return "";
       }
 
-      function renderDiffTool(block, toolResult, toolName) {
+      function renderDiffTool(block, toolResult, toolName, messageKey, index) {
         var inputData = block.input || {};
         var path = inputData.file_path || inputData.path || "";
         var fileName = path.split("/").pop() || path;
+        var toolId = block.id || "tool-" + toolName + "-" + (typeof index === "number" ? index : 0);
 
         var oldStr = inputData.old_string || "";
         var newStr = inputData.new_string || inputData.content || "";
@@ -12095,16 +12466,26 @@
           statusText = "执行中";
         }
 
+        // Expand state: respect cardDefaults.editCards and persisted state
+        var expandKey = buildExpandKey("diff", [messageKey, toolId || index, index]);
+        var persistedExpanded = getPersistedExpandState(expandKey);
+        var cardDefaultExpand = getCardDefault("editCards");
+        var shouldExpand = persistedExpanded === null ? (statusClass === "diff-pending" || cardDefaultExpand) : persistedExpanded;
+        var collapsedClass = shouldExpand ? "" : " collapsed";
+
         // If only one column has content, show full width
         var bothCols = leftCol && rightCol;
         var colClass = bothCols ? "diff-col-half" : "diff-col-full";
 
-        return '<div class="inline-diff" data-tool-name="' + escapeHtml(toolName) + '">' +
-          '<div class="diff-header">' +
+        return '<div class="inline-diff' + collapsedClass + '" data-tool-name="' + escapeHtml(toolName) + '"' +
+          ' data-expand-kind="diff" data-expand-key="' + escapeHtml(expandKey) + '"' +
+          ' data-tool-use-id="' + escapeHtml(toolId) + '">' +
+          '<div class="diff-header" onclick="__tcToggle(event,this)">' +
             '<span class="diff-file-icon"></span>' +
             '<span class="diff-file-name">' + escapeHtml(fileName) + '</span>' +
             '<span class="diff-path">' + escapeHtml(path) + '</span>' +
             '<span class="diff-status ' + statusClass + '">' + statusText + '</span>' +
+            '<span class="diff-toggle">▼</span>' +
           '</div>' +
           '<div class="diff-body">' +
             '<div class="diff-columns">' +
@@ -12138,7 +12519,7 @@
 
         // ── Diff-style: Edit, Write, MultiEdit
         if (toolName === "Edit" || toolName === "Write" || toolName === "MultiEdit") {
-          return renderDiffTool(block, toolResult, toolName);
+          return renderDiffTool(block, toolResult, toolName, messageKey, index);
         }
 
         // ── AskUserQuestion tool — special card with batch submit
@@ -12297,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";
@@ -12854,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;
         }
@@ -12870,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);
@@ -12885,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.
@@ -12912,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);