ai-or-die 0.1.68 → 0.1.70

package/package.json

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

package/src/public/app.js

@@ -194,6 +194,7 @@ class ClaudeCodeWebInterface {
         this.setupTerminal();
         this._setupExtraKeys();
         this._setupOrientationHandler();
+        this._setupPwaStandaloneListener();
         this.setupUI();
         if (this.voiceInputConfig) this.setupVoiceInput();
         this.setupPlanDetector();
@@ -691,7 +692,12 @@ class ClaudeCodeWebInterface {
                                 caption: imageData.caption || ''
                             });
                         }
-                    }
+                    },
+                    // Non-image files pasted from a file manager (clipboardData
+                    // carries File objects) — route through the generic pipeline.
+                    // Fires only AFTER the image branch declines, so image paste
+                    // precedence is unchanged.
+                    onFilesPaste: (files) => this._attachFiles(files)
                 }
             );
         }
@@ -827,6 +833,7 @@ class ClaudeCodeWebInterface {
         const handleOrientationChange = () => {
             setTimeout(() => {
                 this.fitTerminal();
+                this._polyfillSafeAreaInsets();
                 // Re-evaluate keyboard state
                 if (window.visualViewport && this._keyboardOpen !== undefined) {
                     const heightDiff = window.innerHeight - window.visualViewport.height;
@@ -1091,9 +1098,20 @@ class ClaudeCodeWebInterface {
             }, 3000);
         };
 
-        // Attach Image button
+        // Attach File button (id is historical: attachImageBtn). Opens a picker
+        // for ANY file type — images go through the preview flow, other files
+        // upload to .claude-attachments/ and inject `@<path>`.
         const attachBtn = document.getElementById('attachImageBtn');
-        if (attachBtn && window.imageHandler) {
+        if (attachBtn && window.genericDropHandler
+                && typeof window.genericDropHandler.triggerFilePicker === 'function') {
+            attachBtn.addEventListener('click', () => {
+                window.genericDropHandler.triggerFilePicker(
+                    (files) => this._attachFiles(files),
+                    { multiple: true }
+                );
+            });
+        } else if (attachBtn && window.imageHandler) {
+            // Fallback: generic handler unavailable — keep the legacy image-only picker.
             attachBtn.addEventListener('click', () => {
                 window.imageHandler.triggerFilePicker((imageData) => {
                     this._pendingImageCaption = imageData.caption;
@@ -2164,6 +2182,16 @@ class ClaudeCodeWebInterface {
                     this._sessionWorkingDirs.set(message.sessionId, message.workingDir);
                 }
                 this.updateSessionButton(message.sessionName);
+
+                // Re-root the (singleton) file-browser panel to the newly
+                // active session's dir. open() short-circuits when already
+                // open, so without this an open panel would keep showing the
+                // previous tab's directory after a tab switch. Fires only when
+                // the panel is open and the session actually changed.
+                if (this._fileBrowserPanel &&
+                    typeof this._fileBrowserPanel.notifyActiveSessionChanged === 'function') {
+                    this._fileBrowserPanel.notifyActiveSessionChanged(message.sessionId);
+                }
                 
                 // Update tab status
                 if (this.sessionTabManager) {
@@ -3419,7 +3447,7 @@ class ClaudeCodeWebInterface {
                             }
                         } else {
                             if (activeTerminal) {
-                                activeTerminal.write('\r\n\x1b[33mImage paste requires HTTPS. Use Attach Image instead.\x1b[0m\r\n');
+                                activeTerminal.write('\r\n\x1b[33mImage paste requires HTTPS. Use Attach File instead.\x1b[0m\r\n');
                             }
                         }
                     } catch (err) {
@@ -3428,8 +3456,15 @@ class ClaudeCodeWebInterface {
                     break;
                 }
                 case 'attachImage': {
-                    const attachSocket = activeSocket;
-                    if (window.imageHandler) {
+                    // Generalized to any file type (action id is historical).
+                    if (window.genericDropHandler
+                            && typeof window.genericDropHandler.triggerFilePicker === 'function') {
+                        window.genericDropHandler.triggerFilePicker(
+                            (files) => this._attachFiles(files),
+                            { multiple: true }
+                        );
+                    } else if (window.imageHandler) {
+                        const attachSocket = activeSocket;
                         window.imageHandler.triggerFilePicker((imageData) => {
                             this._pendingImageCaption = imageData.caption;
                             const msg = JSON.stringify({
@@ -3660,6 +3695,140 @@ class ClaudeCodeWebInterface {
             || navigator.standalone === true;
     }
 
+    // Shared attachment router for the non-drop surfaces (attach button,
+    // context-menu, paste). Partitions the selected files: anything that passes
+    // the image allowlist goes through the EXISTING image preview → image_upload
+    // path (unchanged), everything else is routed to the generic drop pipeline
+    // (upload to .claude-attachments/ + `@<path>` injection). Drag-and-drop does
+    // NOT use this — it already partitions internally in generic-drop-handler.
+    _attachFiles(files) {
+        if (!files) return;
+        const list = Array.prototype.slice.call(files);
+        if (!list.length) return;
+        const ih = window.imageHandler;
+        const isImg = (f) => !!(ih && typeof ih.isAcceptedImageType === 'function'
+            && ih.isAcceptedImageType(f.type));
+        const images = list.filter(isImg);
+        const others = list.filter((f) => !isImg(f));
+
+        // 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.
+        if (images.length && ih && typeof ih.showImagePreview === 'function') {
+            if (images.length > 1 && window.feedback && typeof window.feedback.info === 'function') {
+                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 || ''
+                    }));
+                }
+            });
+        }
+
+        // Non-images: shared generic pipeline (upload + @path inject).
+        if (others.length && this._genericDropHandler
+                && typeof this._genericDropHandler.dispatchFiles === 'function') {
+            this._genericDropHandler.dispatchFiles(others);
+        } else if (others.length && window.feedback && typeof window.feedback.error === 'function') {
+            window.feedback.error('File upload is not available right now.');
+        }
+    }
+
+    _setupPwaStandaloneListener() {
+        const apply = () => {
+            const standalone = this._isInstalledPWA();
+            document.documentElement.classList.toggle('pwa-standalone', standalone);
+            if (standalone) this._polyfillSafeAreaInsets();
+        };
+        apply();
+        try {
+            const queries = [
+                '(display-mode: standalone)',
+                '(display-mode: fullscreen)',
+                '(display-mode: minimal-ui)',
+                '(display-mode: window-controls-overlay)',
+            ];
+            queries.forEach((q) => {
+                const mql = window.matchMedia(q);
+                if (mql.addEventListener) mql.addEventListener('change', apply);
+                else if (mql.addListener) mql.addListener(apply);
+            });
+        } catch (_) { /* ignore */ }
+    }
+
+    _polyfillSafeAreaInsets() {
+        // WebKit bug: env(safe-area-inset-top|bottom) sometimes returns 0px in
+        // iOS PWA standalone on Dynamic Island / notched devices. Probe the
+        // actual env() value per axis; if zero on a notch-class iOS device in
+        // portrait, substitute the known defaults (59px island, 34px home
+        // indicator). Results are exposed as the --safe-area-inset-* variables
+        // that tokens.css (--sa-top/--sa-bottom) and the gated rules consume.
+        if (!document.body) return;
+
+        const root = document.documentElement;
+
+        // Only ever set fake insets in installed-PWA standalone mode. In a
+        // normal browser tab env() is authoritative (and legitimately 0 at the
+        // top), so forcing a fallback there would push content down for no
+        // reason — and the converted `var(--sa-*)` consumers are ungated, so a
+        // stray value WOULD change non-PWA layout. Clear and bail when not PWA.
+        if (!this._isInstalledPWA()) {
+            root.style.removeProperty('--safe-area-inset-top');
+            root.style.removeProperty('--safe-area-inset-bottom');
+            return;
+        }
+
+        const measure = (axis) => {
+            const probe = document.createElement('div');
+            probe.style.cssText = 'position:fixed;left:0;width:1px;pointer-events:none;visibility:hidden;'
+                + (axis === 'top' ? 'top:0;' : 'bottom:0;')
+                + 'height:env(safe-area-inset-' + axis + ');';
+            document.body.appendChild(probe);
+            const px = probe.offsetHeight;
+            document.body.removeChild(probe);
+            return px;
+        };
+
+        const isPortrait = window.matchMedia('(orientation: portrait)').matches;
+        // Notch / Dynamic-Island iPhones are tall (aspect > 2); home-button
+        // iPhones (SE, 8) are ~1.78 and iPads ~1.33. Only those tall devices
+        // have a top cutout + bottom home indicator, so only they get the
+        // fallback when env() reports a (buggy) 0. This keeps the SE/iPad from
+        // gaining a phantom inset.
+        const longSide = Math.max(window.innerWidth, window.innerHeight);
+        const shortSide = Math.min(window.innerWidth, window.innerHeight);
+        const tall = shortSide > 0 && (longSide / shortSide) > 2;
+        const notchClass = isPortrait && this._isIOS() && tall;
+
+        const apply = (axis, fallback) => {
+            const measured = measure(axis);
+            const prop = '--safe-area-inset-' + axis;
+            if (measured > 0) {
+                root.style.setProperty(prop, measured + 'px');
+            } else if (notchClass) {
+                root.style.setProperty(prop, fallback);
+            } else {
+                root.style.removeProperty(prop);
+            }
+        };
+
+        apply('top', '59px');
+        apply('bottom', '34px');
+    }
+
     _isIOS() {
         return /iPad|iPhone|iPod/.test(navigator.userAgent)
             || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
@@ -3979,6 +4148,10 @@ class ClaudeCodeWebInterface {
                 // opens picks up the new cwd (per ADR-0016 / task #14).
                 initialPath: this.getCurrentWorkingDir(),
                 getCwd: () => this.getCurrentWorkingDir(),
+                // Active session id → sent as ?session on /api/files so the
+                // server can resolve the per-tab default root even when the
+                // client cwd cache is cold (e.g. just after a page reload).
+                getSessionId: () => this.currentClaudeSessionId,
             });
         }
         return this._fileBrowserPanel;

package/src/public/components/bottom-nav.css

@@ -8,7 +8,7 @@
     background: var(--surface-secondary);
     border-top: 1px solid var(--border-default);
     padding: 0 8px;
-    padding-bottom: env(safe-area-inset-bottom, 0);
+    padding-bottom: var(--sa-bottom);
     z-index: var(--z-sticky);
     align-items: center;
     justify-content: space-around;

package/src/public/components/buttons.css

@@ -145,7 +145,9 @@
     position: fixed;
     bottom: 80px;
     right: 20px;
-    z-index: var(--z-modal);
+    /* Below the modal layer (--z-modal=400) so this floating control does not
+       paint over open dialogs; still above terminal content. */
+    z-index: var(--z-sticky);
     display: none;
     flex-direction: column;
     gap: 10px;
@@ -264,7 +266,7 @@
 
 @media (max-width: 820px) {
     .install-btn {
-        bottom: calc(52px + 20px + env(safe-area-inset-bottom, 0px));
+        bottom: calc(52px + 20px + var(--sa-bottom));
     }
 }
 

package/src/public/components/menus.css

@@ -75,7 +75,7 @@
         right: 0;
         top: auto;
         border-radius: 12px 12px 0 0;
-        padding-bottom: env(safe-area-inset-bottom, 0);
+        padding-bottom: var(--sa-bottom);
         min-width: 100%;
         max-width: 100%;
         z-index: var(--z-modal);

package/src/public/components/safe-area.css

@@ -0,0 +1,68 @@
+/* safe-area.css — PWA standalone safe-area insets for fixed/absolute overlays.
+
+   The Dynamic Island fix in mobile.css covers the in-flow surfaces (tab bar,
+   file-browser header, mobile menu). Out-of-flow overlays (modals, toasts,
+   banners, bottom bars) are anchored to physical screen edges and inherit none
+   of that compensation, so they collide with the iOS Dynamic Island (top) and
+   home indicator (bottom) when launched as an installed PWA. This file applies
+   the insets to those surfaces, in ONE place.
+
+   Everything is gated behind `html.pwa-standalone` (set by the early-paint
+   script + matchMedia listener in app.js) so normal browser-tab and
+   desktop-non-PWA layouts are completely unaffected. Tokens --sa-top/--sa-bottom
+   come from tokens.css and are populated by app.js's _polyfillSafeAreaInsets()
+   (which works around the WebKit env()===0 bug), falling back to env() then 0.
+
+   Loaded LAST so these rules win regardless of source order. */
+
+/* --- Full-screen modal overlays ---------------------------------------------
+   Pad the overlay itself so the flex-centered .modal-content is inset out of
+   both the island and the home indicator. box-sizing keeps the overlay
+   full-viewport while the padding shrinks the centering box. */
+html.pwa-standalone .settings-modal,
+html.pwa-standalone .session-modal,
+html.pwa-standalone .plan-modal,
+html.pwa-standalone .folder-browser-modal,
+html.pwa-standalone .shortcuts-modal,
+html.pwa-standalone .image-preview-modal,
+html.pwa-standalone .terminal-overlay {
+    box-sizing: border-box;
+    padding-top: var(--sa-top);
+    padding-bottom: var(--sa-bottom);
+}
+
+/* Clamp modal content to the padded area so a tall modal (e.g. Settings)
+   can't overflow back up into the island. dvh tracks the live viewport. */
+html.pwa-standalone .modal-content {
+    max-height: calc(100dvh - var(--sa-top) - var(--sa-bottom) - 40px);
+}
+
+/* Full-height slide-in side panel (file browser). Its header already gets the
+   top inset via mobile.css; pad the bottom so the file list clears the home
+   indicator. box-sizing keeps the panel viewport-height. */
+html.pwa-standalone .file-browser-panel {
+    box-sizing: border-box;
+    padding-bottom: var(--sa-bottom);
+}
+
+/* --- Top-anchored transient surfaces ---------------------------------------- */
+html.pwa-standalone .toast-container {
+    top: calc(52px + var(--sa-top));
+}
+html.pwa-standalone .banner-base {
+    padding-top: calc(8px + var(--sa-top));
+}
+html.pwa-standalone .notif-permission-prompt {
+    top: calc(60px + var(--sa-top));
+}
+html.pwa-standalone .fb-find-panel {
+    top: calc(80px + var(--sa-top));
+}
+
+/* --- Bottom-anchored bars: lift above the home indicator -------------------- */
+html.pwa-standalone .extra-keys-bar {
+    bottom: var(--sa-bottom);
+}
+html.pwa-standalone .input-overlay {
+    bottom: calc(16px + var(--sa-bottom));
+}

package/src/public/extra-keys.js

@@ -28,11 +28,11 @@ class ExtraKeys {
       { label: 'End', data: '\x1b[F' },
       { label: 'PgUp', data: '\x1b[5~' },
       { label: 'PgDn', data: '\x1b[6~' },
-      { label: '\u2190', data: '\x1b[D', aria: 'Left arrow' },
-      { label: '\u2192', data: '\x1b[C', aria: 'Right arrow' },
-      { label: '\u2191', data: '\x1b[A', aria: 'Up arrow' },
-      { label: '\u2193', data: '\x1b[B', aria: 'Down arrow' },
-      { label: '\u21E9', dismiss: true, aria: 'Dismiss keyboard' },
+      { label: '\u2190', data: '\x1b[D', aria: 'Left arrow', title: 'Left arrow' },
+      { label: '\u2192', data: '\x1b[C', aria: 'Right arrow', title: 'Right arrow' },
+      { label: '\u2191', data: '\x1b[A', aria: 'Up arrow', title: 'Up arrow' },
+      { label: '\u2193', data: '\x1b[B', aria: 'Down arrow', title: 'Down arrow' },
+      { label: '\u21E9', dismiss: true, aria: 'Dismiss keyboard', title: 'Dismiss keyboard' },
     ];
 
     const row2Keys = [
@@ -86,13 +86,13 @@ class ExtraKeys {
       btn.className = 'extra-key';
       btn.textContent = key.label;
       btn.setAttribute('aria-label', key.aria || key.label);
+      if (key.title) btn.setAttribute('title', key.title);
 
       if (key.dismiss) {
         btn.classList.add('extra-key-dismiss');
         btn.addEventListener('click', () => this._dismiss());
       } else if (key.handler) {
         btn.classList.add('extra-key-clipboard');
-        if (key.title) btn.setAttribute('title', key.title);
         btn.addEventListener('click', () => {
           if (key.handler === 'copy') {
             this._handleCopy();

package/src/public/file-browser.js

@@ -338,6 +338,17 @@
     // callback is also tolerated (defensive coding per agent-instructions/05).
     this.getCwd = typeof options.getCwd === 'function' ? options.getCwd : null;
 
+    // Optional callback returning the active session's id. Sent as the
+    // `session` query param on /api/files so the SERVER can resolve the
+    // default root (session.liveCwd || session.workingDir) even when the
+    // client's cwd cache is cold (e.g. right after a page reload). Tolerant
+    // of falsy/throwing callbacks like getCwd.
+    this.getSessionId = typeof options.getSessionId === 'function' ? options.getSessionId : null;
+    // Server-reported "home" for the active session (its working dir). Set
+    // from each /api/files response; navigateHome() roots here so "Home"
+    // means the tab's session dir, not the server's global baseFolder.
+    this._homePath = null;
+
     this._open = false;
     this._currentPath = null;
     this._basePath = null;
@@ -858,9 +869,23 @@
     var self = this;
     var params = new URLSearchParams();
     if (dirPath) params.append('path', dirPath);
+    // Always forward the active session id (when known). The server uses it
+    // ONLY to pick the default root when no `path` is given, and to report
+    // `home`; it is ignored when `path` is present, so explicit navigation
+    // (breadcrumbs / up / folder clicks) is unaffected.
+    var sid = null;
+    if (this.getSessionId) { try { sid = this.getSessionId(); } catch (_) { sid = null; } }
+    if (sid) params.append('session', sid);
+    this._lastRenderedSession = sid;
     params.append('limit', '500');
     params.append('offset', '0');
 
+    // Monotonic request token: tab switches / rapid folder clicks can leave
+    // several /api/files fetches in flight at once. Only the LATEST request is
+    // allowed to commit its response, so a slow earlier fetch can't overwrite
+    // the UI (or _homePath / the watcher root) with stale data.
+    var reqId = (this._navSeq = (this._navSeq || 0) + 1);
+
     this._statusBar.textContent = 'Loading...';
 
     this.authFetch('/api/files?' + params.toString())
@@ -869,14 +894,28 @@
         return resp.json();
       })
       .then(function (data) {
+        if (reqId !== self._navSeq) return; // superseded by a newer navigateTo
         self._currentPath = data.currentPath;
         self._basePath = data.baseFolder;
+        // `home` is the session's working dir (server-resolved); navigateHome
+        // roots here. Falls back to baseFolder for sessionless/legacy responses.
+        self._homePath = data.home || data.baseFolder;
         self._items = data.items;
         self._renderBreadcrumbs();
         self._renderItems();
         self._showBrowseView();
         self._statusBar.textContent = data.totalCount + ' item' + (data.totalCount !== 1 ? 's' : '');
 
+        // fs-watcher: (re)connect to the dir the server actually resolved.
+        // open() only connects when it knows the path client-side; on a cold
+        // cache it passes null and the server resolves the session root here,
+        // so connect against data.currentPath to cover that case (and re-root
+        // when a tab switch re-navigates). connect() is idempotent per path.
+        var w = self._ensureFileWatcher();
+        if (w && typeof w.connect === 'function' && data.currentPath) {
+          try { w.connect(data.currentPath); } catch (_) { /* swallow */ }
+        }
+
         // fs-watcher (#41 / ADR-0017 — wire model post-ff79038): one
         // EventSource per session at panel mount, refcount-based per-path
         // subscriptions multiplexed over it. Listing direct-child paths
@@ -900,6 +939,7 @@
         }
       })
       .catch(function (err) {
+        if (reqId !== self._navSeq) return; // superseded; don't clobber newer status
         self._statusBar.textContent = 'Error: ' + err.message;
       });
   };
@@ -916,7 +956,9 @@
 
   FileBrowserPanel.prototype.navigateHome = function () {
     this._markManualNav();
-    this.navigateTo(this._basePath);
+    // "Home" is the active session's working dir (server-reported `home`),
+    // falling back to the sandbox base if we haven't loaded a listing yet.
+    this.navigateTo(this._homePath || this._basePath);
   };
 
   // ---------------------------------------------------------------------------
@@ -945,6 +987,22 @@
     return this._activeSessionId() === sessionId;
   };
 
+  /**
+   * Entry point for app.js when the active tab/session changes. The panel is
+   * a singleton shared across tabs, so a tab switch must re-root it to the
+   * new session's working dir — open() short-circuits when already open and
+   * would otherwise keep showing the previous tab's directory. Re-navigates
+   * with NO explicit path so the server resolves the new session's root from
+   * the `?session` param (getSessionId() now returns the new id). No-op when
+   * the panel is closed or the session is unchanged. _markManualNav() is NOT
+   * called: a tab switch should re-root and resume following the new tab.
+   */
+  FileBrowserPanel.prototype.notifyActiveSessionChanged = function (sessionId) {
+    if (!this._open) return;
+    if (!sessionId || sessionId === this._lastRenderedSession) return;
+    this.navigateTo(null);
+  };
+
   /**
    * Returns true when the panel is currently configured to follow the
    * given session's OSC-7 CWD. Defaults to true on first lookup, and

package/src/public/generic-drop-handler.js

@@ -365,15 +365,50 @@
     return {
       cancelInFlight: cancelInFlight,
       destroy: destroy,
+      // Public entry point so non-drop surfaces (attach button, paste) can
+      // route a FileList/array of File objects through the EXACT same pipeline:
+      // image/* → onImageDrop, everything else → upload + @path inject, with the
+      // same MAX_FILES_PER_DROP cap and bounded-parallel queue.
+      dispatchFiles: dispatchDrop,
     };
   }
 
+  // ---------------------------------------------------------------------------
+  // triggerFilePicker — open a hidden <input type="file"> with NO accept filter
+  // (any file type), used by the attach button / context menu. Mirrors
+  // image-handler.js's picker minus the image-only constraint. Resolves the
+  // selected files via the onFiles callback. Browser-only.
+  // ---------------------------------------------------------------------------
+  function triggerFilePicker(onFiles, opts) {
+    if (typeof document === 'undefined') return;
+    opts = opts || {};
+    var input = document.createElement('input');
+    input.type = 'file';
+    if (opts.multiple) input.multiple = true;
+    input.style.display = 'none';
+
+    function cleanup() {
+      if (input.parentNode) input.parentNode.removeChild(input);
+    }
+    input.addEventListener('change', function () {
+      var files = input.files ? Array.prototype.slice.call(input.files) : [];
+      if (files.length && typeof onFiles === 'function') onFiles(files);
+      cleanup();
+    });
+    // Safety net: if the dialog is cancelled, no change fires — sweep the
+    // detached node shortly after to avoid leaking it.
+    document.body.appendChild(input);
+    input.click();
+    setTimeout(cleanup, 60000);
+  }
+
   // ---------------------------------------------------------------------------
   // Exports
   // ---------------------------------------------------------------------------
 
   var exportsObj = {
     attachGenericDropHandler: attachGenericDropHandler,
+    triggerFilePicker: triggerFilePicker,
     isImageMime: isImageMime,
     sanitizeBasename: sanitizeBasename,
     buildAtPathInjection: buildAtPathInjection,

package/src/public/image-handler.js

@@ -115,6 +115,45 @@ function detectImageInClipboard(clipboardData) {
   return null;
 }
 
+/**
+ * Collect NON-image File objects from a paste clipboard (files copied from a
+ * file manager surface as clipboardData.files / items with kind === 'file').
+ * Accepted image types are excluded — those go through the image preview flow.
+ * Used by onPaste's fall-through so non-image paste reaches the generic upload
+ * pipeline. Returns [] when there are no such files (normal text paste).
+ *
+ * @param {DataTransfer} clipboardData
+ * @returns {File[]}
+ */
+function collectNonImageFiles(clipboardData) {
+  var out = [];
+  if (!clipboardData) return out;
+
+  if (clipboardData.files && clipboardData.files.length > 0) {
+    for (var i = 0; i < clipboardData.files.length; i++) {
+      var f = clipboardData.files[i];
+      if (f && !isAcceptedImageType(f.type)) out.push(f);
+    }
+    // `files` is the authoritative FileList when present; `items` mirrors the
+    // same files (plus non-file entries), so scanning both would double-count.
+    // Fall back to `items` ONLY when `files` yielded nothing — same precedence
+    // as detectImageInClipboard above.
+    if (out.length) return out;
+  }
+
+  if (clipboardData.items && clipboardData.items.length > 0) {
+    for (var j = 0; j < clipboardData.items.length; j++) {
+      var item = clipboardData.items[j];
+      if (item.kind === 'file' && !isAcceptedImageType(item.type)) {
+        var asFile = item.getAsFile();
+        if (asFile) out.push(asFile);
+      }
+    }
+  }
+
+  return out;
+}
+
 // ---------------------------------------------------------------------------
 // Blob → base64
 // ---------------------------------------------------------------------------
@@ -504,6 +543,20 @@ function attachImageHandler(terminal, containerEl, options) {
           e.preventDefault();
           e.stopPropagation();
           showImagePreview(image, options.onImageReady);
+          return;
+        }
+        // No image — if non-image files were pasted (e.g. copied from a file
+        // manager) and a handler is wired, route them to the generic pipeline.
+        // Purely additive: when there are no such files this is a no-op and the
+        // normal text paste proceeds untouched.
+        if (typeof options.onFilesPaste === 'function') {
+          var nonImageFiles = collectNonImageFiles(e.clipboardData);
+          if (nonImageFiles.length) {
+            e.preventDefault();
+            e.stopPropagation();
+            options.onFilesPaste(nonImageFiles);
+            return;
+          }
         }
         // No image found — let the normal text paste proceed
       }
@@ -636,6 +689,7 @@ var imageHandlerExports = {
   mimeToExtension: mimeToExtension,
   formatFileSize: formatFileSize,
   detectImageInClipboard: detectImageInClipboard,
+  collectNonImageFiles: collectNonImageFiles,
   blobToBase64: blobToBase64,
   showImagePreview: showImagePreview,
   triggerFilePicker: triggerFilePicker,

package/src/public/index.html

@@ -42,6 +42,24 @@
         } catch (_) { /* ignore */ }
       })();
     </script>
+
+    <!-- Detect PWA standalone mode before first paint so safe-area-top rules can apply
+         without a layout-shift flash. Class lives on <html> because <body> isn't parsed yet. -->
+    <script>
+      (function() {
+        try {
+          var mm = window.matchMedia;
+          var isStandalone = (mm && (
+              mm('(display-mode: standalone)').matches
+              || mm('(display-mode: fullscreen)').matches
+              || mm('(display-mode: minimal-ui)').matches
+              || mm('(display-mode: window-controls-overlay)').matches
+            ))
+            || navigator.standalone === true;
+          if (isStandalone) document.documentElement.classList.add('pwa-standalone');
+        } catch (_) { /* ignore */ }
+      })();
+    </script>
     <link rel="preload" href="fonts/MesloLGSNerdFont-Regular.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="fonts/MesloLGSNerdFont-Bold.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="fonts.css">
@@ -68,6 +86,8 @@
     <link rel="stylesheet" href="components/extra-keys.css">
     <link rel="stylesheet" href="mobile.css">
     <link rel="stylesheet" href="style.css">
+    <!-- Loaded last: PWA standalone safe-area overrides win over component CSS. -->
+    <link rel="stylesheet" href="components/safe-area.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
@@ -143,7 +163,7 @@
                             <line x1="9" y1="14" x2="15" y2="14"/>
                         </svg>
                     </button>
-                    <button class="tab-attach-image" id="attachImageBtn" title="Attach Image" aria-label="Attach image">
+                    <button class="tab-attach-image" id="attachImageBtn" title="Attach File" aria-label="Attach file">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                              stroke="currentColor" stroke-width="2">
                             <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
@@ -292,7 +312,7 @@
                 <div class="ctx-sep" role="separator"></div>
                 <div class="ctx-item" data-action="attachImage" role="menuitem" tabindex="-1">
                     <span class="ctx-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></span>
-                    <span>Attach Image...</span>
+                    <span>Attach File...</span>
                 </div>
                 <div class="ctx-sep" role="separator"></div>
                 <div class="ctx-item" data-action="selectAll" role="menuitem" tabindex="-1">

package/src/public/mobile.css

@@ -2,17 +2,39 @@
    Component-level responsive styles belong in their respective component CSS files.
    This file contains ONLY cross-cutting mobile concerns that span multiple components. */
 
-/* Safe area insets for notched devices (iPhone X+, etc.) */
+/* Safe area insets for notched devices (iPhone X+, etc.)
+   Top-axis padding is gated to PWA standalone mode (html.pwa-standalone) because
+   apple-mobile-web-app-status-bar-style="black-translucent" only causes the
+   Dynamic Island / status-bar collision when launched from the home screen.
+   In normal mobile-Safari/Edge tab mode the browser chrome already occupies that
+   space, so adding padding-top there would visibly push content down for no gain.
+   The CSS variable --safe-area-inset-top is populated by a JS polyfill in app.js
+   to work around the known WebKit bug where env(safe-area-inset-top) sometimes
+   returns 0px in iOS PWA standalone; env() is kept as the secondary fallback. */
 @supports (padding: env(safe-area-inset-top)) {
     .session-tabs-bar {
         padding-left: max(10px, env(safe-area-inset-left));
         padding-right: max(10px, env(safe-area-inset-right));
     }
+    html.pwa-standalone .session-tabs-bar {
+        padding-top: var(--safe-area-inset-top, env(safe-area-inset-top));
+    }
+    html.pwa-standalone .file-browser-panel .file-browser-header {
+        padding-top: var(--safe-area-inset-top, env(safe-area-inset-top));
+    }
+    /* Baseline (any env()-capable browser) preserves the long-standing menu
+       inset; in tab mode env(safe-area-inset-top) is 0 so this is a no-op,
+       but it guards against any non-PWA notched case the standalone rule
+       below wouldn't cover. The standalone rule wins by specificity and
+       routes through the JS-populated --safe-area-inset-top variable. */
     .mobile-menu {
         padding-top: env(safe-area-inset-top);
     }
+    html.pwa-standalone .mobile-menu {
+        padding-top: var(--safe-area-inset-top, env(safe-area-inset-top));
+    }
     .mode-switcher {
-        bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
+        bottom: max(80px, calc(80px + var(--sa-bottom)));
         right: max(20px, env(safe-area-inset-right));
     }
 }
@@ -183,12 +205,12 @@
 
     /* Account for bottom nav height */
     #app {
-        padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
+        padding-bottom: calc(52px + var(--sa-bottom));
     }
 
     /* Move mode switcher above bottom nav */
     .mode-switcher {
-        bottom: calc(62px + env(safe-area-inset-bottom, 0px));
+        bottom: calc(62px + var(--sa-bottom));
     }
 }
 

package/src/public/tokens.css

@@ -127,6 +127,17 @@
   --z-input-overlay: 550;
   --z-auth: 9999;
   --z-max: 9999;
+
+  /* --- Safe-area insets (PWA standalone / notched devices) ---
+     Consumed by fixed/absolute overlays so they clear the iOS Dynamic Island
+     (top) and home indicator (bottom). The JS polyfill in app.js sets
+     --safe-area-inset-top/-bottom as VARIABLES to work around the WebKit bug
+     where env(safe-area-inset-*) returns 0px in iOS standalone; we fall back to
+     env() then 0. In normal (non-standalone) mode these resolve to 0, and the
+     consuming rules are gated behind html.pwa-standalone anyway, so there is no
+     effect on browser-tab or desktop-non-PWA layouts. */
+  --sa-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
+  --sa-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
 }
 
 /* ============================================================

package/src/server.js

@@ -870,7 +870,21 @@ class ClaudeCodeWebServer {
 
   setupExpress() {
     this.app.use(cors());
-    this.app.use(express.json());
+    // Global JSON parser for normal endpoints (Express default ~100kb limit).
+    // The upload route mounts its own higher-limit parser (see
+    // POST /api/files/upload below); exempt it here so a base64 file body
+    // isn't rejected by the ~100kb default before the route runs. The
+    // trailing-slash normalization matches exactly the set of paths Express
+    // routes to that handler (`/api/files/upload` and `/api/files/upload/`).
+    const _globalJsonParser = express.json();
+    this.app.use((req, res, next) => {
+      // Case-insensitive + trailing-slash-normalized to match Express's
+      // default route matching (case-insensitive routing), so every form that
+      // reaches the upload handler is exempt from the ~100kb global parser.
+      const p = req.path.replace(/\/+$/, '').toLowerCase() || '/';
+      if (p === '/api/files/upload') return next();
+      return _globalJsonParser(req, res, next);
+    });
     
     // Serve manifest.json with correct MIME type
     this.app.get('/manifest.json', (req, res) => {
@@ -1403,7 +1417,30 @@ class ClaudeCodeWebServer {
 
     // GET /api/files — List directory (files + folders), paginated
     this.app.get('/api/files', (req, res) => {
-      const requestedPath = req.query.path || this.baseFolder;
+      // Per-tab file-browser root. Resolve the requesting session's home dir
+      // (live OSC 7 cwd if tracked, else the spawn dir) when a `session` id is
+      // supplied and its dir still validates. Used as (a) the default root
+      // when the client sends no explicit `path`, and (b) the `home` value the
+      // client points "Home" at — so Home stays the tab's dir even while
+      // browsing subdirs. Mirrors GET /api/files/find. Falls back to baseFolder
+      // for unknown/stale sessions so the browser never 403s on open.
+      let sessionHome = null;
+      const sid = typeof req.query.session === 'string' ? req.query.session : '';
+      if (sid) {
+        const session = this.claudeSessions.get(sid);
+        if (session) {
+          const candidate = session.liveCwd || session.workingDir;
+          if (candidate && this.validatePath(candidate).valid) {
+            sessionHome = candidate;
+          } else {
+            // Known session but its dir is missing or no longer inside the
+            // sandbox — a real misconfiguration worth logging. (Unknown session
+            // ids fall through silently: expected during cold-cache races.)
+            console.warn(`/api/files: session ${sid} working dir unavailable; using baseFolder`);
+          }
+        }
+      }
+      const requestedPath = req.query.path || sessionHome || this.baseFolder;
       const validation = this.validatePath(requestedPath);
       if (!validation.valid) {
         return res.status(403).json({ error: validation.error });
@@ -1480,7 +1517,7 @@ class ClaudeCodeWebServer {
             totalCount,
             offset,
             limit,
-            home: normalizePath(this.baseFolder),
+            home: normalizePath(sessionHome || this.baseFolder),
             baseFolder: normalizePath(this.baseFolder),
           });
         } catch (error) {
@@ -2739,7 +2776,12 @@ class ClaudeCodeWebServer {
     //     per spec ("user shell config is sacrosanct" applies to .gitignore
     //     too — we don't want to silently introduce a new tracked-by-default
     //     side effect on the user's repo).
-    this.app.post('/api/files/upload', express.json({ limit: '10mb' }), async (req, res) => {
+    // Route parser limit is sized for base64 of the 10 MB decoded cap
+    // (~14 MB) plus the small JSON envelope. The decoded-size guard below
+    // (buffer.length > 10 MB) remains the real per-file cap. This parser is
+    // the ONLY one that runs for this route — the global parser above skips
+    // `/api/files/upload`, so this limit governs (not the ~100kb default).
+    this.app.post('/api/files/upload', express.json({ limit: '20mb' }), async (req, res) => {
       const { targetDir, fileName, content, overwrite } = req.body;
       if (!targetDir || !fileName || !content) {
         return res.status(400).json({ error: 'targetDir, fileName, and content are required' });
@@ -2932,6 +2974,24 @@ class ClaudeCodeWebServer {
         res.sendFile(path.join(__dirname, 'public', 'index.html'));
       }
     });
+
+    // Body-parser error handler (4-arg, must be registered AFTER routes).
+    // express.json() rejects oversized/malformed bodies via next(err) BEFORE
+    // the route runs; without this, Express's default handler returns HTML,
+    // which the JSON API clients can't parse. We key on err.type — the marker
+    // body-parser stamps on its own errors — so unrelated next(err) calls are
+    // left to the default handler.
+    this.app.use((err, req, res, next) => {
+      if (res.headersSent || !err || !err.type) return next(err);
+      if (err.type === 'entity.too.large') {
+        return res.status(413).json({ error: 'Request body too large' });
+      }
+      if (err.type === 'entity.parse.failed' || err.type === 'encoding.unsupported'
+          || err.type === 'charset.unsupported' || err.type === 'entity.verify.failed') {
+        return res.status(err.status || err.statusCode || 400).json({ error: 'Invalid request body' });
+      }
+      return next(err);
+    });
   }
 
   /**

package/src/utils/file-utils.js

@@ -132,19 +132,33 @@ function sanitizeFileName(name) {
     throw new Error('File name is required');
   }
 
-  // Strip path separators, null bytes, and control characters
+  // Strip path separators, null bytes, and control characters. Windows-first
+  // (primary deployment target): also strip the characters NTFS forbids in a
+  // file name — `< > : " | ? *`. Stripping ':' additionally neutralizes NTFS
+  // Alternate Data Streams (`name:stream`) and any stray drive-letter colon.
   let sanitized = name
     .replace(/[/\\]/g, '')
+    .replace(/[<>:"|?*]/g, '')
     .replace(/\0/g, '')
     .replace(/[\x01-\x1f\x7f]/g, '');
 
-  // Trim whitespace and dots from start/end
+  // Trim whitespace and dots from start/end (also covers Windows' rule that a
+  // file name may not end in a dot or space).
   sanitized = sanitized.replace(/^[\s.]+|[\s.]+$/g, '');
 
   if (!sanitized) {
     throw new Error('File name is empty after sanitization');
   }
 
+  // Windows reserved device names (CON, PRN, AUX, NUL, COM1-9, LPT1-9) are
+  // illegal as a file's base name regardless of extension — `COM1.tar.gz` is
+  // still the COM1 device. Windows matches on the stem before the first dot,
+  // case-insensitively. Prefix with '_' to neutralize while staying readable.
+  const stem = sanitized.split('.')[0];
+  if (/^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i.test(stem)) {
+    sanitized = '_' + sanitized;
+  }
+
   if (sanitized.length > 255) {
     const ext = path.extname(sanitized);
     sanitized = sanitized.slice(0, 255 - ext.length) + ext;