shell-mirror 1.5.129 → 1.5.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.129",
+  "version": "1.5.131",
   "description": "Access your Mac shell from any device securely. Perfect for mobile coding with Claude Code CLI, Gemini CLI, and any shell tool.",
   "main": "server.js",
   "bin": {

package/public/app/terminal.html

@@ -370,6 +370,151 @@
           white-space: nowrap;
         }
       }
+
+      /* ========================================
+         Floating Buttons - Mobile CLI Shortcuts
+         ======================================== */
+      .floating-buttons {
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        gap: 0;
+      }
+
+      /* Toggle button (collapse/expand) */
+      .fab-toggle {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: rgba(20, 21, 25, 0.95);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        border: 1px solid #2a2b30;
+        color: #fff;
+        font-size: 18px;
+        cursor: pointer;
+        flex-shrink: 0;
+        margin-right: 4px;
+      }
+
+      .fab-toggle:active {
+        background: #22232a;
+      }
+
+      /* Scroll indicators */
+      .fab-scroll {
+        width: 28px;
+        height: 48px;
+        background: rgba(20, 21, 25, 0.9);
+        border: none;
+        color: #8a8f98;
+        font-size: 22px;
+        font-weight: 300;
+        cursor: pointer;
+        flex-shrink: 0;
+        opacity: 0.8;
+        transition: opacity 0.15s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .fab-scroll:active { opacity: 1; background: #22232a; }
+      .fab-scroll.hidden { opacity: 0; pointer-events: none; width: 0; }
+
+      .fab-scroll-left {
+        border-radius: 10px 0 0 10px;
+        border: 1px solid #2a2b30;
+        border-right: none;
+      }
+      .fab-scroll-right {
+        border-radius: 0 10px 10px 0;
+        border: 1px solid #2a2b30;
+        border-left: none;
+      }
+
+      /* Scrollable button strip */
+      .fab-strip {
+        display: flex;
+        gap: 6px;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        -webkit-overflow-scrolling: touch;
+        padding: 6px 10px;
+        background: rgba(20, 21, 25, 0.95);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        border-top: 1px solid #2a2b30;
+        border-bottom: 1px solid #2a2b30;
+        max-width: calc(100vw - 130px);
+        scrollbar-width: none;
+        transition: max-width 0.2s, opacity 0.2s, padding 0.2s;
+      }
+
+      .fab-strip::-webkit-scrollbar { display: none; }
+
+      /* Collapsed state */
+      .floating-buttons.collapsed .fab-strip,
+      .floating-buttons.collapsed .fab-scroll {
+        max-width: 0;
+        width: 0;
+        padding: 0;
+        opacity: 0;
+        overflow: hidden;
+        border: none;
+      }
+
+      /* Individual buttons */
+      .fab-btn {
+        flex-shrink: 0;
+        min-width: 48px;
+        height: 44px;
+        padding: 0 12px;
+        border-radius: 8px;
+        background: #1a1b20;
+        color: #fff;
+        border: 1px solid #2a2b30;
+        font-size: 13px;
+        font-weight: 600;
+        scroll-snap-align: center;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: background 0.1s;
+      }
+
+      .fab-btn:active { background: #22232a; }
+
+      /* Highlight most critical button (Mode switcher) */
+      .fab-btn.fab-primary {
+        background: #5d5fef;
+        border-color: #5d5fef;
+      }
+
+      .fab-btn.fab-primary:active {
+        background: #4a4cd6;
+      }
+
+      /* Desktop: hide floating buttons */
+      @media (min-width: 1025px) {
+        .floating-buttons { display: none; }
+      }
+
+      /* Small phones: adjust sizing */
+      @media (max-width: 375px) {
+        .fab-btn {
+          min-width: 44px;
+          padding: 0 10px;
+          font-size: 12px;
+        }
+        .fab-strip {
+          max-width: calc(100vw - 110px);
+        }
+      }
     </style>
   </head>
   <body>
@@ -400,7 +545,44 @@
         </div>
         <div id="terminal"></div>
     </div>
-    
+
+    <!-- Floating Buttons - Mobile CLI Shortcuts -->
+    <div id="floating-buttons" class="floating-buttons">
+      <!-- Toggle button (collapse/expand) -->
+      <button class="fab-toggle" id="fabToggle" aria-label="Toggle keyboard shortcuts">
+        <span class="fab-toggle-icon">⌨</span>
+      </button>
+
+      <!-- Left scroll indicator -->
+      <button class="fab-scroll fab-scroll-left hidden" id="fabScrollLeft" aria-label="Scroll left">
+        <span>‹</span>
+      </button>
+
+      <!-- Scrollable button strip -->
+      <div class="fab-strip" id="fabStrip">
+        <!-- Control group (scroll left to reveal) -->
+        <button class="fab-btn" data-keys="ctrl+l" title="Clear screen">^L</button>
+        <button class="fab-btn" data-keys="ctrl+d" title="EOF/Exit">^D</button>
+        <button class="fab-btn" data-keys="ctrl+c" title="Interrupt">^C</button>
+
+        <!-- Primary group (default visible - AI CLI essentials) -->
+        <button class="fab-btn fab-primary" data-keys="shift+tab" title="Mode: Normal → Auto → Plan">⇧Tab</button>
+        <button class="fab-btn" data-keys="tab" title="Autocomplete / Thinking">Tab</button>
+        <button class="fab-btn" data-keys="up" data-repeat="true" title="History up">↑</button>
+        <button class="fab-btn" data-keys="down" data-repeat="true" title="History down">↓</button>
+        <button class="fab-btn" data-keys="escape" title="Cancel / Rewind (2x)">Esc</button>
+
+        <!-- Navigation group (scroll right to reveal) -->
+        <button class="fab-btn" data-keys="left" title="Cursor left">←</button>
+        <button class="fab-btn" data-keys="right" title="Cursor right">→</button>
+      </div>
+
+      <!-- Right scroll indicator -->
+      <button class="fab-scroll fab-scroll-right" id="fabScrollRight" aria-label="Scroll right">
+        <span>›</span>
+      </button>
+    </div>
+
     <!-- Help Modal (Dark Kraken Style) -->
     <div id="help-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; z-index: 20000;">
         <div style="background: #141519; border-radius: 8px; max-width: 500px; width: 90%; max-height: 80vh; overflow: hidden; border: 1px solid #2a2b30; box-shadow: 0 8px 32px rgba(0,0,0,0.5);">

package/public/app/terminal.js

@@ -1388,19 +1388,19 @@ function saveSessionToLocalStorage(agentId, sessionInfo) {
         console.log('[CLIENT] 🔍 DEBUG: Saving session to localStorage');
         console.log('[CLIENT] 🔍 DEBUG: AgentID:', agentId);
         console.log('[CLIENT] 🔍 DEBUG: SessionInfo:', sessionInfo);
-        
+
         const storedSessions = localStorage.getItem('shell-mirror-sessions');
         console.log('[CLIENT] 🔍 DEBUG: Current stored sessions:', storedSessions);
-        
+
         let sessionData = storedSessions ? JSON.parse(storedSessions) : {};
-        
+
         if (!sessionData[agentId]) {
             sessionData[agentId] = [];
         }
-        
+
         // Remove existing session with same ID
         sessionData[agentId] = sessionData[agentId].filter(s => s.id !== sessionInfo.id);
-        
+
         // Add updated session info
         const sessionToStore = {
             id: sessionInfo.id,
@@ -1409,9 +1409,9 @@ function saveSessionToLocalStorage(agentId, sessionInfo) {
             createdAt: sessionInfo.createdAt || Date.now(),
             status: 'active'
         };
-        
+
         sessionData[agentId].push(sessionToStore);
-        
+
         localStorage.setItem('shell-mirror-sessions', JSON.stringify(sessionData));
         console.log('[CLIENT] 💾 Session saved to storage:', sessionToStore);
 
@@ -1431,4 +1431,163 @@ function saveSessionToLocalStorage(agentId, sessionInfo) {
     } catch (error) {
         console.error('[CLIENT] ❌ Error saving session to storage:', error);
     }
-}
+}
+
+// ========================================
+// Floating Buttons - Mobile CLI Shortcuts
+// ========================================
+
+const fabKeyMap = {
+    'shift+tab': '\x1b[Z',   // Shift+Tab - MODE SWITCHING (most critical!)
+    'tab': '\t',             // Tab - autocomplete + thinking toggle
+    'escape': '\x1b',        // Esc - cancel (double = rewind)
+    'up': '\x1b[A',          // ↑ - history up
+    'down': '\x1b[B',        // ↓ - history down
+    'left': '\x1b[D',        // ← - cursor left
+    'right': '\x1b[C',       // → - cursor right
+    'ctrl+c': '\x03',        // ^C - interrupt
+    'ctrl+d': '\x04',        // ^D - EOF/exit
+    'ctrl+l': '\x0c',        // ^L - clear screen
+};
+
+function initFloatingButtons() {
+    const container = document.getElementById('floating-buttons');
+    const toggle = document.getElementById('fabToggle');
+    const strip = document.getElementById('fabStrip');
+    const scrollLeft = document.getElementById('fabScrollLeft');
+    const scrollRight = document.getElementById('fabScrollRight');
+
+    if (!container || !toggle || !strip) {
+        console.log('[CLIENT] ⌨️ Floating buttons not found in DOM');
+        return;
+    }
+
+    console.log('[CLIENT] ⌨️ Initializing floating buttons for mobile CLI shortcuts');
+
+    // Toggle collapse/expand
+    toggle.addEventListener('click', () => {
+        container.classList.toggle('collapsed');
+        localStorage.setItem('fab-collapsed', container.classList.contains('collapsed'));
+    });
+
+    // Restore saved collapsed state
+    if (localStorage.getItem('fab-collapsed') === 'true') {
+        container.classList.add('collapsed');
+    }
+
+    // Scroll indicator click handlers
+    const scrollAmount = 150; // pixels per click
+
+    if (scrollLeft) {
+        scrollLeft.addEventListener('click', () => {
+            strip.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+        });
+    }
+
+    if (scrollRight) {
+        scrollRight.addEventListener('click', () => {
+            strip.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+        });
+    }
+
+    // Update scroll indicator visibility based on scroll position
+    function updateScrollIndicators() {
+        if (!scrollLeft || !scrollRight) return;
+
+        const atStart = strip.scrollLeft <= 5;
+        const atEnd = strip.scrollLeft >= strip.scrollWidth - strip.clientWidth - 5;
+
+        scrollLeft.classList.toggle('hidden', atStart);
+        scrollRight.classList.toggle('hidden', atEnd);
+    }
+
+    strip.addEventListener('scroll', updateScrollIndicators);
+
+    // Button click handlers - send key sequences to terminal
+    document.querySelectorAll('.fab-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.preventDefault();
+            const keys = btn.dataset.keys;
+            if (keys && fabKeyMap[keys]) {
+                // Send the key sequence through the terminal input handler
+                sendFabKey(fabKeyMap[keys]);
+                term.focus();
+            }
+        });
+    });
+
+    // Long-press repeat for arrow keys
+    initFabLongPress();
+
+    // Scroll to show primary buttons (⇧Tab visible on left)
+    setTimeout(() => {
+        const modeBtn = strip.querySelector('[data-keys="shift+tab"]');
+        if (modeBtn) {
+            strip.scrollLeft = modeBtn.offsetLeft - 10;
+        }
+        updateScrollIndicators();
+    }, 100);
+
+    console.log('[CLIENT] ⌨️ Floating buttons initialized');
+}
+
+// Send key sequence through the appropriate connection
+function sendFabKey(keySequence) {
+    // Use the same logic as term.onData - send through WebRTC or direct WS
+    if (dataChannel && dataChannel.readyState === 'open') {
+        dataChannel.send(JSON.stringify({ type: 'input', data: keySequence }));
+    } else if (ws && ws.readyState === WebSocket.OPEN && currentSession) {
+        ws.send(JSON.stringify({
+            type: 'input',
+            sessionId: currentSession.id,
+            data: keySequence
+        }));
+    }
+}
+
+// Long-press support for arrow buttons (↑/↓)
+function initFabLongPress() {
+    document.querySelectorAll('.fab-btn[data-repeat="true"]').forEach(btn => {
+        let interval = null;
+        let timeout = null;
+
+        const startRepeat = () => {
+            const keys = btn.dataset.keys;
+            if (!keys || !fabKeyMap[keys]) return;
+
+            // First key immediately
+            sendFabKey(fabKeyMap[keys]);
+            term.focus();
+
+            // Then repeat after delay
+            timeout = setTimeout(() => {
+                interval = setInterval(() => {
+                    sendFabKey(fabKeyMap[keys]);
+                }, 100); // Repeat every 100ms
+            }, 300); // Start repeating after 300ms hold
+        };
+
+        const stopRepeat = () => {
+            if (timeout) clearTimeout(timeout);
+            if (interval) clearInterval(interval);
+            timeout = null;
+            interval = null;
+        };
+
+        // Touch events for mobile
+        btn.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            startRepeat();
+        });
+        btn.addEventListener('touchend', stopRepeat);
+        btn.addEventListener('touchcancel', stopRepeat);
+
+        // Mouse events for testing on desktop
+        btn.addEventListener('mousedown', startRepeat);
+        btn.addEventListener('mouseup', stopRepeat);
+        btn.addEventListener('mouseleave', stopRepeat);
+    });
+}
+
+// Initialize floating buttons when DOM is ready
+document.addEventListener('DOMContentLoaded', initFloatingButtons);

package/public/index.html

@@ -53,6 +53,20 @@
     </script>
     
     <style>
+        :root {
+            --bg-primary: #0a0b0d;
+            --bg-secondary: #141519;
+            --bg-tertiary: #1a1b20;
+            --bg-hover: #22232a;
+            --text-primary: #ffffff;
+            --text-secondary: #8a8f98;
+            --text-muted: #5a5f6a;
+            --accent: #5d5fef;
+            --accent-hover: #4a4cd6;
+            --success: #00c853;
+            --border: #2a2b30;
+        }
+
         * {
             margin: 0;
             padding: 0;
@@ -62,8 +76,8 @@
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             line-height: 1.6;
-            color: #333;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: var(--text-primary);
+            background: var(--bg-primary);
             min-height: 100vh;
         }
 
@@ -75,9 +89,11 @@
 
         /* Header */
         header {
-            padding: 20px 0;
+            padding: 16px 0;
             position: relative;
             z-index: 100;
+            background: var(--bg-secondary);
+            border-bottom: 1px solid var(--border);
         }
 
         nav {
@@ -87,46 +103,44 @@
         }
 
         .logo {
-            font-size: 24px;
-            font-weight: bold;
-            color: white;
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: var(--text-primary);
         }
 
         .cta-button {
-            background: rgba(255, 255, 255, 0.2);
+            background: var(--accent);
             color: white;
-            padding: 12px 24px;
+            padding: 10px 20px;
             text-decoration: none;
-            border-radius: 25px;
+            border-radius: 6px;
             font-weight: 500;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            transition: all 0.3s ease;
+            border: none;
+            transition: all 0.15s ease;
         }
 
         .cta-button:hover {
-            background: rgba(255, 255, 255, 0.3);
-            transform: translateY(-2px);
+            background: var(--accent-hover);
         }
 
         /* Hero Section */
         .hero {
             text-align: center;
             padding: 60px 0 80px;
-            color: white;
+            color: var(--text-primary);
         }
 
         .hero h1 {
-            font-size: clamp(2.5rem, 5vw, 4rem);
-            font-weight: 700;
-            margin-bottom: 20px;
+            font-size: clamp(2rem, 4vw, 3rem);
+            font-weight: 600;
+            margin-bottom: 16px;
             line-height: 1.2;
         }
 
         .hero p {
-            font-size: clamp(1.1rem, 2vw, 1.3rem);
+            font-size: clamp(1rem, 1.5vw, 1.1rem);
             margin-bottom: 40px;
-            opacity: 0.9;
+            color: var(--text-secondary);
             max-width: 600px;
             margin-left: auto;
             margin-right: auto;
@@ -134,45 +148,43 @@
 
         .hero-buttons {
             display: flex;
-            gap: 20px;
+            gap: 16px;
             justify-content: center;
             flex-wrap: wrap;
             margin-bottom: 60px;
         }
 
         .btn-primary {
-            background: #4285F4;
+            background: var(--accent);
             color: white;
-            padding: 16px 32px;
+            padding: 14px 28px;
             text-decoration: none;
-            border-radius: 30px;
-            font-weight: 600;
-            font-size: 1.1rem;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
+            border-radius: 6px;
+            font-weight: 500;
+            font-size: 1rem;
+            transition: all 0.15s ease;
+            border: none;
         }
 
         .btn-primary:hover {
-            background: #3367d6;
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
+            background: var(--accent-hover);
         }
 
         .btn-secondary {
             background: transparent;
-            color: white;
-            padding: 16px 32px;
+            color: var(--text-primary);
+            padding: 14px 28px;
             text-decoration: none;
-            border-radius: 30px;
-            font-weight: 600;
-            font-size: 1.1rem;
-            border: 2px solid white;
-            transition: all 0.3s ease;
+            border-radius: 6px;
+            font-weight: 500;
+            font-size: 1rem;
+            border: 1px solid var(--border);
+            transition: all 0.15s ease;
         }
 
         .btn-secondary:hover {
-            background: white;
-            color: #667eea;
+            background: var(--bg-hover);
+            border-color: var(--text-muted);
         }
 
         /* Setup Steps */
@@ -181,42 +193,45 @@
             max-width: 600px;
             display: flex;
             flex-direction: column;
-            gap: 20px;
+            gap: 16px;
         }
 
         .setup-step {
             display: flex;
             align-items: center;
-            gap: 20px;
+            gap: 16px;
         }
 
         .step-number {
-            font-size: 2rem;
-            font-weight: bold;
-            color: white;
-            opacity: 0.8;
-            min-width: 40px;
-            text-align: center;
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--text-muted);
+            min-width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: var(--bg-tertiary);
+            border-radius: 50%;
         }
 
         /* Installation Code */
         .install-code {
-            background: rgba(0, 0, 0, 0.3);
-            padding: 20px;
-            border-radius: 15px;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            background: var(--bg-tertiary);
+            padding: 16px 20px;
+            border-radius: 6px;
+            border: 1px solid var(--border);
             position: relative;
             flex: 1;
-            height: 60px;
+            height: 56px;
             display: flex;
             align-items: center;
         }
 
         .install-code pre {
-            color: #00ff88;
+            color: var(--success);
             font-family: 'Monaco', 'Menlo', monospace;
-            font-size: 1.1rem;
+            font-size: 0.95rem;
             margin: 0;
             padding-right: 40px;
             flex: 1;
@@ -224,21 +239,23 @@
 
         .copy-btn {
             position: absolute;
-            right: 15px;
+            right: 12px;
             top: 50%;
             transform: translateY(-50%);
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 8px;
-            padding: 8px;
-            color: white;
+            background: var(--bg-hover);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            padding: 6px 10px;
+            color: var(--text-secondary);
             cursor: pointer;
-            transition: all 0.2s ease;
+            transition: all 0.15s ease;
+            font-size: 0.75rem;
         }
 
         .copy-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: translateY(-50%) scale(1.05);
+            background: var(--accent);
+            border-color: var(--accent);
+            color: white;
         }
 
         .copy-btn:active {
@@ -253,31 +270,27 @@
         .btn-google {
             background: white;
             color: #3c4043;
-            padding: 20px 24px;
-            border: 1px solid #dadce0;
-            border-radius: 15px;
+            padding: 16px 20px;
+            border: none;
+            border-radius: 6px;
             font-weight: 500;
-            font-size: 1rem;
+            font-size: 0.95rem;
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 12px;
-            transition: all 0.2s ease;
+            gap: 10px;
+            transition: all 0.15s ease;
             cursor: pointer;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
             flex: 1;
-            height: 60px;
+            height: 56px;
         }
 
         .btn-google:hover {
-            background: #f8f9fa;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-            /* transform: translateY(-1px); */
+            background: #f0f0f0;
         }
 
         .btn-google:active {
-            transform: translateY(0);
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            transform: scale(0.98);
         }
 
         /* Installation Modal */
@@ -299,9 +312,10 @@
         }
 
         .install-modal-content {
-            background: white;
-            padding: 30px;
-            border-radius: 15px;
+            background: var(--bg-secondary);
+            padding: 24px;
+            border-radius: 8px;
+            border: 1px solid var(--border);
             max-width: 500px;
             margin: 20px;
             text-align: center;
@@ -309,23 +323,22 @@
         }
 
         .install-modal-content h3 {
-            color: #333;
-            margin-bottom: 20px;
+            color: var(--text-primary);
+            margin-bottom: 16px;
         }
 
         .install-modal-content p {
-            color: #666;
-            margin-bottom: 20px;
+            color: var(--text-secondary);
+            margin-bottom: 16px;
         }
 
         .install-modal-content .install-code {
-            background: #f5f5f5;
-            color: #333;
-            margin: 20px 0;
+            background: var(--bg-tertiary);
+            margin: 16px 0;
         }
 
         .install-modal-content .install-code pre {
-            color: #333;
+            color: var(--success);
         }
 
         .close-modal {
@@ -336,65 +349,70 @@
             border: none;
             font-size: 24px;
             cursor: pointer;
-            color: #666;
+            color: var(--text-muted);
         }
 
         .close-modal:hover {
-            color: #000;
+            color: var(--text-primary);
         }
 
         /* How It Works */
         .how-it-works {
-            background: white;
+            background: var(--bg-secondary);
             padding: 80px 0;
         }
 
         .section-title {
             text-align: center;
-            font-size: 2.5rem;
-            margin-bottom: 60px;
-            color: #333;
+            font-size: 1.75rem;
+            font-weight: 600;
+            margin-bottom: 48px;
+            color: var(--text-primary);
         }
 
         .steps {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 40px;
-            margin-bottom: 60px;
+            gap: 32px;
+            margin-bottom: 48px;
         }
 
         .step {
             text-align: center;
-            padding: 30px 20px;
+            padding: 24px 16px;
         }
 
         .step-icon {
-            width: 80px;
-            height: 80px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 56px;
+            height: 56px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            margin: 0 auto 20px;
-            font-size: 2rem;
-            color: white;
+            margin: 0 auto 16px;
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--text-secondary);
         }
 
         .step h3 {
-            font-size: 1.3rem;
-            margin-bottom: 15px;
-            color: #333;
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 12px;
+            color: var(--text-primary);
         }
 
         .step p {
-            color: #666;
+            color: var(--text-secondary);
             line-height: 1.6;
+            font-size: 0.95rem;
         }
 
         /* Security Section */
         .security {
-            background: #f8f9fa;
+            background: var(--bg-tertiary);
             padding: 80px 0;
         }
 
@@ -402,102 +420,118 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 30px;
+            gap: 24px;
             flex-wrap: wrap;
             margin: 40px 0;
         }
 
         .security-step {
-            background: white;
+            background: var(--bg-secondary);
             padding: 20px;
-            border-radius: 15px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            border-radius: 6px;
+            border: 1px solid var(--border);
             text-align: center;
-            min-width: 200px;
+            min-width: 180px;
         }
 
         .security-step h4 {
-            color: #4285F4;
-            margin-bottom: 10px;
+            color: var(--accent);
+            margin-bottom: 8px;
+            font-size: 0.95rem;
+        }
+
+        .security-step p {
+            color: var(--text-secondary);
+            font-size: 0.85rem;
         }
 
         .arrow {
-            font-size: 2rem;
-            color: #4285F4;
+            font-size: 1.5rem;
+            color: var(--text-muted);
         }
 
         /* Use Cases */
         .use-cases {
             padding: 80px 0;
-            background: white;
+            background: var(--bg-secondary);
         }
 
         .use-case-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
+            gap: 24px;
         }
 
         .use-case {
-            background: #f8f9fa;
-            padding: 30px;
-            border-radius: 15px;
-            border-left: 4px solid #4285F4;
+            background: var(--bg-tertiary);
+            padding: 24px;
+            border-radius: 6px;
+            border-left: 3px solid var(--accent);
         }
 
         .use-case h3 {
-            color: #333;
-            margin-bottom: 15px;
+            color: var(--text-primary);
+            margin-bottom: 12px;
+            font-size: 1rem;
+            font-weight: 600;
         }
 
         .use-case p {
-            color: #666;
+            color: var(--text-secondary);
+            font-size: 0.95rem;
         }
 
         /* Footer CTA */
         .footer-cta {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--bg-primary);
+            border-top: 1px solid var(--border);
             padding: 60px 0;
             text-align: center;
-            color: white;
+            color: var(--text-primary);
         }
 
         .footer-cta h2 {
-            font-size: 2.5rem;
-            margin-bottom: 20px;
+            font-size: 1.75rem;
+            font-weight: 600;
+            margin-bottom: 16px;
         }
 
         .footer-cta p {
-            font-size: 1.2rem;
-            margin-bottom: 40px;
-            opacity: 0.9;
+            font-size: 1rem;
+            margin-bottom: 32px;
+            color: var(--text-secondary);
         }
 
         /* Responsive Design */
         @media (max-width: 768px) {
             .setup-steps {
-                max-width: 90%;
-                gap: 15px;
+                max-width: 95%;
+                gap: 12px;
             }
 
             .setup-step {
-                gap: 15px;
+                gap: 12px;
             }
 
             .step-number {
-                font-size: 1.5rem;
-                min-width: 30px;
+                min-width: 28px;
+                height: 28px;
+                font-size: 0.85rem;
             }
 
             .install-code {
-                height: 50px;
-                padding: 15px;
+                height: 48px;
+                padding: 12px 16px;
+            }
+
+            .install-code pre {
+                font-size: 0.85rem;
             }
 
             .btn-google {
-                height: 50px;
-                padding: 15px 20px;
-                font-size: 0.9rem;
+                height: 48px;
+                padding: 12px 16px;
+                font-size: 0.85rem;
             }
 
             .hero-buttons {
@@ -506,7 +540,7 @@
             }
 
             .btn-primary {
-                width: 250px;
+                width: 240px;
             }
 
             .security-flow {
@@ -520,22 +554,24 @@
             .steps {
                 grid-template-columns: 1fr;
             }
-        }
 
-        /* Animations */
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
+            .section-title {
+                font-size: 1.5rem;
             }
-            to {
-                opacity: 1;
-                transform: translateY(0);
+
+            .hero h1 {
+                font-size: 1.75rem;
             }
         }
 
-        .hero, .step, .use-case {
-            animation: fadeInUp 0.6s ease-out;
+        /* Subtle animations */
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .hero {
+            animation: fadeIn 0.4s ease-out;
         }
     </style>
 </head>
@@ -554,8 +590,8 @@
                 <h1>Mirror your Mac terminal<br>to your phone</h1>
                 <p>Continue your Claude Code or Gemini CLI session on your phone or iPad while on the go.</p>
 
-                <p style="text-align: center; color: rgba(255, 255, 255, 0.95); font-size: 1.15rem; margin: 40px 0 30px; font-weight: 500;">
-                    Get started in 3 simple steps
+                <p style="text-align: center; color: var(--text-muted); font-size: 0.9rem; margin: 40px 0 24px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">
+                    Quick Setup
                 </p>
 
                 <div class="setup-steps">
@@ -612,19 +648,19 @@
                 
                 <div class="steps">
                     <div class="step">
-                        <div class="step-icon">🔐</div>
+                        <div class="step-icon">1</div>
                         <h3>Secure Login</h3>
                         <p>Sign in with your Google account. Your credentials are encrypted and secure.</p>
                     </div>
-                    
+
                     <div class="step">
-                        <div class="step-icon">🌐</div>
+                        <div class="step-icon">2</div>
                         <h3>Cloud Terminal</h3>
                         <p>Access a cloud-based terminal environment with all your favorite command-line tools pre-installed.</p>
                     </div>
-                    
+
                     <div class="step">
-                        <div class="step-icon">📱</div>
+                        <div class="step-icon">3</div>
                         <h3>Any Device</h3>
                         <p>Use from your phone, tablet, or any web browser. Your terminal is always accessible.</p>
                     </div>
@@ -636,7 +672,7 @@
         <section class="security" id="security">
             <div class="container">
                 <h2 class="section-title">Secure & Reliable</h2>
-                <p style="text-align: center; margin-bottom: 40px; color: #666; font-size: 1.1rem;">
+                <p style="text-align: center; margin-bottom: 40px; color: var(--text-secondary); font-size: 0.95rem;">
                     Enterprise-grade security with Google OAuth authentication.
                 </p>
                 
@@ -658,10 +694,12 @@
                 </div>
                 
                 <div style="text-align: center; margin-top: 40px;">
-                    <p style="color: #666;">✅ Encrypted connections (HTTPS/WSS)<br>
-                    ✅ Google-grade authentication<br>
-                    ✅ Session-based security<br>
-                    ✅ No local installation required</p>
+                    <p style="color: var(--text-muted); font-size: 0.9rem; line-height: 1.8;">
+                        Encrypted connections (HTTPS/WSS)<br>
+                        Google-grade authentication<br>
+                        Session-based security<br>
+                        No local installation required
+                    </p>
                 </div>
             </div>
         </section>
@@ -673,32 +711,32 @@
                 
                 <div class="use-case-grid">
                     <div class="use-case">
-                        <h3>🤖 Claude Code CLI</h3>
+                        <h3>Claude Code CLI</h3>
                         <p>Use Claude Code CLI from your phone. Run AI-powered coding commands using your own Claude API account.</p>
                     </div>
-                    
+
                     <div class="use-case">
-                        <h3>✨ Gemini CLI</h3>
+                        <h3>Gemini CLI</h3>
                         <p>Use Gemini CLI from your phone. Access Google's AI tools with your own Google account and API access.</p>
                     </div>
-                    
+
                     <div class="use-case">
-                        <h3>🔧 Standard Tools</h3>
+                        <h3>Standard Tools</h3>
                         <p>Git, npm, pip, Docker, SSH - all your usual command-line tools work normally from your phone.</p>
                     </div>
-                    
+
                     <div class="use-case">
-                        <h3>🔧 Quick Fixes</h3>
+                        <h3>Quick Fixes</h3>
                         <p>Fix bugs, check logs, or deploy code from your phone. Full access to your development environment.</p>
                     </div>
-                    
+
                     <div class="use-case">
-                        <h3>📱 Mobile Development</h3>
+                        <h3>Mobile Development</h3>
                         <p>Code during commutes or away from your desk. Follow tutorials and practice programming from your phone.</p>
                     </div>
-                    
+
                     <div class="use-case">
-                        <h3>🏠 Personal Projects</h3>
+                        <h3>Personal Projects</h3>
                         <p>Work on personal projects from anywhere. Your own computer, your own accounts, your own code.</p>
                     </div>
                 </div>
@@ -708,24 +746,20 @@
         <!-- Footer CTA -->
         <section class="footer-cta" id="get-started">
             <div class="container">
-                <h2>Ready to Start?</h2>
-                <p>Access your terminal from anywhere in seconds</p>
-                
-                <div style="margin-top: 40px;">
-                    <button class="btn-primary" onclick="handleGoogleLogin()" style="margin-right: 20px; padding: 20px 40px; font-size: 1.2rem;">Start Now</button>
+                <h2>Get Started</h2>
+                <p>Access your terminal from anywhere</p>
+
+                <div style="margin-top: 32px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
+                    <button class="btn-primary" onclick="handleGoogleLogin()" style="padding: 16px 32px;">Start Now</button>
                     <a href="https://github.com/karmalsky/shell-mirror" class="btn-secondary">View on GitHub</a>
                 </div>
-                
-                <p style="margin-top: 30px; opacity: 0.8; font-size: 0.9rem;">
-                    Free to use • Secure • No installation required
-                </p>
             </div>
         </section>
-        
+
         <!-- Version Footer -->
-        <footer style="background: #ff6b35; color: white; text-align: center; padding: 20px 0; font-size: 0.8rem;">
+        <footer style="background: var(--bg-secondary); color: var(--text-muted); text-align: center; padding: 16px 0; font-size: 0.75rem; border-top: 1px solid var(--border);">
             <div class="container">
-                <p id="version-info">Shell Mirror • Loading version...</p>
+                <p id="version-info">Shell Mirror</p>
             </div>
         </footer>
     </main>
@@ -797,17 +831,10 @@
                 const response = await fetch('/build-info.json');
                 const buildInfo = await response.json();
                 const versionElement = document.getElementById('version-info');
-                const footerElement = versionElement?.parentElement?.parentElement; // Get the footer element
-                
+
                 if (versionElement && buildInfo) {
                     const buildDate = new Date(buildInfo.buildTime).toLocaleDateString();
-                    versionElement.textContent = `Shell Mirror v${buildInfo.version} • Built ${buildDate}`;
-                    
-                    // Apply random footer color from build info
-                    if (footerElement && buildInfo.footerColor) {
-                        footerElement.style.background = buildInfo.footerColor;
-                        console.log(`🎨 Applied footer color: ${buildInfo.footerColor}`);
-                    }
+                    versionElement.textContent = `Shell Mirror v${buildInfo.version}`;
                 }
             } catch (error) {
                 console.log('Could not load build info:', error);
@@ -881,12 +908,12 @@
             // Update the Google login button in step 3 for authenticated users
             const googleButton = document.querySelector('.btn-google');
             if (googleButton && authStatus.isAuthenticated) {
-                googleButton.innerHTML = '📊 Enter Dashboard';
+                googleButton.innerHTML = 'Enter Dashboard';
                 googleButton.onclick = (e) => {
                     e.preventDefault();
                     openDashboard();
                 };
-                googleButton.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+                googleButton.style.background = 'var(--accent)';
                 googleButton.style.color = 'white';
                 googleButton.style.border = 'none';
             }
@@ -902,26 +929,23 @@
             });
         });
 
-        // Add intersection observer for animations
+        // Subtle fade-in for sections
         const observerOptions = {
             threshold: 0.1,
-            rootMargin: '0px 0px -50px 0px'
+            rootMargin: '0px 0px -20px 0px'
         };
 
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
                     entry.target.style.opacity = '1';
-                    entry.target.style.transform = 'translateY(0)';
                 }
             });
         }, observerOptions);
 
-        // Observe elements for animation
         document.querySelectorAll('.step, .use-case').forEach(el => {
             el.style.opacity = '0';
-            el.style.transform = 'translateY(30px)';
-            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+            el.style.transition = 'opacity 0.3s ease';
             observer.observe(el);
         });
     </script>