@co0ontty/wand 0.2.1 → 0.3.0

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

@@ -1,8 +1,24 @@
     // Register Service Worker for PWA
+    // For self-signed certificates, we need to handle certificate errors gracefully
     if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/sw.js').catch(function(e) {
-        console.log('SW registration failed:', e);
-      });
+      // First, try to fetch the service worker script with a custom handler for certificate errors
+      fetch('/sw.js', { cache: 'no-cache' })
+        .then(function(response) {
+          if (response.ok) {
+            return navigator.serviceWorker.register('/sw.js');
+          }
+          // If fetch fails (e.g., certificate error), skip service worker registration
+          console.log('SW fetch failed, skipping service worker registration');
+          return Promise.reject('Service worker script not available');
+        })
+        .catch(function(e) {
+          // Distinguish between certificate errors and other failures
+          if (e.name === 'TypeError' || e.message.includes('certificate')) {
+            console.log('SW registration skipped: likely self-signed certificate issue');
+          } else {
+            console.log('SW registration failed:', e.message || e);
+          }
+        });
     }
 
     (function() {
@@ -30,10 +46,9 @@
         isSyncingInputBox: false,
         loginPending: false,
         loginChecked: false,
-        sessionsDrawerOpen: true,
+        sessionsDrawerOpen: false,
         modalOpen: false,
         presetValue: "",
-        commandValue: "",
         cwdValue: "",
         modeValue: "full-access",
         chatMode: "full-access",
@@ -45,7 +60,17 @@
         showInstallPrompt: false,
         ws: null,
         wsConnected: false,
-        currentView: "chat",
+        currentView: "terminal",
+        terminalScale: (function() {
+          try {
+            var saved = localStorage.getItem("wand-terminal-scale");
+            return saved ? parseFloat(saved) : 1;
+          } catch (e) {
+            return 1;
+          }
+        })(),
+        terminalBaseFontSize: 13,
+        keyboardPopupOpen: false,
         filePanelOpen: (function() {
           try {
             return localStorage.getItem("wand-file-panel-open") === "true";
@@ -58,6 +83,10 @@
         lastRenderedMsgCount: 0,
         lastRenderedEmpty: null,
         renderPending: false,
+        currentTask: null, // Current task title from Claude
+        terminalInteractive: false,
+        miniKeyboardVisible: false,
+        modifiers: { ctrl: false, alt: false, shift: false },
         fileSearchQuery: "",
         allFiles: [],
         // Load last used working directory from localStorage
@@ -116,34 +145,14 @@
       }
 
       function updateInstallPrompt() {
-        var prompt = document.getElementById('pwa-install-prompt');
-        if (state.showInstallPrompt && state.deferredPrompt && !prompt) {
-          var el = document.createElement('div');
-          el.id = 'pwa-install-prompt';
-          el.className = 'pwa-install-prompt';
-          el.innerHTML =
-            '<div class="prompt-icon">W</div>' +
-            '<div class="prompt-content">' +
-              '<div class="prompt-title">Install Wand</div>' +
-              '<div class="prompt-desc">Add to home screen for quick access</div>' +
-            '</div>' +
-            '<div class="prompt-actions">' +
-              '<button id="pwa-install-dismiss" class="btn btn-ghost btn-sm">Later</button>' +
-              '<button id="pwa-install-accept" class="btn btn-primary btn-sm">Install</button>' +
-            '</div>';
-          document.body.appendChild(el);
-          document.getElementById('pwa-install-dismiss').addEventListener('click', function() {
-            el.remove();
-            state.showInstallPrompt = false;
-          });
-          document.getElementById('pwa-install-accept').addEventListener('click', function() {
-            state.deferredPrompt.prompt();
-            state.deferredPrompt.userChoice.then(function(result) {
-              state.deferredPrompt = null;
-              state.showInstallPrompt = false;
-              el.remove();
-            });
-          });
+        // 显示或隐藏菜单栏中的安装按钮
+        var installBtn = document.getElementById('pwa-install-button');
+        if (installBtn) {
+          if (state.showInstallPrompt && state.deferredPrompt) {
+            installBtn.classList.remove('hidden');
+          } else {
+            installBtn.classList.add('hidden');
+          }
         }
       }
 
@@ -205,21 +214,59 @@
           var modal = document.getElementById("session-modal");
           if (modal) {
             modal.classList.remove("hidden");
-            var commandEl = document.getElementById("command");
             var cwdEl = document.getElementById("cwd");
-            var modeEl = document.getElementById("mode");
-            if (commandEl) commandEl.value = state.commandValue;
             if (cwdEl) cwdEl.value = state.cwdValue;
-            if (modeEl) modeEl.value = state.modeValue;
             syncSessionModalUI();
           }
         }
       }
 
+      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>' +
+          '</div>';
+      }
+
+      function renderMiniKeyboard() {
+        // Mini keyboard is now inline, rendered in input-composer-right
+        return "";
+      }
+
       function renderLogin() {
         if (!state.loginChecked) {
           return '<div class="login-container">' +
-            '<div class="login-card">' +
+            '<div class="login-card login-card-loading">' +
               '<div class="login-header">' +
                 '<div class="login-logo">' +
                   '<div class="login-logo-icon">W</div>' +
@@ -228,7 +275,13 @@
                 '<div class="login-subtitle">正在恢复登录状态</div>' +
               '</div>' +
               '<div class="login-body">' +
-                '<p class="login-hint">正在检查本地登录会话，请稍候。</p>' +
+                '<div class="login-status">' +
+                  '<span class="login-spinner" aria-hidden="true"></span>' +
+                  '<div>' +
+                    '<p class="login-hint">正在检查本地登录会话，请稍候。</p>' +
+                    '<p class="login-muted">如果你刚刷新页面，这是正常现象。</p>' +
+                  '</div>' +
+                '</div>' +
               '</div>' +
             '</div>' +
           '</div>';
@@ -243,15 +296,18 @@
               '<div class="login-subtitle">在浏览器中运行本机终端</div>' +
             '</div>' +
             '<div class="login-body">' +
-              '<p class="login-hint">请输入访问密码</p>' +
-              '<p class="login-tip">访问地址请使用 <strong>http://</strong>，不要用 https://。</p>' +
+              '<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>' +
-                '<input id="password" type="password" class="field-input" placeholder="输入密码" autocomplete="current-password" data-error="false" />' +
-                '<p class="hint">密码至少需要 6 个字符</p>' +
+                '<div class="password-field">' +
+                  '<input id="password" type="password" class="field-input password-input" placeholder="输入访问密码" autocomplete="current-password" data-error="false" aria-describedby="password-hint login-error" aria-invalid="false" />' +
+                  '<button id="toggle-password-button" type="button" class="password-toggle" aria-label="显示密码" aria-pressed="false">显示</button>' +
+                '</div>' +
+                '<p id="password-hint" class="hint">使用你在 Wand 中设置的访问密码。</p>' +
+                '<p id="login-error" class="error-message hidden" role="alert"></p>' +
               '</div>' +
               '<button id="login-button" class="btn btn-primary btn-block">进入控制台</button>' +
-              '<p id="login-error" class="error-message hidden"></p>' +
             '</div>' +
           '</div>' +
         '</div>';
@@ -275,26 +331,30 @@
                   '<span></span><span></span><span></span>' +
                 '</span>' +
               '</button>' +
-            '</div>' +
-            '<div class="logo-wrap">' +
-              '<div class="logo">' +
-                '<div class="logo-icon">W</div>' +
-                '<span class="logo-text">Wand</span>' +
+              '<div class="topbar-logo">' +
+                '<div class="topbar-logo-icon">W</div>' +
               '</div>' +
             '</div>' +
             '<div class="topbar-center">' +
-              '<div class="session-summary">' +
-                '<span class="session-summary-value">' + escapeHtml(terminalTitle) + '</span>' +
+              '<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="logout-button" class="topbar-logout-btn" title="退出登录">' +
-                '<svg 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 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>' +
@@ -319,21 +379,9 @@
               '</div>' +
             '</aside>' +
             '<main class="main-content">' +
-              '<div class="terminal-header">' +
-                '<div class="terminal-title">' +
-                  '<span class="terminal-title-text" id="terminal-title">' + (selectedSession ? shortCommand(selectedSession.command) : "Wand") + '</span>' +
-                  '<span class="terminal-info" id="terminal-info">' + (selectedSession ? (getModeLabel(selectedSession.mode) + " | " + selectedSession.status) : "开始对话") + '</span>' +
-                '</div>' +
-                '<div class="terminal-header-actions">' +
-                  '<div class="view-toggle" aria-label="视图切换">' +
-                    '<button id="view-terminal-btn" class="view-toggle-btn' + (state.currentView === "terminal" ? " active" : "") + '" type="button">终端</button>' +
-                    '<button id="view-chat-btn" class="view-toggle-btn' + (state.currentView === "chat" ? " active" : "") + '" type="button">对话</button>' +
-                  '</div>' +
-                  '<div class="file-panel-toggle" aria-label="文件浏览器">' +
-                    '<button id="file-panel-toggle-btn" class="view-toggle-btn' + (state.filePanelOpen ? " active" : "") + '" type="button" title="文件浏览器">📁</button>' +
-                  '</div>' +
-                '</div>' +
-              '</div>' +
+              '<div class="topbar-spacer"></div>' +
+              // File panel backdrop (mobile)
+              '<div id="file-panel-backdrop" class="file-panel-backdrop' + (state.filePanelOpen ? " open" : "") + '"></div>' +
               // File side panel
               '<div id="file-side-panel" class="file-side-panel' + (state.filePanelOpen ? " open" : "") + '">' +
                 '<div class="file-side-panel-header">' +
@@ -352,30 +400,30 @@
                   '<div class="file-explorer" id="file-explorer">' + renderFileExplorer(selectedSession && selectedSession.cwd ? selectedSession.cwd : (state.config && state.config.defaultCwd ? state.config.defaultCwd : "")) + '</div>' +
                 '</div>' +
               '</div>' +
-              // Blank chat state (when no session)
+              '<div id="output" class="terminal-container' + (state.selectedId ? "" : " hidden") + ' active">' +
+                '<div class="terminal-scale-overlay" aria-label="终端缩放控件">' +
+                  '<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>' +
+                '</div>' +
+              '</div>' +
+              '<div id="chat-output" class="chat-container hidden"></div>' +
               '<div id="blank-chat" class="blank-chat' + (state.selectedId ? " hidden" : "") + '">' +
                 '<div class="blank-chat-inner">' +
                   '<div class="blank-chat-logo">W</div>' +
                   '<h2 class="blank-chat-title">Wand</h2>' +
-                  '<p class="blank-chat-subtitle">你的本地 AI 编程助手</p>' +
-                  '<div class="blank-chat-input-wrap">' +
-                    '<input type="text" id="welcome-input" class="blank-chat-input" ' +
-                      'placeholder="输入你的问题，按 Enter 发送..." autocomplete="off" spellcheck="false" />' +
-                    '<button id="welcome-send-btn" class="blank-chat-send-btn" type="button">发送</button>' +
-                  '</div>' +
+                  '<p class="blank-chat-subtitle">当前仅保留原生终端模式，优先修复 PTY 交互与显示。</p>' +
                   '<div class="blank-chat-tools">' +
                     '<button class="blank-chat-tool-btn" id="welcome-tool-claude" type="button">' +
-                      '<span class="tool-icon">🤖</span>Claude' +
+                      '<span class="tool-icon">🤖</span>新建终端会话' +
                     '</button>' +
                     '<button class="blank-chat-tool-btn" id="welcome-tool-folder" type="button" title="选择工作目录">' +
                       '<span class="tool-icon">📎</span>目录' +
                     '</button>' +
                   '</div>' +
-                  '<p class="blank-chat-hint">按 Enter 发送消息，或点击上方按钮快速开始</p>' +
                 '</div>' +
               '</div>' +
-              '<div id="output" class="terminal-container' + (state.selectedId ? "" : " hidden") + (state.selectedId && state.currentView === "terminal" ? " active" : "") + '"></div>' +
-              '<div id="chat-output" class="chat-container' + (state.selectedId ? "" : " hidden") + (state.selectedId && state.currentView === "chat" ? " active" : "") + '"></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">' +
@@ -392,7 +440,7 @@
                   '</div>' +
                 '</div>' +
                 '<div class="input-composer">' +
-                  '<textarea id="input-box" class="input-textarea" placeholder="输入消息..." rows="1">' + escapeHtml(currentDraft) + '</textarea>' +
+                  '<textarea id="input-box" class="input-textarea" placeholder="' + (state.terminalInteractive ? "终端交互模式开启中，请直接在终端中输入" : "输入消息...") + '" rows="1">' + escapeHtml(currentDraft) + '</textarea>' +
                   '<div class="input-composer-bar">' +
                     '<div class="input-composer-left">' +
                       '<select id="chat-mode-select" class="chat-mode-select" title="仅对新建会话生效">' +
@@ -401,7 +449,8 @@
                     '</div>' +
                     '<div class="input-composer-right">' +
                       '<span id="queue-counter" class="queue-counter hidden">队列: 0</span>' +
-                      '<span class="input-hint">Enter 发送 · Shift+Enter 换行</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>' +
                       '</button>' +
@@ -410,9 +459,16 @@
                       '</button>' +
                     '</div>' +
                   '</div>' +
-                '</div>' +
-                '<div id="token-usage-display" class="token-usage-display hidden">' +
-                  '<span id="token-usage-text"></span>' +
+                  // Session info bar at bottom
+                  '<div class="input-session-info-bar">' +
+                    '<span id="session-cwd-display" class="session-cwd-display">' + (selectedSession && selectedSession.cwd ? escapeHtml(selectedSession.cwd) : '未设置目录') + '</span>' +
+                    '<span class="session-info-separator">|</span>' +
+                    '<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>' +
+                    '<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>' +
                 '</div>' +
                 '<p id="action-error" class="error-message hidden"></p>' +
               '</div>' +
@@ -490,32 +546,52 @@
         '</section>';
       }
 
-      function toggleFilePanel() {
-        state.filePanelOpen = !state.filePanelOpen;
+      function isMobileLayout() {
+        return window.innerWidth <= 768;
+      }
+
+      function setFilePanelOpen(nextOpen) {
+        state.filePanelOpen = nextOpen;
         try {
           localStorage.setItem("wand-file-panel-open", String(state.filePanelOpen));
         } catch (e) {}
-        updateFilePanelState();
+        if (state.filePanelOpen && isMobileLayout()) {
+          state.sessionsDrawerOpen = false;
+        }
+        updateLayoutState();
         if (state.filePanelOpen) {
           refreshFileExplorer();
         }
       }
 
+      function toggleFilePanel() {
+        setFilePanelOpen(!state.filePanelOpen);
+      }
+
       function updateFilePanelState() {
         var panel = document.getElementById("file-side-panel");
         var mainContent = document.querySelector(".main-content");
         var toggleBtn = document.getElementById("file-panel-toggle-btn");
+        var backdrop = document.getElementById("file-panel-backdrop");
         if (panel) {
           panel.classList.toggle("open", state.filePanelOpen);
         }
         if (mainContent) {
           mainContent.classList.toggle("file-panel-open", state.filePanelOpen);
         }
+        if (backdrop) {
+          backdrop.classList.toggle("open", state.filePanelOpen);
+        }
         if (toggleBtn) {
           toggleBtn.classList.toggle("active", state.filePanelOpen);
         }
       }
 
+      function updateLayoutState() {
+        updateDrawerState();
+        updateFilePanelState();
+      }
+
       function updateFilePanelCwd(session) {
         var cwdEl = document.getElementById("file-explorer-cwd");
         if (!cwdEl) return;
@@ -525,11 +601,36 @@
 
       function closeFilePanel() {
         if (!state.filePanelOpen) return;
-        state.filePanelOpen = false;
+        setFilePanelOpen(false);
+      }
+
+      function adjustTerminalScale(delta) {
+        var newScale = state.terminalScale + delta;
+        // Clamp scale between 0.5 and 2
+        newScale = Math.max(0.5, Math.min(2, newScale));
+        // Round to nearest 0.25
+        newScale = Math.round(newScale * 4) / 4;
+        if (newScale === state.terminalScale) return;
+        state.terminalScale = newScale;
         try {
-          localStorage.setItem("wand-file-panel-open", "false");
+          localStorage.setItem("wand-terminal-scale", String(newScale));
         } catch (e) {}
-        updateFilePanelState();
+        applyTerminalScale();
+        updateScaleLabel();
+        scheduleTerminalResize();
+      }
+
+      function applyTerminalScale() {
+        if (!state.terminal) return;
+        state.terminal.options.fontSize = state.terminalBaseFontSize * state.terminalScale;
+        state.terminal.refresh(0, state.terminal.rows - 1);
+      }
+
+      function updateScaleLabel() {
+        var label = document.getElementById("terminal-scale-label-top");
+        if (label) {
+          label.textContent = Math.round(state.terminalScale * 100) + "%";
+        }
       }
 
       function renderFileExplorer(cwd) {
@@ -656,6 +757,11 @@
             toggleTreeNode(item);
           });
         });
+        tree.querySelectorAll(".tree-item[data-type='file']").forEach(function(item) {
+          item.addEventListener("dblclick", function() {
+            openFilePreview(item.dataset.path);
+          });
+        });
       }
 
       function toggleTreeNode(item) {
@@ -690,6 +796,205 @@
           .catch(function() {});
       }
 
+      function openFilePreview(filePath) {
+        var overlay = document.createElement("div");
+        overlay.className = "file-preview-overlay";
+        overlay.innerHTML =
+          '<div class="file-preview-modal">' +
+            '<div class="file-preview-header">' +
+              '<div class="file-preview-title">' +
+                '<span>📄</span>' +
+                '<span class="file-preview-filename">Loading...</span>' +
+              '</div>' +
+              '<div class="file-preview-path" title="' + escapeHtml(filePath) + '">' + escapeHtml(filePath) + '</div>' +
+              '<button class="file-preview-close" title="Close">✕</button>' +
+            '</div>' +
+            '<div class="file-preview-body">' +
+              '<div class="file-preview-loading">Loading preview...</div>' +
+            '</div>' +
+          '</div>';
+        document.body.appendChild(overlay);
+
+        var closeBtn = overlay.querySelector(".file-preview-close");
+        var closeModal = function() {
+          overlay.remove();
+          document.removeEventListener("keydown", escHandler);
+        };
+        closeBtn.addEventListener("click", closeModal);
+        overlay.addEventListener("click", function(e) {
+          if (e.target === overlay) closeModal();
+        });
+        var escHandler = function(e) {
+          if (e.key === "Escape") closeModal();
+        };
+        document.addEventListener("keydown", escHandler);
+
+        fetch("/api/file-preview?path=" + encodeURIComponent(filePath), { credentials: "same-origin" })
+          .then(function(res) { return res.json(); })
+          .then(function(data) {
+            if (data.error) {
+              var body = overlay.querySelector(".file-preview-body");
+              body.innerHTML = '<div class="file-preview-error"><span class="preview-error-icon">⚠</span><span>' + escapeHtml(data.error) + '</span></div>';
+              return;
+            }
+            renderPreviewContent(overlay, data);
+          })
+          .catch(function(err) {
+            var body = overlay.querySelector(".file-preview-body");
+            body.innerHTML = '<div class="file-preview-error"><span class="preview-error-icon">⚠</span><span>Failed to load preview</span></div>';
+          });
+      }
+
+      function renderPreviewContent(overlay, data) {
+        var filename = overlay.querySelector(".file-preview-filename");
+        filename.textContent = data.name;
+
+        var langBadge = document.createElement("span");
+        langBadge.className = "file-preview-lang";
+        langBadge.textContent = data.lang || data.ext.replace(".", "");
+        overlay.querySelector(".file-preview-title").appendChild(langBadge);
+
+        var body = overlay.querySelector(".file-preview-body");
+
+        if (data.lang === "markdown") {
+          body.innerHTML = '<div class="markdown-preview">' + renderMarkdownPreview(data.content) + '</div>';
+        } else {
+          var highlighted = highlightCodePreview(data.content, data.lang);
+          var lines = highlighted.split("\n");
+          var lineNums = lines.map(function(_, i) { return i + 1; });
+
+          body.innerHTML =
+            '<div class="code-preview-wrapper">' +
+              '<div class="code-preview-lines">' + lineNums.join("\n") + '</div>' +
+              '<div class="code-preview-content"><pre>' + lines.join("\n") + '</pre></div>' +
+            '</div>';
+        }
+      }
+
+      function highlightCodePreview(code, lang) {
+        // Escape HTML first
+        var escaped = code
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;");
+
+        // Simple token-based syntax highlighting
+        var tokens = getSyntaxTokens();
+        if (!tokens) return escaped;
+
+        // Order matters: longer patterns first, then by priority
+        var patterns = [];
+        for (var category in tokens) {
+          var t = tokens[category];
+          if (t && t.pattern) {
+            patterns.push({ pattern: t.pattern, cls: t.cls, priority: t.priority || 5 });
+          }
+        }
+        patterns.sort(function(a, b) { return b.priority - a.priority; });
+
+        // Build regex for all patterns
+        var allPatterns = patterns.map(function(p) { return "(" + p.pattern.source + ")"; });
+        var regex = new RegExp(allPatterns.join("|"), "gm");
+
+        return escaped.replace(regex, function(match) {
+          for (var i = 0; i < patterns.length; i++) {
+            var p = patterns[i];
+            var re = new RegExp("^" + p.pattern.source + "$", "gm");
+            if (re.test(match)) {
+              return '<span class="' + p.cls + '">' + match + '</span>';
+            }
+          }
+          return match;
+        });
+      }
+
+      function getSyntaxTokens() {
+        return {
+          comment: { pattern: /\/\/.*|#[^\n]*/y, cls: "syntax-comment", priority: 1 },
+          string: { pattern: /"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`/y, cls: "syntax-string", priority: 2 },
+          keyword: { pattern: /\b(?:async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|namespace|new|null|of|override|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|undefined|var|void|while|yield|abstract|as|base|bool|byte|char|decimal|double|event|explicit|extern|false|fixed|float|foreach|goto|implicit|in|int|internal|is|lock|long|object|operator|out|params|partial|readonly|ref|sbyte|sealed|short|sizeof|stackalloc|string|struct|switch|throw|true|try|uint|ulong|unchecked|unsafe|ushort|using|virtual|volatile|where|while|with|yield|def|elif|else|except|exec|finally|for|from|global|if|import|lambda|nonlocal|not|or|pass|print|raise|return|try|while|with|yield|True|False|None|and|in|is|lambda|not|or|fn|pub|use|mod|impl|trait|struct|enum|match|loop|while|for|if|else|return|self|super|crate|where|async|await|move|ref|mut|static|const|unsafe|extern|use|as|impl|struct|enum|type|fn|let|loop|if|else|match|return|self|Self|mod|pub|crate|macro|derive|where|async|await|dyn|self|package|func|go|return|defer|go|if|else|switch|case|default|for|range|select|break|continue|fallthrough|const|struct|enum|type|interface|map|chan|var|nil|true|false|iota|len|cap|append|make|new|panic|recover|select|else|if|elif|end|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while|end|and|begin|do|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/y, cls: "syntax-keyword", priority: 3 },
+          number: { pattern: /\b(?:0x[\da-fA-F]+|0b[01]+|0o[0-7]+|\d+\.?\d*(?:e[+-]?\d+)?)\b/y, cls: "syntax-number", priority: 2 },
+          function: { pattern: /\b[A-Z][a-zA-Z0-9]*[a-z]\w*(?=\s*\()/y, cls: "syntax-function", priority: 4 },
+          type: { pattern: /\b(?:string|number|boolean|void|any|unknown|never|object|symbol|bigint|Array|Object|String|Number|Boolean|Map|Set|WeakMap|WeakSet|Promise|Error|Type|Interface|Enum|Class|Struct|Impl|Trait|fn|fnc|func|function|def|proc|fun|pub|static|const|let|var|int|float|double|bool|char|byte|string|u8|u16|u32|u64|i8|i16|i32|i64|f32|f64|usize|isize|str|Vec|HashMap|Option|Result|Box|Rc|Arc|Cell|RefCell)\b/y, cls: "syntax-type", priority: 4 },
+          operator: { pattern: /[+\-*/%=<>!&|^~?:]+|\.\.\.?/y, cls: "syntax-operator", priority: 5 },
+          punctuation: { pattern: /[{}[\]();,\.]/y, cls: "syntax-punctuation", priority: 6 }
+        };
+      }
+
+      function renderMarkdownPreview(text) {
+        if (!text) return "";
+        var escaped = escapeHtml(text);
+
+        // Code blocks with syntax highlighting
+        escaped = escaped.replace(/```(\w*)\n([\s\S]*?)```/g, function(_, lang, code) {
+          var highlighted = highlightCodePreview(code.trim(), lang);
+          return '<pre><code class="language-' + lang + '">' + highlighted + '</code></pre>';
+        });
+
+        // Inline code
+        escaped = escaped.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+        // Headers
+        escaped = escaped.replace(/^######\s+(.*)$/gm, '<h6>$1</h6>');
+        escaped = escaped.replace(/^#####\s+(.*)$/gm, '<h5>$1</h5>');
+        escaped = escaped.replace(/^####\s+(.*)$/gm, '<h4>$1</h4>');
+        escaped = escaped.replace(/^###\s+(.*)$/gm, '<h3>$1</h3>');
+        escaped = escaped.replace(/^##\s+(.*)$/gm, '<h2>$1</h2>');
+        escaped = escaped.replace(/^#\s+(.*)$/gm, '<h1>$1</h1>');
+
+        // Bold and italic
+        escaped = escaped.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+        escaped = escaped.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+        escaped = escaped.replace(/\*(.+?)\*/g, '<em>$1</em>');
+        escaped = escaped.replace(/___(.+?)___/g, '<strong><em>$1</em></strong>');
+        escaped = escaped.replace(/__(.+?)__/g, '<strong>$1</strong>');
+        escaped = escaped.replace(/_(.+?)_/g, '<em>$1</em>');
+
+        // Strikethrough
+        escaped = escaped.replace(/~~(.+?)~~/g, '<del>$1</del>');
+
+        // Links
+        escaped = escaped.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+        // Images
+        escaped = escaped.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
+
+        // Blockquote
+        escaped = escaped.replace(/^&gt;\s+(.*)$/gm, '<blockquote>$1</blockquote>');
+
+        // Horizontal rule
+        escaped = escaped.replace(/^---+$/gm, '<hr>');
+        escaped = escaped.replace(/^\*\*\*+$/gm, '<hr>');
+
+        // Unordered lists
+        escaped = escaped.replace(/^[\-\*]\s+(.*)$/gm, '<li>$1</li>');
+        escaped = escaped.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
+
+        // Ordered lists
+        escaped = escaped.replace(/^\d+\.\s+(.*)$/gm, '<li>$1</li>');
+
+        // Tables
+        escaped = escaped.replace(/\|(.+)\|/g, function(match) {
+          var cells = match.split("|").slice(1, -1);
+          if (cells.every(function(c) { return /^[\-:]+$/.test(c.trim()); })) {
+            return "";
+          }
+          return '<tr>' + cells.map(function(c) { return '<td>' + c.trim() + '</td>'; }).join("") + '</tr>';
+        });
+        escaped = escaped.replace(/(<tr>.*<\/tr>\n?)+/g, '<table>$&</table>');
+
+        // Paragraphs
+        var paragraphs = escaped.split(/\n{2,}/);
+        escaped = paragraphs.map(function(p) {
+          p = p.trim();
+          if (!p) return "";
+          if (/^<(h[1-6]|ul|ol|li|blockquote|pre|table|hr|div)/.test(p)) return p;
+          return '<p>' + p.replace(/\n/g, "<br>") + '</p>';
+        }).join("\n");
+
+        return escaped;
+      }
+
       function renderFolderPicker(state) {
         var currentDir = state.workingDir || (state.config && state.config.defaultCwd ? state.config.defaultCwd : "/tmp");
 
@@ -738,9 +1043,24 @@
         '</div>';
       }
 
+      function getSessionStatusLabel(session) {
+        if (!session) return "";
+        if (session.archived) return "已归档";
+        if (session.permissionBlocked) return "等待授权";
+        return session.status;
+      }
+
+      function getSessionStatusClass(session) {
+        if (!session) return "";
+        if (session.archived) return "archived";
+        if (session.permissionBlocked) return "permission-blocked";
+        return session.status || "";
+      }
+
       function renderSessionItem(session) {
         var activeClass = session.id === state.selectedId ? " active" : "";
-        var metaStatus = session.archived ? "已归档" : session.status;
+        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 = "";
@@ -761,7 +1081,7 @@
               '<div class="session-command">' + escapeHtml(session.command) + '</div>' +
               '<div class="session-meta">' +
                 '<span>' + escapeHtml(modeName) + '</span>' +
-                '<span class="session-status ' + metaStatus + '">' + escapeHtml(metaStatus) + '</span>' +
+                '<span class="session-status ' + metaStatusClass + '">' + escapeHtml(metaStatus) + '</span>' +
                 sessionIdDisplay +
               '</div>' +
             '</div>' +
@@ -770,45 +1090,50 @@
         '</div>';
       }
 
+      function renderModeCards(selectedMode) {
+        var modes = [
+          { id: "default",     label: "标准",     desc: "逐步确认操作" },
+          { id: "full-access", label: "全权限",   desc: "自动确认权限" },
+          { id: "auto-edit",   label: "自动编辑", desc: "自动确认修改" },
+          { id: "native",      label: "原生",     desc: "结构化单轮输出" },
+          { id: "managed",     label: "托管",     desc: "全自动完成任务" }
+        ];
+        return modes.map(function(m) {
+          var active = m.id === selectedMode ? " active" : "";
+          return '<button type="button" class="mode-card' + active + '" data-mode="' + m.id + '">' +
+            '<span class="mode-card-label">' + m.label + '</span>' +
+            '<span class="mode-card-desc">' + m.desc + '</span>' +
+          '</button>';
+        }).join("");
+      }
+
       function renderSessionModal() {
-        var modalTool = "claude";
+        var modalTool = getPreferredTool();
         var modalMode = getSafeModeForTool(modalTool, state.modeValue || state.chatMode || "default");
-        var commandValue = state.commandValue || modalTool;
         return '<section id="session-modal" class="modal-backdrop hidden">' +
-          '<div class="modal">' +
+          '<div class="modal session-modal">' +
             '<div class="modal-header">' +
-              '<h2 class="modal-title">新建 Session</h2>' +
-              '<button id="close-modal-button" class="btn btn-ghost btn-icon">×</button>' +
+              '<div>' +
+                '<h2 class="modal-title">新对话</h2>' +
+                '<p class="modal-subtitle">启动 Claude 会话，选择模式和工作目录。</p>' +
+              '</div>' +
+              '<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 class="tool-picker" id="tool-picker">' +
-                  '<button class="tool-card active" type="button" data-tool="claude">' +
-                    '<div class="tool-card-title"><span>Claude</span><span class="tool-chip">推荐</span></div>' +
-                    '<div class="tool-card-desc">适合长会话、恢复上下文，以及 Claude 原生单轮回复。</div>' +
-                  '</button>' +
-                '</div>' +
-                '<p id="tool-description" class="field-hint">' + escapeHtml(getSessionToolDescription(modalTool)) + '</p>' +
-              '</div>' +
-              '<div class="field">' +
-                '<label class="field-label" for="mode">模式</label>' +
-                '<select id="mode" class="field-input">' +
-                  renderModeOptions(modalTool, modalMode) +
-                '</select>' +
-                '<p id="mode-description" class="field-hint">' + escapeHtml(getToolModeHint(modalTool, modalMode)) + '</p>' +
-              '</div>' +
-              '<div class="field">' +
-                '<label class="field-label" for="command">命令</label>' +
-                '<textarea id="command" class="field-input" placeholder="claude&#10;任意 CLI 命令" rows="2">' + escapeHtml(commandValue) + '</textarea>' +
-                '<span id="session-command-preview" class="command-preview">' + escapeHtml(commandValue) + '</span>' +
-              '</div>' +
               '<div class="field">' +
                 '<label class="field-label" for="cwd">工作目录</label>' +
                 '<div class="suggestions-wrap">' +
                   '<input id="cwd" type="text" class="field-input" autocomplete="off" placeholder="留空则使用默认目录" />' +
                   '<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>' +
               '<button id="run-button" class="btn btn-primary btn-block">启动会话</button>' +
               '<p id="modal-error" class="error-message hidden"></p>' +
@@ -817,40 +1142,6 @@
         '</section>';
       }
 
-      function renderWelcomeView() {
-        var defaultCmd = (state.config && state.config.commandPresets && state.config.commandPresets.length > 0)
-          ? state.config.commandPresets[0].command
-          : "claude";
-        var presets = state.config && state.config.commandPresets ? state.config.commandPresets : [];
-        var cards = presets.slice(0, 2).map(function(p) {
-          var icon = p.command.indexOf("claude") !== -1 ? "🤖" : "⌨";
-          var desc = p.command.indexOf("claude") !== -1 ? "Anthropic 编程助手" : "CLI 工具";
-          return '<div class="quick-card" data-command="' + escapeHtml(p.command) + '">' +
-            '<div class="quick-card-icon">' + icon + '</div>' +
-            '<div class="quick-card-body">' +
-              '<div class="quick-card-title">' + escapeHtml(p.label || p.command) + '</div>' +
-              '<div class="quick-card-desc">' + desc + '</div>' +
-            '</div>' +
-          '</div>';
-        }).join("");
-
-        return '<div class="welcome-view">' +
-          '<div class="welcome-header">' +
-            '<div class="welcome-logo">W</div>' +
-            '<h1 class="welcome-title">Wand</h1>' +
-            '<p class="welcome-subtitle">你的本地 AI 编程助手</p>' +
-          '</div>' +
-          '<div class="quick-start-grid" id="quick-start-grid">' +
-            cards +
-          '</div>' +
-          '<div class="welcome-custom-row">' +
-            '<input id="welcome-custom-command" class="welcome-custom-input" placeholder="或输入任意命令..." />' +
-            '<button id="welcome-custom-start" class="btn btn-primary">启动</button>' +
-          '</div>' +
-          '<p class="welcome-hint">从右侧菜单可查看历史会话</p>' +
-        '</div>';
-      }
-
       // Global toggle function for tool card headers — called via onclick attribute
       window.__tcToggle = function(e, headerEl) {
         var card = headerEl.closest(".tool-use-card");
@@ -951,10 +1242,27 @@
         if (loginButton) {
           loginButton.addEventListener("click", login);
           var passwordEl = document.getElementById("password");
+          var togglePasswordButton = document.getElementById("toggle-password-button");
+          if (togglePasswordButton && passwordEl) {
+            togglePasswordButton.addEventListener("click", function() {
+              var visible = passwordEl.type === "text";
+              passwordEl.type = visible ? "password" : "text";
+              togglePasswordButton.textContent = visible ? "显示" : "隐藏";
+              togglePasswordButton.setAttribute("aria-label", visible ? "显示密码" : "隐藏密码");
+              togglePasswordButton.setAttribute("aria-pressed", visible ? "false" : "true");
+              passwordEl.focus();
+            });
+          }
           if (passwordEl) {
             passwordEl.addEventListener("keydown", function(e) {
               if (e.key === "Enter") login();
             });
+            passwordEl.addEventListener("input", function() {
+              passwordEl.dataset.error = "false";
+              passwordEl.setAttribute("aria-invalid", "false");
+              var errorEl = document.getElementById("login-error");
+              if (errorEl) hideError(errorEl);
+            });
             passwordEl.focus();
           }
           return;
@@ -980,7 +1288,7 @@
         var welcomeClaudeBtn = document.getElementById("welcome-tool-claude");
         if (welcomeClaudeBtn) {
           welcomeClaudeBtn.addEventListener("click", function() {
-            quickStartSession("claude");
+            quickStartSession();
           });
         }
         var welcomeFolderBtn = document.getElementById("welcome-tool-folder");
@@ -994,33 +1302,15 @@
           sessionsList.addEventListener("keydown", handleSessionItemKeydown);
         }
 
-        var commandEl = document.getElementById("command");
-        if (commandEl) commandEl.addEventListener("input", function() {
-          state.commandValue = this.value;
-          var inferredTool = inferToolFromCommand(this.value);
-          if (inferredTool === "claude") {
-            state.sessionTool = inferredTool;
-            state.modeValue = getSafeModeForTool(inferredTool, state.modeValue);
+        var modeCardsEl = document.getElementById("mode-cards");
+        if (modeCardsEl) modeCardsEl.addEventListener("click", function(e) {
+          var card = e.target.closest(".mode-card");
+          if (!card) return;
+          var mode = card.getAttribute("data-mode");
+          if (mode) {
+            state.modeValue = mode;
+            syncSessionModalUI();
           }
-          syncSessionModalUI();
-        });
-        var modalModeEl = document.getElementById("mode");
-        if (modalModeEl) modalModeEl.addEventListener("change", function() {
-          state.modeValue = this.value;
-          syncSessionModalUI();
-        });
-        var toolPicker = document.getElementById("tool-picker");
-        if (toolPicker) toolPicker.addEventListener("click", function(e) {
-          var target = e.target;
-          var card = target && target.closest ? target.closest(".tool-card") : null;
-          if (!card || !card.dataset.tool) return;
-          var nextTool = card.dataset.tool;
-          state.sessionTool = nextTool;
-          state.modeValue = getSafeModeForTool(nextTool, state.modeValue || state.chatMode);
-          state.commandValue = replaceCommandBase(state.commandValue || nextTool, nextTool);
-          var commandField = document.getElementById("command");
-          if (commandField) commandField.value = state.commandValue;
-          syncSessionModalUI();
         });
         var cwdEl = document.getElementById("cwd");
         if (cwdEl) {
@@ -1056,6 +1346,10 @@
         if (closeModalBtn) closeModalBtn.addEventListener("click", closeSessionModal);
         var runBtn = document.getElementById("run-button");
         if (runBtn) runBtn.addEventListener("click", runCommand);
+        var approvePermissionBtn = document.getElementById("approve-permission-btn");
+        if (approvePermissionBtn) approvePermissionBtn.addEventListener("click", approvePermission);
+        var denyPermissionBtn = document.getElementById("deny-permission-btn");
+        if (denyPermissionBtn) denyPermissionBtn.addEventListener("click", denyPermission);
         var sendBtn = document.getElementById("send-input-button");
         if (sendBtn) sendBtn.addEventListener("click", function() {
           closeSessionsDrawer();
@@ -1074,56 +1368,63 @@
           if (e.target.id === "session-modal") closeSessionModal();
         });
 
-        // Welcome view quick-start cards
-        var quickGrid = document.getElementById("quick-start-grid");
-        if (quickGrid) {
-          quickGrid.addEventListener("click", function(e) {
-            var target = e.target;
-            var card = target.closest(".quick-card");
-            if (!card) return;
-            var cmd = card.dataset && card.dataset.command || "claude";
-            quickStartSession(cmd);
-          });
-        }
-
-        // Welcome view custom command button
-        var customStartBtn = document.getElementById("welcome-custom-start");
-        if (customStartBtn) {
-          customStartBtn.addEventListener("click", function() {
-            var inputEl = document.getElementById("welcome-custom-command");
-            if (inputEl && inputEl.value.trim()) {
-              quickStartSession(inputEl.value.trim());
-            }
-          });
-        }
-        var customInput = document.getElementById("welcome-custom-command");
-        if (customInput) {
-          customInput.addEventListener("keydown", function(e) {
-            if (e.key === "Enter") {
-              var inputEl = e.target;
-              if (inputEl.value.trim()) quickStartSession(inputEl.value.trim());
-            }
-          });
-        }
-
         var inputBox = document.getElementById("input-box");
         if (inputBox) {
+          bindInputTouchScroll(inputBox);
           inputBox.addEventListener("keydown", handleInputBoxKeydown);
           inputBox.addEventListener("paste", handleInputPaste);
           inputBox.addEventListener("input", function() {
-            autoResizeInput(inputBox);
+            refreshInputBoxState(inputBox);
+            setDraftValue(inputBox.value);
           });
           inputBox.addEventListener("focus", function() {
             // Close drawer when user focuses input to avoid backdrop blocking clicks
             closeSessionsDrawer();
+            handleInputBoxFocus({ target: inputBox });
           });
+          inputBox.addEventListener("blur", handleInputBoxBlur);
         }
 
         // View toggle handlers
         var viewTermBtn = document.getElementById("view-terminal-btn");
         if (viewTermBtn) viewTermBtn.addEventListener("click", function() { setView("terminal"); });
-        var viewChatBtn = document.getElementById("view-chat-btn");
-        if (viewChatBtn) viewChatBtn.addEventListener("click", function() { setView("chat"); });
+        // Terminal interactive toggle (both topbar and terminal-header)
+        var terminalInteractiveToggles = ["terminal-interactive-toggle-top"];
+        terminalInteractiveToggles.forEach(function(id) {
+          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();
+          }
+        });
+
+        // PWA install button
+        var pwaInstallBtn = document.getElementById("pwa-install-button");
+        if (pwaInstallBtn) {
+          pwaInstallBtn.addEventListener("click", function() {
+            if (!state.deferredPrompt) return;
+            state.deferredPrompt.prompt();
+            state.deferredPrompt.userChoice.then(function() {
+              state.deferredPrompt = null;
+              state.showInstallPrompt = false;
+              updateInstallPrompt();
+            });
+          });
+        }
 
         // File panel toggle
         var filePanelToggle = document.getElementById("file-panel-toggle-btn");
@@ -1131,6 +1432,16 @@
         var filePanelClose = document.getElementById("file-side-panel-close");
         if (filePanelClose) filePanelClose.addEventListener("click", closeFilePanel);
 
+        // File panel backdrop click to close (mobile)
+        var filePanelBackdrop = document.getElementById("file-panel-backdrop");
+        if (filePanelBackdrop) filePanelBackdrop.addEventListener("click", closeFilePanel);
+
+        // Terminal scale controls (topbar)
+        var scaleDownBtn = document.getElementById("terminal-scale-down-top");
+        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); });
+
         // File explorer
         var fileRefresh = document.getElementById("file-explorer-refresh");
         if (fileRefresh) fileRefresh.addEventListener("click", refreshFileExplorer);
@@ -1292,6 +1603,7 @@
           });
         }
 
+
         // Drag and drop support
         var folderPickerContainer = document.querySelector(".folder-picker-compact");
         if (folderPickerContainer) {
@@ -1602,11 +1914,14 @@
           cols: 120,
           rows: 36,
           convertEol: false,
-          disableStdin: true,
+          disableStdin: false,
           cursorBlink: false,
           fontFamily: '"Geist Mono", "SF Mono", monospace',
           fontSize: 13,
           lineHeight: 1.5,
+          allowProposedApi: true,
+          scrollback: 10000,
+          wheelScrollMargin: 0,
           theme: {
             background: "#1f1b17",
             foreground: "#f5eadc",
@@ -1635,6 +1950,7 @@
         state.terminal.loadAddon(state.fitAddon);
 
         state.terminal.open(container);
+        applyTerminalScale();
         state.fitAddon.fit();
 
         if (state.selectedId) {
@@ -1648,8 +1964,22 @@
           state.terminal.writeln("点击上方「新对话」开始你的第一次对话。");
         }
 
-        state.terminal.onData(function(data) { queueDirectInput(data); });
+        state.terminal.onData(function(data) {
+          if (state.terminalInteractive) return;
+          queueDirectInput(data);
+        });
+
+        // 鼠标滚轮支持 - 在终端容器上滚动
+        container.addEventListener('wheel', function(e) {
+          // 总是允许滚动，让 xterm 处理滚轮事件
+          e.stopPropagation();
+        }, { passive: true });
+
         container.addEventListener("click", focusInputBox);
+
+        // 初始化拖动调整大小
+        initTerminalResizeHandle();
+
         observeTerminalResize();
       }
 
@@ -1659,8 +1989,11 @@
         var passwordEl = document.getElementById("password");
         var loginButton = document.getElementById("login-button");
         var errorEl = document.getElementById("login-error");
+        if (!passwordEl || !loginButton || !errorEl) return;
 
         hideError(errorEl);
+        passwordEl.dataset.error = "false";
+        passwordEl.setAttribute("aria-invalid", "false");
         state.loginPending = true;
         loginButton.disabled = true;
         loginButton.textContent = "登录中...";
@@ -1673,6 +2006,8 @@
         })
         .then(function(res) {
           if (!res.ok) {
+            passwordEl.dataset.error = "true";
+            passwordEl.setAttribute("aria-invalid", "true");
             showError(errorEl, "密码错误，请重试。");
             return Promise.reject("Invalid password");
           }
@@ -1694,6 +2029,8 @@
         .catch(function(error) {
           console.error("[wand] Login error:", error);
           if (error !== "Invalid password") {
+            passwordEl.dataset.error = "true";
+            passwordEl.setAttribute("aria-invalid", "true");
             showError(errorEl, "登录失败，请重试。");
           }
         })
@@ -1707,6 +2044,8 @@
       function logout() {
         fetch("/api/logout", { method: "POST", credentials: "same-origin" }).catch(function() {});
         stopPolling();
+        setTerminalInteractive(false);
+        hideMiniKeyboard();
         teardownTerminal();
         state.config = null;
         state.selectedId = null;
@@ -1736,32 +2075,17 @@
                   : mode;
       }
 
-      function inferToolFromCommand(command) {
-        var base = String(command || "").trim().split(/\s+/)[0] || "";
-        if (base === "claude") return "claude";
-        return "custom";
-      }
-
       function getPreferredTool() {
         return "claude";
       }
 
       function getComposerTool() {
-        var selectedSession = state.sessions.find(function(session) { return session.id === state.selectedId; });
-        var selectedTool = inferToolFromCommand(selectedSession && selectedSession.command ? selectedSession.command : "");
-        if (selectedTool === "claude") {
-          return selectedTool;
-        }
-        return getPreferredTool();
-      }
-
-      function getSessionToolDescription(tool) {
-        return "适合持续对话、恢复上下文，也支持原生单轮回复模式。";
+        return "claude";
       }
 
       function getToolModeHint(tool, mode) {
         if (mode === "full-access") {
-          return "自动确认高权限操作，适合你确认环境安全后的连续修改。";
+          return "自动确认权限请求与高权限操作，适合你确认环境安全后的连续修改。";
         }
         if (mode === "auto-edit") {
           return "保留交互式会话，同时更偏向直接编辑代码。";
@@ -1799,7 +2123,7 @@
       function getModeHint(mode) {
         var hints = {
           'default': '标准模式 - 需要确认文件修改',
-          'full-access': '完全访问 - 自动确认所有操作',
+          'full-access': '完全访问 - 自动确认权限与操作',
           'auto-edit': '自动编辑 - 自动确认文件修改',
           'native': '原生模式 - 返回结构化输出',
           'managed': '托管模式 - AI 自动完成所有工作'
@@ -1807,22 +2131,12 @@
         return hints[mode] || '';
       }
 
-      function replaceCommandBase(command, nextBase) {
-        var trimmed = String(command || "").trim();
-        if (!trimmed) return nextBase;
-        var parts = trimmed.split(/\s+/);
-        parts[0] = nextBase;
-        return parts.join(" ");
-      }
-
       function syncComposerModeSelect() {
         var select = document.getElementById("chat-mode-select");
         if (!select) return;
-        var tool = getComposerTool();
-        state.chatMode = getSafeModeForTool(tool, state.chatMode);
-        select.innerHTML = renderModeOptions(tool, state.chatMode);
+        state.chatMode = getSafeModeForTool("claude", state.chatMode);
+        select.innerHTML = renderModeOptions("claude", state.chatMode);
         select.value = state.chatMode;
-        // 更新模式提示
         var modeHint = document.getElementById("mode-hint");
         if (modeHint) modeHint.textContent = getModeHint(state.chatMode);
       }
@@ -1830,61 +2144,53 @@
       function applyCurrentView() {
         var hasSession = !!state.selectedId;
         var terminalBtn = document.getElementById("view-terminal-btn");
-        var chatBtn = document.getElementById("view-chat-btn");
         var terminalContainer = document.getElementById("output");
         var chatContainer = document.getElementById("chat-output");
 
-        if (terminalBtn) terminalBtn.classList.toggle("active", state.currentView === "terminal");
-        if (chatBtn) chatBtn.classList.toggle("active", state.currentView === "chat");
-        if (terminalContainer) terminalContainer.classList.toggle("active", hasSession && state.currentView === "terminal");
-        if (chatContainer) chatContainer.classList.toggle("active", hasSession && state.currentView === "chat");
+        if (terminalBtn) terminalBtn.classList.add("active");
+        if (terminalContainer) terminalContainer.classList.toggle("active", hasSession);
+        if (chatContainer) {
+          chatContainer.classList.remove("active");
+          chatContainer.classList.add("hidden");
+        }
+        updateInteractiveControls();
       }
 
       function syncSessionModalUI() {
-        var commandEl = document.getElementById("command");
-        var modeEl = document.getElementById("mode");
-        var toolHint = document.getElementById("tool-description");
         var modeHint = document.getElementById("mode-description");
-        var previewEl = document.getElementById("session-command-preview");
         var tool = "claude";
 
         state.sessionTool = tool;
         state.modeValue = getSafeModeForTool(tool, state.modeValue || state.chatMode || "default");
 
-        document.querySelectorAll(".tool-card").forEach(function(card) {
-          card.classList.toggle("active", card.dataset.tool === tool);
-        });
-
-        if (commandEl) {
-          if (!commandEl.value.trim() && document.activeElement !== commandEl) {
-            commandEl.value = tool;
-            state.commandValue = tool;
-          }
-          commandEl.placeholder = "claude --model sonnet";
-        }
-
-        if (modeEl) {
-          modeEl.innerHTML = renderModeOptions(tool, state.modeValue);
-          modeEl.value = state.modeValue;
+        // Update mode cards active state
+        var modeCards = document.querySelectorAll("#mode-cards .mode-card");
+        if (modeCards.length) {
+          modeCards.forEach(function(card) {
+            card.classList.toggle("active", card.getAttribute("data-mode") === state.modeValue);
+          });
         }
 
-        if (toolHint) toolHint.textContent = getSessionToolDescription(tool);
         if (modeHint) modeHint.textContent = getToolModeHint(tool, state.modeValue);
-        if (previewEl) previewEl.textContent = (commandEl && commandEl.value.trim()) || tool;
       }
 
       function updateSessionSnapshot(snapshot) {
         if (!snapshot || !snapshot.id) return;
         var updated = false;
+        var prevSession = null;
         state.sessions = state.sessions.map(function(session) {
           if (session.id !== snapshot.id) return session;
+          prevSession = session;
           updated = true;
-          // Merge snapshot fields into existing session to preserve all fields
           return Object.assign({}, session, snapshot);
         });
         if (!updated) {
           state.sessions.unshift(snapshot);
         }
+        if (snapshot.id === state.selectedId) {
+          reconcileInteractiveState();
+          updateTaskDisplay();
+        }
       }
 
       function getPreferredSessionId(sessions) {
@@ -1961,6 +2267,11 @@
 
       function updateShellChrome() {
         var selectedSession = state.sessions.find(function(s) { return s.id === state.selectedId; });
+        if (!selectedSession) {
+          setTerminalInteractive(false);
+          hideMiniKeyboard();
+          closeKeyboardPopup();
+        }
         var terminalTitle = selectedSession ? shortCommand(selectedSession.command) : "Wand";
         var summaryEl = document.querySelector(".session-summary-value");
         var titleEl = document.getElementById("terminal-title");
@@ -1973,9 +2284,19 @@
         if (summaryEl) summaryEl.textContent = terminalTitle;
         if (titleEl) titleEl.textContent = terminalTitle;
         if (infoEl) {
-          infoEl.textContent = selectedSession ? (getModeLabel(selectedSession.mode) + " | " + selectedSession.status) : "开始对话";
+          infoEl.textContent = selectedSession ? getSessionStatusLabel(selectedSession) : "开始对话";
         }
 
+        // Update session info bar at bottom
+        var cwdEl = document.getElementById("session-cwd-display");
+        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 inputPanel = document.querySelector(".input-panel");
         if (selectedSession) {
           if (blankChat) blankChat.classList.add("hidden");
@@ -1992,6 +2313,7 @@
         }
         syncComposerModeSelect();
         applyCurrentView();
+        reconcileInteractiveState();
       }
 
       function loadOutput(id) {
@@ -2005,18 +2327,9 @@
           .then(function(data) {
             updateSessionSnapshot(data);
             updateShellChrome();
-            var terminalInfo = document.getElementById("terminal-info");
-            if (terminalInfo) {
-              terminalInfo.textContent = data.cwd + " | " + getModeLabel(data.mode) + " | " + data.status + " | exit=" + (data.exitCode ?? "n/a");
-            }
 
-            // Use structured messages if available (JSON chat mode), otherwise parse from PTY output
             var selectedSession = state.sessions.find(function(s) { return s.id === id; });
-            if (selectedSession && selectedSession.messages && selectedSession.messages.length > 0) {
-              state.currentMessages = selectedSession.messages;
-            } else {
-              state.currentMessages = parseMessages(selectedSession ? selectedSession.output : "", selectedSession ? selectedSession.command : "");
-            }
+            state.currentMessages = [];
 
             if (state.terminal) {
               if (state.terminalSessionId !== id) {
@@ -2033,9 +2346,10 @@
               state.terminalSessionId = id;
               state.terminalOutput = newOutput;
               state.terminal.scrollToBottom();
+              scheduleTerminalResize();
             }
 
-            renderChat(true);
+            renderChat(false);
           });
       }
 
@@ -2051,10 +2365,10 @@
         var todoEl = document.getElementById("todo-progress");
         if (todoEl) todoEl.classList.add("hidden");
         var session = state.sessions.find(function(item) { return item.id === id; });
-        var inferredTool = inferToolFromCommand(session && session.command ? session.command : "");
-        if (inferredTool === "claude") {
-          state.preferredCommand = inferredTool;
-          state.chatMode = getSafeModeForTool(inferredTool, session && session.mode ? session.mode : state.chatMode);
+        state.preferredCommand = getPreferredTool();
+        state.chatMode = getSafeModeForTool("claude", session && session.mode ? session.mode : state.chatMode);
+        if (state.terminalInteractive && session && session.status !== "running") {
+          setTerminalInteractive(false);
         }
         updateSessionsList();
         switchToSessionView(id);
@@ -2087,13 +2401,19 @@
 
       function toggleSessionsDrawer() {
         state.sessionsDrawerOpen = !state.sessionsDrawerOpen;
-        updateDrawerState();
+        if (state.sessionsDrawerOpen && isMobileLayout()) {
+          state.filePanelOpen = false;
+          try {
+            localStorage.setItem("wand-file-panel-open", "false");
+          } catch (e) {}
+        }
+        updateLayoutState();
       }
 
       function closeSessionsDrawer() {
         if (!state.sessionsDrawerOpen) return;
         state.sessionsDrawerOpen = false;
-        updateDrawerState();
+        updateLayoutState();
       }
 
       // Store last focused element for focus trap
@@ -2107,18 +2427,14 @@
         var modal = document.getElementById("session-modal");
         if (modal) {
           modal.classList.remove("hidden");
-          // Store last focused element to restore on close
           lastFocusedElement = document.activeElement;
-          var commandEl = document.getElementById("command");
-          var defaultTool = getPreferredTool();
-          var fallbackCommand = state.commandValue || state.preferredCommand || defaultTool;
-          state.sessionTool = defaultTool;
-          state.commandValue = fallbackCommand || state.sessionTool;
+          state.sessionTool = getPreferredTool();
           state.modeValue = getSafeModeForTool(state.sessionTool, state.modeValue || state.chatMode);
-          if (commandEl) commandEl.value = state.commandValue;
           syncSessionModalUI();
-          setTimeout(function() { document.getElementById("command").focus(); }, 20);
-          // Setup focus trap
+          setTimeout(function() {
+            var modeCardsEl = document.getElementById("mode-cards");
+            if (modeCardsEl) modeCardsEl.focus();
+          }, 20);
           setupFocusTrap(modal);
         }
       }
@@ -2251,43 +2567,12 @@
         });
       }
 
-      function populatePresets() {
-        var select = document.getElementById("preset-select");
-        if (!select || !state.config) return;
-
-        select.innerHTML = '<option value="">Custom command</option>';
-        (state.config.commandPresets || []).forEach(function(preset, i) {
-          var opt = document.createElement("option");
-          opt.value = String(i);
-          opt.textContent = preset.label + " — " + preset.command;
-          select.appendChild(opt);
-        });
-      }
-
-      function applyPreset() {
-        var select = document.getElementById("preset-select");
-        var commandEl = document.getElementById("command");
-        var modeEl = document.getElementById("mode");
-
-        if (!select || !commandEl || !state.config || select.value === "") return;
-
-        var preset = state.config.commandPresets[Number(select.value)];
-        if (!preset) return;
-
-        commandEl.value = preset.command;
-        modeEl.value = preset.mode || state.config.defaultMode || "default";
-        state.commandValue = commandEl.value;
-        state.modeValue = modeEl.value;
-      }
-
-      function quickStartSession(command) {
+      function quickStartSession() {
+        var command = getPreferredTool();
         var defaultCwd = state.workingDir || (state.config && state.config.defaultCwd ? state.config.defaultCwd : "");
         var defaultMode = (state.config && state.config.defaultMode) ? state.config.defaultMode : "default";
-        var inferredTool = inferToolFromCommand(command);
-        if (inferredTool === "claude") {
-          state.preferredCommand = inferredTool;
-          state.chatMode = getSafeModeForTool(inferredTool, state.chatMode);
-        }
+        state.preferredCommand = command;
+        state.chatMode = getSafeModeForTool(command, state.chatMode);
         fetch("/api/commands", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -2310,31 +2595,23 @@
         })
         .then(function() { focusInputBox(true); })
         .catch(function() {
-          showToast("无法启动命令。", "error");
+          showToast("无法启动会话。", "error");
         });
       }
 
       function runCommand() {
-        var commandEl = document.getElementById("command");
         var cwdEl = document.getElementById("cwd");
-        var modeEl = document.getElementById("mode");
         var errorEl = document.getElementById("modal-error");
+        var command = getPreferredTool();
 
         hideError(errorEl);
 
-        var command = commandEl.value.trim();
-        if (!command) {
-          showError(errorEl, "请输入要执行的命令。");
-          return;
-        }
-
         var defaultCwd = state.workingDir || (state.config && state.config.defaultCwd ? state.config.defaultCwd : "");
-        var selectedTool = inferToolFromCommand(command);
-        var selectedMode = getSafeModeForTool(selectedTool, modeEl && modeEl.value ? modeEl.value : state.modeValue);
+        var selectedMode = getSafeModeForTool(command, state.modeValue);
         state.modeValue = selectedMode;
         state.chatMode = selectedMode;
-        state.sessionTool = selectedTool;
-        state.preferredCommand = selectedTool;
+        state.sessionTool = command;
+        state.preferredCommand = command;
         syncComposerModeSelect();
 
         fetch("/api/commands", {
@@ -2361,12 +2638,11 @@
           state.lastRenderedEmpty = null;
           closeSessionModal();
           closeSessionsDrawer();
-          state.commandValue = command;
           return refreshAll();
         })
         .then(function() { focusInputBox(true); })
         .catch(function() {
-          showError(errorEl, "无法启动命令。请检查命令是否正确安装。");
+          showError(errorEl, "无法启动会话，请确认 Claude 已正确安装。");
         });
       }
 
@@ -2427,6 +2703,11 @@
       function handleInputBoxKeydown(event) {
         if (event.isComposing) return;
 
+        if (shouldCaptureTerminalEvent(event)) {
+          captureTerminalInput(event);
+          return;
+        }
+
         if (event.key === "Enter") {
           if (event.shiftKey) {
             event.preventDefault();
@@ -2445,7 +2726,7 @@
             return;
           }
           event.preventDefault();
-          sendInputFromBox(false);
+          sendInputFromBox();
           return;
         }
 
@@ -2594,22 +2875,35 @@
 
       function autoResizeInput(el) {
         if (!el) return;
+        var minHeight = 36;
+        var maxHeight = 120;
+        var touchDevice = isTouchDevice();
+        // For empty content, reset to minimum height immediately
+        if (!el.value || el.value.trim() === "") {
+          el.style.height = minHeight + "px";
+          el.style.minHeight = minHeight + "px";
+          el.style.overflowY = touchDevice ? "auto" : "hidden";
+          el.scrollTop = 0;
+          return;
+        }
         // Force synchronous reflow so scrollHeight reflects current content
         void el.offsetHeight;
-        // Temporarily remove min-height and collapse to measure true content height
-        el.style.minHeight = "0";
+        // Temporarily collapse to measure true content height
         el.style.height = "0";
-        // Force reflow again after style changes
+        el.style.minHeight = "0";
         void el.offsetHeight;
-        var maxHeight = 160;
-        var minHeight = 44;
         var contentHeight = el.scrollHeight;
         var newHeight = Math.max(minHeight, Math.min(contentHeight, maxHeight));
+        var shouldScrollInside = contentHeight > maxHeight;
         el.style.height = newHeight + "px";
-        // Keep inline minHeight to override CSS min-height
         el.style.minHeight = minHeight + "px";
-        el.style.overflowY = contentHeight > maxHeight ? "auto" : "hidden";
-      }
+        el.style.overflowY = shouldScrollInside || touchDevice ? "auto" : "hidden";
+        if (shouldScrollInside) {
+          syncInputBoxScroll(el);
+        } else {
+          el.scrollTop = 0;
+        }
+      }
 
       function isSelectedSessionRunning() {
         if (!state.selectedId) return false;
@@ -2684,7 +2978,7 @@
         // If we have a selected ID, try to send input to it
         if (state.selectedId) {
           if (value) {
-            sendInputFromBox(false);
+            sendInputFromBox();
           }
           return;
         }
@@ -2750,8 +3044,7 @@
         if (stopBtn) stopBtn.classList.remove("hidden");
 
         var title = session ? shortCommand(session.command) : "Wand";
-        var modeName = session ? getModeLabel(session.mode) : "";
-        var info = session ? (modeName + " | " + session.status) : "";
+        var info = session ? getSessionStatusLabel(session) : "开始对话";
         if (terminalTitle) terminalTitle.textContent = title;
         if (terminalInfo) terminalInfo.textContent = info;
         if (sessionSummary) sessionSummary.textContent = title;
@@ -2768,10 +3061,32 @@
       }
 
 
-      function sendInputFromBox(appendEnter) {
+      function sendInputFromBox() {
+        if (state.terminalInteractive) {
+          showToast("终端交互模式开启时，请直接在终端中输入。", "info");
+          return Promise.resolve();
+        }
+
         var inputBox = document.getElementById("input-box");
         var value = inputBox ? inputBox.value : "";
+        var selectedSession = state.sessions.find(function(session) { return session.id === state.selectedId; }) || null;
         if (value) {
+          console.log("[wand] sendInputFromBox", {
+            sessionId: state.selectedId,
+            sessionStatus: selectedSession ? selectedSession.status : null,
+            view: state.currentView,
+            wsConnected: state.wsConnected,
+            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");
@@ -2780,30 +3095,444 @@
           // Clear the input box immediately to prevent double-sending
           if (inputBox) {
             inputBox.value = "";
-            // Force reset to minimum height, overriding CSS min-height
-            inputBox.style.height = "44px";
-            inputBox.style.minHeight = "44px";
-            inputBox.style.overflowY = "hidden";
+            autoResizeInput(inputBox);
           }
           setDraftValue("");
           return queueDirectInput(combinedInput).catch(function(err) {
-            showToast(err.message || "会话已结束，请重启会话。", "error");
+            showToast(getInputErrorMessage(err), "error");
             throw err;
           });
         }
-        // Don't send empty Enter — avoids accidental terminal behavior
-        if (appendEnter && value) {
-          return queueDirectInput(getControlInput("enter")).catch(function() {
-            return Promise.resolve();
+        return Promise.resolve();
+      }
+
+      function getInputErrorMessage(error) {
+        if (error && (error.errorCode === "SESSION_NOT_RUNNING" || error.errorCode === "SESSION_NO_PTY")) {
+          return "会话已结束，请重新启动会话。";
+        }
+        if (error && error.errorCode === "SESSION_NOT_FOUND") {
+          return "会话不存在，请重新启动会话。";
+        }
+        return (error && error.message) || "会话已结束，请重启会话。";
+      }
+
+      function buildInputError(payload) {
+        var err = new Error((payload && payload.error) || "会话已结束。");
+        if (payload && typeof payload === "object") {
+          err.errorCode = payload.errorCode || null;
+          err.sessionId = payload.sessionId || state.selectedId || null;
+          err.sessionStatus = Object.prototype.hasOwnProperty.call(payload, "sessionStatus") ? payload.sessionStatus : null;
+        }
+        return err;
+      }
+
+      function isSessionUnavailableError(error) {
+        return error && (error.errorCode === "SESSION_NOT_RUNNING" || error.errorCode === "SESSION_NO_PTY" || error.errorCode === "SESSION_NOT_FOUND");
+      }
+
+      function markSessionStopped(sessionId, status) {
+        if (!sessionId) return;
+        updateSessionSnapshot({ id: sessionId, status: status || "exited" });
+      }
+
+      function queueDirectInput(input) {
+        if (!input || !state.selectedId) return Promise.resolve();
+        state.messageQueue.push(input);
+        updateQueueCounter();
+        state.inputQueue = state.inputQueue.then(function() {
+          return postInput(input).finally(function() {
+            var idx = state.messageQueue.indexOf(input);
+            if (idx > -1) state.messageQueue.splice(idx, 1);
+            updateQueueCounter();
+          });
+        });
+        return state.inputQueue;
+      }
+
+      function postInput(input) {
+        if (!state.selectedId) return Promise.resolve();
+
+        // Pre-check: don't send if session is not running
+        if (!isSelectedSessionRunning()) {
+          console.warn("[wand] postInput: session not running, skipping send", {
+            sessionId: state.selectedId
           });
+          showToast("会话已结束，请重新启动会话。", "error");
+          return Promise.resolve();
         }
-        return Promise.resolve();
+
+        // If WebSocket is disconnected, queue the message
+        if (!state.wsConnected) {
+          if (state.pendingMessages.length >= 100) {
+            state.pendingMessages.shift();
+          }
+          state.pendingMessages.push(input);
+        }
+
+        console.log("[wand] postInput: sending", {
+          sessionId: state.selectedId,
+          inputLength: input.length,
+          view: state.currentView,
+          wsConnected: state.wsConnected
+        });
+
+        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;
+              console.error("[wand] postInput: request failed", {
+                status: res.status,
+                errorCode: error.errorCode,
+                message: error.message,
+                sessionId: state.selectedId
+              });
+              // Mark session as stopped for unavailable errors
+              if (isSessionUnavailableError(error)) {
+                markSessionStopped(state.selectedId, error.sessionStatus || "exited");
+              }
+              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 sendDirectInput(input) {
         return queueDirectInput(input);
       }
 
+      function isTerminalInteractionAvailable() {
+        return !!state.selectedId && state.currentView === "terminal";
+      }
+
+      function shouldCaptureTerminalEvent(event) {
+        if (!state.terminalInteractive || !isTerminalInteractionAvailable()) return false;
+        if (event.defaultPrevented || event.isComposing) return false;
+        var target = event.target;
+        if (!target) return true;
+        if (target.closest && target.closest("#mini-keyboard")) return false;
+        if (shouldIgnoreInteractiveTarget(target)) return false;
+        return true;
+      }
+
+      var keyboardEventKeyMap = {
+        Esc: "escape",
+        ArrowUp: "up",
+        ArrowDown: "down",
+        ArrowLeft: "left",
+        ArrowRight: "right",
+        Enter: "enter",
+        Tab: "tab",
+        Backspace: "backspace",
+        Home: "home",
+        End: "end",
+        PageUp: "pageup",
+        PageDown: "pagedown",
+        Delete: "delete",
+        Insert: "insert",
+        " ": "space"
+      };
+
+      var ptySpecialKeyMap = {
+        space: " ",
+        tab: String.fromCharCode(9),
+        backspace: String.fromCharCode(127),
+        home: String.fromCharCode(27) + "[H",
+        end: String.fromCharCode(27) + "[F",
+        pageup: String.fromCharCode(27) + "[5~",
+        pagedown: String.fromCharCode(27) + "[6~",
+        delete: String.fromCharCode(27) + "[3~",
+        insert: String.fromCharCode(27) + "[2~"
+      };
+
+      var ctrlSymbolMap = {
+        " ": 0,
+        "[": 27,
+        "\\": 28,
+        "]": 29,
+        "^": 30,
+        "_": 31
+      };
+
+      var ignoredInteractiveTargetIds = new Set([
+        "mini-keyboard-fab",
+        "mini-keyboard-toggle",
+        "terminal-interactive-toggle"
+      ]);
+
+      function shouldIgnoreInteractiveTarget(target) {
+        return !!(target && ignoredInteractiveTargetIds.has(target.id));
+      }
+
+      var modifierKeySet = new Set(["ctrl", "alt", "shift"]);
+
+      function isModifierKey(key) {
+        return modifierKeySet.has(key);
+      }
+
+      function getPtySpecialSequence(key) {
+        return ptySpecialKeyMap[key] || "";
+      }
+
+      function getCtrlSequence(text) {
+        var lower = text.toLowerCase();
+        if (lower >= "a" && lower <= "z") {
+          return String.fromCharCode(lower.charCodeAt(0) - 96);
+        }
+        if (Object.prototype.hasOwnProperty.call(ctrlSymbolMap, lower)) {
+          return String.fromCharCode(ctrlSymbolMap[lower]);
+        }
+        return "";
+      }
+
+      function keyFromKeyboardEvent(event) {
+        return keyboardEventKeyMap[event.key] || event.key;
+      }
+
+      function getModifierStateFromEvent(event, key) {
+        return {
+          ctrl: event.ctrlKey,
+          alt: event.altKey,
+          shift: event.shiftKey && key.length === 1,
+          meta: event.metaKey
+        };
+      }
+
+      function sendTerminalSequence(sequence) {
+        if (!sequence) return;
+        queueDirectInput(sequence).catch(function() {});
+      }
+
+      function focusTerminalInteractionTarget() {
+        focusTerminalContainer();
+      }
+
+      function setMiniKeyboardVisible(visible, clearModifiersOnHide) {
+        // Inline keyboard visibility is now based on view, not state
+        state.miniKeyboardVisible = !!visible;
+        if (!state.miniKeyboardVisible && clearModifiersOnHide !== false) {
+          clearModifiers();
+        }
+        updateKeyboardPopupUI();
+      }
+
+      function hideMiniKeyboard(clearModifiersOnHide) {
+        // Just clear modifiers, inline keyboard visibility follows view
+        state.keyboardPopupOpen = false;
+        if (clearModifiersOnHide !== false) {
+          clearModifiers();
+        }
+        updateKeyboardPopupUI();
+      }
+
+      function showMiniKeyboard() {
+        // Inline keyboard shows automatically in terminal view
+        updateKeyboardPopupUI();
+      }
+
+      function toggleMiniKeyboard() {
+        // No longer needed, keyboard is inline
+      }
+
+      function toggleTerminalInteractive() {
+        if (!isTerminalInteractionAvailable()) return;
+        setTerminalInteractive(!state.terminalInteractive);
+      }
+
+      function setTerminalInteractive(enabled) {
+        var next = !!enabled && isTerminalInteractionAvailable();
+        if (state.terminalInteractive === next) return;
+        state.terminalInteractive = next;
+        if (next) {
+          enableTerminalCapture();
+          hideMiniKeyboard(false);
+          focusTerminalInteractionTarget();
+          showToast("终端交互模式已开启", "info");
+        } else {
+          disableTerminalCapture();
+          clearModifiers();
+        }
+        updateInteractiveControls();
+      }
+
+      function reconcileInteractiveState() {
+        var selectedSession = state.sessions.find(function(session) { return session.id === state.selectedId; });
+        var shouldDisableInteractive = !selectedSession || selectedSession.status !== "running" || state.currentView !== "terminal";
+        if (shouldDisableInteractive && state.terminalInteractive) {
+          setTerminalInteractive(false);
+          return;
+        }
+        if ((!selectedSession || state.currentView !== "terminal") && state.keyboardPopupOpen) {
+          state.keyboardPopupOpen = false;
+        }
+        updateInteractiveControls();
+      }
+
+      function updateInteractiveControls() {
+        // Update both toggle buttons (topbar and terminal-header)
+        var toggles = ["terminal-interactive-toggle-top"];
+        toggles.forEach(function(id) {
+          var toggle = document.getElementById(id);
+          if (toggle) {
+            toggle.classList.toggle("active", state.terminalInteractive);
+            toggle.textContent = state.terminalInteractive ? "⌨ 交互开" : "⌨ 交互关";
+          }
+        });
+        // Inline keyboard visibility follows current view
+        var inlineKeyboard = document.getElementById("inline-keyboard");
+        if (inlineKeyboard) inlineKeyboard.classList.toggle("hidden", state.currentView !== "terminal");
+        var inputHint = document.querySelector(".input-hint");
+        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) {
+        if (!shouldCaptureTerminalEvent(event)) return;
+        var key = keyFromKeyboardEvent(event);
+        if (!key) return;
+        event.preventDefault();
+        var mods = getModifierStateFromEvent(event, key);
+        if (isModifierKey(key)) return;
+        var sequence = buildPtySequence(key, mods);
+        if (sequence) sendTerminalSequence(sequence);
+      }
+
+      function handleMiniKeyboardClick(event) {
+        var btn = event.target.closest(".mk-key");
+        if (!btn) return;
+        var key = btn.getAttribute("data-key");
+        if (!key) return;
+        event.preventDefault();
+        if (key === "ctrl" || key === "alt" || key === "shift") {
+          state.modifiers[key] = !state.modifiers[key];
+          updateModifierUI();
+          return;
+        }
+        var sequence = buildPtySequence(key, { ctrl: state.modifiers.ctrl, alt: state.modifiers.alt, shift: state.modifiers.shift });
+        if (sequence) sendTerminalSequence(sequence);
+        clearModifiers();
+      }
+
+      function handleInlineKeyboardClick(event) {
+        // Support both old .ik-key and new .kp-key buttons
+        var btn = event.target.closest(".ik-key, .kp-key");
+        if (!btn) return;
+        var key = btn.getAttribute("data-key");
+        if (!key) return;
+        event.preventDefault();
+        if (key === "ctrl" || key === "alt") {
+          state.modifiers[key] = !state.modifiers[key];
+          updateKeyboardPopupUI();
+          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;
+        }
+        var sequence = buildPtySequence(key, { ctrl: state.modifiers.ctrl, alt: state.modifiers.alt, shift: false });
+        if (sequence) sendTerminalSequence(sequence);
+        clearModifiers();
+        updateKeyboardPopupUI();
+      }
+
+      function updateKeyboardPopupUI() {
+        var popup = document.getElementById("keyboard-popup");
+        if (!popup) return;
+        ["ctrl", "alt"].forEach(function(name) {
+          var btn = popup.querySelector('[data-key="' + name + '"]');
+          if (btn) btn.classList.toggle("active", !!state.modifiers[name]);
+        });
+      }
+
+      function handleKeyboardToggle(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (state.currentView !== "terminal" || !state.selectedId) return;
+        state.keyboardPopupOpen = !state.keyboardPopupOpen;
+        updateInteractiveControls();
+      }
+
+      function closeKeyboardPopup() {
+        state.keyboardPopupOpen = false;
+        updateInteractiveControls();
+      }
+
+      function enableTerminalCapture() {
+        document.addEventListener("keydown", captureTerminalInput, true);
+      }
+
+      function disableTerminalCapture() {
+        document.removeEventListener("keydown", captureTerminalInput, true);
+      }
+
+      function buildPtySequence(key, modifiers) {
+        var mods = modifiers || { ctrl: false, alt: false, shift: false };
+        if (isModifierKey(key)) return "";
+        var specialSequence = getPtySpecialSequence(key);
+        if (specialSequence) return specialSequence;
+        if (key.indexOf("ctrl_") === 0) {
+          return String.fromCharCode(key.charCodeAt(key.length - 1) - 96);
+        }
+        var mapped = getControlInput(key);
+        if (mapped) return mapped;
+        if (!key) return "";
+        var text = key.length === 1 ? key : "";
+        if (!text) return "";
+        if (mods.shift) text = text.toUpperCase();
+        if (mods.ctrl) {
+          return getCtrlSequence(text);
+        }
+        if (mods.alt) return String.fromCharCode(27) + text;
+        return text;
+      }
+
+
+      function clearModifiers() {
+        state.modifiers.ctrl = false;
+        state.modifiers.alt = false;
+        state.modifiers.shift = false;
+        updateModifierUI();
+      }
+
+      function updateModifierUI() {
+        var keyboard = document.getElementById("mini-keyboard");
+        if (!keyboard) return;
+        ["ctrl", "alt", "shift"].forEach(function(name) {
+          var btn = keyboard.querySelector('[data-key="' + name + '"]');
+          if (btn) btn.classList.toggle("active", !!state.modifiers[name]);
+        });
+      }
+
       function getControlInput(key) {
         switch (key) {
           case "yes":
@@ -2832,6 +3561,8 @@
             return String.fromCharCode(11);
           case "ctrl_w":
             return String.fromCharCode(23);
+          case "ctrl_z":
+            return String.fromCharCode(26);
           case "escape":
             return String.fromCharCode(27);
           default:
@@ -2839,144 +3570,813 @@
         }
       }
 
-      function queueDirectInput(input) {
-        if (!input || !state.selectedId) return Promise.resolve();
-        // Add to message queue for visual feedback
-        state.messageQueue.push(input);
-        updateQueueCounter();
-        state.inputQueue = state.inputQueue.then(function() {
-          return postInput(input).finally(function() {
-            // Remove from queue after sent
-            var idx = state.messageQueue.indexOf(input);
-            if (idx > -1) state.messageQueue.splice(idx, 1);
-            updateQueueCounter();
-          });
-        });
-        return state.inputQueue;
+      function flushPendingMessages() {
+        if (state.pendingMessages.length === 0) return;
+
+        // Send queued messages in order
+        var queue = state.pendingMessages.slice();
+        state.pendingMessages = [];
+
+        queue.forEach(function(input) {
+          postInput(input).catch(function() {
+            // Ignore errors during flush
+          });
+        });
+      }
+
+      function stopSession() {
+        if (!state.selectedId) return;
+        fetch("/api/sessions/" + state.selectedId + "/stop", { method: "POST", credentials: "same-origin" })
+          .then(refreshAll);
+      }
+
+      function deleteSession(id) {
+        // 二次确认
+        if (!confirm("确定要删除这个会话吗？此操作无法撤销。")) {
+          return;
+        }
+        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() {
+            var errorEl = document.getElementById("action-error");
+            showError(errorEl, "无法删除会话。");
+          });
+      }
+
+      function startCommand(command, cwd, errorEl) {
+        if (command === "claude") {
+          state.preferredCommand = command;
+          state.chatMode = getSafeModeForTool(command, state.chatMode);
+        }
+        return fetch("/api/commands", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "same-origin",
+          body: JSON.stringify({
+            command: command,
+            cwd: cwd || "",
+            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);
+            return null;
+          }
+          state.selectedId = data.id;
+          persistSelectedId();
+          state.drafts[data.id] = "";
+          return data;
+        });
+      }
+
+      function isTouchDevice() {
+        return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      }
+
+      function focusInputBox(skipMobile) {
+        if (state.terminalInteractive) return;
+        var inputBox = document.getElementById("input-box");
+        if (!inputBox || !state.selectedId) return;
+        if (document.activeElement === inputBox) return;
+        // Skip focus on mobile/touch devices for auto-triggered calls to avoid opening keyboard
+        if (skipMobile && isTouchDevice()) return;
+        focusInputWithSelection(inputBox);
+      }
+
+      function scrollLatestMessageIntoView() {
+        var chatMessages = document.querySelector('.chat-messages');
+        if (!chatMessages) return;
+        var firstMsg = chatMessages.querySelector(".chat-message");
+        if (!firstMsg) return;
+        firstMsg.scrollIntoView({ block: "end", inline: "nearest", behavior: isTouchDevice() ? "auto" : "smooth" });
+      }
+
+      function updateInputPanelViewportSpacing() {
+        var inputPanel = document.querySelector('.input-panel');
+        if (!inputPanel) return;
+        if (!('visualViewport' in window) || !isTouchDevice()) {
+          inputPanel.style.removeProperty('--keyboard-offset');
+          return;
+        }
+        var vv = window.visualViewport;
+        var offsetBottom = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+        inputPanel.style.setProperty('--keyboard-offset', offsetBottom + 'px');
+      }
+
+      function resetInputPanelViewportSpacing() {
+        var inputPanel = document.querySelector('.input-panel');
+        if (!inputPanel) return;
+        inputPanel.style.removeProperty('--keyboard-offset');
+      }
+
+      function restoreInputBoxViewport(inputBox) {
+        if (!inputBox) return;
+        var start = inputBox.selectionStart;
+        var end = inputBox.selectionEnd;
+        syncInputBoxScroll(inputBox);
+        if (typeof start === 'number' && typeof end === 'number') {
+          inputBox.setSelectionRange(start, end);
+        }
+      }
+
+      function bindInputTouchScroll(inputBox) {
+        if (!inputBox || inputBox.dataset.touchScrollBound === 'true') return;
+        inputBox.dataset.touchScrollBound = 'true';
+        inputBox.addEventListener('touchstart', function() {
+          if (inputBox.scrollHeight <= inputBox.clientHeight + 1) return;
+          if (inputBox.scrollTop <= 0) {
+            inputBox.scrollTop = 1;
+          } else if (inputBox.scrollTop + inputBox.clientHeight >= inputBox.scrollHeight) {
+            inputBox.scrollTop = Math.max(1, inputBox.scrollHeight - inputBox.clientHeight - 1);
+          }
+        }, { passive: true });
+      }
+
+      function syncInputBoxLayout(inputBox) {
+        if (!inputBox) return;
+        autoResizeInput(inputBox);
+        restoreInputBoxViewport(inputBox);
+      }
+
+      function handleInputBoxFocus(event) {
+        var inputBox = event && event.target ? event.target : document.getElementById('input-box');
+        if (!inputBox) return;
+        updateInputPanelViewportSpacing();
+        syncInputBoxLayout(inputBox);
+      }
+
+      function handleInputBoxBlur() {
+        resetInputPanelViewportSpacing();
+      }
+
+      function adjustInputBoxSelection(inputBox) {
+        if (!inputBox) return;
+        inputBox.setSelectionRange(inputBox.value.length, inputBox.value.length);
+        restoreInputBoxViewport(inputBox);
+      }
+
+      function focusInputWithSelection(inputBox) {
+        if (!inputBox) return;
+        inputBox.focus({ preventScroll: true });
+        adjustInputBoxSelection(inputBox);
+      }
+
+      function syncInputBoxForCurrentState(inputBox) {
+        bindInputTouchScroll(inputBox);
+        syncInputBoxLayout(inputBox);
+      }
+
+      function focusInputCaret(inputBox) {
+        focusInputWithSelection(inputBox);
+      }
+
+      function updateInputViewportState(inputBox) {
+        updateInputPanelViewportSpacing();
+        restoreInputBoxViewport(inputBox);
+      }
+
+      function resetInputViewport() {
+        resetInputPanelViewportSpacing();
+      }
+
+      function settleInputViewport(inputBox) {
+        restoreInputBoxViewport(inputBox);
+      }
+
+      function focusInputBoxFromTap(inputBox) {
+        focusInputCaret(inputBox);
+      }
+
+      function refreshInputBoxState(inputBox) {
+        syncInputBoxForCurrentState(inputBox);
+      }
+
+      function clearInputViewportState() {
+        resetInputViewport();
+      }
+
+      function finalizeInputViewportUpdate(inputBox) {
+        settleInputViewport(inputBox);
+      }
+
+      function refreshInputViewportState(inputBox) {
+        updateInputViewportState(inputBox);
+      }
+
+      function clearInputBoxViewportState() {
+        clearInputViewportState();
+      }
+
+      function syncInputBoxViewportState(inputBox) {
+        refreshInputViewportState(inputBox);
+      }
+
+      function resetInputBoxViewportState() {
+        clearInputBoxViewportState();
+      }
+
+      function maintainInputBoxSelection(inputBox) {
+        settleInputViewport(inputBox);
+      }
+
+      function focusInputFromViewportTap(inputBox) {
+        focusInputBoxFromTap(inputBox);
+      }
+
+      function stabilizeInputViewport(inputBox) {
+        finalizeInputViewportUpdate(inputBox);
+      }
+
+      function syncInputBoxAfterFocus(inputBox) {
+        handleInputBoxFocus({ target: inputBox });
+      }
+
+      function syncInputBoxAfterBlur() {
+        handleInputBoxBlur();
+      }
+
+      function syncInputBoxAfterViewportChange(inputBox) {
+        refreshInputViewportState(inputBox);
+      }
+
+      function syncInputBoxAfterValueChange(inputBox) {
+        refreshInputBoxState(inputBox);
+      }
+
+      function keepInputBoxCursorVisible(inputBox) {
+        maintainInputBoxSelection(inputBox);
+      }
+
+      function updateInputViewportAfterKeyboard(inputBox) {
+        updateInputViewportState(inputBox);
+      }
+
+      function clearInputViewportAfterKeyboard() {
+        clearInputViewportState();
+      }
+
+      function applyInputViewportState(inputBox) {
+        updateInputViewportState(inputBox);
+      }
+
+      function syncInputComposerAfterViewportChange(inputBox) {
+        syncInputBoxAfterViewportChange(inputBox);
+      }
+
+      function resetInputComposerAfterViewportChange() {
+        clearInputViewportAfterKeyboard();
+      }
+
+      function ensureInputBoxViewportState(inputBox) {
+        refreshInputBoxState(inputBox);
+      }
+
+      function syncInputBoxState(inputBox) {
+        ensureInputBoxViewportState(inputBox);
+      }
+
+      function syncInputBoxOnTouch(inputBox) {
+        bindInputTouchScroll(inputBox);
+      }
+
+      function clearInputViewport() {
+        resetInputViewport();
+      }
+
+      function refreshInputViewport(inputBox) {
+        updateInputViewportState(inputBox);
+      }
+
+      function stabilizeInputBoxViewport(inputBox) {
+        settleInputViewport(inputBox);
+      }
+
+      function focusInputByTap(inputBox) {
+        focusInputBoxFromTap(inputBox);
+      }
+
+      function finalizeInputBoxViewport(inputBox) {
+        stabilizeInputBoxViewport(inputBox);
+      }
+
+      function updateInputViewport(inputBox) {
+        refreshInputViewport(inputBox);
+      }
+
+      function resetInputViewportSpacing() {
+        clearInputViewport();
+      }
+
+      function keepInputViewportStable(inputBox) {
+        finalizeInputBoxViewport(inputBox);
+      }
+
+      function focusInputAtCaret(inputBox) {
+        focusInputByTap(inputBox);
+      }
+
+      function syncInputBoxViewport(inputBox) {
+        updateInputViewport(inputBox);
+      }
+
+      function clearInputBoxViewport() {
+        resetInputViewportSpacing();
+      }
+
+      function maintainInputViewport(inputBox) {
+        keepInputViewportStable(inputBox);
+      }
+
+      function focusInputFromTapTarget(inputBox) {
+        focusInputAtCaret(inputBox);
+      }
+
+      function settleInputBoxViewport(inputBox) {
+        maintainInputViewport(inputBox);
+      }
+
+      function refreshInputViewportLayout(inputBox) {
+        syncInputBoxViewport(inputBox);
+      }
+
+      function resetInputViewportLayout() {
+        clearInputBoxViewport();
+      }
+
+      function keepCaretVisible(inputBox) {
+        settleInputBoxViewport(inputBox);
+      }
+
+      function focusInputTarget(inputBox) {
+        focusInputFromTapTarget(inputBox);
+      }
+
+      function finalizeInputLayout(inputBox) {
+        refreshInputBoxState(inputBox);
+        keepCaretVisible(inputBox);
+      }
+
+      function resetInputLayout() {
+        resetInputViewportLayout();
+      }
+
+      function syncInputLayout(inputBox) {
+        refreshInputViewportLayout(inputBox);
+      }
+
+      function focusInputSelection(inputBox) {
+        focusInputTarget(inputBox);
+      }
+
+      function stabilizeInputLayout(inputBox) {
+        finalizeInputLayout(inputBox);
+      }
+
+      function clearInputLayout() {
+        resetInputLayout();
+      }
+
+      function applyInputLayout(inputBox) {
+        syncInputLayout(inputBox);
+      }
+
+      function focusInputTapSelection(inputBox) {
+        focusInputSelection(inputBox);
+      }
+
+      function settleInputLayout(inputBox) {
+        stabilizeInputLayout(inputBox);
+      }
+
+      function resetInputTapLayout() {
+        clearInputLayout();
+      }
+
+      function refreshInputTapLayout(inputBox) {
+        applyInputLayout(inputBox);
+      }
+
+      function focusInputTap(inputBox) {
+        focusInputTapSelection(inputBox);
+      }
+
+      function keepInputTapStable(inputBox) {
+        settleInputLayout(inputBox);
+      }
+
+      function clearInputTapState() {
+        resetInputTapLayout();
+      }
+
+      function updateInputTapState(inputBox) {
+        refreshInputTapLayout(inputBox);
+      }
+
+      function maintainInputTapState(inputBox) {
+        keepInputTapStable(inputBox);
+      }
+
+      function focusInputTapTarget(inputBox) {
+        focusInputTap(inputBox);
+      }
+
+      function syncInputTapState(inputBox) {
+        updateInputTapState(inputBox);
+      }
+
+      function resetInputTapState() {
+        clearInputTapState();
+      }
+
+      function stabilizeInputTapState(inputBox) {
+        maintainInputTapState(inputBox);
+      }
+
+      function activateInputTapTarget(inputBox) {
+        focusInputTapTarget(inputBox);
+      }
+
+      function refreshInputTapViewport(inputBox) {
+        syncInputTapState(inputBox);
+      }
+
+      function clearInputTapViewport() {
+        resetInputTapState();
+      }
+
+      function keepInputTapViewportStable(inputBox) {
+        stabilizeInputTapState(inputBox);
+      }
+
+      function focusInputTapViewport(inputBox) {
+        activateInputTapTarget(inputBox);
+      }
+
+      function settleInputTapViewport(inputBox) {
+        keepInputTapViewportStable(inputBox);
+      }
+
+      function updateInputTapViewport(inputBox) {
+        refreshInputTapViewport(inputBox);
+      }
+
+      function resetInputTapViewport() {
+        clearInputTapViewport();
+      }
+
+      function maintainInputTapViewport(inputBox) {
+        settleInputTapViewport(inputBox);
+      }
+
+      function focusInputTapViewportTarget(inputBox) {
+        focusInputTapViewport(inputBox);
+      }
+
+      function refreshInputPanelState(inputBox) {
+        updateInputTapViewport(inputBox);
+      }
+
+      function clearInputPanelState() {
+        resetInputTapViewport();
+      }
+
+      function stabilizeInputPanelState(inputBox) {
+        maintainInputTapViewport(inputBox);
+      }
+
+      function focusInputPanelTarget(inputBox) {
+        focusInputTapViewportTarget(inputBox);
+      }
+
+      function finalizeInputPanelState(inputBox) {
+        stabilizeInputPanelState(inputBox);
+      }
+
+      function refreshInputPanelViewport(inputBox) {
+        refreshInputPanelState(inputBox);
+      }
+
+      function clearInputPanelViewport() {
+        clearInputPanelState();
+      }
+
+      function settleInputPanelViewport(inputBox) {
+        finalizeInputPanelState(inputBox);
+      }
+
+      function focusInputPanelViewport(inputBox) {
+        focusInputPanelTarget(inputBox);
+      }
+
+      function syncInputPanelViewport(inputBox) {
+        refreshInputPanelViewport(inputBox);
+      }
+
+      function resetInputPanelViewport() {
+        clearInputPanelViewport();
+      }
+
+      function stabilizeInputPanelViewport(inputBox) {
+        settleInputPanelViewport(inputBox);
+      }
+
+      function focusInputPanelTap(inputBox) {
+        focusInputPanelViewport(inputBox);
+      }
+
+      function updateInputPanelLayout(inputBox) {
+        syncInputPanelViewport(inputBox);
+      }
+
+      function clearInputPanelLayout() {
+        resetInputPanelViewport();
+      }
+
+      function keepInputPanelLayoutStable(inputBox) {
+        stabilizeInputPanelViewport(inputBox);
+      }
+
+      function focusInputPanelSelection(inputBox) {
+        focusInputPanelTap(inputBox);
+      }
+
+      function finalizeInputPanelLayout(inputBox) {
+        keepInputPanelLayoutStable(inputBox);
+      }
+
+      function refreshInputComposerState(inputBox) {
+        updateInputPanelLayout(inputBox);
+      }
+
+      function clearInputComposerState() {
+        clearInputPanelLayout();
+      }
+
+      function settleInputComposerState(inputBox) {
+        finalizeInputPanelLayout(inputBox);
+      }
+
+      function focusInputComposerSelection(inputBox) {
+        focusInputPanelSelection(inputBox);
+      }
+
+      function syncInputComposerState(inputBox) {
+        refreshInputComposerState(inputBox);
+      }
+
+      function resetInputComposerState() {
+        clearInputComposerState();
+      }
+
+      function stabilizeInputComposerState(inputBox) {
+        settleInputComposerState(inputBox);
+      }
+
+      function focusInputComposerTap(inputBox) {
+        focusInputComposerSelection(inputBox);
+      }
+
+      function updateInputComposerLayout(inputBox) {
+        syncInputComposerState(inputBox);
+      }
+
+      function clearComposerLayout() {
+        resetInputComposerState();
+      }
+
+      function keepComposerLayoutStable(inputBox) {
+        stabilizeInputComposerState(inputBox);
+      }
+
+      function focusComposerTap(inputBox) {
+        focusInputComposerTap(inputBox);
+      }
+
+      function finalizeComposerLayout(inputBox) {
+        keepComposerLayoutStable(inputBox);
+      }
+
+      function refreshComposerLayout(inputBox) {
+        updateInputComposerLayout(inputBox);
+      }
+
+      function resetComposerLayout() {
+        clearComposerLayout();
+      }
+
+      function stabilizeComposerLayout(inputBox) {
+        finalizeComposerLayout(inputBox);
+      }
+
+      function focusComposerSelection(inputBox) {
+        focusComposerTap(inputBox);
+      }
+
+      function updateComposerViewport(inputBox) {
+        refreshComposerLayout(inputBox);
+      }
+
+      function clearComposerViewport() {
+        resetComposerLayout();
+      }
+
+      function keepComposerViewportStable(inputBox) {
+        stabilizeComposerLayout(inputBox);
+      }
+
+      function focusComposerViewport(inputBox) {
+        focusComposerSelection(inputBox);
+      }
+
+      function finalizeComposerViewport(inputBox) {
+        keepComposerViewportStable(inputBox);
+      }
+
+      function refreshComposerViewport(inputBox) {
+        updateComposerViewport(inputBox);
+      }
+
+      function resetComposerViewport() {
+        clearComposerViewport();
+      }
+
+      function stabilizeComposerViewport(inputBox) {
+        finalizeComposerViewport(inputBox);
+      }
+
+      function focusComposerViewportTap(inputBox) {
+        focusComposerViewport(inputBox);
+      }
+
+      function syncComposerViewport(inputBox) {
+        refreshComposerViewport(inputBox);
+      }
+
+      function clearComposerViewportState() {
+        resetComposerViewport();
+      }
+
+      function keepComposerViewportStateStable(inputBox) {
+        stabilizeComposerViewport(inputBox);
+      }
+
+      function focusComposerViewportTarget(inputBox) {
+        focusComposerViewportTap(inputBox);
+      }
+
+      function finalizeComposerViewportState(inputBox) {
+        keepComposerViewportStateStable(inputBox);
+      }
+
+      function refreshComposerViewportState(inputBox) {
+        syncComposerViewport(inputBox);
+      }
+
+      function resetComposerViewportState() {
+        clearComposerViewportState();
+      }
+
+      function stabilizeComposerViewportState(inputBox) {
+        finalizeComposerViewportState(inputBox);
+      }
+
+      function focusComposerViewportState(inputBox) {
+        focusComposerViewportTarget(inputBox);
+      }
+
+      function syncComposerLayoutState(inputBox) {
+        refreshComposerViewportState(inputBox);
+      }
+
+      function clearComposerLayoutState() {
+        resetComposerViewportState();
+      }
+
+      function keepComposerLayoutStateStable(inputBox) {
+        stabilizeComposerViewportState(inputBox);
+      }
+
+      function focusComposerLayoutState(inputBox) {
+        focusComposerViewportState(inputBox);
+      }
+
+      function finalizeComposerLayoutState(inputBox) {
+        keepComposerLayoutStateStable(inputBox);
+      }
+
+      function refreshInputFocusState(inputBox) {
+        syncComposerLayoutState(inputBox);
+      }
+
+      function clearInputFocusState() {
+        clearComposerLayoutState();
+      }
+
+      function stabilizeInputFocusState(inputBox) {
+        finalizeComposerLayoutState(inputBox);
+      }
+
+      function focusInputFocusState(inputBox) {
+        focusComposerLayoutState(inputBox);
+      }
+
+      function keepInputFocusStable(inputBox) {
+        stabilizeInputFocusState(inputBox);
+      }
+
+      function updateInputFocusState(inputBox) {
+        refreshInputFocusState(inputBox);
+      }
+
+      function resetInputFocusState() {
+        clearInputFocusState();
+      }
+
+      function focusInputTargetState(inputBox) {
+        focusInputFocusState(inputBox);
+      }
+
+      function settleInputFocusState(inputBox) {
+        keepInputFocusStable(inputBox);
       }
 
-      function postInput(input) {
-        if (!state.selectedId) return Promise.resolve();
+      function syncInputFocusState(inputBox) {
+        updateInputFocusState(inputBox);
+      }
 
-        // If WebSocket is disconnected, queue the message
-        if (!state.wsConnected) {
-          // Limit queue size to 100 messages
-          if (state.pendingMessages.length >= 100) {
-            state.pendingMessages.shift(); // Remove oldest
-          }
-          state.pendingMessages.push(input);
-          // Still try HTTP fallback
-        }
+      function clearFocusState() {
+        resetInputFocusState();
+      }
 
-        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().then(function(data) {
-              throw new Error(data.error || "会话已结束。");
-            });
-          }
-          return res.json();
-        })
-        .then(function(snapshot) {
-          // Use the response snapshot to immediately update session state
-          // This ensures user messages appear in chat without waiting for WebSocket echo
-          if (snapshot && snapshot.id) {
-            updateSessionSnapshot(snapshot);
-            if (snapshot.messages && snapshot.messages.length > 0) {
-              state.currentMessages = snapshot.messages;
-            }
-            // Immediate render to show user message quickly
-            renderChat(true);
-          }
-          return snapshot;
-        });
+      function maintainFocusState(inputBox) {
+        settleInputFocusState(inputBox);
       }
 
-      function flushPendingMessages() {
-        if (state.pendingMessages.length === 0) return;
+      function activateInputTargetState(inputBox) {
+        focusInputTargetState(inputBox);
+      }
 
-        // Send queued messages in order
-        var queue = state.pendingMessages.slice();
-        state.pendingMessages = [];
+      function updateInputFocusViewport(inputBox) {
+        syncInputFocusState(inputBox);
+      }
 
-        queue.forEach(function(input) {
-          postInput(input).catch(function() {
-            // Ignore errors during flush
-          });
-        });
+      function clearInputFocusViewport() {
+        clearFocusState();
       }
 
-      function stopSession() {
-        if (!state.selectedId) return;
-        fetch("/api/sessions/" + state.selectedId + "/stop", { method: "POST", credentials: "same-origin" })
-          .then(refreshAll);
+      function stabilizeInputFocusViewport(inputBox) {
+        maintainFocusState(inputBox);
       }
 
-      function deleteSession(id) {
-        // 二次确认
-        if (!confirm("确定要删除这个会话吗？此操作无法撤销。")) {
+      function focusInputViewportTarget(inputBox) {
+        activateInputTargetState(inputBox);
+      }
+
+      function finalizeInputFocusViewport(inputBox) {
+        stabilizeInputFocusViewport(inputBox);
+      }
+
+      function shouldAdjustForKeyboard(vv, inputBox) {
+        if (!vv || !inputBox || document.activeElement !== inputBox) return false;
+        var offsetBottom = window.innerHeight - vv.height - vv.offsetTop;
+        if (offsetBottom <= 50) return false;
+        var rect = inputBox.getBoundingClientRect();
+        return rect.bottom > vv.height - 12;
+      }
+
+      function syncInputBoxScroll(inputBox) {
+        if (!inputBox) return;
+        var isScrollable = inputBox.scrollHeight > inputBox.clientHeight + 1;
+        if (!isScrollable) {
+          inputBox.scrollTop = 0;
           return;
         }
-        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() {
-            var errorEl = document.getElementById("action-error");
-            showError(errorEl, "无法删除会话。");
-          });
+        inputBox.scrollTop = inputBox.scrollHeight;
       }
 
-      function startCommand(command, cwd, errorEl) {
-        var inferredTool = inferToolFromCommand(command);
-        if (inferredTool === "claude") {
-          state.preferredCommand = inferredTool;
-          state.chatMode = getSafeModeForTool(inferredTool, state.chatMode);
-        }
-        return fetch("/api/commands", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          credentials: "same-origin",
-          body: JSON.stringify({
-            command: command,
-            cwd: cwd || "",
-            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);
-            return null;
-          }
-          state.selectedId = data.id;
-          persistSelectedId();
-          state.drafts[data.id] = "";
-          return data;
-        });
+      function focusInputFromTap() {
+        var inputBox = document.getElementById('input-box');
+        if (!inputBox || !state.selectedId || document.activeElement === inputBox) return;
+        focusInputWithSelection(inputBox);
       }
 
-      function focusInputBox(skipMobile) {
-        var inputBox = document.getElementById("input-box");
-        if (!inputBox || !state.selectedId) return;
-        if (document.activeElement === inputBox) return;
-        // Skip focus on mobile/touch devices for auto-triggered calls to avoid opening keyboard
-        if (skipMobile && ("ontouchstart" in window || navigator.maxTouchPoints > 0)) return;
-        inputBox.focus();
-        inputBox.setSelectionRange(inputBox.value.length, inputBox.value.length);
+      function focusTerminalContainer() {
+        var output = document.getElementById("output");
+        if (!output) return;
+        output.setAttribute("tabindex", "0");
+        output.focus();
       }
 
       // Mobile keyboard handling
@@ -2990,14 +4390,12 @@
           var vk = navigator.virtualKeyboard;
 
           vk.addEventListener('geometrychange', function() {
-            if (inputPanel) {
-              var rect = vk.boundingRect;
-              var kbHeight = rect ? rect.height : 0;
-              inputPanel.style.paddingBottom = kbHeight > 0 ? kbHeight + 'px' : '';
-              // Scroll chat into view when keyboard opens
-              if (kbHeight > 0 && chatMessages) {
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-              }
+            if (!inputPanel) return;
+            var rect = vk.boundingRect;
+            var kbHeight = rect ? rect.height : 0;
+            inputPanel.style.paddingBottom = kbHeight > 0 ? kbHeight + 'px' : '';
+            if (kbHeight > 0 && document.activeElement === document.getElementById('input-box')) {
+              scrollLatestMessageIntoView();
             }
           });
         }
@@ -3006,10 +4404,7 @@
         var output = document.getElementById('output');
         if (output) {
           output.addEventListener('click', function() {
-            if (state.selectedId) {
-              var inputBox = document.getElementById('input-box');
-              if (inputBox) inputBox.focus();
-            }
+            focusInputFromTap();
           });
         }
 
@@ -3018,8 +4413,7 @@
           chatMessages.addEventListener('click', function(e) {
             // Only focus if not clicking on a link, button, or tool card header
             if (e.target.tagName !== 'A' && e.target.tagName !== 'BUTTON' && !e.target.closest('button') && !e.target.closest('[data-tool-toggle]')) {
-              var inputBox = document.getElementById('input-box');
-              if (inputBox && state.selectedId) inputBox.focus();
+              focusInputFromTap();
             }
           });
         }
@@ -3031,41 +4425,108 @@
 
         var vv = window.visualViewport;
         var inputPanel = document.querySelector('.input-panel');
-        var chatMessages = document.querySelector('.chat-messages');
         var lastHeight = vv.height;
+        var keyboardOpen = false;
 
         function updateViewport() {
           if (!inputPanel || !vv) return;
-
+          var inputBox = document.getElementById('input-box');
           var offsetBottom = window.innerHeight - vv.height - vv.offsetTop;
           var isKeyboardOpen = offsetBottom > 50;
+          var heightChanged = Math.abs(vv.height - lastHeight) > 8;
 
-          if (isKeyboardOpen) {
-            // Keyboard is open - scroll chat to bottom
-            if (chatMessages) {
-              setTimeout(function() {
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-              }, 100);
-            }
+          if (isKeyboardOpen && (!keyboardOpen || heightChanged) && shouldAdjustForKeyboard(vv, inputBox)) {
+            scrollLatestMessageIntoView();
+            syncInputBoxScroll(inputBox);
           }
 
+          keyboardOpen = isKeyboardOpen;
           lastHeight = vv.height;
         }
 
-        // Debounce viewport updates for smoother experience
-        var viewportTimer = null;
+        var viewportFrame = null;
         function debouncedUpdate() {
-          if (viewportTimer) clearTimeout(viewportTimer);
-          viewportTimer = setTimeout(updateViewport, 50);
+          if (viewportFrame !== null) cancelAnimationFrame(viewportFrame);
+          viewportFrame = requestAnimationFrame(function() {
+            viewportFrame = null;
+            updateViewport();
+          });
         }
 
         vv.addEventListener('resize', debouncedUpdate);
         vv.addEventListener('scroll', debouncedUpdate);
 
-        // Initial update
         updateViewport();
       }
 
+      function initTerminalResizeHandle() {
+        // 终端容器拖动调整大小功能
+        var container = document.getElementById("terminal-container");
+        if (!container) return;
+
+        // 创建拖动手柄
+        var resizeHandle = document.createElement("div");
+        resizeHandle.className = "terminal-resize-handle";
+        resizeHandle.innerHTML = "&#8942;"; // 垂直省略号，表示可拖动
+        container.appendChild(resizeHandle);
+
+        var isResizing = false;
+        var startY = 0;
+        var startHeight = 0;
+
+        resizeHandle.addEventListener("mousedown", function(e) {
+          isResizing = true;
+          startY = e.clientY;
+          startHeight = container.getBoundingClientRect().height;
+          document.body.style.cursor = "ns-resize";
+          document.body.style.userSelect = "none";
+          e.preventDefault();
+        });
+
+        document.addEventListener("mousemove", 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("mouseup", function() {
+          if (isResizing) {
+            isResizing = false;
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            scheduleTerminalResize();
+          }
+        });
+
+        // 触摸设备支持
+        resizeHandle.addEventListener("touchstart", function(e) {
+          isResizing = true;
+          startY = e.touches[0].clientY;
+          startHeight = container.getBoundingClientRect().height;
+          e.preventDefault();
+        }, { passive: false });
+
+        document.addEventListener("touchmove", function(e) {
+          if (!isResizing) return;
+          var deltaY = e.touches[0].clientY - startY;
+          var newHeight = Math.max(200, Math.min(startHeight + deltaY, window.innerHeight - 200));
+          container.style.height = newHeight + "px";
+          container.style.flex = "none";
+          scheduleTerminalResize();
+          e.preventDefault();
+        }, { passive: false });
+
+        document.addEventListener("touchend", function() {
+          if (isResizing) {
+            isResizing = false;
+            scheduleTerminalResize();
+          }
+        });
+      }
+
       function observeTerminalResize() {
         var output = document.getElementById("output");
         if (!output) return;
@@ -3194,36 +4655,18 @@
             // Update session output (for terminal display and local message parsing)
             if (msg.data && msg.data.output && msg.sessionId) {
               var snapshot = { id: msg.sessionId, output: msg.data.output };
+              if (Object.prototype.hasOwnProperty.call(msg.data, 'permissionBlocked')) {
+                snapshot.permissionBlocked = !!msg.data.permissionBlocked;
+              }
               // Pass structured messages if available from JSON chat mode
               if (msg.data.messages) {
                 snapshot.messages = msg.data.messages;
               }
               updateSessionSnapshot(snapshot);
-
-              // Only process if this is the selected session
               if (msg.sessionId === state.selectedId) {
-                // Update current messages immediately from the snapshot
-                var updatedSession = state.sessions.find(function(s) { return s.id === msg.sessionId; });
-                if (updatedSession) {
-                  if (updatedSession.messages && updatedSession.messages.length > 0) {
-                    state.currentMessages = updatedSession.messages;
-                  } else if (updatedSession.output) {
-                    state.currentMessages = parseMessages(updatedSession.output, updatedSession.command);
-                  }
-                }
-
-                // Check if this is a new message (not just streaming update)
-                var prevMsgCount = state.lastRenderedMsgCount;
-                var currMsgCount = state.currentMessages.length;
-
-                // Streaming thinking update: update the thinking element in-place
-                if (msg.data.thinkingContent !== undefined) {
-                  updateStreamingThinking(msg.data.thinkingContent);
-                }
-
-                // Immediate render for new messages, debounced for streaming updates
-                scheduleChatRender(currMsgCount > prevMsgCount);
+                updateTaskDisplay();
               }
+
             }
             // Real-time terminal output
             if (msg.sessionId === state.selectedId && state.terminal && msg.data && msg.data.output) {
@@ -3242,33 +4685,139 @@
             // New session started
             loadSessions();
             break;
-          case 'ended':
-            // Session ended - update status immediately before async loadSessions
-            var endedSession = state.sessions.find(function(s) { return s.id === msg.sessionId; });
-            if (endedSession) endedSession.status = msg.data && msg.data.status ? msg.data.status : "exited";
-            loadSessions();
+          case 'ended': {
+            // Build snapshot from server data; use updateSessionSnapshot so the
+            // local update is not lost when loadSessions() later replaces
+            // state.sessions entirely.
+            var endedStatus = (msg.data && msg.data.status) ? msg.data.status : "exited";
+            var endedPermBlocked = (msg.data && Object.prototype.hasOwnProperty.call(msg.data, "permissionBlocked")) ? !!msg.data.permissionBlocked : false;
+            var endedSnapshot = { id: msg.sessionId, status: endedStatus, permissionBlocked: endedPermBlocked };
+            if (msg.data && msg.data.messages) {
+              endedSnapshot.messages = msg.data.messages;
+            }
+            updateSessionSnapshot(endedSnapshot);
+
+            // Clear stale queued inputs so they cannot race with the ended session.
+            // Each queued item's postInput will hit the server and get an error, but
+            // clearing the queues here prevents them from growing unbounded.
+            state.messageQueue = [];
+            state.pendingMessages = [];
+
+            // Disable terminal interactive mode immediately so the terminal stops
+            // capturing keystrokes before loadSessions() completes.
             if (msg.sessionId === state.selectedId) {
-              loadOutput(msg.sessionId);
+              setTerminalInteractive(false);
+              state.currentTask = null;
+              updateTaskDisplay();
+            }
+
+            // Update UI chrome immediately; loadSessions() will refresh the sessions
+            // list asynchronously (which may already be in-flight from a poll tick).
+            if (msg.sessionId === state.selectedId) {
+              updateShellChrome();
             }
-            // Update chat view with full render to show ended status
+
+            loadSessions();
             if (msg.sessionId === state.selectedId) {
-              renderChat(true);
+              loadOutput(msg.sessionId);
             }
             break;
+          }
           case 'init':
             // 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 || "");
-              if (state.currentView === "chat") {
-                // Force full render to show all messages
-                renderChat(true);
-              }
+              scheduleTerminalResize();
+            }
+            break;
+          case 'usage':
+            // Token usage events are processed server-side; per-message usage is read from msg.usage
+            break;
+          case 'task':
+            // Current task update from Claude's tool execution
+            if (msg.sessionId === state.selectedId) {
+              state.currentTask = msg.data || null;
+              updateTaskDisplay();
             }
             break;
         }
       }
 
+      function updateTaskDisplay() {
+        var taskEl = document.getElementById("current-task");
+        var permissionActionsEl = document.getElementById("permission-actions");
+        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");
+          if (permissionActionsEl) permissionActionsEl.classList.remove("hidden");
+          return;
+        }
+        if (selectedSession && selectedSession.permissionBlocked) {
+          taskEl.textContent = "等待 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;
+        if (task && task.title) {
+          taskEl.textContent = task.title;
+          taskEl.classList.remove("hidden");
+        } else {
+          taskEl.textContent = "";
+          taskEl.classList.add("hidden");
+        }
+      }
+
+      function approvePermission() {
+        if (!state.selectedId) return;
+        fetch("/api/sessions/" + encodeURIComponent(state.selectedId) + "/approve-permission", {
+          method: "POST",
+          credentials: "same-origin"
+        })
+          .then(function(res) { return res.json(); })
+          .then(function(data) {
+            if (data && data.error) {
+              showToast(data.error, "error");
+              return;
+            }
+            updateSessionSnapshot(data);
+            updateTaskDisplay();
+          })
+          .catch(function(error) {
+            showToast((error && error.message) || "无法批准授权。", "error");
+          });
+      }
+
+      function denyPermission() {
+        if (!state.selectedId) return;
+        fetch("/api/sessions/" + encodeURIComponent(state.selectedId) + "/deny-permission", {
+          method: "POST",
+          credentials: "same-origin"
+        })
+          .then(function(res) { return res.json(); })
+          .then(function(data) {
+            if (data && data.error) {
+              showToast(data.error, "error");
+              return;
+            }
+            updateSessionSnapshot(data);
+            updateTaskDisplay();
+          })
+          .catch(function(error) {
+            showToast((error && error.message) || "无法拒绝授权。", "error");
+          });
+      }
+
       function updateTerminalOutput(output) {
         if (!state.terminal) return;
         var normalized = normalizeTerminalOutput(output);
@@ -3290,17 +4839,16 @@
       }
 
       function setView(view) {
-        if (state.currentView === view) return;
-        state.currentView = view;
+        state.currentView = view || "terminal";
+        if (state.currentView !== "terminal") {
+          setTerminalInteractive(false);
+          closeKeyboardPopup();
+        }
         applyCurrentView();
-        if (view === "terminal") {
+        reconcileInteractiveState();
+        if (state.currentView === "terminal") {
           setTimeout(scheduleTerminalResize, 40);
         }
-
-        // Render chat if switching to chat view - force full render
-        if (view === "chat") {
-          renderChat(true);
-        }
       }
 
       function renderChat(forceFullRender) {
@@ -3345,6 +4893,90 @@
         }, 30);
       }
 
+      // Extract system info from PTY output that's not in structured messages
+      function extractPtySystemInfo(output, messages) {
+        if (!output || !messages || messages.length === 0) return [];
+        
+        // Strip ANSI escape sequences
+        function stripAnsi(text) {
+          return text.replace(/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, '');
+        }
+        
+        var clean = stripAnsi(output);
+        var systemInfo = [];
+        
+        // Find user input positions in output
+        var userInputs = [];
+        for (var i = 0; i < messages.length; i++) {
+          if (messages[i].role === 'user') {
+            var userText = '';
+            var content = messages[i].content;
+            if (typeof content === 'string') {
+              userText = content;
+            } else if (Array.isArray(content)) {
+              for (var j = 0; j < content.length; j++) {
+                if (content[j].type === 'text') {
+                  userText = content[j].text;
+                  break;
+                }
+              }
+            }
+            if (userText) {
+              userInputs.push({ text: userText, index: i });
+            }
+          }
+        }
+        
+        // Extract content before each user input
+        var lastPos = 0;
+        for (var i = 0; i < userInputs.length; i++) {
+          var userInput = userInputs[i];
+          var pos = clean.indexOf('❯ ' + userInput.text, lastPos);
+          if (pos === -1) {
+            // Try with newline
+            pos = clean.indexOf('\n❯ ' + userInput.text, lastPos);
+            if (pos !== -1) pos += 1;
+          }
+          
+          if (pos > lastPos) {
+            var segment = clean.substring(lastPos, pos);
+            // Extract meaningful system info
+            var lines = segment.split('\n');
+            var infoLines = [];
+            for (var j = 0; j < lines.length; j++) {
+              var line = lines[j].trim();
+              // Skip empty lines, separators, prompts, UI noise
+              if (!line || line.startsWith('────') || line === '❯' || line === '?' || line === '') continue;
+              
+              // Skip Claude Code UI elements
+              if (line.includes('Claude Code v') || 
+                  (line.includes('Opus') && line.includes('with')) || 
+                  (line.includes('Sonnet') && line.includes('with')) ||
+                  line.includes('API Usage') || line.includes('Billing') ||
+                  line.includes('for shortcuts') || line.includes('/effort') ||
+                  line.match(/^[▸▐▝▘▗▖█▌▍▎▏▔▁▂▃▄▅▆▇██]/) ||
+                  line.match(/^[▸▐▝▘▗▖█▌▍▎▏▔▁▂▃▄▅▆▇██]{3,}/)) {
+                continue;
+              }
+              
+              // Keep meaningful system messages
+              if (line.length > 3) {
+                infoLines.push(line);
+              }
+            }
+            if (infoLines.length > 0) {
+              systemInfo.push({ 
+                beforeMessage: userInput.index, 
+                content: infoLines.join('\n') 
+              });
+            }
+          }
+          lastPos = pos + userInput.text.length + 2; // +2 for '❯ '
+        }
+        
+        return systemInfo;
+      }
+
       function doRenderChat(forceFullRender) {
         var chatOutput = document.getElementById("chat-output");
         if (!chatOutput) return;
@@ -3424,10 +5056,45 @@
         var needsFullRender = forceRender || existingCount === 0 || msgCount !== existingCount;
 
         function fullRenderChat() {
-          chatMessages.innerHTML = messages.slice().reverse().map(renderChatMessage).join("");
+          // Extract system info from PTY output
+          var systemInfo = extractPtySystemInfo(selectedSession.output, messages);
+          
+          // Build HTML with system info cards interleaved
+          var html = '';
+          var reversedMessages = messages.slice().reverse();
+          var msgCount = messages.length;
+          
+          for (var i = 0; i < reversedMessages.length; i++) {
+            var msg = reversedMessages[i];
+            var originalIndex = msgCount - 1 - i; // Original index in messages array
+            
+            // Find system info for this message position
+            var sysInfo = null;
+            for (var j = 0; j < systemInfo.length; j++) {
+              if (systemInfo[j].beforeMessage === originalIndex) {
+                sysInfo = systemInfo[j];
+                break;
+              }
+            }
+            
+            // Render system info card if exists
+            if (sysInfo) {
+              html += '<div class="chat-message system-info">' +
+                '<div class="system-info-card">' +
+                  '<div class="system-info-header">ℹ️ 系统信息</div>' +
+                  '<div class="system-info-content">' + escapeHtml(sysInfo.content) + '</div>' +
+                '</div>' +
+              '</div>';
+            }
+            
+            // Render message
+            html += renderChatMessage(msg);
+          }
+          
+          chatMessages.innerHTML = html;
           attachAllCopyHandlers(chatMessages);
           // Only expand the single newest tool card (first chat-message = newest due to column-reverse)
-          var firstMsg = chatMessages.querySelector(".chat-message");
+          var firstMsg = chatMessages.querySelector(".chat-message:not(.system-info)");
           if (firstMsg) {
             var cards = firstMsg.querySelectorAll(".tool-use-card");
             if (cards.length > 0) {
@@ -3437,9 +5104,9 @@
               }
             }
           }
-          // Scroll to bottom (newest message) - with column-reverse, scrollTop=0 is visual bottom
+          // Scroll to bottom (newest message) - column-reverse: scrollTop=0 is visual bottom
           requestAnimationFrame(function() {
-            chatMessages.scrollTop = 0;
+            smartScrollToBottom(chatMessages);
           });
         }
 
@@ -3466,67 +5133,65 @@
           // Reverse so the newest ends up at the bottom
           newMessages.reverse();
           var fragment = document.createDocumentFragment();
+          var insertedEls = [];
           for (var i = 0; i < newMessages.length; i++) {
             var div = document.createElement("div");
             div.innerHTML = renderChatMessage(newMessages[i]);
             var el = div.firstElementChild;
             if (el) {
               el.classList.add("animate-in");
+              insertedEls.push(el);
               fragment.appendChild(el);
             }
           }
           chatMessages.insertBefore(fragment, chatMessages.firstChild);
           attachAllCopyHandlers(chatMessages);
           // Collapse all existing cards; new cards (with animate-in) stay expanded
-          collapseOldToolCards(chatMessages, fragment.children);
-          // Scroll to bottom (newest message) - with column-reverse, scrollTop=0 is visual bottom
+          collapseOldToolCards(chatMessages, insertedEls);
+          // Scroll to bottom (newest message) - column-reverse: scrollTop=0 is visual bottom
           requestAnimationFrame(function() {
-            chatMessages.scrollTop = 0;
+            smartScrollToBottom(chatMessages);
           });
         } else if (msgCount === existingCount && outputHash !== prevHash) {
-          // Same message count but content changed (streaming update) — update last message (newest visually)
-          // With column-reverse, first DOM child = newest message
-          var firstEl = chatMessages.querySelector(".chat-message");
-          if (firstEl && messages.length > 0) {
-            // The newest message is the last in the array (first in DOM due to reverse)
-            var newestMsg = messages[messages.length - 1];
-            var currentContent = firstEl.querySelector(".chat-message-bubble");
-            if (currentContent && newestMsg) {
-              // Re-render the full message element to handle both structured and string content
-              var tmpDiv = document.createElement("div");
-              tmpDiv.innerHTML = renderChatMessage(newestMsg);
-              var newEl = tmpDiv.firstElementChild;
-              if (newEl && newEl.querySelector(".chat-message-bubble")) {
-                var newBubble = newEl.querySelector(".chat-message-bubble");
-                // Only update if bubble content actually changed
-                if (newBubble && currentContent.innerHTML !== newBubble.innerHTML) {
-                  chatMessages.replaceChild(newEl, firstEl);
-                  attachCopyHandler(newEl);
-                  // Keep only the single newest tool card expanded, collapse all others
-                  var newestMsgEl = chatMessages.querySelector(".chat-message");
-                  var allCards = chatMessages.querySelectorAll(".tool-use-card");
-                  var newestCard = null;
-                  allCards.forEach(function(c) {
-                    if (newestMsgEl && newestMsgEl.contains(c)) {
-                      if (!newestCard) newestCard = c;
-                      else c.classList.add("collapsed");
-                    } else {
-                      c.classList.add("collapsed");
-                    }
-                  });
-                }
-              }
+          // Same message count but content changed (streaming update). Re-render in place
+          // by index so assistant growth, tool cards, and retroactive message fixes all show up.
+          var existingEls = Array.from(chatMessages.querySelectorAll(".chat-message"));
+          var reversedMessages = messages.slice().reverse();
+          var replacedAny = false;
+          for (var mi = 0; mi < reversedMessages.length && mi < existingEls.length; mi++) {
+            var currentEl = existingEls[mi];
+            var tmpWrap = document.createElement("div");
+            tmpWrap.innerHTML = renderChatMessage(reversedMessages[mi]);
+            var replacementEl = tmpWrap.firstElementChild;
+            if (!replacementEl) continue;
+            if (currentEl.innerHTML !== replacementEl.innerHTML || currentEl.className !== replacementEl.className) {
+              chatMessages.replaceChild(replacementEl, currentEl);
+              attachCopyHandler(replacementEl);
+              replacedAny = true;
             }
           }
+          if (replacedAny) {
+            requestAnimationFrame(function() {
+              smartScrollToBottom(chatMessages);
+            });
+            var newestMsgEl = chatMessages.querySelector(".chat-message");
+            var allCards = chatMessages.querySelectorAll(".tool-use-card");
+            var newestCard = null;
+            allCards.forEach(function(c) {
+              if (newestMsgEl && newestMsgEl.contains(c)) {
+                if (!newestCard) newestCard = c;
+                else c.classList.add("collapsed");
+              } else {
+                c.classList.add("collapsed");
+              }
+            });
+          }
         } else if (msgCount < existingCount) {
           fullRenderChat();
         }
 
         // Update todo progress bar from latest messages
         updateTodoProgress(messages);
-
-        // Update real-time token usage display
-        updateTokenUsageDisplay(messages);
       }
 
       // Smart scroll: only auto-scroll if user is near bottom
@@ -3534,7 +5199,7 @@
       function smartScrollToBottom(container) {
         var chatMsgs = container.querySelector ? container.querySelector(".chat-messages") : container;
         if (!chatMsgs) chatMsgs = container;
-        var threshold = 100;
+        var threshold = 200;
         // column-reverse: scrollTop=0 is the visual bottom; positive = scrolled up
         var isNearBottom = chatMsgs.scrollTop < threshold;
         if (isNearBottom) {
@@ -3566,42 +5231,6 @@
         }
       });
 
-      function updateTokenUsageDisplay(messages) {
-        var display = document.getElementById("token-usage-display");
-        var textEl = document.getElementById("token-usage-text");
-        if (!display || !textEl) return;
-
-        // Calculate total token usage from current messages
-        var totalInput = 0;
-        var totalOutput = 0;
-        var totalCache = 0;
-        var totalCost = 0;
-
-        for (var i = 0; i < messages.length; i++) {
-          var msg = messages[i];
-          if (msg.usage) {
-            if (msg.usage.inputTokens) totalInput += msg.usage.inputTokens;
-            if (msg.usage.outputTokens) totalOutput += msg.usage.outputTokens;
-            if (msg.usage.cacheReadInputTokens) totalCache += msg.usage.cacheReadInputTokens;
-            if (msg.usage.totalCostUsd) totalCost += msg.usage.totalCostUsd;
-          }
-        }
-
-        // Build token usage string
-        var parts = [];
-        if (totalInput > 0) parts.push("输入 " + totalInput);
-        if (totalOutput > 0) parts.push("输出 " + totalOutput);
-        if (totalCache > 0) parts.push("缓存 " + totalCache);
-        if (totalCost > 0) parts.push("$" + totalCost.toFixed(4));
-
-        if (parts.length > 0) {
-          textEl.textContent = parts.join("  ·  ");
-          display.classList.remove("hidden");
-        } else {
-          display.classList.add("hidden");
-        }
-      }
-
       function updateTodoProgress(messages) {
         var todos = null;
         // Scan all messages for latest TodoWrite tool_use
@@ -3868,7 +5497,6 @@
           if (line.indexOf("audited ") !== -1) continue;
           if (line.indexOf("found ") !== -1 && line.indexOf(" vulnerabilities") !== -1) continue;
           if (line.indexOf("Using ") !== -1 && line.indexOf(" for ") !== -1 && line.indexOf("session") !== -1) continue;
-          if (line.indexOf("Permissions") !== -1 && line.indexOf("mode") !== -1) continue;
           if (line.indexOf("You can use") !== -1) continue;
           if (line.indexOf("Press ") !== -1 && line.indexOf(" for") !== -1) continue;
           if (line.indexOf("type ") === 0 && line.indexOf(" to ") !== -1) continue;
@@ -4211,8 +5839,8 @@
         // Format result preview
         if (hasResult) {
           var lines = resultContent.split("\n");
-          if (lines.length > 3) {
-            preview = lines.slice(0, 3).join("\n") + "\n…";
+          if (lines.length > 10) {
+            preview = lines.slice(0, 10).join("\n") + "\n…";
           } else {
             preview = resultContent;
           }
@@ -4223,20 +5851,23 @@
         var fullResult = resultContent;
 
         var expandedHtml = "";
+        var shouldExpand = hasResult;
         if (hasResult) {
-          expandedHtml = '<div class="inline-tool-expanded">' +
+          expandedHtml = '<div class="inline-tool-expanded" style="display: ' + (shouldExpand ? 'block' : 'none') + ';">' +
             '<div class="inline-tool-result">' + formatInlineResult(resultContent, toolName) + '</div>' +
           '</div>';
         } else if (isError) {
-          expandedHtml = '<div class="inline-tool-expanded"><div class="inline-tool-result inline-tool-error">' +
+          expandedHtml = '<div class="inline-tool-expanded" style="display: none;"><div class="inline-tool-result inline-tool-error">' +
             escapeHtml(resultContent || "操作失败") + '</div></div>';
         } else if (!toolResult) {
-          expandedHtml = '<div class="inline-tool-expanded"><div class="inline-tool-loading">等待响应…</div></div>';
+          expandedHtml = '<div class="inline-tool-expanded" style="display: none;"><div class="inline-tool-loading">等待响应…</div></div>';
         }
 
         var extraInfoHtml = meta ? '<span class="inline-tool-meta">' + escapeHtml(meta) + '</span>' : '';
+        var extraClass = isError ? 'inline-tool-error-inline' : '';
+        if (hasResult) extraClass += ' inline-tool-open';
 
-        return '<div class="inline-tool ' + (isError ? 'inline-tool-error-inline' : '') + '" ' +
+        return '<div class="inline-tool ' + extraClass + '" ' +
           'data-result="' + escapeHtml(fullResult) + '" ' +
           'data-preview="' + previewDataAttr + '" ' +
           'data-status="' + (isError ? 'error' : (hasResult ? 'done' : 'pending')) + '" ' +
@@ -4305,6 +5936,23 @@
       }
 
       // GitHub-style diff display for Edit/Write/MultiEdit
+      function extractToolResultText(content) {
+        if (!content) return "";
+        if (typeof content === "string") return content;
+        if (Array.isArray(content)) {
+          return content.map(function(item) {
+            if (!item || typeof item !== "object") return "";
+            if (item.type === "text" && typeof item.text === "string") return item.text;
+            try {
+              return JSON.stringify(item);
+            } catch (e) {
+              return "";
+            }
+          }).filter(Boolean).join("\n");
+        }
+        return "";
+      }
+
       function renderDiffTool(block, toolResult, toolName) {
         var inputData = block.input || {};
         var path = inputData.file_path || inputData.path || "";
@@ -4317,7 +5965,8 @@
 
         var isWrite = toolName === "Write" || toolName === "MultiEdit";
         var isError = toolResult && toolResult.is_error;
-        var hasResult = toolResult && toolResult.content && toolResult.content.trim().length > 0;
+        var toolResultText = extractToolResultText(toolResult && toolResult.content);
+        var hasResult = !!(toolResultText && toolResultText.trim().length > 0);
 
         // Build side-by-side diff HTML (old | new columns)
         var leftCol = "";
@@ -4340,7 +5989,9 @@
         if (toolResult) {
           if (isError) {
             statusClass = "diff-error";
-            statusText = "❌ 修改失败";
+            statusText = toolResultText.indexOf("haven't granted") !== -1 || toolResultText.indexOf("permission") !== -1
+              ? "⏸ 等待授权"
+              : "❌ 修改失败";
           } else {
             statusClass = "diff-success";
             statusText = "✅ 已修改";
@@ -4372,9 +6023,7 @@
 
       function formatInlineResult(content, toolName) {
         if (!content) return '<span class="inline-tool-empty">无输出</span>';
-        var lines = content.split("\n");
-        var displayLines = lines.length > 8 ? lines.slice(0, 8).join("\n") + "\n…" : content;
-        return '<pre class="inline-tool-result-text">' + escapeHtml(displayLines) + '</pre>';
+        return '<pre class="inline-tool-result-text" style="max-height: 300px; overflow-y: auto;">' + escapeHtml(content) + '</pre>';
       }
 
       function renderToolUseCard(block, toolResult, index) {