shell-mirror 1.5.56 → 1.5.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.56",
+  "version": "1.5.58",
   "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,37 @@ 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;
+}
+
 .connection-status {
     font-size: 0.8rem;
     font-weight: 500;
@@ -242,6 +273,12 @@ body {
     margin-bottom: 20px;
 }
 
+.card-title-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
 .card-header h2 {
     font-size: 1.3rem;
     font-weight: 600;
@@ -833,4 +870,23 @@ body {
         opacity: 0;
         transform: translateX(100%);
     }
+}
+
+/* API Error Display */
+.api-error {
+    text-align: center;
+    padding: 20px;
+    background: #fff5f5;
+    border: 1px solid #fed7d7;
+    border-radius: 8px;
+    color: #c53030;
+}
+
+.api-error p {
+    margin-bottom: 15px;
+    font-weight: 500;
+}
+
+.api-error button {
+    margin-top: 10px;
 }

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();
     }
 
@@ -102,8 +104,24 @@ class ShellMirrorDashboard {
     }
 
     setupWebSocket() {
+        // Detect production environment
+        const isProduction = window.location.hostname === 'shellmirror.app' || 
+                            window.location.hostname === 'www.shellmirror.app' ||
+                            window.location.hostname === 'www.igori.eu' ||
+                            window.location.hostname === 'igori.eu';
+        
         const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = `${protocol}//${window.location.host}/?role=dashboard`;
+        let wsUrl;
+        
+        if (isProduction) {
+            // For production, try the Heroku WebSocket app URL
+            // This may need to be adjusted based on actual deployment architecture
+            wsUrl = `wss://shell-mirror-30aa5479ceaf.herokuapp.com/?role=dashboard`;
+            console.log('[DASHBOARD] 🌐 Production environment detected, using Heroku WebSocket URL');
+        } else {
+            // For development, use same host
+            wsUrl = `${protocol}//${window.location.host}/?role=dashboard`;
+        }
         
         console.log('[DASHBOARD] 🔌 Connecting to WebSocket:', wsUrl);
         
@@ -111,9 +129,20 @@ class ShellMirrorDashboard {
             this.websocket = new WebSocket(wsUrl);
             
             this.websocket.onopen = () => {
-                console.log('[DASHBOARD] ✅ WebSocket connected');
+                console.log('[DASHBOARD] ✅ WebSocket connected to:', wsUrl);
                 this.reconnectAttempts = 0;
                 this.updateConnectionStatus('connected');
+                
+                // Send authentication info if available
+                const user = this.user;
+                if (user) {
+                    console.log('[DASHBOARD] 🔐 Sending authentication to WebSocket');
+                    this.websocket.send(JSON.stringify({
+                        type: 'authenticate',
+                        userId: user.id || user.email,
+                        email: user.email
+                    }));
+                }
             };
             
             this.websocket.onmessage = (event) => {
@@ -121,13 +150,38 @@ class ShellMirrorDashboard {
             };
             
             this.websocket.onclose = (event) => {
-                console.log('[DASHBOARD] 🔌 WebSocket closed:', event.code, event.reason);
+                const closeReasons = {
+                    1000: 'Normal Closure',
+                    1001: 'Going Away',
+                    1002: 'Protocol Error',
+                    1003: 'Unsupported Data',
+                    1004: 'Reserved',
+                    1005: 'No Status Rcvd',
+                    1006: 'Abnormal Closure',
+                    1007: 'Invalid frame payload data',
+                    1008: 'Policy Violation',
+                    1009: 'Message too big',
+                    1010: 'Mandatory Extension',
+                    1011: 'Internal Server Error',
+                    1015: 'TLS Handshake'
+                };
+                
+                const reason = closeReasons[event.code] || 'Unknown';
+                console.log(`[DASHBOARD] 🔌 WebSocket closed: ${event.code} (${reason})`, event.reason);
+                
+                if (event.code === 1008) {
+                    console.error('[DASHBOARD] ❌ Authentication required - WebSocket rejected connection');
+                } else if (event.code === 1006) {
+                    console.error('[DASHBOARD] ❌ Abnormal closure - WebSocket endpoint may not exist');
+                }
+                
                 this.updateConnectionStatus('disconnected');
                 this.attemptReconnect();
             };
             
             this.websocket.onerror = (error) => {
                 console.error('[DASHBOARD] ❌ WebSocket error:', error);
+                console.log('[DASHBOARD] 🔍 WebSocket URL attempted:', wsUrl);
                 this.updateConnectionStatus('error');
             };
             
@@ -222,22 +276,74 @@ class ShellMirrorDashboard {
                 this.setupWebSocket();
             }, delay);
         } else {
-            console.log('[DASHBOARD] ❌ Max reconnection attempts reached or not authenticated');
-            this.updateConnectionStatus('failed');
+            console.log('[DASHBOARD] ❌ Max reconnection attempts reached, switching to HTTP-only mode');
+            this.updateConnectionStatus('offline');
+            this.enableHttpOnlyMode();
         }
     }
 
+    enableHttpOnlyMode() {
+        console.log('[DASHBOARD] 📡 Enabling HTTP-only mode (no real-time updates)');
+        this.websocket = null;
+        
+        // Update UI to show HTTP-only mode
+        const connectionStatus = document.getElementById('connection-status');
+        if (connectionStatus) {
+            connectionStatus.textContent = '📡 HTTP Only';
+            connectionStatus.className = 'connection-status offline';
+            connectionStatus.title = 'Real-time updates unavailable - using polling';
+        }
+        
+        // Continue with HTTP polling only
+        console.log('[DASHBOARD] ✅ Dashboard running in HTTP-only mode');
+    }
+
     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';
         }
     }
 
@@ -301,15 +407,27 @@ class ShellMirrorDashboard {
 
     async loadDashboardData() {
         try {
-            // Load active agents
-            const agentsResponse = await fetch('/php-backend/api/agents-list.php');
+            // Load active agents with detailed debugging
+            console.log('[DASHBOARD] 📡 Fetching agents from API...');
+            const agentsResponse = await fetch('/php-backend/api/agents-list.php', {
+                credentials: 'include'  // Include authentication cookies
+            });
+            
+            console.log('[DASHBOARD] 🔍 API Response Status:', agentsResponse.status);
+            console.log('[DASHBOARD] 🔍 API Response Headers:', Object.fromEntries(agentsResponse.headers.entries()));
+            
             const agentsData = await agentsResponse.json();
+            console.log('[DASHBOARD] 🔍 API Response Data:', agentsData);
             
             if (agentsData.success && agentsData.data && agentsData.data.agents) {
                 this.agents = agentsData.data.agents;
+                console.log('[DASHBOARD] ✅ Loaded agents:', this.agents.length);
                 
                 // Load session data from localStorage (persisted from terminal connections)
                 this.loadSessionsFromStorage();
+            } else {
+                console.warn('[DASHBOARD] ⚠️ No agents found in API response:', agentsData);
+                this.agents = [];
             }
 
             // TODO: Load session history when API is available
@@ -331,7 +449,25 @@ class ShellMirrorDashboard {
             ];
             
         } catch (error) {
-            console.error('Failed to load dashboard data:', error);
+            console.error('[DASHBOARD] ❌ Failed to load dashboard data:', error);
+            this.agents = [];
+            
+            // Show error in UI
+            const agentsCard = document.querySelector('.dashboard-card');
+            if (agentsCard) {
+                agentsCard.innerHTML = `
+                    <div class="card-header">
+                        <h2>🖥️ Active Agents</h2>
+                        <span class="agent-count">Error</span>
+                    </div>
+                    <div class="card-content">
+                        <div class="api-error">
+                            <p>⚠️ Failed to load agents: ${error.message}</p>
+                            <button onclick="dashboard.manualRefresh()" class="btn-primary">Retry</button>
+                        </div>
+                    </div>
+                `;
+            }
         }
     }
 
@@ -366,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>
@@ -438,8 +571,13 @@ class ShellMirrorDashboard {
         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>
+                    <button id="refresh-btn" class="refresh-btn-inline" onclick="dashboard.manualRefresh()" title="Refresh agents">
+                        <span class="refresh-icon">🔄</span>
+                    </button>
                 </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>'}