@co0ontty/wand 1.32.0 → 1.32.1

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

@@ -80,6 +80,33 @@
       var configPath = "${escapeHtml(configPath)}";
       var CHAT_EXPAND_STATE_STORAGE_KEY = "wand-chat-expand-state-v1";
 
+      // ===== 一次性 localStorage 迁移 =====
+      // 用 schema 版本号确保每个 migration 只跑一次。每加一项就 ++LS_SCHEMA_VERSION
+      // 并在 LS_MIGRATIONS append 一个函数。已升级用户的 wand-ls-schema 大于等于
+      // 当前长度时整段跳过；新用户首次加载会一口气把所有 migration 都跑完再写
+      // schema 号 —— 因此每个 migration 函数对「key 不存在」的输入也必须是无害的。
+      var LS_MIGRATIONS = [
+        // v1（2026-05）取消独立的「图钉」按钮，呼出侧栏即常驻。旧版残留的
+        // wand-sidebar-pinned=false 会让老用户继续走 drawer 模式看不到新行为，
+        // 这里直接清掉，让 state 初始化回退到默认 true。
+        function migrateSidebarPinDefault() {
+          try { localStorage.removeItem("wand-sidebar-pinned"); } catch (e) {}
+        }
+      ];
+      (function runLocalStorageMigrations() {
+        try {
+          var raw = localStorage.getItem("wand-ls-schema");
+          var applied = raw == null ? 0 : parseInt(raw, 10);
+          if (!(applied >= 0)) applied = 0;
+          for (var i = applied; i < LS_MIGRATIONS.length; i++) {
+            try { LS_MIGRATIONS[i](); } catch (e) {}
+          }
+          if (applied < LS_MIGRATIONS.length) {
+            localStorage.setItem("wand-ls-schema", String(LS_MIGRATIONS.length));
+          }
+        } catch (e) { /* localStorage 不可用就跳过，按默认行为运行 */ }
+      })();
+
       var state = {
         selectedId: (function() {
           try { return localStorage.getItem("wand-selected-session") || null; } catch (e) { return null; }
@@ -154,7 +181,12 @@
         bootstrapping: true,
         sessionsDrawerOpen: false,
         sidebarPinned: (function() {
-          try { return localStorage.getItem("wand-sidebar-pinned") === "true"; } catch (e) { return false; }
+          // 新交互：桌面默认呼出即常驻；只有用户主动 X 关闭过才记 "false"。
+          // 老用户的旧值（"true"/"false"）继续生效，没存过 key 时回退到 true。
+          try {
+            var v = localStorage.getItem("wand-sidebar-pinned");
+            return v === null ? true : v !== "false";
+          } catch (e) { return true; }
         })(),
         sidebarCollapsed: (function() {
           try { return localStorage.getItem("wand-sidebar-collapsed") === "true"; } catch (e) { return false; }
@@ -1380,6 +1412,36 @@
           });
       }
 
+      // ===== 桌面：点 sidebar 外的空白处自动收起 =====
+      // 旧版 drawer 模式下点 backdrop 关闭的便利性，在「呼出即常驻」之后用
+      // document 级捕获 handler 续上。
+      // - 仅 desktop + 全尺寸（非窄条）+ 已打开 时生效
+      // - 窄条态不触发（窄条本来就是稳定常驻形态）
+      // - 手机端由 .drawer-backdrop 元素自己接住点击，不在这里重复处理
+      // - 各类弹层（modal / topbar-more / overflow 菜单 / 文件夹下拉等）不算
+      //   「sidebar 外的空白」，否则点弹层会顺带把 sidebar 关掉
+      // 用 capture 阶段是为了绕过下游按钮自己的 stopPropagation。
+      document.addEventListener("click", function(e) {
+        if (isMobileLayout()) return;
+        if (!state.sidebarPinned) return;
+        if (state.sidebarCollapsed) return;
+        if (!state.sessionsDrawerOpen) return;
+        var target = e.target;
+        if (!target || !(target instanceof Element)) return;
+        if (target.closest("#sessions-drawer")) return;
+        if (target.closest("#sessions-toggle-button")) return;
+        if (target.closest(".floating-sidebar-toggle")) return;
+        if (target.closest(".sidebar-tile-bubble")) return;
+        if (target.closest(
+          ".modal-backdrop, .modal-overlay, .modal-container, " +
+          "[role='dialog'], [role='menu'], " +
+          ".topbar-more-menu, .sidebar-header-overflow, " +
+          ".folder-picker-dropdown, .path-suggestions, " +
+          ".permission-prompt-overlay, .restart-overlay"
+        )) return;
+        closeSessionsDrawer();
+      }, true);
+
       renderBootLoading();
       restoreLoginSession();
 
@@ -1604,9 +1666,6 @@
                       '</button>' +
                     '</div>' +
                   '</div>' +
-                  '<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="sidebar-collapse-btn" class="btn btn-ghost btn-sm sidebar-collapse-toggle' + (isCollapsed ? ' collapsed' : '') + '" type="button" title="' + (isCollapsed ? '展开侧栏' : '收起为窄条') + '" aria-label="' + (isCollapsed ? '展开侧栏' : '收起为窄条') + '">' +
                     (isCollapsed
                       ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="10 6 16 12 10 18"/><line x1="20" y1="5" x2="20" y2="19"/></svg>'
@@ -1841,13 +1900,8 @@
                       '<button id="stop-button" class="btn-circle btn-circle-stop' + (state.selectedId ? "" : " hidden") + '" title="停止">' +
                         '<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="3" width="10" height="10" rx="2"/></svg>' +
                       '</button>' +
-                      // 结构化模式且正在出 token 时显示：中断当前回复、立刻发送新输入。
-                      // 默认走 #send-input-button → 排队；想插队的人显式按这颗。
-                      // 用 pill 形态 + 文字 + 脉动，让用户一眼就看到「立即发送」这条快捷路径。
-                      '<button id="interrupt-send-button" class="btn-pill btn-pill-interrupt hidden" type="button" title="中断当前回复并立即发送新输入（Cmd/Ctrl+Enter）" aria-label="立即发送">' +
-                        '<svg class="btn-pill-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>' +
-                        '<span class="btn-pill-label">立即</span>' +
-                      '</button>' +
+                      // 「立即发送」按钮已下线 —— 默认行为永远是排队（气泡），想插队
+                      // 请点输入框上方那条气泡（chip）。Cmd/Ctrl+Enter 快捷键仍保留。
                       '<button id="send-input-button" class="btn-circle btn-circle-send" title="发送">' +
                         '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>' +
                       '</button>' +
@@ -5823,8 +5877,6 @@
         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 collapseBtn = document.getElementById("sidebar-collapse-btn");
         if (collapseBtn) collapseBtn.addEventListener("click", toggleSidebarCollapsed);
         var sidebarMoreBtn = document.getElementById("sidebar-more-btn");
@@ -6092,11 +6144,6 @@
           closeSessionsDrawer();
           sendOrStart();
         });
-        var interruptSendBtn = document.getElementById("interrupt-send-button");
-        if (interruptSendBtn) interruptSendBtn.addEventListener("click", function() {
-          closeSessionsDrawer();
-          sendOrStart({ interrupt: true });
-        });
         var stopBtn = document.getElementById("stop-button");
         if (stopBtn) stopBtn.addEventListener("click", stopSession);
         var modeSelect = document.getElementById("chat-mode-select");
@@ -8159,14 +8206,17 @@
         // Keep placeholders short so they don't wrap on portrait mobile screens.
         // Only show informative state hints; drop the redundant "send to X" labels.
         if (terminalInteractive) return "终端交互中";
-        if (session && session.status !== "running") {
+        // 只有真正进入终止态（exited / failed / stopped）才提示"会话已结束"。
+        // 结构化会话刚创建或一次回复结束后会回到 "idle"——那是等待下一条输入的
+        // 正常状态，不应该被当成结束。
+        if (session && (session.status === "exited" || session.status === "failed" || session.status === "stopped")) {
           if (canAutoResumeSession(session)) return "";
           return "会话已结束";
         }
         // 结构化会话在出 token 时，输入框仍然可用——告诉用户默认行为是排队，
-        // 想插队请按右侧的 » 按钮。短语保持单行不换行。
+        // 想插队请直接点上面的气泡。短语尽量短，避免在窄屏手机上换行。
         if (isStructuredSession(session) && session.structuredState && session.structuredState.inFlight) {
-          return "回复中…Enter 排队 · 旁边的「» 立即」按钮中断并立即发送";
+          return "回复中…Enter 排队 · 点气泡插队";
         }
         return "";
       }
@@ -9266,7 +9316,6 @@
       function updatePinState() {
         var drawer = document.getElementById("sessions-drawer");
         var mainLayout = document.querySelector(".main-layout");
-        var pinBtn = document.getElementById("sidebar-pin-btn");
         // 与 renderAppShell 保持一致：手机端只允许窄条形态 anchored。
         var isMobile = isMobileLayout();
         var isCollapsed = !!state.sidebarPinned && !!state.sidebarCollapsed;
@@ -9279,10 +9328,6 @@
           mainLayout.classList.toggle("sidebar-pinned", isAnchored);
           mainLayout.classList.toggle("sidebar-collapsed", isCollapsed);
         }
-        if (pinBtn) {
-          pinBtn.classList.toggle("pinned", state.sidebarPinned);
-          pinBtn.title = state.sidebarPinned ? "取消固定侧栏" : "固定侧栏";
-        }
       }
 
       function updateDrawerState() {
@@ -9306,9 +9351,26 @@
       }
 
       function toggleSessionsDrawer() {
-        if (state.sidebarPinned && !isMobileLayout()) return;
+        var isMobile = isMobileLayout();
+        if (!isMobile) {
+          // 桌面：呼出 = 常驻全尺寸；再次点击 = 完全收起（floating-toggle 重新出现）。
+          // 取消了独立的「图钉」概念，sidebarPinned 现在由呼出/关闭自动管理。
+          var willOpen = !state.sidebarPinned;
+          state.sidebarPinned = willOpen;
+          state.sessionsDrawerOpen = willOpen;
+          if (willOpen) {
+            // 桌面重新呼出默认回到全尺寸；窄条形态需用户主动点 collapse 按钮切换。
+            state.sidebarCollapsed = false;
+            try { localStorage.setItem("wand-sidebar-collapsed", "false"); } catch (e) {}
+          }
+          try { localStorage.setItem("wand-sidebar-pinned", String(willOpen)); } catch (e) {}
+          updateLayoutState();
+          scheduleTerminalRefitAfterPaddingTransition();
+          return;
+        }
+        // 手机端：保持原 drawer 行为。
         state.sessionsDrawerOpen = !state.sessionsDrawerOpen;
-        if (state.sessionsDrawerOpen && isMobileLayout()) {
+        if (state.sessionsDrawerOpen) {
           state.filePanelOpen = false;
           try {
             localStorage.setItem("wand-file-panel-open", "false");
@@ -9318,13 +9380,42 @@
       }
 
       function closeSessionsDrawer() {
-        if (state.sidebarPinned && !isMobileLayout()) return;
+        var isMobile = isMobileLayout();
+        if (!isMobile) {
+          // 桌面：X 按钮 / backdrop 点击 = 完全收起，撤掉常驻状态，floating-toggle 重新出现。
+          // 窄条状态下没有 X 按钮（CSS 隐藏），不会走到这里，因此无需特判 collapsed。
+          if (!state.sidebarPinned && !state.sessionsDrawerOpen) return;
+          closeSwipedItem();
+          state.sidebarPinned = false;
+          state.sessionsDrawerOpen = false;
+          try { localStorage.setItem("wand-sidebar-pinned", "false"); } catch (e) {}
+          updateLayoutState();
+          scheduleTerminalRefitAfterPaddingTransition();
+          return;
+        }
+        // 手机端：保持原 drawer 关闭行为。
         if (!state.sessionsDrawerOpen) return;
         closeSwipedItem();
         state.sessionsDrawerOpen = false;
         updateLayoutState();
       }
 
+      // 桌面 padding-left transition 结束后重新拟合终端尺寸。
+      // 抽出来给 toggleSessionsDrawer / closeSessionsDrawer / toggleSidebarCollapsed 复用。
+      function scheduleTerminalRefitAfterPaddingTransition() {
+        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);
+        }
+        setTimeout(function() { scheduleTerminalResize(true); }, 350);
+      }
+
       var collapsedTileBubbleEl = null;
       function ensureCollapsedTileBubble() {
         if (collapsedTileBubbleEl && document.body.contains(collapsedTileBubbleEl)) {
@@ -9390,8 +9481,7 @@
 
       function toggleSidebarCollapsed() {
         var isMobile = isMobileLayout();
-        // 在 drawer 模式（未 pin）下点 collapse 视为「先固定、再收起为窄条」——
-        // 用户直觉是「点了就该看到窄条」，过去这里 early return 让按钮看上去没反应。
+        // 任何形态下点窄条按钮都意味着「我要常驻」，确保 pinned 写上。
         if (!state.sidebarPinned) {
           state.sidebarPinned = true;
           try {
@@ -9415,47 +9505,13 @@
             localStorage.setItem("wand-sidebar-pinned", "false");
           } catch (e) {}
         } else {
-          // 桌面端展开窄条 → 300px 全栏固定，自动打开。
+          // 桌面端展开窄条 → 300px 全栏常驻。
           state.sessionsDrawerOpen = true;
         }
         render();
-        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);
-        }
-        setTimeout(function() { scheduleTerminalResize(true); }, 350);
+        scheduleTerminalRefitAfterPaddingTransition();
       }
 
-      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;
@@ -12257,9 +12313,10 @@
 
       function postStructuredInput(input, inputBox, session, opts) {
         opts = opts || {};
-        // 用户显式点击"立即发送"才会传 interrupt:true。普通 Enter / 点发送
-        // 在上一条还在流式时默认走 queue —— 后端 sendMessage(...) 会把它
-        // 追加到 queuedMessages，等当前 turn 结束自动 flush。
+        // interrupt:true 现在只来自 Cmd/Ctrl+Enter 快捷键，或点队列气泡触发的
+        // queueBarPromoteIndex()。普通 Enter / 点发送在上一条还在流式时默认走
+        // queue —— 后端 sendMessage(...) 会把它追加到 queuedMessages，等当前 turn
+        // 结束自动 flush；想插队就点输入框上方那条气泡。
         var requestedInterrupt = !!opts.interrupt;
         console.log("[WAND] postStructuredInput selectedId:", state.selectedId, "input:", input && input.substring(0, 50), "requestedInterrupt:", requestedInterrupt, "session:", session && { id: session.id, sessionKind: session.sessionKind, runner: session.runner, status: session.status, inFlight: session.structuredState && session.structuredState.inFlight });
         if (!state.selectedId || !input) return Promise.resolve();
@@ -12297,7 +12354,7 @@
           updateSessionSnapshot(optimisticPatch);
           var queueRefreshed = state.sessions.find(function(s) { return s.id === session.id; }) || session;
           state.currentMessages = buildMessagesForRender(queueRefreshed, getPreferredMessages(queueRefreshed, queueRefreshed.output, false));
-          updateInputHint("已加入排队，等待当前回复完成…");
+          updateInputHint("已加入排队…");
           renderChat(true);
           updateStructuredQueueCounter();
           // 乐观 toast：原本只在 POST 完成后才提示，Claude 流式拖太久时用户根本
@@ -12458,8 +12515,9 @@
       //   · 默认只展开队首（即下一个要发的那条），显示编号 + 文本 + × 删除
       //   · 其他消息收起成一根小横杠（指示存在但不占空间）
       //   · 鼠标悬到任意小横杠 → 该条展开、原本展开的那条收回小横杠
-      //   · 悬停期间可以按住展开的那条向上 / 向下拖拽 → 换序
-      // 末尾跟一个 ⚡ "立即" 按钮：中断当前回复、把队首作为新输入插队发出去。
+      //   · 点一下任意气泡 → 中断当前回复、把这条作为新输入插队发出去
+      //   · 按住任意气泡向上 / 向下拖拽 → 换序
+      // 末尾跟一个 ⚡ 按钮：等价于点队首气泡（保留作为快速插队的视觉提示）。
       // 数据源：session.queuedMessages（后端 WS + postStructuredInput 乐观更新）。
       // ──────────────────────────────────────────────────────────────────────────
 
@@ -12499,8 +12557,8 @@
           var itemClass = "queue-bar-item";
           if (isExpanded) itemClass += " expanded";
           if (single) itemClass += " queue-bar-item-single";
-          // 拖拽起手区是整个 chip，但 delete 按钮要独占点击。
-          var titleAttr = isExpanded ? raw + "（按住可拖动调整顺序）" : raw;
+          // 整个 chip 既是拖拽起手区，也是"点一下立即发送"的触发点；delete 按钮单独占点击。
+          var titleAttr = isExpanded ? raw + "（点一下立即发送 · 按住可拖动调序）" : raw + "（点一下立即发送）";
           chips +=
             '<li class="' + itemClass + '" data-index="' + i + '" data-action="drag"' +
                 ' title="' + escapeHtml(titleAttr) + '">' +
@@ -12654,19 +12712,27 @@
       }
 
       function queueBarPromoteHead() {
+        queueBarPromoteIndex(0);
+      }
+
+      // 把队列里第 index 条剥下来，作为新的输入立刻发送出去。
+      // - inFlight：interrupt + preserveQueue（中断当前回复，保留其它排队）
+      // - 非 inFlight：当作普通新消息发出去
+      // 用户路径：点输入框上方的气泡（chip）→ 这里。
+      function queueBarPromoteIndex(index) {
         var session = state.sessions.find(function(s) { return s.id === state.selectedId; });
         if (!session) return;
         var queue = Array.isArray(session.queuedMessages) ? session.queuedMessages.slice() : [];
-        if (queue.length === 0) return;
-        var head = queue[0];
-        var rest = queue.slice(1);
+        if (index < 0 || index >= queue.length) return;
+        var picked = queue[index];
+        var rest = queue.slice(0, index).concat(queue.slice(index + 1));
         var prev = queue.slice();
         var inFlight = !!(session.structuredState && session.structuredState.inFlight && session.status === "running");
 
-        // 乐观：剥掉队首；hover 下标随之收缩
+        // 乐观：剥掉这一条；hover 下标随之收缩
         if (typeof state.queueBarHoverIndex === "number") {
-          if (state.queueBarHoverIndex === 0) state.queueBarHoverIndex = null;
-          else state.queueBarHoverIndex -= 1;
+          if (state.queueBarHoverIndex === index) state.queueBarHoverIndex = null;
+          else if (state.queueBarHoverIndex > index) state.queueBarHoverIndex -= 1;
         }
         updateSessionSnapshot({ id: session.id, queuedMessages: rest });
 
@@ -12674,14 +12740,14 @@
           ? crypto.randomUUID()
           : (Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10));
 
-        var body = { input: head, idempotencyKey: idempotencyKey };
+        var body = { input: picked, idempotencyKey: idempotencyKey };
         if (inFlight) {
           // 中断 + 保留剩余队列
           body.interrupt = true;
           body.preserveQueue = true;
         }
         // 给一个乐观 toast，让用户瞬间知道点击生效了
-        showToast(inFlight ? "已请求中断当前回复，立即发送队首。" : "已立即发送队首消息。", "info");
+        showToast(inFlight ? "已请求中断当前回复，立即发送这条。" : "已立即发送这条消息。", "info");
 
         fetch("/api/structured-sessions/" + session.id + "/messages", {
           method: "POST",
@@ -12715,6 +12781,9 @@
       }
 
       // ── 拖拽排序（Pointer Events + 真实高度的 sort/animate）──
+      // 单条气泡的 pointerdown 也会进这里，但 queue.length <= 1 时直接返回，让
+      // 系统 click 事件穿透到 #queue-bar-host 的 click delegate（那里再判断"点击
+      // 气泡 → 立即发送"）。
       function queueBarDragStart(ev, chipEl) {
         var session = state.sessions.find(function(s) { return s.id === state.selectedId; });
         if (!session) return;
@@ -12746,6 +12815,7 @@
           startY: ev.clientY,
           gap: gap,
           queueSnapshot: queue,
+          moved: false, // 没真正拖动过 → 抬手时按 tap 处理：promote 这条
         };
 
         chipEl.classList.add("dragging");
@@ -12793,6 +12863,8 @@
         if (!d || ev.pointerId !== d.pointerId) return;
         ev.preventDefault();
         var deltaY = ev.clientY - d.startY;
+        // 4px 阈值过滤抖动 / 触屏轻微滑动；超过才算"真的在拖"，否则抬手当 tap。
+        if (Math.abs(deltaY) > 4) d.moved = true;
         d.itemEl.style.transform = "translateY(" + deltaY + "px)";
 
         // 拖动中心 Y 决定目标插入位置
@@ -12827,6 +12899,7 @@
         var origIndex = d.origIndex;
         var targetIndex = d.targetIndex;
         var queueSnapshot = d.queueSnapshot;
+        var wasTap = !d.moved;
 
         // 清掉 inline transform 让 CSS 自然回位
         d.siblings.forEach(function(el) {
@@ -12838,8 +12911,9 @@
         state.queueBarDrag = null;
 
         if (origIndex === targetIndex) {
-          // 没动，光擦一下重渲就行
+          // 没真的移动过 → 按 tap 处理：把这条剥下来插队发送。
           updateQueueBar();
+          if (wasTap) queueBarPromoteIndex(origIndex);
           return;
         }
 
@@ -12886,7 +12960,16 @@
           var actionEl = ev.target && ev.target.closest ? ev.target.closest("[data-action]") : null;
           if (!actionEl || !host.contains(actionEl)) return;
           var action = actionEl.getAttribute("data-action");
-          if (action === "drag") return; // 拖拽由 pointerdown 处理，吞掉 click
+          if (action === "drag") {
+            // queue.length > 1 时 pointerdown 已经 preventDefault → click 不会到这；
+            // queue.length === 1 时 drag-start 早退、click 会落到这里：当成 tap，
+            // 把这条直接 promote 出去。
+            ev.preventDefault();
+            ev.stopPropagation();
+            var idx = Number(actionEl.getAttribute("data-index"));
+            queueBarPromoteIndex(idx);
+            return;
+          }
           ev.preventDefault();
           ev.stopPropagation();
           if (action === "promote") { queueBarPromoteHead(); return; }
@@ -13502,12 +13585,6 @@
             : (isCodex ? (isRunning ? "发送给 Codex" : "Codex 会话已结束") : (!selectedSession || isRunning || canResumeOnSend ? "发送" : "会话已结束")));
           sendBtn.classList.toggle("queue-mode", structuredInFlight);
         }
-        var interruptBtn = document.getElementById("interrupt-send-button");
-        if (interruptBtn) {
-          // 仅结构化 + inFlight 时显示。pty 会话有自己的 Ctrl+C / stop 按钮，
-          // 用不上这套语义。
-          interruptBtn.classList.toggle("hidden", !structuredInFlight);
-        }
         var container = document.getElementById("output");
         if (container) container.classList.toggle("interactive", !structured && state.terminalInteractive);
       }
@@ -16993,24 +17070,13 @@
           return;
         }
 
-        // 当前 turn 已结束（结构化 inFlight=false 或 PTY 非 running）就把进度条
-        // 收起来——模型经常忘了发最后一条"全 completed"的 TodoWrite，让用户
-        // 对着 "5/6" 干瞪眼很别扭。allDone 那条分支保留，提前命中更快返回。
-        var sel = state.sessions.find(function(s) { return s.id === state.selectedId; });
-        var turnDone = false;
-        if (sel) {
-          if (isStructuredSession(sel)) {
-            turnDone = !(sel.structuredState && sel.structuredState.inFlight);
-          } else {
-            turnDone = sel.status !== "running";
-          }
-        }
-        if (turnDone) {
-          container.classList.add("hidden");
-          if (bodyEl) bodyEl.classList.add("hidden");
-          return;
-        }
-
+        // 之前这里在 turn 结束（结构化 inFlight=false 或 PTY 非 running）时
+        // 把进度条收起来，理由是「模型经常忘了发最后一条全 completed 的
+        // TodoWrite，让用户对着 5/6 干瞪眼很别扭」。但反馈是：在结构化模式下
+        // inFlight 在流间隙会短暂置假，进度条因此跟着闪没；而且 turn 刚结束
+        // 时用户其实想再看一眼最终进度。改回「只要当前 turn 里有 todos 就显
+        // 示，allDone 时再隐藏」，跨 turn 残留交给开头那段「最后一条 user
+        // 消息后才扫 TodoWrite」的 scoping 兜住。
         container.classList.remove("hidden");
         if (bodyEl) bodyEl.classList.remove("hidden");
 

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

@@ -515,33 +515,15 @@
       transition: width 0.3s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease, opacity 0.25s ease;
     }
 
-    /* 多塞一层 .sidebar-header-actions 把 specificity 抬到 0,4,0，
+    /* 窄条（collapsed）状态：不显示 X 关闭按钮。
+       窄条只保留「展开」按钮，关闭操作必须先回到全尺寸。
+       多塞一层 .sidebar-header-actions 把 specificity 抬到 0,4,0，
        压过文件后段 .sidebar-header-actions .btn-ghost.btn-sm
        与 .drawer-close-btn 的 display: inline-flex 重置规则。 */
-    .sidebar.pinned .sidebar-header-actions .sidebar-close {
-      display: none;
-    }
-
-    /* 窄条（collapsed）状态：明确不显示 X 关闭按钮。
-       虽然 collapsed 当前必然蕴含 pinned（见 isSidebarNarrow），
-       上一条 .sidebar.pinned 规则已经能把它藏住，但单独写一条更直观，
-       也防止以后允许 drawer 模式下 collapse 时漏掉。
-       展开（drawer 模式）下才显示关闭按钮供用户收起侧栏。 */
     .sidebar.collapsed .sidebar-header-actions .sidebar-close {
       display: none;
     }
 
-    /* 与上方对称：drawer 模式（未 pin）下，X 关闭按钮已能把侧栏关掉，
-       再放一个「收起为窄条」按钮会和 X 视觉上重复，且它的行为
-       （自动 pin + collapse）也容易让人误以为是关闭。
-       只在 pinned 模式保留这颗，drawer 模式下隐藏。
-       注意：必须用 .sidebar-header-actions 多嵌一层把 specificity 提到 0,4,0，
-       否则会和文件后段 .sidebar-header-actions .btn-ghost.btn-sm (0,3,0) 打平
-       而因后定义胜出，导致 drawer 模式下窄条按钮和 X 同时显示。 */
-    .sidebar:not(.pinned) .sidebar-header-actions .sidebar-collapse-toggle {
-      display: none;
-    }
-
     /* ===== 侧栏窄条模式（仅 desktop pin 模式生效）===== */
     .sidebar.pinned.collapsed {
       width: var(--sidebar-collapsed-width);
@@ -553,7 +535,6 @@
     }
     .sidebar.pinned.collapsed .sidebar-header-main,
     .sidebar.pinned.collapsed .sidebar-header-more,
-    .sidebar.pinned.collapsed .sidebar-pin-toggle,
     .sidebar.pinned.collapsed .sidebar-footer {
       display: none;
     }
@@ -700,15 +681,6 @@
     .sidebar-collapse-toggle.collapsed {
       color: var(--primary);
     }
-    /* ===== 图钉按钮 ===== */
-    .sidebar-pin-toggle {
-      flex-shrink: 0;
-      transition: transform 0.3s var(--ease-out-expo), color var(--transition-fast);
-    }
-    .sidebar-pin-toggle.pinned {
-      color: var(--primary);
-      transform: rotate(45deg);
-    }
 
     /* ===== 侧边栏头部 ===== */
     .sidebar-header {
@@ -2617,6 +2589,11 @@
       flex: 1;
       display: flex;
       flex-direction: column;
+      /* min-width: 0 是关键：作为 .main-layout（flex row）的子项，默认
+         min-width:auto 会让 main-content 跟着内部最宽的不可断节点一起撑大，
+         窄屏上结果就是 chat 卡片把布局推宽 → 内容被 overflow:hidden 截掉
+         却又拖不动。这里强制可收缩，配合下游 .chat-* 的 break-word 才有效。 */
+      min-width: 0;
       min-height: 0;
       overflow: hidden;
       background: transparent;
@@ -4062,14 +4039,21 @@
       color: var(--text-tertiary);
     }
 
-    /* ===== 消息气泡 ===== */
+    /* ===== 消息气泡 =====
+       兜底约束：气泡不应超出聊天容器宽度。即便子节点（长 URL、不可断字符串、
+       嵌入元素）想撑宽，也由 max-width / overflow-x 截断或换行。 */
     .chat-message-bubble {
       padding: 12px 16px;
       border-radius: var(--radius-md);
       font-size: 0.875rem;
       line-height: var(--line-height-relaxed);
       word-wrap: break-word;
+      overflow-wrap: anywhere;
+      word-break: break-word;
       white-space: pre-wrap;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       box-shadow: var(--shadow-sm);
       transition: box-shadow var(--transition-fast);
     }
@@ -4123,13 +4107,20 @@
       display: flex;
       flex-direction: column;
       gap: 2px;
+      width: 100%;
       max-width: 100%;
       min-width: 0;
+      /* overflow-x: hidden 兜底——内部 tool-use-card / inline-terminal /
+         markdown 如果还有不可断超长 token，绝不让它把整张消息推宽。
+         结合 word-break + overflow-wrap，用户看到的永远是换行不是横滚条。 */
+      overflow-x: hidden;
       font-size: 0.875rem;
       line-height: var(--line-height-relaxed);
       word-wrap: break-word;
+      word-break: break-word;
       overflow-wrap: anywhere;
       color: var(--text-primary);
+      box-sizing: border-box;
     }
 
     .chat-message-content > .thinking-inline,
@@ -4148,7 +4139,10 @@
       display: flex;
       flex-direction: column;
       gap: 6px;
+      width: 100%;
       max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
     }
     /* user turn 默认 align-self: flex-end（右对齐）；多段渲染时强制
        容器内左对齐，否则 subagent 段会被推到右边，border-left 色条断裂。 */
@@ -4160,12 +4154,22 @@
       display: flex;
       flex-direction: column;
       align-self: flex-start;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
     }
     .chat-message.multi-agent .chat-message-segment.subagent {
       padding-left: 10px;
       margin-left: 6px;
       border-left: 2px solid var(--agent-color, var(--border-subtle));
       border-radius: 0 4px 4px 0;
+      /* 父 .chat-message-segment 是 width:100%; box-sizing:border-box，padding
+         和 border 已被 border-box 吃掉，但 margin-left:6px 是外间距，会把
+         整段推出父容器 6px 撞屏幕右边。这里把宽度从父宽减掉同等 margin，
+         视觉上左缘内缩 6px、右缘对齐父容器，刚好不溢出。 */
+      width: calc(100% - 6px);
+      max-width: calc(100% - 6px);
     }
     .chat-message.multi-agent .chat-message-segment.subagent .chat-message-content {
       /* 子 agent 段内的气泡稍微弱化背景，区分主线 */
@@ -4179,13 +4183,19 @@
       color: var(--agent-color, var(--accent));
     }
 
-    /* "勤劳初二 ↳ 让 侦探猫 帮忙" 分隔提示 */
+    /* "勤劳初二 ↳ 让 侦探猫 帮忙" 分隔提示
+       注：color-mix() 需要 Chrome/WebView 111+（2023.04）。Android APK 上常有更老
+       的 WebView，会把 color-mix(...) 当作 invalid 整条扔掉，导致背景/边框消失。
+       下面凡是 color-mix 的属性都先写一条 rgba()/纯色 fallback，再被 color-mix
+       覆盖；旧浏览器看到 fallback、新浏览器自动用 color-mix。同一文件里下方
+       .chat-handoff-tag / .subagent-reply / .subagent-reply-cycle 等也是同思路。 */
     .chat-handoff {
       align-self: flex-start;
       margin: 4px 0 2px 4px;
       padding: 2px 10px;
       font-size: 0.7rem;
       color: var(--text-tertiary);
+      background: rgba(197, 101, 61, 0.08);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 8%, transparent);
       border-left: 2px solid var(--agent-color, var(--accent));
       border-radius: 0 8px 8px 0;
@@ -4216,7 +4226,9 @@
       letter-spacing: 0.04em;
       text-transform: uppercase;
       color: var(--agent-color, var(--accent));
+      background: rgba(197, 101, 61, 0.14);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 14%, transparent);
+      border: 1px solid rgba(197, 101, 61, 0.32);
       border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 32%, transparent);
       border-radius: 4px;
       vertical-align: 1px;
@@ -4226,7 +4238,9 @@
 
     /* subagent 回复气泡（群聊角色完成任务后的发言） */
     .subagent-reply {
+      background: rgba(197, 101, 61, 0.06);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 6%, var(--bg-surface));
+      border: 1px solid rgba(197, 101, 61, 0.20);
       border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 20%, transparent);
       border-radius: 10px;
       padding: 10px 14px;
@@ -4236,6 +4250,10 @@
       color: var(--text-primary);
       word-break: break-word;
       overflow-wrap: anywhere;
+      /* box-sizing: border-box 让 padding(14px*2)+border(1px*2) 算进 width:100%，
+         不再外鼓 30px 撑出 subagent 段右边缘。 */
+      box-sizing: border-box;
+      width: 100%;
       max-width: 100%;
       min-width: 0;
       overflow-x: hidden;
@@ -4245,7 +4263,9 @@
     .subagent-reply > :last-child { margin-bottom: 0; }
 
     .subagent-reply.error {
+      background: rgba(226, 87, 76, 0.08);
       background: color-mix(in srgb, var(--danger, #e2574c) 8%, var(--bg-surface));
+      border-color: rgba(226, 87, 76, 0.35);
       border-color: color-mix(in srgb, var(--danger, #e2574c) 35%, transparent);
     }
 
@@ -4336,8 +4356,11 @@
       font-size: 0.7rem;
       font-weight: 500;
       line-height: 1.4;
+      color: var(--accent);
       color: var(--agent-color, var(--accent));
+      background: rgba(255, 248, 240, 0.95);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 8%, var(--bg-surface, #fff));
+      border: 1px solid rgba(197, 101, 61, 0.28);
       border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent)) 28%, transparent);
       border-radius: 999px;
       cursor: pointer;
@@ -4345,7 +4368,9 @@
       transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
     }
     .subagent-reply-cycle:hover {
+      background: rgba(248, 226, 210, 1);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 16%, var(--bg-surface, #fff));
+      border-color: rgba(197, 101, 61, 0.45);
       border-color: color-mix(in srgb, var(--agent-color, var(--accent)) 45%, transparent);
     }
     .subagent-reply-cycle:active {
@@ -4362,6 +4387,7 @@
       height: 6px;
     }
     .subagent-reply-scroll::-webkit-scrollbar-thumb {
+      background: rgba(197, 101, 61, 0.35);
       background: color-mix(in srgb, var(--agent-color, var(--accent)) 35%, transparent);
       border-radius: 3px;
     }
@@ -4442,10 +4468,15 @@
       font-size: 0.7rem;
       color: var(--text-secondary);
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
       max-height: 240px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       border-top: 1px dashed var(--border-subtle);
+      box-sizing: border-box;
     }
     .unknown-block.collapsed .unknown-block-body {
       display: none;
@@ -4601,6 +4632,9 @@
       overflow: hidden;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* min-width: 0 让卡片不被内部 <pre>/长路径撑出父容器；缺这一行时
+         手机 APK 上长命令 / 长 JSON 会把整张卡片推宽到屏幕外被截掉。 */
+      min-width: 0;
       box-sizing: border-box;
       background: linear-gradient(180deg, rgba(255, 251, 245, 0.88) 0%, rgba(255, 246, 234, 0.72) 100%);
       box-shadow: 0 1px 2px rgba(89, 58, 32, 0.04);
@@ -4780,8 +4814,12 @@
       font-family: var(--font-mono);
       color: var(--text-secondary);
       white-space: pre-wrap;
-      overflow-wrap: break-word;
+      overflow-wrap: anywhere;
+      word-break: break-word;
       max-height: 400px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       line-height: 1.55;
     }
@@ -4796,13 +4834,20 @@
       font-family: var(--font-mono);
       color: var(--text-secondary);
       white-space: pre-wrap;
-      overflow-wrap: break-word;
+      /* anywhere + break-all 兜底长 token / 长路径 / 长 URL：手机 APK 上
+         遇到不可断字符串时换行，绝不横向溢出。 */
+      overflow-wrap: anywhere;
+      word-break: break-all;
       max-height: 320px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       line-height: 1.55;
       background: rgba(125, 91, 57, 0.035);
       border-radius: var(--radius-xs);
       padding: 8px 10px;
+      box-sizing: border-box;
     }
     .tool-use-result-empty {
       font-size: 0.75rem;
@@ -5046,7 +5091,8 @@
     }
     .thinking-inline.expanded .thinking-inline-preview {
       white-space: pre-wrap;
-      overflow-wrap: break-word;
+      overflow-wrap: anywhere;
+      word-break: break-word;
     }
     .thinking-inline-action {
       flex-shrink: 0;
@@ -5120,6 +5166,8 @@
       margin: 4px 0;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* 同 .tool-use-card：内部嵌套 inline-tool 长路径不能撑爆窄屏父容器。 */
+      min-width: 0;
       box-sizing: border-box;
       border-radius: var(--radius-sm);
       border: 1px solid var(--border-subtle);
@@ -5248,6 +5296,8 @@
       margin: 1px 0;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* 同 .tool-use-card：长路径 / 长查询不能撑爆窄屏父容器。 */
+      min-width: 0;
       box-sizing: border-box;
       border-radius: var(--radius-xs);
       cursor: pointer;
@@ -5267,6 +5317,8 @@
       font-family: var(--font-mono);
       line-height: 1.45;
       border-radius: var(--radius-xs);
+      max-width: 100%;
+      min-width: 0;
       transition: background 0.16s ease, color 0.16s ease;
     }
     .inline-tool:hover .inline-tool-row {
@@ -5339,6 +5391,9 @@
       padding: 10px 12px;
       margin-top: 6px;
       max-height: 320px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: rgba(125, 91, 57, 0.2) transparent;
@@ -5359,7 +5414,10 @@
       line-height: 1.55;
       color: var(--text-secondary);
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
+      min-width: 0;
       margin: 0;
     }
     .inline-tool-error-inline {
@@ -5442,6 +5500,8 @@
       margin: 4px 0;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* 同 .tool-use-card：长命令 / 长输出不能撑爆窄屏父容器。 */
+      min-width: 0;
       box-sizing: border-box;
       border: 1px solid rgba(15, 12, 9, 0.6);
       border-radius: var(--radius-sm);
@@ -5471,6 +5531,8 @@
       cursor: pointer;
       user-select: none;
       position: relative;
+      max-width: 100%;
+      min-width: 0;
     }
     .term-header:hover {
       background:
@@ -5550,7 +5612,10 @@
       line-height: 1.55;
       margin-bottom: 6px;
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
+      min-width: 0;
     }
     .term-prompt {
       color: #6ee09a;
@@ -5563,6 +5628,9 @@
       padding-top: 8px;
       border-top: 1px dashed rgba(255, 255, 255, 0.06);
       max-height: 360px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
@@ -5583,7 +5651,10 @@
       color: #d4c2a3;
       line-height: 1.55;
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
+      min-width: 0;
     }
     .term-exit {
       margin-top: 10px;
@@ -5605,6 +5676,8 @@
       margin: 4px 0;
       width: 100%;
       max-width: var(--chat-card-max-width, 720px);
+      /* 同 .tool-use-card：长路径 / 长 diff 不能撑爆窄屏父容器。 */
+      min-width: 0;
       box-sizing: border-box;
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-sm);
@@ -5626,6 +5699,8 @@
       font-size: 0.8125rem;
       cursor: pointer;
       transition: background 0.18s ease;
+      max-width: 100%;
+      min-width: 0;
     }
     .diff-header:hover {
       background: rgba(197, 101, 61, 0.04);
@@ -5701,11 +5776,15 @@
       display: flex;
       gap: 1px;
       background: rgba(125, 91, 57, 0.08);
+      max-width: 100%;
+      min-width: 0;
     }
     .diff-col {
-      flex: 1;
+      flex: 1 1 0;
       min-width: 0;
+      max-width: 100%;
       background: rgba(255, 253, 248, 0.85);
+      overflow: hidden;
     }
     .diff-col-half {
       flex: 1;
@@ -5731,7 +5810,12 @@
       font-size: 0.75rem;
       line-height: 1.55;
       white-space: pre-wrap;
+      /* 长 token / 长 URL 必须按字符断，否则不可断字符串会撑爆 .diff-col。 */
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
     }
     .diff-add {
       background: rgba(79, 122, 88, 0.08);
@@ -5821,12 +5905,20 @@
       margin: 0;
       font-size: 0.7rem;
       max-height: 600px;
+      max-width: 100%;
+      min-width: 0;
+      overflow-x: hidden;
       overflow-y: auto;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      word-break: break-all;
     }
     .tool-result-content code {
       font-family: var(--font-mono);
       white-space: pre-wrap;
+      overflow-wrap: anywhere;
       word-break: break-all;
+      max-width: 100%;
     }
 
     /* Markdown Content */
@@ -5902,8 +5994,14 @@
       overflow-wrap: anywhere;
       word-break: break-all;
     }
+    /* 表格容器：先让 table-layout:fixed 强制按 100% 收缩，单元格内
+       overflow-wrap:anywhere 会负责换行；只有在内容真的塞不下（比如
+       超长不可断字符串撑爆 fixed 布局）才退回横向滚动，这样大多数情况
+       下用户看到的是换行而不是横滚条。 */
     .markdown-content .md-table-wrap {
       margin: 12px 0;
+      max-width: 100%;
+      min-width: 0;
       overflow-x: auto;
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
@@ -6452,10 +6550,10 @@
     }
     .queue-bar-item.expanded:active { cursor: grabbing; }
 
-    /* 单条排队时不必拖动 */
-    .queue-bar-item-single { cursor: default; }
-    .queue-bar-item-single.expanded { cursor: default; }
-    .queue-bar-item-single.expanded:active { cursor: default; }
+    /* 单条排队时不能拖排序，但仍可点击 → 立即发送 */
+    .queue-bar-item-single { cursor: pointer; }
+    .queue-bar-item-single.expanded { cursor: pointer; }
+    .queue-bar-item-single.expanded:active { cursor: pointer; }
 
     /* sibling 在被拖期间平滑回位 */
     .queue-bar-item-sliding { transition: transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@@ -6615,11 +6713,15 @@
     }
 
     .input-hint {
-      font-size: 0.5625rem;
+      font-size: 0.5rem;          /* 8px — 让位给同一行的按钮，桌面端仍清晰可读 */
+      line-height: 1.2;
       color: var(--text-muted);
       white-space: nowrap;
       user-select: none;
       opacity: 0.7;
+      max-width: 38ch;             /* 防止突然变长的状态文案撑爆右侧区域 */
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     /* Session info bar at bottom of input composer */
@@ -7519,40 +7621,8 @@
     .btn-pill-label {
       display: inline;
     }
-    .btn-pill-interrupt {
-      background: linear-gradient(180deg, rgba(197, 101, 61, 0.18) 0%, rgba(197, 101, 61, 0.10) 100%);
-      color: var(--accent);
-      margin-right: 4px;
-      box-shadow: 0 0 0 1px rgba(197, 101, 61, 0.30) inset;
-      animation: interruptPulse 1.8s ease-in-out infinite;
-    }
-    .btn-pill-interrupt:hover {
-      background: linear-gradient(180deg, var(--accent) 0%, #a8522f 100%);
-      color: #fff;
-      box-shadow: 0 3px 10px rgba(197, 101, 61, 0.35);
-      transform: translateY(-1px);
-      animation: none;
-    }
-    .btn-pill-interrupt:active {
-      transform: translateY(0) scale(0.97);
-    }
-    .btn-pill-interrupt.hidden {
-      display: none;
-    }
-    @keyframes interruptPulse {
-      0%, 100% { box-shadow: 0 0 0 1px rgba(197, 101, 61, 0.30) inset, 0 0 0 0 rgba(197, 101, 61, 0.0); }
-      50%      { box-shadow: 0 0 0 1px rgba(197, 101, 61, 0.45) inset, 0 0 0 4px rgba(197, 101, 61, 0.12); }
-    }
-    /* 屏宽 < 480 时把"立即"文字藏掉，只剩 » 图标，避免和 send 一起把行挤爆。
-       hover/focus 期间临时回显，让长按移动端用户也能确认按钮含义。 */
-    @media (max-width: 480px) {
-      .btn-pill-interrupt {
-        padding: 0 8px;
-      }
-      .btn-pill-interrupt .btn-pill-label {
-        display: none;
-      }
-    }
+    /* .btn-pill-interrupt 与 @keyframes interruptPulse 已下线：
+       默认行为永远是"排队（气泡）"，想插队请点输入框上方那条气泡。 */
 
     /* send 按钮在「排队模式」下退到次要色，让相邻的"立即发送"成为视觉重点。
        不动尺寸 / 圆形，避免 layout shift。 */
@@ -8944,9 +9014,8 @@
       line-height: 1.5;
     }
 
-    /* Sidebar header icon buttons — pin / more / close — uniform 32×32 ghost */
+    /* Sidebar header icon buttons — collapse / more / close — uniform 32×32 ghost */
     .sidebar-header-actions .btn-ghost.btn-sm,
-    .sidebar-pin-toggle,
     .drawer-close-btn {
       width: 32px;
       height: 32px;
@@ -8965,16 +9034,10 @@
         color 0.16s ease,
         transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
     }
-    .sidebar-header-actions .btn-ghost.btn-sm:hover,
-    .sidebar-pin-toggle:hover {
+    .sidebar-header-actions .btn-ghost.btn-sm:hover {
       background: rgba(125, 91, 57, 0.08);
       color: var(--text-primary);
     }
-    .sidebar-pin-toggle.pinned {
-      background: rgba(197, 101, 61, 0.12);
-      color: var(--accent);
-      transform: rotate(45deg);
-    }
 
     /* Drawer close — same pattern as modal-close (rotate + danger tint) */
     .drawer-close-btn {
@@ -9705,9 +9768,6 @@
 
     /* 平板适配 */
     @media (max-width: 768px) {
-      /* 手机隐藏「固定侧栏」按钮：手机上完整 300px 常驻太占地，
-         只保留「收起为窄条」按钮，让用户能切到 56px 窄条形态。 */
-      .sidebar-pin-toggle { display: none; }
       /* drawer 模式（pinned 但非窄条）下若未打开，则隐藏到屏幕左侧。
          窄条模式（pinned + collapsed）由 .sidebar.pinned.collapsed 的 width:56px
          规则常驻显示，不进入这条隐藏分支。 */
@@ -10065,8 +10125,12 @@
         padding: 0 14px 0 4px;
         border-radius: 5px;
       }
+      /* 窄屏（手机）保留提示，但用更小字号 + 更紧的宽度上限，避免把发送按钮挤出行外。
+         状态切换（"思考中…" / "已加入排队…"）能截断成省略号也比整条消失友好。 */
       .input-hint {
-        display: none;
+        font-size: 0.45rem;
+        max-width: 18ch;
+        opacity: 0.6;
       }
 
       /* 移动端内联快捷键 - 折叠为展开按钮，展开到独立第二行 */
@@ -10501,6 +10565,43 @@
       .markdown-content pre,
       .markdown-content .code-block pre,
       .subagent-reply pre { padding: 10px; }
+      /* diff 卡片：窄屏下两列 side-by-side 每列只剩 ~160px，旧/新被挤成
+         单字一行的"窄条"几乎不可读。改成垂直堆叠（旧在上，新在下），
+         单列占满屏宽，长行靠 word-break 自然换行，杜绝横向溢出。 */
+      .diff-columns {
+        flex-direction: column;
+      }
+      .diff-col,
+      .diff-col-half,
+      .diff-col-full {
+        flex: 1 1 auto;
+        width: 100%;
+        max-width: 100%;
+      }
+      /* 终端命令头部也放开 wrap，长命令在 preview 里仍 ellipsis，但 dot/toggle
+         之类不会把卡片撑宽。 */
+      .term-header {
+        flex-wrap: wrap;
+        row-gap: 4px;
+      }
+      .diff-header {
+        flex-wrap: wrap;
+        row-gap: 4px;
+      }
+      .diff-path {
+        flex-basis: 100%;
+        order: 99;
+      }
+      /* inline-tool meta（搜索路径等）窄屏给整行，不再贴右挤标题。 */
+      .inline-tool-row {
+        flex-wrap: wrap;
+        row-gap: 2px;
+      }
+      .inline-tool-meta {
+        max-width: 100%;
+        flex-basis: 100%;
+        padding-left: 22px;
+      }
     }
 
     /* Blank chat mobile optimization */

package/package.json

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