shell-mirror 1.5.123 → 1.5.125

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.123",
+  "version": "1.5.125",
   "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

@@ -363,7 +363,7 @@
         <p>Connecting to terminal...</p>
     </div>
     <div id="terminal-container">
-        <div class="session-header" id="session-header" style="display: none;">
+        <div class="session-header" id="session-header">
             <!-- Connection Status Indicator -->
             <div class="connection-status" id="connection-status"></div>
 

package/public/app/terminal.js

@@ -56,6 +56,10 @@ let currentSession = null;
 let availableSessions = [];
 let requestedSessionId = null; // For connecting to specific session from URL
 
+// Connection status messaging
+let connectionStatusMessage = 'Connecting to agent...';
+let connectionTimeoutWarning = null;
+
 // Chunk reassembly for large messages
 const chunkAssembler = {
     activeChunks: new Map(),
@@ -166,6 +170,30 @@ function updateConnectionStatus(status) {
     // else: disconnected (default red)
 }
 
+// Set connection status message (shown in tab bar when no sessions)
+function setConnectionMessage(message, writeToTerminal = true) {
+    connectionStatusMessage = message;
+    console.log('[CLIENT] 📢 Connection message:', message);
+
+    // Update the tab bar display
+    updateSessionDisplay();
+
+    // Optionally write to terminal for visibility
+    if (writeToTerminal && term) {
+        term.write(`\r\n\x1b[36m${message}\x1b[0m\r\n`); // Cyan color
+    }
+}
+
+// Clear connection timeout warnings (called when connection succeeds)
+function clearConnectionTimeouts() {
+    if (connectionTimeoutWarning) {
+        clearTimeout(connectionTimeoutWarning.timeout10s);
+        clearTimeout(connectionTimeoutWarning.timeout30s);
+        connectionTimeoutWarning = null;
+        console.log('[CLIENT] ✅ Connection timeout warnings cleared');
+    }
+}
+
 // Cleanup timer for chunk assembler
 setInterval(() => {
     chunkAssembler.cleanup();
@@ -243,7 +271,13 @@ function startConnection() {
     connectContainer.style.display = 'none';
     terminalContainer.classList.add('show');
     term.open(document.getElementById('terminal'));
-    
+
+    // Show initial connection message
+    setConnectionMessage('🔗 Connecting to agent...', true);
+
+    // Initialize session display (shows header with connection status even before session exists)
+    updateSessionDisplay();
+
     // Track terminal session start in Google Analytics
     if (typeof sendGAEvent === 'function') {
         sendGAEvent('terminal_session_start', {
@@ -259,6 +293,26 @@ function startConnection() {
         fitAddon.fit();
         term.focus(); // Ensure cursor is visible even before connection
     }, 100);
+
+    // Set up connection timeout warnings
+    const timeout10s = setTimeout(() => {
+        if (!currentSession) {
+            setConnectionMessage('⏱️ Taking longer than usual... Please wait', true);
+            term.write('\r\n\x1b[33m⏱️ Connection is taking longer than expected...\x1b[0m\r\n');
+        }
+    }, 10000);
+
+    const timeout30s = setTimeout(() => {
+        if (!currentSession) {
+            setConnectionMessage('⚠️ Connection very slow - Agent may be offline', true);
+            term.write('\x1b[33m⚠️ Still trying to connect. The agent may be offline or unreachable.\x1b[0m\r\n');
+            term.write('\x1b[36m💡 Tip: Check the agent status on the Dashboard\x1b[0m\r\n');
+        }
+    }, 30000);
+
+    // Store timeout IDs so they can be cleared on successful connection
+    connectionTimeoutWarning = { timeout10s, timeout30s };
+
     initialize();
 }
 
@@ -272,17 +326,20 @@ async function initialize() {
     
     if (directConnectionSuccess) {
         console.log('[CLIENT] ✅ Direct connection established - no server needed!');
+        setConnectionMessage('✅ Connected via local network!', true);
         return;
     }
-    
+
     console.log('[CLIENT] ⚠️ Direct connection failed, falling back to WebRTC signaling...');
+    setConnectionMessage('🌐 Attempting WebRTC connection...', true);
     await initializeWebRTCSignaling();
 }
 
 async function tryDirectConnection() {
     console.log('[CLIENT] 🔗 Attempting direct connection to agent...');
     updateConnectionStatus('connecting');
-    
+    setConnectionMessage('🔍 Trying direct connection to local network...', true);
+
     // Get agent data from API to find local connection details
     try {
         const response = await fetch('/php-backend/api/agents-list.php', {
@@ -391,6 +448,10 @@ function setupDirectConnection(directWs) {
             case 'session_created':
                 console.log('[CLIENT] ✅ Direct session created:', data.sessionId);
 
+                // Clear connection timeout warnings
+                clearConnectionTimeouts();
+                setConnectionMessage('✅ Session created successfully!', false);
+
                 // Update current session
                 currentSession = {
                     id: data.sessionId,
@@ -567,6 +628,10 @@ async function initializeWebRTCSignaling() {
 
                             // Handle session assignment from agent
                             if (nextData.sessionId) {
+                                // Clear connection timeout warnings
+                                clearConnectionTimeouts();
+                                setConnectionMessage('✅ Session connected!', false);
+
                                 currentSession = {
                                     id: nextData.sessionId,
                                     name: nextData.sessionName || 'Terminal Session',
@@ -574,7 +639,7 @@ async function initializeWebRTCSignaling() {
                                 };
                                 console.log('[CLIENT] 📋 Session assigned:', currentSession);
                                 console.log('[CLIENT] 🔍 Agent ID for storage:', AGENT_ID);
-                                
+
                                 // Update UI to show session info
                                 updateSessionDisplay();
                                 
@@ -790,6 +855,7 @@ async function createPeerConnection() {
                 console.log('[CLIENT] ❌ ICE connection failed - no viable candidates');
                 console.log('[CLIENT] 💡 Troubleshooting: This may be due to firewall/NAT issues or blocked STUN servers');
                 updateConnectionStatus('disconnected');
+                setConnectionMessage('❌ Unable to connect - Agent may be offline', false);
                 term.write('\r\n\r\n❌ Connection failed: Network connectivity issues\r\n');
                 term.write('💡 This may be due to:\r\n');
                 term.write('  • Firewall blocking WebRTC traffic\r\n');
@@ -955,14 +1021,14 @@ function updateSessionDisplay() {
         return;
     }
 
-    if (currentSession) {
-        sessionHeader.style.display = 'flex';
-
-        // Update tabs
-        console.log('[CLIENT] 📋 Rendering tabs, availableSessions:', availableSessions);
-        renderTabs();
+    // Always render tabs (they will show appropriate state even if no sessions)
+    console.log('[CLIENT] 📋 Rendering tabs, availableSessions:', availableSessions, 'currentSession:', currentSession);
+    renderTabs();
 
+    if (currentSession) {
         console.log('[CLIENT] 📋 Session display updated:', currentSession);
+    } else {
+        console.log('[CLIENT] 📋 No current session - showing connection state only');
     }
 }
 
@@ -1036,10 +1102,13 @@ function renderTabs() {
                 </div>
             `;
         }).join('');
-    }
 
-    // Add new session button
-    tabsHTML += '<button class="session-tab-new" onclick="createNewSession()" title="New Session">+</button>';
+        // Add new session button only when we have sessions
+        tabsHTML += '<button class="session-tab-new" onclick="createNewSession()" title="New Session">+</button>';
+    } else {
+        // No sessions - show connection status message
+        tabsHTML = `<div style="color: #888; font-size: 0.85rem; padding: 6px 12px;">${connectionStatusMessage}</div>`;
+    }
 
     tabBar.innerHTML = tabsHTML;
     console.log('[CLIENT] ✅ Tabs rendered:', sessionsToRender.length, 'tabs');