shell-mirror 1.5.39 → 1.5.41

package/public/app/dashboard.css

@@ -235,6 +235,19 @@ body {
     margin-top: 2px;
 }
 
+.agent-sessions {
+    font-size: 0.8rem;
+    color: #4285f4;
+    margin-top: 2px;
+    font-weight: 500;
+}
+
+.agent-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
 .btn-connect {
     background: #4caf50;
     color: white;
@@ -244,6 +257,7 @@ body {
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
+    font-size: 0.9rem;
 }
 
 .btn-connect:hover {
@@ -251,6 +265,23 @@ body {
     transform: translateY(-1px);
 }
 
+.btn-sessions {
+    background: #4285f4;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.9rem;
+}
+
+.btn-sessions:hover {
+    background: #3367d6;
+    transform: translateY(-1px);
+}
+
 /* Quick Actions */
 .action-buttons {
     display: flex;
@@ -522,4 +553,145 @@ body {
         flex-direction: row;
         gap: 12px;
     }
+}
+
+/* Modal Styles */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+
+.modal {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    max-width: 500px;
+    width: 90%;
+    max-height: 80vh;
+    overflow: hidden;
+}
+
+.modal-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: #666;
+}
+
+.modal-close:hover {
+    background: #f5f5f5;
+    color: #333;
+}
+
+.modal-body {
+    padding: 24px;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+/* Session List Styles */
+.sessions-modal-content p {
+    margin-top: 0;
+    margin-bottom: 16px;
+    color: #666;
+}
+
+.session-list {
+    margin-bottom: 20px;
+}
+
+.session-list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.session-list-item:hover {
+    background: #f8f9fa;
+    border-color: #4285f4;
+}
+
+.session-list-info {
+    flex: 1;
+}
+
+.session-list-name {
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4px;
+}
+
+.session-list-details {
+    display: flex;
+    gap: 12px;
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.session-list-id {
+    font-family: monospace;
+    background: #f5f5f5;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.session-list-status {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+.session-list-status.active {
+    background: #e8f5e8;
+    color: #2e7d32;
+}
+
+.session-list-status.crashed {
+    background: #ffebee;
+    color: #c62828;
+}
+
+.sessions-modal-actions {
+    border-top: 1px solid #eee;
+    padding-top: 16px;
+    text-align: center;
 }

package/public/app/dashboard.js

@@ -5,6 +5,7 @@ class ShellMirrorDashboard {
         this.user = null;
         this.agents = [];
         this.sessions = [];
+        this.agentSessions = {}; // Maps agentId to sessions array
         this.init();
     }
 
@@ -20,6 +21,7 @@ class ShellMirrorDashboard {
                 this.user = authStatus.user;
                 await this.loadDashboardData();
                 this.renderAuthenticatedDashboard();
+                this.startAutoRefresh(); // Start auto-refresh for authenticated users
             } else {
                 this.renderUnauthenticatedDashboard();
             }
@@ -31,6 +33,24 @@ class ShellMirrorDashboard {
         }
     }
 
+    startAutoRefresh() {
+        // Refresh agent data every 30 seconds to detect disconnected agents
+        this.refreshInterval = setInterval(async () => {
+            if (this.isAuthenticated) {
+                await this.loadDashboardData();
+                // Only re-render the agents section to avoid full page flash
+                this.updateAgentsDisplay();
+            }
+        }, 30000);
+    }
+
+    updateAgentsDisplay() {
+        const agentsCard = document.querySelector('.dashboard-card');
+        if (agentsCard) {
+            agentsCard.innerHTML = this.renderActiveAgents();
+        }
+    }
+
     showLoading() {
         document.getElementById('loading-overlay').style.display = 'flex';
     }
@@ -61,6 +81,31 @@ class ShellMirrorDashboard {
             
             if (agentsData.success && agentsData.data && agentsData.data.agents) {
                 this.agents = agentsData.data.agents;
+                
+                // Simulate session data for each agent
+                this.agents.forEach(agent => {
+                    if (agent.onlineStatus === 'online') {
+                        // Mock sessions for online agents
+                        this.agentSessions[agent.agentId] = [
+                            {
+                                id: `ses_${Date.now()}_main`,
+                                name: 'Main Terminal',
+                                lastActivity: Date.now() - 5 * 60 * 1000, // 5 minutes ago
+                                createdAt: Date.now() - 2 * 60 * 60 * 1000, // 2 hours ago
+                                status: 'active',
+                                connectedClients: 0
+                            },
+                            {
+                                id: `ses_${Date.now()}_debug`,
+                                name: 'Debug Server',
+                                lastActivity: Date.now() - 15 * 60 * 1000, // 15 minutes ago
+                                createdAt: Date.now() - 1 * 60 * 60 * 1000, // 1 hour ago
+                                status: 'active',
+                                connectedClients: 0
+                            }
+                        ];
+                    }
+                });
             }
 
             // TODO: Load session history when API is available
@@ -155,18 +200,29 @@ class ShellMirrorDashboard {
         });
 
         const agentCount = activeAgents.length;
-        const agentsHtml = activeAgents.map(agent => `
+        const agentsHtml = activeAgents.map(agent => {
+            const sessions = this.agentSessions[agent.agentId] || [];
+            const sessionCount = sessions.length;
+            
+            return `
             <div class="agent-item">
                 <div class="agent-info">
                     <div class="agent-name">${agent.machineName || agent.agentId}</div>
                     <div class="agent-status ${agent.onlineStatus}">${agent.onlineStatus}</div>
                     <div class="agent-last-seen">Last seen: ${this.formatLastSeen(agent.lastSeen)}</div>
+                    ${sessionCount > 0 ? `<div class="agent-sessions">${sessionCount} active session${sessionCount !== 1 ? 's' : ''}</div>` : ''}
+                </div>
+                <div class="agent-actions">
+                    <button class="btn-connect" onclick="dashboard.connectToAgent('${agent.agentId}')">
+                        New Session
+                    </button>
+                    ${sessionCount > 0 ? `<button class="btn-sessions" onclick="dashboard.showAgentSessions('${agent.agentId}')">
+                        View Sessions
+                    </button>` : ''}
                 </div>
-                <button class="btn-connect" onclick="dashboard.connectToAgent('${agent.agentId}')">
-                    Connect
-                </button>
             </div>
-        `).join('');
+            `;
+        }).join('');
 
         return `
             <div class="dashboard-card">
@@ -382,8 +438,96 @@ class ShellMirrorDashboard {
         window.location.href = `/app/terminal.html?agent=${agentId}`;
     }
 
+    async connectToSession(agentId, sessionId) {
+        window.location.href = `/app/terminal.html?agent=${agentId}&session=${sessionId}`;
+    }
+
     startNewSession() {
-        window.location.href = '/app/terminal.html';
+        // Get first available agent for new session
+        const activeAgents = this.agents.filter(agent => {
+            const timeSinceLastSeen = Date.now() / 1000 - agent.lastSeen;
+            return agent.onlineStatus === 'online' || timeSinceLastSeen < 300;
+        });
+        
+        if (activeAgents.length > 0) {
+            this.connectToAgent(activeAgents[0].agentId);
+        } else {
+            alert('No active agents available. Please ensure an agent is running on your Mac.');
+        }
+    }
+
+    showAgentSessions(agentId) {
+        const sessions = this.agentSessions[agentId] || [];
+        const agent = this.agents.find(a => a.agentId === agentId);
+        const agentName = agent ? (agent.machineName || agent.agentId) : agentId;
+        
+        if (sessions.length === 0) {
+            alert(`No active sessions found for ${agentName}`);
+            return;
+        }
+
+        // Create session list modal
+        const sessionsList = sessions.map(session => `
+            <div class="session-list-item" onclick="dashboard.connectToSession('${agentId}', '${session.id}')">
+                <div class="session-list-info">
+                    <div class="session-list-name">${session.name}</div>
+                    <div class="session-list-details">
+                        <span class="session-list-id">${session.id.substring(0, 8)}...</span>
+                        <span class="session-list-activity">Last activity: ${this.formatLastActivity(session.lastActivity)}</span>
+                    </div>
+                </div>
+                <div class="session-list-status ${session.status}">${session.status}</div>
+            </div>
+        `).join('');
+
+        // Show modal with sessions
+        this.showModal(`Sessions on ${agentName}`, `
+            <div class="sessions-modal-content">
+                <p>Active terminal sessions (${sessions.length}):</p>
+                <div class="session-list">
+                    ${sessionsList}
+                </div>
+                <div class="sessions-modal-actions">
+                    <button class="btn-primary" onclick="dashboard.connectToAgent('${agentId}')">
+                        + Create New Session
+                    </button>
+                </div>
+            </div>
+        `);
+    }
+
+    showModal(title, content) {
+        // Create modal overlay
+        const modalOverlay = document.createElement('div');
+        modalOverlay.className = 'modal-overlay';
+        modalOverlay.onclick = () => document.body.removeChild(modalOverlay);
+        
+        modalOverlay.innerHTML = `
+            <div class="modal" onclick="event.stopPropagation()">
+                <div class="modal-header">
+                    <h3>${title}</h3>
+                    <button class="modal-close" onclick="document.body.removeChild(this.closest('.modal-overlay'))">×</button>
+                </div>
+                <div class="modal-body">
+                    ${content}
+                </div>
+            </div>
+        `;
+        
+        document.body.appendChild(modalOverlay);
+    }
+
+    formatLastActivity(timestamp) {
+        const now = Date.now();
+        const diff = now - timestamp;
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(diff / 3600000);
+        const days = Math.floor(diff / 86400000);
+        
+        if (minutes < 1) return 'now';
+        if (minutes < 60) return `${minutes}m ago`;
+        if (hours < 24) return `${hours}h ago`;
+        return `${days}d ago`;
     }
 
     showAgentInstructions() {

package/public/app/terminal.html

@@ -21,11 +21,109 @@
         width: 100%; 
         background-color: #000000;
       }
+      
+      #terminal-container.show {
+        display: flex;
+        flex-direction: column;
+      }
+      
+      /* Session Header */
+      .session-header {
+        background: #2a2a2a;
+        color: #ccc;
+        padding: 8px 16px;
+        border-bottom: 1px solid #444;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 0.9em;
+        z-index: 100;
+      }
+      
+      .session-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      
+      .session-name {
+        font-weight: bold;
+        color: #fff;
+      }
+      
+      .session-controls {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      
+      .session-dropdown {
+        position: relative;
+        display: inline-block;
+      }
+      
+      .session-dropdown-btn {
+        background: #3a3a3a;
+        color: #ccc;
+        border: 1px solid #555;
+        padding: 4px 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.8em;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      
+      .session-dropdown-btn:hover {
+        background: #4a4a4a;
+      }
+      
+      .session-dropdown-content {
+        display: none;
+        position: absolute;
+        background: #2a2a2a;
+        border: 1px solid #555;
+        border-radius: 4px;
+        right: 0;
+        top: 100%;
+        min-width: 200px;
+        z-index: 1000;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+      }
+      
+      .session-dropdown-content.show {
+        display: block;
+      }
+      
+      .session-dropdown-item {
+        padding: 8px 12px;
+        cursor: pointer;
+        border-bottom: 1px solid #444;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      
+      .session-dropdown-item:last-child {
+        border-bottom: none;
+      }
+      
+      .session-dropdown-item:hover {
+        background: #3a3a3a;
+      }
+      
+      .session-dropdown-item.current {
+        background: #4285f4;
+        color: white;
+      }
+      
       #terminal {
         padding: 8px;  /* Mac Terminal.app padding */
         background-color: #000000;
-        height: calc(100% - 16px);
+        height: calc(100% - 16px - 40px); /* Subtract session header height */
         width: calc(100% - 16px);
+        flex: 1;
       }
       #connect-container { padding: 2em; text-align: center; }
       #agent-id-input { font-size: 1.2em; padding: 8px; width: 400px; margin-bottom: 1em; }
@@ -35,7 +133,7 @@
       .back-to-dashboard {
         position: fixed;
         top: 20px;
-        left: 20px;
+        right: 20px;
         background: rgba(66, 133, 244, 0.9);
         color: white;
         border: none;
@@ -55,11 +153,37 @@
         background: rgba(51, 103, 214, 0.9);
         transform: translateY(-1px);
       }
+
+      /* Connection Status Indicator */
+      .connection-status {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #ff4444;
+        margin-right: 4px;
+        transition: all 0.3s ease;
+      }
+      
+      .connection-status.connected {
+        background: #44ff44;
+        box-shadow: 0 0 8px rgba(68, 255, 68, 0.5);
+      }
+      
+      .connection-status.connecting {
+        background: #ffaa44;
+        animation: pulse 1.5s ease-in-out infinite alternate;
+      }
+      
+      @keyframes pulse {
+        from { opacity: 1; }
+        to { opacity: 0.4; }
+      }
     </style>
   </head>
   <body>
     <!-- Back to Dashboard Button -->
-    <a href="/app/dashboard.html" class="back-to-dashboard">
+    <a href="/app/dashboard.html" class="back-to-dashboard" id="dashboard-btn">
+        <div class="connection-status" id="connection-status"></div>
         <span>←</span>
         <span>Dashboard</span>
     </a>
@@ -69,6 +193,25 @@
         <p>Connecting to terminal...</p>
     </div>
     <div id="terminal-container">
+        <div class="session-header" id="session-header" style="display: none;">
+            <div class="session-info">
+                <span class="session-name" id="session-name">Terminal Session</span>
+                <span class="session-id" id="session-id"></span>
+            </div>
+            <div class="session-controls">
+                <div class="session-dropdown">
+                    <button class="session-dropdown-btn" id="session-dropdown-btn">
+                        <span>Sessions</span>
+                        <span>▼</span>
+                    </button>
+                    <div class="session-dropdown-content" id="session-dropdown-content">
+                        <div class="session-dropdown-item" onclick="createNewSession()">
+                            <span>+ New Session</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div id="terminal"></div>
     </div>