shell-mirror 1.5.56 → 1.5.57

package/package.json

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

@@ -833,4 +833,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

@@ -102,8 +102,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 +127,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 +148,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,9 +274,26 @@ 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) {
@@ -301,15 +370,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 +412,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>
+                `;
+            }
         }
     }