ai-or-die 0.1.16 → 0.1.18

package/.github/workflows/ci.yml

@@ -77,6 +77,97 @@ jobs:
             playwright-report/
           retention-days: 14
 
+  test-browser-mobile:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - run: npm ci
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+      - name: Run mobile portrait tests (iPhone 14)
+        run: npx playwright test --config e2e/playwright.config.js --project mobile-iphone
+      - name: Run mobile portrait tests (Pixel 7)
+        run: npx playwright test --config e2e/playwright.config.js --project mobile-pixel
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-mobile-${{ matrix.os }}
+          path: |
+            e2e/test-results/
+            playwright-report/
+          retention-days: 14
+
+  test-browser-visual:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - run: npm ci
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+      - name: Run visual regression tests
+        run: npx playwright test --config e2e/playwright.config.js --project visual-regression
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-visual-${{ matrix.os }}
+          path: |
+            e2e/test-results/
+            playwright-report/
+          retention-days: 14
+      - name: Upload generated baselines
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: screenshot-baselines-${{ matrix.os }}
+          path: e2e/tests/**/*-snapshots/
+          retention-days: 30
+      - name: Upload screenshot diffs
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: screenshot-diffs-${{ matrix.os }}
+          path: e2e/tests/**/*-diff.png
+          retention-days: 14
+
+  test-browser-new-features:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - run: npm ci
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+      - name: Run new feature tests
+        run: npx playwright test --config e2e/playwright.config.js --project new-features
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-new-features-${{ matrix.os }}
+          path: |
+            e2e/test-results/
+            playwright-report/
+          retention-days: 14
+
   build-binary:
     runs-on: ${{ matrix.os }}
     strategy:

package/docs/adrs/0007-design-token-system.md

@@ -0,0 +1,66 @@
+# ADR-0007: Design Token System and Multi-Theme Architecture
+
+## Status
+
+**Accepted**
+
+## Date
+
+2026-02-07
+
+## Context
+
+The ai-or-die frontend uses a monolithic 2161-line `style.css` with 15 ad-hoc CSS custom properties in `:root`. Colors, spacing, shadows, and z-index values are hardcoded throughout. The app supports only two themes (dark and light) via a `[data-theme="light"]` override block that duplicates every variable.
+
+This creates several problems:
+- Adding a new theme requires finding and updating every hardcoded value
+- No formal spacing or typography scale leads to inconsistent sizing
+- No z-index hierarchy makes layering unpredictable
+- Inline styles scattered in HTML and JS (install button, warning text) bypass the theme system entirely
+- The single CSS file is hard to navigate and risky to modify
+
+The terminal emulator community has standardized on popular color schemes (Monokai, Nord, Solarized) that users expect to be available. Competitors like Warp and iTerm2 ship with 10+ built-in themes.
+
+## Decision
+
+We adopt a three-tier design token architecture in a dedicated `tokens.css` file:
+
+1. **Primitive tokens** define raw values (color hex codes, pixel sizes). These are named by their visual property (e.g., `--color-gray-200: #27272a`). Components never reference primitives directly.
+
+2. **Semantic tokens** define role-based references (e.g., `--surface-primary`, `--text-secondary`, `--accent-default`). All component CSS uses only semantic tokens.
+
+3. **Component tokens** (optional) provide per-component overrides when a semantic token is too generic. Used sparingly.
+
+Themes override only semantic tokens via `[data-theme="name"]` CSS selectors. The default theme (Midnight) is defined on `:root`. Adding a new theme requires only one `[data-theme]` block.
+
+The monolithic `style.css` will be split into component-specific CSS files (`components/tabs.css`, `components/modals.css`, etc.) loaded via `<link>` tags in `index.html`. This is acceptable because the app is served from localhost, where HTTP overhead is negligible.
+
+Seven themes ship at launch: Midnight (default), Classic Dark, Classic Light, Monokai, Nord, Solarized Dark, Solarized Light.
+
+## Consequences
+
+### Positive
+
+- Adding a new theme is a single `[data-theme]` block (~20 lines)
+- Components automatically support all themes with no per-theme CSS
+- Consistent spacing, typography, and z-index across all components
+- CSS files are smaller and focused, easier to review and modify
+- Inline styles can be replaced with token-backed CSS classes
+
+### Negative
+
+- Multiple `<link>` tags increase the number of HTTP requests (mitigated: localhost only)
+- Renaming semantic tokens requires updating all consuming CSS files
+- Developers must learn the token naming conventions
+
+### Neutral
+
+- The existing `[data-theme="light"]` selector continues to work (aliased to `classic-light`)
+- No build step is introduced — all CSS remains plain vanilla
+- Token file serves as living documentation of the design system
+
+## Notes
+
+- Theme color values sourced from official specifications: [Nord](https://www.nordtheme.com/docs/colors-and-palettes/), [Monokai](https://monokai.pro/), [Solarized](https://ethanschoonover.com/solarized/)
+- Meslo Nerd Font added as the default terminal font via CDN (nerdfont-webfonts on jsDelivr)
+- xterm.js has a known limitation with double-width Nerd Font glyphs (issue #3342)

package/docs/specs/client-app.md

@@ -11,12 +11,46 @@ The frontend is a single-page application served from `src/public/`. It runs ent
 | xterm.js | 5.3.0 | unpkg CDN | Terminal emulator component |
 | xterm-addon-fit | 0.8.0 | unpkg CDN | Auto-fit terminal to container |
 | xterm-addon-web-links | 0.9.0 | unpkg CDN | Clickable URLs in terminal output |
-| JetBrains Mono | -- | Google Fonts | Monospace font for terminal |
+| JetBrains Mono | -- | Google Fonts | Monospace font for terminal (fallback) |
+| MesloLGS Nerd Font | -- | jsDelivr CDN | Primary terminal font with Nerd Font glyphs |
 | Inter | -- | Google Fonts | UI font for headers, tabs, controls |
 | clipboard-handler.js | -- | Local | Keyboard shortcuts (Ctrl+C/V) and clipboard utility functions |
 
 ---
 
+## Design Token System
+
+Source: `src/public/tokens.css`
+
+Three-tier architecture loaded before `style.css`:
+
+1. **Primitive tokens** — raw color/size values (e.g., `--color-gray-200`, `--space-4`)
+2. **Semantic tokens** — role-based references (e.g., `--surface-primary`, `--accent-default`)
+3. **Theme overrides** — `[data-theme="name"]` blocks override semantic tokens only
+
+### Available Themes
+
+| Theme | `data-theme` value | Default? |
+|-------|-------------------|----------|
+| Midnight | (none / omit attribute) | Yes |
+| Classic Dark | `classic-dark` | No |
+| Classic Light | `classic-light` or `light` | No |
+| Monokai | `monokai` | No |
+| Nord | `nord` | No |
+| Solarized Dark | `solarized-dark` | No |
+| Solarized Light | `solarized-light` | No |
+
+### Backward Compatibility
+
+`style.css` defines aliases mapping old variable names to new semantic tokens:
+- `--bg-primary` → `var(--surface-primary)`
+- `--accent` → `var(--accent-default)`
+- `--success` → `var(--status-success)`
+- `--error` → `var(--status-error)`
+- `--border` → `var(--border-default)`
+
+---
+
 ## ClaudeCodeWebInterface
 
 Source: `src/public/app.js` (~2100 lines)

package/e2e/playwright.config.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { defineConfig } = require('@playwright/test');
+const { defineConfig, devices } = require('@playwright/test');
 
 module.exports = defineConfig({
   testDir: './tests',
@@ -8,7 +8,14 @@ module.exports = defineConfig({
   retries: process.env.CI ? 1 : 0,
   workers: 1,
   timeout: 60000,
-  expect: { timeout: 15000 },
+  expect: {
+    timeout: 15000,
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.01,
+      threshold: 0.2,
+      animations: 'disabled',
+    },
+  },
   reporter: process.env.CI ? [['github'], ['html', { open: 'never' }]] : 'list',
   use: {
     browserName: 'chromium',
@@ -28,5 +35,29 @@ module.exports = defineConfig({
       name: 'functional',
       testMatch: /0[2-7]-.*\.spec\.js/,
     },
+    {
+      name: 'mobile-iphone',
+      testMatch: '08-mobile-portrait.spec.js',
+      use: { ...devices['iPhone 14'] },
+    },
+    {
+      name: 'mobile-pixel',
+      testMatch: '08-mobile-portrait.spec.js',
+      use: { ...devices['Pixel 7'] },
+    },
+    {
+      name: 'visual-regression',
+      testMatch: '09-visual-regression.spec.js',
+      use: {
+        viewport: { width: 1280, height: 720 },
+        launchOptions: {
+          args: ['--font-render-hinting=none', '--disable-font-subpixel-positioning'],
+        },
+      },
+    },
+    {
+      name: 'new-features',
+      testMatch: /1[0-3]-.*\.spec\.js/,
+    },
   ],
 });

package/package.json

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

package/src/public/app.js

@@ -337,10 +337,16 @@ class ClaudeCodeWebInterface {
 
         this.fitAddon = new FitAddon.FitAddon();
         this.webLinksAddon = new WebLinksAddon.WebLinksAddon();
-        
+
         this.terminal.loadAddon(this.fitAddon);
         this.terminal.loadAddon(this.webLinksAddon);
-        
+
+        // Load search addon if available
+        if (typeof SearchAddon !== 'undefined') {
+            this.searchAddon = new SearchAddon.SearchAddon();
+            this.terminal.loadAddon(this.searchAddon);
+        }
+
         this.terminal.open(document.getElementById('terminal'));
         this.fitTerminal();
 
@@ -351,6 +357,7 @@ class ClaudeCodeWebInterface {
             }
         });
 
+        this.setupTerminalSearch();
         this.setupTerminalContextMenu();
 
         this.terminal.onData((data) => {
@@ -709,64 +716,23 @@ class ClaudeCodeWebInterface {
                 break;
                 
             case 'claude_started':
-                if (this._startToolTimeout) { clearTimeout(this._startToolTimeout); this._startToolTimeout = null; }
-                this.hideOverlay();
-                // Don't auto-focus to avoid focus tracking sequences
-                // User can click to focus when ready
-                this.loadSessions(); // Refresh session list
-                // Request usage stats to start tracking session usage
-                this.requestUsageStats();
-                
-                // Update tab status to active
-                if (this.sessionTabManager && this.currentClaudeSessionId) {
-                    this.sessionTabManager.updateTabStatus(this.currentClaudeSessionId, 'active');
-                }
-                break;
             case 'codex_started':
-                if (this._startToolTimeout) { clearTimeout(this._startToolTimeout); this._startToolTimeout = null; }
-                this.hideOverlay();
-                this.loadSessions();
-                this.requestUsageStats();
-                if (this.sessionTabManager && this.currentClaudeSessionId) {
-                    this.sessionTabManager.updateTabStatus(this.currentClaudeSessionId, 'active');
-                }
-                break;
             case 'agent_started':
-                if (this._startToolTimeout) { clearTimeout(this._startToolTimeout); this._startToolTimeout = null; }
-                this.hideOverlay();
-                this.loadSessions();
-                this.requestUsageStats();
-                if (this.sessionTabManager && this.currentClaudeSessionId) {
-                    this.sessionTabManager.updateTabStatus(this.currentClaudeSessionId, 'active');
-                }
-                break;
             case 'copilot_started':
-                if (this._startToolTimeout) { clearTimeout(this._startToolTimeout); this._startToolTimeout = null; }
-                this.hideOverlay();
-                this.loadSessions();
-                this.requestUsageStats();
-                if (this.sessionTabManager && this.currentClaudeSessionId) {
-                    this.sessionTabManager.updateTabStatus(this.currentClaudeSessionId, 'active');
-                }
-                break;
             case 'gemini_started':
+            case 'terminal_started': {
                 if (this._startToolTimeout) { clearTimeout(this._startToolTimeout); this._startToolTimeout = null; }
                 this.hideOverlay();
                 this.loadSessions();
                 this.requestUsageStats();
                 if (this.sessionTabManager && this.currentClaudeSessionId) {
                     this.sessionTabManager.updateTabStatus(this.currentClaudeSessionId, 'active');
+                    // Extract tool type from message type (e.g. 'claude_started' → 'claude')
+                    const toolType = message.type.replace('_started', '');
+                    this.sessionTabManager.setTabToolType(this.currentClaudeSessionId, toolType === 'agent' ? 'claude' : toolType);
                 }
                 break;
-            case 'terminal_started':
-                if (this._startToolTimeout) { clearTimeout(this._startToolTimeout); this._startToolTimeout = null; }
-                this.hideOverlay();
-                this.loadSessions();
-                this.requestUsageStats();
-                if (this.sessionTabManager && this.currentClaudeSessionId) {
-                    this.sessionTabManager.updateTabStatus(this.currentClaudeSessionId, 'active');
-                }
-                break;
+            }
                 
             case 'claude_stopped':
                 this.terminal.writeln(`\r\n\x1b[33m${this.getAlias('claude')} stopped\x1b[0m`);
@@ -868,25 +834,35 @@ class ClaudeCodeWebInterface {
         container.innerHTML = '';
 
         const toolMeta = {
-            claude: { icon: 'C', color: '#ff6b00', desc: 'Anthropic' },
-            codex: { icon: 'Cx', color: '#10a37f', desc: 'OpenAI' },
-            copilot: { icon: 'Cp', color: '#8b5cf6', desc: 'GitHub' },
-            gemini: { icon: 'G', color: '#4285f4', desc: 'Google' },
-            terminal: { icon: '>_', color: '#8b949e', desc: 'Shell' }
+            claude: { icon: 'C', color: '#d97706', desc: 'Anthropic AI', hint: 'Install: npm i -g @anthropic-ai/claude-code' },
+            codex: { icon: 'Cx', color: '#059669', desc: 'OpenAI Codex', hint: 'Install: npm i -g @openai/codex' },
+            copilot: { icon: 'Cp', color: '#6366f1', desc: 'GitHub Copilot', hint: 'Install: gh extension install github/gh-copilot' },
+            gemini: { icon: 'G', color: '#2563eb', desc: 'Google Gemini', hint: 'Install: npm i -g @anthropic-ai/gemini-cli' },
+            terminal: { icon: '>_', color: '#71717a', desc: 'System Shell', hint: '' }
         };
 
+        let cardIndex = 0;
         for (const [toolId, tool] of Object.entries(this.tools)) {
-            const meta = toolMeta[toolId] || { icon: '?', color: '#888', desc: '' };
+            const meta = toolMeta[toolId] || { icon: '?', color: '#888', desc: '', hint: '' };
             const card = document.createElement('div');
             card.className = 'tool-card' + (tool.available ? '' : ' disabled');
+            // Staggered fade-in animation
+            card.style.animationDelay = `${cardIndex * 60}ms`;
+            card.classList.add('tool-card-enter');
+
+            const statusText = tool.available ? 'Start' : 'Not installed';
+            const hintHtml = !tool.available && meta.hint
+                ? `<div class="tool-card-hint">${meta.hint}</div>` : '';
+
             card.innerHTML = `
                 <div class="tool-card-icon" style="background: ${meta.color}">${meta.icon}</div>
                 <div class="tool-card-info">
                     <div class="tool-card-name">${tool.alias}</div>
                     <div class="tool-card-desc">${meta.desc}</div>
+                    ${hintHtml}
                 </div>
                 <button class="btn btn-primary tool-card-btn" ${tool.available ? '' : 'disabled'}>
-                    ${tool.available ? 'Start' : 'Not installed'}
+                    ${statusText}
                 </button>
             `;
             if (tool.available) {
@@ -895,6 +871,7 @@ class ClaudeCodeWebInterface {
                 });
             }
             container.appendChild(card);
+            cardIndex++;
         }
     }
 
@@ -983,6 +960,82 @@ class ClaudeCodeWebInterface {
         }
     }
 
+    setupTerminalSearch() {
+        const bar = document.getElementById('terminalSearchBar');
+        const input = document.getElementById('termSearchInput');
+        const countEl = document.getElementById('termSearchCount');
+        const prevBtn = document.getElementById('termSearchPrev');
+        const nextBtn = document.getElementById('termSearchNext');
+        const caseBtn = document.getElementById('termSearchCase');
+        const regexBtn = document.getElementById('termSearchRegex');
+        const closeBtn = document.getElementById('termSearchClose');
+        if (!bar || !input || !this.searchAddon) return;
+
+        let caseSensitive = false;
+        let useRegex = false;
+
+        const doSearch = (direction = 'next') => {
+            const query = input.value;
+            if (!query) { countEl.textContent = ''; return; }
+            const opts = { caseSensitive, regex: useRegex };
+            if (direction === 'prev') {
+                this.searchAddon.findPrevious(query, opts);
+            } else {
+                this.searchAddon.findNext(query, opts);
+            }
+        };
+
+        const openSearch = () => {
+            bar.style.display = 'flex';
+            input.focus();
+            input.select();
+        };
+
+        const closeSearch = () => {
+            bar.style.display = 'none';
+            input.value = '';
+            countEl.textContent = '';
+            this.searchAddon.clearDecorations();
+            this.terminal.focus();
+        };
+
+        // Ctrl+F opens search (capture phase to intercept before xterm)
+        document.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+                e.preventDefault();
+                e.stopPropagation();
+                openSearch();
+            }
+        }, true);
+
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                doSearch(e.shiftKey ? 'prev' : 'next');
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                closeSearch();
+            }
+        });
+
+        input.addEventListener('input', () => doSearch('next'));
+        prevBtn.addEventListener('click', () => doSearch('prev'));
+        nextBtn.addEventListener('click', () => doSearch('next'));
+        closeBtn.addEventListener('click', () => closeSearch());
+
+        caseBtn.addEventListener('click', () => {
+            caseSensitive = !caseSensitive;
+            caseBtn.classList.toggle('active', caseSensitive);
+            doSearch('next');
+        });
+
+        regexBtn.addEventListener('click', () => {
+            useRegex = !useRegex;
+            regexBtn.classList.toggle('active', useRegex);
+            doSearch('next');
+        });
+    }
+
     setupTerminalContextMenu() {
         const menu = document.getElementById('termContextMenu');
         if (!menu) return;
@@ -1198,7 +1251,15 @@ class ClaudeCodeWebInterface {
         document.getElementById('fontSize').value = settings.fontSize;
         document.getElementById('fontSizeValue').textContent = settings.fontSize + 'px';
         const themeSelect = document.getElementById('themeSelect');
-        if (themeSelect) themeSelect.value = settings.theme === 'light' ? 'light' : 'dark';
+        if (themeSelect) themeSelect.value = settings.theme || 'midnight';
+        const fontFamily = document.getElementById('fontFamily');
+        if (fontFamily) fontFamily.value = settings.fontFamily || "'MesloLGS Nerd Font', 'Meslo Nerd Font', monospace";
+        const cursorStyle = document.getElementById('cursorStyle');
+        if (cursorStyle) cursorStyle.value = settings.cursorStyle || 'block';
+        const cursorBlink = document.getElementById('cursorBlink');
+        if (cursorBlink) cursorBlink.checked = settings.cursorBlink ?? true;
+        const scrollback = document.getElementById('scrollback');
+        if (scrollback) scrollback.value = String(settings.scrollback || 1000);
         document.getElementById('showTokenStats').checked = settings.showTokenStats;
         document.getElementById('dangerousMode').checked = settings.dangerousMode || false;
     }
@@ -1215,8 +1276,12 @@ class ClaudeCodeWebInterface {
     loadSettings() {
         const defaults = {
             fontSize: 14,
+            fontFamily: "'MesloLGS Nerd Font', 'Meslo Nerd Font', monospace",
+            cursorStyle: 'block',
+            cursorBlink: true,
+            scrollback: 1000,
             showTokenStats: true,
-            theme: 'dark',
+            theme: 'midnight',
             dangerousMode: false
         };
         
@@ -1232,8 +1297,12 @@ class ClaudeCodeWebInterface {
     saveSettings() {
         const settings = {
             fontSize: parseInt(document.getElementById('fontSize').value),
+            fontFamily: document.getElementById('fontFamily')?.value || "'MesloLGS Nerd Font', 'Meslo Nerd Font', monospace",
+            cursorStyle: document.getElementById('cursorStyle')?.value || 'block',
+            cursorBlink: document.getElementById('cursorBlink')?.checked ?? true,
+            scrollback: parseInt(document.getElementById('scrollback')?.value || '1000'),
             showTokenStats: document.getElementById('showTokenStats').checked,
-            theme: (document.getElementById('themeSelect')?.value) || 'dark',
+            theme: (document.getElementById('themeSelect')?.value) || 'midnight',
             dangerousMode: document.getElementById('dangerousMode').checked
         };
         
@@ -1247,16 +1316,29 @@ class ClaudeCodeWebInterface {
     }
 
     applySettings(settings) {
-        // Token stats bar removed - no longer needed
-        // Apply theme (dark is default; light sets attribute)
-        if (settings.theme === 'light') {
-            document.documentElement.setAttribute('data-theme', 'light');
+        // Apply theme — 'midnight' is default (no attribute), others set data-theme
+        if (settings.theme && settings.theme !== 'midnight') {
+            document.documentElement.setAttribute('data-theme', settings.theme);
         } else {
             document.documentElement.removeAttribute('data-theme');
         }
 
+        // Apply terminal settings
         this.terminal.options.fontSize = settings.fontSize;
-        
+        if (settings.fontFamily) this.terminal.options.fontFamily = settings.fontFamily;
+        if (settings.cursorStyle) this.terminal.options.cursorStyle = settings.cursorStyle;
+        this.terminal.options.cursorBlink = settings.cursorBlink ?? true;
+        if (settings.scrollback) this.terminal.options.scrollback = settings.scrollback;
+
+        // Update terminal theme colors to match the current CSS theme
+        const style = getComputedStyle(document.documentElement);
+        this.terminal.options.theme = {
+            background: style.getPropertyValue('--terminal-bg').trim() || style.getPropertyValue('--surface-primary').trim(),
+            foreground: style.getPropertyValue('--terminal-fg').trim() || style.getPropertyValue('--text-primary').trim(),
+            cursor: style.getPropertyValue('--terminal-cursor').trim() || style.getPropertyValue('--accent-default').trim(),
+            selectionBackground: style.getPropertyValue('--terminal-selection').trim() || undefined,
+        };
+
         this.fitTerminal();
     }