ai-or-die 0.1.93 → 0.1.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-or-die",
-  "version": "0.1.93",
+  "version": "0.1.95",
   "description": "Universal AI coding terminal — Claude, Copilot, Gemini & more in your browser",
   "main": "src/server.js",
   "bin": {

package/src/public/app.js

@@ -402,6 +402,10 @@ class ClaudeCodeWebInterface {
         });
 
         window.addEventListener('resize', () => {
+            // Skip during a soft-keyboard transition: the keyboard controller
+            // owns the (coalesced) fit. On layout-viewport-resizing browsers a
+            // window.resize fires mid-animation and would race a competing fit.
+            if (this._inKeyboardTransition) return;
             this.fitTerminal();
         });
 
@@ -571,6 +575,63 @@ class ClaudeCodeWebInterface {
         });
     }
 
+    // Upload an image over HTTP (POST /api/images/upload) instead of the WS
+    // image_upload path. A real photo's base64 (~5.5 MB) exceeds the 1 MiB WS
+    // JSON guard, which force-closes the socket with 1009 — previously surfaced
+    // (wrongly) as "A voice message was rejected". HTTP has a 20 MB body limit.
+    // On success the returned temp path is injected into the terminal.
+    _uploadImage(imageData, sessionId) {
+        sessionId = sessionId || this.currentClaudeSessionId;
+        if (!sessionId) { this._imageError('No session joined'); return; }
+        const caption = imageData.caption || '';
+        const body = JSON.stringify({
+            sessionId: sessionId,
+            base64: imageData.base64,
+            mimeType: imageData.mimeType,
+            fileName: imageData.fileName || 'pasted-image.png',
+            caption: caption
+        });
+        this.authFetch('/api/images/upload', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: body
+        }).then(async (resp) => {
+            if (!resp.ok) {
+                let msg = 'HTTP ' + resp.status;
+                try { const j = await resp.json(); if (j && j.error) msg = j.error; } catch (_) {}
+                this._imageError(msg);
+                return;
+            }
+            const data = await resp.json();
+            if (!data || !data.filePath) {
+                this._imageError('Upload succeeded but no file path was returned');
+                return;
+            }
+            this._injectImagePath(data.filePath, caption);
+        }).catch((e) => this._imageError((e && e.message) || 'Upload failed'));
+    }
+
+    // Inject an uploaded image's temp path into the active terminal (caption +
+    // quoted path), matching the legacy image_upload_complete behavior.
+    _injectImagePath(filePath, caption) {
+        if (!filePath) return;
+        const normalizedPath = filePath.replace(/\\/g, '/');
+        const quotedPath = '"' + normalizedPath + '"';
+        const inputText = caption ? caption + ' ' + quotedPath : quotedPath;
+        let normalized = attachClipboardHandler.normalizeLineEndings(inputText);
+        if (this.terminal && this.terminal.modes && this.terminal.modes.bracketedPasteMode) {
+            normalized = attachClipboardHandler.wrapBracketedPaste(normalized);
+        }
+        this.send({ type: 'input', data: normalized });
+    }
+
+    _imageError(msg) {
+        if (window.feedback) window.feedback.warning('Image upload failed: ' + msg);
+        if (this.terminal) {
+            this.terminal.write('\r\n\x1b[31m[Image upload error] ' + msg + '\x1b[0m\r\n');
+        }
+    }
+
     sendEscape() {
         // Send ESC key to terminal
         if (this.socket && this.socket.readyState === WebSocket.OPEN) {
@@ -631,7 +692,7 @@ class ClaudeCodeWebInterface {
                 foreground: '#f0f6fc',
                 cursor: '#ff6b00',
                 cursorAccent: '#0d1117',
-                selection: 'rgba(255, 107, 0, 0.2)',
+                selectionBackground: 'rgba(255, 107, 0, 0.2)',
                 black: '#484f58',
                 red: '#ff7b72',
                 green: '#7ee787',
@@ -680,6 +741,20 @@ class ClaudeCodeWebInterface {
 
         this.terminal.open(document.getElementById('terminal'));
 
+        // Trackpad/mouse-wheel policy: preempt xterm's alt-buffer wheel->arrow
+        // translation so scrolling doesn't hijack the Claude Code TUI. Reads the
+        // live setting via the cached `_wheelScrollMode` (default 'dontHijack').
+        if (typeof window.attachTerminalWheel === 'function') {
+            if (this._wheelHandler && this._wheelHandler.dispose) {
+                try { this._wheelHandler.dispose(); } catch (_) {}
+            }
+            this._wheelHandler = window.attachTerminalWheel(
+                this.terminal,
+                document.getElementById('terminal'),
+                () => this._wheelScrollMode || 'dontHijack'
+            );
+        }
+
         // Faithful per-tab snapshot cache for instant tab-switch repaint.
         // Guarded: if the serialize addon or the cache class failed to load
         // (e.g. CDN blocked), snapshotCache stays null and every call site is
@@ -735,6 +810,10 @@ class ClaudeCodeWebInterface {
         if (termContainerEl && typeof ResizeObserver !== 'undefined') {
             let resizeTimeout;
             new ResizeObserver(() => {
+                // During a soft-keyboard transition the dedicated keyboard
+                // controller owns the (single, coalesced) fit — skip here so we
+                // don't fire a second competing fit mid-animation (flicker).
+                if (this._inKeyboardTransition) return;
                 clearTimeout(resizeTimeout);
                 resizeTimeout = setTimeout(() => {
                     this.fitTerminal();
@@ -758,16 +837,7 @@ class ClaudeCodeWebInterface {
             this._imageHandler = window.imageHandler.attachImageHandler(
                 this.terminal, termContainer, {
                     onImageReady: (imageData) => {
-                        this._pendingImageCaption = imageData.caption;
-                        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-                            this.send({
-                                type: 'image_upload',
-                                base64: imageData.base64,
-                                mimeType: imageData.mimeType,
-                                fileName: imageData.fileName || 'pasted-image.png',
-                                caption: imageData.caption || ''
-                            });
-                        }
+                        this._uploadImage(imageData);
                     },
                     // Non-image files pasted from a file manager (clipboardData
                     // carries File objects) — route through the generic pipeline.
@@ -799,16 +869,7 @@ class ClaudeCodeWebInterface {
                         files && files.length) {
                         try {
                             window.imageHandler.showImagePreview(files[0], (imageData) => {
-                                this._pendingImageCaption = imageData.caption;
-                                if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-                                    this.send({
-                                        type: 'image_upload',
-                                        base64: imageData.base64,
-                                        mimeType: imageData.mimeType,
-                                        fileName: imageData.fileName || 'pasted-image.png',
-                                        caption: imageData.caption || ''
-                                    });
-                                }
+                                this._uploadImage(imageData);
                             });
                         } catch (_) { /* ignore */ }
                     }
@@ -847,8 +908,10 @@ class ClaudeCodeWebInterface {
                 }
                 this._ctrlModifierPending = false;
                 if (this.extraKeys) {
-                    this.extraKeys.ctrlActive = false;
-                    this.extraKeys._updateCtrlVisual();
+                    // Use the shared consume so the sticky-Ctrl 5s timeout is
+                    // cleared too (a stale timeout could otherwise cancel a
+                    // later Ctrl press).
+                    this.extraKeys._consumeCtrl();
                 }
             }
             if (this.socket && this.socket.readyState === WebSocket.OPEN) {
@@ -932,7 +995,13 @@ class ClaudeCodeWebInterface {
     _setupExtraKeys() {
         if (!this.isMobile || typeof ExtraKeys === 'undefined') return;
 
+        document.body.classList.add('is-mobile');
         this.extraKeys = new ExtraKeys({ app: this });
+        // Control-mode "all keys" panel (keyboard-down). Launcher FAB is shown
+        // via the .is-mobile body class. See keys-panel.js / ADR-0037.
+        if (typeof KeysPanel !== 'undefined') {
+            this.keysPanel = new KeysPanel({ app: this });
+        }
         this._keyboardOpen = false;
 
         // Browsers without visualViewport (Firefox Android, Samsung Internet):
@@ -970,6 +1039,11 @@ class ClaudeCodeWebInterface {
                 this._keyboardOpen = false;
                 document.body.classList.remove('keyboard-open');
                 this._restoreTerminalFromKeyboard();
+            } else if (heightDiff > threshold && this._keyboardOpen) {
+                // Keyboard already open but the viewport height changed (final
+                // animation frame, or rotation while open) — re-apply the size so
+                // the terminal isn't left fit against a stale intermediate height.
+                this._updateKeyboardHeight(currentHeight);
             }
         };
 
@@ -1045,26 +1119,65 @@ class ClaudeCodeWebInterface {
     }
 
     _adjustTerminalForKeyboard(availableHeight) {
-        if (this.extraKeys) this.extraKeys.show();
+        if (this.extraKeys) {
+            this.extraKeys.show();
+            this.extraKeys._updateRow2Visibility();
+        }
+        this._updateKeyboardHeight(availableHeight);
+    }
+
+    // Apply (or re-apply) the terminal size for the current keyboard-open
+    // viewport height. Called on the first threshold crossing AND on every later
+    // visualViewport frame while the keyboard stays open (final animation frame,
+    // or rotation) so the terminal never fits against a stale intermediate
+    // height and extends under the keyboard. Style writes are cheap; the xterm
+    // fit is coalesced into one rAF below.
+    _updateKeyboardHeight(availableHeight) {
+        this._inKeyboardTransition = true;
         document.documentElement.style.setProperty('--visual-viewport-height', availableHeight + 'px');
         const termEl = document.getElementById('terminal');
         if (termEl) {
-            // Force reflow after show() so offsetHeight is accurate
-            const extraKeysHeight = this.extraKeys?.container?.offsetHeight || 44;
-            void extraKeysHeight; // ensure reflow read is not optimized away
-            termEl.style.height = (availableHeight - (this.extraKeys?.container?.offsetHeight || 44)) + 'px';
-            if (this.fitAddon) this.fitAddon.fit();
+            const barH = (this.extraKeys && this.extraKeys.container)
+                ? (this.extraKeys.container.offsetHeight || 44) : 0;
+            termEl.style.height = (availableHeight - barH) + 'px';
         }
+        this._scheduleKeyboardFit();
+        this._endKeyboardTransitionSoon();
     }
 
     _restoreTerminalFromKeyboard() {
+        this._inKeyboardTransition = true;
         if (this.extraKeys) this.extraKeys.hide();
         document.documentElement.style.removeProperty('--visual-viewport-height');
         const termEl = document.getElementById('terminal');
-        if (termEl) {
-            termEl.style.height = '';
-            if (this.fitAddon) this.fitAddon.fit();
-        }
+        if (termEl) termEl.style.height = '';
+        this._scheduleKeyboardFit();
+        this._endKeyboardTransitionSoon();
+    }
+
+    // Coalesce fits during a keyboard transition into a single rAF. Uses
+    // fitTerminal() (which applies the mobile row/column adjustments) and refits
+    // split panes — NOT a raw fitAddon.fit() that would bypass both.
+    _scheduleKeyboardFit() {
+        if (this._kbFitRaf) cancelAnimationFrame(this._kbFitRaf);
+        this._kbFitRaf = requestAnimationFrame(() => {
+            this._kbFitRaf = null;
+            this.fitTerminal();
+            if (this.splitContainer && this.splitContainer.splits) {
+                this.splitContainer.splits.forEach(s => { try { s.fit(); } catch (_) {} });
+            }
+        });
+    }
+
+    // End the transition window after the CSS chrome-collapse would have settled,
+    // then do one final measured fit to reconcile the resting layout.
+    _endKeyboardTransitionSoon() {
+        if (this._kbTransitionTimer) clearTimeout(this._kbTransitionTimer);
+        this._kbTransitionTimer = setTimeout(() => {
+            this._kbTransitionTimer = null;
+            this._inKeyboardTransition = false;
+            this._scheduleKeyboardFit();
+        }, 320);
     }
 
     showSessionSelectionModal() {
@@ -1190,16 +1303,7 @@ class ClaudeCodeWebInterface {
             // Fallback: generic handler unavailable — keep the legacy image-only picker.
             attachBtn.addEventListener('click', () => {
                 window.imageHandler.triggerFilePicker((imageData) => {
-                    this._pendingImageCaption = imageData.caption;
-                    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-                        this.send({
-                            type: 'image_upload',
-                            base64: imageData.base64,
-                            mimeType: imageData.mimeType,
-                            fileName: imageData.fileName || 'attached-image.png',
-                            caption: imageData.caption || ''
-                        });
-                    }
+                    this._uploadImage(imageData);
                 });
             });
         }
@@ -1300,6 +1404,22 @@ class ClaudeCodeWebInterface {
                 this.closeMobileMenu();
             });
         }
+
+        // Mobile image attach — the desktop attach button is hidden on mobile,
+        // so this is the mobile entry point. The file picker offers Photo Library
+        // / Take Photo / Files on iOS; the picked image goes through the preview
+        // modal and the HTTP upload path (_uploadImage).
+        const attachImageBtnMobile = document.getElementById('attachImageBtnMobile');
+        if (attachImageBtnMobile) {
+            attachImageBtnMobile.addEventListener('click', () => {
+                this.closeMobileMenu();
+                if (window.imageHandler && typeof window.imageHandler.triggerFilePicker === 'function') {
+                    window.imageHandler.triggerFilePicker((imageData) => this._uploadImage(imageData));
+                } else if (window.feedback) {
+                    window.feedback.warning('Image upload is unavailable');
+                }
+            });
+        }
         
         // Mobile sessions button
         const sessionsBtnMobile = document.getElementById('sessionsBtnMobile');
@@ -2187,7 +2307,17 @@ class ClaudeCodeWebInterface {
                         if (restartGen !== this._socketGeneration) return;
                         this.reconnect();
                     }, restartBackoff);
-                } else if ((!event.wasClean || voiceClose.rejected) && this.reconnectAttempts < this.maxReconnectAttempts) {
+                // Reconnect decision extracted to WsReconnect.isReconnectableClose
+                // (unit-tested): abnormal close, our own heartbeat pong-timeout
+                // (code 4000 — a clean close that MUST still reconnect, or a single
+                // transient pong-timeout strands the client on "Disconnected"), or a
+                // server frame-rejection (1009/1003). Inline fallback keeps reconnect
+                // working even if the tiny module failed to load.
+                } else if (
+                    ((window.WsReconnect && window.WsReconnect.isReconnectableClose)
+                        ? window.WsReconnect.isReconnectableClose(event, voiceClose.rejected)
+                        : (!event.wasClean || event.code === 4000 || voiceClose.rejected))
+                    && this.reconnectAttempts < this.maxReconnectAttempts) {
                     this.updateStatus('Reconnecting (' + (this.reconnectAttempts + 1) + '/' + this.maxReconnectAttempts + ')...');
                     // First attempt is fast (250ms covers a server-process restart window);
                     // subsequent attempts use exponential backoff with jitter.
@@ -2209,7 +2339,11 @@ class ClaudeCodeWebInterface {
                     this.reconnectAttempts++;
                 } else {
                     this.updateStatus('Disconnected');
-                    this.showError(`Connection lost after ${this.maxReconnectAttempts} attempts.\n\nYour session data is preserved on the server.\n\u2022 Check your network connection\n\u2022 The server may have restarted \u2014 try refreshing the page`);
+                    const n = this.reconnectAttempts;
+                    const lead = n > 0
+                        ? `Connection lost after ${n} reconnect attempt${n === 1 ? '' : 's'}.`
+                        : 'Disconnected from the server.';
+                    this.showError(`${lead}\n\nYour session data is preserved on the server.\n\u2022 Check your network connection\n\u2022 The server may have restarted \u2014 try refreshing the page`);
                 }
             };
             
@@ -3467,40 +3601,30 @@ class ClaudeCodeWebInterface {
     }
 
     _loadGpuRenderer() {
+        // The Canvas renderer was removed in xterm 6.0. Mobile keeps using the
+        // reliable default DOM renderer (WebGL was historically avoided there for
+        // context-loss/memory reasons); desktop uses WebGL and falls back to the
+        // DOM renderer on failure or context loss.
         if (this.isMobile) {
-            console.log('[Renderer] Mobile detected, using Canvas renderer for reliability');
-            this._loadCanvasAddon();
+            console.log('[Renderer] Mobile detected, using DOM renderer for reliability');
             return;
         }
         if (typeof WebglAddon !== 'undefined') {
             try {
                 this.webglAddon = new WebglAddon.WebglAddon();
                 this.webglAddon.onContextLoss(() => {
-                    this.webglAddon.dispose();
+                    const addon = this.webglAddon;
                     this.webglAddon = null;
-                    this._loadCanvasAddon();
+                    try { if (addon) addon.dispose(); } catch (_) {}
+                    console.log('[Renderer] WebGL context lost, using DOM renderer');
                 });
                 this.terminal.loadAddon(this.webglAddon);
             } catch (e) {
-                console.log('[Renderer] WebGL unavailable, using Canvas renderer');
-                this._loadCanvasAddon();
+                this.webglAddon = null;
+                console.log('[Renderer] WebGL unavailable, using DOM renderer');
             }
         } else {
-            console.log('[Renderer] WebGL unavailable, using Canvas renderer');
-            this._loadCanvasAddon();
-        }
-    }
-
-    _loadCanvasAddon() {
-        if (typeof CanvasAddon !== 'undefined') {
-            try {
-                this.canvasAddon = new CanvasAddon.CanvasAddon();
-                this.terminal.loadAddon(this.canvasAddon);
-            } catch (e) {
-                console.log('[Renderer] Canvas unavailable, using DOM renderer (slower)');
-            }
-        } else {
-            console.log('[Renderer] Canvas unavailable, using DOM renderer (slower)');
+            console.log('[Renderer] WebGL unavailable, using DOM renderer');
         }
     }
 
@@ -3900,7 +4024,6 @@ class ClaudeCodeWebInterface {
                     break;
                 }
                 case 'pasteImage': {
-                    const pasteSocket = activeSocket;
                     try {
                         if (navigator.clipboard && typeof navigator.clipboard.read === 'function') {
                             const items = await navigator.clipboard.read();
@@ -3911,17 +4034,7 @@ class ClaudeCodeWebInterface {
                                 if (imageType) {
                                     const blob = await item.getType(imageType);
                                     window.imageHandler.showImagePreview(blob, (imageData) => {
-                                        this._pendingImageCaption = imageData.caption;
-                                        const msg = JSON.stringify({
-                                            type: 'image_upload',
-                                            base64: imageData.base64,
-                                            mimeType: imageData.mimeType,
-                                            fileName: imageData.fileName || 'pasted-image.png',
-                                            caption: imageData.caption || ''
-                                        });
-                                        if (pasteSocket && pasteSocket.readyState === WebSocket.OPEN) {
-                                            pasteSocket.send(msg);
-                                        }
+                                        this._uploadImage(imageData);
                                     });
                                     return;
                                 }
@@ -3949,19 +4062,8 @@ class ClaudeCodeWebInterface {
                             { multiple: true }
                         );
                     } else if (window.imageHandler) {
-                        const attachSocket = activeSocket;
                         window.imageHandler.triggerFilePicker((imageData) => {
-                            this._pendingImageCaption = imageData.caption;
-                            const msg = JSON.stringify({
-                                type: 'image_upload',
-                                base64: imageData.base64,
-                                mimeType: imageData.mimeType,
-                                fileName: imageData.fileName || 'attached-image.png',
-                                caption: imageData.caption || ''
-                            });
-                            if (attachSocket && attachSocket.readyState === WebSocket.OPEN) {
-                                attachSocket.send(msg);
-                            }
+                            this._uploadImage(imageData);
                         });
                     }
                     break;
@@ -4175,6 +4277,9 @@ class ClaudeCodeWebInterface {
         const enableSessionStickyNotes = document.getElementById('enableSessionStickyNotes');
         if (enableSessionStickyNotes) enableSessionStickyNotes.checked = settings.enableSessionStickyNotes ?? true;
 
+        const wheelScrollMode = document.getElementById('wheelScrollMode');
+        if (wheelScrollMode) wheelScrollMode.value = settings.wheelScrollMode || 'dontHijack';
+
         // Update install section
         this._updateInstallSection();
     }
@@ -4207,10 +4312,6 @@ class ClaudeCodeWebInterface {
 
         // Capture the socket at attach-initiation time. The image preview modal
         // is async (user-driven); the active session/socket can change while it
-        // is open. Sending on a captured target avoids the upload landing on a
-        // different session (mirrors the context-menu's existing capture).
-        const targetSocket = this.socket;
-
         // Images: reuse the existing single-preview flow. The modal handles one
         // image at a time, so if several images are selected we attach the first
         // and tell the user rather than silently dropping the rest.
@@ -4219,16 +4320,7 @@ class ClaudeCodeWebInterface {
                 window.feedback.info('Only the first image is attached — attach images one at a time.');
             }
             ih.showImagePreview(images[0], (imageData) => {
-                this._pendingImageCaption = imageData.caption;
-                if (targetSocket && targetSocket.readyState === WebSocket.OPEN) {
-                    targetSocket.send(JSON.stringify({
-                        type: 'image_upload',
-                        base64: imageData.base64,
-                        mimeType: imageData.mimeType,
-                        fileName: imageData.fileName || 'attached-image.png',
-                        caption: imageData.caption || ''
-                    }));
-                }
+                this._uploadImage(imageData);
             });
         }
 
@@ -4488,7 +4580,11 @@ class ClaudeCodeWebInterface {
             notifVolume: 30,
             notifDesktop: true,
             enableSessionStickyNotes: true,
-            tabSnapshotLines: 500
+            tabSnapshotLines: 500,
+            // Trackpad/mouse-wheel behaviour inside full-screen (alt-buffer) apps:
+            //   'dontHijack' - wheel does nothing there (no menu hijack in the Claude Code TUI)
+            //   'altScroll'  - wheel sends Up/Down arrows (pagers like `less` scroll)
+            wheelScrollMode: 'dontHijack'
         };
     }
 
@@ -4531,7 +4627,8 @@ class ClaudeCodeWebInterface {
             notifVolume: parseInt(document.getElementById('notifVolume')?.value || '30'),
             notifDesktop: document.getElementById('notifDesktop')?.checked ?? true,
             enableSessionStickyNotes: document.getElementById('enableSessionStickyNotes')?.checked ?? true,
-            tabSnapshotLines: parseInt(document.getElementById('tabSnapshotLines')?.value || '500', 10)
+            tabSnapshotLines: parseInt(document.getElementById('tabSnapshotLines')?.value || '500', 10),
+            wheelScrollMode: document.getElementById('wheelScrollMode')?.value || 'dontHijack'
         };
 
         try {
@@ -4580,6 +4677,10 @@ class ClaudeCodeWebInterface {
         this.terminal.options.cursorBlink = settings.cursorBlink ?? true;
         if (settings.scrollback) this.terminal.options.scrollback = settings.scrollback;
 
+        // Cache the wheel-scroll policy for the capture-phase wheel handler
+        // (read live per wheel event without touching localStorage each notch).
+        this._wheelScrollMode = settings.wheelScrollMode || 'dontHijack';
+
         // Push the instant-snapshot line cap to the cache (0 disables capture+paint).
         if (this.snapshotCache && settings.tabSnapshotLines !== undefined) {
             this.snapshotCache.setMaxLines(settings.tabSnapshotLines);

package/src/public/artifact-panel.js

@@ -20,6 +20,7 @@
   const SDK_SOURCE_IN = 'ai-or-die-artifact-sdk';   // messages FROM the iframe
   const HOST_SOURCE_OUT = 'ai-or-die-artifact-host'; // messages TO the iframe
   const STORE_KEY = 'ai-or-die:artifact-panel:layout';
+  const PHONE_MQ = '(max-width:640px)';
 
   const MIN_W = 320;
   const MIN_H = 240;
@@ -60,6 +61,7 @@
 
       this._layout = this._loadLayout();
       this._buildDom();
+      this._wirePhoneMode();
       this._applyLayout();
       this._minimized = !!this._layout.minimized;
       this._applyMinimized();
@@ -82,6 +84,7 @@
       return {};
     }
     _saveLayout() {
+      if (this._isPhone()) return;
       try {
         window.localStorage.setItem(STORE_KEY, JSON.stringify({
           left: this._layout.left,
@@ -93,6 +96,39 @@
       } catch (_) { /* non-fatal */ }
     }
 
+    _isPhone() {
+      return !!(typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(PHONE_MQ).matches);
+    }
+
+    _wirePhoneMode() {
+      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+      const mql = window.matchMedia(PHONE_MQ);
+      this._phoneMql = mql;
+      this._onPhoneChange = (e) => {
+        const matches = !!(e && typeof e.matches === 'boolean' ? e.matches : mql.matches);
+        if (matches) {
+          this._cancelPointerInteraction();
+          this._clearInlineGeometry();
+        } else {
+          this._applyLayout();
+          this._clampToBounds();
+        }
+      };
+      if (typeof mql.addEventListener === 'function') mql.addEventListener('change', this._onPhoneChange);
+      else if (typeof mql.addListener === 'function') mql.addListener(this._onPhoneChange);
+      if (mql.matches) this._clearInlineGeometry();
+    }
+
+    _clearInlineGeometry() {
+      if (!this.el) return;
+      this.el.style.left = '';
+      this.el.style.top = '';
+      this.el.style.right = '';
+      this.el.style.bottom = '';
+      this.el.style.width = '';
+      this.el.style.height = '';
+    }
+
     _buildDom() {
       this.el = el('div', { class: 'artifact-panel', id: 'artifactPanel', hidden: 'hidden', role: 'dialog', 'aria-label': 'Artifact review' });
 
@@ -167,6 +203,10 @@
 
     // ---- floating-window geometry ----------------------------------------
     _applyLayout() {
+      if (this._isPhone()) {
+        this._clearInlineGeometry();
+        return;
+      }
       const L = this._layout;
       if (typeof L.width === 'number') this.el.style.width = clampNumber(L.width, MIN_W, 4000) + 'px';
       if (typeof L.height === 'number') this.el.style.height = clampNumber(L.height, MIN_H, 4000) + 'px';
@@ -186,6 +226,7 @@
     // live panel size, then persists the corrected value. Safe to call when the
     // panel is visible (a hidden panel measures 0x0, so we skip then).
     _clampToBounds() {
+      if (this._isPhone()) return;
       const L = this._layout;
       if (typeof L.left !== 'number' || typeof L.top !== 'number') return;
       if (this.el.hidden) return;
@@ -211,10 +252,20 @@
       return { width: wr.width, height: wr.height };
     }
 
+    _cancelPointerInteraction() {
+      if (this._dragCleanup) { try { this._dragCleanup(); } catch (_) { /* ignore */ } this._dragCleanup = null; }
+      if (this._resizeCleanup) { try { this._resizeCleanup(); } catch (_) { /* ignore */ } this._resizeCleanup = null; }
+    }
+
     _wireDrag(handle) {
       let startX = 0, startY = 0, originLeft = 0, originTop = 0, dragging = false;
       const onMove = (e) => {
         if (!dragging) return;
+        if (this._isPhone()) {
+          dragging = false;
+          this._cancelPointerInteraction();
+          return;
+        }
         const p = this._point(e);
         const b = this._bounds();
         const rect = this.el.getBoundingClientRect();
@@ -236,6 +287,7 @@
         this._saveLayout();
       };
       handle.addEventListener('mousedown', (e) => {
+        if (this._isPhone()) return;
         // Ignore drags that start on a header button.
         if (e.target && e.target.closest && e.target.closest('.artifact-panel__btn')) return;
         e.preventDefault();
@@ -265,6 +317,11 @@
       let startX = 0, startY = 0, originW = 0, originH = 0, resizing = false;
       const onMove = (e) => {
         if (!resizing) return;
+        if (this._isPhone()) {
+          resizing = false;
+          this._cancelPointerInteraction();
+          return;
+        }
         const p = this._point(e);
         const b = this._bounds();
         const rect = this.el.getBoundingClientRect();
@@ -288,6 +345,7 @@
         this._saveLayout();
       };
       handle.addEventListener('mousedown', (e) => {
+        if (this._isPhone()) return;
         e.preventDefault();
         e.stopPropagation();
         const p = this._point(e);
@@ -886,6 +944,10 @@
     destroy() {
       window.removeEventListener('message', this._onWindowMessage);
       if (this._onWindowResize) window.removeEventListener('resize', this._onWindowResize);
+      if (this._phoneMql && this._onPhoneChange) {
+        if (typeof this._phoneMql.removeEventListener === 'function') this._phoneMql.removeEventListener('change', this._onPhoneChange);
+        else if (typeof this._phoneMql.removeListener === 'function') this._phoneMql.removeListener(this._onPhoneChange);
+      }
       this._teardownSse();
       if (this._dragCleanup) { try { this._dragCleanup(); } catch (_) { /* ignore */ } this._dragCleanup = null; }
       if (this._resizeCleanup) { try { this._resizeCleanup(); } catch (_) { /* ignore */ } this._resizeCleanup = null; }