shell-mirror 1.5.55 → 1.5.56

package/package.json

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

@@ -42,12 +42,28 @@ body {
     opacity: 0.8;
 }
 
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
 .user-section {
     display: flex;
     align-items: center;
     gap: 15px;
 }
 
+.dashboard-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 16px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    backdrop-filter: blur(10px);
+}
+
 .user-info {
     display: flex;
     align-items: center;
@@ -106,6 +122,64 @@ body {
     display: block;
 }
 
+/* Dashboard Controls */
+.refresh-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    color: white;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+}
+
+.refresh-btn:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.05);
+}
+
+.refresh-btn.loading {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.refresh-btn.loading .refresh-icon {
+    animation: spin 1s linear infinite;
+}
+
+.connection-status {
+    font-size: 0.8rem;
+    font-weight: 500;
+    white-space: nowrap;
+    padding: 4px 8px;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.connection-status.connected {
+    color: #4caf50;
+}
+
+.connection-status.disconnected {
+    color: #ff9800;
+}
+
+.connection-status.error,
+.connection-status.failed {
+    color: #f44336;
+}
+
+.refresh-status {
+    font-size: 0.75rem;
+    opacity: 0.8;
+    white-space: nowrap;
+}
+
 /* Buttons */
 .btn-primary {
     background: #4285F4;
@@ -524,6 +598,28 @@ body {
         text-align: center;
     }
     
+    .header-right {
+        flex-direction: column;
+        gap: 10px;
+        width: 100%;
+    }
+    
+    .dashboard-controls {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    
+    .refresh-status,
+    .connection-status {
+        font-size: 0.7rem;
+    }
+    
+    .agent-notification {
+        right: 10px;
+        left: 10px;
+        text-align: center;
+    }
+    
     .dashboard-main {
         padding: 20px 15px;
     }
@@ -694,4 +790,47 @@ body {
     border-top: 1px solid #eee;
     padding-top: 16px;
     text-align: center;
+}
+
+/* Agent Notifications */
+.agent-notification {
+    position: fixed;
+    top: 100px;
+    right: 20px;
+    background: white;
+    color: #333;
+    padding: 12px 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    font-size: 0.9rem;
+    font-weight: 500;
+    z-index: 3000;
+    animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-in 4.7s forwards;
+    border-left: 4px solid;
+}
+
+.agent-notification.connected {
+    border-left-color: #4caf50;
+}
+
+.agent-notification.disconnected {
+    border-left-color: #f44336;
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
 }

package/public/app/dashboard.html

@@ -61,8 +61,10 @@
                 <h1>Shell Mirror</h1>
                 <span class="subtitle">Dashboard</span>
             </div>
-            <div class="user-section" id="user-section">
-                <!-- Dynamic content based on auth status -->
+            <div class="header-right">
+                <div class="user-section" id="user-section">
+                    <!-- Dynamic content based on auth status -->
+                </div>
             </div>
         </div>
     </header>

package/public/app/dashboard.js

@@ -6,6 +6,12 @@ class ShellMirrorDashboard {
         this.agents = [];
         this.sessions = [];
         this.agentSessions = {}; // Maps agentId to sessions array
+        this.websocket = null;
+        this.reconnectAttempts = 0;
+        this.maxReconnectAttempts = 10;
+        this.refreshInterval = null;
+        this.lastRefresh = null;
+        this.isRefreshing = false;
         this.init();
     }
 
@@ -38,6 +44,7 @@ class ShellMirrorDashboard {
                 this.user = authStatus.user;
                 await this.loadDashboardData();
                 this.renderAuthenticatedDashboard();
+                this.setupWebSocket(); // Setup real-time connection
                 this.startAutoRefresh(); // Start auto-refresh for authenticated users
             } else {
                 this.renderUnauthenticatedDashboard();
@@ -51,14 +58,216 @@ class ShellMirrorDashboard {
     }
 
     startAutoRefresh() {
-        // Refresh agent data every 30 seconds to detect disconnected agents
+        // Clear any existing interval
+        if (this.refreshInterval) {
+            clearInterval(this.refreshInterval);
+        }
+        
+        // Refresh agent data every 10 seconds (reduced from 30s)
         this.refreshInterval = setInterval(async () => {
-            if (this.isAuthenticated) {
-                await this.loadDashboardData();
-                // Only re-render the agents section to avoid full page flash
-                this.updateAgentsDisplay();
+            if (this.isAuthenticated && !this.isRefreshing) {
+                await this.refreshDashboardData();
+            }
+        }, 10000);
+    }
+
+    async refreshDashboardData() {
+        this.isRefreshing = true;
+        try {
+            await this.loadDashboardData();
+            this.updateAgentsDisplay();
+            this.updateLastRefreshTime();
+        } catch (error) {
+            console.error('Auto-refresh failed:', error);
+            // Implement exponential backoff on failure
+            clearInterval(this.refreshInterval);
+            const backoffDelay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
+            setTimeout(() => {
+                if (this.isAuthenticated) {
+                    this.startAutoRefresh();
+                    this.reconnectAttempts++;
+                }
+            }, backoffDelay);
+        } finally {
+            this.isRefreshing = false;
+        }
+    }
+
+    updateLastRefreshTime() {
+        this.lastRefresh = Date.now();
+        const refreshStatus = document.getElementById('refresh-status');
+        if (refreshStatus) {
+            refreshStatus.textContent = `Last updated: ${new Date(this.lastRefresh).toLocaleTimeString()}`;
+        }
+    }
+
+    setupWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${protocol}//${window.location.host}/?role=dashboard`;
+        
+        console.log('[DASHBOARD] 🔌 Connecting to WebSocket:', wsUrl);
+        
+        try {
+            this.websocket = new WebSocket(wsUrl);
+            
+            this.websocket.onopen = () => {
+                console.log('[DASHBOARD] ✅ WebSocket connected');
+                this.reconnectAttempts = 0;
+                this.updateConnectionStatus('connected');
+            };
+            
+            this.websocket.onmessage = (event) => {
+                this.handleWebSocketMessage(event.data);
+            };
+            
+            this.websocket.onclose = (event) => {
+                console.log('[DASHBOARD] 🔌 WebSocket closed:', event.code, event.reason);
+                this.updateConnectionStatus('disconnected');
+                this.attemptReconnect();
+            };
+            
+            this.websocket.onerror = (error) => {
+                console.error('[DASHBOARD] ❌ WebSocket error:', error);
+                this.updateConnectionStatus('error');
+            };
+            
+            // Send periodic ping to keep connection alive
+            setInterval(() => {
+                if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+                    this.websocket.send(JSON.stringify({ type: 'ping' }));
+                }
+            }, 30000);
+            
+        } catch (error) {
+            console.error('[DASHBOARD] ❌ Failed to setup WebSocket:', error);
+            this.updateConnectionStatus('error');
+        }
+    }
+
+    handleWebSocketMessage(data) {
+        try {
+            const message = JSON.parse(data);
+            console.log('[DASHBOARD] 📨 WebSocket message:', message);
+            
+            switch (message.type) {
+                case 'agent-list':
+                    // Initial agent list or refresh
+                    this.handleAgentListUpdate(message.agents);
+                    break;
+                case 'agent-connected':
+                    this.handleAgentConnected(message.agentId);
+                    break;
+                case 'agent-disconnected':
+                    this.handleAgentDisconnected(message.agentId);
+                    break;
+                case 'pong':
+                    console.log('[DASHBOARD] 🏓 Received pong');
+                    break;
+                default:
+                    console.log('[DASHBOARD] ❓ Unknown message type:', message.type);
+            }
+        } catch (error) {
+            console.error('[DASHBOARD] ❌ Error handling WebSocket message:', error);
+        }
+    }
+
+    handleAgentListUpdate(agentIds) {
+        console.log('[DASHBOARD] 📋 Agent list update:', agentIds);
+        // This is just the initial list of agent IDs, we still need to load full data
+        this.refreshDashboardData();
+    }
+
+    handleAgentConnected(agentId) {
+        console.log('[DASHBOARD] ✅ Agent connected:', agentId);
+        this.showAgentNotification(agentId, 'connected');
+        // Refresh data to get the new agent's details
+        this.refreshDashboardData();
+    }
+
+    handleAgentDisconnected(agentId) {
+        console.log('[DASHBOARD] ❌ Agent disconnected:', agentId);
+        this.showAgentNotification(agentId, 'disconnected');
+        // Refresh data to update agent status
+        this.refreshDashboardData();
+    }
+
+    showAgentNotification(agentId, status) {
+        const message = status === 'connected' 
+            ? `🟢 Agent ${agentId} connected` 
+            : `🔴 Agent ${agentId} disconnected`;
+            
+        // Create notification element
+        const notification = document.createElement('div');
+        notification.className = `agent-notification ${status}`;
+        notification.textContent = message;
+        
+        // Add to page
+        document.body.appendChild(notification);
+        
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            if (document.body.contains(notification)) {
+                document.body.removeChild(notification);
             }
-        }, 30000);
+        }, 5000);
+    }
+
+    attemptReconnect() {
+        if (this.reconnectAttempts < this.maxReconnectAttempts && this.isAuthenticated) {
+            const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
+            console.log(`[DASHBOARD] 🔄 Attempting reconnect in ${delay}ms (attempt ${this.reconnectAttempts + 1})`);
+            
+            setTimeout(() => {
+                this.reconnectAttempts++;
+                this.setupWebSocket();
+            }, delay);
+        } else {
+            console.log('[DASHBOARD] ❌ Max reconnection attempts reached or not authenticated');
+            this.updateConnectionStatus('failed');
+        }
+    }
+
+    updateConnectionStatus(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'
+            };
+            connectionStatus.textContent = statusText[status] || '❓ Unknown';
+        }
+    }
+
+    async manualRefresh() {
+        if (this.isRefreshing) {
+            console.log('[DASHBOARD] ⚠️ Refresh already in progress, ignoring manual request');
+            return;
+        }
+        
+        console.log('[DASHBOARD] 🔄 Manual refresh triggered');
+        
+        // Show loading state on refresh button
+        const refreshBtn = document.getElementById('refresh-btn');
+        if (refreshBtn) {
+            refreshBtn.classList.add('loading');
+            refreshBtn.disabled = true;
+        }
+        
+        try {
+            await this.refreshDashboardData();
+            console.log('[DASHBOARD] ✅ Manual refresh completed');
+        } catch (error) {
+            console.error('[DASHBOARD] ❌ Manual refresh failed:', error);
+        } finally {
+            // Remove loading state
+            if (refreshBtn) {
+                refreshBtn.classList.remove('loading');
+                refreshBtn.disabled = false;
+            }
+        }
     }
 
     updateAgentsDisplay() {
@@ -157,8 +366,15 @@ class ShellMirrorDashboard {
     }
 
     renderAuthenticatedDashboard() {
-        // Update user section
+        // Update user section with refresh button and status
         document.getElementById('user-section').innerHTML = `
+            <div class="dashboard-controls">
+                <span id="connection-status" class="connection-status">🟡 Connecting...</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>
                 <div class="user-dropdown">
@@ -669,4 +885,14 @@ function handleLogin() {
 let dashboard;
 document.addEventListener('DOMContentLoaded', () => {
     dashboard = new ShellMirrorDashboard();
+});
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+    if (dashboard && dashboard.websocket) {
+        dashboard.websocket.close();
+    }
+    if (dashboard && dashboard.refreshInterval) {
+        clearInterval(dashboard.refreshInterval);
+    }
 });

package/server.js

@@ -44,6 +44,7 @@ app.use(passport.session());
 // --- In-memory data stores ---
 const agents = new Map(); // Stores connected agent sockets
 const clients = new Map(); // Stores connected client (browser) sockets
+const dashboards = new Map(); // Stores connected dashboard sockets
 const sessions = new Map(); // Maps session IDs to agent/client pairs
 
 // --- Environment Detection ---
@@ -150,7 +151,53 @@ wss.on('connection', (ws, req) => {
   const role = params.get('role');
   const agentId = params.get('agentId');
 
-  if (role === 'discovery') {
+  if (role === 'dashboard') {
+    // --- Dashboard Connection ---
+    sessionParser(req, {}, () => {
+      let userId;
+      let isAuthenticated = false;
+      
+      if (req.session && req.session.passport && req.session.passport.user) {
+        userId = req.session.passport.user.id;
+        isAuthenticated = true;
+        logToFile(`✅ Authenticated dashboard connected: ${userId}`);
+      } else if (isLocalEnvironment && !isProduction) {
+        // LOCAL_TESTING_ONLY: Allow unauthenticated connections for local testing
+        userId = `local-test-dashboard-${uuidv4()}`;
+        logToFile(`🔧 LOCAL TESTING: Unauthenticated dashboard connected: ${userId}`);
+      } else {
+        // Production: Reject unauthenticated connections
+        logToFile('❌ Unauthenticated dashboard rejected in production environment');
+        ws.close(1008, 'Authentication required');
+        return;
+      }
+
+      ws.userId = userId;
+      dashboards.set(userId, ws);
+
+      // Send initial agent list
+      const agentsList = Array.from(agents.keys()).map(id => ({ id }));
+      ws.send(JSON.stringify({ type: 'agent-list', agents: agentsList }));
+      logToFile(`📊 Sent initial agent list to dashboard: ${agentsList.length} agents`);
+
+      ws.on('close', () => {
+        logToFile(`🔌 Dashboard disconnected: ${userId}`);
+        dashboards.delete(userId);
+      });
+
+      ws.on('message', (message) => {
+        try {
+          const data = JSON.parse(message);
+          if (data.type === 'ping') {
+            ws.send(JSON.stringify({ type: 'pong', timestamp: Date.now() }));
+          }
+        } catch (error) {
+          logToFile(`❌ Error handling dashboard message: ${error.message}`);
+        }
+      });
+    });
+
+  } else if (role === 'discovery') {
     // --- Agent Discovery Connection ---
     logToFile('📍 Discovery client connected');
     
@@ -169,11 +216,16 @@ wss.on('connection', (ws, req) => {
     logToFile(`🖥️ Agent connected: ${agentId}`);
     ws.agentId = agentId;
     agents.set(agentId, ws);
+    
+    // Notify all dashboards of new agent
+    notifyAgentConnected(agentId);
 
     ws.on('close', () => {
       logToFile(`🔌 Agent disconnected: ${agentId}`);
       agents.delete(agentId);
-      // Notify client if in a session
+      
+      // Notify all dashboards of agent disconnection
+      notifyAgentDisconnected(agentId);
     });
 
     ws.on('message', (message) => handleSignalingMessage(ws, message, 'agent'));
@@ -220,6 +272,39 @@ wss.on('connection', (ws, req) => {
   }
 });
 
+// --- Dashboard Broadcast Functions ---
+function broadcastToDashboards(message) {
+  const messageStr = JSON.stringify(message);
+  dashboards.forEach((dashboardWs, userId) => {
+    if (dashboardWs.readyState === WebSocket.OPEN) {
+      dashboardWs.send(messageStr);
+      logToFile(`📡 Broadcasted to dashboard ${userId}: ${message.type}`);
+    } else {
+      // Clean up closed connections
+      dashboards.delete(userId);
+      logToFile(`🔌 Removed closed dashboard connection: ${userId}`);
+    }
+  });
+}
+
+function notifyAgentConnected(agentId) {
+  broadcastToDashboards({
+    type: 'agent-connected',
+    agentId: agentId,
+    timestamp: Date.now()
+  });
+  logToFile(`📢 Notified dashboards of agent connection: ${agentId}`);
+}
+
+function notifyAgentDisconnected(agentId) {
+  broadcastToDashboards({
+    type: 'agent-disconnected', 
+    agentId: agentId,
+    timestamp: Date.now()
+  });
+  logToFile(`📢 Notified dashboards of agent disconnection: ${agentId}`);
+}
+
 function handleSignalingMessage(ws, rawMessage, senderRole) {
   try {
     const message = JSON.parse(rawMessage);