shell-mirror 1.5.113 → 1.5.115

package/package.json

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

@@ -239,7 +239,7 @@ body {
 .agent-name-row {
     display: flex;
     align-items: center;
-    gap: 8px;
+    justify-content: space-between;
     margin-bottom: 4px;
 }
 
@@ -247,11 +247,15 @@ body {
     font-weight: 600;
     font-size: 1rem;
     color: var(--text-primary);
+    flex: 1;
+    min-width: 0;
 }
 
 /* Agent Menu Dropdown */
 .agent-menu {
     position: relative;
+    flex-shrink: 0;
+    margin-left: 8px;
 }
 
 .btn-agent-menu {
@@ -263,6 +267,7 @@ body {
     padding: 4px 8px;
     border-radius: 4px;
     transition: all 0.15s ease;
+    line-height: 1;
 }
 
 .btn-agent-menu:hover {
@@ -273,14 +278,14 @@ body {
 .agent-menu-dropdown {
     display: none;
     position: absolute;
-    right: 0;
+    right: -8px;
     top: calc(100% + 4px);
-    background: var(--bg-secondary);
-    border: 1px solid var(--border);
-    border-radius: 6px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-light);
+    border-radius: 8px;
     min-width: 160px;
-    z-index: 100;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
 }
 
 .agent-menu-dropdown.show {

package/public/app/dashboard.js

@@ -25,6 +25,7 @@ class ShellMirrorDashboard {
         this.isRefreshing = false;
         this.connectionStatusDebounce = null;
         this.currentConnectionStatus = null;
+        this.sessionBroadcast = null; // For cross-tab session sync
         this.init();
     }
 
@@ -60,6 +61,7 @@ class ShellMirrorDashboard {
                 this.updateLastRefreshTime();
                 this.enableHttpOnlyMode(); // Use HTTP-only mode (no persistent WebSocket)
                 this.startAutoRefresh(); // Start auto-refresh for authenticated users
+                this.setupSessionSync(); // Listen for real-time session updates from terminal tabs
             } else {
                 this.renderUnauthenticatedDashboard();
             }
@@ -76,13 +78,50 @@ class ShellMirrorDashboard {
         if (this.refreshInterval) {
             clearInterval(this.refreshInterval);
         }
-        
-        // Refresh agent data every 30 seconds (HTTP polling only)
+
+        // Refresh agent data every 10 seconds (sessions sync instantly via BroadcastChannel)
         this.refreshInterval = setInterval(async () => {
             if (this.isAuthenticated && !this.isRefreshing) {
                 await this.refreshDashboardData();
             }
-        }, 30000);
+        }, 10000);
+    }
+
+    setupSessionSync() {
+        // Use BroadcastChannel for instant cross-tab session sync
+        try {
+            this.sessionBroadcast = new BroadcastChannel('shell-mirror-sessions');
+            this.sessionBroadcast.onmessage = (event) => {
+                console.log('[DASHBOARD] 📡 Received session update from terminal:', event.data);
+                if (event.data.type === 'session-update') {
+                    this.handleSessionUpdate(event.data);
+                }
+            };
+            console.log('[DASHBOARD] 📡 Session sync channel established');
+        } catch (e) {
+            console.log('[DASHBOARD] BroadcastChannel not supported, using localStorage polling');
+        }
+
+        // Also listen for localStorage changes (fallback for same-origin tabs)
+        window.addEventListener('storage', (event) => {
+            if (event.key === 'shell-mirror-sessions') {
+                console.log('[DASHBOARD] 💾 localStorage session update detected');
+                this.loadSessionsFromLocalStorage();
+                this.updateAgentsDisplay();
+            }
+        });
+
+        // Initial load from localStorage
+        this.loadSessionsFromLocalStorage();
+    }
+
+    handleSessionUpdate(data) {
+        const { agentId, sessions } = data;
+        if (agentId && sessions) {
+            this.agentSessions[agentId] = sessions;
+            console.log('[DASHBOARD] ✅ Sessions updated for agent:', agentId, sessions);
+            this.updateAgentsDisplay();
+        }
     }
 
     async refreshDashboardData() {
@@ -434,15 +473,22 @@ class ShellMirrorDashboard {
                 this.agents = agentsData.data.agents;
 
                 // Populate agentSessions from API response (sessions are sent via agent heartbeat)
-                this.agentSessions = {};
+                // But DON'T reset - merge with localStorage sessions for instant updates
                 this.agents.forEach(agent => {
                     if (agent.sessions && agent.sessions.length > 0) {
-                        this.agentSessions[agent.agentId] = agent.sessions;
+                        // Merge API sessions with any localStorage sessions
+                        const localSessions = this.agentSessions[agent.agentId] || [];
+                        const apiSessionIds = new Set(agent.sessions.map(s => s.id));
+
+                        // Keep local sessions that aren't in API yet (just created)
+                        const newLocalSessions = localSessions.filter(s => !apiSessionIds.has(s.id));
+
+                        this.agentSessions[agent.agentId] = [...agent.sessions, ...newLocalSessions];
                     }
                 });
 
-                // Don't load stale sessions from localStorage - only show live sessions from agents
-                localStorage.removeItem('shell-mirror-sessions'); // Clear any stale data
+                // Load sessions from localStorage (created by terminal tabs)
+                this.loadSessionsFromLocalStorage();
             } else {
                 this.agents = [];
                 this.agentSessions = {};
@@ -1108,7 +1154,7 @@ class ShellMirrorDashboard {
                 </div>
                 <div class="modal-body">
                     <p style="margin-bottom: 12px; color: var(--text-secondary);">
-                        Are you sure you want to shut down <strong style="color: var(--text-primary);">${agentName}</strong>?
+                        Are you sure you want to shut down<br><strong style="color: var(--text-primary); word-break: break-all;">${agentName}</strong>?
                     </p>
                     <p style="font-size: 0.85rem; color: var(--text-muted);">
                         This will unregister the agent from the dashboard. If the agent is still running, it will re-register on next heartbeat.
@@ -1197,34 +1243,41 @@ class ShellMirrorDashboard {
         return `${days}d ago`;
     }
 
-    // Session storage management
-    loadSessionsFromStorage() {
+    // Session storage management - merge localStorage sessions with API sessions
+    loadSessionsFromLocalStorage() {
         try {
             const storedSessions = localStorage.getItem('shell-mirror-sessions');
-            
+
             if (storedSessions) {
                 const sessionData = JSON.parse(storedSessions);
-                
-                // Filter out old sessions (older than 24 hours)
+
+                // Filter out old sessions (older than 1 hour for inactive ones)
                 const now = Date.now();
-                const maxAge = 24 * 60 * 60 * 1000; // 24 hours
-                
+                const maxAge = 60 * 60 * 1000; // 1 hour
+
                 Object.keys(sessionData).forEach(agentId => {
-                    const allSessions = sessionData[agentId];
-                    
-                    const validSessions = allSessions.filter(session => {
+                    const localSessions = sessionData[agentId] || [];
+
+                    // Only keep recent active sessions
+                    const validSessions = localSessions.filter(session => {
                         const age = now - session.lastActivity;
-                        return age < maxAge;
+                        return session.status === 'active' && age < maxAge;
                     });
-                    
+
                     if (validSessions.length > 0) {
-                        this.agentSessions[agentId] = validSessions;
+                        // Merge with existing API sessions (avoid duplicates)
+                        const existingSessions = this.agentSessions[agentId] || [];
+                        const existingIds = new Set(existingSessions.map(s => s.id));
+
+                        const newSessions = validSessions.filter(s => !existingIds.has(s.id));
+                        this.agentSessions[agentId] = [...existingSessions, ...newSessions];
+
+                        console.log(`[DASHBOARD] 💾 Merged ${newSessions.length} localStorage sessions for ${agentId}`);
                     }
                 });
-            } else {
             }
         } catch (error) {
-            console.error('[DASHBOARD] ❌ Error loading sessions from storage:', error);
+            console.error('[DASHBOARD] ❌ Error loading sessions from localStorage:', error);
         }
     }
 

package/public/app/terminal.js

@@ -1324,11 +1324,20 @@ function saveSessionToLocalStorage(agentId, sessionInfo) {
         
         localStorage.setItem('shell-mirror-sessions', JSON.stringify(sessionData));
         console.log('[CLIENT] 💾 Session saved to storage:', sessionToStore);
-        console.log('[CLIENT] 🔍 DEBUG: Final stored data:', JSON.stringify(sessionData));
-        
-        // Verify the save worked
-        const verification = localStorage.getItem('shell-mirror-sessions');
-        console.log('[CLIENT] ✅ DEBUG: Verification read:', verification);
+
+        // Broadcast to dashboard tabs for instant sync
+        try {
+            const broadcast = new BroadcastChannel('shell-mirror-sessions');
+            broadcast.postMessage({
+                type: 'session-update',
+                agentId: agentId,
+                sessions: sessionData[agentId]
+            });
+            broadcast.close();
+            console.log('[CLIENT] 📡 Session update broadcasted to dashboard');
+        } catch (e) {
+            // BroadcastChannel not supported, localStorage event will handle it
+        }
     } catch (error) {
         console.error('[CLIENT] ❌ Error saving session to storage:', error);
     }