@co0ontty/wand 1.18.0 → 1.18.12

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

@@ -167,6 +167,7 @@
             return false;
           }
         })(),
+        topbarMoreOpen: false,
         chatAutoFollow: (function() {
           try {
             var saved = localStorage.getItem(CHAT_AUTO_FOLLOW_STORAGE_KEY);
@@ -182,6 +183,8 @@
         chatScrollHandler: null,
         lastForegroundSyncAt: 0,
         foregroundSyncTimer: null,
+        wsReconnectAttempts: 0,
+        wsReconnectTimer: null,
         currentMessages: [],
         lastRenderedHash: 0,
         lastRenderedMsgCount: 0,
@@ -337,8 +340,11 @@
         var enabled = !!state.chatAutoFollow;
         button.classList.toggle("active", enabled);
         button.setAttribute("aria-pressed", enabled ? "true" : "false");
-        button.setAttribute("title", enabled ? "追踪底部：开启" : "追踪底部：已暂停");
-        button.textContent = enabled ? "追底" : "暂停";
+        button.setAttribute("title", enabled ? "追踪底部：开启（点击暂停）" : "追踪底部：已暂停（点击开启）");
+        button.setAttribute("aria-label", enabled ? "追踪底部：开启" : "追踪底部：已暂停");
+        button.innerHTML = enabled
+          ? '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 2.5l4.5 4.5 4.5-4.5"/><path d="M3.5 8.5l4.5 4.5 4.5-4.5"/></svg>'
+          : '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5.5 3v10"/><path d="M10.5 3v10"/></svg>';
       }
 
       function updateChatJumpToBottomButton() {
@@ -799,14 +805,11 @@
 
       function updateInstallPrompt() {
         // 显示或隐藏菜单栏中的安装按钮
+        var visible = !!(state.showInstallPrompt && state.deferredPrompt);
         var installBtn = document.getElementById('pwa-install-button');
-        if (installBtn) {
-          if (state.showInstallPrompt && state.deferredPrompt) {
-            installBtn.classList.remove('hidden');
-          } else {
-            installBtn.classList.add('hidden');
-          }
-        }
+        if (installBtn) installBtn.classList.toggle('hidden', !visible);
+        var topbarInstallItem = document.getElementById('topbar-install-item');
+        if (topbarInstallItem) topbarInstallItem.classList.toggle('hidden', !visible);
       }
 
       function renderBootLoading() {
@@ -821,36 +824,48 @@
           '</div>';
       }
 
-      function scheduleForegroundSync(reason) {
+      function scheduleForegroundSync(reason, opts) {
         if (!state.config) return;
         if (document.hidden) return;
+        var immediate = opts && opts.immediate === true;
         var now = Date.now();
-        if (now - state.lastForegroundSyncAt < 1500) return;
+        // 节流只是为了防止 visibilitychange/focus/pageshow 在前台切换时
+        // 连珠炮式触发同一份重连工作，不再借此延迟实际同步——之前用
+        // 80ms 兜延迟的版本会在前台事件后再去 loadOutput 全量重写
+        // terminal，但 wterm cols 那时还没被 ResizeObserver 自适应到，
+        // 写进去的全是按错列宽排版的内容，结果"切回前台/刷新页面 →
+        // 中间一大段都看不到"反而成了常态。
+        if (!immediate && now - state.lastForegroundSyncAt < 1500) return;
         state.lastForegroundSyncAt = now;
         if (state.foregroundSyncTimer) {
           clearTimeout(state.foregroundSyncTimer);
-        }
-        state.foregroundSyncTimer = setTimeout(function() {
           state.foregroundSyncTimer = null;
-          syncOnForeground(reason);
-        }, 80);
+        }
+        syncOnForeground(reason, immediate);
       }
 
-      function syncOnForeground(reason) {
+      function syncOnForeground(reason, force) {
         if (!state.config) return Promise.resolve();
         if (document.hidden) return Promise.resolve();
-        if (!state.ws || (state.ws.readyState !== WebSocket.OPEN && state.ws.readyState !== WebSocket.CONNECTING)) {
+        // On Android resume the previous WS may still report OPEN/CONNECTING
+        // for a few seconds because the close frame hasn't been delivered
+        // yet (TCP keepalive / Doze suspended the network stack). Force a
+        // fresh socket so we don't sit on a zombie connection.
+        if (force) {
+          forceReconnectWebSocket("resume-force");
+        } else if (!state.ws || (state.ws.readyState !== WebSocket.OPEN && state.ws.readyState !== WebSocket.CONNECTING)) {
           initWebSocket();
         }
         if (state.claudeHistoryLoaded) {
           loadClaudeHistory();
         }
-        return loadSessions({ skipSelectedOutputReload: true }).then(function() {
-          if (state.selectedId) {
-            return loadOutput(state.selectedId);
-          }
-          scheduleChatRender(true);
-        }).catch(function(e) {
+        // 不再 loadOutput 当前会话——WS 重连后服务端会主动推一条 init
+        // 消息，那条路径已经走 ensureTerminalFitWithRetry 强制按真实
+        // cols 重排 history，足够覆盖前台恢复时的同步需求。这里多加
+        // 一次 fetch + syncTerminalBuffer 反而会在 ws/http 两路的 output
+        // 之间来回 reset，导致 alt-screen 中正在绘制的 Claude TUI 被
+        // 中途清掉。只把会话列表刷一下，保证状态条/会话名等元数据是新的。
+        return loadSessions({ skipSelectedOutputReload: true }).catch(function(e) {
           console.error("[wand] foreground sync failed:", reason, e);
         });
       }
@@ -860,8 +875,15 @@
         window.__wandForegroundSyncBound = true;
 
         document.addEventListener("visibilitychange", function() {
-          if (!document.hidden) {
+          if (document.hidden) {
+            // Stop the reconnect backoff while hidden — the OS may freeze
+            // timers and then deliver them in a burst when we resume,
+            // creating a thundering-herd of connect attempts. The resume
+            // event will trigger one decisive reconnect instead.
+            cancelWsReconnect();
+          } else {
             scheduleForegroundSync("visibility");
+            ensureTerminalFitWithRetry("visibility");
           }
         });
 
@@ -876,6 +898,18 @@
         window.addEventListener("resume", function() {
           scheduleForegroundSync("resume");
         });
+
+        // Bridge from Android WebView host: MainActivity.onResume() calls
+        // evaluateJavascript to dispatch this event, which is the only
+        // reliable foreground signal once Doze/process-suspension has
+        // frozen page-level events (visibilitychange/focus/pageshow may
+        // fire late or not at all after a long suspend). Force-reconnect
+        // and force-refit immediately rather than waiting for the
+        // throttled scheduleForegroundSync path.
+        window.addEventListener("wand-android-resume", function() {
+          scheduleForegroundSync("android-resume", { immediate: true });
+          ensureTerminalFitWithRetry("android-resume");
+        });
       }
 
       function restoreLoginSession() {
@@ -1169,12 +1203,38 @@
             '</aside>' +
             '<main class="main-content">' +
               '<div class="main-header-row">' +
-                '<button id="sessions-toggle-button" class="floating-sidebar-toggle' + (state.sessionsDrawerOpen ? ' active' : '') + '" aria-label="切换会话侧栏" type="button">' +
-                  '<span class="hamburger-icon">' +
-                    '<span></span><span></span><span></span>' +
-                  '</span>' +
-                '</button>' +
-                '<span class="current-task hidden" id="current-task"></span>' +
+                '<div class="topbar-left">' +
+                  '<button id="sessions-toggle-button" class="floating-sidebar-toggle' + (state.sessionsDrawerOpen ? ' active' : '') + '" aria-label="切换会话侧栏" type="button">' +
+                    '<span class="hamburger-icon">' +
+                      '<span></span><span></span><span></span>' +
+                    '</span>' +
+                  '</button>' +
+                  '<span class="topbar-brand" aria-hidden="true">W</span>' +
+                '</div>' +
+                '<div class="topbar-center">' +
+                  (selectedSession
+                    ? (
+                        '<span class="topbar-session-title" title="' + escapeHtml(selectedSession.command || "") + '">' + escapeHtml(shortCommand(selectedSession.command)) + '</span>' +
+                        '<span class="session-status-pill ' + getSessionStatusClass(selectedSession) + '" title="' + escapeHtml(getSessionStatusLabel(selectedSession)) + '"><span class="session-status-dot"></span><span class="session-status-text">' + escapeHtml(getSessionStatusLabel(selectedSession)) + '</span></span>' +
+                        '<span class="current-task hidden" id="current-task"></span>' +
+                        (selectedSession.cwd ? '<span class="topbar-cwd" id="topbar-cwd" title="' + escapeHtml(selectedSession.cwd) + '" role="button" tabindex="0">' + escapeHtml(selectedSession.cwd) + '</span>' : '')
+                      )
+                    : '<span class="topbar-tagline">Wand 控制台</span>' +
+                      '<span class="current-task hidden" id="current-task"></span>'
+                  ) +
+                '</div>' +
+                '<div class="topbar-right">' +
+                  (selectedSession && selectedSession.cwd ? '<button id="topbar-file-button" class="topbar-btn square' + (state.filePanelOpen ? ' active' : '') + '" type="button" aria-label="文件" 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="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></button>' : '') +
+                  '<div class="topbar-more-wrap">' +
+                    '<button id="topbar-more-button" class="topbar-btn square' + (state.topbarMoreOpen ? ' active' : '') + '" type="button" aria-label="更多" aria-haspopup="menu" aria-expanded="' + (state.topbarMoreOpen ? 'true' : 'false') + '" title="更多"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>' +
+                    '<div id="topbar-more-menu" class="topbar-more-menu' + (state.topbarMoreOpen ? '' : ' hidden') + '" role="menu">' +
+                      '<button class="topbar-more-item" data-action="settings" type="button" role="menuitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg><span>设置</span></button>' +
+                      '<button class="topbar-more-item" data-action="refresh" type="button" role="menuitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg><span>刷新</span></button>' +
+                      '<button class="topbar-more-item' + (state.showInstallPrompt && state.deferredPrompt ? '' : ' hidden') + '" id="topbar-install-item" data-action="install" type="button" role="menuitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg><span>安装应用</span></button>' +
+                      '<button class="topbar-more-item topbar-more-item-danger" data-action="logout" type="button" role="menuitem"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg><span>退出</span></button>' +
+                    '</div>' +
+                  '</div>' +
+                '</div>' +
               '</div>' +
               // File panel backdrop (mobile)
               '<div id="file-panel-backdrop" class="file-panel-backdrop' + (state.filePanelOpen ? " open" : "") + '"></div>' +
@@ -1208,7 +1268,7 @@
               '</div>' +
               '<div id="chat-output" class="chat-container hidden">' +
                 '<div class="chat-overlay-controls">' +
-                  '<button id="chat-follow-toggle" class="chat-follow-toggle topbar-btn' + (state.chatAutoFollow ? ' active' : '') + '" type="button" aria-pressed="' + (state.chatAutoFollow ? 'true' : 'false') + '" title="' + (state.chatAutoFollow ? '追踪底部：开启' : '追踪底部：已暂停') + '">' + (state.chatAutoFollow ? '追底' : '暂停') + '</button>' +
+                  '<button id="chat-follow-toggle" class="chat-follow-toggle topbar-btn' + (state.chatAutoFollow ? ' active' : '') + '" type="button" aria-pressed="' + (state.chatAutoFollow ? 'true' : 'false') + '" aria-label="' + (state.chatAutoFollow ? '追踪底部：开启' : '追踪底部：已暂停') + '" title="' + (state.chatAutoFollow ? '追踪底部：开启（点击暂停）' : '追踪底部：已暂停（点击开启）') + '">' + (state.chatAutoFollow ? '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 2.5l4.5 4.5 4.5-4.5"/><path d="M3.5 8.5l4.5 4.5 4.5-4.5"/></svg>' : '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5.5 3v10"/><path d="M10.5 3v10"/></svg>') + '</button>' +
                 '</div>' +
                 '<button id="chat-jump-bottom" class="chat-jump-bottom' + (state.showChatJumpToBottom ? ' visible' : '') + '" type="button" title="回到底部并继续追底" aria-label="回到底部"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3.5v9M3.5 8l4.5 4.5L12.5 8"/></svg></button>' +
               '</div>' +
@@ -1412,58 +1472,81 @@
                   '<div class="settings-about-row"><span class="settings-label">Node.js 要求</span><span class="settings-value" id="settings-node-req">-</span></div>' +
                   '<div class="settings-about-row"><span class="settings-label">仓库地址</span><span class="settings-value" id="settings-repo-url"><a href="#" target="_blank" rel="noopener">-</a></span></div>' +
                 '</div>' +
-                '<div class="settings-update-section">' +
+                '<div class="settings-update-section" id="web-update-section">' +
+                  '<div class="settings-section-head">' +
+                    '<span class="settings-section-icon">🌐</span>' +
+                    '<div class="settings-section-head-text">' +
+                      '<h4 class="settings-section-heading">Web 端</h4>' +
+                      '<p class="settings-section-sub">浏览器访问的服务版本</p>' +
+                    '</div>' +
+                  '</div>' +
                   '<div class="settings-about-row">' +
                     '<span class="settings-label">最新版本</span>' +
                     '<span class="settings-value" id="settings-latest-version">-</span>' +
                   '</div>' +
                   '<div class="settings-update-actions">' +
-                    '<button id="check-update-button" class="btn btn-ghost btn-sm">\u68c0\u67e5\u66f4\u65b0</button>' +
+                    '<button id="check-update-button" class="btn btn-secondary btn-sm">\u68c0\u67e5\u66f4\u65b0</button>' +
                     '<button id="do-update-button" class="btn btn-primary btn-sm hidden">\u66f4\u65b0\u5230\u6700\u65b0\u7248</button>' +
                     '<button id="do-restart-button" class="btn btn-success btn-sm hidden">\u91cd\u542f\u751f\u6548</button>' +
                   '</div>' +
                   '<p id="update-message" class="hint hidden"></p>' +
-                  '<div class="settings-auto-update-row" style="display:flex;align-items:center;justify-content:space-between;margin-top:10px">' +
-                    '<span class="settings-label">自动更新</span>' +
-                    '<label style="position:relative;cursor:pointer">' +
+                  '<div class="settings-toggle-row">' +
+                    '<div class="settings-toggle-text">' +
+                      '<span class="settings-toggle-title">自动更新</span>' +
+                      '<span class="settings-toggle-desc">检测到新版本将自动下载安装并重启服务。</span>' +
+                    '</div>' +
+                    '<label class="settings-switch">' +
                       '<input type="checkbox" id="auto-update-web-toggle" class="switch-toggle">' +
                       '<span class="switch-slider"></span>' +
                     '</label>' +
                   '</div>' +
-                  '<p class="hint" style="margin-top:2px">开启后，检测到新版本将自动下载安装并重启服务。</p>' +
                 '</div>' +
-                '<div class="settings-update-section" id="android-apk-section">' +
+                '<div class="settings-update-section hidden" id="android-apk-section">' +
+                  '<div class="settings-section-head">' +
+                    '<span class="settings-section-icon">📱</span>' +
+                    '<div class="settings-section-head-text">' +
+                      '<h4 class="settings-section-heading">Android App</h4>' +
+                      '<p class="settings-section-sub">原生客户端版本与 APK 下载</p>' +
+                    '</div>' +
+                  '</div>' +
                   '<div id="android-apk-current-row" class="settings-about-row hidden">' +
                     '<span class="settings-label">当前版本</span>' +
                     '<span class="settings-value" id="settings-android-apk-current">-</span>' +
                   '</div>' +
-                  '<div id="android-apk-github-row" class="settings-about-row hidden">' +
+                  '<div id="android-apk-github-row" class="settings-about-row settings-about-row-action hidden">' +
                     '<span class="settings-label">线上版本</span>' +
-                    '<span class="settings-value" id="settings-android-apk-github" style="flex:1">-</span>' +
-                    '<button id="download-github-apk-btn" class="btn btn-ghost btn-sm hidden" type="button" style="margin-left:8px;flex-shrink:0">下载</button>' +
+                    '<span class="settings-value settings-value-flex" id="settings-android-apk-github">-</span>' +
+                    '<button id="download-github-apk-btn" class="btn btn-secondary btn-sm hidden" type="button">下载</button>' +
                   '</div>' +
-                  '<div id="android-apk-local-row" class="settings-about-row hidden">' +
+                  '<div id="android-apk-local-row" class="settings-about-row settings-about-row-action hidden">' +
                     '<span class="settings-label">本地版本</span>' +
-                    '<span class="settings-value" id="settings-android-apk-local" style="flex:1">-</span>' +
-                    '<button id="download-local-apk-btn" class="btn btn-ghost btn-sm hidden" type="button" style="margin-left:8px;flex-shrink:0">下载</button>' +
+                    '<span class="settings-value settings-value-flex" id="settings-android-apk-local">-</span>' +
+                    '<button id="download-local-apk-btn" class="btn btn-secondary btn-sm hidden" type="button">下载</button>' +
                   '</div>' +
-                  '<div id="android-auto-update-row" class="hidden" style="display:flex;align-items:center;justify-content:space-between;margin-top:10px">' +
-                    '<span class="settings-label">自动更新</span>' +
-                    '<label style="position:relative;cursor:pointer">' +
+                  '<div id="android-auto-update-row" class="settings-toggle-row hidden">' +
+                    '<div class="settings-toggle-text">' +
+                      '<span class="settings-toggle-title">自动更新</span>' +
+                      '<span class="settings-toggle-desc" id="android-auto-update-hint">检测到新版 APK 将自动下载安装。</span>' +
+                    '</div>' +
+                    '<label class="settings-switch">' +
                       '<input type="checkbox" id="auto-update-apk-toggle" class="switch-toggle">' +
                       '<span class="switch-slider"></span>' +
                     '</label>' +
                   '</div>' +
-                  '<p id="android-auto-update-hint" class="hint hidden" style="margin-top:2px">开启后，检测到新版 APK 将自动下载安装。</p>' +
                   '<p id="android-apk-message" class="hint hidden"></p>' +
                 '</div>' +
                 '<div class="settings-update-section" id="android-connect-section">' +
-                  '<div class="settings-section-title" style="margin-bottom:8px">App 连接码</div>' +
+                  '<div class="settings-section-head">' +
+                    '<span class="settings-section-icon">🔗</span>' +
+                    '<div class="settings-section-head-text">' +
+                      '<h4 class="settings-section-heading">App 连接码</h4>' +
+                      '<p class="settings-section-sub">粘贴到 Android App 即可自动连接，无需密码；改密码后失效。</p>' +
+                    '</div>' +
+                  '</div>' +
                   '<div class="settings-connect-url-box">' +
-                    '<code id="android-connect-code" class="settings-connect-url-text" style="font-size:12px;word-break:break-all">-</code>' +
-                    '<button id="copy-connect-code-button" class="btn btn-ghost btn-sm" type="button" title="复制连接码">复制</button>' +
+                    '<code id="android-connect-code" class="settings-connect-url-text">-</code>' +
+                    '<button id="copy-connect-code-button" class="btn btn-secondary btn-sm" type="button" title="复制连接码">复制</button>' +
                   '</div>' +
-                  '<p class="hint">复制此连接码粘贴到 Android App 即可自动连接，无需输入密码。修改密码后连接码自动失效。</p>' +
                 '</div>' +
               '</div>' +
 
@@ -1473,54 +1556,88 @@
                   '<h3 class="settings-panel-title">通知</h3>' +
                   '<p class="settings-panel-desc">设置提示音、系统通知和浏览器通知的行为。</p>' +
                 '</div>' +
-                '<div class="settings-section-title">\u901a\u77e5\u504f\u597d</div>' +
-                '<div class="field field-inline">' +
-                  '<input id="cfg-notif-sound" type="checkbox" class="field-checkbox" />' +
-                  '<label class="field-label" for="cfg-notif-sound">\u64ad\u653e\u63d0\u793a\u97f3</label>' +
-                '</div>' +
-                '<p class="hint" style="margin-top:0;margin-bottom:10px">\u91cd\u8981\u901a\u77e5\uff08\u7248\u672c\u66f4\u65b0\u3001\u6743\u9650\u7b49\u5f85\u7b49\uff09\u65f6\u64ad\u653e\u67d4\u548c\u7684\u63d0\u793a\u97f3</p>' +
-                '<div class="field" id="notif-volume-field" style="margin-bottom:10px">' +
-                  '<label class="field-label" style="margin-bottom:4px">\u97f3\u91cf</label>' +
-                  '<div style="display:flex;align-items:center;gap:8px">' +
-                    '<input id="cfg-notif-volume" type="range" min="0" max="100" step="5" style="flex:1;accent-color:var(--accent)" />' +
-                    '<span id="cfg-notif-volume-val" style="min-width:32px;text-align:right;font-size:12px;color:var(--text-secondary)">80%</span>' +
+                '<div class="settings-notification-section">' +
+                  '<div class="settings-section-head">' +
+                    '<span class="settings-section-icon">🔔</span>' +
+                    '<div class="settings-section-head-text">' +
+                      '<h4 class="settings-section-heading">通知偏好</h4>' +
+                      '<p class="settings-section-sub">提示音与应用内通知气泡</p>' +
+                    '</div>' +
+                  '</div>' +
+                  '<div class="settings-toggle-row">' +
+                    '<div class="settings-toggle-text">' +
+                      '<label class="settings-toggle-title" for="cfg-notif-sound">播放提示音</label>' +
+                      '<span class="settings-toggle-desc">重要通知（版本更新、权限等待等）时播放柔和提示音。</span>' +
+                    '</div>' +
+                    '<label class="settings-switch">' +
+                      '<input id="cfg-notif-sound" type="checkbox" class="switch-toggle" />' +
+                      '<span class="switch-slider"></span>' +
+                    '</label>' +
+                  '</div>' +
+                  '<div class="settings-range-row" id="notif-volume-field">' +
+                    '<label class="settings-range-label" for="cfg-notif-volume">音量</label>' +
+                    '<input id="cfg-notif-volume" type="range" min="0" max="100" step="5" class="settings-range" />' +
+                    '<span id="cfg-notif-volume-val" class="settings-range-value">80%</span>' +
+                  '</div>' +
+                  '<div class="settings-toggle-row">' +
+                    '<div class="settings-toggle-text">' +
+                      '<label class="settings-toggle-title" for="cfg-notif-bubble">应用内通知气泡</label>' +
+                      '<span class="settings-toggle-desc">在页面顶部弹出浮动通知气泡。</span>' +
+                    '</div>' +
+                    '<label class="settings-switch">' +
+                      '<input id="cfg-notif-bubble" type="checkbox" class="switch-toggle" />' +
+                      '<span class="switch-slider"></span>' +
+                    '</label>' +
                   '</div>' +
                 '</div>' +
-                '<div class="field field-inline">' +
-                  '<input id="cfg-notif-bubble" type="checkbox" class="field-checkbox" />' +
-                  '<label class="field-label" for="cfg-notif-bubble">\u5e94\u7528\u5185\u901a\u77e5\u6c14\u6ce1</label>' +
-                '</div>' +
-                '<p class="hint" style="margin-top:0;margin-bottom:10px">\u5728\u9875\u9762\u9876\u90e8\u5f39\u51fa\u6d6e\u52a8\u901a\u77e5\u6c14\u6ce1</p>' +
-                '<div id="native-sound-section" class="settings-notification-section hidden" style="margin-top:6px">' +
-                  '<div class="settings-section-title">\u7cfb\u7edf\u901a\u77e5\u94c3\u58f0</div>' +
-                  '<div class="settings-about-row">' +
-                    '<span class="settings-label">\u94c3\u58f0</span>' +
-                    '<div style="display:flex;align-items:center;gap:6px">' +
-                      '<select id="native-sound-select" class="field-select" style="min-width:100px"></select>' +
-                      '<button id="native-sound-preview" class="btn btn-ghost btn-sm">\u25b6 \u8bd5\u542c</button>' +
+                '<div id="native-sound-section" class="settings-notification-section hidden">' +
+                  '<div class="settings-section-head">' +
+                    '<span class="settings-section-icon">🎵</span>' +
+                    '<div class="settings-section-head-text">' +
+                      '<h4 class="settings-section-heading">系统通知铃声</h4>' +
+                      '<p class="settings-section-sub">选择 Android 系统通知使用的铃声</p>' +
                     '</div>' +
                   '</div>' +
-                  '<p class="hint" style="margin-top:0">\u9009\u62e9 Android \u7cfb\u7edf\u901a\u77e5\u4f7f\u7528\u7684\u94c3\u58f0</p>' +
+                  '<div class="settings-row-with-action">' +
+                    '<select id="native-sound-select" class="field-input field-select"></select>' +
+                    '<button id="native-sound-preview" class="btn btn-secondary btn-sm" type="button">▶ 试听</button>' +
+                  '</div>' +
                 '</div>' +
-                '<div id="native-haptic-section" class="settings-notification-section hidden" style="margin-top:6px">' +
-                  '<div class="settings-section-title">\u89e6\u611f\u53cd\u9988</div>' +
-                  '<div class="field field-inline" style="margin:4px 0">' +
-                    '<input id="cfg-haptic-enabled" type="checkbox" class="field-checkbox" />' +
-                    '<label class="field-label" for="cfg-haptic-enabled">\u542f\u7528\u89e6\u611f\u53cd\u9988</label>' +
+                '<div id="native-haptic-section" class="settings-notification-section hidden">' +
+                  '<div class="settings-section-head">' +
+                    '<span class="settings-section-icon">📳</span>' +
+                    '<div class="settings-section-head-text">' +
+                      '<h4 class="settings-section-heading">触感反馈</h4>' +
+                      '<p class="settings-section-sub">按钮操作和任务完成时提供振动反馈</p>' +
+                    '</div>' +
+                  '</div>' +
+                  '<div class="settings-toggle-row">' +
+                    '<div class="settings-toggle-text">' +
+                      '<label class="settings-toggle-title" for="cfg-haptic-enabled">启用触感反馈</label>' +
+                    '</div>' +
+                    '<label class="settings-switch">' +
+                      '<input id="cfg-haptic-enabled" type="checkbox" class="switch-toggle" />' +
+                      '<span class="switch-slider"></span>' +
+                    '</label>' +
                   '</div>' +
-                  '<p class="hint" style="margin-top:0">\u6309\u94ae\u64cd\u4f5c\u548c\u4efb\u52a1\u5b8c\u6210\u65f6\u63d0\u4f9b\u632f\u52a8\u53cd\u9988</p>' +
                 '</div>' +
-                '<div class="settings-notification-section" style="margin-top:6px">' +
-                  '<div class="settings-section-title">\u6d4f\u89c8\u5668\u901a\u77e5</div>' +
+                '<div class="settings-notification-section">' +
+                  '<div class="settings-section-head">' +
+                    '<span class="settings-section-icon">🌐</span>' +
+                    '<div class="settings-section-head-text">' +
+                      '<h4 class="settings-section-heading">浏览器通知</h4>' +
+                      '<p class="settings-section-sub">来自系统通知中心的弹窗</p>' +
+                    '</div>' +
+                  '</div>' +
                   '<div class="settings-about-row">' +
-                    '<span class="settings-label">\u6388\u6743\u72b6\u6001</span>' +
+                    '<span class="settings-label">授权状态</span>' +
                     '<span class="settings-value" id="notification-permission-status">-</span>' +
                   '</div>' +
                   '<div class="settings-update-actions">' +
-                    '<button id="notification-request-btn" class="btn btn-ghost btn-sm hidden">\u6388\u6743\u901a\u77e5</button>' +
-                    '<button id="notification-reset-btn" class="btn btn-ghost btn-sm hidden">\u91cd\u65b0\u6388\u6743</button>' +
-                    '<button id="notification-test-btn" class="btn btn-ghost btn-sm">\u53d1\u9001\u6d4b\u8bd5\u901a\u77e5</button>' +
-                    '<button id="notification-test-delay-btn" class="btn btn-ghost btn-sm">10 \u79d2\u540e\u53d1\u9001</button>' +
+                    '<button id="notification-request-btn" class="btn btn-secondary btn-sm hidden" type="button">授权通知</button>' +
+                    '<button id="notification-reset-btn" class="btn btn-secondary btn-sm hidden" type="button">重新授权</button>' +
+                    '<button id="notification-test-btn" class="btn btn-secondary btn-sm" type="button">发送测试通知</button>' +
+                    '<button id="notification-test-delay-btn" class="btn btn-secondary btn-sm" type="button">10 秒后发送</button>' +
                   '</div>' +
                   '<p id="notification-test-message" class="hint hidden"></p>' +
                 '</div>' +
@@ -1578,13 +1695,13 @@
                 '<p class="field-hint" style="margin-top:-4px;">设置回复语言后，Claude 将尽量使用指定语言回复。</p>' +
                 '<div class="field">' +
                   '<label class="field-label" for="cfg-default-model">默认模型</label>' +
-                  '<div style="display:flex;gap:8px;align-items:center;">' +
-                    '<select id="cfg-default-model" class="field-input" style="flex:1;">' +
+                  '<div class="settings-row-with-action">' +
+                    '<select id="cfg-default-model" class="field-input field-select">' +
                       '<option value="">跟随 Claude Code 默认</option>' +
                     '</select>' +
-                    '<button type="button" id="cfg-default-model-refresh" class="btn btn-ghost btn-sm" title="刷新模型列表">刷新</button>' +
+                    '<button type="button" id="cfg-default-model-refresh" class="btn btn-secondary btn-sm" title="刷新模型列表">刷新</button>' +
                   '</div>' +
-                  '<p class="field-hint" id="cfg-default-model-version" style="margin-top:4px;">新建会话时默认使用该模型；运行中的会话可在输入框切换。</p>' +
+                  '<p class="field-hint" id="cfg-default-model-version">新建会话时默认使用该模型；运行中的会话可在输入框切换。</p>' +
                 '</div>' +
                 '<div class="field">' +
                   '<label class="field-label" for="cfg-cwd">默认工作目录</label>' +
@@ -1595,24 +1712,29 @@
                   '<input id="cfg-shell" type="text" class="field-input" placeholder="/bin/bash" />' +
                 '</div>' +
                 (typeof WandNative !== "undefined" && typeof WandNative.getAppIcon === "function" ?
-                '<div style="margin-bottom:16px">' +
-                  '<div class="settings-section-title">应用图标</div>' +
-                  '<p class="hint" style="margin-top:-4px;margin-bottom:10px">选择 App 启动器图标，返回桌面后生效</p>' +
-                  '<div id="app-icon-picker" style="display:flex;gap:16px">' +
-                    '<div class="app-icon-option" data-icon="shorthair" style="cursor:pointer;text-align:center">' +
-                      '<div class="app-icon-preview" style="width:56px;height:56px;border-radius:12px;overflow:hidden;border:3px solid transparent;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;margin-bottom:4px">' +
-                        PIXEL_AVATAR.user +
-                      '</div>' +
-                      '<span style="font-size:0.72rem;color:var(--text-secondary)">赛博虎妞</span>' +
+                '<div class="settings-app-icon-block">' +
+                  '<div class="settings-section-head">' +
+                    '<span class="settings-section-icon">🎨</span>' +
+                    '<div class="settings-section-head-text">' +
+                      '<h4 class="settings-section-heading">应用图标</h4>' +
+                      '<p class="settings-section-sub">选择 App 启动器图标，返回桌面后生效</p>' +
                     '</div>' +
-                    '<div class="app-icon-option" data-icon="garfield" style="cursor:pointer;text-align:center">' +
-                      '<div class="app-icon-preview" style="width:56px;height:56px;border-radius:12px;overflow:hidden;border:3px solid transparent;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;margin-bottom:4px">' +
+                  '</div>' +
+                  '<div id="app-icon-picker" class="settings-app-icon-picker">' +
+                    '<button type="button" class="settings-app-icon-option" data-icon="shorthair">' +
+                      '<span class="settings-app-icon-preview">' +
+                        PIXEL_AVATAR.user +
+                      '</span>' +
+                      '<span class="settings-app-icon-label">赛博虎妞</span>' +
+                    '</button>' +
+                    '<button type="button" class="settings-app-icon-option" data-icon="garfield">' +
+                      '<span class="settings-app-icon-preview">' +
                         PIXEL_AVATAR.assistant +
-                      '</div>' +
-                      '<span style="font-size:0.72rem;color:var(--text-secondary)">勤劳初二</span>' +
-                    '</div>' +
+                      '</span>' +
+                      '<span class="settings-app-icon-label">勤劳初二</span>' +
+                    '</button>' +
                   '</div>' +
-                  '<p id="app-icon-message" class="hint hidden" style="margin-top:8px"></p>' +
+                  '<p id="app-icon-message" class="hint hidden"></p>' +
                 '</div>'
                 : '') +
                 '<div class="settings-actions settings-actions-sticky">' +
@@ -1628,7 +1750,13 @@
                   '<p class="settings-panel-desc">管理登录密码与 SSL 证书，敏感变更请确认后再保存。</p>' +
                 '</div>' +
                 '<div class="settings-card">' +
-                  '<h3 class="settings-section-title">\ud83d\udd12 修改密码</h3>' +
+                  '<div class="settings-card-head">' +
+                    '<span class="settings-card-icon">\ud83d\udd12</span>' +
+                    '<div class="settings-card-head-text">' +
+                      '<h3 class="settings-card-title">修改密码</h3>' +
+                      '<p class="settings-card-desc">至少 6 个字符；保存后下次登录生效。</p>' +
+                    '</div>' +
+                  '</div>' +
                   '<div class="field">' +
                     '<label class="field-label" for="new-password">新密码</label>' +
                     '<input id="new-password" type="password" class="field-input" placeholder="输入新密码（至少 6 个字符）" autocomplete="new-password" />' +
@@ -1637,22 +1765,45 @@
                     '<label class="field-label" for="confirm-password">确认密码</label>' +
                     '<input id="confirm-password" type="password" class="field-input" placeholder="再次输入新密码" autocomplete="new-password" />' +
                   '</div>' +
-                  '<button id="save-password-button" class="btn btn-primary btn-block">保存密码</button>' +
+                  '<div class="settings-card-actions">' +
+                    '<button id="save-password-button" class="btn btn-primary">保存密码</button>' +
+                  '</div>' +
                   '<p id="settings-error" class="error-message hidden"></p>' +
-                  '<p id="settings-success" class="hint hidden" style="color: var(--success);"></p>' +
+                  '<p id="settings-success" class="hint settings-success-message hidden"></p>' +
                 '</div>' +
                 '<div class="settings-card">' +
-                  '<h3 class="settings-section-title">\ud83d\udd10 SSL 证书</h3>' +
-                  '<p class="settings-hint" id="cert-status">加载中...</p>' +
+                  '<div class="settings-card-head">' +
+                    '<span class="settings-card-icon">\ud83d\udd10</span>' +
+                    '<div class="settings-card-head-text">' +
+                      '<h3 class="settings-card-title">SSL 证书</h3>' +
+                      '<p class="settings-card-desc" id="cert-status">加载中...</p>' +
+                    '</div>' +
+                  '</div>' +
                   '<div class="field">' +
                     '<label class="field-label" for="cert-key-file">私钥文件 (.key)</label>' +
-                    '<input id="cert-key-file" type="file" class="field-input field-file" accept=".key,.pem" />' +
+                    '<div class="file-picker">' +
+                      '<input id="cert-key-file" type="file" class="file-picker-input" accept=".key,.pem" />' +
+                      '<label for="cert-key-file" class="file-picker-trigger">' +
+                        '<svg class="file-picker-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>' +
+                        '<span class="file-picker-label">选择私钥</span>' +
+                      '</label>' +
+                      '<span class="file-picker-name" data-default="未选择文件">未选择文件</span>' +
+                    '</div>' +
                   '</div>' +
                   '<div class="field">' +
                     '<label class="field-label" for="cert-cert-file">证书文件 (.crt/.pem)</label>' +
-                    '<input id="cert-cert-file" type="file" class="field-input field-file" accept=".crt,.pem,.cert" />' +
+                    '<div class="file-picker">' +
+                      '<input id="cert-cert-file" type="file" class="file-picker-input" accept=".crt,.pem,.cert" />' +
+                      '<label for="cert-cert-file" class="file-picker-trigger">' +
+                        '<svg class="file-picker-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>' +
+                        '<span class="file-picker-label">选择证书</span>' +
+                      '</label>' +
+                      '<span class="file-picker-name" data-default="未选择文件">未选择文件</span>' +
+                    '</div>' +
+                  '</div>' +
+                  '<div class="settings-card-actions">' +
+                    '<button id="upload-cert-button" class="btn btn-primary">上传证书</button>' +
                   '</div>' +
-                  '<button id="upload-cert-button" class="btn btn-primary btn-block">上传证书</button>' +
                   '<p id="cert-message" class="hint hidden"></p>' +
                 '</div>' +
               '</div>' +
@@ -1727,7 +1878,7 @@
       }
 
       function renderSessions() {
-        var activeSessions = state.sessions.filter(function(session) { return !session.archived && !session.resumedToSessionId; });
+        var activeSessions = state.sessions.filter(function(session) { return !session.archived; });
         var archivedSessions = state.sessions.filter(function(session) { return session.archived; });
         var groups = [];
         groups.push(renderSessionManageBar());
@@ -1900,9 +2051,7 @@
       }
 
       function getSelectableSessions() {
-        return state.sessions.filter(function(session) {
-          return session.archived || !session.resumedToSessionId;
-        });
+        return state.sessions.slice();
       }
 
       function countSelectableItems() {
@@ -2649,10 +2798,8 @@
         var statusMap = {
           "stopped": "已停止",
           "running": "运行中",
-          "idle": "空闲",
-          "thinking": "思考中",
-          "waiting-input": "等待输入",
-          "initializing": "启动中"
+          "exited": "已退出",
+          "failed": "已失败"
         };
         return statusMap[session.status] || session.status;
       }
@@ -3363,7 +3510,7 @@
         // App icon picker (APK only)
         var appIconPicker = document.getElementById("app-icon-picker");
         if (appIconPicker) {
-          var appIconOpts = appIconPicker.querySelectorAll(".app-icon-option");
+          var appIconOpts = appIconPicker.querySelectorAll(".settings-app-icon-option");
           for (var ai = 0; ai < appIconOpts.length; ai++) {
             appIconOpts[ai].addEventListener("click", function() {
               var iconName = this.getAttribute("data-icon");
@@ -3384,6 +3531,24 @@
         }
         var uploadCertBtn = document.getElementById("upload-cert-button");
         if (uploadCertBtn) uploadCertBtn.addEventListener("click", uploadCertificates);
+        var filePickerInputs = document.querySelectorAll(".file-picker-input");
+        for (var fpi = 0; fpi < filePickerInputs.length; fpi++) {
+          (function(input) {
+            input.addEventListener("change", function() {
+              var picker = input.closest(".file-picker");
+              if (!picker) return;
+              var nameEl = picker.querySelector(".file-picker-name");
+              if (!nameEl) return;
+              if (input.files && input.files[0]) {
+                nameEl.textContent = input.files[0].name;
+                picker.classList.add("file-picker-has-file");
+              } else {
+                nameEl.textContent = nameEl.getAttribute("data-default") || "未选择文件";
+                picker.classList.remove("file-picker-has-file");
+              }
+            });
+          })(filePickerInputs[fpi]);
+        }
         var checkUpdateBtn = document.getElementById("check-update-button");
         if (checkUpdateBtn) checkUpdateBtn.addEventListener("click", checkForUpdate);
         var doUpdateBtn = document.getElementById("do-update-button");
@@ -3678,6 +3843,88 @@
         var filePanelBackdrop = document.getElementById("file-panel-backdrop");
         if (filePanelBackdrop) filePanelBackdrop.addEventListener("click", closeFilePanel);
 
+        // Topbar: file button (mirrors toggleFilePanel)
+        var topbarFileBtn = document.getElementById("topbar-file-button");
+        if (topbarFileBtn) topbarFileBtn.addEventListener("click", toggleFilePanel);
+
+        // Topbar: cwd click → open file panel
+        var topbarCwdEl = document.getElementById("topbar-cwd");
+        if (topbarCwdEl) {
+          topbarCwdEl.addEventListener("click", function() {
+            if (!state.filePanelOpen) toggleFilePanel();
+          });
+          topbarCwdEl.addEventListener("keydown", function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              if (!state.filePanelOpen) toggleFilePanel();
+            }
+          });
+        }
+
+        // Topbar: more menu
+        var topbarMoreBtn = document.getElementById("topbar-more-button");
+        var topbarMoreMenu = document.getElementById("topbar-more-menu");
+        if (topbarMoreBtn && topbarMoreMenu) {
+          topbarMoreBtn.addEventListener("click", function(e) {
+            e.stopPropagation();
+            state.topbarMoreOpen = !state.topbarMoreOpen;
+            topbarMoreMenu.classList.toggle("hidden", !state.topbarMoreOpen);
+            topbarMoreBtn.classList.toggle("active", state.topbarMoreOpen);
+            topbarMoreBtn.setAttribute("aria-expanded", state.topbarMoreOpen ? "true" : "false");
+          });
+          topbarMoreMenu.addEventListener("click", function(e) {
+            var btn = e.target && e.target.closest ? e.target.closest(".topbar-more-item") : null;
+            if (!btn) return;
+            var action = btn.getAttribute("data-action");
+            // Close menu first regardless of action
+            state.topbarMoreOpen = false;
+            topbarMoreMenu.classList.add("hidden");
+            topbarMoreBtn.classList.remove("active");
+            topbarMoreBtn.setAttribute("aria-expanded", "false");
+            switch (action) {
+              case "settings":
+                openSettingsModal();
+                break;
+              case "refresh":
+                window.location.reload();
+                break;
+              case "install":
+                if (state.deferredPrompt) {
+                  state.deferredPrompt.prompt();
+                  state.deferredPrompt.userChoice.then(function() {
+                    state.deferredPrompt = null;
+                    state.showInstallPrompt = false;
+                    updateInstallPrompt();
+                  });
+                }
+                break;
+              case "logout":
+                logout();
+                break;
+            }
+          });
+          // Close on outside click
+          document.addEventListener("click", function(e) {
+            if (!state.topbarMoreOpen) return;
+            var wrap = topbarMoreMenu.parentElement;
+            if (wrap && !wrap.contains(e.target)) {
+              state.topbarMoreOpen = false;
+              topbarMoreMenu.classList.add("hidden");
+              topbarMoreBtn.classList.remove("active");
+              topbarMoreBtn.setAttribute("aria-expanded", "false");
+            }
+          });
+          // Close on ESC
+          document.addEventListener("keydown", function(e) {
+            if (e.key === "Escape" && state.topbarMoreOpen) {
+              state.topbarMoreOpen = false;
+              topbarMoreMenu.classList.add("hidden");
+              topbarMoreBtn.classList.remove("active");
+              topbarMoreBtn.setAttribute("aria-expanded", "false");
+            }
+          });
+        }
+
         // Terminal scale controls (topbar)
         var scaleDownBtn = document.getElementById("terminal-scale-down-top");
         var scaleUpBtn = document.getElementById("terminal-scale-up-top");
@@ -4547,9 +4794,148 @@
         requestSyncScrollbar();
       }
 
+      // ──────── East-Asian-Wide padding for wterm WASM ────────
+      //
+      // wterm's WASM grid (as of @wterm/core 0.1.8/0.1.9) treats every
+      // codepoint as occupying exactly 1 cell, while node-pty's backend
+      // and Claude Code's TUI emit cursor-positioning sequences that
+      // assume CJK / fullwidth / emoji codepoints occupy 2 columns
+      // (Unicode TR11 East-Asian-Width = W or F). The mismatch makes
+      // every CSI cursor move after CJK output drift by N/2 columns,
+      // causing in-place rewrites (thinking spinner, todo list,
+      // permission menus) to leave torn residue like "替替换换".
+      //
+      // Fix: insert U+2060 (Word Joiner — zero-width, unbreakable) after
+      // each wide codepoint before handing the byte stream to the WASM
+      // grid. The WJ takes one cell, so wide chars now occupy 2 cells —
+      // matching the backend's column accounting exactly. The browser
+      // renders WJ at zero width, so the visual layout stays correct.
+      //
+      // The scanner is ANSI-aware: it tracks ESC / CSI / OSC / DCS
+      // / PM / APC state across chunk boundaries so wide codepoints
+      // inside escape sequences (e.g. OSC window-title payloads) are
+      // not padded — that would break sequence parsing.
+      function isEastAsianWide(cp) {
+        if (cp < 0x1100) return false;
+        return (
+          (cp >= 0x1100 && cp <= 0x115f) ||
+          (cp >= 0x2329 && cp <= 0x232a) ||
+          (cp >= 0x2e80 && cp <= 0x303e) ||
+          (cp >= 0x3041 && cp <= 0x33ff) ||
+          (cp >= 0x3400 && cp <= 0x4dbf) ||
+          (cp >= 0x4e00 && cp <= 0x9fff) ||
+          (cp >= 0xa000 && cp <= 0xa4cf) ||
+          (cp >= 0xac00 && cp <= 0xd7a3) ||
+          (cp >= 0xf900 && cp <= 0xfaff) ||
+          (cp >= 0xfe30 && cp <= 0xfe4f) ||
+          (cp >= 0xff00 && cp <= 0xff60) ||
+          (cp >= 0xffe0 && cp <= 0xffe6) ||
+          (cp >= 0x1f000 && cp <= 0x1f9ff) ||
+          (cp >= 0x20000 && cp <= 0x2fffd) ||
+          (cp >= 0x30000 && cp <= 0x3fffd)
+        );
+      }
+
+      var WAND_WIDE_FILLER = "\u2060";
+
+      function createWideParserState() { return { mode: "normal" }; }
+
+      function widePadAnsi(data, st) {
+        if (!data) return "";
+        var s = String(data);
+        var out = "";
+        for (var i = 0; i < s.length; i++) {
+          var code = s.charCodeAt(i);
+          var cp = code;
+          var consumed = 1;
+          if (code >= 0xd800 && code <= 0xdbff && i + 1 < s.length) {
+            var lo = s.charCodeAt(i + 1);
+            if (lo >= 0xdc00 && lo <= 0xdfff) {
+              cp = (code - 0xd800) * 0x400 + (lo - 0xdc00) + 0x10000;
+              consumed = 2;
+            }
+          }
+          var ch = consumed === 2 ? s.substr(i, 2) : s.charAt(i);
+          switch (st.mode) {
+            case "normal":
+              if (cp === 0x1b) { st.mode = "esc"; out += ch; }
+              else if (cp === 0x9b) { st.mode = "csi"; out += ch; }
+              else if (cp === 0x9d || cp === 0x90 || cp === 0x9e || cp === 0x9f) {
+                st.mode = "string"; out += ch;
+              } else {
+                out += ch;
+                if (isEastAsianWide(cp)) out += WAND_WIDE_FILLER;
+              }
+              break;
+            case "esc":
+              out += ch;
+              if (cp === 0x5b) st.mode = "csi";
+              else if (cp === 0x5d || cp === 0x50 || cp === 0x58 ||
+                       cp === 0x5e || cp === 0x5f) st.mode = "string";
+              else st.mode = "normal";
+              break;
+            case "csi":
+              out += ch;
+              if (cp >= 0x40 && cp <= 0x7e) st.mode = "normal";
+              break;
+            case "string":
+              out += ch;
+              if (cp === 0x07 || cp === 0x9c) st.mode = "normal";
+              else if (cp === 0x1b) st.mode = "string-esc";
+              break;
+            case "string-esc":
+              out += ch;
+              if (cp === 0x5c) st.mode = "normal";
+              else st.mode = "string";
+              break;
+          }
+          i += consumed - 1;
+        }
+        return out;
+      }
+
+      function wandTerminalWrite(terminal, data) {
+        if (!terminal || data == null) return;
+        if (!state.wideParserState) state.wideParserState = createWideParserState();
+        terminal.write(widePadAnsi(data, state.wideParserState));
+      }
+
+      function resetWideParserState() {
+        state.wideParserState = createWideParserState();
+      }
+
+      // Strip the wide-pad filler from copied text so users pasting
+      // selected terminal output don't get hidden U+2060 sprinkled
+      // through every CJK string.
+      function stripWideFillerForCopy() {
+        if (typeof document === "undefined") return;
+        document.addEventListener("copy", function(e) {
+          var sel = window.getSelection && window.getSelection();
+          if (!sel || sel.isCollapsed) return;
+          var anchor = sel.anchorNode;
+          var node = anchor && anchor.nodeType === 3 ? anchor.parentNode : anchor;
+          var output = document.getElementById("output");
+          if (!output || !node || !output.contains(node)) return;
+          var text = sel.toString();
+          if (text.indexOf(WAND_WIDE_FILLER) === -1) return;
+          if (e.clipboardData) {
+            e.clipboardData.setData("text/plain", text.split(WAND_WIDE_FILLER).join(""));
+            e.preventDefault();
+          }
+        });
+      }
+      stripWideFillerForCopy();
+
       function resetTerminal() {
-        if (!state.terminal || typeof state.terminal.reset !== "function") return;
-        state.terminal.reset();
+        if (!state.terminal || typeof state.terminal.write !== "function") return;
+        // @wterm/dom 的 WTerm 类没有暴露 reset() 方法（grep 全包零匹配），
+        // 所以早期的 state.terminal.reset() 调用是 no-op——softResyncTerminal
+        // 实际只做了"再写一份 terminalOutput 追加"，旧 grid 不会被清空，
+        // 这就是"点刷新按钮没用、只有窗口尺寸变化才修"的根因。
+        // 改用 ANSI RIS (Reset to Initial State, ESC c) 让 WASM 状态机自己
+        // 重置 grid / 光标 / 属性 / scrollback，所有 VT 实现都支持这个序列。
+        state.terminal.write("\x1bc");
+        resetWideParserState();
       }
 
       // Soft resync terminal: reset WASM grid and replay full output buffer.
@@ -4558,12 +4944,15 @@
       function softResyncTerminal() {
         if (!state.terminal || !state.terminalOutput) return false;
         resetTerminal();
-        state.terminal.write(state.terminalOutput);
+        wandTerminalWrite(state.terminal, state.terminalOutput);
         state.lastTerminalResyncAt = Date.now();
         maybeScrollTerminalToBottom("output");
         // Remeasure against real container: the refresh button used to only
         // reset+write, so a stale cols/rows (set at mount time with hidden
         // container) would survive the refresh and keep wrapping output wrong.
+        // Suppress the auto-replay branch in ensureTerminalFit — we just
+        // replayed, no point doing it again on the next rAF tick.
+        state.suppressFitReplay = true;
         ensureTerminalFit("refresh");
         return true;
       }
@@ -4619,7 +5008,7 @@
           if (normalizedOutput !== currentOutput) {
             resetTerminal();
             if (normalizedOutput) {
-              state.terminal.write(normalizedOutput);
+              wandTerminalWrite(state.terminal, normalizedOutput);
             }
             wrote = true;
           }
@@ -4630,7 +5019,7 @@
         } else if (normalizedOutput.startsWith(currentOutput)) {
           var delta = normalizedOutput.slice(currentOutput.length);
           if (delta) {
-            state.terminal.write(delta);
+            wandTerminalWrite(state.terminal, delta);
             wrote = true;
           }
         } else if (currentOutput && currentOutput.startsWith(normalizedOutput)) {
@@ -4638,7 +5027,7 @@
         } else {
           resetTerminal();
           if (normalizedOutput) {
-            state.terminal.write(normalizedOutput);
+            wandTerminalWrite(state.terminal, normalizedOutput);
           }
           wrote = true;
         }
@@ -4685,10 +5074,32 @@
           },
           onResize: function(cols, rows) {
             sendTerminalResize(cols, rows);
+            // wterm 自身 ResizeObserver 在容器尺寸变化时主动调 resize()，
+            // bridge.resize() 把 grid 按新 cols 重排，但 scrollback 仍是
+            // 按旧 cols 写入 WASM 的、新 grid 又被清空到干净状态。wand
+            // 这层缓存的 terminalOutput 才是完整原始字节流，必须按新
+            // cols 重放一次，grid + scrollback 才会和实际历史对齐。
+            // 同步立即重放——不要走 setTimeout(0)：移动端 WebView 在
+            // 前后台切换或键盘动画期间，macrotask 经常被推迟到 wterm
+            // 的下一帧 render 之后，结果用户先看到一帧空 grid 才看到
+            // replay 完的内容，体感上就是"刷新都没用、动一下窗口才好"。
+            if (state.terminal && state.terminalOutput) {
+              state.suppressFitReplay = true;
+              softResyncTerminal();
+            }
           }
         });
 
-        term.init().then(function() {
+        // Wait for the monospace webfont (if any) before init so the very first
+        // _measureCharSize() inside wterm uses the final glyph metrics. Otherwise
+        // the fallback font's narrower glyphs make wterm calculate too many cols,
+        // and subsequent chunks render with broken wrapping until the user
+        // triggers a resize. Cap the wait so a missing font never blocks startup.
+        var fontsReady = (document.fonts && typeof document.fonts.ready === "object")
+          ? Promise.race([document.fonts.ready, new Promise(function(r) { setTimeout(r, 800); })])
+          : Promise.resolve();
+
+        fontsReady.then(function() { return term.init(); }).then(function() {
           state.terminal = term;
           state.terminalInitializing = false;
           applyTerminalScale();
@@ -4729,7 +5140,7 @@
               syncTerminalBuffer(session.id, session.output || "", { mode: "append", scroll: false });
             }
           } else {
-            term.write("点击上方「新对话」开始你的第一次对话。\r\n");
+            wandTerminalWrite(term, "点击上方「新对话」开始你的第一次对话。\r\n");
           }
 
           state.terminalClickHandler = focusInputBox;
@@ -4870,7 +5281,7 @@
           return "会话已结束，无法继续发送";
         }
         return session && isStructuredSession(session) && session.structuredState && session.structuredState.inFlight
-          ? "思考中，可继续发送，消息会自动排队"
+          ? "思考中 · 发送新消息将中断当前回复"
           : "输入消息...";
       }
 
@@ -5499,12 +5910,17 @@
           initTerminal();
         }
 
-        if (selectedSession && state.terminal) {
-          syncTerminalBuffer(selectedSession.id, selectedSession.output || "", { mode: "append", scroll: false });
-        } else if (!selectedSession) {
+        if (!selectedSession) {
           state.terminalSessionId = null;
           state.terminalOutput = "";
         }
+        // 之前这里会用 selectedSession.output 再 syncTerminalBuffer 一次。
+        // 但 updateShellChrome 在 updateSessionsList、status 推送、init
+        // 等多个高频路径都会被调，每次都拿"可能不带 output 的 slim 快照"
+        // 兜回来 sync 一遍：要么早返回浪费判断，要么 prefix 不匹配触发
+        // reset+全量重写、把 alt-screen 中正在绘制的 Claude TUI 切走。
+        // terminal 写入应当只走 chunk hot-path 与 ws init 这两条权威路径，
+        // 这里不再插手，避免引入二次覆盖。
 
         if (state.terminal && selectedSession && state.currentView === "terminal") {
           maybeScrollTerminalToBottom("view");
@@ -6220,6 +6636,11 @@
             var apkMessageEl = document.getElementById("android-apk-message");
             var androidApk = data.androidApk || {};
             var isInApk = !!_apkVersion;
+            var hasApkInfo = isInApk || !!androidApk.github || !!androidApk.local;
+            if (apkSection) {
+              if (hasApkInfo) apkSection.classList.remove("hidden");
+              else apkSection.classList.add("hidden");
+            }
 
             if (isInApk) {
               // ── APK 内模式：显示当前版本 + 线上版本 + 本地版本 ──
@@ -6663,12 +7084,11 @@
       // ── Notification Settings Helpers ──
 
       function _updateAppIconSelection(activeIcon) {
-        var opts = document.querySelectorAll(".app-icon-option");
+        var opts = document.querySelectorAll(".settings-app-icon-option");
         for (var i = 0; i < opts.length; i++) {
-          var preview = opts[i].querySelector(".app-icon-preview");
-          if (preview) {
-            preview.style.borderColor = opts[i].getAttribute("data-icon") === activeIcon ? "var(--accent)" : "transparent";
-          }
+          var isActive = opts[i].getAttribute("data-icon") === activeIcon;
+          opts[i].classList.toggle("selected", isActive);
+          opts[i].setAttribute("aria-pressed", isActive ? "true" : "false");
         }
       }
 
@@ -8027,29 +8447,25 @@
           return Promise.resolve();
         }
 
-        var isQueueing = !!(session.structuredState && session.structuredState.inFlight && session.status === "running");
-        if (!isQueueing) {
-          // Immediately render user message with thinking indicator
-          var userTurn = { role: "user", content: [{ type: "text", text: input }] };
-          var userMsgs = stripRenderOnlyStructuredMessages(Array.isArray(session.messages) ? session.messages.slice() : []);
-          userMsgs.push(userTurn);
-          var optimisticStructuredState = Object.assign({}, session.structuredState || {}, { inFlight: true });
-          // Write optimistic user turn into session.messages so WS updates
-          // that arrive before the HTTP response don't erase it.
-          updateSessionSnapshot({
-            id: session.id,
-            status: "running",
-            messages: userMsgs,
-            structuredState: optimisticStructuredState,
-          });
-          state.currentMessages = buildMessagesForRender(Object.assign({}, session, {
-            status: "running",
-            messages: userMsgs,
-            structuredState: optimisticStructuredState,
-          }), userMsgs);
-          updateInputHint("思考中…");
-          renderChat(true);
-        }
+        var isInterrupting = !!(session.structuredState && session.structuredState.inFlight && session.status === "running");
+        // Immediately render user message with thinking indicator
+        var userTurn = { role: "user", content: [{ type: "text", text: input }] };
+        var userMsgs = stripRenderOnlyStructuredMessages(Array.isArray(session.messages) ? session.messages.slice() : []);
+        userMsgs.push(userTurn);
+        var optimisticStructuredState = Object.assign({}, session.structuredState || {}, { inFlight: true });
+        updateSessionSnapshot({
+          id: session.id,
+          status: "running",
+          messages: userMsgs,
+          structuredState: optimisticStructuredState,
+        });
+        state.currentMessages = buildMessagesForRender(Object.assign({}, session, {
+          status: "running",
+          messages: userMsgs,
+          structuredState: optimisticStructuredState,
+        }), userMsgs);
+        updateInputHint("思考中…");
+        renderChat(true);
 
         if (inputBox) {
           inputBox.value = "";
@@ -8066,17 +8482,21 @@
           method: "POST",
           headers: { "Content-Type": "application/json" },
           credentials: "same-origin",
-          body: JSON.stringify({ input: input })
+          body: JSON.stringify({ input: input, interrupt: isInterrupting || undefined })
+        })
+        .then(function(res) {
+          if (!res.ok) {
+            return res.json().catch(function() { return { error: "请求失败" }; }).then(function(payload) {
+              throw new Error((payload && payload.error) || "无法发送结构化消息。");
+            });
+          }
+          return res.json();
         })
-        .then(function(res) { return res.json(); })
         .then(function(snapshot) {
           if (snapshot && snapshot.error) {
             throw new Error(snapshot.error);
           }
           if (snapshot && snapshot.id) {
-            // If a WS update has already bumped the queue epoch, the HTTP
-            // response's queuedMessages is stale — drop it to avoid
-            // re-introducing already-dequeued items.
             if (state.queueEpoch > epochBeforePost && snapshot.queuedMessages) {
               delete snapshot.queuedMessages;
             }
@@ -8084,13 +8504,8 @@
             var refreshedSession = state.sessions.find(function(s) { return s.id === snapshot.id; }) || snapshot;
             state.currentMessages = buildMessagesForRender(refreshedSession, getPreferredMessages(refreshedSession, snapshot.output, false));
             renderChat(true);
-            if (isQueueing) {
-              var queuedCount = getStructuredQueuedInputs(refreshedSession).length;
-              if (queuedCount > 0) {
-                showToast("已排队（第 " + queuedCount + " 条），将在当前消息处理完成后自动发送。", "info");
-              }
-            } else {
-              updateInputHint("Enter 发送 · Shift+Enter 换行");
+            if (isInterrupting) {
+              showToast("已中断上一条回复，正在处理新消息…", "info");
             }
           }
         })
@@ -8774,6 +9189,12 @@
       function flushPendingMessages() {
         if (state.pendingMessages.length === 0) return;
 
+        var selectedSession = getSelectedSession();
+        if (isStructuredSession(selectedSession)) {
+          state.pendingMessages = [];
+          return;
+        }
+
         // Send queued messages in order, bypassing the session-running check
         // since our local state may be stale right after reconnect
         var queue = state.pendingMessages.slice();
@@ -10019,15 +10440,30 @@
             syncInputBoxScroll(inputBox);
           }
 
+          // Keyboard just opened — terminal viewport now shares space with
+          // the keyboard; visible rows shrink even if cols stayed the same.
+          // Without an immediate refit, any chunk arriving while the keyboard
+          // animates in renders against the old grid and tears the screen.
+          if (!keyboardOpen && isKeyboardOpen) {
+            ensureTerminalFit("keyboard-open");
+          }
+
           // Keyboard just closed — force terminal refit and scroll to bottom
           // after a delay so the keyboard dismiss animation and layout settle.
           if (keyboardOpen && !isKeyboardOpen) {
             setTimeout(function() {
-              ensureTerminalFit();
+              ensureTerminalFit("keyboard-close");
               maybeScrollTerminalToBottom("force");
             }, 200);
           }
 
+          // visualViewport height changed without a keyboard transition —
+          // covers iOS address-bar collapse/expand and split-screen drag.
+          // Cheap to call: ensureTerminalFit early-exits if cols/rows stable.
+          if (heightChanged && keyboardOpen === isKeyboardOpen) {
+            ensureTerminalFit("viewport");
+          }
+
           keyboardOpen = isKeyboardOpen;
           lastHeight = vv.height;
         }
@@ -10280,10 +10716,68 @@
       // new output renders with broken wrapping (content visually piles at
       // the top). Call this after any layout change that might have altered
       // container geometry (mount, session switch, view switch, refresh).
+      // Same as ensureTerminalFit, but if the container is currently 0×0
+      // (typical right after Android WebView.onResume — the page hasn't
+      // re-laid-out yet), keep retrying through requestAnimationFrame /
+      // setTimeout up to ~5 frames. Each attempt forces a layout read
+      // (offsetHeight) so the browser has to flush styles.
+      // Without this, the very first ensureTerminalFit silently fails,
+      // cols/rows stay at the pre-suspend values, and freshly arriving
+      // PTY chunks wrap against the wrong width — that's exactly the
+      // "content piles at the top after resuming the app" bug.
+      function ensureTerminalFitWithRetry(reason) {
+        if (!state.terminal) return;
+        var attempts = 0;
+        var maxAttempts = 8;
+        function tryFit() {
+          if (!state.terminal) return;
+          var el = document.getElementById("output");
+          if (el) {
+            // Force a layout flush so offsetWidth reflects the post-resume
+            // container size, not a stale 0 from the suspended frame.
+            void el.offsetHeight;
+          }
+          if (el && el.offsetWidth > 0 && el.offsetHeight > 0) {
+            ensureTerminalFit(reason);
+            // After fit, force a buffer replay: even when cols didn't
+            // change, the WASM grid state may be inconsistent after a
+            // long suspend (DOM rows clipped, scroll position lost).
+            // softResyncTerminal is cheap because terminalOutput is
+            // already in memory.
+            if (state.terminalOutput) {
+              state.suppressFitReplay = true;
+              softResyncTerminal();
+            }
+            return;
+          }
+          if (++attempts >= maxAttempts) return;
+          // Mix rAF and timeout: some Android WebView versions skip rAF
+          // during the first frame after resume, so falling back to a
+          // 16ms timer guarantees forward progress.
+          if (attempts <= 4) {
+            requestAnimationFrame(tryFit);
+          } else {
+            setTimeout(tryFit, 32);
+          }
+        }
+        tryFit();
+      }
+
       function ensureTerminalFit(reason) {
         if (!state.terminal) return false;
         var el = document.getElementById("output");
-        if (!el || el.offsetWidth === 0 || el.offsetHeight === 0) return false;
+        if (!el || el.offsetWidth === 0 || el.offsetHeight === 0) {
+          // 容器暂时没有可见尺寸（hidden、动画过渡、键盘弹起前的 layout
+          // 中间帧、Android WebView resume 头几帧），不要静默放弃——
+          // 改成丢给 ensureTerminalFitWithRetry 兜底，等容器有了真实
+          // 尺寸再 fit + replay。否则一旦错过这一次，只能等下一次外部
+          // 触发（旋转屏幕、开关键盘等），中间的输出就会一直按错误
+          // 宽度堆在视图上方，看起来像"中间一大段都没有显示"。
+          ensureTerminalFitWithRetry(reason || "fit-retry");
+          return false;
+        }
+        var prevCols = state.terminal.cols;
+        var prevRows = state.terminal.rows;
         requestAnimationFrame(function() {
           requestAnimationFrame(function() {
             if (!state.terminal) return;
@@ -10291,6 +10785,21 @@
               state.terminal.remeasure();
             }
             sendTerminalResize(state.terminal.cols, state.terminal.rows);
+            // Cache the container width that produced this cols/rows so the
+            // hot-path chunk writer can detect drift cheaply (avoids running
+            // a full remeasure on every WebSocket message).
+            state.lastFitContainerWidth = el.offsetWidth;
+            state.lastFitContainerHeight = el.offsetHeight;
+            // If cols actually changed, the previously written buffer was
+            // wrapped to the old width. Replay the full buffer so historical
+            // lines and any in-flight CSI cursor sequences re-render against
+            // the new grid — this is what fixes the "torn" screens users see
+            // after rotating, opening the keyboard, or resizing the panel.
+            var skipReplay = state.suppressFitReplay === true;
+            state.suppressFitReplay = false;
+            if (!skipReplay && (state.terminal.cols !== prevCols || state.terminal.rows !== prevRows)) {
+              if (state.terminalOutput) softResyncTerminal();
+            }
             if (state.terminalAutoFollow || isTerminalNearBottom()) {
               maybeScrollTerminalToBottom("resize");
             }
@@ -10338,7 +10847,54 @@
         if (timeEls.length > 0) scheduleSessionListUpdate();
       }, 30000);
 
-      function initWebSocket() {
+      function cancelWsReconnect() {
+        if (state.wsReconnectTimer) {
+          clearTimeout(state.wsReconnectTimer);
+          state.wsReconnectTimer = null;
+        }
+      }
+
+      // Drop any in-flight socket and start a new one *now* — used by the
+      // Android resume bridge to recover from zombie connections (socket
+      // still says OPEN, but the TCP path was torn down by Doze). Skips
+      // the backoff timer; the caller has already decided this is urgent.
+      function forceReconnectWebSocket(reason) {
+        cancelWsReconnect();
+        if (state.ws) {
+          var stale = state.ws;
+          // Detach handlers so the imminent close doesn't trigger another
+          // reconnect path while we're already starting a fresh one.
+          try { stale.onclose = null; } catch (e) { /* ignore */ }
+          try { stale.onerror = null; } catch (e) { /* ignore */ }
+          try { stale.close(); } catch (e) { /* ignore */ }
+          state.ws = null;
+        }
+        state.wsConnected = false;
+        state.wsReconnectAttempts = 0;
+        initWebSocket(reason);
+      }
+
+      function scheduleWsReconnect() {
+        if (state.wsReconnectTimer) return;
+        // Don't burn battery reconnecting while hidden — the resume
+        // listener will kick a fresh connect when we're foreground.
+        if (document.hidden) return;
+        var attempt = state.wsReconnectAttempts || 0;
+        // 0.5s, 1s, 2s, 4s, then capped at 8s. Faster than the old
+        // fixed 2s on the first retry (matters for transient blips)
+        // and bounded so a flapping server doesn't get hammered.
+        var delays = [500, 1000, 2000, 4000, 8000];
+        var delay = delays[attempt < delays.length ? attempt : delays.length - 1];
+        state.wsReconnectAttempts = attempt + 1;
+        state.wsReconnectTimer = setTimeout(function() {
+          state.wsReconnectTimer = null;
+          if (state.config && !state.ws && !document.hidden) {
+            initWebSocket("backoff");
+          }
+        }, delay);
+      }
+
+      function initWebSocket(reason) {
         if (!window.WebSocket) return false;
 
         // Prevent duplicate connections
@@ -10356,6 +10912,10 @@
           ws.onopen = function() {
             state.ws = ws;
             state.wsConnected = true;
+            // Reset backoff on a successful connect so the next disconnect
+            // starts the ladder from 500ms again.
+            state.wsReconnectAttempts = 0;
+            cancelWsReconnect();
             // Subscribe to current session if any
             subscribeToSession(state.selectedId);
             // Flush pending messages after reconnection
@@ -10363,7 +10923,10 @@
             // Re-fit terminal on reconnect — the viewport may have changed
             // while disconnected, so remeasure against real container size
             // rather than sending stale cols/rows from before the disconnect.
-            ensureTerminalFit("ws-reconnect");
+            // Use the retry variant: when the reconnect is triggered by
+            // Android resume, the WebView container may still be 0×0 for
+            // the first 1–2 frames while layout settles.
+            ensureTerminalFitWithRetry("ws-reconnect");
           };
 
           ws.onmessage = function(event) {
@@ -10378,12 +10941,7 @@
           ws.onclose = function() {
             state.ws = null;
             state.wsConnected = false;
-            // Reconnect after 2 seconds
-            setTimeout(function() {
-              if (state.config && !state.ws) {
-                initWebSocket();
-              }
-            }, 2000);
+            scheduleWsReconnect();
           };
 
           ws.onerror = function() {
@@ -10392,6 +10950,9 @@
 
           return true;
         } catch (e) {
+          // Constructor threw (rare — bad URL, blocked scheme). Try again
+          // through the backoff path so we don't get stuck.
+          scheduleWsReconnect();
           return false;
         }
       }
@@ -10478,7 +11039,13 @@
                 // Fast path: write chunk directly to avoid full-output comparison.
                 state.lastChunkAt = Date.now();
                 state.terminalLiveStreamSessions[msg.sessionId] = true;
-                state.terminal.write(msg.data.chunk);
+                // 不再在 hot-path 调 maybeRefitTerminal/remeasure。它会偷偷把
+                // wterm 的 this.cols 改成新值，让 wterm 自己的 ResizeObserver
+                // 误判 newCols === this.cols 而跳过 wterm.resize() —— 那条路径
+                // 才会真正调 Renderer.setup() 重建 DOM 行。绕过它就让容器尺寸
+                // 变化的视觉错位无法被自愈，直到用户手动改窗口才修。现在让
+                // wterm 内部 ResizeObserver 独占 cols 跟踪职责。
+                wandTerminalWrite(state.terminal, msg.data.chunk);
                 state.terminalSessionId = msg.sessionId;
                 if (msg.data.output) {
                   state.terminalOutput = normalizeTerminalOutput(msg.data.output);
@@ -10612,14 +11179,19 @@
               renderChat(true);
               updateTaskDisplay();
               updateApprovalStats();
-              updateTerminalOutput(msg.data.output || "", msg.sessionId, "append");
-              // Ensure terminal is properly fitted after receiving initial data
-              scheduleTerminalResize(true);
-              if (state.terminal && state.terminal.remeasure) {
-                requestAnimationFrame(function() {
-                  if (state.terminal) state.terminal.remeasure();
-                });
-              }
+              // ws 重新订阅时拿到的是服务端 ring buffer 的最新窗口（最多
+              // 120KB）；客户端缓存的 terminalOutput 可能早于服务端窗口
+              // 的起点。append 模式有 prefix 检查，prefix 不匹配就 reset+
+              // 全量重写、全等就直接 return false——前者会把 alt-screen
+              // 中的 Claude TUI 切走，后者会把"应该按真实 cols 重写"的
+              // 机会跳过。改用 replace 强制 reset+按当前 cols 重写一次，
+              // 这是订阅时唯一可信的全量基线。
+              updateTerminalOutput(msg.data.output || "", msg.sessionId, "replace");
+              // 紧接着等容器有真实尺寸再 fit + softResync：wterm 启动
+              // 硬编码 cols=120，replace 写入也可能落在错的列宽上，
+              // ResizeObserver 的回调是异步的，得用 fit-with-retry 兜
+              // 一次，确保最终一定按真实宽度重排。
+              ensureTerminalFitWithRetry("init");
             }
             break;
           case 'usage':