ai-or-die 0.1.75 → 0.1.76

package/package.json

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

package/src/public/app.js

@@ -191,6 +191,18 @@ class ClaudeCodeWebInterface {
         }
         
         await this.loadConfig();
+        // Apply per-machine identity (`[HOST] ai-or-die`) to the tab/window
+        // title, mobile menu header, aria-label, and PWA meta tags now that
+        // this.hostname is populated. Must run before the first notification
+        // flash, which saves/restores the then-current document.title.
+        if (window.AppIdentity) {
+            const identity = window.AppIdentity.formatAppIdentity({ hostname: this.hostname });
+            window.AppIdentity.applyAppIdentity(identity);
+            // Surface the machine identity on the start screen too.
+            const spIdText = document.getElementById('startPromptIdentityText');
+            const spId = document.getElementById('startPromptIdentity');
+            if (spIdText && spId) { spIdText.textContent = identity; spId.hidden = false; }
+        }
         this.setupTerminal();
         this._setupExtraKeys();
         this._setupOrientationHandler();
@@ -1929,19 +1941,34 @@ class ClaudeCodeWebInterface {
             });
         }
 
-        // Section collapse/expand (keyboard accessible)
-        modal.querySelectorAll('.setting-section-header').forEach((header) => {
-            const toggle = () => {
-                const section = header.parentElement;
-                const isCollapsed = section.classList.toggle('collapsed');
-                header.setAttribute('aria-expanded', String(!isCollapsed));
-            };
-            header.addEventListener('click', toggle);
-            header.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    toggle();
-                }
+        // Two-pane settings nav (ARIA tablist): switch panes, roving tabindex,
+        // arrow/Home/End keyboard support. Replaces the old collapsible sections.
+        const settingsTabs = Array.from(modal.querySelectorAll('.settings-tab'));
+        const selectSettingsTab = (tab, focus = true) => {
+            settingsTabs.forEach((t) => {
+                const selected = t === tab;
+                t.setAttribute('aria-selected', String(selected));
+                t.tabIndex = selected ? 0 : -1;
+                const pane = document.getElementById(t.getAttribute('aria-controls'));
+                if (pane) pane.hidden = !selected;
+            });
+            if (focus && tab) tab.focus();
+        };
+        settingsTabs.forEach((tab) => {
+            tab.addEventListener('click', () => selectSettingsTab(tab, false));
+            tab.addEventListener('keydown', (e) => {
+                // Navigate among VISIBLE tabs only (the Install tab is hidden
+                // when running as an installed PWA) so focus never lands on an
+                // invisible element and escapes the modal focus trap.
+                const visible = settingsTabs.filter((t) => t.style.display !== 'none' && !t.hidden);
+                const idx = visible.indexOf(tab);
+                if (idx === -1) return;
+                let next = null;
+                if (e.key === 'ArrowDown' || e.key === 'ArrowRight') next = visible[(idx + 1) % visible.length];
+                else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') next = visible[(idx - 1 + visible.length) % visible.length];
+                else if (e.key === 'Home') next = visible[0];
+                else if (e.key === 'End') next = visible[visible.length - 1];
+                if (next) { e.preventDefault(); selectSettingsTab(next); }
             });
         });
 
@@ -3917,11 +3944,15 @@ class ClaudeCodeWebInterface {
                 content.classList.remove('closing');
                 overlay.classList.remove('closing');
                 overlay.classList.remove('active');
-                overlay.style.display = 'none';
+                // Clear (don't set) the inline display so the modal hides via its
+                // base CSS rule (.<modal> { display: none }). Setting an inline
+                // display:none would win over `.active { display: flex }` and
+                // permanently block reopening the modal.
+                overlay.style.removeProperty('display');
             }, 150);
         } else {
             overlay.classList.remove('active');
-            overlay.style.display = 'none';
+            overlay.style.removeProperty('display');
         }
     }
 
@@ -4196,10 +4227,17 @@ class ClaudeCodeWebInterface {
         if (installBtn) installBtn.style.display = 'none';
         if (iosInstructions) iosInstructions.style.display = 'none';
 
-        // If running inside installed PWA, hide the entire section
-        const section = document.querySelector('[data-section="install"]');
-        if (section) {
-            section.style.display = this._isInstalled ? 'none' : '';
+        // If running inside an installed PWA, hide the Install tab + pane.
+        const installTab = document.getElementById('settingsTab-install');
+        const installPane = document.getElementById('settingsPane-install');
+        if (installTab) installTab.style.display = this._isInstalled ? 'none' : '';
+        if (installPane && this._isInstalled) installPane.hidden = true;
+        // If the Install tab was the active one and is now hidden, fall back to
+        // the first visible tab so the pane area is never left blank/unreachable.
+        if (this._isInstalled && installTab && installTab.getAttribute('aria-selected') === 'true') {
+            const firstVisible = Array.from(document.querySelectorAll('.settings-tab'))
+                .find((t) => t.style.display !== 'none');
+            if (firstVisible) firstVisible.click();
         }
 
         switch (this._installState) {

package/src/public/auth.js

@@ -133,7 +133,7 @@ class AuthManager {
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(0, 0, 0, 0.95);
+            background: var(--overlay-backdrop-strong, rgba(0, 0, 0, 0.95));
             display: flex;
             align-items: center;
             justify-content: center;
@@ -143,12 +143,12 @@ class AuthManager {
         const loginForm = document.createElement('div');
         loginForm.style.cssText = `
             background: var(--bg-secondary, #1c2128);
-            border: 1px solid var(--border-color, #30363d);
+            border: 1px solid var(--border-default, #30363d);
             border-radius: 12px;
             padding: 32px;
             max-width: 400px;
             width: 90%;
-            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
+            box-shadow: var(--shadow-xl);
         `;
 
         loginForm.innerHTML = `
@@ -157,7 +157,7 @@ class AuthManager {
                 Authentication Required
             </h2>
             <p style="color: var(--text-secondary, #8b949e); margin: 0 0 24px 0; font-size: 14px;">
-                This ai-or-die instance requires authentication.
+                This instance requires authentication.
             </p>
             <form id="auth-form">
                 <div style="margin-bottom: 16px;">
@@ -172,7 +172,7 @@ class AuthManager {
                             width: 100%;
                             padding: 10px 12px;
                             background: var(--bg-primary, #0d1117);
-                            border: 1px solid var(--border-color, #30363d);
+                            border: 1px solid var(--border-default, #30363d);
                             border-radius: 6px;
                             color: var(--text-primary, #f0f6fc);
                             font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'JetBrains Mono', monospace;
@@ -183,7 +183,7 @@ class AuthManager {
                         required
                     />
                 </div>
-                <div id="auth-error" style="color: #f85149; margin-bottom: 16px; font-size: 14px; display: none;"></div>
+                <div id="auth-error" style="color: var(--status-error, #f85149); margin-bottom: 16px; font-size: 14px; display: none;"></div>
                 <button 
                     type="submit"
                     style="

package/src/public/components/buttons.css

@@ -163,7 +163,7 @@
     border: 2px solid var(--border);
     border-radius: 50%;
     cursor: pointer;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--shadow-md);
     transition: all var(--duration-slow, 300ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
     width: 56px;
     height: 56px;
@@ -173,7 +173,7 @@
     background-color: var(--bg-tertiary);
     border-color: var(--accent);
     transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    box-shadow: var(--shadow-lg);
 }
 
 .mode-switcher-btn:active {
@@ -212,7 +212,7 @@
     border: 2px solid var(--error);
     border-radius: 50%;
     cursor: pointer;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--shadow-md);
     transition: all var(--duration-slow, 300ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
     width: 56px;
     height: 56px;
@@ -222,6 +222,7 @@
     background-color: var(--bg-tertiary);
     border-color: var(--color-red-400);
     transform: translateY(-2px);
+    /* Intentional red destructive-escape glow (not a neutral elevation shadow). */
     box-shadow: 0 6px 16px rgba(248, 113, 113, 0.2);
 }
 

package/src/public/components/cards.css

@@ -58,26 +58,26 @@
   transform: translateY(-1px);
 }
 
-/* Per-tool brand color hover tints */
+/* Per-tool brand color hover tints (tokens shared with the tab badges) */
 .tool-card[data-tool="terminal"]:hover:not(.disabled) {
-  border-color: rgba(113, 113, 122, 0.5);
-  background: rgba(113, 113, 122, 0.08);
+  border-color: rgba(var(--tool-terminal-rgb), 0.5);
+  background: rgba(var(--tool-terminal-rgb), 0.08);
 }
 .tool-card[data-tool="claude"]:hover:not(.disabled) {
-  border-color: rgba(217, 119, 6, 0.5);
-  background: rgba(217, 119, 6, 0.08);
+  border-color: rgba(var(--tool-claude-rgb), 0.5);
+  background: rgba(var(--tool-claude-rgb), 0.08);
 }
 .tool-card[data-tool="codex"]:hover:not(.disabled) {
-  border-color: rgba(5, 150, 105, 0.5);
-  background: rgba(5, 150, 105, 0.08);
+  border-color: rgba(var(--tool-codex-rgb), 0.5);
+  background: rgba(var(--tool-codex-rgb), 0.08);
 }
 .tool-card[data-tool="copilot"]:hover:not(.disabled) {
-  border-color: rgba(99, 102, 241, 0.5);
-  background: rgba(99, 102, 241, 0.08);
+  border-color: rgba(var(--tool-copilot-rgb), 0.5);
+  background: rgba(var(--tool-copilot-rgb), 0.08);
 }
 .tool-card[data-tool="gemini"]:hover:not(.disabled) {
-  border-color: rgba(37, 99, 235, 0.5);
-  background: rgba(37, 99, 235, 0.08);
+  border-color: rgba(var(--tool-gemini-rgb), 0.5);
+  background: rgba(var(--tool-gemini-rgb), 0.08);
 }
 
 /* Focus visible for keyboard navigation */
@@ -112,20 +112,20 @@
 
 /* Per-tool brand color hover for installable cards (softer than available) */
 .tool-card.installable[data-tool="claude"]:hover {
-  border-color: rgba(217, 119, 6, 0.3);
-  background: rgba(217, 119, 6, 0.04);
+  border-color: rgba(var(--tool-claude-rgb), 0.3);
+  background: rgba(var(--tool-claude-rgb), 0.04);
 }
 .tool-card.installable[data-tool="codex"]:hover {
-  border-color: rgba(5, 150, 105, 0.3);
-  background: rgba(5, 150, 105, 0.04);
+  border-color: rgba(var(--tool-codex-rgb), 0.3);
+  background: rgba(var(--tool-codex-rgb), 0.04);
 }
 .tool-card.installable[data-tool="copilot"]:hover {
-  border-color: rgba(99, 102, 241, 0.3);
-  background: rgba(99, 102, 241, 0.04);
+  border-color: rgba(var(--tool-copilot-rgb), 0.3);
+  background: rgba(var(--tool-copilot-rgb), 0.04);
 }
 .tool-card.installable[data-tool="gemini"]:hover {
-  border-color: rgba(37, 99, 235, 0.3);
-  background: rgba(37, 99, 235, 0.04);
+  border-color: rgba(var(--tool-gemini-rgb), 0.3);
+  background: rgba(var(--tool-gemini-rgb), 0.04);
 }
 
 /* Expanded state */
@@ -474,6 +474,30 @@
   margin-bottom: var(--space-2);
 }
 
+/* Machine-identity chip — reads like a live terminal status badge */
+.start-prompt-identity {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  background: var(--surface-secondary);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+}
+.start-prompt-identity[hidden] { display: none; }
+.start-prompt-identity-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--status-success);
+  flex: 0 0 auto;
+}
+
 /* Start prompt subtitle */
 .start-prompt-subtitle {
   color: var(--text-muted);