ai-or-die 0.1.49 → 0.1.52

package/bin/ai-or-die.js

@@ -18,7 +18,7 @@ const program = new Command();
 program
   .name('ai-or-die')
   .description('ai-or-die — Universal AI coding terminal')
-  .version('0.1.0')
+  .version(require(path.join(__dirname, '..', 'package.json')).version)
   .option('-p, --port <number>', 'port to run the server on', '7777')
   .option('--no-open', 'do not automatically open browser')
   .option('--auth <token>', 'authentication token for secure access')

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "ai-or-die",
-  "version": "0.1.49",
+  "version": "0.1.52",
   "description": "Universal AI coding terminal — Claude, Copilot, Gemini & more in your browser",
   "main": "src/server.js",
   "bin": {
-    "ai-or-die": "bin/ai-or-die.js",
-    "aiordie": "bin/ai-or-die.js"
+    "ai-or-die": "./bin/ai-or-die.js",
+    "aiordie": "./bin/ai-or-die.js"
   },
   "scripts": {
     "start": "node bin/supervisor.js",

package/src/public/app.js

@@ -16,7 +16,10 @@ class ClaudeCodeWebInterface {
         this.currentFolderPath = null;
         this.claudeSessions = [];
         this.isCreatingNewSession = false;
-        this.isMobile = this.detectMobile();
+        Object.defineProperty(this, 'isMobile', {
+            get: () => this.detectMobile(),
+            configurable: true
+        });
         this.currentMode = 'chat';
         this._overlayExplicitlyHidden = false;
         this.planDetector = null;
@@ -250,10 +253,12 @@ class ClaudeCodeWebInterface {
 
         // Network change handlers
         window.addEventListener('online', () => {
+            if (window.feedback) window.feedback.success('Back online — reconnecting...');
             if (this.socket?.readyState !== WebSocket.OPEN) this.reconnect();
         });
         window.addEventListener('offline', () => {
             this.updateStatus('Offline');
+            if (window.feedback) window.feedback.warning('Connection lost — you are offline', { duration: 0 });
         });
 
         window.addEventListener('resize', () => {
@@ -344,7 +349,7 @@ class ClaudeCodeWebInterface {
 
             // Skip preventDefault for scrollable containers that handle their own scroll
             const target = e.target;
-            if (target && (target.closest('.xterm-viewport') || target.closest('.modal-body') || target.closest('.extra-keys-bar'))) {
+            if (target && (target.closest('.xterm-viewport') || target.closest('.modal-body') || target.closest('.extra-keys-bar') || target.closest('.fb-file-list') || target.closest('.fb-content') || target.closest('.fb-preview-container'))) {
                 lastY = y;
                 return;
             }
@@ -725,19 +730,13 @@ class ClaudeCodeWebInterface {
 
             if (heightDiff > threshold && !this._keyboardOpen) {
                 this._keyboardOpen = true;
+                // Apply class immediately — CSS transitions handle visual smoothing
+                document.body.classList.add('keyboard-open');
                 this._adjustTerminalForKeyboard(currentHeight);
-                // Debounce body class to prevent flicker during keyboard animation
-                clearTimeout(classDebounceTimer);
-                classDebounceTimer = setTimeout(() => {
-                    document.body.classList.add('keyboard-open');
-                }, 300);
             } else if (heightDiff <= threshold && this._keyboardOpen) {
                 this._keyboardOpen = false;
+                document.body.classList.remove('keyboard-open');
                 this._restoreTerminalFromKeyboard();
-                clearTimeout(classDebounceTimer);
-                classDebounceTimer = setTimeout(() => {
-                    document.body.classList.remove('keyboard-open');
-                }, 300);
             }
         };
 
@@ -817,8 +816,10 @@ class ClaudeCodeWebInterface {
         document.documentElement.style.setProperty('--visual-viewport-height', availableHeight + 'px');
         const termEl = document.getElementById('terminal');
         if (termEl) {
+            // Force reflow after show() so offsetHeight is accurate
             const extraKeysHeight = this.extraKeys?.container?.offsetHeight || 44;
-            termEl.style.height = (availableHeight - extraKeysHeight) + 'px';
+            void extraKeysHeight; // ensure reflow read is not optimized away
+            termEl.style.height = (availableHeight - (this.extraKeys?.container?.offsetHeight || 44)) + 'px';
             if (this.fitAddon) this.fitAddon.fit();
         }
     }
@@ -1639,12 +1640,12 @@ class ClaudeCodeWebInterface {
                 // but still use backoff to avoid thundering herd
                 if (this._serverRestarting) {
                     this.updateStatus('Restarting \u2014 reconnecting\u2026');
-                    const restartBackoff = Math.min(2000 * Math.pow(1.5, this._restartReconnectAttempts || 0), 15000);
+                    const restartBackoff = Math.min(2000 * Math.pow(1.5, this._restartReconnectAttempts || 0), 15000) * (0.7 + Math.random() * 0.6);
                     this._restartReconnectAttempts = (this._restartReconnectAttempts || 0) + 1;
                     setTimeout(() => this.reconnect(), restartBackoff);
                 } else if (!event.wasClean && this.reconnectAttempts < this.maxReconnectAttempts) {
-                    this.updateStatus('Reconnecting...');
-                    setTimeout(() => this.reconnect(), Math.min(this.reconnectDelay * Math.pow(2, this.reconnectAttempts), 30000));
+                    this.updateStatus('Reconnecting (' + (this.reconnectAttempts + 1) + '/' + this.maxReconnectAttempts + ')...');
+                    setTimeout(() => this.reconnect(), Math.min(this.reconnectDelay * Math.pow(2, this.reconnectAttempts), 30000) * (0.7 + Math.random() * 0.6));
                     this.reconnectAttempts++;
                 } else {
                     this.updateStatus('Disconnected');
@@ -1675,6 +1676,14 @@ class ClaudeCodeWebInterface {
             clearInterval(this._safariPollInterval);
             this._safariPollInterval = null;
         }
+        if (this._heartbeatTimer) {
+            clearInterval(this._heartbeatTimer);
+            this._heartbeatTimer = null;
+        }
+        if (this.usageUpdateTimer) {
+            clearInterval(this.usageUpdateTimer);
+            this.usageUpdateTimer = null;
+        }
     }
 
     reconnect() {
@@ -2831,10 +2840,7 @@ class ClaudeCodeWebInterface {
             activeSocket = resolved.socket;
 
             // Position menu: bottom sheet on mobile, cursor-anchored on desktop
-            // Use current viewport width instead of constructor-time isMobile
-            // so tablet rotation is handled correctly (820px matches CSS breakpoint)
-            const isMobileViewport = window.innerWidth <= 820;
-            if (isMobileViewport) {
+            if (this.isMobile) {
                 menu.style.left = '';
                 menu.style.top = '';
                 menu.style.display = 'block';
@@ -3322,7 +3328,8 @@ class ClaudeCodeWebInterface {
     }
 
     startHeartbeat() {
-        setInterval(() => {
+        if (this._heartbeatTimer) clearInterval(this._heartbeatTimer);
+        this._heartbeatTimer = setInterval(() => {
             if (this.socket && this.socket.readyState === WebSocket.OPEN) {
                 this.send({ type: 'ping' });
             }
@@ -4258,7 +4265,14 @@ class ClaudeCodeWebInterface {
             });
             html += '</ul>';
         }
-        return typeof DOMPurify !== 'undefined' ? DOMPurify.sanitize(html) : html;
+        if (typeof DOMPurify !== 'undefined') {
+            return DOMPurify.sanitize(html);
+        } else {
+            // Safe fallback: strip all HTML, render as plain text
+            const temp = document.createElement('div');
+            temp.textContent = html;
+            return temp.innerHTML;
+        }
     }
 
     async _loadPlanLibraries() {
@@ -4492,7 +4506,7 @@ class ClaudeCodeWebInterface {
         // Container is already visible by default
         
         // Check if mobile screen
-        const isMobile = window.innerWidth <= 820;
+        const isMobile = this.isMobile;
         const isSmallMobile = window.innerWidth <= 480;
         
         // Format tokens (K/M notation)
@@ -4632,8 +4646,8 @@ class ClaudeCodeWebInterface {
                 if (totalTokens > 0) {
                     const opusPercent = (opusTokens / totalTokens) * 100;
                     const sonnetPercent = (sonnetTokens / totalTokens) * 100;
-                    const isMobile = window.innerWidth <= 820;
-                    
+                    const isMobile = this.isMobile;
+
                     // Use short names on mobile, full names on desktop
                     const opusName = isMobile ? 'O' : 'Opus';
                     const sonnetName = isMobile ? 'S' : 'Sonnet';
@@ -4655,7 +4669,7 @@ class ClaudeCodeWebInterface {
             }
         } else {
             // No active session or expired session - show zeros
-            const isMobile = window.innerWidth <= 820;
+            const isMobile = this.isMobile;
             
             document.getElementById('usageTitle').textContent = '0h 0m';
             document.getElementById('usageTokens').textContent = isMobile ? '0%' : '0';

package/src/public/components/extra-keys.css

@@ -1,5 +1,5 @@
 .extra-keys-bar {
-    display: none;
+    display: flex;
     flex-direction: column;
     position: fixed;
     bottom: 0;
@@ -8,10 +8,18 @@
     background: var(--surface-secondary);
     border-top: 1px solid var(--border-default);
     z-index: var(--z-sticky);
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height 0.15s ease-out, opacity 0.15s ease-out;
+    pointer-events: none;
 }
 
 .extra-keys-bar.visible {
-    display: flex;
+    max-height: 120px;
+    opacity: 1;
+    overflow: visible;
+    pointer-events: auto;
 }
 
 .extra-keys-row {
@@ -23,12 +31,19 @@
     padding: 2px 8px;
     align-items: center;
     -webkit-overflow-scrolling: touch;
+    max-height: 60px;
+    opacity: 1;
+    transition: max-height 0.15s ease-out, opacity 0.15s ease-out, padding 0.15s ease-out;
 }
 
 .extra-keys-row::-webkit-scrollbar { display: none; }
 
 .extra-keys-row-hidden {
-    display: none;
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0;
+    transition: max-height 0.15s ease-out, opacity 0.15s ease-out, padding 0.15s ease-out;
 }
 
 .extra-key {
@@ -70,6 +85,20 @@
     opacity: 0.8;
 }
 
+.extra-key-clipboard {
+    background: var(--surface-tertiary);
+    border-color: var(--accent-default);
+    border-width: 1.5px;
+    color: var(--accent-default);
+    font-weight: 600;
+}
+
+.extra-key-clipboard:active {
+    background: var(--accent-soft);
+    border-color: var(--accent-default);
+    color: var(--text-inverse, var(--text-primary));
+}
+
 .extra-key-dismiss:active {
     background: var(--accent-soft);
     border-color: var(--accent-default);

package/src/public/extra-keys.js

@@ -18,6 +18,8 @@ class ExtraKeys {
     this.container.setAttribute('aria-label', 'Terminal modifier keys');
 
     const row1Keys = [
+      { label: 'Cp', title: 'Copy selection', handler: 'copy' },
+      { label: 'Pst', title: 'Paste clipboard', handler: 'paste' },
       { label: 'Tab', data: '\t' },
       { label: 'Ctrl', modifier: 'ctrl' },
       { label: 'Alt', modifier: 'alt' },
@@ -67,6 +69,12 @@ class ExtraKeys {
 
     this._resizeHandler = () => this._updateRow2Visibility();
     window.addEventListener('resize', this._resizeHandler);
+    window.addEventListener('orientationchange', () => {
+      setTimeout(() => this._updateRow2Visibility(), 300);
+    });
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', () => this._updateRow2Visibility());
+    }
   }
 
   _buildRow(keys) {
@@ -82,6 +90,16 @@ class ExtraKeys {
       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();
+          } else if (key.handler === 'paste') {
+            this._handlePaste();
+          }
+        });
       } else if (key.modifier) {
         btn.classList.add('extra-key-modifier');
         btn.dataset.modifier = key.modifier;
@@ -104,6 +122,34 @@ class ExtraKeys {
     }
   }
 
+  async _handleCopy() {
+    if ('vibrate' in navigator) try { navigator.vibrate(10); } catch (_) {}
+    const selection = this.app && this.app.terminal ? this.app.terminal.getSelection() : '';
+    if (!selection) {
+      if (window.feedback) window.feedback.warning('No text selected');
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(selection);
+      if (window.feedback) window.feedback.success('Copied');
+    } catch (err) {
+      if (window.feedback) window.feedback.warning('Clipboard access denied');
+    }
+  }
+
+  async _handlePaste() {
+    if ('vibrate' in navigator) try { navigator.vibrate(10); } catch (_) {}
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text && this.app && this.app.send) {
+        this.app.send({ type: 'input', data: text });
+        if (window.feedback) window.feedback.success('Pasted');
+      }
+    } catch (err) {
+      if (window.feedback) window.feedback.warning('Clipboard access denied');
+    }
+  }
+
   _sendKey(data) {
     if (!this.app) return;
     if ('vibrate' in navigator) try { navigator.vibrate(10); } catch (_) {}
@@ -202,9 +248,12 @@ class ExtraKeys {
 
   _updateRow2Visibility() {
     if (!this._row2 || !this._visible) return;
-    const termEl = document.getElementById('terminal');
-    const height = termEl ? termEl.offsetHeight : window.innerHeight;
-    if (height > 400) {
+    const vpHeight = window.visualViewport
+      ? window.visualViewport.height
+      : window.innerHeight;
+    const isLandscape = window.innerWidth > window.innerHeight;
+    const threshold = isLandscape ? 280 : 400;
+    if (vpHeight > threshold) {
       this._row2.classList.remove('extra-keys-row-hidden');
     } else {
       this._row2.classList.add('extra-keys-row-hidden');

package/src/public/index.html

@@ -51,11 +51,15 @@
     <link rel="stylesheet" href="components/cards.css">
     <link rel="stylesheet" href="components/menus.css">
     <link rel="stylesheet" href="components/notifications.css">
-    <link rel="stylesheet" href="components/file-browser.css">
-    <link rel="stylesheet" href="components/banner-base.css">
-    <link rel="stylesheet" href="components/vscode-tunnel.css">
+    <link rel="stylesheet" href="components/file-browser.css" media="print" onload="this.media='all'">
+    <noscript><link rel="stylesheet" href="components/file-browser.css"></noscript>
+    <link rel="stylesheet" href="components/banner-base.css" media="print" onload="this.media='all'">
+    <noscript><link rel="stylesheet" href="components/banner-base.css"></noscript>
+    <link rel="stylesheet" href="components/vscode-tunnel.css" media="print" onload="this.media='all'">
+    <noscript><link rel="stylesheet" href="components/vscode-tunnel.css"></noscript>
     <link rel="stylesheet" href="components/feedback.css">
-    <link rel="stylesheet" href="components/voice-input.css">
+    <link rel="stylesheet" href="components/voice-input.css" media="print" onload="this.media='all'">
+    <noscript><link rel="stylesheet" href="components/voice-input.css"></noscript>
     <link rel="stylesheet" href="components/input-overlay.css">
     <link rel="stylesheet" href="components/bottom-nav.css">
     <link rel="stylesheet" href="components/extra-keys.css">
@@ -64,7 +68,7 @@
     <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>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
     <script src="https://unpkg.com/xterm@5.3.0/lib/xterm.js"></script>
     <script src="https://unpkg.com/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
     <script src="https://unpkg.com/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.js"></script>

package/src/public/service-worker.js

@@ -1,6 +1,6 @@
 // Bump this version when urlsToCache entries are added or removed.
 // Content changes to existing files are handled by the network-first fetch strategy.
-const CACHE_NAME = 'ai-or-die-v8';
+const CACHE_NAME = 'ai-or-die-v9';
 const urlsToCache = [
   '/',
   '/index.html',
@@ -31,19 +31,38 @@ const urlsToCache = [
   '/splits.js',
   '/icons.js',
   '/components/extra-keys.css',
-  '/extra-keys.js'
+  '/components/file-browser.css',
+  '/components/banner-base.css',
+  '/components/vscode-tunnel.css',
+  '/components/feedback.css',
+  '/components/voice-input.css',
+  '/components/input-overlay.css',
+  '/extra-keys.js',
+  '/file-browser.js',
+  '/file-editor.js',
+  '/voice-handler.js',
+  '/image-handler.js',
+  '/input-overlay.js',
+  '/feedback-manager.js'
 ];
 
 // Install event - cache resources
 self.addEventListener('install', event => {
   event.waitUntil(
     caches.open(CACHE_NAME)
-      .then(cache => {
+      .then(async cache => {
         console.log('Opened cache');
-        return cache.addAll(urlsToCache);
+        // Use individual cache.add() calls so one failure doesn't block the rest
+        const results = await Promise.allSettled(
+          urlsToCache.map(url => cache.add(url))
+        );
+        const failed = results.filter(r => r.status === 'rejected');
+        if (failed.length > 0) {
+          console.warn(`Failed to cache ${failed.length} of ${urlsToCache.length} resources`);
+        }
       })
       .catch(err => {
-        console.error('Failed to cache resources:', err);
+        console.error('Failed to open cache:', err);
       })
   );
 });
@@ -92,6 +111,24 @@ self.addEventListener('fetch', event => {
     return;
   }
 
+  // Cache-first for versioned CDN assets (immutable, pinned to specific versions)
+  const knownCDNs = ['unpkg.com', 'cdnjs.cloudflare.com', 'cdn.jsdelivr.net', 'fonts.googleapis.com', 'fonts.gstatic.com'];
+  if (knownCDNs.some(cdn => url.hostname.includes(cdn))) {
+    event.respondWith(
+      caches.match(request).then(cached => {
+        if (cached) return cached;
+        return fetch(request).then(response => {
+          if (response && response.status === 200) {
+            const clone = response.clone();
+            caches.open(CACHE_NAME).then(cache => cache.put(request, clone));
+          }
+          return response;
+        });
+      })
+    );
+    return;
+  }
+
   // For static assets, try network first, fall back to cache
   event.respondWith(
     fetch(request)

package/src/public/session-manager.js

@@ -412,7 +412,7 @@ class SessionTabManager {
     }
     
     updateTabOverflow() {
-        const isMobile = window.innerWidth <= 820;
+        const isMobile = this.claudeInterface.isMobile;
         const overflowWrapper = document.getElementById('tabOverflowWrapper');
         const overflowCount = document.querySelector('.tab-overflow-count');
         
@@ -580,7 +580,7 @@ class SessionTabManager {
             });
             
             // Reorder tabs based on the initial timestamps (mobile only)
-            if (window.innerWidth <= 820) {
+            if (this.claudeInterface.isMobile) {
                 this.reorderTabsByLastAccessed();
             }
             
@@ -741,7 +741,7 @@ class SessionTabManager {
             this.updateTabHistory(sessionId);
         }
 
-        if (window.innerWidth <= 820) {
+        if (this.claudeInterface.isMobile) {
             const tabIndex = this.getOrderedTabIds().indexOf(sessionId);
             if (tabIndex >= 2) this.reorderTabsByLastAccessed();
         }

package/src/stt-engine.js

@@ -21,6 +21,7 @@ class SttEngine {
     this._currentRequest = null;
     this._requestIdCounter = 0;
     this._restartAttempts = 0;
+    this._lastSpawnError = null;
     this._initPromise = null;
     this._modelManager = new ModelManager({
       modelsDir: options.modelsDir
@@ -116,7 +117,10 @@ class SttEngine {
     }
 
     if (msg.type === 'error') {
-      console.error('[stt-engine] Worker model load error:', msg.message);
+      console.error('[stt-engine] Worker error:', msg.message);
+      if (msg.message && msg.message.includes('sherpa-onnx-node')) {
+        this._lastSpawnError = 'MODULE_NOT_FOUND';
+      }
       this._status = 'unavailable';
       return;
     }
@@ -154,6 +158,13 @@ class SttEngine {
 
     this._worker = null;
 
+    // Don't retry if the dependency is fundamentally missing
+    if (this._lastSpawnError === 'MODULE_NOT_FOUND') {
+      console.error('[stt-engine] sherpa-onnx-node not installed — STT unavailable. Install with: npm install sherpa-onnx-node');
+      this._status = 'unavailable';
+      return;
+    }
+
     // Give up after too many consecutive failures
     if (this._restartAttempts >= MAX_RESTART_ATTEMPTS) {
       console.error(`[stt-engine] Max restart attempts (${MAX_RESTART_ATTEMPTS}) reached, giving up`);
@@ -201,6 +212,7 @@ class SttEngine {
           this._worker = worker;
           this._status = 'ready';
           this._restartAttempts = 0;
+          this._lastSpawnError = null;
 
           worker.on('message', (m) => this._onWorkerMessage(m));
           worker.on('exit', (c) => this._onWorkerExit(c));
@@ -218,6 +230,10 @@ class SttEngine {
       const onError = (err) => {
         worker.off('message', onReady);
         worker.off('error', onError);
+        // Tag dependency errors so _onWorkerExit can skip futile retries
+        if (err.code === 'MODULE_NOT_FOUND' || (err.message && err.message.includes('sherpa-onnx-node'))) {
+          this._lastSpawnError = 'MODULE_NOT_FOUND';
+        }
         reject(err);
       };
 

package/src/stt-worker.js

@@ -29,7 +29,16 @@ if (os.platform() === 'win32') {
 }
 
 // Now safe to require sherpa-onnx-node
-const { OfflineRecognizer } = require('sherpa-onnx-node');
+let OfflineRecognizer;
+try {
+  ({ OfflineRecognizer } = require('sherpa-onnx-node'));
+} catch (err) {
+  parentPort.postMessage({
+    type: 'error',
+    message: `sherpa-onnx-node is not installed. Install it with: npm install sherpa-onnx-node\n(Original error: ${err.message})`
+  });
+  process.exit(1);
+}
 
 const modelDir = workerData.modelDir;
 const numThreads = workerData.numThreads || Math.min(4, os.cpus().length);

package/CHANGELOG.md

@@ -1,25 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [0.1.0] - 2025-02-06
-
-### Added
-- Multi-tool support: Claude, GitHub Copilot, Google Gemini, OpenAI Codex, and raw Terminal
-- BaseBridge architecture for cross-platform CLI tool management
-- Dynamic tool card UI — automatically detects installed tools
-- Microsoft Dev Tunnels integration for secure remote access
-- Real-time terminal streaming via xterm.js and WebSocket
-- Multi-session support with persistent tabs
-- Token-based authentication (auto-generated by default)
-- Session persistence across server restarts
-- Cross-platform support (Linux and Windows via ConPTY)
-- Progressive Web App (PWA) with installable manifest
-- Mobile-responsive design with touch-optimized controls
-- Comprehensive documentation in docs/ (architecture, specs, ADRs, agent instructions)
-- AI agent infrastructure with 5 specialized personas
-- CI/CD pipeline with cross-platform test matrix
-- Validation scripts for Linux and Windows