@co0ontty/wand 0.3.0 → 0.4.0

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

@@ -19,8 +19,40 @@
             console.log('SW registration failed:', e.message || e);
           }
         });
+
+      // Auto-reload when a new service worker takes control (e.g. after update)
+      var reloading = false;
+      navigator.serviceWorker.addEventListener('controllerchange', function() {
+        if (reloading) return;
+        reloading = true;
+        location.reload();
+      });
     }
 
+    // PWA display mode detection
+    (function() {
+      function detectDisplayMode() {
+        var mode = 'browser';
+        if (window.matchMedia('(display-mode: window-controls-overlay)').matches) {
+          mode = 'window-controls-overlay';
+        } else if (window.matchMedia('(display-mode: standalone)').matches) {
+          mode = 'standalone';
+        } else if (window.matchMedia('(display-mode: fullscreen)').matches) {
+          mode = 'fullscreen';
+        } else if (navigator.standalone === true) {
+          mode = 'standalone'; // iOS Safari
+        }
+        document.documentElement.setAttribute('data-display-mode', mode);
+        document.documentElement.classList.toggle('is-pwa', mode !== 'browser');
+        return mode;
+      }
+      detectDisplayMode();
+      // Re-detect when display mode changes (e.g., user toggles WCO)
+      ['standalone', 'window-controls-overlay', 'fullscreen'].forEach(function(m) {
+        window.matchMedia('(display-mode: ' + m + ')').addEventListener('change', detectDisplayMode);
+      });
+    })();
+
     (function() {
       var configPath = "${escapeHtml(configPath)}";
 
@@ -36,6 +68,15 @@
         fitAddon: null,
         terminalSessionId: null,
         terminalOutput: "",
+        terminalViewportSize: { width: 0, height: 0 },
+        terminalAutoFollow: true,
+        terminalScrollIdleTimer: null,
+        terminalScrollIdleMs: 1800,
+        terminalScrollThreshold: 12,
+        showTerminalJumpToBottom: false,
+        terminalViewportEl: null,
+        terminalViewportScrollHandler: null,
+        terminalViewportTouchHandler: null,
         resizeObserver: null,
         resizeHandler: null,
         resizeTimer: null,
@@ -86,9 +127,17 @@
         currentTask: null, // Current task title from Claude
         terminalInteractive: false,
         miniKeyboardVisible: false,
+        shortcutsExpanded: false,
         modifiers: { ctrl: false, alt: false, shift: false },
         fileSearchQuery: "",
         allFiles: [],
+        claudeHistory: [],
+        claudeHistoryLoaded: false,
+        claudeHistoryExpanded: true,
+        claudeHistoryExpandedDirs: {},
+        sessionsManageMode: false,
+        selectedSessionIds: {},
+        selectedClaudeHistoryIds: {},
         // Load last used working directory from localStorage
         workingDir: (function() {
           try {
@@ -156,8 +205,21 @@
         }
       }
 
+      renderBootLoading();
       restoreLoginSession();
 
+      function renderBootLoading() {
+        var app = document.getElementById("app");
+        if (!app) return;
+        app.innerHTML =
+          '<div class="boot-loading">' +
+            '<div class="boot-loading-card">' +
+              '<div class="boot-loading-spinner"></div>' +
+              '<div class="boot-loading-text">正在恢复会话…</div>' +
+            '</div>' +
+          '</div>';
+      }
+
       function restoreLoginSession() {
         fetch("/api/config", { credentials: "same-origin" })
           .then(function(res) {
@@ -172,16 +234,23 @@
             if (!config) return;
             state.config = config;
             state.loginChecked = true;
-            // Render the app shell first, THEN load session data into it.
-            // This avoids refreshAll() rendering chat content that render() immediately destroys.
-            try {
-              render();
-            } catch (_e) {
-              // render() may fail if external scripts (xterm.js) failed to load;
-              // continue with polling and session loading so the app remains functional
-            }
-            startPolling();
-            return refreshAll();
+            requestAnimationFrame(function() {
+              // Render the app shell first, THEN load session data into it.
+              // Skip updateShellChrome() here — sessions aren't loaded yet.
+              // refreshAll() will call updateShellChrome() after sessions arrive.
+              try {
+                render({ skipShellChrome: true });
+              } catch (_e) {
+                // render() may fail if external scripts (xterm.js) failed to load;
+                // continue with polling and session loading so the app remains functional
+              }
+              startPolling();
+              refreshAll();
+              // Auto-load claude history since section defaults to expanded
+              if (state.claudeHistoryExpanded && !state.claudeHistoryLoaded) {
+                loadClaudeHistory();
+              }
+            });
           })
           .catch(function() {
             state.loginChecked = true;
@@ -189,14 +258,19 @@
           });
       }
 
-      render();
-
-      function render() {
+      function render(options) {
+        var skipShellChrome = options && options.skipShellChrome;
         var app = document.getElementById("app");
         var isLoggedIn = state.config !== null;
         var wasModalOpen = state.modalOpen;
+        var shouldResetShell = !isLoggedIn || !document.getElementById("output");
 
-        teardownTerminal();
+        if (shouldResetShell) {
+          teardownTerminal();
+        }
+
+        // Suppress CSS transitions during initial DOM build
+        document.documentElement.classList.add("no-transition");
 
         app.innerHTML = isLoggedIn ? renderAppShell() : renderLogin();
         // Reset chat render tracking since DOM was fully replaced
@@ -207,7 +281,15 @@
         updateDrawerState();
         syncComposerModeSelect();
         applyCurrentView();
-        updateShellChrome();
+        if (!skipShellChrome) {
+          updateShellChrome();
+        }
+
+        // Force reflow then re-enable transitions after layout settles
+        void document.body.offsetHeight;
+        requestAnimationFrame(function() {
+          document.documentElement.classList.remove("no-transition");
+        });
 
         // Restore modal state if it was open
         if (wasModalOpen && state.modalOpen) {
@@ -223,38 +305,25 @@
 
       function renderInlineKeyboard() {
         if (!state.selectedId) return "";
-        // Keyboard toggle button + popup panel
-        var isActive = state.currentView === "terminal";
-        return '<button id="keyboard-toggle" class="keyboard-toggle-btn' + (isActive ? "" : " hidden") + '" type="button" title="快捷键盘">' +
-            '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-              '<rect x="2" y="4" width="20" height="16" rx="2" ry="2"/>' +
-              '<line x1="6" y1="8" x2="6.01" y2="8"/>' +
-              '<line x1="10" y1="8" x2="10.01" y2="8"/>' +
-              '<line x1="14" y1="8" x2="14.01" y2="8"/>' +
-              '<line x1="18" y1="8" x2="18.01" y2="8"/>' +
-              '<line x1="6" y1="12" x2="18" y2="12"/>' +
-            '</svg>' +
-          '</button>' +
-          '<div id="keyboard-popup" class="keyboard-popup' + (state.keyboardPopupOpen ? '' : ' hidden') + '">' +
-            '<div class="keyboard-popup-row modifiers">' +
-              '<button class="kp-key' + (state.modifiers.ctrl ? ' active' : '') + '" data-key="ctrl" type="button">Ctrl</button>' +
-              '<button class="kp-key' + (state.modifiers.alt ? ' active' : '') + '" data-key="alt" type="button">Alt</button>' +
-            '</div>' +
-            '<div class="keyboard-popup-row directions">' +
-              '<div class="kp-dir-grid">' +
-                '<div class="kp-dir-up"><button class="kp-key kp-dir" data-key="up" type="button">↑</button></div>' +
-                '<div class="kp-dir-lr">' +
-                  '<button class="kp-key kp-dir" data-key="left" type="button">←</button>' +
-                  '<button class="kp-key kp-dir" data-key="down" type="button">↓</button>' +
-                  '<button class="kp-key kp-dir" data-key="right" type="button">→</button>' +
-                '</div>' +
-              '</div>' +
-            '</div>' +
-            '<div class="keyboard-popup-row actions">' +
-              '<button class="kp-key kp-action" data-key="enter" type="button">↵ 回车</button>' +
-              '<button class="kp-key kp-action" data-key="ctrl_enter" type="button">C-↵</button>' +
-              '<button class="kp-key kp-action kp-escape" data-key="escape" type="button">Esc</button>' +
-            '</div>' +
+        var isTerminal = state.currentView === "terminal";
+        if (!isTerminal) return "";
+        var keys =
+            '<button class="shortcut-key' + (state.modifiers.ctrl ? ' active' : '') + '" data-key="ctrl" type="button">Ctrl</button>' +
+            '<button class="shortcut-key' + (state.modifiers.alt ? ' active' : '') + '" data-key="alt" type="button">Alt</button>' +
+            '<span class="shortcut-sep">·</span>' +
+            '<button class="shortcut-key shortcut-dir" data-key="up" type="button">↑</button>' +
+            '<button class="shortcut-key shortcut-dir" data-key="down" type="button">↓</button>' +
+            '<button class="shortcut-key shortcut-dir" data-key="left" type="button">←</button>' +
+            '<button class="shortcut-key shortcut-dir" data-key="right" type="button">→</button>' +
+            '<span class="shortcut-sep">·</span>' +
+            '<button class="shortcut-key" data-key="enter" type="button">↵</button>' +
+            '<button class="shortcut-key" data-key="ctrl_enter" type="button">C-↵</button>' +
+            '<button class="shortcut-key" data-key="escape" type="button">Esc</button>';
+        var arrow = state.shortcutsExpanded ? '›' : '‹';
+        return '<div class="inline-shortcuts-wrap' + (state.shortcutsExpanded ? ' expanded' : '') + '">' +
+            '<button class="shortcuts-toggle' + (state.shortcutsExpanded ? ' active' : '') + '" type="button" title="快捷键">' + arrow + '</button>' +
+            '<div class="inline-shortcuts-strip">' + keys + '</div>' +
+            '<div class="inline-shortcuts-inline">' + keys + '</div>' +
           '</div>';
       }
 
@@ -297,7 +366,6 @@
             '</div>' +
             '<div class="login-body">' +
               '<p class="login-hint">输入 Wand 访问密码以进入控制台。</p>' +
-              '<p class="login-tip">如果页面是通过 <strong>https://</strong> 打开的，请改用 <strong>http://</strong> 访问本地服务。</p>' +
               '<div class="field">' +
                 '<label class="field-label" for="password">密码</label>' +
                 '<div class="password-field">' +
@@ -324,62 +392,45 @@
         var composerMode = getSafeModeForTool(preferredTool, state.chatMode);
 
         return '<div class="app-container">' +
-          '<header class="topbar">' +
-            '<div class="topbar-left">' +
-              '<button id="sessions-toggle-button" class="btn btn-secondary btn-sm sidebar-toggle-btn' + (state.sessionsDrawerOpen ? ' active' : '') + '" aria-label="Toggle sidebar">' +
-                '<span class="hamburger-icon">' +
-                  '<span></span><span></span><span></span>' +
-                '</span>' +
-              '</button>' +
-              '<div class="topbar-logo">' +
-                '<div class="topbar-logo-icon">W</div>' +
-              '</div>' +
-            '</div>' +
-            '<div class="topbar-center">' +
-              '<div class="topbar-session-meta">' +
-                '<span class="topbar-title" id="terminal-title">' + escapeHtml(terminalTitle) + '</span>' +
-                '<span class="terminal-info topbar-terminal-info" id="terminal-info">' + (selectedSession ? getSessionStatusLabel(selectedSession) : '开始对话') + '</span>' +
-              '</div>' +
-              '<span class="current-task hidden" id="current-task"></span>' +
-              '<span class="permission-actions hidden" id="permission-actions"><button id="approve-permission-btn" class="btn btn-primary btn-small" type="button">批准</button><button id="deny-permission-btn" class="btn btn-ghost btn-small" type="button">拒绝</button></span>' +
-            '</div>' +
-            '<div class="topbar-right">' +
-              '<button id="file-panel-toggle-btn" class="topbar-btn square' + (state.filePanelOpen ? " active" : "") + '" type="button" title="查看文件">📁</button>' +
-              '<button id="topbar-new-session-button" class="topbar-new-btn" title="新对话">' +
-                '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>' +
-                '新对话' +
-              '</button>' +
-              '<button id="terminal-interactive-toggle-top" class="topbar-btn' + (state.terminalInteractive ? " active" : "") + '" type="button" title="切换终端交互模式">⌨ ' + (state.terminalInteractive ? '交互开' : '交互关') + '</button>' +
-              '<button id="pwa-install-button" class="topbar-btn square hidden" title="安装应用">' +
-                '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>' +
-              '</button>' +
-              '<button id="logout-button" class="topbar-btn square" title="退出登录">' +
-                '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>' +
-              '</button>' +
-            '</div>' +
-          '</header>' +
+          '<button id="sessions-toggle-button" class="floating-sidebar-toggle' + (state.sessionsDrawerOpen ? ' active' : '') + '" aria-label="Toggle sidebar">' +
+            '<span class="hamburger-icon">' +
+              '<span></span><span></span><span></span>' +
+            '</span>' +
+          '</button>' +
           '<div id="sessions-drawer-backdrop" class="drawer-backdrop' + drawerClass + '"></div>' +
           '<div class="main-layout' + (state.sessionsDrawerOpen ? ' sidebar-open' : '') + '">' +
             '<aside id="sessions-drawer" class="sidebar' + drawerClass + '">' +
               '<div class="sidebar-header">' +
                 '<div class="sidebar-header-main">' +
+                  '<div class="topbar-logo-icon">W</div>' +
                   '<span class="sidebar-title">会话</span>' +
                   '<span class="session-count" id="session-count">' + String(state.sessions.length) + '</span>' +
                 '</div>' +
-                '<button id="close-drawer-button" class="btn btn-ghost btn-sm sidebar-close" type="button" aria-label="关闭菜单">×</button>' +
+                '<div class="sidebar-header-actions">' +
+                  '<button id="close-drawer-button" class="btn btn-ghost btn-sm sidebar-close" type="button" aria-label="关闭菜单">×</button>' +
+                '</div>' +
               '</div>' +
               '<div class="sidebar-body">' +
                 '<div id="sessions-panel">' +
-                  '<p class="sidebar-intro">最近的会话记录会显示在这里</p>' +
                   '<div class="sessions-list" id="sessions-list">' + renderSessions() + '</div>' +
                 '</div>' +
               '</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">' +
+                  '<button id="file-panel-toggle-btn" class="btn btn-ghost btn-sm' + (state.filePanelOpen ? " active" : "") + '" type="button" title="查看文件">📁 文件</button>' +
+                  '<button id="pwa-install-button" class="btn btn-ghost btn-sm hidden" title="安装应用">' +
+                    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> 安装' +
+                  '</button>' +
+                  '<button id="logout-button" class="btn btn-ghost btn-sm sidebar-logout" type="button" title="退出登录">' +
+                    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg> 退出' +
+                  '</button>' +
+                '</div>' +
               '</div>' +
             '</aside>' +
             '<main class="main-content">' +
-              '<div class="topbar-spacer"></div>' +
+              '<span class="current-task hidden" id="current-task"></span>' +
+              '' +
               // File panel backdrop (mobile)
               '<div id="file-panel-backdrop" class="file-panel-backdrop' + (state.filePanelOpen ? " open" : "") + '"></div>' +
               // File side panel
@@ -405,7 +456,10 @@
                   '<button id="terminal-scale-down-top" class="terminal-scale-overlay-btn terminal-scale-btn" type="button" title="缩小">−</button>' +
                   '<span class="terminal-scale-overlay-label terminal-scale-label" id="terminal-scale-label-top">' + Math.round(state.terminalScale * 100) + '%</span>' +
                   '<button id="terminal-scale-up-top" class="terminal-scale-overlay-btn terminal-scale-btn" type="button" title="放大">+</button>' +
+                  '<span class="terminal-scale-overlay-divider"></span>' +
+                  '<button id="page-refresh-btn" class="terminal-scale-overlay-btn" type="button" title="刷新页面">↻</button>' +
                 '</div>' +
+                '<button id="terminal-jump-bottom" class="terminal-jump-bottom' + (state.showTerminalJumpToBottom ? ' visible' : '') + '" type="button" title="回到底部">↓ 最新</button>' +
               '</div>' +
               '<div id="chat-output" class="chat-container hidden"></div>' +
               '<div id="blank-chat" class="blank-chat' + (state.selectedId ? " hidden" : "") + '">' +
@@ -423,7 +477,6 @@
                   '</div>' +
                 '</div>' +
               '</div>' +
-              '<div id="chat-output" class="chat-container hidden"></div>' +
               '<div class="input-panel' + (state.selectedId ? "" : " hidden") + '">' +
                 '<div id="todo-progress" class="todo-progress hidden">' +
                   '<div class="todo-progress-header" id="todo-progress-toggle">' +
@@ -446,16 +499,23 @@
                       '<select id="chat-mode-select" class="chat-mode-select" title="仅对新建会话生效">' +
                         renderModeOptions(preferredTool, composerMode) +
                       '</select>' +
+                      '<button id="terminal-interactive-toggle-top" class="composer-interactive-toggle' + (state.terminalInteractive ? " active" : "") + '" type="button" title="切换终端交互模式">⌨</button>' +
+                      '<span class="permission-actions hidden" id="permission-actions">' +
+                        '<span class="permission-actions-divider"></span>' +
+                        '<span class="permission-actions-label" id="permission-actions-label">等待授权</span>' +
+                        '<button id="approve-permission-btn" class="btn btn-permission btn-permission-approve" type="button">批准</button>' +
+                        '<button id="deny-permission-btn" class="btn btn-permission btn-permission-deny" type="button">拒绝</button>' +
+                      '</span>' +
                     '</div>' +
                     '<div class="input-composer-right">' +
                       '<span id="queue-counter" class="queue-counter hidden">队列: 0</span>' +
                       '<span class="input-hint' + (state.terminalInteractive ? ' terminal-interactive-hint' : state.currentView === "terminal" ? " hidden" : "") + '">' + (state.terminalInteractive ? '终端交互中 · Ctrl+C 中断 · Ctrl+L 清屏' : 'Enter 发送 · Shift+Enter 换行') + '</span>' +
                       renderInlineKeyboard() +
                       '<button id="stop-button" class="btn-circle btn-circle-stop' + (state.selectedId ? "" : " hidden") + '" title="停止">' +
-                        '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="3" width="10" height="10" rx="2"/></svg>' +
+                        '<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>' +
                       '<button id="send-input-button" class="btn-circle btn-circle-send" title="发送">' +
-                        '<svg width="18" height="18" 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>' +
+                        '<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>' +
                     '</div>' +
                   '</div>' +
@@ -466,6 +526,7 @@
                     '<span id="session-mode-display" class="session-mode-display">' + (selectedSession ? getModeLabel(selectedSession.mode) : '默认') + '</span>' +
                     '<span class="session-info-separator">|</span>' +
                     '<span id="session-status-display" class="session-status-display">' + (selectedSession ? getSessionStatusLabel(selectedSession) : '-') + '</span>' +
+                    (selectedSession && selectedSession.claudeSessionId ? '<span class="session-info-separator">|</span><span id="claude-session-id-badge" class="claude-session-id-badge" data-claude-id="' + escapeHtml(selectedSession.claudeSessionId) + '" title="点击复制 Claude 会话 ID">☁ ' + escapeHtml(selectedSession.claudeSessionId.slice(0, 8)) + '</span>' : '') +
                     '<span class="session-info-separator">|</span>' +
                     '<span id="session-exit-display" class="session-exit-display">exit=' + (selectedSession && selectedSession.exitCode !== undefined ? selectedSession.exitCode : 'n/a') + '</span>' +
                   '</div>' +
@@ -524,28 +585,357 @@
       }
 
       function renderSessions() {
-        if (state.sessions.length === 0) {
-          return '<div class="empty-state"><strong>还没有会话记录</strong><br>点击上方「新对话」开始你的第一次对话。</div>';
-        }
         var activeSessions = state.sessions.filter(function(session) { return !session.archived; });
         var archivedSessions = state.sessions.filter(function(session) { return session.archived; });
         var groups = [];
-        if (activeSessions.length > 0) {
-          groups.push(renderSessionGroup("最近", activeSessions));
+        groups.push(renderSessionManageBar());
+
+        // Split claude history into recent (24h) and older
+        var recentHistorySessions = [];
+        if (state.claudeHistoryLoaded) {
+          var cutoff = Date.now() - 24 * 60 * 60 * 1000;
+          recentHistorySessions = getVisibleClaudeHistorySessions().filter(function(s) {
+            return s.timestamp && new Date(s.timestamp).getTime() > cutoff;
+          });
+        }
+
+        if (activeSessions.length > 0 || recentHistorySessions.length > 0) {
+          groups.push(renderRecentGroup(activeSessions, recentHistorySessions));
         }
         if (archivedSessions.length > 0) {
-          groups.push(renderSessionGroup("已归档", archivedSessions));
+          groups.push(renderSessionGroup("已归档", archivedSessions, "sessions"));
+        }
+        groups.push(renderClaudeHistorySection());
+        if (activeSessions.length === 0 && archivedSessions.length === 0 && recentHistorySessions.length === 0) {
+          return renderSessionManageBar() + '<div class="empty-state"><strong>还没有会话记录</strong><br>点击上方「新对话」开始你的第一次对话。</div>' + renderClaudeHistorySection();
         }
         return groups.join("");
       }
 
-      function renderSessionGroup(title, sessions) {
+      function renderSessionManageBar() {
+        if (!state.sessionsManageMode) {
+          return '<div class="session-manage-bar">' +
+            '<span class="sidebar-intro">最近的会话记录</span>' +
+            '<button class="session-manage-toggle" data-action="toggle-manage-mode" type="button">管理</button>' +
+          '</div>';
+        }
+
+        var sessionCount = getSelectedSessionIds().length;
+        var historyCount = getSelectedClaudeHistoryIds().length;
+        var totalCount = sessionCount + historyCount;
+        var hasAny = totalCount > 0;
+
+        return '<div class="session-manage-bar active">' +
+          '<div class="session-manage-summary">已选择 ' + totalCount + ' 项</div>' +
+          '<div class="session-manage-actions">' +
+            '<button class="session-manage-btn" data-action="select-all-visible" type="button">全选</button>' +
+            '<button class="session-manage-btn" data-action="clear-selection" type="button">清空</button>' +
+            '<button class="session-manage-btn danger" data-action="delete-selected" type="button"' + (hasAny ? '' : ' disabled') + '>删除所选</button>' +
+            '<button class="session-manage-btn" data-action="toggle-manage-mode" type="button">完成</button>' +
+          '</div>' +
+        '</div>';
+      }
+
+      function renderSessionGroup(title, sessions, kind) {
         return '<section class="session-group">' +
           '<div class="session-group-title">' + escapeHtml(title) + '</div>' +
-          sessions.map(renderSessionItem).join("") +
+          sessions.map(function(session) { return renderSessionItem(session, kind); }).join("") +
         '</section>';
       }
 
+      function renderRecentGroup(activeSessions, recentHistorySessions) {
+        var html = '<section class="session-group">' +
+          '<div class="session-group-title">最近</div>';
+        html += activeSessions.map(function(session) { return renderSessionItem(session, "sessions"); }).join("");
+        html += recentHistorySessions.map(function(session) { return renderClaudeHistoryItem(session, "history"); }).join("");
+        html += '</section>';
+        return html;
+      }
+
+      function renderClaudeHistorySection() {
+        // Exclude recent 24h items from history section
+        var cutoff = Date.now() - 24 * 60 * 60 * 1000;
+        var visibleHistory = 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="session-manage-btn danger compact" 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>';
+        }
+
+        if (!state.claudeHistoryLoaded) {
+          return '<section class="session-group">' + header +
+            '<div class="claude-history-loading">扫描历史会话中…</div></section>';
+        }
+
+        if (visibleHistory.length === 0) {
+          return '<section class="session-group">' + header +
+            '<div class="claude-history-loading">没有更早的 Claude 历史会话</div></section>';
+        }
+
+        var groups = {};
+        var groupOrder = [];
+        visibleHistory.forEach(function(s) {
+          if (!groups[s.cwd]) {
+            groups[s.cwd] = [];
+            groupOrder.push(s.cwd);
+          }
+          groups[s.cwd].push(s);
+        });
+
+        var html = '';
+        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);
+          if (isDirExpanded) {
+            html += groups[cwd].map(function(session) { return renderClaudeHistoryItem(session, "history"); }).join("");
+          }
+        });
+
+        return '<section class="session-group">' + header + html + '</section>';
+      }
+
+      function getVisibleClaudeHistorySessions() {
+        return state.claudeHistory.filter(function(s) {
+          return s.hasConversation && !s.managedByWand;
+        });
+      }
+
+      function getSelectedSessionIds() {
+        return Object.keys(state.selectedSessionIds).filter(function(id) { return !!state.selectedSessionIds[id]; });
+      }
+
+      function getSelectedClaudeHistoryIds() {
+        return Object.keys(state.selectedClaudeHistoryIds).filter(function(id) { return !!state.selectedClaudeHistoryIds[id]; });
+      }
+
+      function clearManageSelections() {
+        state.selectedSessionIds = {};
+        state.selectedClaudeHistoryIds = {};
+      }
+
+      function toggleManageMode(force) {
+        state.sessionsManageMode = typeof force === "boolean" ? force : !state.sessionsManageMode;
+        if (!state.sessionsManageMode) {
+          clearManageSelections();
+          closeSwipedItem();
+        }
+        updateSessionsList();
+      }
+
+      function selectAllVisibleItems() {
+        var nextSessionIds = {};
+        state.sessions.forEach(function(session) {
+          nextSessionIds[session.id] = true;
+        });
+        var cutoff = Date.now() - 24 * 60 * 60 * 1000;
+        var nextHistoryIds = {};
+        getVisibleClaudeHistorySessions().filter(function(session) {
+          return !session.timestamp || new Date(session.timestamp).getTime() <= cutoff;
+        }).forEach(function(session) {
+          nextHistoryIds[session.claudeSessionId] = true;
+        });
+        state.selectedSessionIds = nextSessionIds;
+        state.selectedClaudeHistoryIds = nextHistoryIds;
+        updateSessionsList();
+      }
+
+      function clearSelections() {
+        clearManageSelections();
+        updateSessionsList();
+      }
+
+      function toggleManagedItemSelection(kind, id) {
+        if (!state.sessionsManageMode || !id) return;
+        var target = kind === "history" ? state.selectedClaudeHistoryIds : state.selectedSessionIds;
+        if (target[id]) {
+          delete target[id];
+        } else {
+          target[id] = true;
+        }
+        updateSessionsList();
+      }
+
+      function renderManageCheckbox(kind, id, label) {
+        if (!state.sessionsManageMode) return '';
+        var selected = kind === "history" ? !!state.selectedClaudeHistoryIds[id] : !!state.selectedSessionIds[id];
+        return '<label class="session-manage-check">' +
+          '<input type="checkbox" data-action="toggle-selection" data-kind="' + escapeHtml(kind) + '" data-id="' + escapeHtml(id) + '"' + (selected ? ' checked' : '') + ' aria-label="' + escapeHtml(label) + '">' +
+          '<span></span>' +
+        '</label>';
+      }
+
+      function confirmDelete(message) {
+        return window.confirm(message);
+      }
+
+      function batchDeleteSelected() {
+        var sessionIds = getSelectedSessionIds();
+        var historyIds = getSelectedClaudeHistoryIds();
+        var total = sessionIds.length + historyIds.length;
+        if (!total) return;
+        if (!confirmDelete('确认删除所选 ' + total + ' 项吗？')) {
+          return;
+        }
+
+        var requests = [];
+        if (sessionIds.length > 0) {
+          requests.push(fetch('/api/sessions/batch-delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'same-origin',
+            body: JSON.stringify({ sessionIds: sessionIds })
+          }).then(function(res) { return res.json(); }));
+        }
+        if (historyIds.length > 0) {
+          requests.push(fetch('/api/claude-history/batch-delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'same-origin',
+            body: JSON.stringify({ claudeSessionIds: historyIds })
+          }).then(function(res) { return res.json(); }));
+        }
+
+        Promise.all(requests)
+          .then(function() {
+            if (sessionIds.indexOf(state.selectedId) !== -1) {
+              state.selectedId = null;
+              persistSelectedId();
+            }
+            state.claudeHistory = state.claudeHistory.filter(function(session) {
+              return historyIds.indexOf(session.claudeSessionId) === -1;
+            });
+            clearManageSelections();
+            return refreshAll();
+          })
+          .catch(function() {
+            var errorEl = document.getElementById('action-error');
+            showError(errorEl, '无法批量删除所选项目。');
+          });
+      }
+
+      function clearAllClaudeHistory() {
+        var cutoff = Date.now() - 24 * 60 * 60 * 1000;
+        var visibleHistory = getVisibleClaudeHistorySessions().filter(function(s) {
+          return !s.timestamp || new Date(s.timestamp).getTime() <= cutoff;
+        });
+        if (!visibleHistory.length) return;
+        if (!confirmDelete('确认清空当前显示的 ' + visibleHistory.length + ' 条 Claude 历史吗？')) {
+          return;
+        }
+        var deleteIds = visibleHistory.map(function(session) { return session.claudeSessionId; });
+        return fetch('/api/claude-history/batch-delete', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'same-origin',
+          body: JSON.stringify({ claudeSessionIds: deleteIds })
+        })
+          .then(function(res) { return res.json(); })
+          .then(function(data) {
+            if (data && data.error) {
+              throw new Error(data.error);
+            }
+            state.claudeHistory = state.claudeHistory.filter(function(s) {
+              return deleteIds.indexOf(s.claudeSessionId) === -1;
+            });
+            clearManageSelections();
+            updateSessionsList();
+          })
+          .catch(function() {
+            var errorEl = document.getElementById('action-error');
+            showError(errorEl, '无法清空历史会话。');
+          });
+      }
+
+      function renderClaudeHistoryDirectoryHeader(cwd, cwdShort, count, isExpanded) {
+        var chevron = isExpanded ? "&#9662;" : "&#9656;";
+        return '<div class="claude-history-directory-header" data-action="toggle-history-directory" data-cwd="' + escapeHtml(cwd) + '" role="button" tabindex="0">' +
+          '<div class="session-group-title claude-history-directory-title">' +
+            '<span class="chevron">' + chevron + '</span>' +
+            '<span class="claude-history-directory-label">' + escapeHtml(cwdShort) + ' (' + count + ')</span>' +
+            '<button class="session-manage-btn danger compact claude-history-directory-clear-btn" data-action="delete-history-directory" data-cwd="' +
+            escapeHtml(cwd) + '" type="button" aria-label="清空此目录的历史会话" title="清空此目录的历史会话">清空此目录</button>' +
+          '</div>' +
+        '</div>';
+      }
+
+      function renderClaudeHistoryItem(session, kind) {
+        var shortId = session.claudeSessionId.slice(0, 8);
+        var preview = session.firstUserMessage || "(空会话)";
+        var timeStr = formatHistoryTime(session.timestamp);
+        var checkbox = renderManageCheckbox(kind, session.claudeSessionId, "选择历史会话 " + preview);
+        var deleteButton = state.sessionsManageMode ? '' :
+          '<button class="session-action-btn delete-btn" data-action="delete-history" data-claude-session-id="' +
+          session.claudeSessionId + '" type="button" aria-label="删除会话" title="隐藏此历史会话"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg></button>';
+        var resumeButton = state.sessionsManageMode ? '' :
+          '<button class="session-action-btn" data-action="resume-history" data-claude-session-id="' +
+          session.claudeSessionId + '" data-cwd="' + escapeHtml(session.cwd) +
+          '" type="button" aria-label="恢复会话" title="恢复此 Claude 历史会话"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 105.64-11.36L3 10"/></svg></button>';
+
+        return '<div class="session-item claude-history-item' + (state.sessionsManageMode && state.selectedClaudeHistoryIds[session.claudeSessionId] ? ' selected' : '') + '" data-claude-history-id="' + session.claudeSessionId + '" data-cwd="' + escapeHtml(session.cwd) + '" role="button" tabindex="0">' +
+          '<div class="session-item-content">' +
+            '<div class="session-item-row">' +
+              checkbox +
+              '<div class="session-main">' +
+                '<div class="session-command claude-history-preview">' + escapeHtml(preview) + '</div>' +
+                '<div class="session-meta">' +
+                  '<span class="session-id" title="' + escapeHtml(session.claudeSessionId) + '">' + escapeHtml(shortId) + '</span>' +
+                  '<span>' + escapeHtml(timeStr) + '</span>' +
+                '</div>' +
+              '</div>' +
+              '<span class="session-actions">' + resumeButton + deleteButton + '</span>' +
+            '</div>' +
+          '</div>' +
+        '</div>';
+      }
+      function formatHistoryTime(isoStr) {
+        if (!isoStr) return "";
+        try {
+          var d = new Date(isoStr);
+          var now = new Date();
+          var diffMs = now - d;
+          var diffMin = Math.floor(diffMs / 60000);
+          if (diffMin < 1) return "刚刚";
+          if (diffMin < 60) return diffMin + " 分钟前";
+          var diffHr = Math.floor(diffMin / 60);
+          if (diffHr < 24) return diffHr + " 小时前";
+          var diffDay = Math.floor(diffHr / 24);
+          if (diffDay < 30) return diffDay + " 天前";
+          return d.toLocaleDateString();
+        } catch (e) {
+          return "";
+        }
+      }
+
+      function loadClaudeHistory() {
+        return fetch("/api/claude-history", { credentials: "same-origin" })
+          .then(function(res) {
+            if (!res.ok) return [];
+            return res.json();
+          })
+          .then(function(sessions) {
+            state.claudeHistory = sessions || [];
+            state.claudeHistoryLoaded = true;
+            updateSessionsList();
+          })
+          .catch(function() {
+            state.claudeHistoryLoaded = true;
+            state.claudeHistory = [];
+            updateSessionsList();
+          });
+      }
+
       function isMobileLayout() {
         return window.innerWidth <= 768;
       }
@@ -1059,37 +1449,52 @@
 
       function renderSessionItem(session) {
         var activeClass = session.id === state.selectedId ? " active" : "";
+        var selectedClass = state.sessionsManageMode && state.selectedSessionIds[session.id] ? " selected" : "";
         var metaStatus = getSessionStatusLabel(session);
         var metaStatusClass = getSessionStatusClass(session);
         var modeName = session.mode === "full-access" ? "全权限" : session.mode === "default" ? "默认" : session.mode === "native" ? "原生" : session.mode === "auto-edit" ? "自动编辑" : session.mode;
-        var deleteButton = '<button class="btn btn-ghost btn-sm session-action-btn" data-action="delete" data-session-id="' + session.id + '" type="button" aria-label="删除会话">×</button>';
         var resumeButton = "";
         var sessionIdDisplay = "";
+        var recoveryHint = "";
+        var checkbox = renderManageCheckbox("sessions", session.id, "选择会话 " + session.command);
 
-        // 如果有 Claude 会话 ID，显示恢复按钮
         if (session.claudeSessionId) {
           var shortId = session.claudeSessionId.slice(0, 8);
           sessionIdDisplay = '<span class="session-id" title="' + escapeHtml(session.claudeSessionId) + '">' + escapeHtml(shortId) + '</span>';
-          if (session.status !== "running") {
-            resumeButton = '<button class="btn btn-secondary btn-sm session-action-btn" data-action="resume" data-claude-session-id="' + escapeHtml(session.claudeSessionId) + '" data-cwd="' + escapeHtml(session.cwd) + '" type="button" aria-label="恢复会话" title="恢复 Claude 会话">↻</button>';
+          if (session.status !== "running" && !state.sessionsManageMode) {
+            resumeButton = '<button class="session-action-btn" data-action="resume" data-session-id="' + session.id + '" type="button" aria-label="恢复会话" title="恢复 Claude 会话"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 105.64-11.36L3 10"/></svg></button>';
           }
         }
 
-        return '<div class="session-item' + activeClass + '" data-session-id="' + session.id + '" role="button" tabindex="0">' +
-          '<div class="session-item-row">' +
-            '<div class="session-main">' +
-              '<div class="session-command">' + escapeHtml(session.command) + '</div>' +
-              '<div class="session-meta">' +
-                '<span>' + escapeHtml(modeName) + '</span>' +
-                '<span class="session-status ' + metaStatusClass + '">' + escapeHtml(metaStatus) + '</span>' +
-                sessionIdDisplay +
+        if (session.autoRecovered) {
+          recoveryHint = '<span class="session-id" title="自动恢复的会话">自动恢复</span>';
+        } else if (session.resumedToSessionId) {
+          recoveryHint = '<span class="session-id" title="已恢复到新会话">已恢复</span>';
+        } else if (session.resumedFromSessionId) {
+          recoveryHint = '<span class="session-id" title="从旧会话恢复而来">续接</span>';
+        }
+
+        var deleteButton = state.sessionsManageMode ? '' : '<button class="session-action-btn delete-btn" data-action="delete-session" data-session-id="' + session.id + '" type="button" aria-label="删除会话" title="删除此会话"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg></button>';
+        var actionsHtml = '<span class="session-actions">' + resumeButton + deleteButton + '</span>';
+
+        return '<div class="session-item' + activeClass + selectedClass + '" data-session-id="' + session.id + '" role="button" tabindex="0">' +
+          '<div class="session-item-content">' +
+            '<div class="session-item-row">' +
+              checkbox +
+              '<div class="session-main">' +
+                '<div class="session-command">' + escapeHtml(session.command) + '</div>' +
+                '<div class="session-meta">' +
+                  '<span>' + escapeHtml(modeName) + '</span>' +
+                  '<span class="session-status ' + metaStatusClass + '">' + escapeHtml(metaStatus) + '</span>' +
+                  sessionIdDisplay +
+                  recoveryHint +
+                '</div>' +
               '</div>' +
+              actionsHtml +
             '</div>' +
-            '<span class="session-actions">' + resumeButton + deleteButton + '</span>' +
           '</div>' +
         '</div>';
       }
-
       function renderModeCards(selectedMode) {
         var modes = [
           { id: "default",     label: "标准",     desc: "逐步确认操作" },
@@ -1120,6 +1525,13 @@
               '<button id="close-modal-button" class="btn btn-ghost btn-icon">&times;</button>' +
             '</div>' +
             '<div class="modal-body">' +
+              '<div class="field">' +
+                '<label class="field-label">模式</label>' +
+                '<div id="mode-cards" class="mode-cards">' +
+                  renderModeCards(modalMode) +
+                '</div>' +
+                '<p id="mode-description" class="field-hint">' + escapeHtml(getToolModeHint(modalTool, modalMode)) + '</p>' +
+              '</div>' +
               '<div class="field">' +
                 '<label class="field-label" for="cwd">工作目录</label>' +
                 '<div class="suggestions-wrap">' +
@@ -1127,13 +1539,7 @@
                   '<div id="cwd-suggestions" class="suggestions hidden"></div>' +
                 '</div>' +
                 '<p class="field-hint">会话将在此目录启动，支持路径自动补全。</p>' +
-              '</div>' +
-              '<div class="field">' +
-                '<label class="field-label">模式</label>' +
-                '<div id="mode-cards" class="mode-cards">' +
-                  renderModeCards(modalMode) +
-                '</div>' +
-                '<p id="mode-description" class="field-hint">' + escapeHtml(getToolModeHint(modalTool, modalMode)) + '</p>' +
+                '<div id="recent-paths-bubbles" class="recent-paths-bubbles"></div>' +
               '</div>' +
               '<button id="run-button" class="btn btn-primary btn-block">启动会话</button>' +
               '<p id="modal-error" class="error-message hidden"></p>' +
@@ -1300,8 +1706,12 @@
         if (sessionsList) {
           sessionsList.addEventListener("click", handleSessionItemClick);
           sessionsList.addEventListener("keydown", handleSessionItemKeydown);
+          initSwipeToDelete(sessionsList);
         }
 
+        // Claude session ID badge click-to-copy (event delegation on document)
+        document.addEventListener("click", handleClaudeIdCopy);
+
         var modeCardsEl = document.getElementById("mode-cards");
         if (modeCardsEl) modeCardsEl.addEventListener("click", function(e) {
           var card = e.target.closest(".mode-card");
@@ -1375,7 +1785,7 @@
           inputBox.addEventListener("paste", handleInputPaste);
           inputBox.addEventListener("input", function() {
             refreshInputBoxState(inputBox);
-            setDraftValue(inputBox.value);
+            setDraftValue(inputBox.value, true);
           });
           inputBox.addEventListener("focus", function() {
             // Close drawer when user focuses input to avoid backdrop blocking clicks
@@ -1394,21 +1804,34 @@
           var toggle = document.getElementById(id);
           if (toggle) toggle.addEventListener("click", toggleTerminalInteractive);
         });
-        // Keyboard popup handlers
-        var keyboardToggle = document.getElementById("keyboard-toggle");
-        if (keyboardToggle) keyboardToggle.addEventListener("click", handleKeyboardToggle);
-        var keyboardPopup = document.getElementById("keyboard-popup");
-        if (keyboardPopup) keyboardPopup.addEventListener("click", handleInlineKeyboardClick);
-        // Close popup when clicking outside
-        document.addEventListener("click", function(event) {
-          var toggle = document.getElementById("keyboard-toggle");
-          var popup = document.getElementById("keyboard-popup");
-          var target = event.target;
-          if (!popup || popup.classList.contains("hidden") || !target) return;
-          var clickedPopup = popup.contains(target);
-          var clickedToggle = !!toggle && toggle.contains(target);
-          if (!clickedPopup && !clickedToggle) {
-            closeKeyboardPopup();
+        // Inline shortcuts click handler
+        var inlineShortcutsWrap = document.querySelector(".inline-shortcuts-wrap");
+        if (inlineShortcutsWrap) inlineShortcutsWrap.addEventListener("click", handleInlineKeyboardClick);
+        // Shortcuts toggle (mobile fold/unfold)
+        var shortcutsToggleBtn = document.querySelector(".shortcuts-toggle");
+        if (shortcutsToggleBtn) shortcutsToggleBtn.addEventListener("click", function(e) {
+          e.stopPropagation();
+          state.shortcutsExpanded = !state.shortcutsExpanded;
+          var wrap = document.querySelector(".inline-shortcuts-wrap");
+          var toggle = document.querySelector(".shortcuts-toggle");
+          if (wrap) wrap.classList.toggle("expanded", state.shortcutsExpanded);
+          if (toggle) {
+            toggle.classList.toggle("active", state.shortcutsExpanded);
+            toggle.textContent = state.shortcutsExpanded ? "\u203a" : "\u2039";
+          }
+        });
+        // Close shortcuts strip on outside click
+        document.addEventListener("click", function(e) {
+          if (!state.shortcutsExpanded) return;
+          var wrap = document.querySelector(".inline-shortcuts-wrap");
+          if (wrap && !wrap.contains(e.target)) {
+            state.shortcutsExpanded = false;
+            wrap.classList.remove("expanded");
+            var toggle = document.querySelector(".shortcuts-toggle");
+            if (toggle) {
+              toggle.classList.remove("active");
+              toggle.textContent = "\u2039";
+            }
           }
         });
 
@@ -1441,6 +1864,12 @@
         var scaleUpBtn = document.getElementById("terminal-scale-up-top");
         if (scaleDownBtn) scaleDownBtn.addEventListener("click", function() { adjustTerminalScale(-0.25); });
         if (scaleUpBtn) scaleUpBtn.addEventListener("click", function() { adjustTerminalScale(0.25); });
+        var pageRefreshBtn = document.getElementById("page-refresh-btn");
+        if (pageRefreshBtn) pageRefreshBtn.addEventListener("click", function() { location.reload(); });
+        var jumpBottomBtn = document.getElementById("terminal-jump-bottom");
+        if (jumpBottomBtn) jumpBottomBtn.addEventListener("click", function() {
+          maybeScrollTerminalToBottom("force");
+        });
 
         // File explorer
         var fileRefresh = document.getElementById("file-explorer-refresh");
@@ -1874,34 +2303,289 @@
       function handleSessionItemClick(event) {
         var target = event.target;
         if (!target || !(target instanceof Element)) return;
+
+        var historyToggle = target.closest("#claude-history-toggle");
+        if (historyToggle) {
+          event.preventDefault();
+          event.stopPropagation();
+          state.claudeHistoryExpanded = !state.claudeHistoryExpanded;
+          if (state.claudeHistoryExpanded && !state.claudeHistoryLoaded) {
+            loadClaudeHistory();
+          }
+          updateSessionsList();
+          return;
+        }
+
         var actionButton = target.closest("[data-action]");
         if (actionButton && actionButton instanceof HTMLElement) {
           event.preventDefault();
           event.stopPropagation();
-          if (actionButton.dataset.action === "delete" && actionButton.dataset.sessionId) {
-            deleteSession(actionButton.dataset.sessionId);
-          } else if (actionButton.dataset.action === "resume" && actionButton.dataset.claudeSessionId) {
-            startCommand("claude --resume " + actionButton.dataset.claudeSessionId, actionButton.dataset.cwd || "");
+          if (actionButton.dataset.action === "toggle-manage-mode") {
+            toggleManageMode();
+          } else if (actionButton.dataset.action === "select-all-visible") {
+            selectAllVisibleItems();
+          } else if (actionButton.dataset.action === "clear-selection") {
+            clearSelections();
+          } else if (actionButton.dataset.action === "delete-selected") {
+            batchDeleteSelected();
+          } else if (actionButton.dataset.action === "toggle-selection") {
+            toggleManagedItemSelection(actionButton.dataset.kind, actionButton.dataset.id);
+          } else if (actionButton.dataset.action === "delete-session" && actionButton.dataset.sessionId) {
+            if (confirmDelete("确认删除这个会话吗？")) {
+              deleteSession(actionButton.dataset.sessionId);
+            }
+          } else if (actionButton.dataset.action === "delete-history" && actionButton.dataset.claudeSessionId) {
+            if (confirmDelete("确认隐藏这条 Claude 历史吗？")) {
+              executeDeleteHistory(actionButton.dataset.claudeSessionId, actionButton.closest(".session-item"));
+            }
+          } else if (actionButton.dataset.action === "toggle-history-directory" && actionButton.dataset.cwd) {
+            var dirCwd = actionButton.dataset.cwd;
+            state.claudeHistoryExpandedDirs[dirCwd] = !state.claudeHistoryExpandedDirs[dirCwd];
+            updateSessionsList();
+          } else if (actionButton.dataset.action === "delete-history-directory" && actionButton.dataset.cwd) {
+            var deleteCwd = actionButton.dataset.cwd;
+            var items = getHistoryItemsByCwd(deleteCwd);
+            var dirCount = getVisibleClaudeHistorySessions().filter(function(s) { return s.cwd === deleteCwd; }).length;
+            if (confirmDelete("确认清空此目录下的 " + dirCount + " 条 Claude 历史吗？")) {
+              setDeletingState(items, true);
+              deleteClaudeHistoryDirectory(deleteCwd, actionButton, items);
+            }
+          } else if (actionButton.dataset.action === "clear-all-history") {
+            clearAllClaudeHistory();
+          } else if (actionButton.dataset.action === "resume" && actionButton.dataset.sessionId) {
+            handleResumeAction(actionButton);
+          } else if (actionButton.dataset.action === "resume-history" && actionButton.dataset.claudeSessionId) {
+            handleResumeHistoryAction(actionButton);
           }
           return;
         }
+
         var item = target.closest(".session-item");
-        if (item && item.dataset.sessionId) {
-          selectSession(item.dataset.sessionId);
-          closeSessionsDrawer();
+        if (item) {
+          if (state.sessionsManageMode) {
+            if (item.dataset.sessionId) {
+              toggleManagedItemSelection("sessions", item.dataset.sessionId);
+            } else if (item.dataset.claudeHistoryId) {
+              toggleManagedItemSelection("history", item.dataset.claudeHistoryId);
+            }
+            return;
+          }
+          if (item.classList.contains("swiped")) {
+            closeSwipedItem();
+            return;
+          }
+          if (_swipeState) return;
+          if (item.dataset.sessionId) {
+            selectSession(item.dataset.sessionId);
+            closeSessionsDrawer();
+          }
         }
       }
 
       function handleSessionItemKeydown(event) {
         if (event.key !== "Enter" && event.key !== " ") return;
         var item = event.target.closest(".session-item");
-        if (item && item.dataset.sessionId) {
-          event.preventDefault();
+        if (!item) return;
+        event.preventDefault();
+        if (state.sessionsManageMode) {
+          if (item.dataset.sessionId) {
+            toggleManagedItemSelection("sessions", item.dataset.sessionId);
+          } else if (item.dataset.claudeHistoryId) {
+            toggleManagedItemSelection("history", item.dataset.claudeHistoryId);
+          }
+          return;
+        }
+        if (item.dataset.sessionId) {
           selectSession(item.dataset.sessionId);
           closeSessionsDrawer();
         }
       }
 
+      /** Copy Claude session ID from badge to clipboard */
+      function handleClaudeIdCopy(event) {
+        var badge = event.target.closest("#claude-session-id-badge");
+        if (!badge) return;
+        var fullId = badge.dataset.claudeId;
+        if (!fullId) return;
+        navigator.clipboard.writeText(fullId).then(function() {
+          var original = badge.textContent;
+          badge.textContent = "\u2713 已复制";
+          badge.classList.add("copied");
+          setTimeout(function() {
+            badge.textContent = original;
+            badge.classList.remove("copied");
+          }, 1200);
+        }).catch(function() {
+          showToast("复制失败", "error");
+        });
+      }
+
+      function getTerminalViewport() {
+        if (!state.terminal || !state.terminal.element) return null;
+        if (state.terminalViewportEl && state.terminal.element.contains(state.terminalViewportEl)) {
+          return state.terminalViewportEl;
+        }
+        state.terminalViewportEl = state.terminal.element.querySelector(".xterm-viewport");
+        return state.terminalViewportEl;
+      }
+
+      function clearTerminalScrollIdleTimer() {
+        if (state.terminalScrollIdleTimer) {
+          clearTimeout(state.terminalScrollIdleTimer);
+          state.terminalScrollIdleTimer = null;
+        }
+      }
+
+      function updateTerminalJumpToBottomButton() {
+        var button = document.getElementById("terminal-jump-bottom");
+        var shouldShow = !!state.selectedId
+          && state.currentView === "terminal"
+          && !state.terminalAutoFollow
+          && !isTerminalNearBottom();
+        state.showTerminalJumpToBottom = shouldShow;
+        if (button) {
+          button.classList.toggle("visible", shouldShow);
+        }
+      }
+
+      function isTerminalNearBottom() {
+        var viewport = getTerminalViewport();
+        if (!viewport) return true;
+        var distance = viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop;
+        return distance <= state.terminalScrollThreshold;
+      }
+
+      function scrollTerminalToBottom(smooth) {
+        if (!state.terminal) return;
+        if (smooth) {
+          var viewport = getTerminalViewport();
+          if (viewport) {
+            viewport.scrollTo({ top: viewport.scrollHeight, behavior: "smooth" });
+            setTimeout(function() {
+              if (state.terminal) state.terminal.scrollToBottom();
+            }, 160);
+            return;
+          }
+        }
+        state.terminal.scrollToBottom();
+      }
+
+      function scheduleTerminalResumeFollow() {
+        clearTerminalScrollIdleTimer();
+        updateTerminalJumpToBottomButton();
+        state.terminalScrollIdleTimer = setTimeout(function() {
+          state.terminalScrollIdleTimer = null;
+          state.terminalAutoFollow = true;
+          if (!isTerminalNearBottom()) {
+            scrollTerminalToBottom(true);
+          }
+          updateTerminalJumpToBottomButton();
+        }, state.terminalScrollIdleMs);
+      }
+
+      function setTerminalManualScrollActive() {
+        state.terminalAutoFollow = false;
+        updateTerminalJumpToBottomButton();
+        scheduleTerminalResumeFollow();
+      }
+
+      function maybeScrollTerminalToBottom(reason) {
+        if (!state.terminal) return;
+        var force = reason === "force";
+        if (force) {
+          state.terminalAutoFollow = true;
+          clearTerminalScrollIdleTimer();
+          scrollTerminalToBottom(false);
+          updateTerminalJumpToBottomButton();
+          return;
+        }
+        if (!state.terminalAutoFollow && !isTerminalNearBottom()) {
+          updateTerminalJumpToBottomButton();
+          return;
+        }
+        state.terminalAutoFollow = true;
+        scrollTerminalToBottom(false);
+        updateTerminalJumpToBottomButton();
+      }
+
+      function syncTerminalBuffer(sessionId, output, options) {
+        if (!state.terminal) return false;
+        var normalizedOutput = normalizeTerminalOutput(output || "");
+        var nextSessionId = sessionId || null;
+        var opts = options || {};
+        var mode = opts.mode || "append";
+        var shouldScroll = opts.scroll !== false;
+        var sessionChanged = state.terminalSessionId !== nextSessionId;
+        var currentOutput = state.terminalOutput || "";
+        var wrote = false;
+
+        if (normalizedOutput === currentOutput && !sessionChanged) {
+          if (shouldScroll) maybeScrollTerminalToBottom("output");
+          updateTerminalJumpToBottomButton();
+          return false;
+        }
+
+        if (sessionChanged) {
+          state.terminal.reset();
+          currentOutput = "";
+          state.terminalOutput = "";
+          state.terminalAutoFollow = true;
+          clearTerminalScrollIdleTimer();
+          updateTerminalJumpToBottomButton();
+        }
+
+        if (mode === "replace") {
+          if (normalizedOutput !== currentOutput) {
+            state.terminal.reset();
+            if (normalizedOutput) {
+              state.terminal.write(normalizedOutput);
+            }
+            wrote = true;
+          }
+        } else if (normalizedOutput.length < currentOutput.length && !sessionChanged) {
+          // Ignore regressive snapshots for the active session; wait for an explicit replace.
+          return false;
+        } else if (normalizedOutput.startsWith(currentOutput)) {
+          var delta = normalizedOutput.slice(currentOutput.length);
+          if (delta) {
+            state.terminal.write(delta);
+            wrote = true;
+          }
+        } else if (currentOutput && currentOutput.startsWith(normalizedOutput)) {
+          // Ignore shorter/stale snapshots from polling or reconnect races.
+          return false;
+        } else {
+          state.terminal.reset();
+          if (normalizedOutput) {
+            state.terminal.write(normalizedOutput);
+          }
+          wrote = true;
+        }
+
+        state.terminalSessionId = nextSessionId;
+        state.terminalOutput = normalizedOutput;
+        if (shouldScroll && (wrote || sessionChanged || mode === "replace")) {
+          maybeScrollTerminalToBottom(sessionChanged || mode === "replace" ? "force" : "output");
+        } else {
+          updateTerminalJumpToBottomButton();
+        }
+        return wrote || sessionChanged;
+      }
+
+      function shouldResizeTerminalViewport() {
+        var output = document.getElementById("output");
+        if (!output) return false;
+        var rect = output.getBoundingClientRect();
+        var width = Math.round(rect.width);
+        var height = Math.round(rect.height);
+        if (!width || !height) return false;
+        if (state.terminalViewportSize.width === width && state.terminalViewportSize.height === height) {
+          return false;
+        }
+        state.terminalViewportSize = { width: width, height: height };
+        return true;
+      }
+
       function initTerminal() {
         var container = document.getElementById("output");
         if (!container || state.terminal) return;
@@ -1913,7 +2597,7 @@
         state.terminal = new Terminal({
           cols: 120,
           rows: 36,
-          convertEol: false,
+          convertEol: true,
           disableStdin: false,
           cursorBlink: false,
           fontFamily: '"Geist Mono", "SF Mono", monospace',
@@ -1946,19 +2630,62 @@
           }
         });
 
-        state.fitAddon = new FitAddon.FitAddon();
-        state.terminal.loadAddon(state.fitAddon);
+        var fitAddonConstructor =
+          typeof FitAddon !== "undefined" && FitAddon && typeof FitAddon.FitAddon === "function"
+            ? FitAddon.FitAddon
+            : null;
+        state.fitAddon = fitAddonConstructor ? new fitAddonConstructor() : null;
+        if (state.fitAddon) {
+          state.terminal.loadAddon(state.fitAddon);
+        } else {
+          console.error("[wand] xterm fit addon failed to load; continuing without fit support.");
+        }
 
         state.terminal.open(container);
         applyTerminalScale();
-        state.fitAddon.fit();
+        state.terminalViewportSize = { width: 0, height: 0 };
+        state.terminalAutoFollow = true;
+        clearTerminalScrollIdleTimer();
+        // Double-rAF: wait for browser to complete layout before measuring and fitting
+        if (state.fitAddon) {
+          requestAnimationFrame(function() {
+            requestAnimationFrame(function() {
+              if (state.fitAddon && shouldResizeTerminalViewport()) {
+                state.fitAddon.fit();
+              }
+            });
+          });
+        }
+
+        var viewport = getTerminalViewport();
+        if (viewport) {
+          state.terminalViewportScrollHandler = function() {
+            if (isTerminalNearBottom()) {
+              state.terminalAutoFollow = true;
+              clearTerminalScrollIdleTimer();
+              updateTerminalJumpToBottomButton();
+              return;
+            }
+            setTerminalManualScrollActive();
+          };
+          state.terminalViewportTouchHandler = function() {
+            setTerminalManualScrollActive();
+          };
+          viewport.addEventListener("scroll", state.terminalViewportScrollHandler, { passive: true });
+          viewport.addEventListener("touchmove", state.terminalViewportTouchHandler, { passive: true });
+        }
+
+        container.addEventListener('wheel', function(e) {
+          if (!isTerminalNearBottom() || e.deltaY < 0) {
+            setTerminalManualScrollActive();
+          }
+          e.stopPropagation();
+        }, { passive: true });
 
         if (state.selectedId) {
           var session = state.sessions.find(function(s) { return s.id === state.selectedId; });
-          if (session && session.output) {
-            var normalizedOutput = normalizeTerminalOutput(session.output);
-            state.terminal.write(normalizedOutput);
-            state.terminalOutput = normalizedOutput;
+          if (session) {
+            syncTerminalBuffer(session.id, session.output || "", { mode: "replace", scroll: false });
           }
         } else {
           state.terminal.writeln("点击上方「新对话」开始你的第一次对话。");
@@ -1969,13 +2696,8 @@
           queueDirectInput(data);
         });
 
-        // 鼠标滚轮支持 - 在终端容器上滚动
-        container.addEventListener('wheel', function(e) {
-          // 总是允许滚动，让 xterm 处理滚轮事件
-          e.stopPropagation();
-        }, { passive: true });
-
         container.addEventListener("click", focusInputBox);
+        updateTerminalJumpToBottomButton();
 
         // 初始化拖动调整大小
         initTerminalResizeHandle();
@@ -2051,14 +2773,16 @@
         state.selectedId = null;
         persistSelectedId();
         state.sessions = [];
+        state.claudeHistory = [];
+        state.claudeHistoryLoaded = false;
+        state.claudeHistoryExpanded = true;
+        state.claudeHistoryExpandedDirs = {};
         state.sessionsDrawerOpen = false;
         render();
       }
 
       function refreshAll() {
-        return loadSessions().then(function() {
-          if (state.selectedId) return loadOutput(state.selectedId);
-        });
+        return loadSessions();
       }
 
       function getModeLabel(mode) {
@@ -2250,9 +2974,6 @@
               }
             }
             updateShellChrome();
-            if (state.selectedId) {
-              loadOutput(state.selectedId);
-            }
           });
       }
 
@@ -2273,6 +2994,7 @@
           closeKeyboardPopup();
         }
         var terminalTitle = selectedSession ? shortCommand(selectedSession.command) : "Wand";
+        var terminalInfo = selectedSession ? getSessionStatusLabel(selectedSession) : "开始对话";
         var summaryEl = document.querySelector(".session-summary-value");
         var titleEl = document.getElementById("terminal-title");
         var infoEl = document.getElementById("terminal-info");
@@ -2281,10 +3003,10 @@
         var chatContainer = document.getElementById("chat-output");
         var stopBtn = document.getElementById("stop-button");
 
-        if (summaryEl) summaryEl.textContent = terminalTitle;
-        if (titleEl) titleEl.textContent = terminalTitle;
-        if (infoEl) {
-          infoEl.textContent = selectedSession ? getSessionStatusLabel(selectedSession) : "开始对话";
+        if (summaryEl && summaryEl.textContent !== terminalTitle) summaryEl.textContent = terminalTitle;
+        if (titleEl && titleEl.textContent !== terminalTitle) titleEl.textContent = terminalTitle;
+        if (infoEl && infoEl.textContent !== terminalInfo) {
+          infoEl.textContent = terminalInfo;
         }
 
         // Update session info bar at bottom
@@ -2292,10 +3014,34 @@
         var modeEl = document.getElementById("session-mode-display");
         var statusEl = document.getElementById("session-status-display");
         var exitEl = document.getElementById("session-exit-display");
-        if (cwdEl) cwdEl.textContent = selectedSession && selectedSession.cwd ? escapeHtml(selectedSession.cwd) : '未设置目录';
-        if (modeEl) modeEl.textContent = selectedSession ? getModeLabel(selectedSession.mode) : '默认';
-        if (statusEl) statusEl.textContent = selectedSession ? getSessionStatusLabel(selectedSession) : '-';
-        if (exitEl) exitEl.textContent = 'exit=' + (selectedSession && selectedSession.exitCode !== undefined ? selectedSession.exitCode : 'n/a');
+        var cwdText = selectedSession && selectedSession.cwd ? selectedSession.cwd : "未设置目录";
+        var modeText = selectedSession ? getModeLabel(selectedSession.mode) : "默认";
+        var exitText = "exit=" + (selectedSession && selectedSession.exitCode !== undefined ? selectedSession.exitCode : "n/a");
+        if (cwdEl && cwdEl.textContent !== cwdText) cwdEl.textContent = cwdText;
+        if (modeEl && modeEl.textContent !== modeText) modeEl.textContent = modeText;
+        if (statusEl && statusEl.textContent !== terminalInfo) statusEl.textContent = terminalInfo;
+        if (exitEl && exitEl.textContent !== exitText) exitEl.textContent = exitText;
+
+        if (!state.terminal && terminalContainer && selectedSession) {
+          initTerminal();
+        }
+        if (state.terminal && terminalContainer && !terminalContainer.contains(state.terminal.element)) {
+          state.terminal.open(terminalContainer);
+          applyTerminalScale();
+          state.terminalViewportSize = { width: 0, height: 0 };
+          scheduleTerminalResize();
+        }
+
+        if (selectedSession && state.terminal) {
+          syncTerminalBuffer(selectedSession.id, selectedSession.output || "", { mode: "replace" });
+        } else if (!selectedSession) {
+          state.terminalSessionId = null;
+          state.terminalOutput = "";
+        }
+
+        if (state.terminal && selectedSession && state.currentView === "terminal") {
+          maybeScrollTerminalToBottom("view");
+        }
 
         var inputPanel = document.querySelector(".input-panel");
         if (selectedSession) {
@@ -2332,21 +3078,7 @@
             state.currentMessages = [];
 
             if (state.terminal) {
-              if (state.terminalSessionId !== id) {
-                state.terminal.reset();
-                state.terminalOutput = "";
-              }
-              var newOutput = normalizeTerminalOutput(data.output || "");
-              if (newOutput.startsWith(state.terminalOutput)) {
-                state.terminal.write(newOutput.slice(state.terminalOutput.length));
-              } else {
-                state.terminal.reset();
-                state.terminal.write(newOutput);
-              }
-              state.terminalSessionId = id;
-              state.terminalOutput = newOutput;
-              state.terminal.scrollToBottom();
-              scheduleTerminalResize();
+              syncTerminalBuffer(id, data.output || "", { mode: "replace" });
             }
 
             renderChat(false);
@@ -2412,6 +3144,7 @@
 
       function closeSessionsDrawer() {
         if (!state.sessionsDrawerOpen) return;
+        closeSwipedItem();
         state.sessionsDrawerOpen = false;
         updateLayoutState();
       }
@@ -2431,6 +3164,7 @@
           state.sessionTool = getPreferredTool();
           state.modeValue = getSafeModeForTool(state.sessionTool, state.modeValue || state.chatMode);
           syncSessionModalUI();
+          loadRecentPathBubbles();
           setTimeout(function() {
             var modeCardsEl = document.getElementById("mode-cards");
             if (modeCardsEl) modeCardsEl.focus();
@@ -2458,6 +3192,10 @@
       }
 
       function setupFocusTrap(modal) {
+        if (focusTrapHandler) {
+          document.removeEventListener("keydown", focusTrapHandler);
+        }
+
         // Focusable elements selector
         var focusableSelector = 'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
 
@@ -2646,6 +3384,36 @@
         });
       }
 
+      function loadRecentPathBubbles() {
+        var container = document.getElementById("recent-paths-bubbles");
+        if (!container) return;
+        fetch("/api/recent-paths", { credentials: "same-origin" })
+          .then(function(res) { return res.json(); })
+          .then(function(items) {
+            if (!items || !items.length) {
+              container.innerHTML = "";
+              return;
+            }
+            container.innerHTML = items.map(function(item) {
+              return '<button class="recent-path-bubble" data-path="' + escapeHtml(item.path) + '" title="' + escapeHtml(item.path) + '">' +
+                escapeHtml(item.name) +
+              '</button>';
+            }).join("");
+            container.querySelectorAll(".recent-path-bubble").forEach(function(el) {
+              el.addEventListener("click", function() {
+                var cwdEl = document.getElementById("cwd");
+                if (cwdEl) {
+                  cwdEl.value = el.dataset.path;
+                  state.cwdValue = el.dataset.path || "";
+                }
+              });
+            });
+          })
+          .catch(function() {
+            if (container) container.innerHTML = "";
+          });
+      }
+
       function schedulePathSuggestions() {
         if (state.suggestionTimer) clearTimeout(state.suggestionTimer);
         state.suggestionTimer = setTimeout(loadPathSuggestions, 120);
@@ -2720,7 +3488,7 @@
               // Move cursor to after the inserted newline
               inputBox.selectionStart = start + 1;
               inputBox.selectionEnd = start + 1;
-              setDraftValue(newValue);
+              setDraftValue(newValue, true);
               autoResizeInput(inputBox);
             }
             return;
@@ -2735,7 +3503,7 @@
           setTimeout(function() {
             var inputBox = document.getElementById("input-box");
             if (inputBox) {
-              setDraftValue(inputBox.value);
+              setDraftValue(inputBox.value, true);
             }
           }, 0);
           return;
@@ -2749,7 +3517,7 @@
             var current = inputBox.value;
             var newValue = current.slice(0, start) + String.fromCharCode(9) + current.slice(start);
             inputBox.value = newValue;
-            setDraftValue(newValue);
+            setDraftValue(newValue, true);
           }
           return;
         }
@@ -2862,15 +3630,17 @@
         return "";
       }
 
-      function setDraftValue(value) {
+      function setDraftValue(value, skipDom) {
         if (!state.selectedId) return;
         state.drafts[state.selectedId] = value;
         // Persist to localStorage
         try {
           localStorage.setItem("wand-draft-" + state.selectedId, value);
         } catch (e) { /* ignore */ }
-        var inputBox = document.getElementById("input-box");
-        if (inputBox) inputBox.value = value;
+        if (!skipDom) {
+          var inputBox = document.getElementById("input-box");
+          if (inputBox) inputBox.value = value;
+        }
       }
 
       function autoResizeInput(el) {
@@ -3053,7 +3823,8 @@
         if (!state.terminal) initTerminal();
         applyCurrentView();
         if (state.currentView === "terminal") {
-          setTimeout(scheduleTerminalResize, 40);
+          state.terminalViewportSize = { width: 0, height: 0 };
+          scheduleTerminalResize(true);
         }
         // Don't call renderChat() here — loadOutput() always calls renderChat() after it resolves.
         // Calling renderChat() prematurely would render with stale/empty messages.
@@ -3079,26 +3850,42 @@
             terminalInteractive: state.terminalInteractive,
             inputLength: value.length
           });
-          if (!isSelectedSessionRunning()) {
-            console.warn("[wand] Prevented send because selected session is not running", {
-              sessionId: state.selectedId,
-              sessionStatus: selectedSession ? selectedSession.status : null
-            });
-            showToast("会话已结束，请重新启动会话。", "error");
-            return Promise.resolve();
-          }
           // Clear todo progress bar at the start of a new user turn
           var todoEl = document.getElementById("todo-progress");
           if (todoEl) todoEl.classList.add("hidden");
           // Send text + Enter as a single call to avoid race conditions
           var combinedInput = value + getControlInput("enter");
-          // Clear the input box immediately to prevent double-sending
-          if (inputBox) {
-            inputBox.value = "";
-            autoResizeInput(inputBox);
+          var isOffline = !state.wsConnected;
+
+          if (isOffline) {
+            // Offline: queue for flush on reconnect, clear input immediately
+            if (state.pendingMessages.length >= 100) {
+              state.pendingMessages.shift();
+            }
+            state.pendingMessages.push(combinedInput);
+            if (inputBox) {
+              inputBox.value = "";
+              autoResizeInput(inputBox);
+            }
+            setDraftValue("");
+            return Promise.resolve();
           }
-          setDraftValue("");
-          return queueDirectInput(combinedInput).catch(function(err) {
+
+          // Online: send via queue, only clear on success
+          return ensureSessionReadyForInput(selectedSession).then(function(readySession) {
+            if (!readySession) {
+              showToast("会话未就绪，将稍后重试。", "info");
+              return null;
+            }
+            return queueDirectInput(combinedInput).then(function() {
+              // Clear input only after the send succeeds
+              if (inputBox && inputBox.value === value) {
+                inputBox.value = "";
+                autoResizeInput(inputBox);
+              }
+              setDraftValue("");
+            });
+          }).catch(function(err) {
             showToast(getInputErrorMessage(err), "error");
             throw err;
           });
@@ -3108,12 +3895,12 @@
 
       function getInputErrorMessage(error) {
         if (error && (error.errorCode === "SESSION_NOT_RUNNING" || error.errorCode === "SESSION_NO_PTY")) {
-          return "会话已结束，请重新启动会话。";
+          return "会话已结束；若存在 Claude 历史会话，将在你下次发送消息时自动恢复。";
         }
         if (error && error.errorCode === "SESSION_NOT_FOUND") {
-          return "会话不存在，请重新启动会话。";
+          return "会话不存在，请重新选择或新建会话。";
         }
-        return (error && error.message) || "会话已结束，请重启会话。";
+        return (error && error.message) || "会话暂不可用；若存在 Claude 历史会话，将自动尝试恢复。";
       }
 
       function buildInputError(payload) {
@@ -3135,6 +3922,56 @@
         updateSessionSnapshot({ id: sessionId, status: status || "exited" });
       }
 
+      function hasRealConversationHistory(session) {
+        if (!session || !Array.isArray(session.messages) || session.messages.length < 2) {
+          return false;
+        }
+        var hasUser = session.messages.some(function(turn) {
+          return turn && turn.role === "user" && Array.isArray(turn.content) && turn.content.some(function(block) {
+            return block && block.type === "text" && typeof block.text === "string" && block.text.trim().length > 0;
+          });
+        });
+        var hasAssistant = session.messages.some(function(turn) {
+          return turn && turn.role === "assistant" && Array.isArray(turn.content) && turn.content.some(function(block) {
+            return block && block.type === "text" && typeof block.text === "string" && block.text.trim().length > 0;
+          });
+        });
+        return hasUser && hasAssistant;
+      }
+
+      function canAutoResumeSession(session) {
+        return !!(session && session.status === "exited" && session.claudeSessionId && hasRealConversationHistory(session));
+      }
+
+      function ensureSessionReadyForInput(session, errorEl) {
+        if (!session) {
+          showToast("会话不存在，请重新选择或新建会话。", "error");
+          return Promise.resolve(null);
+        }
+        if (session.status === "running") {
+          return Promise.resolve(session);
+        }
+        if (!canAutoResumeSession(session)) {
+          showToast("该会话没有可恢复的 Claude 历史上下文，请新建会话。", "error");
+          return Promise.resolve(null);
+        }
+
+        showToast("正在恢复历史会话…", "info");
+        return resumeClaudeSessionById(session.claudeSessionId, errorEl).then(function(data) {
+          if (!data) return null;
+          updateSessionSnapshot(data);
+          updateSessionsList();
+          switchToSessionView(data.id);
+          if (state.ws && state.ws.readyState === WebSocket.OPEN) {
+            state.ws.send(JSON.stringify({ type: "subscribe", sessionId: data.id }));
+          }
+          return loadOutput(data.id).then(function() {
+            focusInputBox(true);
+            return data;
+          });
+        });
+      }
+
       function queueDirectInput(input) {
         if (!input || !state.selectedId) return Promise.resolve();
         state.messageQueue.push(input);
@@ -3154,19 +3991,36 @@
 
         // Pre-check: don't send if session is not running
         if (!isSelectedSessionRunning()) {
+          // If WebSocket is disconnected, queue for flush on reconnect
+          if (!state.wsConnected) {
+            if (state.pendingMessages.length >= 100) {
+              state.pendingMessages.shift();
+            }
+            state.pendingMessages.push(input);
+            console.log("[wand] postInput: session not running, queued for reconnect", {
+              sessionId: state.selectedId,
+              inputLength: input.length
+            });
+            return Promise.resolve();
+          }
           console.warn("[wand] postInput: session not running, skipping send", {
             sessionId: state.selectedId
           });
-          showToast("会话已结束，请重新启动会话。", "error");
+          showToast("会话未运行，正在等待自动恢复后重试。", "info");
           return Promise.resolve();
         }
 
-        // If WebSocket is disconnected, queue the message
+        // If WebSocket is disconnected, queue the message (no HTTP fetch while offline)
         if (!state.wsConnected) {
           if (state.pendingMessages.length >= 100) {
             state.pendingMessages.shift();
           }
           state.pendingMessages.push(input);
+          console.log("[wand] postInput: WebSocket disconnected, queued message", {
+            sessionId: state.selectedId,
+            inputLength: input.length
+          });
+          return Promise.resolve();
         }
 
         console.log("[wand] postInput: sending", {
@@ -3392,7 +4246,6 @@
           var toggle = document.getElementById(id);
           if (toggle) {
             toggle.classList.toggle("active", state.terminalInteractive);
-            toggle.textContent = state.terminalInteractive ? "⌨ 交互开" : "⌨ 交互关";
           }
         });
         // Inline keyboard visibility follows current view
@@ -3402,16 +4255,6 @@
         if (inputHint) inputHint.classList.toggle("hidden", state.currentView === "terminal");
         var container = document.getElementById("output");
         if (container) container.classList.toggle("interactive", state.terminalInteractive);
-        var keyboardToggle = document.getElementById("keyboard-toggle");
-        if (keyboardToggle) {
-          keyboardToggle.classList.toggle("hidden", state.currentView !== "terminal" || !state.selectedId);
-          keyboardToggle.classList.toggle("active", state.keyboardPopupOpen);
-        }
-        var popup = document.getElementById("keyboard-popup");
-        if (popup) {
-          var shouldShowPopup = state.keyboardPopupOpen && state.currentView === "terminal" && !!state.selectedId;
-          popup.classList.toggle("hidden", !shouldShowPopup);
-        }
       }
 
       function captureTerminalInput(event) {
@@ -3442,8 +4285,7 @@
       }
 
       function handleInlineKeyboardClick(event) {
-        // Support both old .ik-key and new .kp-key buttons
-        var btn = event.target.closest(".ik-key, .kp-key");
+        var btn = event.target.closest(".shortcut-key");
         if (!btn) return;
         var key = btn.getAttribute("data-key");
         if (!key) return;
@@ -3454,7 +4296,6 @@
           return;
         }
         if (key === "ctrl_enter") {
-          // Ctrl+Enter for confirm/approve in terminal
           var sequence = buildPtySequence("enter", { ctrl: true, alt: false, shift: false });
           if (sequence) sendTerminalSequence(sequence);
           return;
@@ -3466,10 +4307,10 @@
       }
 
       function updateKeyboardPopupUI() {
-        var popup = document.getElementById("keyboard-popup");
-        if (!popup) return;
+        var container = document.querySelector(".inline-shortcuts-wrap");
+        if (!container) return;
         ["ctrl", "alt"].forEach(function(name) {
-          var btn = popup.querySelector('[data-key="' + name + '"]');
+          var btn = container.querySelector('[data-key="' + name + '"]');
           if (btn) btn.classList.toggle("active", !!state.modifiers[name]);
         });
       }
@@ -3573,17 +4414,60 @@
       function flushPendingMessages() {
         if (state.pendingMessages.length === 0) return;
 
-        // Send queued messages in order
+        // Send queued messages in order, bypassing the session-running check
+        // since our local state may be stale right after reconnect
         var queue = state.pendingMessages.slice();
         state.pendingMessages = [];
 
+        var sendPromise = Promise.resolve();
         queue.forEach(function(input) {
-          postInput(input).catch(function() {
-            // Ignore errors during flush
+          sendPromise = sendPromise.then(function() {
+            return sendInputDirect(input).catch(function() {
+              // Ignore errors during flush
+            });
           });
         });
       }
 
+      function sendInputDirect(input) {
+        if (!input || !state.selectedId) return Promise.resolve();
+        return fetch("/api/sessions/" + state.selectedId + "/input", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({ input: input, view: state.currentView })
+        })
+        .then(function(res) {
+          if (!res.ok) {
+            return res.json().catch(function() { return { error: "请求失败" }; }).then(function(payload) {
+              var error = buildInputError(payload);
+              error.httpStatus = res.status;
+              // Don't re-queue on session-unavailable — the session will auto-resume
+              // on the user's next message, and stale queue items would cause duplicates
+              if (isSessionUnavailableError(error)) {
+                console.log("[wand] sendInputDirect: session unavailable, dropping", {
+                  sessionId: state.selectedId,
+                  errorCode: error.errorCode
+                });
+                return null;
+              }
+              throw error;
+            });
+          }
+          return res.json();
+        })
+        .then(function(snapshot) {
+          if (snapshot && snapshot.id) {
+            updateSessionSnapshot(snapshot);
+            if (snapshot.messages && snapshot.messages.length > 0) {
+              state.currentMessages = snapshot.messages;
+            }
+            renderChat(true);
+          }
+          return snapshot;
+        });
+      }
+
       function stopSession() {
         if (!state.selectedId) return;
         fetch("/api/sessions/" + state.selectedId + "/stop", { method: "POST", credentials: "same-origin" })
@@ -3591,28 +4475,112 @@
       }
 
       function deleteSession(id) {
-        // 二次确认
-        if (!confirm("确定要删除这个会话吗？此操作无法撤销。")) {
+        var item = document.querySelector('.session-item[data-session-id="' + id + '"]');
+        if (item) {
+          item.classList.add("deleting");
+        }
+        setTimeout(function() {
+          fetch("/api/sessions/" + id, { method: "DELETE", credentials: "same-origin" })
+            .then(function(res) { return res.json(); })
+            .then(function(data) {
+              if (data && data.error) {
+                throw new Error(data.error);
+              }
+              if (state.selectedId === id) {
+                state.selectedId = null;
+                persistSelectedId();
+              }
+              return refreshAll();
+            })
+            .catch(function() {
+              // Remove deleting state on error so item reappears
+              if (item) item.classList.remove("deleting");
+              var errorEl = document.getElementById("action-error");
+              showError(errorEl, "无法删除会话。");
+            });
+        }, 250);
+      }
+
+      function executeDeleteHistory(claudeSessionId, item) {
+        if (item) {
+          item.classList.add("deleting");
+        }
+        setTimeout(function() {
+          fetch("/api/claude-history/" + encodeURIComponent(claudeSessionId), { method: "DELETE", credentials: "same-origin" })
+            .then(function(res) { return res.json(); })
+            .then(function(data) {
+              if (data && data.error) {
+                throw new Error(data.error);
+              }
+              state.claudeHistory = state.claudeHistory.filter(function(s) {
+                return s.claudeSessionId !== claudeSessionId;
+              });
+              delete state.selectedClaudeHistoryIds[claudeSessionId];
+              updateSessionsList();
+            })
+            .catch(function() {
+              if (item) item.classList.remove("deleting");
+              var errorEl = document.getElementById("action-error");
+              showError(errorEl, "无法删除历史会话。");
+            });
+        }, 250);
+      }
+
+      function deleteClaudeHistorySession(claudeSessionId, item) {
+        executeDeleteHistory(claudeSessionId, item);
+      }
+
+      function deleteClaudeHistoryDirectory(cwd, btn, items) {
+        if (!cwd) {
           return;
         }
-        fetch("/api/sessions/" + id, { method: "DELETE", credentials: "same-origin" })
+        fetch("/api/claude-history?cwd=" + encodeURIComponent(cwd), { method: "DELETE", credentials: "same-origin" })
           .then(function(res) { return res.json(); })
           .then(function(data) {
             if (data && data.error) {
               throw new Error(data.error);
             }
-            if (state.selectedId === id) {
-              state.selectedId = null;
-              persistSelectedId();
-            }
-            return refreshAll();
+            state.claudeHistory = state.claudeHistory.filter(function(s) {
+              return s.cwd !== cwd;
+            });
+            updateSessionsList();
           })
           .catch(function() {
+            setDeletingState(items, false);
             var errorEl = document.getElementById("action-error");
-            showError(errorEl, "无法删除会话。");
+            showError(errorEl, "无法清理该目录的历史会话。");
           });
       }
 
+      function setDeletingState(items, deleting) {
+        items.forEach(function(item) {
+          item.classList.toggle("deleting", deleting);
+        });
+      }
+
+      function getHistoryItemsByCwd(cwd) {
+        return Array.prototype.slice.call(document.querySelectorAll('.claude-history-item[data-cwd="' + window.CSS.escape(String(cwd)) + '"]'));
+      }
+
+      // ── Swipe-to-delete gesture ──
+
+      var _swipeState = null;
+      var _swipedItem = null;
+
+      function closeSwipedItem() {
+        if (_swipedItem) {
+          _swipedItem.classList.remove("swiped");
+          var content = _swipedItem.querySelector(".session-item-content");
+          if (content) content.style.transform = "";
+          _swipedItem = null;
+        }
+      }
+
+      function initSwipeToDelete() {
+        _swipeState = null;
+        _swipedItem = null;
+      }
+
       function startCommand(command, cwd, errorEl) {
         if (command === "claude") {
           state.preferredCommand = command;
@@ -3641,6 +4609,224 @@
         });
       }
 
+      function resumeSession(sessionId, errorEl) {
+        if (!sessionId) return Promise.resolve(null);
+        return fetch("/api/sessions/" + encodeURIComponent(sessionId) + "/resume", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({
+            mode: state.chatMode || state.config.defaultMode || "default"
+          })
+        })
+        .then(function(res) { return res.json(); })
+        .then(function(data) {
+          if (data.error) {
+            if (errorEl) showError(errorEl, data.error);
+            else showToast(data.error, "error");
+            return null;
+          }
+          state.selectedId = data.id;
+          persistSelectedId();
+          state.drafts[data.id] = "";
+          return data;
+        })
+        .catch(function(error) {
+          var message = (error && error.message) || "无法恢复会话。";
+          if (errorEl) showError(errorEl, message);
+          else showToast(message, "error");
+          return null;
+        });
+      }
+
+      function resumeClaudeSessionById(claudeSessionId, errorEl) {
+        if (!claudeSessionId) return Promise.resolve(null);
+        return fetch("/api/claude-sessions/" + encodeURIComponent(claudeSessionId) + "/resume", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({
+            mode: state.chatMode || state.config.defaultMode || "default"
+          })
+        })
+        .then(function(res) { return res.json(); })
+        .then(function(data) {
+          if (data.error) {
+            if (errorEl) showError(errorEl, data.error);
+            else showToast(data.error, "error");
+            return null;
+          }
+          state.selectedId = data.id;
+          persistSelectedId();
+          state.drafts[data.id] = "";
+          return data;
+        })
+        .catch(function(error) {
+          var message = (error && error.message) || "无法按 Claude 会话 ID 恢复会话。";
+          if (errorEl) showError(errorEl, message);
+          else showToast(message, "error");
+          return null;
+        });
+      }
+
+      function activateSession(data) {
+        if (!data || !data.id) return Promise.resolve();
+        state.lastRenderedHash = 0;
+        state.lastRenderedMsgCount = 0;
+        state.lastRenderedEmpty = null;
+        switchToSessionView(data.id);
+        updateSessionSnapshot(data);
+        updateSessionsList();
+        if (state.ws && state.ws.readyState === WebSocket.OPEN) {
+          state.ws.send(JSON.stringify({ type: "subscribe", sessionId: data.id }));
+        }
+        return loadOutput(data.id).then(function() {
+          focusInputBox(true);
+        });
+      }
+
+      function resumeSessionFromList(sessionId) {
+        return resumeSession(sessionId).then(function(data) {
+          if (!data) return null;
+          return activateSession(data).then(function() {
+            return data;
+          });
+        });
+      }
+
+      function startAndActivateCommand(command, cwd, errorEl) {
+        return startCommand(command, cwd, errorEl).then(function(data) {
+          if (!data) return null;
+          return activateSession(data).then(function() {
+            return data;
+          });
+        });
+      }
+
+      function createSessionFromWelcomeInput(value) {
+        var welcomeInput = document.getElementById("welcome-input");
+        if (!welcomeInput) return;
+        welcomeInput.placeholder = "Claude 正在思考，请稍候...";
+        welcomeInput.disabled = true;
+        var mode = state.chatMode || "full-access";
+        var defaultCwd = state.workingDir || (state.config && state.config.defaultCwd ? state.config.defaultCwd : "");
+        var preferredTool = getPreferredTool();
+        fetch("/api/commands", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({
+            command: preferredTool,
+            cwd: defaultCwd,
+            mode: mode,
+            initialInput: value
+          })
+        })
+        .then(function(res) { return res.json(); })
+        .then(function(data) {
+          if (data.error) {
+            showToast(data.error, "error");
+            welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+            welcomeInput.disabled = false;
+            return null;
+          }
+          return activateSession(data);
+        })
+        .catch(function(error) {
+          showToast((error && error.message) || "无法启动会话。", "error");
+          welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+          welcomeInput.disabled = false;
+        })
+        .finally(function() {
+          welcomeInput.placeholder = "输入你的问题，按 Enter 发送...";
+          welcomeInput.disabled = false;
+        });
+      }
+
+      function createSessionFromInput(value, inputBox, welcomeInput) {
+        var mode = state.chatMode || "full-access";
+        var defaultCwd = state.workingDir || (state.config && state.config.defaultCwd ? state.config.defaultCwd : "");
+        var preferredTool = getPreferredTool();
+        fetch("/api/commands", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({
+            command: preferredTool,
+            cwd: defaultCwd,
+            mode: mode,
+            initialInput: value || undefined
+          })
+        })
+        .then(function(res) { return res.json(); })
+        .then(function(data) {
+          if (data.error) {
+            showToast(data.error, "error");
+            return null;
+          }
+          if (inputBox) inputBox.value = "";
+          if (welcomeInput) welcomeInput.value = "";
+          return activateSession(data);
+        })
+        .catch(function(error) {
+          showToast((error && error.message) || "无法启动会话。", "error");
+        });
+      }
+
+      function handleResumeAction(actionButton) {
+        actionButton.disabled = true;
+        resumeSessionFromList(actionButton.dataset.sessionId)
+          .finally(function() {
+            actionButton.disabled = false;
+          });
+      }
+
+      function handleResumeHistoryAction(actionButton) {
+        var claudeSessionId = actionButton.dataset.claudeSessionId;
+        var cwd = actionButton.dataset.cwd;
+        if (!claudeSessionId) return;
+        actionButton.disabled = true;
+        resumeClaudeHistorySession(claudeSessionId, cwd)
+          .then(function(data) {
+            if (data && data.id) {
+              state.selectedId = data.id;
+              persistSelectedId();
+              state.drafts[data.id] = "";
+              loadSessions().then(function() {
+                selectSession(data.id);
+                closeSessionsDrawer();
+              });
+            }
+          })
+          .finally(function() {
+            actionButton.disabled = false;
+          });
+      }
+
+      function resumeClaudeHistorySession(claudeSessionId, cwd) {
+        return fetch("/api/claude-sessions/" + encodeURIComponent(claudeSessionId) + "/resume", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({
+            mode: state.chatMode || (state.config && state.config.defaultMode) || "default",
+            cwd: cwd
+          })
+        })
+        .then(function(res) { return res.json(); })
+        .then(function(data) {
+          if (data.error) {
+            showToast(data.error, "error");
+            return null;
+          }
+          return data;
+        })
+        .catch(function(error) {
+          showToast((error && error.message) || "无法恢复历史会话。", "error");
+          return null;
+        });
+      }
+
       function isTouchDevice() {
         return "ontouchstart" in window || navigator.maxTouchPoints > 0;
       }
@@ -4483,23 +5669,26 @@
           e.preventDefault();
         });
 
-        document.addEventListener("mousemove", function(e) {
+        // Store document-level listeners so they can be removed in teardownTerminal
+        state.resizeMouseMove = function(e) {
           if (!isResizing) return;
           var deltaY = e.clientY - startY;
           var newHeight = Math.max(200, Math.min(startHeight + deltaY, window.innerHeight - 200));
           container.style.height = newHeight + "px";
           container.style.flex = "none";
           scheduleTerminalResize();
-        });
+        };
+        document.addEventListener("mousemove", state.resizeMouseMove);
 
-        document.addEventListener("mouseup", function() {
+        state.resizeMouseUp = function() {
           if (isResizing) {
             isResizing = false;
             document.body.style.cursor = "";
             document.body.style.userSelect = "";
             scheduleTerminalResize();
           }
-        });
+        };
+        document.addEventListener("mouseup", state.resizeMouseUp);
 
         // 触摸设备支持
         resizeHandle.addEventListener("touchstart", function(e) {
@@ -4509,7 +5698,7 @@
           e.preventDefault();
         }, { passive: false });
 
-        document.addEventListener("touchmove", function(e) {
+        state.resizeTouchMove = function(e) {
           if (!isResizing) return;
           var deltaY = e.touches[0].clientY - startY;
           var newHeight = Math.max(200, Math.min(startHeight + deltaY, window.innerHeight - 200));
@@ -4517,14 +5706,16 @@
           container.style.flex = "none";
           scheduleTerminalResize();
           e.preventDefault();
-        }, { passive: false });
+        };
+        document.addEventListener("touchmove", state.resizeTouchMove, { passive: false });
 
-        document.addEventListener("touchend", function() {
+        state.resizeTouchEnd = function() {
           if (isResizing) {
             isResizing = false;
             scheduleTerminalResize();
           }
-        });
+        };
+        document.addEventListener("touchend", state.resizeTouchEnd);
       }
 
       function observeTerminalResize() {
@@ -4532,15 +5723,19 @@
         if (!output) return;
 
         if (typeof ResizeObserver === "function") {
-          state.resizeObserver = new ResizeObserver(function() { scheduleTerminalResize(); });
+          state.resizeObserver = new ResizeObserver(function() { scheduleTerminalResize(true); });
           state.resizeObserver.observe(output);
         }
-        state.resizeHandler = scheduleTerminalResize;
+        state.resizeHandler = function() { scheduleTerminalResize(true); };
         window.addEventListener("resize", state.resizeHandler);
-        requestAnimationFrame(scheduleTerminalResize);
+        requestAnimationFrame(function() { scheduleTerminalResize(true); });
       }
 
       function teardownTerminal() {
+        if (state.resizeTimer) {
+          clearTimeout(state.resizeTimer);
+          state.resizeTimer = null;
+        }
         if (state.resizeObserver) {
           state.resizeObserver.disconnect();
           state.resizeObserver = null;
@@ -4549,24 +5744,61 @@
           window.removeEventListener("resize", state.resizeHandler);
           state.resizeHandler = null;
         }
+        [["mousemove", "resizeMouseMove"], ["mouseup", "resizeMouseUp"],
+         ["touchmove", "resizeTouchMove"], ["touchend", "resizeTouchEnd"]
+        ].forEach(function(pair) {
+          if (state[pair[1]]) {
+            document.removeEventListener(pair[0], state[pair[1]]);
+            state[pair[1]] = null;
+          }
+        });
+        clearTerminalScrollIdleTimer();
+        if (state.terminalViewportEl) {
+          if (state.terminalViewportScrollHandler) {
+            state.terminalViewportEl.removeEventListener("scroll", state.terminalViewportScrollHandler);
+          }
+          if (state.terminalViewportTouchHandler) {
+            state.terminalViewportEl.removeEventListener("touchmove", state.terminalViewportTouchHandler);
+          }
+        }
+        state.terminalViewportEl = null;
+        state.terminalViewportScrollHandler = null;
+        state.terminalViewportTouchHandler = null;
         if (state.terminal) {
           state.terminal.dispose();
           state.terminal = null;
         }
         state.fitAddon = null;
         state.terminalSessionId = null;
+        state.terminalOutput = "";
+        state.terminalViewportSize = { width: 0, height: 0 };
+        state.terminalAutoFollow = true;
+        state.showTerminalJumpToBottom = false;
+        updateTerminalJumpToBottomButton();
       }
 
-      function scheduleTerminalResize() {
-        if (state.resizeTimer) clearTimeout(state.resizeTimer);
-        state.resizeTimer = setTimeout(syncTerminalSize, 60);
+      function scheduleTerminalResize(immediate) {
+        if (state.resizeTimer) {
+          clearTimeout(state.resizeTimer);
+          state.resizeTimer = null;
+        }
+        var delay = immediate ? 0 : 100;
+        state.resizeTimer = setTimeout(function() {
+          state.resizeTimer = null;
+          requestAnimationFrame(syncTerminalSize);
+        }, delay);
       }
 
       function syncTerminalSize() {
         var output = document.getElementById("output");
         if (!state.terminal || !state.fitAddon || !output) return;
+        if (!shouldResizeTerminalViewport()) return;
 
+        var shouldFollow = state.terminalAutoFollow || isTerminalNearBottom();
         state.fitAddon.fit();
+        if (shouldFollow) {
+          maybeScrollTerminalToBottom("resize");
+        }
 
         var nextSize = {
           cols: state.terminal.cols,
@@ -4602,6 +5834,12 @@
       function initWebSocket() {
         if (!window.WebSocket) return false;
 
+        // Prevent duplicate connections
+        if (state.ws) {
+          try { state.ws.close(); } catch (e) { /* ignore */ }
+          state.ws = null;
+        }
+
         var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
         var wsUrl = protocol + '//' + window.location.host + '/ws';
 
@@ -4669,16 +5907,21 @@
 
             }
             // Real-time terminal output
-            if (msg.sessionId === state.selectedId && state.terminal && msg.data && msg.data.output) {
-              var newOutput = normalizeTerminalOutput(msg.data.output || "");
-              if (newOutput.startsWith(state.terminalOutput)) {
-                state.terminal.write(newOutput.slice(state.terminalOutput.length));
-              } else {
-                state.terminal.reset();
-                state.terminal.write(newOutput);
+            if (msg.sessionId === state.selectedId && state.terminal && msg.data) {
+              if (msg.data.chunk && (!state.terminalSessionId || state.terminalSessionId === msg.sessionId)) {
+                // Fast path: write chunk directly to avoid full-output comparison
+                // which can trigger terminal.reset() and cause screen flicker.
+                state.terminal.write(msg.data.chunk);
+                state.terminalSessionId = msg.sessionId;
+                if (msg.data.output) {
+                  state.terminalOutput = normalizeTerminalOutput(msg.data.output);
+                }
+                maybeScrollTerminalToBottom("output");
+                updateTerminalJumpToBottomButton();
+              } else if (Object.prototype.hasOwnProperty.call(msg.data, "output")) {
+                // Fallback: no chunk available, use full-output comparison
+                syncTerminalBuffer(msg.sessionId, msg.data.output || "", { mode: "append" });
               }
-              state.terminalOutput = newOutput;
-              state.terminal.scrollToBottom();
             }
             break;
           case 'started':
@@ -4727,8 +5970,7 @@
             // Initial state for subscribed session (after reconnect or subscription)
             if (msg.sessionId === state.selectedId && msg.data) {
               if (chatRenderTimer) { clearTimeout(chatRenderTimer); chatRenderTimer = null; }
-              updateTerminalOutput(msg.data.output || "");
-              scheduleTerminalResize();
+              updateTerminalOutput(msg.data.output || "", msg.sessionId, "replace");
             }
             break;
           case 'usage':
@@ -4741,31 +5983,59 @@
               updateTaskDisplay();
             }
             break;
+          case 'status':
+            if (msg.sessionId && msg.data) {
+              var statusUpdate = { id: msg.sessionId };
+              if (Object.prototype.hasOwnProperty.call(msg.data, 'permissionBlocked')) {
+                statusUpdate.permissionBlocked = !!msg.data.permissionBlocked;
+              }
+              if (msg.data.permissionRequest) {
+                statusUpdate.pendingEscalation = {
+                  scope: msg.data.permissionRequest.scope,
+                  target: msg.data.permissionRequest.target,
+                  reason: msg.data.permissionRequest.prompt
+                };
+              }
+              if (msg.data.permissionBlocked === false) {
+                statusUpdate.pendingEscalation = null;
+              }
+              updateSessionSnapshot(statusUpdate);
+              if (msg.sessionId === state.selectedId) {
+                updateTaskDisplay();
+              }
+            }
+            break;
         }
       }
 
       function updateTaskDisplay() {
         var taskEl = document.getElementById("current-task");
         var permissionActionsEl = document.getElementById("permission-actions");
+        var permissionLabel = document.getElementById("permission-actions-label");
         if (!taskEl) return;
         var selectedSession = state.sessions.find(function(s) { return s.id === state.selectedId; });
         var pendingEscalation = selectedSession && selectedSession.pendingEscalation ? selectedSession.pendingEscalation : null;
-        if (pendingEscalation) {
-          var reason = pendingEscalation.reason || "等待 Claude 权限授权";
-          var target = pendingEscalation.target ? " · " + pendingEscalation.target : "";
-          taskEl.textContent = reason + target;
-          taskEl.classList.remove("hidden");
-          taskEl.classList.add("permission-blocked");
+        var isBlocked = pendingEscalation || (selectedSession && selectedSession.permissionBlocked);
+
+        if (isBlocked) {
+          // Show permission label in input composer area
+          if (permissionLabel) {
+            if (pendingEscalation) {
+              var reason = pendingEscalation.reason || "等待授权";
+              var target = pendingEscalation.target ? " · " + pendingEscalation.target : "";
+              permissionLabel.textContent = reason + target;
+            } else {
+              permissionLabel.textContent = "等待授权";
+            }
+          }
           if (permissionActionsEl) permissionActionsEl.classList.remove("hidden");
-          return;
-        }
-        if (selectedSession && selectedSession.permissionBlocked) {
-          taskEl.textContent = "等待 Claude 权限授权";
+          // Also show in task bar
+          taskEl.textContent = pendingEscalation ? (pendingEscalation.reason || "等待 Claude 权限授权") : "等待 Claude 权限授权";
           taskEl.classList.remove("hidden");
           taskEl.classList.add("permission-blocked");
-          if (permissionActionsEl) permissionActionsEl.classList.remove("hidden");
           return;
         }
+
         taskEl.classList.remove("permission-blocked");
         if (permissionActionsEl) permissionActionsEl.classList.add("hidden");
         var task = state.currentTask;
@@ -4780,6 +6050,10 @@
 
       function approvePermission() {
         if (!state.selectedId) return;
+        var approveBtn = document.getElementById("approve-permission-btn");
+        var denyBtn = document.getElementById("deny-permission-btn");
+        if (approveBtn) approveBtn.disabled = true;
+        if (denyBtn) denyBtn.disabled = true;
         fetch("/api/sessions/" + encodeURIComponent(state.selectedId) + "/approve-permission", {
           method: "POST",
           credentials: "same-origin"
@@ -4795,11 +6069,19 @@
           })
           .catch(function(error) {
             showToast((error && error.message) || "无法批准授权。", "error");
+          })
+          .finally(function() {
+            if (approveBtn) approveBtn.disabled = false;
+            if (denyBtn) denyBtn.disabled = false;
           });
       }
 
       function denyPermission() {
         if (!state.selectedId) return;
+        var approveBtn = document.getElementById("approve-permission-btn");
+        var denyBtn = document.getElementById("deny-permission-btn");
+        if (approveBtn) approveBtn.disabled = true;
+        if (denyBtn) denyBtn.disabled = true;
         fetch("/api/sessions/" + encodeURIComponent(state.selectedId) + "/deny-permission", {
           method: "POST",
           credentials: "same-origin"
@@ -4815,20 +6097,16 @@
           })
           .catch(function(error) {
             showToast((error && error.message) || "无法拒绝授权。", "error");
+          })
+          .finally(function() {
+            if (approveBtn) approveBtn.disabled = false;
+            if (denyBtn) denyBtn.disabled = false;
           });
       }
 
-      function updateTerminalOutput(output) {
-        if (!state.terminal) return;
-        var normalized = normalizeTerminalOutput(output);
-        if (normalized.startsWith(state.terminalOutput)) {
-          state.terminal.write(normalized.slice(state.terminalOutput.length));
-        } else {
-          state.terminal.reset();
-          state.terminal.write(normalized);
-        }
-        state.terminalOutput = normalized;
-        state.terminal.scrollToBottom();
+      function updateTerminalOutput(output, sessionId, mode) {
+        if (!state.terminal) return false;
+        return syncTerminalBuffer(sessionId || state.selectedId, output, { mode: mode || "append" });
       }
 
       function stopPolling() {
@@ -4846,8 +6124,10 @@
         }
         applyCurrentView();
         reconcileInteractiveState();
+        updateTerminalJumpToBottomButton();
         if (state.currentView === "terminal") {
-          setTimeout(scheduleTerminalResize, 40);
+          state.terminalViewportSize = { width: 0, height: 0 };
+          scheduleTerminalResize(true);
         }
       }
 
@@ -6486,20 +7766,9 @@
       }
 
       function normalizeTerminalOutput(value) {
-        var text = String(value || "");
-        var normalized = "";
-        for (var i = 0; i < text.length; i += 1) {
-          var char = text.charAt(i);
-          if (char === String.fromCharCode(10)) {
-            if (i === 0 || text.charAt(i - 1) !== String.fromCharCode(13)) {
-              normalized += String.fromCharCode(13);
-            }
-            normalized += char;
-            continue;
-          }
-          normalized += char;
-        }
-        return normalized;
+        return String(value || "")
+          .replace(/\r\r\n/g, "\r\n")
+          .replace(/\u0000/g, "");
       }
 
       function showError(el, msg) {