@co0ontty/wand 1.14.2 → 1.14.6

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

@@ -109,6 +109,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: "",
@@ -652,6 +655,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 +676,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;
           }
@@ -932,6 +937,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 +1092,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 +1107,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>' +
@@ -1379,6 +1391,17 @@
                   '<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">' +
@@ -1514,32 +1537,49 @@
               '<div class="settings-panel" id="settings-tab-display">' +
                 '<div class="settings-section-title">卡片默认展开状态</div>' +
                 '<p class="hint" style="margin-top:-4px;margin-bottom:12px">设置结构化聊天视图中各类卡片的默认展开/折叠状态。手动操作的展开状态优先于此默认设置。</p>' +
-                '<div class="field field-inline">' +
-                  '<input id="cfg-card-edit" type="checkbox" class="field-checkbox" />' +
-                  '<label class="field-label" for="cfg-card-edit">编辑卡片 (Edit/Write)</label>' +
-                '</div>' +
-                '<p class="hint" style="margin-top:0;margin-bottom:10px">文件编辑和写入操作的 diff 视图</p>' +
-                '<div class="field field-inline">' +
-                  '<input id="cfg-card-inline" type="checkbox" class="field-checkbox" />' +
-                  '<label class="field-label" for="cfg-card-inline">内联工具 (Read/Glob/Grep)</label>' +
-                '</div>' +
-                '<p class="hint" style="margin-top:0;margin-bottom:10px">文件读取、搜索等工具的结果</p>' +
-                '<div class="field field-inline">' +
-                  '<input id="cfg-card-terminal" type="checkbox" class="field-checkbox" />' +
-                  '<label class="field-label" for="cfg-card-terminal">终端输出 (Bash)</label>' +
-                '</div>' +
-                '<p class="hint" style="margin-top:0;margin-bottom:10px">命令行执行结果</p>' +
-                '<div class="field field-inline">' +
-                  '<input id="cfg-card-thinking" type="checkbox" class="field-checkbox" />' +
-                  '<label class="field-label" for="cfg-card-thinking">思考过程 (Thinking)</label>' +
-                '</div>' +
-                '<p class="hint" style="margin-top:0;margin-bottom:10px">Claude 的思考过程块</p>' +
-                '<div class="field field-inline">' +
-                  '<input id="cfg-card-toolgroup" type="checkbox" class="field-checkbox" />' +
-                  '<label class="field-label" for="cfg-card-toolgroup">工具组</label>' +
+                '<div class="switch-card-list">' +
+                  '<label class="switch-card" for="cfg-card-edit">' +
+                    '<div class="switch-card-header">' +
+                      '<span class="switch-card-title">编辑卡片 (Edit/Write)</span>' +
+                      '<input id="cfg-card-edit" type="checkbox" class="switch-toggle" />' +
+                      '<span class="switch-slider"></span>' +
+                    '</div>' +
+                    '<div class="switch-card-desc">文件编辑和写入操作的 diff 视图</div>' +
+                  '</label>' +
+                  '<label class="switch-card" for="cfg-card-inline">' +
+                    '<div class="switch-card-header">' +
+                      '<span class="switch-card-title">内联工具 (Read/Glob/Grep)</span>' +
+                      '<input id="cfg-card-inline" type="checkbox" class="switch-toggle" />' +
+                      '<span class="switch-slider"></span>' +
+                    '</div>' +
+                    '<div class="switch-card-desc">文件读取、搜索等工具的结果</div>' +
+                  '</label>' +
+                  '<label class="switch-card" for="cfg-card-terminal">' +
+                    '<div class="switch-card-header">' +
+                      '<span class="switch-card-title">终端输出 (Bash)</span>' +
+                      '<input id="cfg-card-terminal" type="checkbox" class="switch-toggle" />' +
+                      '<span class="switch-slider"></span>' +
+                    '</div>' +
+                    '<div class="switch-card-desc">命令行执行结果</div>' +
+                  '</label>' +
+                  '<label class="switch-card" for="cfg-card-thinking">' +
+                    '<div class="switch-card-header">' +
+                      '<span class="switch-card-title">思考过程 (Thinking)</span>' +
+                      '<input id="cfg-card-thinking" type="checkbox" class="switch-toggle" />' +
+                      '<span class="switch-slider"></span>' +
+                    '</div>' +
+                    '<div class="switch-card-desc">Claude 的思考过程块</div>' +
+                  '</label>' +
+                  '<label class="switch-card" for="cfg-card-toolgroup">' +
+                    '<div class="switch-card-header">' +
+                      '<span class="switch-card-title">工具组</span>' +
+                      '<input id="cfg-card-toolgroup" type="checkbox" class="switch-toggle" />' +
+                      '<span class="switch-slider"></span>' +
+                    '</div>' +
+                    '<div class="switch-card-desc">连续同类工具调用的折叠组</div>' +
+                  '</label>' +
                 '</div>' +
-                '<p class="hint" style="margin-top:0;margin-bottom:10px">连续同类工具调用的折叠组</p>' +
-                '<button id="save-display-button" class="btn btn-primary btn-block">保存显示设置</button>' +
+                '<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>' +
             '</div>' +
@@ -2757,11 +2797,12 @@
       }
 
       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");
+          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;
@@ -2876,6 +2917,7 @@
               }
             });
           }
+        }
       };
       // Update streaming thinking content (called from WebSocket handler)
       function updateStreamingThinking(text) {
@@ -3112,6 +3154,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;
@@ -3219,6 +3263,35 @@
         var notifTestBtn = document.getElementById("notification-test-btn");
         if (notifTestBtn) notifTestBtn.addEventListener("click", testNotification);
         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");
@@ -3785,7 +3858,9 @@
         } else {
           selectSession(sessionId);
         }
-        closeSessionsDrawer();
+        if (!state.sidebarPinned || isMobileLayout()) {
+          closeSessionsDrawer();
+        }
       }
 
       function handleSessionItemClick(event) {
@@ -4290,6 +4365,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;
       }
 
@@ -4364,6 +4445,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.");
         }
@@ -4382,6 +4483,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();
@@ -5152,6 +5271,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");
@@ -5169,9 +5304,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;
@@ -5183,12 +5320,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;
@@ -5454,6 +5617,13 @@
           if (typeof WandNative !== "undefined" && typeof WandNative.getAppIcon === "function") {
             try { _updateAppIconSelection(WandNative.getAppIcon() || "shorthair"); } catch (_e) {}
           }
+          // Sync native notification sound selector (APK only)
+          if (_hasNativeBridge && typeof WandNative.getNotificationSound === "function") {
+            try {
+              var nsSel = document.getElementById("native-sound-select");
+              if (nsSel) nsSel.value = WandNative.getNotificationSound();
+            } catch (_e) {}
+          }
         }
       }
 
@@ -9277,7 +9447,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) {
@@ -9347,8 +9532,24 @@
         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;
+        var maxAttempts = 20;
         var attempt = 0;
         function tryFit() {
           attempt++;
@@ -9356,19 +9557,19 @@
           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);
+            }
+            // 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
+              if (state.terminal.cols < expectedMinCols && attempt < maxAttempts) {
+                requestAnimationFrame(tryFit);
+                return;
               }
             }
           } else if (attempt < maxAttempts) {
@@ -9401,27 +9602,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() {
@@ -9464,6 +9645,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) {
@@ -10317,7 +10504,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);
@@ -10327,6 +10514,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");
                 }
               }
@@ -10342,10 +10531,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++) {
@@ -10465,11 +10657,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");
@@ -12029,10 +12223,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 || "";
@@ -12077,16 +12272,26 @@
           statusText = "执行中";
         }
 
+        // 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 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">' +
@@ -12120,7 +12325,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

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

@@ -370,12 +370,20 @@
       transition: padding-left var(--transition-normal);
     }
     /* .sidebar-open class toggled for semantic purposes only; sidebar overlays without resizing main layout */
-    .sidebar-open .input-panel {
+    .sidebar-open:not(.sidebar-pinned) .input-panel {
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.2s ease;
     }
 
+    /* ===== 侧边栏常驻 ===== */
+    .main-layout.sidebar-pinned {
+      padding-left: var(--sidebar-width);
+    }
+    .main-layout.sidebar-pinned .floating-sidebar-toggle {
+      display: none;
+    }
+
     /* ===== 抽屉背景遮罩 ===== */
     .drawer-backdrop {
       position: fixed;
@@ -426,6 +434,27 @@
       opacity: 1;
     }
 
+    .sidebar.pinned {
+      transform: translateX(0);
+      pointer-events: auto;
+      opacity: 1;
+      box-shadow: none;
+    }
+
+    .sidebar.pinned .sidebar-close {
+      display: none;
+    }
+
+    /* ===== 图钉按钮 ===== */
+    .sidebar-pin-toggle {
+      flex-shrink: 0;
+      transition: transform var(--transition-fast), color var(--transition-fast);
+    }
+    .sidebar-pin-toggle.pinned {
+      color: var(--primary);
+      transform: rotate(45deg);
+    }
+
     /* ===== 侧边栏头部 ===== */
     .sidebar-header {
       display: flex;
@@ -2139,7 +2168,6 @@
         radial-gradient(circle at top right, rgba(91, 58, 34, 0.2), transparent 35%),
         radial-gradient(circle at bottom left, rgba(197, 101, 61, 0.08), transparent 40%),
         linear-gradient(180deg, #2a221c 0%, #1f1b17 50%, #1a1613 100%);
-      padding: 10px;
       overflow: hidden;
       min-height: 0;
       min-width: 0;
@@ -2165,8 +2193,6 @@
       left: 0;
       right: 0;
       bottom: 0;
-      width: 100%;
-      height: 100%;
       padding: 0;
       overflow: hidden;
     }
@@ -4084,6 +4110,26 @@
       padding: 6px 10px;
       background: rgba(0, 0, 0, 0.03);
       font-size: 0.75rem;
+      cursor: pointer;
+    }
+    .diff-header:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+    .diff-toggle {
+      font-size: 0.625rem;
+      color: var(--text-muted);
+      transition: transform 0.3s var(--ease-spring);
+      flex-shrink: 0;
+      margin-left: auto;
+    }
+    .inline-diff.collapsed .diff-toggle {
+      transform: rotate(-90deg);
+    }
+    .inline-diff.collapsed .diff-body {
+      max-height: 0;
+      overflow: hidden;
+      opacity: 0;
+      transition: max-height 0.35s var(--ease-out-expo), opacity 0.25s ease;
     }
     .diff-file-icon {
       display: none;
@@ -6068,6 +6114,18 @@
 
     /* 平板适配 */
     @media (max-width: 768px) {
+      .sidebar-pin-toggle { display: none; }
+      .sidebar.pinned:not(.open) {
+        transform: translateX(-100%);
+        pointer-events: none;
+        opacity: 0;
+      }
+      .main-layout.sidebar-pinned {
+        padding-left: 0;
+      }
+      .main-layout.sidebar-pinned .floating-sidebar-toggle {
+        display: inline-flex;
+      }
       .app-container {
         --layout-main-file-panel-width: 0px;
       }
@@ -7473,6 +7531,93 @@
       cursor: pointer;
     }
 
+    /* Switch card list */
+    .switch-card-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .switch-card {
+      display: block;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 12px 14px;
+      cursor: pointer;
+      transition: border-color 0.2s, background 0.2s;
+      user-select: none;
+    }
+    .switch-card:hover {
+      border-color: var(--text-muted);
+    }
+    .switch-card-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .switch-card-title {
+      flex: 1;
+      font-size: 0.8125rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .switch-card-desc {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      margin-top: 0;
+      max-height: 0;
+      overflow: hidden;
+      opacity: 0;
+      transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
+    }
+    /* When switch is ON, expand the description */
+    .switch-card:has(.switch-toggle:checked) .switch-card-desc {
+      max-height: 40px;
+      opacity: 1;
+      margin-top: 8px;
+    }
+    .switch-card:has(.switch-toggle:checked) {
+      border-color: var(--accent);
+      background: color-mix(in srgb, var(--accent) 6%, var(--bg-secondary));
+    }
+
+    /* Switch toggle (iOS style) */
+    .switch-toggle {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+    .switch-slider {
+      position: relative;
+      display: inline-block;
+      width: 40px;
+      height: 22px;
+      min-width: 40px;
+      background: #c4b8a8;
+      border-radius: 11px;
+      transition: background 0.25s;
+    }
+    .switch-slider::after {
+      content: "";
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 16px;
+      height: 16px;
+      background: #fff;
+      border-radius: 50%;
+      transition: transform 0.25s;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+    .switch-toggle:checked + .switch-slider {
+      background: var(--accent);
+    }
+    .switch-toggle:checked + .switch-slider::after {
+      transform: translateX(18px);
+    }
+
     .field-file {
       font-size: 0.8rem;
       padding: 6px;

package/package.json

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