shell-mirror 1.5.57 → 1.5.58

package/package.json

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

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>
@@ -537,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>'}