shell-mirror 1.5.40 → 1.5.42

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();
     }
 
@@ -80,6 +81,9 @@ class ShellMirrorDashboard {
             
             if (agentsData.success && agentsData.data && agentsData.data.agents) {
                 this.agents = agentsData.data.agents;
+                
+                // Load session data from localStorage (persisted from terminal connections)
+                this.loadSessionsFromStorage();
             }
 
             // TODO: Load session history when API is available
@@ -174,18 +178,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}')">
+                        ${sessionCount > 0 ? 'Resume Session' : 'New Session'}
+                    </button>
+                    ${sessionCount > 0 ? `<button class="btn-sessions" onclick="dashboard.showAgentSessions('${agent.agentId}')">
+                        All Sessions
+                    </button>` : ''}
                 </div>
-                <button class="btn-connect" onclick="dashboard.connectToAgent('${agent.agentId}')">
-                    Connect
-                </button>
             </div>
-        `).join('');
+            `;
+        }).join('');
 
         return `
             <div class="dashboard-card">
@@ -398,13 +413,151 @@ class ShellMirrorDashboard {
 
     // Action handlers
     async connectToAgent(agentId) {
+        // Check if there are existing sessions for this agent
+        const sessions = this.agentSessions[agentId] || [];
+        const activeSessions = sessions.filter(s => s.status === 'active');
+        
+        if (activeSessions.length > 0) {
+            // Reconnect to the most recently active session
+            const mostRecentSession = activeSessions.reduce((latest, session) => 
+                session.lastActivity > latest.lastActivity ? session : latest
+            );
+            console.log(`[DASHBOARD] Reconnecting to existing session: ${mostRecentSession.id}`);
+            window.location.href = `/app/terminal.html?agent=${agentId}&session=${mostRecentSession.id}`;
+        } else {
+            // No existing sessions, create new one
+            console.log(`[DASHBOARD] Creating new session for agent: ${agentId}`);
+            window.location.href = `/app/terminal.html?agent=${agentId}`;
+        }
+    }
+
+    async connectToSession(agentId, sessionId) {
+        window.location.href = `/app/terminal.html?agent=${agentId}&session=${sessionId}`;
+    }
+
+    async createNewSession(agentId) {
+        // Force creation of new session by not passing session parameter
+        console.log(`[DASHBOARD] Creating new session for agent: ${agentId}`);
         window.location.href = `/app/terminal.html?agent=${agentId}`;
     }
 
     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.createNewSession('${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`;
+    }
+
+    // Session storage management
+    loadSessionsFromStorage() {
+        try {
+            const storedSessions = localStorage.getItem('shell-mirror-sessions');
+            if (storedSessions) {
+                const sessionData = JSON.parse(storedSessions);
+                
+                // Filter out old sessions (older than 24 hours)
+                const now = Date.now();
+                const maxAge = 24 * 60 * 60 * 1000; // 24 hours
+                
+                Object.keys(sessionData).forEach(agentId => {
+                    const validSessions = sessionData[agentId].filter(session => 
+                        (now - session.lastActivity) < maxAge
+                    );
+                    
+                    if (validSessions.length > 0) {
+                        this.agentSessions[agentId] = validSessions;
+                    }
+                });
+                
+                console.log('[DASHBOARD] Loaded sessions from storage:', this.agentSessions);
+            }
+        } catch (error) {
+            console.error('[DASHBOARD] Error loading sessions from storage:', error);
+        }
+    }
+
+
     showAgentInstructions() {
         // TODO: Show modal with agent setup instructions
         alert('Agent setup instructions coming soon!');

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; }
@@ -95,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>