shell-mirror 1.5.57 → 1.5.59

package/package.json

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

@@ -152,6 +152,59 @@ body {
     animation: spin 1s linear infinite;
 }
 
+/* Inline Refresh Button */
+.refresh-btn-inline {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 50%;
+    color: #666;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+}
+
+.refresh-btn-inline:hover:not(:disabled) {
+    background: #e9ecef;
+    color: #333;
+    transform: scale(1.05);
+}
+
+.refresh-btn-inline.loading {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.refresh-btn-inline.loading .refresh-icon {
+    animation: spin 1s linear infinite;
+}
+
+/* Cleanup Button */
+.cleanup-btn-inline {
+    background: #ffebee;
+    border: 1px solid #f48fb1;
+    border-radius: 50%;
+    color: #d32f2f;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+}
+
+.cleanup-btn-inline:hover:not(:disabled) {
+    background: #f8bbd9;
+    color: #b71c1c;
+    transform: scale(1.05);
+}
+
 .connection-status {
     font-size: 0.8rem;
     font-weight: 500;
@@ -242,6 +295,18 @@ body {
     margin-bottom: 20px;
 }
 
+.card-title-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.agent-actions-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
 .card-header h2 {
     font-size: 1.3rem;
     font-weight: 600;
@@ -298,6 +363,11 @@ body {
     color: #2e7d32;
 }
 
+.agent-status.recent {
+    background: #fff3e0;
+    color: #f57c00;
+}
+
 .agent-status.offline {
     background: #ffebee;
     color: #c62828;
@@ -356,6 +426,24 @@ body {
     transform: translateY(-1px);
 }
 
+/* Disabled/Offline Agent Styles */
+.agent-item.agent-offline {
+    opacity: 0.7;
+}
+
+.btn-disabled {
+    background: #f5f5f5 !important;
+    color: #999 !important;
+    cursor: not-allowed !important;
+    border: 1px solid #e0e0e0 !important;
+}
+
+.btn-disabled:hover {
+    background: #f5f5f5 !important;
+    transform: none !important;
+    color: #999 !important;
+}
+
 /* Quick Actions */
 .action-buttons {
     display: flex;
@@ -852,4 +940,55 @@ body {
 
 .api-error button {
     margin-top: 10px;
+}
+
+/* Connection Testing States */
+.btn-connect.testing {
+    background: #ffc107 !important;
+    color: #333 !important;
+    cursor: wait !important;
+}
+
+/* Connection Error Notifications */
+.connection-error-notification {
+    position: fixed;
+    top: 120px;
+    right: 20px;
+    background: #fff;
+    border-left: 4px solid #f44336;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 16px 20px;
+    max-width: 350px;
+    z-index: 3000;
+    animation: slideInRight 0.3s ease-out;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.connection-error-notification .error-content {
+    flex: 1;
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+
+.connection-error-notification button {
+    background: none;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    color: #999;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.connection-error-notification button:hover {
+    background: #f5f5f5;
+    color: #333;
 }

package/public/app/dashboard.js

@@ -12,6 +12,8 @@ class ShellMirrorDashboard {
         this.refreshInterval = null;
         this.lastRefresh = null;
         this.isRefreshing = false;
+        this.connectionStatusDebounce = null;
+        this.currentConnectionStatus = null;
         this.init();
     }
 
@@ -297,16 +299,51 @@ class ShellMirrorDashboard {
     }
 
     updateConnectionStatus(status) {
+        // Debounce rapid status changes to prevent UI flickering
+        if (this.connectionStatusDebounce) {
+            clearTimeout(this.connectionStatusDebounce);
+        }
+        
+        // Don't update if status is the same
+        if (this.currentConnectionStatus === status) {
+            return;
+        }
+        
+        // For rapid disconnection/reconnection, only show status after a delay
+        if (status === 'disconnected' && this.currentConnectionStatus === 'connected') {
+            this.connectionStatusDebounce = setTimeout(() => {
+                this.setConnectionStatusUI(status);
+            }, 2000); // Wait 2 seconds before showing disconnected
+            return;
+        }
+        
+        // For reconnection, show immediately but don't flicker
+        if (status === 'connected' && this.connectionStatusDebounce) {
+            clearTimeout(this.connectionStatusDebounce);
+            this.connectionStatusDebounce = null;
+        }
+        
+        this.setConnectionStatusUI(status);
+    }
+    
+    setConnectionStatusUI(status) {
+        this.currentConnectionStatus = status;
         const connectionStatus = document.getElementById('connection-status');
         if (connectionStatus) {
             connectionStatus.className = `connection-status ${status}`;
-            const statusText = {
-                connected: '🟢 Live',
-                disconnected: '🟡 Reconnecting...',
-                error: '🔴 Connection Error',
-                failed: '🔴 Offline'
+            
+            // Only show status when there are issues or special modes
+            const statusConfig = {
+                connected: { text: '', show: false }, // Hide when everything is working
+                disconnected: { text: '🟡 Reconnecting...', show: true },
+                error: { text: '🔴 Connection Error', show: true },
+                failed: { text: '🔴 Offline', show: true },
+                offline: { text: '📡 HTTP Only', show: true }
             };
-            connectionStatus.textContent = statusText[status] || '❓ Unknown';
+            
+            const config = statusConfig[status] || { text: '❓ Unknown', show: true };
+            connectionStatus.textContent = config.text;
+            connectionStatus.style.display = config.show ? 'inline-block' : 'none';
         }
     }
 
@@ -465,14 +502,11 @@ class ShellMirrorDashboard {
     }
 
     renderAuthenticatedDashboard() {
-        // Update user section with refresh button and status
+        // Update user section - simplified without refresh button
         document.getElementById('user-section').innerHTML = `
             <div class="dashboard-controls">
-                <span id="connection-status" class="connection-status">🟡 Connecting...</span>
+                <span id="connection-status" class="connection-status" style="display: none;"></span>
                 <span id="refresh-status" class="refresh-status">Initializing...</span>
-                <button id="refresh-btn" class="refresh-btn" onclick="dashboard.manualRefresh()" title="Refresh agents">
-                    <span class="refresh-icon">🔄</span>
-                </button>
             </div>
             <div class="user-info">
                 <span class="user-name">${this.user.name || this.user.email}</span>
@@ -503,30 +537,62 @@ class ShellMirrorDashboard {
     }
 
     renderActiveAgents() {
-        // 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
+        // Filter for agents that should be displayed (online, recent, or offline with sessions)
+        const displayAgents = this.agents.filter(agent => {
+            // Always show online agents
+            if (agent.status === 'online') return true;
+            
+            // Show recent agents (last 2 minutes)
+            if (agent.status === 'recent') return true;
+            
+            // Show offline agents only if they have active sessions
+            const sessions = this.agentSessions[agent.agentId] || [];
+            const activeSessions = sessions.filter(s => s.status === 'active');
+            return activeSessions.length > 0;
         });
+        
+        // Separate truly active vs inactive agents
+        const activeAgents = displayAgents.filter(agent => agent.status === 'online' || agent.status === 'recent');
 
-        const agentCount = activeAgents.length;
-        const agentsHtml = activeAgents.map(agent => {
+        const agentCount = displayAgents.length;
+        const agentsHtml = displayAgents.map(agent => {
             const sessions = this.agentSessions[agent.agentId] || [];
             const sessionCount = sessions.length;
             
+            const isConnectable = agent.status === 'online' || agent.status === 'recent';
+            const statusIcon = {
+                'online': '🟢',
+                'recent': '🟡', 
+                'offline': '🔴'
+            }[agent.status] || '❓';
+            
+            const statusText = {
+                'online': 'Live',
+                'recent': 'Recent',
+                'offline': 'Offline'
+            }[agent.status] || agent.status;
+            
+            const lastSeenText = agent.timeSinceLastSeen !== undefined 
+                ? this.formatPreciseLastSeen(agent.timeSinceLastSeen)
+                : this.formatLastSeen(agent.lastSeen);
+            
             return `
-            <div class="agent-item">
+            <div class="agent-item ${!isConnectable ? 'agent-offline' : ''}">
                 <div class="agent-info">
                     <div class="agent-name">${agent.machineName || agent.agentId}</div>
-                    <div class="agent-status ${agent.onlineStatus}">${agent.onlineStatus}</div>
-                    <div class="agent-last-seen">Last seen: ${this.formatLastSeen(agent.lastSeen)}</div>
+                    <div class="agent-status ${agent.status}">
+                        ${statusIcon} ${statusText}
+                    </div>
+                    <div class="agent-last-seen">Last seen: ${lastSeenText}</div>
                     ${sessionCount > 0 ? `<div class="agent-sessions">${sessionCount} active session${sessionCount !== 1 ? 's' : ''}</div>` : ''}
                 </div>
                 <div class="agent-actions">
-                    <button class="btn-connect" onclick="dashboard.connectToAgent('${agent.agentId}')">
-                        ${sessionCount > 0 ? 'Resume Session' : 'New Session'}
+                    <button class="btn-connect ${!isConnectable ? 'btn-disabled' : ''}" 
+                            onclick="dashboard.connectToAgent('${agent.agentId}')"
+                            ${!isConnectable ? 'disabled' : ''}>
+                        ${!isConnectable ? 'Offline' : sessionCount > 0 ? 'Resume Session' : 'New Session'}
                     </button>
-                    ${sessionCount > 0 ? `<button class="btn-sessions" onclick="dashboard.showAgentSessions('${agent.agentId}')">
+                    ${sessionCount > 0 && isConnectable ? `<button class="btn-sessions" onclick="dashboard.showAgentSessions('${agent.agentId}')">
                         All Sessions
                     </button>` : ''}
                 </div>
@@ -534,11 +600,25 @@ class ShellMirrorDashboard {
             `;
         }).join('');
 
+        // Check if there are any offline agents to show cleanup option
+        const offlineAgents = this.agents.filter(agent => agent.status === 'offline');
+        const showCleanup = offlineAgents.length > 0;
+        
         return `
             <div class="dashboard-card">
                 <div class="card-header">
-                    <h2>🖥️ Active Agents</h2>
-                    <span class="agent-count">${agentCount} agent${agentCount !== 1 ? 's' : ''}</span>
+                    <div class="card-title-section">
+                        <h2>🖥️ Active Agents</h2>
+                        <span class="agent-count">${agentCount} agent${agentCount !== 1 ? 's' : ''}</span>
+                    </div>
+                    <div class="agent-actions-header">
+                        <button id="refresh-btn" class="refresh-btn-inline" onclick="dashboard.manualRefresh()" title="Refresh agents">
+                            <span class="refresh-icon">🔄</span>
+                        </button>
+                        ${showCleanup ? `<button class="cleanup-btn-inline" onclick="dashboard.cleanupOfflineAgents()" title="Remove offline agents">
+                            <span>🧹</span>
+                        </button>` : ''}
+                    </div>
                 </div>
                 <div class="card-content">
                     ${agentCount > 0 ? agentsHtml : '<p class="no-data">No active agents. <a href="#" onclick="dashboard.showAgentInstructions()">Set up an agent</a></p>'}
@@ -710,6 +790,16 @@ class ShellMirrorDashboard {
         return `${Math.floor(diff / 86400)} days ago`;
     }
 
+    formatPreciseLastSeen(timeSinceLastSeen) {
+        if (!timeSinceLastSeen && timeSinceLastSeen !== 0) return 'Unknown';
+        
+        if (timeSinceLastSeen < 10) return 'Just now';
+        if (timeSinceLastSeen < 60) return `${Math.floor(timeSinceLastSeen)} seconds ago`;
+        if (timeSinceLastSeen < 3600) return `${Math.floor(timeSinceLastSeen / 60)} minutes ago`;
+        if (timeSinceLastSeen < 86400) return `${Math.floor(timeSinceLastSeen / 3600)} hours ago`;
+        return `${Math.floor(timeSinceLastSeen / 86400)} days ago`;
+    }
+
     formatDate(date) {
         return new Intl.DateTimeFormat('en-US', {
             month: 'short',
@@ -743,9 +833,109 @@ class ShellMirrorDashboard {
         }
     }
 
+    showAgentConnectionTest(agentId, status) {
+        // Find the agent item in the DOM and show loading state
+        const agentItems = document.querySelectorAll('.agent-item');
+        agentItems.forEach(item => {
+            const connectBtn = item.querySelector('.btn-connect');
+            if (connectBtn && connectBtn.onclick.toString().includes(agentId)) {
+                if (status === 'testing') {
+                    connectBtn.textContent = 'Testing...';
+                    connectBtn.disabled = true;
+                    connectBtn.classList.add('testing');
+                } else if (status === 'done') {
+                    connectBtn.disabled = false;
+                    connectBtn.classList.remove('testing');
+                    // Original text will be restored on next refresh
+                }
+            }
+        });
+    }
+
+    showConnectionError(agent, message) {
+        // Show a more user-friendly error message
+        const notification = document.createElement('div');
+        notification.className = 'connection-error-notification';
+        notification.innerHTML = `
+            <div class="error-content">
+                <strong>Connection Failed</strong><br>
+                Agent: ${agent.machineName || agent.agentId}<br>
+                ${message}
+            </div>
+            <button onclick="this.parentElement.remove()">×</button>
+        `;
+        document.body.appendChild(notification);
+        
+        // Auto-remove after 10 seconds
+        setTimeout(() => {
+            if (document.body.contains(notification)) {
+                document.body.removeChild(notification);
+            }
+        }, 10000);
+    }
+
+    async testAgentConnectivity(agentId) {
+        try {
+            console.log('[DASHBOARD] 🔍 Testing connectivity for agent:', agentId);
+            
+            // Try to ping the agent through the API
+            const response = await fetch(`/php-backend/api/ping-agent.php?agentId=${encodeURIComponent(agentId)}`, {
+                method: 'GET',
+                credentials: 'include',
+                timeout: 5000 // 5 second timeout
+            });
+            
+            if (response.ok) {
+                const data = await response.json();
+                console.log('[DASHBOARD] 🔍 Ping response:', data);
+                return data.success && data.reachable;
+            }
+            
+            console.log('[DASHBOARD] ⚠️ Ping request failed:', response.status);
+            return false;
+        } catch (error) {
+            console.log('[DASHBOARD] ⚠️ Agent connectivity test failed:', error);
+            return false;
+        }
+    }
+
     // Action handlers
     async connectToAgent(agentId) {
         console.log('[DASHBOARD] 🔍 DEBUG: connectToAgent called with agentId:', agentId);
+        
+        // First, test if agent is actually reachable
+        const agent = this.agents.find(a => a.agentId === agentId);
+        if (!agent) {
+            alert('Agent not found. Please refresh and try again.');
+            return;
+        }
+        
+        // Check agent status
+        if (agent.status === 'offline') {
+            alert(`Agent "${agent.machineName || agentId}" is offline. Please ensure the agent is running.`);
+            return;
+        }
+        
+        // Test agent connectivity for recent agents with loading indicator
+        if (agent.status === 'recent') {
+            console.log('[DASHBOARD] 🔍 Testing agent connectivity...');
+            
+            // Show loading state on the specific agent
+            this.showAgentConnectionTest(agentId, 'testing');
+            
+            const isReachable = await this.testAgentConnectivity(agentId);
+            
+            // Hide loading state
+            this.showAgentConnectionTest(agentId, 'done');
+            
+            if (!isReachable) {
+                this.showConnectionError(agent, 'Connection test failed - agent may be offline');
+                // Refresh agent list to get updated status
+                await this.refreshDashboardData();
+                return;
+            }
+        }
+        
         console.log('[DASHBOARD] 🔍 DEBUG: Current agentSessions:', this.agentSessions);
         
         // Check if there are existing sessions for this agent
@@ -821,16 +1011,15 @@ class ShellMirrorDashboard {
     }
 
     startNewSession() {
-        // Get first available agent for new session
-        const activeAgents = this.agents.filter(agent => {
-            const timeSinceLastSeen = Date.now() / 1000 - agent.lastSeen;
-            return agent.onlineStatus === 'online' || timeSinceLastSeen < 300;
-        });
+        // Get first available agent for new session (only truly active ones)
+        const activeAgents = this.agents.filter(agent => 
+            agent.status === 'online' || agent.status === 'recent'
+        );
         
         if (activeAgents.length > 0) {
             this.connectToAgent(activeAgents[0].agentId);
         } else {
-            alert('No active agents available. Please ensure an agent is running on your Mac.');
+            alert('No active agents available. Please ensure an agent is running on your Mac and try refreshing.');
         }
     }
 
@@ -951,6 +1140,76 @@ class ShellMirrorDashboard {
         }
     }
 
+    async cleanupOfflineAgents() {
+        try {
+            console.log('[DASHBOARD] 🧹 Cleaning up offline agents...');
+            
+            const response = await fetch('/php-backend/api/cleanup-agents.php', {
+                method: 'POST',
+                credentials: 'include'
+            });
+            
+            if (response.ok) {
+                const data = await response.json();
+                console.log('[DASHBOARD] ✅ Cleanup response:', data);
+                
+                if (data.success) {
+                    // Show success message
+                    this.showCleanupResult(data.data.message);
+                    
+                    // Refresh the agent list
+                    await this.refreshDashboardData();
+                } else {
+                    this.showCleanupError('Cleanup failed: ' + (data.message || 'Unknown error'));
+                }
+            } else {
+                this.showCleanupError('Cleanup request failed: ' + response.status);
+            }
+        } catch (error) {
+            console.error('[DASHBOARD] ❌ Cleanup failed:', error);
+            this.showCleanupError('Cleanup failed: ' + error.message);
+        }
+    }
+
+    showCleanupResult(message) {
+        const notification = document.createElement('div');
+        notification.className = 'cleanup-result-notification';
+        notification.innerHTML = `
+            <div class="result-content">
+                <strong>✅ Cleanup Complete</strong><br>
+                ${message}
+            </div>
+            <button onclick="this.parentElement.remove()">×</button>
+        `;
+        document.body.appendChild(notification);
+        
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            if (document.body.contains(notification)) {
+                document.body.removeChild(notification);
+            }
+        }, 5000);
+    }
+
+    showCleanupError(message) {
+        const notification = document.createElement('div');
+        notification.className = 'connection-error-notification';
+        notification.innerHTML = `
+            <div class="error-content">
+                <strong>Cleanup Failed</strong><br>
+                ${message}
+            </div>
+            <button onclick="this.parentElement.remove()">×</button>
+        `;
+        document.body.appendChild(notification);
+        
+        // Auto-remove after 8 seconds
+        setTimeout(() => {
+            if (document.body.contains(notification)) {
+                document.body.removeChild(notification);
+            }
+        }, 8000);
+    }
 
     showAgentInstructions() {
         // TODO: Show modal with agent setup instructions