@co0ontty/wand 1.3.0 → 1.3.3

package/dist/claude-pty-bridge.d.ts

@@ -21,6 +21,8 @@ interface PermissionState {
     lastTarget: string | null;
     /** Timestamp of last auto-confirm to prevent rapid repeats */
     lastAutoConfirmAt: number;
+    /** Timer for delayed auto-approve (gives CLI time to be ready) */
+    pendingAutoApproveTimer: ReturnType<typeof setTimeout> | null;
 }
 /** Permission resolution result */
 export type PermissionResolution = "approve_once" | "approve_turn" | "deny";
@@ -118,6 +120,12 @@ export declare class ClaudePtyBridge extends EventEmitter {
     private isRealChatInput;
     private captureSessionId;
     private detectPermission;
+    /**
+     * Schedule a delayed auto-approve. The delay gives the Claude CLI's interactive
+     * selection prompt time to fully render and enter its input loop before we send \r.
+     */
+    private scheduleAutoApprove;
+    private cancelPendingAutoApprove;
     private isPermissionPromptDetected;
     private extractPromptText;
     private extractPermissionTarget;

package/dist/claude-pty-bridge.js

@@ -11,7 +11,8 @@ import { stripAnsi, isNoiseLine, appendWindow, normalizePromptText, hasExplicitC
 // ── Constants ──
 const OUTPUT_MAX_SIZE = 120000;
 const SESSION_ID_WINDOW_SIZE = 16384;
-const PERMISSION_WINDOW_SIZE = 800;
+const PERMISSION_WINDOW_SIZE = 2000;
+const AUTO_APPROVE_DELAY_MS = 150;
 const UUID_PATTERN = "([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})";
 const CLAUDE_SESSION_ID_PATTERNS = [
     new RegExp(`"session_id"\\s*:\\s*"${UUID_PATTERN}"`, "i"),
@@ -85,6 +86,7 @@ export class ClaudePtyBridge extends EventEmitter {
             lastScope: null,
             lastTarget: null,
             lastAutoConfirmAt: 0,
+            pendingAutoApproveTimer: null,
         };
         this.sessionIdWindow = "";
     }
@@ -178,6 +180,7 @@ export class ClaudePtyBridge extends EventEmitter {
             this.taskDebounceTimer = null;
         }
         // Clear permission state — prevents stale blocked state after exit
+        this.cancelPendingAutoApprove();
         this.permissionState.isBlocked = false;
         this.permissionState.lastPrompt = null;
         this.permissionState.lastScope = null;
@@ -234,6 +237,8 @@ export class ClaudePtyBridge extends EventEmitter {
                 this.rememberedTargets.add(this.permissionState.lastTarget);
             }
         }
+        // Cancel any pending auto-approve timer (user resolved manually)
+        this.cancelPendingAutoApprove();
         // Send approval/denial to PTY
         if (this.ptyWrite) {
             if (resolution === "deny") {
@@ -277,6 +282,7 @@ export class ClaudePtyBridge extends EventEmitter {
      * Clear permission blocked state (called when permission is resolved externally).
      */
     clearPermissionBlocked() {
+        this.cancelPendingAutoApprove();
         this.permissionState.isBlocked = false;
         this.permissionState.window = "";
         this.permissionState.lastPrompt = null;
@@ -342,25 +348,7 @@ export class ClaudePtyBridge extends EventEmitter {
                     this.permissionState.lastTarget = target ?? null;
                     const shouldAutoApprove = this.autoApprove || this.shouldAutoApprove(scope, target);
                     if (shouldAutoApprove) {
-                        const now = Date.now();
-                        if (now - this.permissionState.lastAutoConfirmAt < 500)
-                            return;
-                        this.permissionState.lastAutoConfirmAt = now;
-                        process.stderr.write(`[wand] Auto-confirming permission for ${scope}${target ? `: ${target}` : ""}\n`);
-                        if (this.ptyWrite) {
-                            this.ptyWrite("\r");
-                        }
-                        this.permissionState.isBlocked = false;
-                        this.permissionState.window = "";
-                        this.permissionState.lastPrompt = null;
-                        this.permissionState.lastScope = null;
-                        this.permissionState.lastTarget = null;
-                        this.emitEvent({
-                            type: "permission.resolved",
-                            sessionId: this.sessionId,
-                            timestamp: Date.now(),
-                            data: { resolution: "approve_once", autoApproved: true },
-                        });
+                        this.scheduleAutoApprove(scope, target);
                     }
                     else {
                         this.emitEvent({
@@ -385,28 +373,7 @@ export class ClaudePtyBridge extends EventEmitter {
             // Check if we should auto-approve
             const shouldAutoApprove = this.autoApprove || this.shouldAutoApprove(scope, target);
             if (shouldAutoApprove) {
-                // Debounce auto-confirm to avoid rapid repeats
-                const now = Date.now();
-                if (now - this.permissionState.lastAutoConfirmAt < 500)
-                    return;
-                this.permissionState.lastAutoConfirmAt = now;
-                process.stderr.write(`[wand] Auto-confirming permission for ${scope}${target ? `: ${target}` : ""}\n`);
-                // Send approval to PTY
-                if (this.ptyWrite) {
-                    this.ptyWrite("\r");
-                }
-                // Clear blocked state immediately
-                this.permissionState.isBlocked = false;
-                this.permissionState.window = "";
-                this.permissionState.lastPrompt = null;
-                this.permissionState.lastScope = null;
-                this.permissionState.lastTarget = null;
-                this.emitEvent({
-                    type: "permission.resolved",
-                    sessionId: this.sessionId,
-                    timestamp: Date.now(),
-                    data: { resolution: "approve_once", autoApproved: true },
-                });
+                this.scheduleAutoApprove(scope, target);
             }
             else {
                 // Emit permission prompt event for UI to handle
@@ -430,6 +397,46 @@ export class ClaudePtyBridge extends EventEmitter {
             });
         }
     }
+    /**
+     * Schedule a delayed auto-approve. The delay gives the Claude CLI's interactive
+     * selection prompt time to fully render and enter its input loop before we send \r.
+     */
+    scheduleAutoApprove(scope, target) {
+        // Debounce: skip if another auto-approve was recently sent or is pending
+        const now = Date.now();
+        if (now - this.permissionState.lastAutoConfirmAt < 500)
+            return;
+        if (this.permissionState.pendingAutoApproveTimer)
+            return;
+        this.permissionState.lastAutoConfirmAt = now;
+        process.stderr.write(`[wand] Scheduling auto-confirm for ${scope}${target ? `: ${target}` : ""} (${AUTO_APPROVE_DELAY_MS}ms)\n`);
+        this.permissionState.pendingAutoApproveTimer = setTimeout(() => {
+            this.permissionState.pendingAutoApproveTimer = null;
+            if (this._exited)
+                return;
+            process.stderr.write(`[wand] Auto-confirming permission for ${scope}${target ? `: ${target}` : ""}\n`);
+            if (this.ptyWrite) {
+                this.ptyWrite("\r");
+            }
+            this.permissionState.isBlocked = false;
+            this.permissionState.window = "";
+            this.permissionState.lastPrompt = null;
+            this.permissionState.lastScope = null;
+            this.permissionState.lastTarget = null;
+            this.emitEvent({
+                type: "permission.resolved",
+                sessionId: this.sessionId,
+                timestamp: Date.now(),
+                data: { resolution: "approve_once", autoApproved: true },
+            });
+        }, AUTO_APPROVE_DELAY_MS);
+    }
+    cancelPendingAutoApprove() {
+        if (this.permissionState.pendingAutoApproveTimer) {
+            clearTimeout(this.permissionState.pendingAutoApproveTimer);
+            this.permissionState.pendingAutoApproveTimer = null;
+        }
+    }
     isPermissionPromptDetected(normalized) {
         const hasIntent = /\bdo you want to\b/i.test(normalized)
             || /\bwould you like to\b/i.test(normalized)
@@ -438,11 +445,16 @@ export class ClaudePtyBridge extends EventEmitter {
             || /\bhaven't granted\b/i.test(normalized);
         const hasConfirmSyntax = hasExplicitConfirmSyntax(normalized);
         const hasActionCtx = hasPermissionActionContext(normalized);
+        // For numbered selection prompts (Claude CLI v2+), require the readiness marker
+        // "Esc to cancel" / "Tab to amend" which appears only after the full menu is rendered
+        // and the input handler is active
+        const hasReadyMarker = /\besc\b.*\bcancel\b/i.test(normalized)
+            || /\btab\b.*\bamend\b/i.test(normalized);
         // Intent phrase + explicit confirm syntax (e.g. "Do you want to proceed? (yes/no)")
         if (hasIntent && hasConfirmSyntax)
             return true;
-        // Intent phrase + action keyword (e.g. "Do you want to execute this command?")
-        if (hasIntent && hasActionCtx)
+        // Intent phrase + action keyword + readiness marker (numbered selection prompts)
+        if (hasIntent && hasActionCtx && hasReadyMarker)
             return true;
         // Standalone confirm syntax + action keyword (e.g. "[y/n] Allow bash command")
         if (hasConfirmSyntax && hasActionCtx)

package/dist/config.js

@@ -15,6 +15,7 @@ export const defaultConfig = () => ({
     startupCommands: [],
     allowedCommandPrefixes: [],
     shortcutLogMaxBytes: 10 * 1024 * 1024,
+    experimentalDomTerminal: false,
     commandPresets: [
         {
             label: "Claude",

package/dist/pwa.js

@@ -48,7 +48,8 @@ const STATIC_ASSETS = [
   '/icon-512.png',
   '/vendor/xterm/css/xterm.css',
   '/vendor/xterm/lib/xterm.js',
-  '/vendor/xterm-addon-fit/lib/addon-fit.js'
+  '/vendor/xterm-addon-fit/lib/addon-fit.js',
+  '/vendor/xterm-addon-serialize/lib/xterm-addon-serialize.js'
 ];
 
 self.addEventListener('install', (event) => {

package/dist/server-session-routes.js

@@ -130,7 +130,7 @@ export function registerSessionRoutes(app, processes, storage, defaultMode) {
             const newMode = body.mode ? normalizeMode(body.mode, defaultMode) : normalizeMode(existingSession.mode, defaultMode);
             const resumeCommand = `${command} --resume ${claudeSessionId}`;
             const newSnapshot = processes.start(resumeCommand, existingSession.cwd, newMode, undefined, { resumedFromSessionId: sessionId });
-            storage.saveSession({ ...existingSession, resumedToSessionId: newSnapshot.id });
+            storage.saveSession({ ...existingSession, resumedToSessionId: newSnapshot.id, archived: true });
             res.status(201).json({ resumedFromSessionId: sessionId, ...newSnapshot });
         }
         catch (error) {
@@ -159,7 +159,7 @@ export function registerSessionRoutes(app, processes, storage, defaultMode) {
                 const newMode = body.mode ? normalizeMode(body.mode, defaultMode) : normalizeMode(existingSession.mode, defaultMode);
                 const resumeCommand = `${command} --resume ${claudeSessionId}`;
                 const newSnapshot = processes.start(resumeCommand, existingSession.cwd, newMode, undefined, { resumedFromSessionId: existingSession.id });
-                storage.saveSession({ ...existingSession, resumedToSessionId: newSnapshot.id });
+                storage.saveSession({ ...existingSession, resumedToSessionId: newSnapshot.id, archived: true });
                 res.status(201).json({ resumedFromSessionId: existingSession.id, resumedClaudeSessionId: claudeSessionId, ...newSnapshot });
             }
             else {

package/dist/server.js

@@ -279,6 +279,7 @@ export async function startServer(config, configPath) {
     app.use(express.json({ limit: "1mb" }));
     app.use("/vendor/xterm", express.static(path.join(nodeModulesDir, "xterm")));
     app.use("/vendor/xterm-addon-fit", express.static(path.join(nodeModulesDir, "@xterm", "addon-fit")));
+    app.use("/vendor/xterm-addon-serialize", express.static(path.join(nodeModulesDir, "xterm-addon-serialize")));
     // ── Web UI and PWA endpoints ──
     app.get("/", (_req, res) => {
         res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
@@ -357,6 +358,7 @@ export async function startServer(config, configPath) {
             defaultMode: config.defaultMode,
             defaultCwd: config.defaultCwd,
             commandPresets: config.commandPresets,
+            experimentalDomTerminal: config.experimentalDomTerminal ?? false,
             updateAvailable: cachedUpdateInfo?.updateAvailable ?? false,
             latestVersion: cachedUpdateInfo?.latest ?? null,
             currentVersion: PKG_VERSION,
@@ -380,7 +382,7 @@ export async function startServer(config, configPath) {
     });
     app.post("/api/settings/config", async (req, res) => {
         const body = req.body;
-        const allowedFields = ["host", "port", "https", "defaultMode", "defaultCwd", "shell"];
+        const allowedFields = ["host", "port", "https", "defaultMode", "defaultCwd", "shell", "experimentalDomTerminal"];
         let changed = false;
         for (const field of allowedFields) {
             if (field in body && body[field] !== undefined) {
@@ -411,6 +413,9 @@ export async function startServer(config, configPath) {
                 else if (field === "shell") {
                     config.shell = String(body.shell);
                 }
+                else if (field === "experimentalDomTerminal") {
+                    config.experimentalDomTerminal = body.experimentalDomTerminal === true;
+                }
                 changed = true;
             }
         }

package/dist/types.d.ts

@@ -42,6 +42,8 @@ export interface WandConfig {
     commandPresets: CommandPreset[];
     /** Max total size (bytes) for shortcut interaction logs per session (default: 10 MB). Set 0 to disable logging. */
     shortcutLogMaxBytes?: number;
+    /** Experimental: use DOM-based terminal rendering on mobile for native text selection (default: false) */
+    experimentalDomTerminal?: boolean;
 }
 export interface CommandRequest {
     command: string;

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

@@ -69,6 +69,10 @@
         suggestionTimer: null,
         terminal: null,
         fitAddon: null,
+        serializeAddon: null,
+        terminalDomView: null,
+        terminalDomUpdateTimer: null,
+        _lastDomHtml: "",
         terminalSessionId: null,
         terminalOutput: "",
         terminalViewportSize: { width: 0, height: 0 },
@@ -704,6 +708,11 @@
                   '<label class="field-label" for="cfg-shell">Shell</label>' +
                   '<input id="cfg-shell" type="text" class="field-input" placeholder="/bin/bash" />' +
                 '</div>' +
+                '<div class="field field-inline">' +
+                  '<label class="field-label" for="cfg-dom-terminal">终端 DOM 渲染 <span style="font-size:0.7em;color:var(--warning);font-weight:600;">实验性</span></label>' +
+                  '<input id="cfg-dom-terminal" type="checkbox" class="field-checkbox" />' +
+                '</div>' +
+                '<p class="hint" style="margin-top:-8px;margin-bottom:8px;">移动端使用 DOM 渲染终端，支持原生文本选择与复制。保存后刷新页面生效。</p>' +
                 '<button id="save-config-button" class="btn btn-primary btn-block">保存配置</button>' +
                 '<p id="config-message" class="hint hidden"></p>' +
               '</div>' +
@@ -747,7 +756,7 @@
       }
 
       function renderSessions() {
-        var activeSessions = state.sessions.filter(function(session) { return !session.archived; });
+        var activeSessions = state.sessions.filter(function(session) { return !session.archived && !session.resumedToSessionId; });
         var archivedSessions = state.sessions.filter(function(session) { return session.archived; });
         var groups = [];
         groups.push(renderSessionManageBar());
@@ -1176,6 +1185,10 @@
         if (!state.terminal) return;
         state.terminal.options.fontSize = state.terminalBaseFontSize * state.terminalScale;
         state.terminal.refresh(0, state.terminal.rows - 1);
+        // Apply to DOM terminal view as well
+        if (state.terminalDomView) {
+          state.terminalDomView.style.fontSize = (state.terminalBaseFontSize * state.terminalScale) + "px";
+        }
       }
 
       function updateScaleLabel() {
@@ -1630,10 +1643,6 @@
 
         if (session.autoRecovered) {
           recoveryHint = '<span class="session-id" title="自动恢复的会话">自动恢复</span>';
-        } else if (session.resumedToSessionId) {
-          recoveryHint = '<span class="session-id" title="已恢复到新会话">已恢复</span>';
-        } else if (session.resumedFromSessionId) {
-          recoveryHint = '<span class="session-id" title="从旧会话恢复而来">续接</span>';
         }
 
         var deleteButton = state.sessionsManageMode ? '' : '<button class="session-action-btn delete-btn" data-action="delete-session" data-session-id="' + session.id + '" type="button" aria-label="删除会话" title="删除此会话"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg></button>';
@@ -1644,7 +1653,7 @@
             '<div class="session-item-row">' +
               checkbox +
               '<div class="session-main">' +
-                '<div class="session-command">' + escapeHtml(session.command) + '</div>' +
+                '<div class="session-command">' + escapeHtml(session.resumedFromSessionId ? session.command.replace(/\s+--resume\s+\S+/, '') : session.command) + '</div>' +
                 '<div class="session-meta">' +
                   '<span>' + escapeHtml(modeName) + '</span>' +
                   '<span class="session-status ' + metaStatusClass + '">' + escapeHtml(metaStatus) + '</span>' +
@@ -2672,6 +2681,11 @@
       }
 
       function isTerminalNearBottom() {
+        // On mobile, check DOM view scroll position
+        if (state.terminalDomView) {
+          var d = state.terminalDomView.scrollHeight - state.terminalDomView.clientHeight - state.terminalDomView.scrollTop;
+          return d <= state.terminalScrollThreshold;
+        }
         var viewport = getTerminalViewport();
         if (!viewport) return true;
         var distance = viewport.scrollHeight - viewport.clientHeight - viewport.scrollTop;
@@ -2680,6 +2694,14 @@
 
       function scrollTerminalToBottom(smooth) {
         if (!state.terminal) return;
+        // Also scroll mobile DOM view
+        if (state.terminalDomView) {
+          if (smooth) {
+            state.terminalDomView.scrollTo({ top: state.terminalDomView.scrollHeight, behavior: "smooth" });
+          } else {
+            state.terminalDomView.scrollTop = state.terminalDomView.scrollHeight;
+          }
+        }
         if (smooth) {
           var viewport = getTerminalViewport();
           if (viewport) {
@@ -2967,6 +2989,7 @@
 
         state.terminalSessionId = nextSessionId;
         state.terminalOutput = normalizedOutput;
+        scheduleMobileDomUpdate();
         if (shouldScroll && (wrote || sessionChanged || mode === "replace")) {
           maybeScrollTerminalToBottom(sessionChanged || mode === "replace" ? "force" : "output");
         } else {
@@ -3050,6 +3073,12 @@
           console.error("[wand] xterm fit addon failed to load; continuing without fit support.");
         }
 
+        // Load serialize addon for mobile DOM rendering
+        if (typeof SerializeAddon !== "undefined" && SerializeAddon && typeof SerializeAddon.SerializeAddon === "function") {
+          state.serializeAddon = new SerializeAddon.SerializeAddon();
+          state.terminal.loadAddon(state.serializeAddon);
+        }
+
         state.terminal.open(container);
         applyTerminalScale();
         state.terminalViewportSize = { width: 0, height: 0 };
@@ -3088,6 +3117,9 @@
         // Create custom scrollbar overlay
         initTerminalScrollbar(container);
 
+        // Terminal copy button for mobile
+        initMobileDomTerminal(container);
+
         if (state.selectedId) {
           var session = state.sessions.find(function(s) { return s.id === state.selectedId; });
           if (session) {
@@ -3821,6 +3853,8 @@
             if (modeEl) modeEl.value = cfg.defaultMode || "default";
             if (cwdEl) cwdEl.value = cfg.defaultCwd || "";
             if (shellEl) shellEl.value = cfg.shell || "";
+            var domTermEl = document.getElementById("cfg-dom-terminal");
+            if (domTermEl) domTermEl.checked = cfg.experimentalDomTerminal === true;
 
             // Cert status
             var certStatus = document.getElementById("cert-status");
@@ -3858,6 +3892,7 @@
           defaultMode: (document.getElementById("cfg-mode") || {}).value,
           defaultCwd: (document.getElementById("cfg-cwd") || {}).value,
           shell: (document.getElementById("cfg-shell") || {}).value,
+          experimentalDomTerminal: (document.getElementById("cfg-dom-terminal") || {}).checked,
         };
 
         fetch("/api/settings/config", {
@@ -4549,12 +4584,11 @@
           el.scrollTop = 0;
           return;
         }
-        // Force synchronous reflow so scrollHeight reflects current content
-        void el.offsetHeight;
-        // Temporarily collapse to measure true content height
-        el.style.height = "0";
-        el.style.minHeight = "0";
-        void el.offsetHeight;
+        // Measure content height by temporarily setting height to minHeight
+        // and reading scrollHeight. Avoid collapsing to 0 which causes layout jumps.
+        var prevOverflow = el.style.overflowY;
+        el.style.overflowY = "hidden";
+        el.style.height = minHeight + "px";
         var contentHeight = el.scrollHeight;
         var newHeight = Math.max(minHeight, Math.min(contentHeight, maxHeight));
         var shouldScrollInside = contentHeight > maxHeight;
@@ -4867,6 +4901,7 @@
             var idx = state.messageQueue.indexOf(input);
             if (idx > -1) state.messageQueue.splice(idx, 1);
             updateQueueCounter();
+            scheduleMobileDomUpdate();
           });
         });
         return state.inputQueue;
@@ -5728,9 +5763,10 @@
       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" });
+        // column-reverse: scrollTop=0 is the visual bottom.
+        // Use direct scrollTop instead of scrollIntoView() to avoid
+        // shifting ancestor containers and causing the input box to jump.
+        chatMessages.scrollTop = 0;
       }
 
       function updateInputPanelViewportSpacing() {
@@ -6469,9 +6505,6 @@
             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();
-            }
           });
         }
 
@@ -6521,7 +6554,6 @@
           }
 
           if (isKeyboardOpen && (!keyboardOpen || heightChanged) && shouldAdjustForKeyboard(vv, inputBox)) {
-            scrollLatestMessageIntoView();
             syncInputBoxScroll(inputBox);
           }
 
@@ -6539,7 +6571,6 @@
         }
 
         vv.addEventListener('resize', debouncedUpdate);
-        vv.addEventListener('scroll', debouncedUpdate);
 
         updateViewport();
       }
@@ -6668,6 +6699,16 @@
           state.terminal = null;
         }
         state.fitAddon = null;
+        state.serializeAddon = null;
+        if (state.terminalDomView && state.terminalDomView.parentNode) {
+          state.terminalDomView.parentNode.removeChild(state.terminalDomView);
+        }
+        state.terminalDomView = null;
+        state._lastDomHtml = "";
+        if (state.terminalDomUpdateTimer) {
+          clearTimeout(state.terminalDomUpdateTimer);
+          state.terminalDomUpdateTimer = null;
+        }
         state.terminalSessionId = null;
         state.terminalOutput = "";
         state.terminalViewportSize = { width: 0, height: 0 };
@@ -6845,6 +6886,7 @@
                 }
                 maybeScrollTerminalToBottom("output");
                 updateTerminalJumpToBottomButton();
+                scheduleMobileDomUpdate();
               } else if (Object.prototype.hasOwnProperty.call(msg.data, "output")) {
                 // Fallback: no chunk available, use full-output comparison
                 syncTerminalBuffer(msg.sessionId, msg.data.output || "", { mode: "append" });
@@ -7675,6 +7717,243 @@
             }
           });
         });
+        // Attach message-level copy buttons for touch devices
+        attachMessageCopyButtons(container);
+      }
+
+      // ===== Mobile message copy (long-press or tap copy button) =====
+      var _msgCopyState = { timer: null, activeBtn: null };
+
+      function attachMessageCopyButtons(container) {
+        var isTouch = window.matchMedia("(pointer: coarse)").matches;
+        if (!isTouch) return;
+        container.querySelectorAll(".chat-message").forEach(function(msgEl) {
+          if (msgEl.querySelector(".msg-copy-btn")) return; // already attached
+          var bubble = msgEl.querySelector(".chat-message-bubble");
+          if (!bubble) return;
+          var btn = document.createElement("button");
+          btn.className = "msg-copy-btn";
+          btn.textContent = "复制";
+          btn.addEventListener("click", function(e) {
+            e.stopPropagation();
+            var text = bubble.innerText || bubble.textContent || "";
+            navigator.clipboard.writeText(text.trim()).then(function() {
+              btn.textContent = "已复制";
+              btn.classList.add("copied");
+              setTimeout(function() {
+                btn.textContent = "复制";
+                btn.classList.remove("copied");
+                btn.classList.remove("visible");
+              }, 1500);
+            });
+          });
+          msgEl.appendChild(btn);
+        });
+      }
+
+      // Long-press to show copy button on chat messages
+      (function initMobileCopyLongPress() {
+        var isTouch = window.matchMedia("(pointer: coarse)").matches;
+        if (!isTouch) return;
+
+        var longPressTimer = null;
+        var touchStartY = 0;
+
+        document.addEventListener("touchstart", function(e) {
+          var msgEl = e.target.closest(".chat-message");
+          if (!msgEl) return;
+          var bubble = msgEl.querySelector(".chat-message-bubble");
+          if (!bubble) return;
+          touchStartY = e.touches[0].clientY;
+          longPressTimer = setTimeout(function() {
+            var btn = msgEl.querySelector(".msg-copy-btn");
+            if (btn) {
+              // Hide any other visible copy buttons
+              document.querySelectorAll(".msg-copy-btn.visible").forEach(function(b) {
+                b.classList.remove("visible");
+              });
+              btn.classList.add("visible");
+            }
+          }, 500);
+        }, { passive: true });
+
+        document.addEventListener("touchmove", function(e) {
+          if (longPressTimer && Math.abs(e.touches[0].clientY - touchStartY) > 10) {
+            clearTimeout(longPressTimer);
+            longPressTimer = null;
+          }
+        }, { passive: true });
+
+        document.addEventListener("touchend", function() {
+          if (longPressTimer) {
+            clearTimeout(longPressTimer);
+            longPressTimer = null;
+          }
+        }, { passive: true });
+
+        // Dismiss copy buttons when tapping elsewhere
+        document.addEventListener("click", function(e) {
+          if (!e.target.closest(".msg-copy-btn")) {
+            document.querySelectorAll(".msg-copy-btn.visible").forEach(function(b) {
+              b.classList.remove("visible");
+            });
+          }
+        });
+      })();
+
+      // ===== Terminal copy button for mobile =====
+      // ===== Mobile DOM terminal view =====
+      function initMobileDomTerminal(container) {
+        var isTouch = window.matchMedia("(pointer: coarse)").matches;
+        if (!isTouch) return;
+        // Gated by experimental config flag
+        if (!state.config || !state.config.experimentalDomTerminal) return;
+
+        // Create DOM view container
+        var domView = document.createElement("div");
+        domView.className = "terminal-dom-view active";
+        container.appendChild(domView);
+
+        // Always set font-size explicitly to match xterm
+        domView.style.fontSize = (state.terminalBaseFontSize * state.terminalScale) + "px";
+
+        // Hide xterm canvas but keep it in layout for FitAddon sizing.
+        // Use opacity:0 + pointer-events:none so the element still occupies
+        // space in the flex container and fit() can compute cols/rows correctly.
+        setTimeout(function() {
+          var xtermEl = container.querySelector(".xterm");
+          if (xtermEl) {
+            xtermEl.style.opacity = "0";
+            xtermEl.style.pointerEvents = "none";
+          }
+        }, 100);
+
+        // Save reference
+        state.terminalDomView = domView;
+        state.terminalDomUpdateTimer = null;
+
+        // Scroll events for auto-follow
+        domView.addEventListener("scroll", function() {
+          var distance = domView.scrollHeight - domView.clientHeight - domView.scrollTop;
+          if (distance <= state.terminalScrollThreshold) {
+            state.terminalAutoFollow = true;
+            clearTerminalScrollIdleTimer();
+            updateTerminalJumpToBottomButton();
+          } else {
+            setTerminalManualScrollActive();
+          }
+        }, { passive: true });
+
+        domView.addEventListener("touchmove", function() {
+          setTerminalManualScrollActive();
+        }, { passive: true });
+
+        // Trigger initial render
+        scheduleMobileDomUpdate();
+      }
+
+      function updateMobileDomView() {
+        if (!state.terminalDomView || !state.serializeAddon) return;
+
+        try {
+          var html = state.serializeAddon.serializeAsHTML({
+            includeGlobalBackground: true
+          });
+
+          // Extract the <pre>...</pre> portion
+          var match = html.match(/<pre[\s\S]*<\/pre>/);
+          var preHtml = match ? match[0] : "";
+
+          // Strip inline font-size/font-family from the serialized HTML
+          // so our CSS controls sizing and font consistently
+          preHtml = preHtml.replace(/font-size:\s*[^;"']+;?/g, "");
+          preHtml = preHtml.replace(/font-family:\s*[^;"']+;?/g, "");
+
+          // Fix colors for dark background
+          preHtml = fixDarkTerminalColors(preHtml);
+
+          // Skip update if content unchanged
+          if (preHtml === state._lastDomHtml) return;
+          state._lastDomHtml = preHtml;
+
+          // Preserve scroll position for non-auto-follow mode
+          var wasAtBottom = state.terminalAutoFollow;
+          var scrollTop = state.terminalDomView.scrollTop;
+
+          state.terminalDomView.innerHTML = preHtml;
+
+          if (wasAtBottom) {
+            state.terminalDomView.scrollTop = state.terminalDomView.scrollHeight;
+          } else {
+            state.terminalDomView.scrollTop = scrollTop;
+          }
+        } catch (e) {
+          // Fallback: plain text if serialize fails
+          if (state.terminal && state.terminal.buffer) {
+            var buf = state.terminal.buffer.active;
+            var lines = [];
+            for (var i = 0; i < buf.length; i++) {
+              var line = buf.getLine(i);
+              if (line) lines.push(line.translateToString(true));
+            }
+            var text = lines.join("\n").replace(/\n+$/, "");
+            state.terminalDomView.innerHTML = '<pre><div style="padding:8px 12px">' + escapeHtml(text) + '</div></pre>';
+            if (state.terminalAutoFollow) {
+              state.terminalDomView.scrollTop = state.terminalDomView.scrollHeight;
+            }
+          }
+        }
+      }
+
+      // Fix serialize addon's color issues on dark terminal background
+      function fixDarkTerminalColors(html) {
+        // Theme reference: bg=#1f1b17, fg=#f5eadc, black=#1f1b17, brightBlack=#625347
+        // 1. Hardcoded inverse: black text on gray → theme fg on theme brightBlack bg
+        html = html.replace(
+          /color:\s*#000000;\s*background-color:\s*#BFBFBF/g,
+          "color: #f5eadc; background-color: #625347"
+        );
+        // 2. Fix foreground colors that are too dark to read on #1f1b17 background.
+        //    Process each style attribute: split into declarations, fix only "color:" (not "background-color:").
+        html = html.replace(/style='([^']*)'/g, function(_match, styles) {
+          var parts = styles.split(";");
+          for (var i = 0; i < parts.length; i++) {
+            var decl = parts[i].trim();
+            // Skip background-color declarations
+            if (/^background-color\s*:/.test(decl)) continue;
+            // Match standalone color declaration
+            if (/^color\s*:/.test(decl)) {
+              var hexMatch = decl.match(/#([0-9a-fA-F]{6})\b/);
+              if (hexMatch && isColorTooDark("#" + hexMatch[1])) {
+                parts[i] = parts[i].replace(/#[0-9a-fA-F]{6}/, "#625347");
+              }
+            }
+          }
+          return "style='" + parts.join(";") + "'";
+        });
+        return html;
+      }
+
+      function isColorTooDark(hex) {
+        // Parse hex color and check relative luminance
+        var r = parseInt(hex.substring(1, 3), 16);
+        var g = parseInt(hex.substring(3, 5), 16);
+        var b = parseInt(hex.substring(5, 7), 16);
+        // Simple perceived brightness: if below threshold, it's too dark for #1f1b17 bg
+        var brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        return brightness < 45; // #1f1b17 has brightness ~22, threshold catches colors close to it
+      }
+
+      function scheduleMobileDomUpdate() {
+        if (!state.terminalDomView) return;
+        // Trailing-edge debounce: reset timer on each call to batch rapid updates
+        if (state.terminalDomUpdateTimer) {
+          clearTimeout(state.terminalDomUpdateTimer);
+        }
+        state.terminalDomUpdateTimer = setTimeout(function() {
+          state.terminalDomUpdateTimer = null;
+          updateMobileDomView();
+        }, 150);
       }
 
       function parseMessages(output, command) {

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

@@ -2211,6 +2211,18 @@
     .chat-message:hover {
       transform: translateY(-1px);
     }
+    @media (hover: none) {
+      .chat-message:hover {
+        transform: none;
+      }
+      .chat-message:hover .chat-message-bubble {
+        box-shadow: var(--shadow-sm);
+      }
+      .chat-message.assistant:hover .chat-message-bubble {
+        border-color: var(--border-subtle);
+        box-shadow: var(--shadow-sm);
+      }
+    }
 
     .chat-message.user {
       align-self: flex-end;
@@ -7177,4 +7189,102 @@
       100% { background-position: -200% 0; }
     }
 
+    /* ===== 移动端文本选择与复制优化 ===== */
+    .chat-message-bubble {
+      -webkit-user-select: text;
+      user-select: text;
+    }
+
+    /* 消息气泡复制按钮 */
+    .msg-copy-btn {
+      display: none;
+      position: absolute;
+      top: -32px;
+      right: 4px;
+      padding: 4px 10px;
+      font-size: 0.75rem;
+      background: var(--bg-elevated);
+      color: var(--text-secondary);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-sm);
+      box-shadow: var(--shadow-md);
+      cursor: pointer;
+      user-select: none;
+      -webkit-user-select: none;
+      z-index: 10;
+      white-space: nowrap;
+      -webkit-tap-highlight-color: transparent;
+      touch-action: manipulation;
+    }
+    .msg-copy-btn.visible {
+      display: block;
+    }
+    .msg-copy-btn.copied {
+      background: var(--success-muted);
+      color: var(--success);
+      border-color: var(--success);
+    }
+    .chat-message {
+      position: relative;
+    }
+
+    /* ===== 移动端 DOM 终端视图 ===== */
+    .terminal-dom-view {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
+      -webkit-overflow-scrolling: touch;
+      background: var(--bg-terminal);
+      z-index: 1;
+      font-size: 13px;
+    }
+
+    .terminal-dom-view.active {
+      display: block;
+    }
+
+    .terminal-dom-view pre {
+      margin: 0;
+      padding: 0;
+      background: transparent !important;
+      font-family: "Geist Mono", "SF Mono", monospace !important;
+      font-size: inherit !important;
+      line-height: 1.5 !important;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      word-break: normal;
+      -webkit-user-select: text;
+      user-select: text;
+    }
+
+    /* serializeAsHTML 外层 div 携带主题色，直接继承 */
+    .terminal-dom-view pre > div {
+      font-family: "Geist Mono", "SF Mono", monospace !important;
+      font-size: inherit !important;
+      line-height: 1.5 !important;
+      padding: 8px 12px;
+    }
+
+    /* serializeAsHTML 每行 div */
+    .terminal-dom-view pre > div > div {
+      min-height: 1.5em;
+    }
+
+    /* span 继承终端字体 */
+    .terminal-dom-view span {
+      font-family: inherit !important;
+      font-size: inherit !important;
+      line-height: inherit !important;
+    }
+
+    /* 确保按钮在 DOM 视图之上 */
+    .terminal-jump-bottom {
+      z-index: 20;
+    }
+
     /* 结束标记 */

package/dist/web-ui/index.js

@@ -12,7 +12,7 @@ export function renderApp(configPath) {
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content, user-scalable=no" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <title>Wand Console</title>
   <meta name="description" content="Local CLI Console for Vibe Coding - Manage terminal sessions from your browser" />
   <meta name="theme-color" content="#f6f1e8" media="(prefers-color-scheme: light)" />
@@ -37,6 +37,7 @@ ${cssStyles}
   <div id="app"></div>
 ${scriptOpen} src="/vendor/xterm/lib/xterm.js">${scriptClose}
 ${scriptOpen} src="/vendor/xterm-addon-fit/lib/addon-fit.js">${scriptClose}
+${scriptOpen} src="/vendor/xterm-addon-serialize/lib/xterm-addon-serialize.js">${scriptClose}
 ${scriptOpen}>
 ${scriptContent}
 ${scriptClose}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@co0ontty/wand",
-  "version": "1.3.0",
+  "version": "1.3.3",
   "description": "A web terminal for local CLI tools like Claude.",
   "type": "module",
   "bin": {
@@ -38,7 +38,8 @@
     "express": "^4.21.2",
     "node-pty": "^1.1.0",
     "ws": "^8.19.0",
-    "xterm": "^5.3.0"
+    "xterm": "^5.3.0",
+    "xterm-addon-serialize": "^0.11.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",