ai-or-die 0.1.68 → 0.1.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-or-die",
-  "version": "0.1.68",
+  "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);

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

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