@co0ontty/wand 1.35.2 → 1.37.0

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

@@ -326,6 +326,36 @@
         miniKeyboardVisible: false,
         shortcutsExpanded: false,
         modifiers: { ctrl: false, alt: false, shift: false },
+        // ── 终端悬浮摇杆遥控器（手机端 PTY 遥控）状态 ──
+        // joystickPos 持久化球球位置 {right, bottom}（localStorage wand-ball-pos）
+        joystickPos: (function() {
+          try {
+            var saved = localStorage.getItem("wand-ball-pos");
+            if (!saved) return null;
+            var parsed = JSON.parse(saved);
+            return parsed && typeof parsed === "object" ? parsed : null;
+          } catch (e) {
+            return null;
+          }
+        })(),
+        joystickPinnedOpen: false,      // 钉住面板是否展开（不持久化，切会话复位）
+        joystickRootEl: null,           // 以下均为运行期句柄，teardown 复位
+        joystickRingEl: null,
+        joystickPanelEl: null,
+        joystickBackdropEl: null,
+        joystickBallEl: null,
+        joystickPointerId: null,
+        joystickGesture: null,          // null|'pending'|'ring'|'move'
+        joystickPressStart: null,       // {x, y, t}
+        joystickCenter: null,           // 手势开始时球球中心，用于径向命中
+        joystickLongPressTimer: null,
+        joystickRepeatTimer: null,
+        joystickRepeatKey: null,
+        joystickHoverOuter: null,       // 外圈当前高亮键（松手发送）
+        joystickLastHoverKey: null,     // 上一次悬停的扇区键（用于切换震动反馈）
+        joystickMoveHandler: null,
+        joystickUpHandler: null,
+        joystickResizeHandler: null,
         fileSearchQuery: "",
         fileExplorerLoading: false,
         allFiles: [],
@@ -334,7 +364,7 @@
         fileExplorerTotal: 0,
         claudeHistory: [],
         claudeHistoryLoaded: false,
-        claudeHistoryExpanded: true,
+        claudeHistoryExpanded: false,
         claudeHistoryExpandedDirs: {},
         archivedExpanded: false,
         sessionsManageMode: false,
@@ -354,6 +384,81 @@
         })()
       };
 
+      // ── 前端 i18n（最小化）──
+      // 后端 config.language 是给 Claude 用的"回答语言"偏好（"中文" / "English" / 任意字符串），
+      // 之前 frontend 完全没收 → UI label 一直 hardcoded 中文 + 个别英文（"SUBAGENT" 那个 tag）。
+      // 用户设的是中文时，"SUBAGENT" 这类英文残留就和"配置语言不一致"。
+      //
+      // 设计取舍：
+      //   - 只维护两套：中文（默认） + 英文。其它取值（"日本語"、"Français"等）回退到英文，
+      //     因为 Claude 会按用户语言回答，UI 至少不卡在中文上让英语圈用户看不懂。
+      //   - 不引入 i18n 库，几十个 key 用平铺对象，t(key, params) 是个十行 helper。
+      //   - params 支持 "{name}" 占位符替换，避免在调用点拼字符串。
+      //   - 缺 key 时回退到中文表，再没有就返回 key 本身（debug 友好）。
+      var I18N_DEFAULT_LANG = "中文";
+      var I18N = {
+        "中文": {
+          "subagent.tag": "子代理",
+          "subagent.handoff": "{parent} 让 {sub} 帮忙",
+          "subagent.handoff.with_desc": "{parent} 让 {sub} 帮忙：",
+          "subagent.continued": "继续输出",
+          "subagent.task.done": "任务完成",
+          "subagent.task.failed": "任务失败",
+          "subagent.running": "运行中",
+          "subagent.no_output": "（无输出）",
+          "subagent.helper_fallback_prefix": "协作猫·",
+          "subagent.title_aria": "点击展开 / 收起子代理输出",
+          "subagent.tag_title": "子代理 / subagent",
+          "ui.expand": "展开",
+          "ui.collapse": "收起",
+          "ui.expand_panel_aria": "展开子代理输出",
+          "ui.collapse_panel_aria": "收起子代理输出"
+        },
+        "English": {
+          "subagent.tag": "Subagent",
+          "subagent.handoff": "{parent} asked {sub} for help",
+          "subagent.handoff.with_desc": "{parent} asked {sub} for help with: ",
+          "subagent.continued": "continued",
+          "subagent.task.done": "Task complete",
+          "subagent.task.failed": "Task failed",
+          "subagent.running": "Running",
+          "subagent.no_output": "(no output)",
+          "subagent.helper_fallback_prefix": "Helper·",
+          "subagent.title_aria": "Click to expand / collapse subagent output",
+          "subagent.tag_title": "Subagent",
+          "ui.expand": "Expand",
+          "ui.collapse": "Collapse",
+          "ui.expand_panel_aria": "Expand subagent output",
+          "ui.collapse_panel_aria": "Collapse subagent output"
+        }
+      };
+      function getActiveLang() {
+        var raw = state.config && typeof state.config.language === "string" ? state.config.language.trim() : "";
+        if (!raw) return I18N_DEFAULT_LANG;
+        if (I18N[raw]) return raw;
+        // 模糊匹配：用户可能写 "english" / "en" / "ENG"
+        var lower = raw.toLowerCase();
+        if (lower === "english" || lower === "en" || lower.indexOf("english") === 0 || lower.indexOf("英") === 0) return "English";
+        if (lower === "中文" || lower === "zh" || lower.indexOf("zh") === 0 || lower.indexOf("中") === 0 || lower.indexOf("chinese") === 0) return "中文";
+        return "English"; // 其它语言走英文 fallback（Claude 会按 raw 回答，UI 至少英文不卡）
+      }
+      function t(key, params) {
+        var lang = getActiveLang();
+        var table = I18N[lang] || I18N[I18N_DEFAULT_LANG];
+        var template = table && key in table ? table[key] : null;
+        if (template == null) {
+          var def = I18N[I18N_DEFAULT_LANG];
+          template = def && key in def ? def[key] : key;
+        }
+        if (params && typeof template === "string") {
+          for (var k in params) {
+            if (!Object.prototype.hasOwnProperty.call(params, k)) continue;
+            template = template.split("{" + k + "}").join(params[k]);
+          }
+        }
+        return template;
+      }
+
       // ── 统一线性图标库 ──
       // 替代页面里散落的 emoji（🛡 / ⌨ / 📁 / 🔔 …）。这些 emoji 在系统字体里渲染成
       // 彩色卡通形态，与项目温暖米色 + 棕橙的复古主题视觉冲突明显。这里集中维护
@@ -1040,6 +1145,10 @@
           }
           case "tool-group":
             return el.getAttribute("data-expanded") === "true";
+          case "subagent-reply":
+            return el.getAttribute("data-expanded") === "true";
+          case "subagent-panel":
+            return el.getAttribute("data-expanded") === "true";
           default:
             return false;
         }
@@ -1088,6 +1197,35 @@
             if (chevron) chevron.style.transform = expanded ? "rotate(180deg)" : "";
             break;
           }
+          case "subagent-reply": {
+            el.setAttribute("data-expanded", expanded ? "true" : "false");
+            var subLabel = el.querySelector(".subagent-reply-toggle-label");
+            if (subLabel) subLabel.textContent = expanded ? "收起" : "展开";
+            var subToggleBtn = el.querySelector(".subagent-reply-toggle");
+            if (subToggleBtn) {
+              subToggleBtn.setAttribute("aria-expanded", expanded ? "true" : "false");
+              subToggleBtn.setAttribute("aria-label", expanded ? "收起子代理回复" : "展开子代理回复全文");
+            }
+            break;
+          }
+          case "subagent-panel": {
+            el.setAttribute("data-expanded", expanded ? "true" : "false");
+            // 头/尾两个按钮都得同步——label、aria-expanded、aria-label
+            var panelBtns = el.querySelectorAll(".subagent-panel-toggle");
+            for (var pbi = 0; pbi < panelBtns.length; pbi++) {
+              var pb = panelBtns[pbi];
+              pb.setAttribute("aria-expanded", expanded ? "true" : "false");
+              pb.setAttribute("aria-label", expanded ? "收起子代理输出" : "展开子代理输出");
+              var pblbl = pb.querySelector(".subagent-panel-toggle-label");
+              if (pblbl) pblbl.textContent = expanded ? "收起" : "展开";
+            }
+            // 展开时把 body 滚到顶，避免延续上次的滚动位置造成"展开后看到一半"
+            if (expanded) {
+              var pbody = el.querySelector(".subagent-panel-body");
+              if (pbody) pbody.scrollTop = 0;
+            }
+            break;
+          }
         }
       }
 
@@ -1685,6 +1823,7 @@
                   '<div class="sessions-list" id="sessions-list">' + renderSessionsListContent() + '</div>' +
                 '</div>' +
               '</div>' +
+              '<div id="sidebar-history-region" class="sidebar-history-region">' + renderClaudeHistoryRegion() + '</div>' +
               '<div class="sidebar-footer">' +
                 '<button id="drawer-new-session-button" class="btn btn-primary btn-block"><span>+</span> 新会话</button>' +
                 '<div class="sidebar-footer-actions">' +
@@ -3361,6 +3500,9 @@
       }
 
       function renderSessions() {
+        // Claude history is no longer inlined here — it lives in its own
+        // collapsible region between .sidebar-body and .sidebar-footer, so
+        // the scrolling sessions list focuses on recent / archived sessions.
         var archivedSessions = state.sessions.filter(function(session) { return session.archived; });
         var groups = [];
         groups.push(renderSessionManageBar());
@@ -3373,9 +3515,8 @@
         if (archivedSessions.length > 0) {
           groups.push(renderArchivedGroup(archivedSessions));
         }
-        groups.push(renderClaudeHistorySection());
         if (recentEntries.length === 0 && archivedSessions.length === 0) {
-          return renderSessionManageBar() + '<div class="empty-state"><strong>还没有会话记录</strong><br>点击上方「新对话」开始你的第一次对话。</div>' + renderClaudeHistorySection();
+          return renderSessionManageBar() + '<div class="empty-state"><strong>还没有会话记录</strong><br>点击上方「新对话」开始你的第一次对话。</div>';
         }
         return groups.join("");
       }
@@ -3482,37 +3623,62 @@
         return html;
       }
 
-      function renderClaudeHistorySection() {
-        // Exclude recent 24h items from history section
+      // Compute the items eligible for the history region (older than 24h —
+       // the recent-24h ones already show in the recent group above).
+      function getClaudeHistoryRegionItems() {
         var cutoff = Date.now() - 24 * 60 * 60 * 1000;
-        var visibleHistory = getVisibleClaudeHistorySessions().filter(function(s) {
+        return getVisibleClaudeHistorySessions().filter(function(s) {
           return !s.timestamp || new Date(s.timestamp).getTime() <= cutoff;
         });
-        var chevron = state.claudeHistoryExpanded ? "&#9662;" : "&#9656;";
-        var countBadge = state.claudeHistoryLoaded && visibleHistory.length > 0
-          ? ' <span class="history-count">' + visibleHistory.length + '</span>'
-          : '';
-        var clearAllButton = state.claudeHistoryExpanded && state.claudeHistoryLoaded && visibleHistory.length > 0
-          ? '<button class="btn btn-danger btn-xs session-history-clear" data-action="clear-all-history" type="button">清空</button>'
-          : '';
-        var header = '<div class="session-group-title claude-history-toggle" id="claude-history-toggle">' +
-          '<span class="chevron">' + chevron + '</span> Claude 历史' + countBadge +
-          '</div>' + clearAllButton;
+      }
 
-        if (!state.claudeHistoryExpanded) {
-          return '<section class="session-group">' + header + '</section>';
+      // Render the docked Claude-history region that lives between
+      // `.sidebar-body` and `.sidebar-footer`. Collapsed by default — only
+      // shows a slim header ("历史消息" + count bubble). Expanded reveals the
+      // grouped-by-cwd list inside a scroll cap.
+      function renderClaudeHistoryRegion() {
+        var visibleHistory = getClaudeHistoryRegionItems();
+        var expanded = !!state.claudeHistoryExpanded;
+        var loaded = !!state.claudeHistoryLoaded;
+        var count = loaded ? visibleHistory.length : 0;
+
+        var badgeCls = "history-bubble";
+        var badgeContent;
+        if (!loaded) {
+          badgeCls += " loading";
+          badgeContent = "···";
+        } else if (count === 0) {
+          badgeCls += " empty";
+          badgeContent = "0";
+        } else {
+          badgeContent = count > 999 ? "999+" : String(count);
         }
+        var badge = '<span class="' + badgeCls + '">' + badgeContent + '</span>';
+
+        // Chevron rotates: collapsed → up (▲, suggests "expand upward"),
+        // expanded → down (▼, suggests "collapse downward").
+        var chevronSvg = '<svg class="sidebar-history-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 15 12 9 18 15"/></svg>';
+
+        var headerCls = "sidebar-history-header" + (expanded ? " expanded" : "");
+        var header = '<button type="button" class="' + headerCls + '" id="claude-history-toggle" aria-expanded="' + expanded + '" aria-controls="sidebar-history-body" title="' + (expanded ? "收起历史消息" : "展开历史消息") + '">' +
+          '<span class="sidebar-history-label">历史消息</span>' +
+          '<span class="sidebar-history-right">' + badge + chevronSvg + '</span>' +
+        '</button>';
+
+        var body = expanded
+          ? '<div class="sidebar-history-body" id="sidebar-history-body">' + renderClaudeHistoryBodyContent(visibleHistory) + '</div>'
+          : '';
+
+        return header + body;
+      }
 
+      function renderClaudeHistoryBodyContent(visibleHistory) {
         if (!state.claudeHistoryLoaded) {
-          return '<section class="session-group">' + header +
-            '<div class="claude-history-loading">扫描历史会话中…</div></section>';
+          return '<div class="claude-history-loading">扫描历史会话中…</div>';
         }
-
         if (visibleHistory.length === 0) {
-          return '<section class="session-group">' + header +
-            '<div class="claude-history-loading">没有更早的 Claude 历史会话</div></section>';
+          return '<div class="claude-history-loading">没有更早的 Claude 历史会话</div>';
         }
-
         var groups = {};
         var groupOrder = [];
         visibleHistory.forEach(function(s) {
@@ -3522,18 +3688,27 @@
           }
           groups[s.cwd].push(s);
         });
-
-        var html = '';
+        var toolbar = '<div class="sidebar-history-toolbar">' +
+          '<button class="btn btn-ghost btn-xs sidebar-history-clear" data-action="clear-all-history" type="button">清空全部</button>' +
+        '</div>';
+        var listHtml = '';
         groupOrder.forEach(function(cwd) {
           var cwdShort = cwd.split("/").filter(Boolean).slice(-3).join("/");
           var isDirExpanded = !!state.claudeHistoryExpandedDirs[cwd];
-          html += renderClaudeHistoryDirectoryHeader(cwd, cwdShort, groups[cwd].length, isDirExpanded);
+          listHtml += renderClaudeHistoryDirectoryHeader(cwd, cwdShort, groups[cwd].length, isDirExpanded);
           if (isDirExpanded) {
-            html += groups[cwd].map(function(session) { return renderClaudeHistoryItem(session, "history"); }).join("");
+            listHtml += groups[cwd].map(function(session) { return renderClaudeHistoryItem(session, "history"); }).join("");
           }
         });
+        return toolbar + '<div class="sidebar-history-scroll">' + listHtml + '</div>';
+      }
 
-        return '<section class="session-group">' + header + html + '</section>';
+      // Re-render only the docked history region in place. Called by
+      // updateSessionsList() so existing callers (load complete, delete, etc.)
+      // keep working without changes.
+      function updateClaudeHistoryRegion() {
+        var region = document.getElementById("sidebar-history-region");
+        if (region) region.innerHTML = renderClaudeHistoryRegion();
       }
 
       function getVisibleClaudeHistorySessions() {
@@ -5591,35 +5766,28 @@
         }
         persistElementExpandState(el, "thinking");
       };
-      // Toggle function for subagent reply bubbles — cycles preview → expanded → collapsed.
-      // 三态循环（preview 默认 ~5 行可滚 / expanded 大区可滚 / collapsed 完全收起）。
-      window.__subagentReplyCycle = function(e, btn) {
+      // Toggle function for subagent reply bubbles — simple two-state preview/expanded.
+      // 参考 opencode 的折叠面板：默认固定高度预览（含底部渐隐 mask），点击切到全文展开。
+      // 状态写在 data-expanded 上，配套 CSS 控制 max-height + mask；用 data-expand-key
+      // 走通用持久化通道（applyPersistedExpandState 会自动恢复用户上次的选择）。
+      window.__subagentReplyToggle = function(e, target) {
         if (e) { e.preventDefault(); e.stopPropagation(); }
-        var bubble = btn.closest(".subagent-reply");
+        var bubble = target && target.closest ? target.closest(".subagent-reply") : null;
         if (!bubble) return;
-        var modes = ["preview", "expanded", "collapsed"];
-        var current = bubble.getAttribute("data-collapse-mode") || "preview";
-        var idx = modes.indexOf(current);
-        if (idx < 0) idx = 0;
-        var next = modes[(idx + 1) % modes.length];
-        bubble.setAttribute("data-collapse-mode", next);
-        var label = btn.querySelector(".subagent-reply-cycle-label");
-        var icon = btn.querySelector(".subagent-reply-cycle-icon");
-        if (label) {
-          label.textContent = next === "preview" ? "展开"
-            : next === "expanded" ? "收起"
-            : "预览";
-        }
-        if (icon) {
-          icon.textContent = next === "collapsed" ? "▸"
-            : next === "expanded" ? "▴"
-            : "▾";
-        }
-        btn.setAttribute("aria-label",
-          next === "preview" ? "点击展开全部" :
-          next === "expanded" ? "点击完全收起" :
-          "点击切回预览"
-        );
+        var expanded = bubble.getAttribute("data-expanded") === "true";
+        applyExpandedState(bubble, "subagent-reply", !expanded);
+        persistElementExpandState(bubble, "subagent-reply");
+      };
+      // Toggle function for whole subagent panel (handoff + body + footer)。
+      // 头部 / 尾部按钮、整条 header 都绑这个；data-expanded 一变，CSS 切 body max-height
+      // + 旋转 chevron，applyExpandedState 走通用通道写持久化。
+      window.__subagentPanelToggle = function(e, target) {
+        if (e) { e.preventDefault(); e.stopPropagation(); }
+        var panel = target && target.closest ? target.closest(".subagent-panel") : null;
+        if (!panel) return;
+        var expanded = panel.getAttribute("data-expanded") === "true";
+        applyExpandedState(panel, "subagent-panel", !expanded);
+        persistElementExpandState(panel, "subagent-panel");
       };
       // Toggle function for inline tool rows (Read, Glob, Grep, etc.)
       window.__inlineToolToggle = function(el) {
@@ -5858,6 +6026,15 @@
           sessionsList.addEventListener("mouseout", handleCollapsedTileLeave);
           initSwipeToDelete(sessionsList);
         }
+        // The docked history region lives outside #sessions-list now, but it
+        // still wants the same delegated handlers (toggle button, directory
+        // expand/collapse, history-item clicks, clear-all, etc.). Reuse the
+        // same callbacks so behavior stays identical.
+        var historyRegion = document.getElementById("sidebar-history-region");
+        if (historyRegion) {
+          historyRegion.addEventListener("click", handleSessionItemClick);
+          historyRegion.addEventListener("keydown", handleSessionItemKeydown);
+        }
         window.addEventListener("scroll", hideCollapsedTileBubble, true);
         window.addEventListener("resize", hideCollapsedTileBubble);
 
@@ -5942,7 +6119,8 @@
           state.selectedId = null;
           persistSelectedId();
           resetChatRenderCache();
-          closeSessionsDrawer();
+          // 回到首页是导航语义，不是「收侧栏」。桌面常驻栏保留；手机只把 overlay 收掉。
+          dismissDrawerIfOverlay();
           render();
         });
         var refreshBtn = document.getElementById("sidebar-refresh-btn");
@@ -6188,7 +6366,8 @@
         if (autoApproveToggle) autoApproveToggle.addEventListener("click", toggleAutoApprove);
         var sendBtn = document.getElementById("send-input-button");
         if (sendBtn) sendBtn.addEventListener("click", function() {
-          closeSessionsDrawer();
+          // 与 input focus 同理：手机 drawer 盖在上面才收起，桌面常驻栏保持原状。
+          dismissDrawerIfOverlay();
           sendOrStart();
         });
         var stopBtn = document.getElementById("stop-button");
@@ -6241,8 +6420,10 @@
             if (state.terminalInteractive) handleInteractiveTextInput(inputBox);
           });
           inputBox.addEventListener("focus", function() {
-            // Close drawer when user focuses input to avoid backdrop blocking clicks
-            closeSessionsDrawer();
+            // 只在手机 drawer 真的盖在输入区上面时才收起，避免 backdrop 挡点击。
+            // 桌面 pinned/窄条形态下 drawer 是常驻并列布局，不会挡输入，调
+            // closeSessionsDrawer 会把 sidebarPinned 一起清掉、侧栏整个不见。
+            dismissDrawerIfOverlay();
             handleInputBoxFocus({ target: inputBox });
           });
           inputBox.addEventListener("blur", handleInputBoxBlur);
@@ -6960,9 +7141,11 @@
         } else {
           selectSession(sessionId);
         }
-        if (!state.sidebarPinned || isMobileLayout()) {
-          closeSessionsDrawer();
-        }
+        // 桌面常驻栏与窄条形态都保留；只在手机端真的有 overlay drawer 时才收。
+        // （旧条件 !sidebarPinned || isMobileLayout() 在桌面 not-pinned 状态下也会
+        // 调 closeSessionsDrawer，靠内部 early-return 才不至于出错——含义不清晰，
+        // 统一走 dismissDrawerIfOverlay 反过来表达"只收 overlay 不撤常驻"。）
+        dismissDrawerIfOverlay();
       }
 
       function handleSessionItemClick(event) {
@@ -7097,7 +7280,8 @@
                   state.drafts[data.id] = "";
                   loadSessions().then(function() {
                     selectSession(data.id);
-                    closeSessionsDrawer();
+                    // 桌面常驻/窄条形态不要撤掉，只把手机端 overlay 收掉。
+                    dismissDrawerIfOverlay();
                   });
                 }
               });
@@ -7131,7 +7315,8 @@
                 state.drafts[data.id] = "";
                 loadSessions().then(function() {
                   selectSession(data.id);
-                  closeSessionsDrawer();
+                  // 桌面常驻/窄条形态不要撤掉，只把手机端 overlay 收掉。
+                  dismissDrawerIfOverlay();
                 });
               }
             });
@@ -8197,6 +8382,7 @@
           container.addEventListener("click", state.terminalClickHandler);
           updateTerminalJumpToBottomButton();
           initTerminalResizeHandle();
+          initTerminalJoystick();
           observeTerminalResize();
           startTerminalHealthCheck();
           // Container may have been hidden / zero-width at construction
@@ -9225,6 +9411,10 @@
         var countEl = document.getElementById("session-count");
         if (listEl) listEl.innerHTML = renderSessionsListContent();
         if (countEl) countEl.textContent = String(state.sessions.length);
+        // The docked history region lives outside #sessions-list — refresh it
+        // too so callers that mutate state.claudeHistory (load complete,
+        // delete, clear) don't need to know about it.
+        updateClaudeHistoryRegion();
         if (typeof hideCollapsedTileBubble === "function") hideCollapsedTileBubble();
         updateShellChrome();
         // Re-render cross-session queue (container may have been destroyed by DOM rebuild)
@@ -9519,6 +9709,19 @@
         updateLayoutState();
       }
 
+      // 把"浮在内容上的 drawer/backdrop"关掉，但保留桌面常驻栏与窄条形态。
+      // 用法：从 input focus / send 按钮 / 选中会话 / 新建会话回调里调，这些场
+      // 景只想避免遮罩挡住内容，并不想撤掉用户主动开启的常驻侧栏。
+      //
+      // 直接调 closeSessionsDrawer() 会在桌面把 state.sidebarPinned 置 false，
+      // 进而让 .pinned/.collapsed 这两个类一起脱落，窄条整体消失 —— 这是
+      // sidebar-collapsed-tile 点击后侧栏整个不见的根因。
+      function dismissDrawerIfOverlay() {
+        if (isMobileLayout() && state.sessionsDrawerOpen) {
+          closeSessionsDrawer();
+        }
+      }
+
       // 桌面 padding-left transition 结束后重新拟合终端尺寸。
       // 抽出来给 toggleSessionsDrawer / closeSessionsDrawer / toggleSidebarCollapsed 复用。
       function scheduleTerminalRefitAfterPaddingTransition() {
@@ -11336,7 +11539,9 @@
           .then(function(data) {
             saveWorkingDir(cwd);
             closeSessionModal();
-            closeSessionsDrawer();
+            // 桌面常驻栏要保留：用户刚建完会话，希望左侧栏继续看到列表里的新条目，
+            // 不能因为模态关闭顺手把 sidebarPinned 抹掉让侧栏整体消失。
+            dismissDrawerIfOverlay();
             return data;
           })
           .then(function() { focusInputBox(true); })
@@ -11382,7 +11587,8 @@
           state.drafts[data.id] = "";
           resetChatRenderCache();
           closeSessionModal();
-          closeSessionsDrawer();
+          // 同 structured 路径：模态关闭后只收手机端的 overlay，保留桌面常驻侧栏。
+          dismissDrawerIfOverlay();
           return refreshAll();
         })
         .then(function() {
@@ -13610,6 +13816,48 @@
         "_": 31
       };
 
+      // ── 终端悬浮摇杆遥控器常量与布局表 ──
+      var JOYSTICK_LONG_PRESS_MS = 400;     // 按住不动多久进入移动模式
+      var JOYSTICK_MOVE_THRESHOLD = 10;     // px：区分"拖动选键"与"静止长按"
+      var JOYSTICK_TAP_THRESHOLD = 8;       // px：快速点击的最大位移
+      var JOYSTICK_REPEAT_MS = 130;         // 内圈方向键连发间隔
+      var JOYSTICK_R0 = 24;                 // 扇形中心空洞 = 死区半径
+      var JOYSTICK_R1 = 60;                 // 内圈(方向)/外圈(功能)分界半径
+      var JOYSTICK_R2 = 104;                // 外圈外缘半径
+      var JOYSTICK_DEADZONE_R = 24;         // 命中死区（= R0）
+      var JOYSTICK_RING_SPLIT_R = 60;       // 命中分界（= R1）：< 内圈方向，>= 外圈功能
+      var JOYSTICK_MOVE_OUT_R = 140;        // 拖出此半径（超出外圈区域）→ 切"正在移动"
+      var JOYSTICK_BALL_SIZE = 52;          // 球球直径（与 CSS 一致）
+      var JOYSTICK_EDGE_MARGIN = 8;         // 球球钳进视口的留白
+      var JOYSTICK_RING_RADIUS = JOYSTICK_R2 + 8;  // 环整体半径（含标签外延），用于把圆心钳进视口
+      var JOYSTICK_RING_VIEW_PAD = 6;       // 环外缘与视口边的最小留白
+      var JOYSTICK_SECTOR_GAP_DEG = 2;      // 外圈扇区之间的角度细缝（°），读成独立按钮
+      // 内圈 4 方向：i=0 上、1 右、2 下、3 左（与渲染角 -90° 起顺时针一致）
+      var JOYSTICK_INNER_KEYS = [
+        { key: "up", label: "↑" },
+        { key: "right", label: "→" },
+        { key: "down", label: "↓" },
+        { key: "left", label: "←" }
+      ];
+      // 外圈 8 功能：i=0 正上方起顺时针，与八分扇区 idx 对应
+      var JOYSTICK_OUTER_KEYS = [
+        { key: "enter", label: "Enter" },
+        { key: "escape", label: "Esc" },
+        { key: "tab", label: "Tab" },
+        { key: "shift_tab", label: "Shift+Tab" },
+        { key: "ctrl_c", label: "Ctrl+C" },
+        { key: "ctrl_z", label: "Ctrl+Z" },
+        { key: "ctrl_d", label: "Ctrl+D" },
+        { key: "ctrl_l", label: "Ctrl+L" }
+      ];
+      // 钉住面板四角翻页键
+      var JOYSTICK_CORNER_KEYS = [
+        { key: "pageup", label: "PgUp" },
+        { key: "home", label: "Home" },
+        { key: "pagedown", label: "PgDn" },
+        { key: "end", label: "End" }
+      ];
+
       var ignoredInteractiveTargetIds = new Set([
         "mini-keyboard-fab",
         "mini-keyboard-toggle",
@@ -13783,6 +14031,7 @@
         }
         var container = document.getElementById("output");
         if (container) container.classList.toggle("interactive", !structured && state.terminalInteractive);
+        updateJoystickVisibility();
       }
 
       // COPY-2/COPY-4: 是否存在落在终端输出区(#output)内的活动文本选区。用于：
@@ -14411,7 +14660,8 @@
               persistSelectedId();
               state.drafts[data.id] = "";
               activateSession(data).then(function() {
-                closeSessionsDrawer();
+                // 桌面常驻/窄条形态不要撤掉，仅手机端 overlay 需要收。
+                dismissDrawerIfOverlay();
               });
             }
           })
@@ -15450,6 +15700,588 @@
         document.addEventListener("touchend", state.resizeTouchEnd);
       }
 
+      // ====== 终端悬浮摇杆遥控器（手机端 PTY 遥控） ======
+      // 纯前端覆盖层：fixed 挂到 body，绕开 #output 的 overflow:hidden 裁切。
+      // 用 Pointer Events 统一鼠标/触摸；球球 touch-action:none 让 preventDefault 稳定。
+      // 不改动终端背景的 touch/scroll/wheel —— 单指空白处仍是原生滚动看历史。
+
+      function isJoystickAvailable() {
+        // 触屏与桌面网页端都显示（球球用 Pointer Events，鼠标拖拽同样可用）
+        if (state.currentView !== "terminal") return false;
+        var session = getSelectedSession();
+        if (!session) return false;
+        if (isStructuredSession(session)) return false;
+        return true;
+      }
+
+      function clampJoystickPos(pos) {
+        var maxRight = Math.max(JOYSTICK_EDGE_MARGIN, window.innerWidth - JOYSTICK_BALL_SIZE - JOYSTICK_EDGE_MARGIN);
+        var maxBottom = Math.max(JOYSTICK_EDGE_MARGIN, window.innerHeight - JOYSTICK_BALL_SIZE - JOYSTICK_EDGE_MARGIN);
+        return {
+          right: Math.min(Math.max(JOYSTICK_EDGE_MARGIN, pos.right), maxRight),
+          bottom: Math.min(Math.max(JOYSTICK_EDGE_MARGIN, pos.bottom), maxBottom)
+        };
+      }
+
+      function applyJoystickPosition() {
+        if (!state.joystickBallEl) return;
+        var pos = clampJoystickPos(state.joystickPos || { right: 18, bottom: 96 });
+        state.joystickBallEl.style.right = pos.right + "px";
+        state.joystickBallEl.style.bottom = pos.bottom + "px";
+      }
+
+      function saveJoystickPosition(right, bottom) {
+        var pos = clampJoystickPos({ right: right, bottom: bottom });
+        state.joystickPos = pos;
+        try {
+          localStorage.setItem("wand-ball-pos", JSON.stringify(pos));
+        } catch (e) {
+          // Ignore localStorage errors
+        }
+      }
+
+      function renderJoystickPanel() {
+        function keyBtn(key, label, cls) {
+          return '<button type="button" class="wjp-key' + (cls ? " " + cls : "") +
+            '" data-key="' + key + '">' + label + "</button>";
+        }
+        var dpad =
+          '<div class="wjp-dpad">' +
+            '<div class="wjp-dpad-row">' + keyBtn("up", "↑", "wjp-dir") + "</div>" +
+            '<div class="wjp-dpad-row">' +
+              keyBtn("left", "←", "wjp-dir") + keyBtn("down", "↓", "wjp-dir") + keyBtn("right", "→", "wjp-dir") +
+            "</div>" +
+          "</div>";
+        var fnRow = "";
+        var i;
+        for (i = 0; i < JOYSTICK_OUTER_KEYS.length; i++) {
+          fnRow += keyBtn(JOYSTICK_OUTER_KEYS[i].key, JOYSTICK_OUTER_KEYS[i].label, "");
+        }
+        var cornerRow = "";
+        for (i = 0; i < JOYSTICK_CORNER_KEYS.length; i++) {
+          cornerRow += keyBtn(JOYSTICK_CORNER_KEYS[i].key, JOYSTICK_CORNER_KEYS[i].label, "");
+        }
+        var modRow = keyBtn("ctrl", "Ctrl", "wjp-mod") + keyBtn("alt", "Alt", "wjp-mod");
+        return '<div class="wjp-title">遥控面板</div>' +
+          dpad +
+          '<div class="wjp-grid wjp-fnkeys">' + fnRow + "</div>" +
+          '<div class="wjp-grid wjp-corners">' + cornerRow + "</div>" +
+          '<div class="wjp-grid wjp-mods">' + modRow + "</div>";
+      }
+
+      function joystickPolar(r, deg) {
+        var a = deg * Math.PI / 180;
+        return { x: +(r * Math.cos(a)).toFixed(2), y: +(r * Math.sin(a)).toFixed(2) };
+      }
+
+      // 环形扇区（annular sector）路径：外弧顺时针、内弧逆时针闭合
+      function joystickSectorPath(rIn, rOut, startDeg, endDeg) {
+        var a = joystickPolar(rOut, startDeg), b = joystickPolar(rOut, endDeg);
+        var c = joystickPolar(rIn, endDeg), d = joystickPolar(rIn, startDeg);
+        return "M" + a.x + " " + a.y +
+          "A" + rOut + " " + rOut + " 0 0 1 " + b.x + " " + b.y +
+          "L" + c.x + " " + c.y +
+          "A" + rIn + " " + rIn + " 0 0 0 " + d.x + " " + d.y + "Z";
+      }
+
+      // 标签渲染：组合键（含 "+"）拆成两行，前缀在上、+键在下，省横向空间更清晰。
+      function joystickLabelMarkup(label, x, y) {
+        var plus = label.indexOf("+");
+        if (plus > 0) {
+          var top = label.slice(0, plus);
+          var bot = "+" + label.slice(plus + 1);
+          return '<text class="wjr-2line" x="' + x + '" y="' + y + '">' +
+            '<tspan x="' + x + '" dy="-0.42em">' + top + '</tspan>' +
+            '<tspan x="' + x + '" dy="0.95em">' + bot + '</tspan></text>';
+        }
+        return '<text x="' + x + '" y="' + y + '">' + label + "</text>";
+      }
+
+      // 构建两圈扇形 pie 菜单 SVG：内圈 4×90° 方向、外圈 8×45° 功能 + 中心选中提示。
+      // 扇区角度与 joystickHitTest 完全对应（正上=0、顺时针）。
+      function buildJoystickRingSvg() {
+        var size = (JOYSTICK_R2 + 6) * 2;
+        var half = size / 2;
+        var gap = JOYSTICK_SECTOR_GAP_DEG / 2;   // 每个扇区起止各内缩半个细缝
+        var svg = '<svg class="wjr-svg" width="' + size + '" height="' + size +
+          '" viewBox="' + (-half) + " " + (-half) + " " + size + " " + size + '">';
+        // 底盘：所有扇区之下的一整块玻璃圆盘，细缝/外缘透出它作分隔与外圈光环
+        svg += '<circle class="wjr-base" cx="0" cy="0" r="' + (JOYSTICK_R2 + 4) + '"/>';
+        var i, k, center, lp;
+        for (i = 0; i < JOYSTICK_INNER_KEYS.length; i++) {
+          k = JOYSTICK_INNER_KEYS[i];
+          center = -90 + i * 90;
+          lp = joystickPolar((JOYSTICK_R0 + JOYSTICK_R1) / 2, center);
+          svg += '<g class="wjr-sector wjr-inner" data-key="' + k.key + '">' +
+            '<path d="' + joystickSectorPath(JOYSTICK_R0, JOYSTICK_R1, center - 45 + gap, center + 45 - gap) + '"/>' +
+            joystickLabelMarkup(k.label, lp.x, lp.y) + "</g>";
+        }
+        for (i = 0; i < JOYSTICK_OUTER_KEYS.length; i++) {
+          k = JOYSTICK_OUTER_KEYS[i];
+          center = -90 + i * 45;
+          lp = joystickPolar((JOYSTICK_R1 + JOYSTICK_R2) / 2, center);
+          svg += '<g class="wjr-sector wjr-outer" data-key="' + k.key + '">' +
+            '<path d="' + joystickSectorPath(JOYSTICK_R1, JOYSTICK_R2, center - 22.5 + gap, center + 22.5 - gap) + '"/>' +
+            joystickLabelMarkup(k.label, lp.x, lp.y) + "</g>";
+        }
+        svg += '<circle class="wjr-hub" cx="0" cy="0" r="' + (JOYSTICK_R0 - 1) + '"/>';
+        svg += '<text class="wjr-hub-label" x="0" y="0"></text>';
+        return svg + "</svg>";
+      }
+
+      function joystickLabelForKey(key) {
+        var i;
+        for (i = 0; i < JOYSTICK_INNER_KEYS.length; i++) {
+          if (JOYSTICK_INNER_KEYS[i].key === key) return JOYSTICK_INNER_KEYS[i].label;
+        }
+        for (i = 0; i < JOYSTICK_OUTER_KEYS.length; i++) {
+          if (JOYSTICK_OUTER_KEYS[i].key === key) return JOYSTICK_OUTER_KEYS[i].label;
+        }
+        return "";
+      }
+
+      function setJoystickCenterLabel(text) {
+        if (!state.joystickRingEl) return;
+        var el = state.joystickRingEl.querySelector(".wjr-hub-label");
+        if (el) el.textContent = text || "";
+      }
+
+      function joystickHaptic(ms) {
+        try { if (navigator.vibrate) navigator.vibrate(ms); } catch (e) {}
+      }
+
+      function initTerminalJoystick() {
+        if (state.joystickRootEl) return;   // 已存在不重复建（触屏/桌面均构建）
+
+        var root = document.createElement("div");
+        root.className = "wand-joystick-root";
+
+        var backdrop = document.createElement("div");
+        backdrop.className = "wand-joystick-backdrop";
+        root.appendChild(backdrop);
+
+        // 环形菜单容器（圆心运行期对齐球球中心）—— 扇形 pie 菜单（SVG，带文字 + 中心提示）
+        var ring = document.createElement("div");
+        ring.className = "wand-joystick-ring";
+        ring.innerHTML = buildJoystickRingSvg();
+        root.appendChild(ring);
+
+        // 钉住面板
+        var panel = document.createElement("div");
+        panel.className = "wand-joystick-panel";
+        panel.innerHTML = renderJoystickPanel();
+        panel.addEventListener("click", onJoystickPanelClick);
+        root.appendChild(panel);
+
+        // 球球本体
+        var ball = document.createElement("div");
+        ball.className = "wand-joystick-ball";
+        ball.setAttribute("role", "button");
+        ball.setAttribute("aria-label", "终端摇杆遥控");
+        ball.innerHTML = '<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" ' +
+          'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+          '<circle cx="12" cy="12" r="3"/><path d="M12 5V3M12 21v-2M5 12H3M21 12h-2"/></svg>';
+        root.appendChild(ball);
+
+        document.body.appendChild(root);
+
+        state.joystickRootEl = root;
+        state.joystickBackdropEl = backdrop;
+        state.joystickRingEl = ring;
+        state.joystickPanelEl = panel;
+        state.joystickBallEl = ball;
+
+        applyJoystickPosition();
+
+        ball.addEventListener("pointerdown", onJoystickPointerDown);
+        backdrop.addEventListener("pointerdown", function(e) {
+          // 钉住面板开着且无进行中手势时，点遮罩收起面板
+          if (state.joystickPinnedOpen && state.joystickGesture == null) {
+            e.preventDefault();
+            closeJoystickPanel();
+          }
+        });
+
+        // 旋转/窗口尺寸变化时重新钳制球球位置
+        state.joystickResizeHandler = function() { applyJoystickPosition(); };
+        window.addEventListener("resize", state.joystickResizeHandler);
+        window.addEventListener("orientationchange", state.joystickResizeHandler);
+
+        updateJoystickVisibility();
+      }
+
+      function getJoystickCenter() {
+        if (!state.joystickBallEl) return { x: 0, y: 0 };
+        var r = state.joystickBallEl.getBoundingClientRect();
+        return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+      }
+
+      function onJoystickPointerDown(e) {
+        if (!isJoystickAvailable()) return;
+        if (state.joystickPointerId !== null) return;  // 已有手势在进行
+        e.preventDefault();
+        e.stopPropagation();
+        state.joystickPointerId = e.pointerId;
+        state.joystickPressStart = { x: e.clientX, y: e.clientY, t: Date.now() };
+        state.joystickGesture = "pending";
+        state.joystickHoverOuter = null;
+        state.joystickCenter = getJoystickCenter();
+        try { state.joystickBallEl.setPointerCapture(e.pointerId); } catch (err) {}
+        // 起长按定时器：不动到 400ms → 移动模式
+        state.joystickLongPressTimer = setTimeout(function() {
+          if (state.joystickGesture === "pending") enterJoystickMoveMode();
+        }, JOYSTICK_LONG_PRESS_MS);
+        state.joystickMoveHandler = onJoystickPointerMove;
+        state.joystickUpHandler = onJoystickPointerUp;
+        document.addEventListener("pointermove", state.joystickMoveHandler);
+        document.addEventListener("pointerup", state.joystickUpHandler);
+        document.addEventListener("pointercancel", state.joystickUpHandler);
+      }
+
+      function enterJoystickMoveMode() {
+        state.joystickGesture = "move";
+        if (state.joystickPinnedOpen) closeJoystickPanel();
+        if (state.joystickBallEl) state.joystickBallEl.classList.add("dragging");
+        if (state.joystickBackdropEl) state.joystickBackdropEl.classList.add("active");
+      }
+
+      function moveJoystickBallTo(clientX, clientY) {
+        if (!state.joystickBallEl) return;
+        var pos = clampJoystickPos({
+          right: window.innerWidth - clientX - JOYSTICK_BALL_SIZE / 2,
+          bottom: window.innerHeight - clientY - JOYSTICK_BALL_SIZE / 2
+        });
+        state.joystickBallEl.style.right = pos.right + "px";
+        state.joystickBallEl.style.bottom = pos.bottom + "px";
+      }
+
+      // 环形手势里把手指往外拖出外圈区域时调用：收起环，切到"正在移动"状态，
+      // 球球立刻挪到手指下，之后跟手慢慢移动，松手保存位置。
+      function switchJoystickToMoveMode(e) {
+        stopJoystickRepeat();
+        state.joystickHoverOuter = null;
+        closeJoystickRing();
+        state.joystickGesture = "move";
+        if (state.joystickBallEl) state.joystickBallEl.classList.add("dragging");
+        if (state.joystickBackdropEl) state.joystickBackdropEl.classList.add("active");
+        joystickHaptic(18);
+        moveJoystickBallTo(e.clientX, e.clientY);
+      }
+
+      function onJoystickPointerMove(e) {
+        if (e.pointerId !== state.joystickPointerId) return;
+        if (!state.joystickBallEl) return;
+        e.preventDefault();
+        var dxStart = e.clientX - state.joystickPressStart.x;
+        var dyStart = e.clientY - state.joystickPressStart.y;
+        if (state.joystickGesture === "pending") {
+          if (Math.sqrt(dxStart * dxStart + dyStart * dyStart) > JOYSTICK_MOVE_THRESHOLD) {
+            // 先动 → 选键手势
+            if (state.joystickLongPressTimer) {
+              clearTimeout(state.joystickLongPressTimer);
+              state.joystickLongPressTimer = null;
+            }
+            if (state.joystickPinnedOpen) closeJoystickPanel();
+            state.joystickGesture = "ring";
+            state.joystickCenter = getJoystickCenter();
+            openJoystickRing();
+          } else {
+            return;
+          }
+        }
+        if (state.joystickGesture === "ring") {
+          var c = state.joystickCenter || getJoystickCenter();
+          var rdx = e.clientX - c.x;
+          var rdy = e.clientY - c.y;
+          // 往外拖超出外圈区域 → 切到"正在移动"状态，球球开始跟手
+          if (Math.sqrt(rdx * rdx + rdy * rdy) > JOYSTICK_MOVE_OUT_R) {
+            switchJoystickToMoveMode(e);
+            return;
+          }
+          applyJoystickRingHit(joystickHitTest(rdx, rdy));
+          return;
+        }
+        if (state.joystickGesture === "move") {
+          moveJoystickBallTo(e.clientX, e.clientY);
+          return;
+        }
+      }
+
+      function onJoystickPointerUp(e) {
+        if (e.pointerId !== state.joystickPointerId) return;
+        if (state.joystickLongPressTimer) {
+          clearTimeout(state.joystickLongPressTimer);
+          state.joystickLongPressTimer = null;
+        }
+        var gesture = state.joystickGesture;
+        if (gesture === "ring") {
+          stopJoystickRepeat();
+          if (state.joystickHoverOuter) {
+            joystickHaptic(18);
+            sendJoystickKey(state.joystickHoverOuter);
+          }
+        } else if (gesture === "pending") {
+          var dx = e.clientX - state.joystickPressStart.x;
+          var dy = e.clientY - state.joystickPressStart.y;
+          if (Math.sqrt(dx * dx + dy * dy) <= JOYSTICK_TAP_THRESHOLD) toggleJoystickPanel();
+        } else if (gesture === "move") {
+          var r = state.joystickBallEl ? state.joystickBallEl.getBoundingClientRect() : null;
+          if (r) saveJoystickPosition(window.innerWidth - r.right, window.innerHeight - r.bottom);
+        }
+        endJoystickGesture();
+      }
+
+      function endJoystickGesture() {
+        stopJoystickRepeat();
+        if (state.joystickLongPressTimer) {
+          clearTimeout(state.joystickLongPressTimer);
+          state.joystickLongPressTimer = null;
+        }
+        if (state.joystickBallEl && state.joystickPointerId !== null) {
+          try { state.joystickBallEl.releasePointerCapture(state.joystickPointerId); } catch (err) {}
+        }
+        if (state.joystickMoveHandler) {
+          document.removeEventListener("pointermove", state.joystickMoveHandler);
+          state.joystickMoveHandler = null;
+        }
+        if (state.joystickUpHandler) {
+          document.removeEventListener("pointerup", state.joystickUpHandler);
+          document.removeEventListener("pointercancel", state.joystickUpHandler);
+          state.joystickUpHandler = null;
+        }
+        closeJoystickRing();
+        if (state.joystickBallEl) state.joystickBallEl.classList.remove("dragging");
+        // 钉住面板若仍开着则保留遮罩，否则移除
+        if (state.joystickBackdropEl && !state.joystickPinnedOpen) {
+          state.joystickBackdropEl.classList.remove("active");
+        }
+        state.joystickPointerId = null;
+        state.joystickGesture = null;
+        state.joystickHoverOuter = null;
+        state.joystickLastHoverKey = null;
+        state.joystickPressStart = null;
+        state.joystickCenter = null;
+      }
+
+      function joystickHitTest(dx, dy) {
+        var r = Math.sqrt(dx * dx + dy * dy);
+        if (r < JOYSTICK_DEADZONE_R) return { zone: "dead", key: null };
+        if (r < JOYSTICK_RING_SPLIT_R) {
+          // 内圈：主轴象限（往上滑 dy<0 = up）
+          if (Math.abs(dy) >= Math.abs(dx)) return { zone: "inner", key: dy < 0 ? "up" : "down" };
+          return { zone: "inner", key: dx < 0 ? "left" : "right" };
+        }
+        // 外圈：8 等分扇区，正上方为 0，顺时针递增；+π/8 让扇区中心对准按钮
+        var ang = Math.atan2(dx, -dy);
+        if (ang < 0) ang += Math.PI * 2;
+        var idx = Math.floor((ang + Math.PI / 8) / (Math.PI / 4)) % 8;
+        return { zone: "outer", key: JOYSTICK_OUTER_KEYS[idx].key };
+      }
+
+      function applyJoystickRingHit(hit) {
+        if (!state.joystickRingEl) return;
+        var key = hit.zone === "dead" ? null : hit.key;
+        if (key !== state.joystickLastHoverKey) {  // 切换扇区 → 轻震反馈
+          state.joystickLastHoverKey = key;
+          joystickHaptic(8);
+        }
+        if (hit.zone === "inner") {
+          state.joystickHoverOuter = null;
+          setJoystickOuterHighlight(null);
+          startJoystickRepeat(hit.key);
+          setJoystickInnerHighlight(hit.key);
+          setJoystickCenterLabel(joystickLabelForKey(hit.key));
+        } else if (hit.zone === "outer") {
+          stopJoystickRepeat();
+          setJoystickInnerHighlight(null);
+          state.joystickHoverOuter = hit.key;
+          setJoystickOuterHighlight(hit.key);
+          setJoystickCenterLabel(joystickLabelForKey(hit.key));
+        } else {
+          stopJoystickRepeat();
+          setJoystickInnerHighlight(null);
+          state.joystickHoverOuter = null;
+          setJoystickOuterHighlight(null);
+          setJoystickCenterLabel("取消");
+        }
+      }
+
+      function setJoystickInnerHighlight(key) {
+        if (!state.joystickRingEl) return;
+        var btns = state.joystickRingEl.querySelectorAll(".wjr-inner");
+        for (var i = 0; i < btns.length; i++) {
+          btns[i].classList.toggle("is-repeating", btns[i].getAttribute("data-key") === key);
+        }
+      }
+
+      function setJoystickOuterHighlight(key) {
+        if (!state.joystickRingEl) return;
+        var btns = state.joystickRingEl.querySelectorAll(".wjr-outer");
+        for (var i = 0; i < btns.length; i++) {
+          btns[i].classList.toggle("is-hover", btns[i].getAttribute("data-key") === key);
+        }
+      }
+
+      // 把环圆心钳进视口，保证整圈（含标签）不被屏幕边裁掉。视口比环还小则回退到正中。
+      function clampJoystickRingCenter(c) {
+        var pad = JOYSTICK_RING_RADIUS + JOYSTICK_RING_VIEW_PAD;
+        var vw = window.innerWidth, vh = window.innerHeight;
+        return {
+          x: vw < pad * 2 ? vw / 2 : Math.min(Math.max(pad, c.x), vw - pad),
+          y: vh < pad * 2 ? vh / 2 : Math.min(Math.max(pad, c.y), vh - pad)
+        };
+      }
+
+      function openJoystickRing() {
+        if (!state.joystickRingEl) return;
+        // 圆心钳进视口后写回 state.joystickCenter：球球此刻已 is-ringing(opacity:0)，
+        // 圆心内移不露馅，且命中测试与可见环始终对齐。
+        var c = clampJoystickRingCenter(state.joystickCenter || getJoystickCenter());
+        state.joystickCenter = c;
+        state.joystickRingEl.style.left = c.x + "px";
+        state.joystickRingEl.style.top = c.y + "px";
+        state.joystickRingEl.classList.add("active");
+        state.joystickLastHoverKey = null;
+        setJoystickCenterLabel("取消");                 // 初始在死区，提示松手取消
+        if (state.joystickBallEl) state.joystickBallEl.classList.add("is-ringing");  // 隐球球露中心
+        if (state.joystickBackdropEl) state.joystickBackdropEl.classList.add("active");
+        joystickHaptic(10);
+      }
+
+      function closeJoystickRing() {
+        if (state.joystickRingEl) state.joystickRingEl.classList.remove("active");
+        if (state.joystickBallEl) state.joystickBallEl.classList.remove("is-ringing");
+        setJoystickInnerHighlight(null);
+        setJoystickOuterHighlight(null);
+      }
+
+      function startJoystickRepeat(key) {
+        if (state.joystickRepeatKey === key) return;  // 同方向不重启，保持节奏
+        stopJoystickRepeat();
+        state.joystickRepeatKey = key;
+        sendJoystickKey(key);                          // 立即发一次
+        state.joystickRepeatTimer = setInterval(function() {
+          if (state.joystickRepeatKey) sendJoystickKey(state.joystickRepeatKey);
+        }, JOYSTICK_REPEAT_MS);
+      }
+
+      function stopJoystickRepeat() {
+        if (state.joystickRepeatTimer) {
+          clearInterval(state.joystickRepeatTimer);
+          state.joystickRepeatTimer = null;
+        }
+        state.joystickRepeatKey = null;
+      }
+
+      function sendJoystickKey(key) {
+        if (key === "ctrl" || key === "alt" || key === "shift") {
+          state.modifiers[key] = !state.modifiers[key];
+          updateJoystickPanelUI();
+          return;
+        }
+        var seq = buildPtySequence(key, {
+          ctrl: state.modifiers.ctrl,
+          alt: state.modifiers.alt,
+          shift: state.modifiers.shift
+        });
+        if (seq) sendTerminalSequence(seq, key);
+        clearModifiers();              // 发后自动清修饰键（应用到下一个发送的键）
+        updateJoystickPanelUI();
+        scheduleShortcutResync();
+      }
+
+      function toggleJoystickPanel() {
+        if (state.joystickPinnedOpen) closeJoystickPanel();
+        else openJoystickPanel();
+      }
+
+      function openJoystickPanel() {
+        if (!state.joystickPanelEl || !state.joystickBallEl) return;
+        state.joystickPinnedOpen = true;
+        var r = state.joystickBallEl.getBoundingClientRect();
+        // 面板锚定在球球上方（球球在右下→面板往左上展开），贴右/底边对齐
+        state.joystickPanelEl.style.right = Math.max(JOYSTICK_EDGE_MARGIN, window.innerWidth - r.right) + "px";
+        state.joystickPanelEl.style.bottom = Math.max(JOYSTICK_EDGE_MARGIN, window.innerHeight - r.top + 10) + "px";
+        state.joystickPanelEl.classList.add("active");
+        if (state.joystickBackdropEl) state.joystickBackdropEl.classList.add("active");
+        updateJoystickPanelUI();
+      }
+
+      function closeJoystickPanel() {
+        state.joystickPinnedOpen = false;
+        if (state.joystickPanelEl) state.joystickPanelEl.classList.remove("active");
+        if (state.joystickBackdropEl && state.joystickGesture == null) {
+          state.joystickBackdropEl.classList.remove("active");
+        }
+      }
+
+      function updateJoystickPanelUI() {
+        if (!state.joystickPanelEl) return;
+        ["ctrl", "alt"].forEach(function(name) {
+          var btn = state.joystickPanelEl.querySelector('.wjp-mod[data-key="' + name + '"]');
+          if (btn) btn.classList.toggle("active", !!state.modifiers[name]);
+        });
+      }
+
+      function onJoystickPanelClick(e) {
+        var btn = e.target && e.target.closest ? e.target.closest(".wjp-key") : null;
+        if (!btn) return;
+        e.preventDefault();
+        e.stopPropagation();
+        var key = btn.getAttribute("data-key");
+        if (key) sendJoystickKey(key);
+      }
+
+      function updateJoystickVisibility() {
+        var root = state.joystickRootEl;
+        if (!root) return;
+        var available = isJoystickAvailable();
+        root.classList.toggle("visible", available);
+        if (!available) {
+          // 不可用：强制收手势 + 收面板 + 停连发 + 清修饰键，杜绝残留
+          if (state.joystickPointerId !== null || state.joystickGesture) endJoystickGesture();
+          stopJoystickRepeat();
+          if (state.joystickPinnedOpen) closeJoystickPanel();
+          if (state.joystickBackdropEl) state.joystickBackdropEl.classList.remove("active");
+        }
+      }
+
+      function teardownJoystick() {
+        stopJoystickRepeat();
+        if (state.joystickLongPressTimer) {
+          clearTimeout(state.joystickLongPressTimer);
+          state.joystickLongPressTimer = null;
+        }
+        if (state.joystickMoveHandler) {
+          document.removeEventListener("pointermove", state.joystickMoveHandler);
+          state.joystickMoveHandler = null;
+        }
+        if (state.joystickUpHandler) {
+          document.removeEventListener("pointerup", state.joystickUpHandler);
+          document.removeEventListener("pointercancel", state.joystickUpHandler);
+          state.joystickUpHandler = null;
+        }
+        if (state.joystickResizeHandler) {
+          window.removeEventListener("resize", state.joystickResizeHandler);
+          window.removeEventListener("orientationchange", state.joystickResizeHandler);
+          state.joystickResizeHandler = null;
+        }
+        if (state.joystickRootEl && state.joystickRootEl.parentNode) {
+          state.joystickRootEl.parentNode.removeChild(state.joystickRootEl);
+        }
+        state.joystickRootEl = null;
+        state.joystickRingEl = null;
+        state.joystickPanelEl = null;
+        state.joystickBackdropEl = null;
+        state.joystickBallEl = null;
+        state.joystickPointerId = null;
+        state.joystickGesture = null;
+        state.joystickPressStart = null;
+        state.joystickHoverOuter = null;
+        state.joystickCenter = null;
+        state.joystickPinnedOpen = false;
+      }
+
       function observeTerminalResize() {
         var output = document.getElementById("output");
         if (!output) return;
@@ -15644,6 +16476,7 @@
         // 尺寸下创建的会话时，若新算出的 cols/rows 恰好等于上次值会被去重跳过，导致
         // 后端该会话列宽停在旧值、整段折行。teardown 重置后新会话首次 resize 必发出。
         state.lastResize = { cols: 0, rows: 0 };
+        teardownJoystick();
       }
 
       function sendTerminalResize(cols, rows) {
@@ -18173,8 +19006,8 @@
         var agentType = sub.agentType || "";
         if (agentType && SUBAGENT_NAME_MAP[agentType]) return SUBAGENT_NAME_MAP[agentType];
         if (agentType) return agentType;
-        var tail = (sub.taskId || "").slice(-4) || "未知";
-        return "协作猫·" + tail;
+        var tail = (sub.taskId || "").slice(-4) || (getActiveLang() === "English" ? "?" : "未知");
+        return t("subagent.helper_fallback_prefix") + tail;
       }
       function getSubagentPalette(sub) {
         // 哈希优先用 agentType，让同类型 agent 跨 turn 颜色稳定；没有 agentType 时
@@ -18192,33 +19025,35 @@
         '</div>';
       }
 
-      // subagent tool_result → 独立 reply 气泡（markdown 渲染）。出错时显示红色错误体，
-      // 没文本时显示打字指示器（subagent 还在跑）。
+      // subagent 最终回复（父 Task 的 tool_result）——现在外层 .subagent-panel 已经
+      // 负责整段折叠 / 滚动，这里只需把"任务完成 / 失败"做个轻量标记块，markdown
+      // 内容平铺，让 panel 的 body 滚动条统一接管。
       function renderSubagentReplyBubble(block, role) {
         if (!block || block.type !== "tool_result") return "";
         var text = extractToolResultText(block.content);
         var isError = block.is_error === true;
-
-        if (isError) {
-          return '<div class="subagent-reply error">' +
-            '<span class="subagent-reply-icon">✗</span>' +
-            '<div class="subagent-reply-body">' + (text ? renderMarkdown(text) : escapeHtml("（无输出）")) + '</div>' +
+        var rawText = typeof text === "string" ? text : (text == null ? "" : String(text));
+
+        // pending：subagent 还在跑，没收到结果。在 panel body 里画一个 typing 指示器
+        // 占位，告诉用户"还在跑"。
+        if (!isError && !rawText.trim()) {
+          return '<div class="subagent-reply pending">' +
+            '<span class="subagent-reply-marker pending">' + escapeHtml(t("subagent.running")) + '</span>' +
+            '<span class="typing-indicator"><span></span><span></span><span></span></span>' +
           '</div>';
         }
 
-        if (!text || !String(text).trim()) {
-          return '<div class="subagent-reply pending"><span class="typing-indicator"><span></span><span></span><span></span></span></div>';
-        }
+        var displayText = rawText.trim() ? rawText : t("subagent.no_output");
+        var bodyHtml = rawText.trim() ? renderMarkdown(displayText) : escapeHtml(displayText);
+        var markerLabel = isError ? t("subagent.task.failed") : t("subagent.task.done");
+        var markerSymbol = isError ? "✗" : "✓";
 
-        // 三态折叠：preview（默认 ~5 行预览，内部可滚）→ expanded（高一些上限，可滚）→
-        // collapsed（完全收起，只剩工具条）→ preview。按钮一直可见在右下，状态写在
-        // data-collapse-mode 上，配套 CSS 控制 max-height。
-        return '<div class="subagent-reply collapsible" data-collapse-mode="preview">' +
-          '<div class="subagent-reply-scroll">' + renderMarkdown(text) + '</div>' +
-          '<button type="button" class="subagent-reply-cycle" onclick="__subagentReplyCycle(event, this)" title="展开 / 收起">' +
-            '<span class="subagent-reply-cycle-label">展开</span>' +
-            '<span class="subagent-reply-cycle-icon" aria-hidden="true">▾</span>' +
-          '</button>' +
+        return '<div class="subagent-reply final' + (isError ? ' error' : '') + '">' +
+          '<div class="subagent-reply-marker ' + (isError ? 'error' : 'done') + '">' +
+            '<span class="subagent-reply-marker-icon" aria-hidden="true">' + markerSymbol + '</span>' +
+            '<span class="subagent-reply-marker-label">' + escapeHtml(markerLabel) + '</span>' +
+          '</div>' +
+          '<div class="subagent-reply-content">' + bodyHtml + '</div>' +
         '</div>';
       }
       var PIXEL_AVATAR = {
@@ -18569,23 +19404,12 @@
           // 跳过整段。否则会渲染出"只有头像没内容"的空气泡。
           if (!segHtml || !segHtml.trim()) continue;
           if (seg.subagent) {
-            var subPalette = getSubagentPalette(seg.subagent);
-            if (showHandoff && lastSubId !== seg.subagent.taskId) {
-              var subName = getSubagentDisplayName(seg.subagent);
-              var desc = seg.subagent.taskDescription
-                ? '：<span class="chat-handoff-desc">' + escapeHtml(seg.subagent.taskDescription) + '</span>'
-                : '';
-              html += '<div class="chat-handoff" style="--agent-color:' + subPalette.primary + '">' +
-                '<span class="chat-handoff-arrow">↳</span> ' +
-                escapeHtml(parentPersonaName) + ' 让 <strong>' + escapeHtml(subName) + '</strong>' +
-                '<span class="chat-handoff-tag" title="子代理 / subagent">subagent</span>' +
-                '帮忙' + desc +
-              '</div>';
-            }
-            html += '<div class="chat-message-segment subagent" data-agent-id="' + escapeHtml(seg.subagent.taskId) + '" style="--agent-color:' + subPalette.primary + '">' +
-              subagentAvatarHtml(seg.subagent) +
-              '<div class="chat-message-content">' + segHtml + '</div>' +
-            '</div>';
+            // 整段 subagent 输出包成一个统一的可折叠面板：
+            // 头部 = handoff title + 展开按钮；body = segHtml（所有工具卡、文本、最终回复
+            // 都在 body 里）；footer = 同款按钮。同一 taskId 的连续段（极少出现的
+            // parent→sub→parent→sub 交错）只在第一次露 handoff title。
+            var includeHandoff = showHandoff && lastSubId !== seg.subagent.taskId;
+            html += buildSubagentPanelHtml(seg, parentPersonaName, segHtml, messageKey, includeHandoff);
             lastSubId = seg.subagent.taskId;
           } else {
             html += '<div class="chat-message-segment parent">' +
@@ -18598,6 +19422,85 @@
         return html;
       }
 
+      // 渲染整段 subagent 输出为一个可折叠面板：
+      //   ┌─ subagent-panel ──────────────────────────────────┐
+      //   │ [🐱] ↳ 勤劳初二 让 协作猫 帮忙：xxx     [展开 ▾] │  ← header (always visible)
+      //   ├───────────────────────────────────────────────────┤
+      //   │ <tool 卡 1>                                       │
+      //   │ <text>                                            │  ← body
+      //   │ <tool 卡 2>                                       │     默认 max-height 22em
+      //   │ <... 最终回复 ...>                                │     + 内部 overflow-y:auto
+      //   ├───────────────────────────────────────────────────┤
+      //   │                              [展开 ▾]            │  ← footer (always visible)
+      //   └───────────────────────────────────────────────────┘
+      // 状态写在 .subagent-panel[data-expanded]，按 messageKey + taskId 持久化。
+      // 默认折叠（preview）；用户点头/尾按钮或头部标题条都能切。
+      function buildSubagentPanelHtml(seg, parentPersonaName, segHtml, messageKey, includeHandoff) {
+        var sub = seg.subagent;
+        var subPalette = getSubagentPalette(sub);
+        var subName = getSubagentDisplayName(sub);
+        var taskId = sub.taskId || "";
+        var avatarSvg = buildPixelSvg(buildCatGrid(subPalette));
+
+        var titleHtml;
+        if (includeHandoff) {
+          // 用 i18n 模板拼 handoff title。{parent}/{sub} 用占位符避免在调用点拼字符串导致
+          // 顺序错乱（中文 "X 让 Y 帮忙"，英文 "X asked Y for help"，词序完全不同）。
+          // tag 是单独的彩色 chip，所以把模板里的 {sub} 替换成空 span 占位，然后再 splice
+          // 进 <strong> + chip——保证模板可读、调用点不脏。
+          var subInlineHtml = '<strong class="subagent-panel-name">' + escapeHtml(subName) + '</strong>' +
+            '<span class="subagent-panel-tag" title="' + escapeHtml(t("subagent.tag_title")) + '">' + escapeHtml(t("subagent.tag")) + '</span>';
+          var hasDesc = !!(sub.taskDescription && String(sub.taskDescription).trim());
+          var handoffTpl = hasDesc ? t("subagent.handoff.with_desc", { parent: escapeHtml(parentPersonaName), sub: subInlineHtml })
+                                   : t("subagent.handoff", { parent: escapeHtml(parentPersonaName), sub: subInlineHtml });
+          var descSpan = hasDesc
+            ? '<span class="subagent-panel-task-desc">' + escapeHtml(sub.taskDescription) + '</span>'
+            : '';
+          titleHtml = '<span class="subagent-panel-arrow" aria-hidden="true">↳</span>' +
+            '<span class="subagent-panel-attribution">' + handoffTpl + descSpan + '</span>';
+        } else {
+          titleHtml = '<span class="subagent-panel-attribution">' +
+            '<strong class="subagent-panel-name">' + escapeHtml(subName) + '</strong>' +
+            '<span class="subagent-panel-task-desc"> ' + escapeHtml(t("subagent.continued")) + '</span>' +
+          '</span>';
+        }
+
+        var expandKey = buildExpandKey("subagent-panel", [messageKey, taskId]);
+        var persisted = getPersistedExpandState(expandKey);
+        var expanded = persisted === null ? false : !!persisted;
+
+        function toggleBtnHtml(position) {
+          return '<button type="button" class="subagent-panel-toggle" ' +
+                          'data-position="' + position + '" ' +
+                          'onclick="__subagentPanelToggle(event, this)" ' +
+                          'aria-expanded="' + (expanded ? "true" : "false") + '" ' +
+                          'aria-label="' + escapeHtml(expanded ? t("ui.collapse_panel_aria") : t("ui.expand_panel_aria")) + '">' +
+              '<span class="subagent-panel-toggle-label">' + escapeHtml(expanded ? t("ui.collapse") : t("ui.expand")) + '</span>' +
+              '<svg class="subagent-panel-toggle-icon" width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">' +
+                '<path d="M2.5 3.75L5 6.25L7.5 3.75" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>' +
+              '</svg>' +
+            '</button>';
+        }
+
+        return '<div class="subagent-panel" ' +
+                    'data-expand-kind="subagent-panel" ' +
+                    'data-expand-key="' + escapeHtml(expandKey) + '" ' +
+                    'data-agent-id="' + escapeHtml(taskId) + '" ' +
+                    'data-expanded="' + (expanded ? "true" : "false") + '" ' +
+                    'style="--agent-color:' + subPalette.primary + '">' +
+          '<div class="subagent-panel-header" onclick="__subagentPanelToggle(event, this)" role="button" tabindex="0" aria-label="' + escapeHtml(t("subagent.title_aria")) + '">' +
+            '<span class="subagent-panel-avatar" aria-hidden="true">' + avatarSvg + '</span>' +
+            titleHtml +
+            toggleBtnHtml("top") +
+          '</div>' +
+          '<div class="subagent-panel-body">' + segHtml + '</div>' +
+          '<div class="subagent-panel-footer">' +
+            '<span class="subagent-panel-footer-hint" aria-hidden="true">— ' + escapeHtml(subName) + ' —</span>' +
+            toggleBtnHtml("bottom") +
+          '</div>' +
+        '</div>';
+      }
+
       function renderStructuredMessage(msg, roundUsage, messageIndex, legacyTaskMap) {
         var role = msg.role;
         var messageKey = getMessageKey(msg, messageIndex);