shell-mirror 1.5.120 → 1.5.123

package/mac-agent/agent.js

@@ -61,6 +61,19 @@ if (process.env.WEBSOCKET_URL) {
 const shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
 logToFile(`🐚 Shell: ${shell}`);
 
+// Enable case-insensitive tab completion for shells
+function enableCaseInsensitiveCompletion(terminal, shellType) {
+  setTimeout(() => {
+    if (shellType === '/bin/zsh' || shellType.includes('zsh')) {
+      // For zsh: configure case-insensitive completion matcher
+      terminal.write('autoload -Uz compinit 2>/dev/null; compinit -i 2>/dev/null; zstyle \':completion:*\' matcher-list \'m:{a-zA-Z}={A-Za-z}\'; clear\n');
+    } else if (shellType.includes('bash')) {
+      // For bash: set completion-ignore-case
+      terminal.write('bind \'set completion-ignore-case on\' 2>/dev/null; clear\n');
+    }
+  }, 600); // After login scripts have run
+}
+
 // Circular buffer for session output persistence
 class CircularBuffer {
   constructor(size = 10000, maxTotalSize = 512 * 1024) { // 512KB max total size
@@ -235,6 +248,9 @@ class SessionManager {
       terminal.write('\n');
     }, 500);
 
+    // Enable case-insensitive tab completion
+    enableCaseInsensitiveCompletion(terminal, macShell);
+
     terminal.on('exit', (code) => {
       logToFile(`[SESSION] Terminal process exited for session ${sessionId} with code ${code}`);
       session.status = 'crashed';
@@ -1160,6 +1176,9 @@ function startLocalServer() {
               });
 
               logToFile(`[LOCAL] Created new direct session: ${sessionId}`);
+
+              // Enable case-insensitive tab completion for direct sessions
+              enableCaseInsensitiveCompletion(ptyProcess, shell);
             }
 
             localWs.send(JSON.stringify({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.120",
+  "version": "1.5.123",
   "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/dashboard.css

@@ -647,6 +647,125 @@ body {
     border-color: var(--accent);
 }
 
+/* Empty state - additional content */
+.empty-state-note {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    margin: 16px 0;
+    text-align: center;
+}
+
+.empty-state-troubleshooting {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border);
+}
+
+.troubleshooting-title {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    font-weight: 500;
+    display: block;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.empty-state-troubleshooting ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.empty-state-troubleshooting li {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    padding: 4px 0;
+    padding-left: 12px;
+    position: relative;
+}
+
+.empty-state-troubleshooting li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--text-muted);
+}
+
+/* Collapsible help section */
+.collapsible-help {
+    margin-top: 32px;
+    padding: 0 32px;
+}
+
+.help-toggle {
+    width: 100%;
+    background: transparent;
+    border: none;
+    padding: 12px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.help-toggle:hover {
+    color: var(--text-secondary);
+}
+
+.help-arrow {
+    transition: transform 0.2s ease;
+    color: var(--text-muted);
+}
+
+.help-arrow.rotated {
+    transform: rotate(180deg);
+}
+
+.help-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+.help-content.expanded {
+    max-height: 300px;
+    padding: 16px 0;
+}
+
+.help-step {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 12px;
+}
+
+.help-step-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-muted);
+}
+
+.help-step code {
+    background: var(--bg-tertiary);
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    display: inline-block;
+}
+
+.help-note {
+    color: var(--text-muted);
+    font-size: 0.7rem;
+    margin-top: 8px;
+    font-style: italic;
+}
+
 /* Modals */
 .modal-overlay {
     position: fixed;

package/public/app/dashboard.js

@@ -679,31 +679,7 @@ class ShellMirrorDashboard {
                         ${agentCount > 0 ? agentsHtml : this.renderEmptyAgentState()}
                     </div>
                 </div>
-                <div class="usage-instructions">
-                    <div class="usage-step">
-                        <span class="usage-step-num">1</span>
-                        <div class="usage-step-content">
-                            <span class="usage-step-title">Install the agent (on Mac)</span>
-                            <code>npm install -g shell-mirror</code>
-                        </div>
-                    </div>
-                    <div class="usage-step">
-                        <span class="usage-step-num">2</span>
-                        <div class="usage-step-content">
-                            <span class="usage-step-title">Run the agent</span>
-                            <code>shell-mirror</code>
-                        </div>
-                    </div>
-                    <p class="usage-note">The agent will automatically connect to your dashboard</p>
-                    <div class="usage-troubleshooting">
-                        <span class="usage-trouble-title">Troubleshooting</span>
-                        <ul>
-                            <li>Make sure you're logged in with the same Google account</li>
-                            <li>Check that the agent is running in your terminal</li>
-                            <li>Refresh this dashboard after starting the agent</li>
-                        </ul>
-                    </div>
-                </div>
+                ${agentCount > 0 ? this.renderCollapsibleHelp() : ''}
             </div>
         `;
     }
@@ -728,10 +704,57 @@ class ShellMirrorDashboard {
                         </div>
                     </div>
                 </div>
+                <p class="empty-state-note">The agent will automatically connect to your dashboard</p>
+                <div class="empty-state-troubleshooting">
+                    <span class="troubleshooting-title">Troubleshooting</span>
+                    <ul>
+                        <li>Make sure you're logged in with the same Google account</li>
+                        <li>Check that the agent is running in your terminal</li>
+                        <li>Refresh this dashboard after starting the agent</li>
+                    </ul>
+                </div>
+            </div>
+        `;
+    }
+
+    renderCollapsibleHelp() {
+        return `
+            <div class="collapsible-help">
+                <button class="help-toggle" onclick="dashboard.toggleHelp()">
+                    <span>Need help adding another agent?</span>
+                    <svg class="help-arrow" width="12" height="12" viewBox="0 0 12 12">
+                        <path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+                    </svg>
+                </button>
+                <div class="help-content" id="help-content">
+                    <div class="help-step">
+                        <span class="help-step-label">1. Install</span>
+                        <code>npm install -g shell-mirror</code>
+                    </div>
+                    <div class="help-step">
+                        <span class="help-step-label">2. Run</span>
+                        <code>shell-mirror</code>
+                    </div>
+                    <p class="help-note">The agent will automatically connect to your dashboard</p>
+                </div>
             </div>
         `;
     }
 
+    toggleHelp() {
+        const content = document.getElementById('help-content');
+        const arrow = document.querySelector('.help-arrow');
+        const isExpanded = content.classList.contains('expanded');
+
+        if (isExpanded) {
+            content.classList.remove('expanded');
+            arrow.classList.remove('rotated');
+        } else {
+            content.classList.add('expanded');
+            arrow.classList.add('rotated');
+        }
+    }
+
     renderQuickActions() {
         return `
             <div class="dashboard-card">

package/public/app/terminal.html

@@ -273,34 +273,35 @@
       #agent-id-input { font-size: 1.2em; padding: 8px; width: 400px; margin-bottom: 1em; }
       #connect-btn { font-size: 1.2em; padding: 10px 20px; }
 
-      /* Help Modal - Tab Navigation */
+      /* Help Modal - Tab Navigation (Dark Kraken Style) */
       .help-tabs {
         display: flex;
-        padding: 0 24px;
-        border-bottom: 1px solid #eee;
-        background: #f8f9fa;
+        padding: 0;
+        border-bottom: 1px solid #2a2b30;
+        background: #0a0b0d;
       }
 
       .help-tab {
+        flex: 1;
         padding: 12px 20px;
         background: transparent;
         border: none;
-        border-bottom: 3px solid transparent;
+        border-bottom: 2px solid transparent;
         cursor: pointer;
-        font-size: 0.9rem;
-        color: #666;
-        transition: all 0.2s ease;
+        font-size: 0.85rem;
+        color: #5a5f6a;
+        transition: all 0.15s ease;
       }
 
       .help-tab:hover {
-        color: #333;
-        background: rgba(102, 126, 234, 0.05);
+        color: #8a8f98;
+        background: #141519;
       }
 
       .help-tab.active {
-        color: #667eea;
-        border-bottom-color: #667eea;
-        font-weight: 600;
+        color: #fff;
+        border-bottom-color: #5d5fef;
+        font-weight: 500;
       }
 
       /* Help Modal - Tab Content */
@@ -385,66 +386,66 @@
         <div id="terminal"></div>
     </div>
     
-    <!-- Help Modal -->
-    <div id="help-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; z-index: 20000;">
-        <div style="background: white; border-radius: 12px; max-width: 600px; width: 90%; max-height: 80vh; overflow: hidden;">
+    <!-- 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);">
             <!-- Header -->
-            <div style="padding: 20px 24px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
-                <h3 style="margin: 0; font-size: 1.2rem; color: #333;">🚀 Shell Mirror Terminal</h3>
-                <button onclick="closeHelpModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #666;">×</button>
+            <div style="padding: 16px 20px; border-bottom: 1px solid #2a2b30; display: flex; justify-content: space-between; align-items: center;">
+                <h3 style="margin: 0; font-size: 1rem; color: #fff; font-weight: 600;">Shell Mirror Terminal</h3>
+                <button onclick="closeHelpModal()" style="background: none; border: none; font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; color: #5a5f6a; transition: all 0.15s;">×</button>
             </div>
 
             <!-- Tab Navigation -->
-            <div class="help-tabs">
-                <button class="help-tab active" onclick="showHelpTab('sessions')">Sessions</button>
-                <button class="help-tab" onclick="showHelpTab('help')">Troubleshooting</button>
+            <div class="help-tabs" style="display: flex; border-bottom: 1px solid #2a2b30; background: #0a0b0d;">
+                <button class="help-tab active" onclick="showHelpTab('sessions')" style="flex: 1; padding: 12px; background: none; border: none; color: #8a8f98; cursor: pointer; font-size: 0.85rem; border-bottom: 2px solid transparent;">Sessions</button>
+                <button class="help-tab" onclick="showHelpTab('help')" style="flex: 1; padding: 12px; background: none; border: none; color: #8a8f98; cursor: pointer; font-size: 0.85rem; border-bottom: 2px solid transparent;">Troubleshooting</button>
             </div>
 
             <!-- Tab Content -->
-            <div style="padding: 24px; max-height: 60vh; overflow-y: auto;">
+            <div style="padding: 20px; max-height: 60vh; overflow-y: auto; color: #8a8f98; font-size: 0.85rem;">
                 <!-- Sessions Tab -->
                 <div id="tab-sessions" class="help-tab-content active">
-                    <p style="margin-top: 0; margin-bottom: 16px;">Sessions let you run multiple terminals simultaneously.</p>
+                    <p style="margin-top: 0; margin-bottom: 16px; color: #8a8f98;">Sessions let you run multiple terminals simultaneously.</p>
 
-                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Creating</h4>
-                    <ul style="list-style: none; padding: 0; margin: 0;">
-                        <li>• Tap "Sessions" → "+ New Session"</li>
-                        <li>• Each session runs independently</li>
+                    <h4 style="margin-top: 16px; margin-bottom: 8px; color: #fff; font-size: 0.85rem; font-weight: 500;">Creating</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0; color: #5a5f6a;">
+                        <li style="padding: 3px 0;">• Tap "Sessions" → "+ New Session"</li>
+                        <li style="padding: 3px 0;">• Each session runs independently</li>
                     </ul>
 
-                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Switching</h4>
-                    <ul style="list-style: none; padding: 0; margin: 0;">
-                        <li>• Tap "Sessions" dropdown</li>
-                        <li>• Select any session</li>
-                        <li>• Your processes keep running in background</li>
+                    <h4 style="margin-top: 16px; margin-bottom: 8px; color: #fff; font-size: 0.85rem; font-weight: 500;">Switching</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0; color: #5a5f6a;">
+                        <li style="padding: 3px 0;">• Tap "Sessions" dropdown</li>
+                        <li style="padding: 3px 0;">• Select any session</li>
+                        <li style="padding: 3px 0;">• Your processes keep running in background</li>
                     </ul>
 
-                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Limits</h4>
-                    <ul style="list-style: none; padding: 0; margin: 0;">
-                        <li>• Max 10 sessions per Mac</li>
-                        <li>• Auto-deleted after 24h inactive</li>
+                    <h4 style="margin-top: 16px; margin-bottom: 8px; color: #fff; font-size: 0.85rem; font-weight: 500;">Limits</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0; color: #5a5f6a;">
+                        <li style="padding: 3px 0;">• Max 10 sessions per Mac</li>
+                        <li style="padding: 3px 0;">• Auto-deleted after 24h inactive</li>
                     </ul>
                 </div>
 
                 <!-- Troubleshooting Tab -->
                 <div id="tab-help" class="help-tab-content" style="display: none;">
-                    <h4 style="margin-top: 0; margin-bottom: 8px;">Connection stuck?</h4>
-                    <ul style="list-style: none; padding: 0; margin: 0 0 20px 0;">
-                        <li>• Wait 10 seconds for auto-retry</li>
-                        <li>• Still red? Return to Dashboard → Reconnect</li>
+                    <h4 style="margin-top: 0; margin-bottom: 8px; color: #fff; font-size: 0.85rem; font-weight: 500;">Connection stuck?</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0 0 16px 0; color: #5a5f6a;">
+                        <li style="padding: 3px 0;">• Wait 10 seconds for auto-retry</li>
+                        <li style="padding: 3px 0;">• Still red? Return to Dashboard → Reconnect</li>
                     </ul>
 
-                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Slow connection?</h4>
-                    <ul style="list-style: none; padding: 0; margin: 0 0 20px 0;">
-                        <li>• App tries: Local network → WebRTC → Fallback</li>
-                        <li>• First connect may take 30 seconds</li>
-                        <li>• WebRTC works best (100-500ms)</li>
+                    <h4 style="margin-top: 16px; margin-bottom: 8px; color: #fff; font-size: 0.85rem; font-weight: 500;">Slow connection?</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0 0 16px 0; color: #5a5f6a;">
+                        <li style="padding: 3px 0;">• App tries: Local network → WebRTC → Fallback</li>
+                        <li style="padding: 3px 0;">• First connect may take 30 seconds</li>
+                        <li style="padding: 3px 0;">• WebRTC works best (100-500ms)</li>
                     </ul>
 
-                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Behind corporate firewall?</h4>
-                    <ul style="list-style: none; padding: 0; margin: 0;">
-                        <li>• May need IT to whitelist STUN servers</li>
-                        <li>• Contact: stun.l.google.com port 19302</li>
+                    <h4 style="margin-top: 16px; margin-bottom: 8px; color: #fff; font-size: 0.85rem; font-weight: 500;">Behind corporate firewall?</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0; color: #5a5f6a;">
+                        <li style="padding: 3px 0;">• May need IT to whitelist STUN servers</li>
+                        <li style="padding: 3px 0;">• Contact: stun.l.google.com port 19302</li>
                     </ul>
                 </div>
             </div>