ai-or-die 0.1.67 → 0.1.69

package/README.md

@@ -112,9 +112,12 @@ Download from [Releases](https://github.com/animeshkundu/ai-or-die/releases) —
 ## Usage
 
 ```bash
-# Default — opens browser with secure token
+# Default — prints the URL (with secure token); does NOT auto-open a browser
 ai-or-die
 
+# Open the browser automatically on start
+ai-or-die --open
+
 # Custom port
 ai-or-die --port 8080
 
@@ -146,11 +149,11 @@ ai-or-die --stt
 | `--disable-auth` | Disable authentication | `false` |
 | `--tunnel` | Enable Microsoft Dev Tunnel | `false` |
 | `--tunnel-allow-anonymous` | Allow anonymous tunnel access | `false` |
-| `--https` | Enable HTTPS | `false` |
+| `--https` | Enable HTTPS (auto-generates a self-signed cert if `--cert`/`--key` not given) | `false` |
 | `--cert <path>` | SSL certificate file | |
 | `--key <path>` | SSL private key file | |
 | `--dev` | Verbose logging | `false` |
-| `--no-open` | Don't auto-open browser | `false` |
+| `--open` | Open the browser on start (never on supervised restart) | `false` |
 | `--plan <type>` | Subscription plan (`pro`, `max5`, `max20`) | `max20` |
 | `--stt` | Enable local speech-to-text | `false` |
 | `--stt-endpoint <url>` | External STT endpoint (OpenAI-compatible) | |
@@ -190,11 +193,13 @@ ai-or-die is an installable progressive web app. Open Settings → Install in th
 
 **Browser support**: Chrome / Edge / Samsung Internet support one-tap install. Firefox desktop does not have native install — use the browser menu to pin the tab. Safari iOS uses Share → Add to Home Screen.
 
-**Installing on LAN devices**: Browsers refuse to install PWAs over an HTTPS origin whose certificate isn't trusted by the device. The auto-generated cert from `--https` is self-signed, so a phone or tablet connecting to `https://<your-mac-ip>:7777` will see the in-app Install panel say *"Not available in this browser."* even though the browser supports install. Three ways around this:
+**Installing on LAN devices**: Browsers refuse to install PWAs over an HTTPS origin whose certificate isn't trusted by the device, and public CAs (Let's Encrypt etc.) won't issue certs for a LAN IP or `localhost`. The `--https` self-signed cert therefore triggers a browser warning, and the in-app Install panel will say *"Not available in this browser."* on a LAN IP. Ways to get an installable origin:
+
+1. **On the host machine itself** — just open **`http://localhost:<port>`**. `localhost` is a secure context, so the PWA installs with **no cert and no setup** (no `--https` needed).
+2. **On other devices** — use **`--tunnel`** *(recommended)*: Microsoft Dev Tunnels gives a public URL with a real publicly-trusted cert, so any device installs the PWA with **no per-device setup and no admin**.
+3. **Bring your own trusted cert** via `--cert` / `--key` (e.g. a cert for a hostname your devices already trust).
 
-1. **Use `--tunnel`** *(easiest)* — Microsoft Dev Tunnels gives you a public URL with a real Let's Encrypt cert. Devices install via the public URL with no setup.
-2. **Trust the self-signed cert** on each device — copy `~/.ai-or-die/certs/server.cert` to the device and install it as a trusted root in the OS certificate store.
-3. **Provide a CA-signed cert** via `--cert` / `--key`. [mkcert](https://github.com/FiloSottile/mkcert) is a low-friction option for development.
+See [docs/history/pwa-install-lan-self-signed-cert.md](docs/history/pwa-install-lan-self-signed-cert.md) for the underlying browser-policy reasoning.
 
 See [docs/history/pwa-install-lan-self-signed-cert.md](docs/history/pwa-install-lan-self-signed-cert.md) for the device-by-device procedure and the underlying browser-policy reasoning.
 

package/bin/ai-or-die.js

@@ -20,7 +20,7 @@ program
   .description('ai-or-die — Universal AI coding terminal')
   .version(require('../package.json').version)
   .option('-p, --port <number>', 'port to run the server on', '7777')
-  .option('--no-open', 'do not automatically open browser')
+  .option('--open', 'open the browser on start (default: off; never on supervised restart)')
   .option('--auth <token>', 'authentication token for secure access')
   .option('--disable-auth', 'disable authentication (not recommended for production)')
   .option('--https', 'enable HTTPS (auto-generates self-signed cert if --cert/--key not provided)')
@@ -38,8 +38,11 @@ program
   .option('--stt', 'enable local speech-to-text (downloads ~670MB Parakeet V3 model on first use)')
   .option('--stt-endpoint <url>', 'use external STT endpoint (OpenAI-compatible)')
   .option('--stt-model-dir <path>', 'custom directory for STT model files')
-  .option('--stt-threads <number>', 'CPU threads for STT inference (default: auto, max 4)')
-  .parse();
+  .option('--stt-threads <number>', 'CPU threads for STT inference (default: auto, max 4)');
+
+// Auto-open is OFF by default and opt-in via --open. Legacy callers may still pass
+// --no-open (the old opt-out flag); filter it out so it parses harmlessly as a no-op.
+program.parse(process.argv.filter((arg) => arg !== '--no-open'));
 
 const options = program.opts();
 
@@ -131,7 +134,11 @@ async function main() {
       console.log('   For LAN access, restart with \x1b[1m--https\x1b[0m or \x1b[1m--tunnel\x1b[0m.');
     }
 
-    // Dev tunnel or browser open
+    // Dev tunnel or browser open.
+    // Auto-open only when explicitly requested (--open) AND this is the first launch,
+    // never on a supervised restart (the supervisor sets AOD_SUPERVISOR_RESTART on respawn),
+    // so crash/memory restarts don't spawn a new browser tab each time.
+    const shouldOpen = !!options.open && !process.env.AOD_SUPERVISOR_RESTART;
     let tunnel = null;
     if (options.tunnel) {
       const { TunnelManager } = require('../src/tunnel-manager');
@@ -141,12 +148,12 @@ async function main() {
         dev: options.dev,
         onUrl: (tunnelUrl) => {
           console.log(`\n  \x1b[1m\x1b[32mTunnel ready:\x1b[0m \x1b[1m\x1b[4m${tunnelUrl}\x1b[0m\n`);
-          if (open && options.open) open(tunnelUrl).catch(() => {});
+          if (open && shouldOpen) open(tunnelUrl).catch(() => {});
         }
       });
       app.setTunnelManager(tunnel);
       await tunnel.start();
-    } else if (options.open) {
+    } else if (shouldOpen) {
       try { if (open) await open(url); } catch (error) {
         console.warn('  Could not automatically open browser:', error.message);
       }

package/bin/supervisor.js

@@ -45,6 +45,7 @@ const forwardedArgs = process.argv.slice(2);
 
 let child = null;
 let shuttingDown = false;
+let spawnCount = 0;
 let crashTimestamps = [];
 let pendingRestartTimer = null;
 
@@ -110,9 +111,18 @@ function startServer() {
   pendingRestartTimer = null;
   const nodeArgs = ['--expose-gc', serverScript, ...forwardedArgs];
 
+  // Mark every spawn after the first as a supervised restart, so the child suppresses
+  // browser auto-open (--open) on crash/memory restarts and only opens on first launch.
+  const isRestart = spawnCount > 0;
+  spawnCount += 1;
+
   child = spawn(process.execPath, nodeArgs, {
     stdio: ['inherit', 'inherit', 'inherit', 'ipc'],
-    env: { ...process.env, SUPERVISED: '1' }
+    env: {
+      ...process.env,
+      SUPERVISED: '1',
+      ...(isRestart ? { AOD_SUPERVISOR_RESTART: '1' } : {})
+    }
   });
 
   // Flush a queued supervisor_warning into the new child's IPC channel.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-or-die",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "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;
@@ -3419,7 +3437,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 +3446,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 +3685,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);
@@ -3756,6 +3915,14 @@ class ClaudeCodeWebInterface {
             case 'dismissed':
                 statusText.textContent = 'Install was cancelled. Reload the page to try again.';
                 break;
+            case 'unavailable':
+                // Chromium-family browser in a secure context, but beforeinstallprompt
+                // hasn't fired yet (engagement-gated, or already consumed). The app can't
+                // trigger install itself, but the browser's own menu can — and the
+                // beforeinstallprompt listener stays active, so this upgrades to 'available'
+                // if the event fires later.
+                statusText.textContent = 'If no install button appears, use your browser menu → "Install this site as an app".';
+                break;
             default:
                 statusText.textContent = 'Not available in this browser.';
                 break;

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/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

@@ -16,7 +16,10 @@
     <meta name="format-detection" content="telephone=no">
     
     <!-- Web App Manifest -->
-    <link rel="manifest" href="/manifest.json">
+    <!-- crossorigin=use-credentials: send the session cookie with the manifest (and its icon)
+         fetches so they are not redirected to an auth page behind a credentialed proxy/tunnel
+         (e.g. Microsoft devtunnel), which otherwise 404s the manifest and breaks installability. -->
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
     
     <!-- Icons for various platforms -->
     <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
@@ -39,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">
@@ -65,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>
@@ -140,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"/>
@@ -289,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/manifest.json

@@ -37,7 +37,7 @@
     }
   ],
   "categories": ["developer", "productivity", "utilities"],
-  "lang": "en-US",
+  "lang": "en-IN",
   "dir": "ltr",
   "prefer_related_applications": false,
   "shortcuts": [

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/public/voice-handler.js

@@ -135,7 +135,7 @@ SpeechRecognitionRecorder.prototype.start = function () {
     var recognition = new SpeechRecognitionCtor();
     recognition.continuous = true;
     recognition.interimResults = false;
-    recognition.lang = 'en-US';
+    recognition.lang = 'en-IN';
 
     self._recognition = recognition;
     self._resultText = '';

package/src/server.js

@@ -913,34 +913,11 @@ class ClaudeCodeWebServer {
       fallthrough: false,
     }));
 
-    // PWA Icon routes - generate ai-or-die brain/terminal icon dynamically
-    const iconSizes = [16, 32, 144, 180, 192, 512];
-    iconSizes.forEach(size => {
-      this.app.get(`/icon-${size}.png`, (req, res) => {
-        const s = size;
-        const r = s * 0.1;
-        const svg = `
-          <svg width="${s}" height="${s}" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-            <rect width="100" height="100" fill="#1a1a1a" rx="${r > 1 ? 10 : 0}"/>
-            <path d="M50 18 C28 18 18 32 18 48 C18 58 24 66 32 70 L32 74 C32 78 36 80 40 78 L44 76"
-                  fill="none" stroke="#ff6b00" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
-            <path d="M50 18 C72 18 82 32 82 48 C82 58 76 66 68 70 L68 74 C68 78 64 80 60 78 L56 76"
-                  fill="none" stroke="#ff6b00" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
-            <circle cx="38" cy="38" r="3" fill="#ff6b00" opacity="0.5"/>
-            <circle cx="62" cy="38" r="3" fill="#ff6b00" opacity="0.5"/>
-            <circle cx="50" cy="28" r="2.5" fill="#ff6b00" opacity="0.4"/>
-            <text x="50" y="62" text-anchor="middle" dominant-baseline="middle"
-                  font-family="'JetBrains Mono',monospace" font-size="28" font-weight="700" fill="#ff6b00">
-              &gt;_
-            </text>
-          </svg>
-        `;
-        const svgBuffer = Buffer.from(svg);
-        res.setHeader('Content-Type', 'image/svg+xml');
-        res.setHeader('Cache-Control', 'public, max-age=31536000');
-        res.send(svgBuffer);
-      });
-    });
+    // PWA icons are static PNG files in src/public/ (icon-<size>.png), served by
+    // express.static above (or the SEA asset middleware). They are real PNGs so the
+    // served Content-Type matches the manifest's declared `image/png` — required for
+    // Chromium installability and iOS apple-touch-icon. Regenerate with
+    // `node scripts/generate-pwa-icons.js`.
 
     // PWA Screenshot routes - serve pre-built branded screenshots
     this.app.get('/screenshot-wide.png', (req, res) => {
@@ -3022,7 +2999,11 @@ class ClaudeCodeWebServer {
         cert = fs.readFileSync(this.certFile);
         key = fs.readFileSync(this.keyFile);
       } else {
-        // Auto-generate self-signed cert for LAN use
+        // Auto-generate self-signed cert for LAN use.
+        // Note: a self-signed cert is not a trusted "secure context", so on a LAN IP the
+        // browser warns and the PWA can't be installed. For an installable trusted origin
+        // use --tunnel (public cert, no admin) or access the app on http://localhost (a
+        // secure context with no cert needed).
         const { ensureCert } = require('./utils/self-signed-cert');
         const certInfo = ensureCert();
         cert = certInfo.cert;
@@ -3034,6 +3015,7 @@ class ClaudeCodeWebServer {
         }
         console.log(`        Cached at: ${certInfo.certPath}`);
         console.log('        Browsers will show a security warning on first visit.');
+        console.log('        For a trusted, installable origin use \x1b[1m--tunnel\x1b[0m.');
       }
       server = https.createServer({ cert, key }, this.app);
     } else {

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;