shell-mirror 1.5.119 → 1.5.122

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.119",
+  "version": "1.5.122",
   "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

@@ -1042,8 +1042,8 @@ body {
 
 /* Usage Instructions - muted helper section (borderless, floating) */
 .usage-instructions {
-    margin-top: 24px;
-    padding: 0 16px;
+    margin-top: 48px;
+    padding: 0 32px;
     color: var(--text-muted);
     font-size: 0.8rem;
 }

package/public/app/dashboard.js

@@ -683,7 +683,7 @@ class ShellMirrorDashboard {
                     <div class="usage-step">
                         <span class="usage-step-num">1</span>
                         <div class="usage-step-content">
-                            <span class="usage-step-title">Install the agent</span>
+                            <span class="usage-step-title">Install the agent (on Mac)</span>
                             <code>npm install -g shell-mirror</code>
                         </div>
                     </div>

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>