ai-or-die 0.1.61 → 0.1.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-or-die",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "description": "Universal AI coding terminal — Claude, Copilot, Gemini & more in your browser",
   "main": "src/server.js",
   "bin": {
@@ -35,6 +35,8 @@
   "license": "MIT",
   "dependencies": {
     "@lydell/node-pty": "1.2.0-beta.10",
+    "@vscode/ripgrep": "^1.18.0",
+    "chokidar": "^5.0.0",
     "commander": "^12.1.0",
     "cors": "^2.8.5",
     "express": "^4.19.2",
@@ -55,6 +57,7 @@
   "devDependencies": {
     "@playwright/test": "^1.58.2",
     "esbuild": "^0.24.0",
+    "jsdom": "^24.1.3",
     "mocha": "^11.7.1",
     "postject": "^1.0.0-alpha.6"
   }

package/sea-bootstrap.js

@@ -28,18 +28,44 @@ if (isSea) {
   const ptyPkg = `node-pty-${process.platform}-${process.arch}`;
   const sherpaPlatform = process.platform === 'win32' ? 'win' : process.platform;
   const sherpaPkg = `sherpa-onnx-${sherpaPlatform}-${process.arch}`;
+  // Bundled ripgrep (ADR-0018) — see scripts/build-sea.js for the asset
+  // prefix scheme. Mirror it here for the extraction predicate AND the
+  // post-extract path computation that feeds global.__SEA_RG_PATH__.
+  const rgAssetPrefix = `vscode-ripgrep-${process.platform}-${process.arch}`;
+  const rgBinName = process.platform === 'win32' ? 'rg.exe' : 'rg';
   const assetKeys = sea.getAssetKeys();
 
   for (const key of assetKeys) {
     if (key.startsWith(ptyPkg + '/') ||
         key.startsWith(sherpaPkg + '/') ||
-        key.startsWith('sherpa-onnx-node/')) {
+        key.startsWith('sherpa-onnx-node/') ||
+        key.startsWith(rgAssetPrefix + '/')) {
       const targetPath = path.join(tempDir, key);
       fs.mkdirSync(path.dirname(targetPath), { recursive: true });
       fs.writeFileSync(targetPath, new Uint8Array(sea.getRawAsset(key)));
     }
   }
 
+  // chmod +x the extracted ripgrep binary on POSIX. fs.writeFileSync
+  // doesn't preserve the executable bit; without this chmod, the
+  // search backend's fs.accessSync(X_OK) liveness check would reject
+  // the binary on macOS / Linux SEA builds even though the bytes are
+  // intact. Windows ignores file mode bits — the .exe extension
+  // already conveys executability.
+  const rgExtractedPath = path.join(tempDir, rgAssetPrefix, 'bin', rgBinName);
+  if (fs.existsSync(rgExtractedPath)) {
+    if (process.platform !== 'win32') {
+      try { fs.chmodSync(rgExtractedPath, 0o755); }
+      catch (e) {
+        console.warn('[SEA] failed to chmod +x bundled ripgrep:', e.message);
+      }
+    }
+    // Surface the resolved path to the search backend (src/utils/search.js)
+    // via a global, since the bundled module's require('@vscode/ripgrep')
+    // can't resolve at SEA runtime (no node_modules on disk).
+    global.__SEA_RG_PATH__ = rgExtractedPath;
+  }
+
   // Store references for pty-sea-shim.js and server.js to use
   global.__SEA_MODE__ = true;
   global.__SEA_TEMP_DIR__ = tempDir;

package/src/public/app.js

@@ -11,6 +11,10 @@ class ClaudeCodeWebInterface {
         this.maxReconnectAttempts = 10;
         this.reconnectDelay = 1000;
         this._reconnecting = false;
+        this._socketGeneration = 0;
+        this._pongTimer = null;
+        this._heartbeatTimer = null;
+        this._reconnectTimer = null;
         this._fitting = false;
         this.folderMode = true; // Always use folder mode
         this.currentFolderPath = null;
@@ -283,6 +287,14 @@ class ClaudeCodeWebInterface {
                 // Reconnect if the socket dropped while the tab was hidden
                 if (this.socket && this.socket.readyState === WebSocket.CLOSED) {
                     this.reconnect();
+                } else if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+                    // Socket appears OPEN but may be a zombie (NAT rebind during
+                    // hidden tab). Re-arm the heartbeat so we ping immediately —
+                    // the standard 10s pong window will catch a dead socket.
+                    // Do NOT use a tighter probe window: cellular radio wake-up
+                    // is 1.5–3s, and a separate timer races with any in-flight
+                    // pong from before the tab was hidden.
+                    this.startHeartbeat();
                 }
             }
         });
@@ -297,6 +309,19 @@ class ClaudeCodeWebInterface {
             if (window.feedback) window.feedback.warning('Connection lost — you are offline', { duration: 0 });
         });
 
+        // bfcache restore (mobile back/forward swipe). The page may have been
+        // frozen with a stale socket; force a reconnect when restored.
+        // IMPORTANT: only act on `e.persisted === true`. `pageshow` ALSO fires
+        // on every normal page load with `e.persisted === false`, and in that
+        // case init() is already establishing the WebSocket — calling
+        // reconnect() here would race with init's connect and tear down the
+        // in-flight socket before it opens (caught by CI golden-path test).
+        window.addEventListener('pageshow', (e) => {
+            if (e.persisted) {
+                this.reconnect();
+            }
+        });
+
         window.addEventListener('resize', () => {
             this.fitTerminal();
         });
@@ -647,6 +672,7 @@ class ClaudeCodeWebInterface {
 
         this.setupTerminalSearch();
         this.setupTerminalContextMenu();
+        this._setupTerminalLinking(this.terminal);
 
         this.terminal.onData((data) => {
             if (this._ctrlModifierPending) {
@@ -689,11 +715,20 @@ class ClaudeCodeWebInterface {
             }
         });
 
-        // Sync terminal colors when the CSS theme changes (data-theme attribute)
+        // Sync terminal colors AND any live Monaco instances when the CSS
+        // theme changes (data-theme attribute on documentElement).
         const themeObserver = new MutationObserver((mutations) => {
             for (const m of mutations) {
-                if (m.attributeName === 'data-theme' && this.terminal) {
-                    this.syncTerminalTheme();
+                if (m.attributeName === 'data-theme') {
+                    if (this.terminal) this.syncTerminalTheme();
+                    // Editor pane + read-only code preview re-theme live so
+                    // they don't get stuck on whatever theme was active when
+                    // they were created. Loader reads the new data-theme via
+                    // resolveMonacoTheme() internally.
+                    if (window.fileViewerMonaco &&
+                        typeof window.fileViewerMonaco.applyThemeToAll === 'function') {
+                        try { window.fileViewerMonaco.applyThemeToAll(); } catch (_) { /* swallow */ }
+                    }
                 }
             }
         });
@@ -1030,6 +1065,34 @@ class ClaudeCodeWebInterface {
             }
         });
 
+        // Ctrl/Cmd+Shift+F → toggle the file browser's cross-file search panel.
+        // Opens the file browser (if closed) and the search panel together so
+        // the user can hit one shortcut from anywhere in the app and start
+        // typing a query immediately. Mirrors the VS Code/JetBrains binding.
+        document.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === 'F' || e.key === 'f')) {
+                // Don't steal the shortcut from a focused editor that owns
+                // its own find — Monaco's find-in-files for the editor pane
+                // is handled inside the editor surface; the file-browser
+                // search is for the project-wide case.
+                const tag = (e.target && e.target.tagName) || '';
+                const isEditableField = (tag === 'INPUT' || tag === 'TEXTAREA' ||
+                    (e.target && e.target.isContentEditable));
+                // Allow the shortcut when typing in our OWN search panel
+                // input (it'll just refocus); skip for any other text field.
+                const insideSearchPanel = e.target &&
+                    typeof e.target.closest === 'function' &&
+                    e.target.closest('.fb-search-panel');
+                if (isEditableField && !insideSearchPanel) return;
+
+                e.preventDefault();
+                const panel = this._ensureFileBrowser ? this._ensureFileBrowser() : this._fileBrowserPanel;
+                if (!panel) return;
+                if (!panel.isOpen()) panel.open();
+                if (typeof panel.toggleSearchPanel === 'function') panel.toggleSearchPanel();
+            }
+        });
+
         // Header overflow menu (tablet/mobile three-dot button)
         this._setupOverflowMenu();
 
@@ -1644,10 +1707,18 @@ class ClaudeCodeWebInterface {
             }
             
             try {
-                this.socket = new WebSocket(wsUrl);
-                this.socket.binaryType = 'arraybuffer';
-
-                this.socket.onopen = () => {
+                this._socketGeneration += 1;
+                const gen = this._socketGeneration;
+                const ws = new WebSocket(wsUrl);
+                ws.binaryType = 'arraybuffer';
+                this.socket = ws;
+                const isCurrent = () => ws === this.socket && gen === this._socketGeneration;
+
+                ws.onopen = () => {
+                    if (!isCurrent()) return;
+                    // Arm heartbeat BEFORE any awaited work so liveness detection
+                    // is in place even if loadSessions stalls.
+                    this.startHeartbeat();
                     this.reconnectAttempts = 0;
                     // Clear server restart state if we were reconnecting after a restart
                     if (this._serverRestarting) {
@@ -1678,10 +1749,23 @@ class ClaudeCodeWebInterface {
                     // Request app tunnel status
                     this.send({ type: 'app_tunnel_status' });
 
+                    // Auto-rejoin the previously active session. After a
+                    // reconnect the new WebSocket is alive but server-side
+                    // it isn't joined to anything — without this the
+                    // terminal sits frozen until the user manually clicks a
+                    // tab. On the very first connect, currentClaudeSessionId
+                    // is null (it's set later by session_joined arriving
+                    // from the explicit init-time join), so this only fires
+                    // on RE-connects.
+                    if (this.currentClaudeSessionId) {
+                        this.send({ type: 'join_session', sessionId: this.currentClaudeSessionId });
+                    }
+
                     resolve();
                 };
             
-            this.socket.onmessage = (event) => {
+            ws.onmessage = (event) => {
+                if (!isCurrent()) return;
                 if (event.data instanceof ArrayBuffer) {
                     // Binary frame — pass raw ArrayBuffer to handleBinaryOutput
                     this.handleBinaryOutput(event.data);
@@ -1691,17 +1775,45 @@ class ClaudeCodeWebInterface {
                 }
             };
             
-            this.socket.onclose = (event) => {
+            ws.onclose = (event) => {
+                // Stale-socket fence: an old socket's onclose firing after we've
+                // already moved on must NOT schedule another reconnect.
+                if (!isCurrent()) return;
+                if (this._heartbeat) { this._heartbeat.stop(); this._heartbeat = null; }
+                if (this._heartbeatTimer) { clearInterval(this._heartbeatTimer); this._heartbeatTimer = null; }
+                if (this._pongTimer) { clearTimeout(this._pongTimer); this._pongTimer = null; }
                 // During server restart, don't count failures against reconnect budget
                 // 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) * (0.7 + Math.random() * 0.6);
                     this._restartReconnectAttempts = (this._restartReconnectAttempts || 0) + 1;
-                    setTimeout(() => this.reconnect(), restartBackoff);
+                    if (this._reconnectTimer) clearTimeout(this._reconnectTimer);
+                    const restartGen = this._socketGeneration;
+                    this._reconnectTimer = setTimeout(() => {
+                        this._reconnectTimer = null;
+                        if (restartGen !== this._socketGeneration) return;
+                        this.reconnect();
+                    }, restartBackoff);
                 } else if (!event.wasClean && this.reconnectAttempts < this.maxReconnectAttempts) {
                     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));
+                    // First attempt is fast (250ms covers a server-process restart window);
+                    // subsequent attempts use exponential backoff with jitter.
+                    const delay = this.reconnectAttempts === 0
+                        ? 250
+                        : Math.min(this.reconnectDelay * Math.pow(2, this.reconnectAttempts), 30000) * (0.7 + Math.random() * 0.6);
+                    if (this._reconnectTimer) clearTimeout(this._reconnectTimer);
+                    // Fence the deferred reconnect with the current generation: a
+                    // user-initiated connect (setSession etc.) will increment the
+                    // generation, so a stale timer firing later must be a no-op
+                    // \u2014 otherwise it spawns a parallel WebSocket and orphans the
+                    // active one. (Caught by gemini-3.1-pro-preview review.)
+                    const onCloseGen = this._socketGeneration;
+                    this._reconnectTimer = setTimeout(() => {
+                        this._reconnectTimer = null;
+                        if (onCloseGen !== this._socketGeneration) return;
+                        this.reconnect();
+                    }, delay);
                     this.reconnectAttempts++;
                 } else {
                     this.updateStatus('Disconnected');
@@ -1709,7 +1821,8 @@ class ClaudeCodeWebInterface {
                 }
             };
             
-            this.socket.onerror = (error) => {
+            ws.onerror = (error) => {
+                if (!isCurrent()) return;
                 console.error('WebSocket error:', error);
                 this.showError('Failed to connect to the server.\n\n\u2022 Check that the server is running\n\u2022 Verify your network connection\n\u2022 Try refreshing the page');
                 reject(error);
@@ -1724,6 +1837,17 @@ class ClaudeCodeWebInterface {
     }
 
     disconnect() {
+        // Cancel any deferred reconnect from a prior onclose so it cannot fire
+        // after a user-initiated reconnect/setSession (which advances the
+        // socket generation) and spawn a parallel socket.
+        if (this._reconnectTimer) {
+            clearTimeout(this._reconnectTimer);
+            this._reconnectTimer = null;
+        }
+        if (this._heartbeat) {
+            this._heartbeat.stop();
+            this._heartbeat = null;
+        }
         if (this.socket) {
             this.socket.close();
             this.socket = null;
@@ -1736,6 +1860,10 @@ class ClaudeCodeWebInterface {
             clearInterval(this._heartbeatTimer);
             this._heartbeatTimer = null;
         }
+        if (this._pongTimer) {
+            clearTimeout(this._pongTimer);
+            this._pongTimer = null;
+        }
         if (this.usageUpdateTimer) {
             clearInterval(this.usageUpdateTimer);
             this.usageUpdateTimer = null;
@@ -1776,7 +1904,7 @@ class ClaudeCodeWebInterface {
                 console.error('Reconnection failed synchronously:', err);
                 this._reconnecting = false;
             }
-        }, 1000);
+        }, 0);
     }
 
     send(data) {
@@ -2117,6 +2245,7 @@ class ClaudeCodeWebInterface {
             }
                 
             case 'pong':
+                if (this._heartbeat) this._heartbeat.onPong();
                 break;
 
             case 'image_upload_complete': {
@@ -2823,6 +2952,81 @@ class ClaudeCodeWebInterface {
         });
     }
 
+    /**
+     * Wire up clickable file paths in a terminal:
+     *   1. xterm registerLinkProvider for hover-underline + click-to-open
+     *      (synchronous regex only — NO network I/O on render).
+     *   2. TerminalPathDetector for the right-click "Open in File Viewer /
+     *      Edit / Download" context menu (selection-driven).
+     *
+     * Safe to call multiple times for the same terminal — each call returns a
+     * disposable that we track on the terminal object so we can clean up if
+     * the terminal is destroyed.
+     */
+    _setupTerminalLinking(terminal) {
+        if (!terminal || !window.fileBrowser) return;
+
+        // 1) Link provider — clickable links for paths/filenames in output.
+        if (typeof window.fileBrowser.attachLinkProvider === 'function' &&
+            typeof terminal.registerLinkProvider === 'function' &&
+            !terminal._fbLinkProvider) {
+            try {
+                terminal._fbLinkProvider = window.fileBrowser.attachLinkProvider({
+                    terminal: terminal,
+                    authFetch: (url, opts) => this.authFetch(url, opts),
+                    openInViewer: (path, line, col) => this.openFileInViewer(path, line, col),
+                    getCwd: () => this.getCurrentWorkingDir(),
+                    feedback: window.feedback,
+                });
+            } catch (err) {
+                console.warn('[file-browser] link provider attach failed:', err);
+            }
+        }
+
+        // 2) Right-click selection-based context menu (lazy panel via getter).
+        if (typeof window.fileBrowser.TerminalPathDetector === 'function' &&
+            !terminal._fbPathDetector) {
+            try {
+                terminal._fbPathDetector = new window.fileBrowser.TerminalPathDetector({
+                    getFileBrowserPanel: () => this._ensureFileBrowser(),
+                    authFetch: (url, opts) => this.authFetch(url, opts),
+                    terminal: terminal,
+                    app: this,
+                });
+                terminal._fbPathDetector.init();
+            } catch (err) {
+                console.warn('[file-browser] path detector init failed:', err);
+            }
+        }
+
+        // 3) Lifecycle: on terminal disposal, release the link provider, the
+        //    path-detector handlers, and the floating menu DOM node. Without
+        //    this, splitting + closing terminals leaks document-level
+        //    listeners and orphaned <div class="fb-terminal-context-menu">
+        //    nodes (peer-review MEDIUM-1 on commit 9a05963).
+        if (typeof terminal.onDispose === 'function' && !terminal._fbLinkingDisposeWired) {
+            terminal._fbLinkingDisposeWired = true;
+            try {
+                terminal.onDispose(() => {
+                    try {
+                        if (terminal._fbLinkProvider && typeof terminal._fbLinkProvider.dispose === 'function') {
+                            terminal._fbLinkProvider.dispose();
+                        }
+                    } catch (_) {}
+                    try {
+                        if (terminal._fbPathDetector && typeof terminal._fbPathDetector.destroy === 'function') {
+                            terminal._fbPathDetector.destroy();
+                        }
+                    } catch (_) {}
+                    terminal._fbLinkProvider = null;
+                    terminal._fbPathDetector = null;
+                });
+            } catch (err) {
+                console.warn('[file-browser] onDispose wiring failed:', err);
+            }
+        }
+    }
+
     setupTerminalContextMenu() {
         const menu = document.getElementById('termContextMenu');
         if (!menu) return;
@@ -3520,26 +3724,45 @@ class ClaudeCodeWebInterface {
     }
 
     startHeartbeat() {
-        if (this._heartbeatTimer) clearInterval(this._heartbeatTimer);
-        this._heartbeatTimer = setInterval(() => {
-            if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-                this.send({ type: 'ping' });
-            }
-        }, 30000);
+        // Delegate to HeartbeatWatchdog (loaded via index.html before app.js).
+        // The watchdog encapsulates ping cadence, pong-timeout, per-socket
+        // fencing, and idempotent restart — see src/public/heartbeat-watchdog.js.
+        if (this._heartbeat) this._heartbeat.stop();
+        if (!this.socket || this.socket.readyState !== WebSocket.OPEN) return;
+        this._heartbeat = new HeartbeatWatchdog({
+            socket: this.socket,
+            generation: this._socketGeneration,
+            currentGeneration: () => this._socketGeneration,
+            currentSocket: () => this.socket,
+            log: (m) => console.warn('[heartbeat]', m),
+        });
+        this._heartbeat.start();
+        // Keep _heartbeatTimer/_pongTimer references in sync for legacy code
+        // (disconnect() still nulls them defensively); the watchdog owns the
+        // real timer lifecycle via stop().
+        this._heartbeatTimer = null;
+        this._pongTimer = null;
     }
 
     // File Browser Methods
-    toggleFileBrowser() {
+    _ensureFileBrowser() {
         if (!this._fileBrowserPanel && window.fileBrowser) {
             this._fileBrowserPanel = new window.fileBrowser.FileBrowserPanel({
                 app: this,
                 authFetch: (url, opts) => this.authFetch(url, opts),
+                // initialPath kept as a back-compat fallback; getCwd is the
+                // source of truth on each open() so a session switch between
+                // opens picks up the new cwd (per ADR-0016 / task #14).
                 initialPath: this.getCurrentWorkingDir(),
+                getCwd: () => this.getCurrentWorkingDir(),
             });
         }
-        if (this._fileBrowserPanel) {
-            this._fileBrowserPanel.toggle();
-        }
+        return this._fileBrowserPanel;
+    }
+
+    toggleFileBrowser() {
+        const panel = this._ensureFileBrowser();
+        if (panel) panel.toggle();
     }
 
     // VS Code Tunnel Methods
@@ -3583,16 +3806,15 @@ class ClaudeCodeWebInterface {
         }
     }
 
-    openFileInViewer(filePath) {
-        if (!this._fileBrowserPanel && window.fileBrowser) {
-            this._fileBrowserPanel = new window.fileBrowser.FileBrowserPanel({
-                app: this,
-                authFetch: (url, opts) => this.authFetch(url, opts),
-                initialPath: this.getCurrentWorkingDir(),
-            });
-        }
-        if (this._fileBrowserPanel) {
-            this._fileBrowserPanel.openToFile(filePath);
+    openFileInViewer(filePath, line, col) {
+        const panel = this._ensureFileBrowser();
+        if (panel) {
+            panel.openToFile(filePath);
+            // Future: pass {line, col} to Monaco viewer for cursor placement
+            // (Stage 1.5 work — for now we just open the file).
+            if (line && this._fileBrowserPanel) {
+                this._fileBrowserPanel._pendingJumpTo = { line: line, col: col || 1 };
+            }
         }
     }
 

package/src/public/auth.js

@@ -195,6 +195,28 @@ class AuthManager {
         };
     }
 
+    /**
+     * Append the auth token as a `?token=` query param.
+     *
+     * Use this for asset URLs that the browser fetches WITHOUT being able
+     * to attach custom headers — `<img src>`, `<iframe src>`, PDF.js
+     * `getDocument({url})`, and any other browser-driven fetch where
+     * `getAuthHeaders()` can't be threaded through. The auth middleware
+     * accepts both `Authorization: Bearer <t>` and `?token=<t>` so this is
+     * the canonical fallback when the header path isn't available.
+     *
+     * Trade-off: query-param tokens can leak into server access logs and
+     * `Referer` headers. The download endpoint mitigates with
+     * `Cache-Control: no-store` + `X-Content-Type-Options: nosniff`. A
+     * future hardening pass should migrate to short-lived HMAC-signed
+     * file-scoped tokens; tracked separately.
+     */
+    appendAuthToUrl(url) {
+        if (!this.token) return url;
+        const separator = url.includes('?') ? '&' : '?';
+        return `${url}${separator}token=${encodeURIComponent(this.token)}`;
+    }
+
     getWebSocketUrl(baseUrl) {
         if (!this.token) return baseUrl;
         const separator = baseUrl.includes('?') ? '&' : '?';