ai-or-die 0.1.93 → 0.1.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-or-die",
-  "version": "0.1.93",
+  "version": "0.1.94",
   "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) {
@@ -735,6 +796,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 +823,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 +855,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 +894,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 +981,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 +1025,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 +1105,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 +1289,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 +1390,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');
@@ -3900,7 +4006,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 +4016,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 +4044,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;
@@ -4207,10 +4291,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 +4299,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);
             });
         }
 

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; }

package/src/public/components/artifact-panel.css

@@ -293,3 +293,42 @@
   .artifact-panel--maximized .artifact-panel__frame { width: 100%; }
   .artifact-panel--maximized .artifact-panel__chat { max-height: 30%; }
 }
+
+@media (max-width: 640px) {
+  .artifact-panel:not(.artifact-panel--maximized) {
+    left: 0 !important;
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    max-width: none;
+    height: 70vh !important;
+    height: 70dvh !important;
+    min-width: 0;
+    border-radius: 12px 12px 0 0;
+    box-sizing: border-box;
+    padding-bottom: var(--sa-bottom, 0px);
+    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.45);
+  }
+
+  .artifact-panel__resize {
+    display: none;
+  }
+
+  .artifact-panel__header {
+    min-height: 44px;
+  }
+
+  .artifact-panel__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .artifact-panel__reopen {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}