shell-mirror 1.5.114 → 1.5.116

package/package.json

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

@@ -278,14 +278,14 @@ body {
 .agent-menu-dropdown {
     display: none;
     position: absolute;
-    right: 0;
-    top: calc(100% + 2px);
-    background: var(--bg-secondary);
-    border: 1px solid var(--border);
-    border-radius: 6px;
+    right: -8px;
+    top: calc(100% + 4px);
+    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 {
@@ -436,14 +436,18 @@ body {
     filter: brightness(1.1);
 }
 
-/* New Session Button */
+/* New Session Button - styled like session row */
 .btn-new-session {
-    background: transparent;
-    color: var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
     border: 1px dashed var(--border-light);
     border-radius: 6px;
-    padding: 10px 16px;
-    font-size: 0.85rem;
+    padding: 12px 16px;
+    font-size: 0.9rem;
     font-weight: 500;
     cursor: pointer;
     width: 100%;
@@ -451,9 +455,15 @@ body {
 }
 
 .btn-new-session:hover {
-    background: var(--bg-tertiary);
+    background: var(--bg-hover);
     border-color: var(--accent);
     border-style: solid;
+    color: var(--accent);
+}
+
+.btn-new-session .plus-icon {
+    font-size: 1.1rem;
+    font-weight: 400;
 }
 
 /* Offline Agent */

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();
             }
@@ -77,12 +79,49 @@ class ShellMirrorDashboard {
             clearInterval(this.refreshInterval);
         }
 
-        // Refresh agent data every 5 seconds for responsive session updates
+        // Refresh agent data every 10 seconds (sessions sync instantly via BroadcastChannel)
         this.refreshInterval = setInterval(async () => {
             if (this.isAuthenticated && !this.isRefreshing) {
                 await this.refreshDashboardData();
             }
-        }, 5000);
+        }, 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 = {};
@@ -606,7 +652,7 @@ class ShellMirrorDashboard {
                         </div>
                     ` : ''}
                     <button class="btn-new-session" onclick="dashboard.createNewSession('${agent.agentId}')">
-                        + New Session
+                        <span class="plus-icon">+</span> Create New Session
                     </button>
                 </div>
                 ` : `
@@ -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);
     }