shell-mirror 1.5.38 → 1.5.40

package/mac-agent/agent.js

@@ -212,6 +212,11 @@ async function createPeerConnection(clientId) {
   };
 
   peerConnection.oniceconnectionstatechange = () => {
+    if (!peerConnection) {
+      logToFile('[AGENT] ⚠️ ICE connection state change after peerConnection was closed');
+      return;
+    }
+    
     logToFile(`[AGENT] 📊 ICE connection state changed: ${peerConnection.iceConnectionState}`);
     logToFile(`[AGENT] 📊 ICE gathering state: ${peerConnection.iceGatheringState}`);
     
@@ -243,6 +248,11 @@ async function createPeerConnection(clientId) {
   };
 
   peerConnection.onconnectionstatechange = () => {
+    if (!peerConnection) {
+      logToFile('[AGENT] ⚠️ Connection state change after peerConnection was closed');
+      return;
+    }
+    
     logToFile(`[AGENT] 📡 Connection state changed: ${peerConnection.connectionState}`);
     
     switch (peerConnection.connectionState) {
@@ -268,6 +278,11 @@ async function createPeerConnection(clientId) {
   };
 
   peerConnection.onicegatheringstatechange = () => {
+    if (!peerConnection) {
+      logToFile('[AGENT] ⚠️ ICE gathering state change after peerConnection was closed');
+      return;
+    }
+    
     logToFile(`[AGENT] 🔍 ICE gathering state changed: ${peerConnection.iceGatheringState}`);
     
     switch (peerConnection.iceGatheringState) {

package/package.json

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

@@ -294,6 +294,10 @@ body {
     border-bottom: 1px solid #f0f0f0;
 }
 
+.session-item.compact {
+    padding: 12px 0;
+}
+
 .session-item:last-child {
     border-bottom: none;
 }
@@ -345,6 +349,11 @@ body {
     color: #f57c00;
 }
 
+.session-status.disconnected {
+    background: #f5f5f5;
+    color: #666;
+}
+
 /* Empty States */
 .no-data {
     text-align: center;

package/public/app/dashboard.js

@@ -20,6 +20,7 @@ class ShellMirrorDashboard {
                 this.user = authStatus.user;
                 await this.loadDashboardData();
                 this.renderAuthenticatedDashboard();
+                this.startAutoRefresh(); // Start auto-refresh for authenticated users
             } else {
                 this.renderUnauthenticatedDashboard();
             }
@@ -31,6 +32,24 @@ class ShellMirrorDashboard {
         }
     }
 
+    startAutoRefresh() {
+        // Refresh agent data every 30 seconds to detect disconnected agents
+        this.refreshInterval = setInterval(async () => {
+            if (this.isAuthenticated) {
+                await this.loadDashboardData();
+                // Only re-render the agents section to avoid full page flash
+                this.updateAgentsDisplay();
+            }
+        }, 30000);
+    }
+
+    updateAgentsDisplay() {
+        const agentsCard = document.querySelector('.dashboard-card');
+        if (agentsCard) {
+            agentsCard.innerHTML = this.renderActiveAgents();
+        }
+    }
+
     showLoading() {
         document.getElementById('loading-overlay').style.display = 'flex';
     }
@@ -148,8 +167,14 @@ class ShellMirrorDashboard {
     }
 
     renderActiveAgents() {
-        const agentCount = this.agents.length;
-        const agentsHtml = this.agents.map(agent => `
+        // Filter for recently active agents (online or seen within last 5 minutes)
+        const activeAgents = this.agents.filter(agent => {
+            const timeSinceLastSeen = Date.now() / 1000 - agent.lastSeen;
+            return agent.onlineStatus === 'online' || timeSinceLastSeen < 300; // 5 minutes
+        });
+
+        const agentCount = activeAgents.length;
+        const agentsHtml = activeAgents.map(agent => `
             <div class="agent-item">
                 <div class="agent-info">
                     <div class="agent-name">${agent.machineName || agent.agentId}</div>
@@ -200,8 +225,31 @@ class ShellMirrorDashboard {
     }
 
     renderRecentSessions() {
-        const sessionsHtml = this.sessions.map(session => `
-            <div class="session-item">
+        // Get inactive agents (not seen in last 5 minutes and offline)
+        const inactiveAgents = this.agents.filter(agent => {
+            const timeSinceLastSeen = Date.now() / 1000 - agent.lastSeen;
+            return agent.onlineStatus === 'offline' && timeSinceLastSeen >= 300; // More than 5 minutes
+        });
+
+        // Combine real sessions with inactive agents as past connections
+        const allSessions = [
+            // Add inactive agents as past connections
+            ...inactiveAgents.map(agent => ({
+                type: 'past_agent',
+                agentId: agent.machineName || agent.agentId,
+                startTime: new Date(agent.lastSeen * 1000),
+                duration: 'Last connection',
+                status: 'disconnected'
+            })),
+            // Add actual session history
+            ...this.sessions
+        ];
+
+        // Sort by most recent
+        allSessions.sort((a, b) => b.startTime - a.startTime);
+
+        const sessionsHtml = allSessions.map(session => `
+            <div class="session-item compact">
                 <div class="session-info">
                     <div class="session-agent">${session.agentId}</div>
                     <div class="session-time">${this.formatDate(session.startTime)}</div>
@@ -217,7 +265,7 @@ class ShellMirrorDashboard {
             <div class="dashboard-card full-width">
                 <h2>📊 Recent Sessions</h2>
                 <div class="card-content">
-                    ${this.sessions.length > 0 ? sessionsHtml : '<p class="no-data">No recent sessions</p>'}
+                    ${allSessions.length > 0 ? sessionsHtml : '<p class="no-data">No recent sessions</p>'}
                 </div>
             </div>
         `;

package/public/app/terminal.html

@@ -35,7 +35,7 @@
       .back-to-dashboard {
         position: fixed;
         top: 20px;
-        left: 20px;
+        right: 20px;
         background: rgba(66, 133, 244, 0.9);
         color: white;
         border: none;
@@ -55,11 +55,37 @@
         background: rgba(51, 103, 214, 0.9);
         transform: translateY(-1px);
       }
+
+      /* Connection Status Indicator */
+      .connection-status {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #ff4444;
+        margin-right: 4px;
+        transition: all 0.3s ease;
+      }
+      
+      .connection-status.connected {
+        background: #44ff44;
+        box-shadow: 0 0 8px rgba(68, 255, 68, 0.5);
+      }
+      
+      .connection-status.connecting {
+        background: #ffaa44;
+        animation: pulse 1.5s ease-in-out infinite alternate;
+      }
+      
+      @keyframes pulse {
+        from { opacity: 1; }
+        to { opacity: 0.4; }
+      }
     </style>
   </head>
   <body>
     <!-- Back to Dashboard Button -->
-    <a href="/app/dashboard.html" class="back-to-dashboard">
+    <a href="/app/dashboard.html" class="back-to-dashboard" id="dashboard-btn">
+        <div class="connection-status" id="connection-status"></div>
         <span>←</span>
         <span>Dashboard</span>
     </a>

package/public/app/terminal.js

@@ -50,6 +50,26 @@ let AGENT_ID;
 let CLIENT_ID;
 let SELECTED_AGENT; // Store full agent data including WebSocket URL
 
+// Connection status management
+function updateConnectionStatus(status) {
+    const statusElement = document.getElementById('connection-status');
+    if (!statusElement) return;
+    
+    statusElement.className = 'connection-status';
+    switch(status) {
+        case 'connecting':
+            statusElement.classList.add('connecting');
+            break;
+        case 'connected':
+            statusElement.classList.add('connected');
+            break;
+        case 'disconnected':
+        default:
+            // Default red styling already applied
+            break;
+    }
+}
+
 // Check for agent parameter and connect directly
 window.addEventListener('load', () => {
     loadVersionInfo();
@@ -97,6 +117,7 @@ async function loadVersionInfo() {
 
 
 function startConnection() {
+    updateConnectionStatus('connecting');
     connectContainer.style.display = 'none';
     terminalContainer.style.display = 'block';
     term.open(document.getElementById('terminal'));
@@ -346,25 +367,31 @@ async function createPeerConnection() {
                 break;
             case 'connected':
                 console.log('[CLIENT] ✅ WebRTC connection established!');
+                updateConnectionStatus('connected');
                 break;
             case 'completed':
                 console.log('[CLIENT] ✅ ICE connection completed successfully!');
+                updateConnectionStatus('connected');
                 break;
             case 'failed':
                 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');
                 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');
                 term.write('  • Corporate network restrictions\r\n');
                 term.write('  • STUN/TURN servers unreachable\r\n');
-                term.write('\r\n🔄 Please refresh the page to retry...\r\n');
+                term.write('  • Agent may have crashed or disconnected\r\n');
+                term.write('\r\n🔄 Click Dashboard to return and try another agent\r\n');
                 break;
             case 'disconnected':
                 console.log('[CLIENT] ⚠️ ICE connection disconnected');
+                updateConnectionStatus('disconnected');
                 break;
             case 'closed':
                 console.log('[CLIENT] 🔐 ICE connection closed');
+                updateConnectionStatus('disconnected');
                 break;
         }
     };
@@ -440,12 +467,16 @@ function setupDataChannel() {
 
     dataChannel.onclose = () => {
         console.log('[CLIENT] Data channel closed.');
+        updateConnectionStatus('disconnected');
         term.write('\r\n\r\n\x1b[31m❌ Terminal session ended.\x1b[0m\r\n');
+        term.write('🔄 Click Dashboard to return and start a new session\r\n');
     };
 
     dataChannel.onerror = (error) => {
         console.error('[CLIENT] Data channel error:', error);
+        updateConnectionStatus('disconnected');
         term.write('\r\n\r\n\x1b[31m❌ Data channel error occurred.\x1b[0m\r\n');
+        term.write('🔄 Click Dashboard to return and try again\r\n');
     };
 
     term.onData((data) => {