ai-or-die 0.1.44 → 0.1.45

package/.github/workflows/ci.yml

@@ -471,6 +471,42 @@ jobs:
             playwright-report/
           retention-days: 14
 
+  test-browser-mobile-journeys:
+    runs-on: ${{ matrix.os }}
+    needs: test
+    timeout-minutes: 12
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+      - run: npm ci
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/ms-playwright
+            ~/AppData/Local/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+      - name: Run mobile journey tests
+        run: npx playwright test --config e2e/playwright.config.js --project mobile-journeys
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-mobile-journeys-${{ matrix.os }}
+          path: |
+            e2e/test-results/
+            playwright-report/
+          retention-days: 14
+
   build-binary:
     runs-on: ${{ matrix.os }}
     timeout-minutes: 12

package/package.json

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

package/src/public/app.js

@@ -674,11 +674,16 @@ class ClaudeCodeWebInterface {
     }
 
     _setupExtraKeys() {
-        if (!this.isMobile || !window.visualViewport || typeof ExtraKeys === 'undefined') return;
+        if (!this.isMobile || typeof ExtraKeys === 'undefined') return;
 
         this.extraKeys = new ExtraKeys({ app: this });
         this._keyboardOpen = false;
 
+        // Browsers without visualViewport (Firefox Android, Samsung Internet):
+        // Initialize extra-keys but skip viewport-based keyboard detection.
+        // The extra-keys bar is still usable via manual show/hide.
+        if (!window.visualViewport) return;
+
         // Thrashing detection: if >3 resize events in 500ms, fall back to fixed threshold
         const resizeTimestamps = [];
         let useFallbackThreshold = false;
@@ -1477,6 +1482,9 @@ class ClaudeCodeWebInterface {
         if (this._reconnecting) return;
         this._reconnecting = true;
         this.disconnect();
+        // Reset overlay flag so session_joined can show start prompt if terminal
+        // exited during the disconnect (fixes stuck blank screen after reconnect)
+        this._overlayExplicitlyHidden = false;
         // Reset flow control state so stale pause signals aren't sent on new connection
         this._outputPaused = false;
         this._pendingCallbacks = 0;
@@ -1494,7 +1502,10 @@ class ClaudeCodeWebInterface {
         }
         setTimeout(() => {
             try {
-                this.connect()
+                const connectTimeout = new Promise((_, reject) =>
+                    setTimeout(() => reject(new Error('Connection timeout')), 10000)
+                );
+                Promise.race([this.connect(), connectTimeout])
                     .catch(err => console.error('Reconnection failed:', err))
                     .finally(() => { this._reconnecting = false; });
             } catch (err) {
@@ -3694,6 +3705,11 @@ class ClaudeCodeWebInterface {
             this.pendingJoinResolve = resolve;
             this.pendingJoinSessionId = sessionId;
             
+            // Reset overlay flag before joining a new session so that
+            // session_joined can correctly show/hide the overlay based on
+            // the NEW session's state, not a stale flag from the previous tab.
+            this._overlayExplicitlyHidden = false;
+
             // Send the join request
             this.send({ type: 'join_session', sessionId });
 
@@ -4012,7 +4028,7 @@ class ClaudeCodeWebInterface {
         // Container is already visible by default
         
         // Check if mobile screen
-        const isMobile = window.innerWidth <= 768;
+        const isMobile = window.innerWidth <= 820;
         const isSmallMobile = window.innerWidth <= 480;
         
         // Format tokens (K/M notation)
@@ -4152,7 +4168,7 @@ class ClaudeCodeWebInterface {
                 if (totalTokens > 0) {
                     const opusPercent = (opusTokens / totalTokens) * 100;
                     const sonnetPercent = (sonnetTokens / totalTokens) * 100;
-                    const isMobile = window.innerWidth <= 768;
+                    const isMobile = window.innerWidth <= 820;
                     
                     // Use short names on mobile, full names on desktop
                     const opusName = isMobile ? 'O' : 'Opus';
@@ -4175,7 +4191,7 @@ class ClaudeCodeWebInterface {
             }
         } else {
             // No active session or expired session - show zeros
-            const isMobile = window.innerWidth <= 768;
+            const isMobile = window.innerWidth <= 820;
             
             document.getElementById('usageTitle').textContent = '0h 0m';
             document.getElementById('usageTokens').textContent = isMobile ? '0%' : '0';

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

@@ -78,8 +78,8 @@
 
 @media (orientation: landscape) {
     .extra-key {
-        min-height: 36px;
-        min-width: 36px;
+        min-height: 44px;
+        min-width: 44px;
         font-size: var(--text-sm);
     }
 }

package/src/public/components/tabs.css

@@ -433,6 +433,8 @@
 .overflow-tab-close {
     width: 20px;
     height: 20px;
+    min-width: 44px;
+    min-height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;

package/src/public/mobile.css

@@ -328,7 +328,7 @@
         padding: 0;
         border-width: 0;
         overflow: hidden;
-        transition: opacity 0.2s ease, height 0.2s ease;
+        transition: opacity 0.2s ease, height 0.2s ease, padding 0.2s ease, border-width 0.2s ease;
     }
     body.keyboard-open .session-tabs-bar {
         height: 0;
@@ -336,7 +336,8 @@
         overflow: hidden;
         padding: 0;
         border-width: 0;
-        transition: height 0.2s ease;
+        opacity: 0;
+        transition: opacity 0.2s ease, height 0.2s ease, padding 0.2s ease, border-width 0.2s ease;
     }
     body.keyboard-open #app {
         padding-bottom: 0 !important;

package/src/public/session-manager.js

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

package/src/server.js

@@ -126,6 +126,7 @@ class ClaudeCodeWebServer {
       for (const [id, session] of this.claudeSessions) {
         if (!session.active && session.connections.size === 0 && new Date(session.lastActivity || session.created).getTime() < sevenDaysAgo) {
           this.claudeSessions.delete(id);
+          this.activityBroadcastTimestamps.delete(id);
           this.sessionStore.markDirty();
         }
       }
@@ -1795,6 +1796,7 @@ class ClaudeCodeWebServer {
             currentSession.agent = null;
             this.sessionStore.markDirty();
           }
+          this.activityBroadcastTimestamps.delete(sessionId);
           this.broadcastToSession(sessionId, { type: 'error', message: error.message });
           this.broadcastSessionActivity(sessionId, 'session_error');
         },