shell-mirror 1.5.40 → 1.5.42

package/public/app/terminal.js

@@ -50,6 +50,11 @@ let AGENT_ID;
 let CLIENT_ID;
 let SELECTED_AGENT; // Store full agent data including WebSocket URL
 
+// Session management
+let currentSession = null;
+let availableSessions = [];
+let requestedSessionId = null; // For connecting to specific session from URL
+
 // Connection status management
 function updateConnectionStatus(status) {
     const statusElement = document.getElementById('connection-status');
@@ -74,14 +79,16 @@ function updateConnectionStatus(status) {
 window.addEventListener('load', () => {
     loadVersionInfo();
     
-    // Get agent ID from URL parameter
+    // Get agent ID and session ID from URL parameters
     const urlParams = new URLSearchParams(window.location.search);
     const agentId = urlParams.get('agent');
+    const sessionId = urlParams.get('session');
     
     if (agentId) {
         AGENT_ID = agentId;
         SELECTED_AGENT = { id: agentId, agentId: agentId };
-        console.log('[CLIENT] 🔗 Connecting directly to agent:', agentId);
+        requestedSessionId = sessionId; // Store for session request
+        console.log('[CLIENT] 🔗 Connecting to agent:', agentId, sessionId ? `session: ${sessionId}` : '(new session)');
         startConnection();
     } else {
         // No agent specified, redirect to dashboard
@@ -119,7 +126,7 @@ async function loadVersionInfo() {
 function startConnection() {
     updateConnectionStatus('connecting');
     connectContainer.style.display = 'none';
-    terminalContainer.style.display = 'block';
+    terminalContainer.classList.add('show');
     term.open(document.getElementById('terminal'));
     // Delay fit to ensure proper dimensions after CSS transitions
     setTimeout(() => {
@@ -164,7 +171,23 @@ async function initialize() {
                 // Start polling to connect to the agent
                 const intervalId = setInterval(() => {
                     console.log(`[CLIENT] 📞 Sending client-hello to Agent: ${AGENT_ID}`);
-                    const sent = sendMessage({ type: 'client-hello', from: CLIENT_ID, to: AGENT_ID });
+                    
+                    // Build session request
+                    let sessionRequest = null;
+                    if (requestedSessionId) {
+                        sessionRequest = { sessionId: requestedSessionId };
+                        console.log(`[CLIENT] 🎯 Requesting existing session: ${requestedSessionId}`);
+                    } else {
+                        sessionRequest = { newSession: true };
+                        console.log(`[CLIENT] 🆕 Requesting new session`);
+                    }
+                    
+                    const sent = sendMessage({ 
+                        type: 'client-hello', 
+                        from: CLIENT_ID, 
+                        to: AGENT_ID,
+                        sessionRequest: sessionRequest
+                    });
                     if (!sent) {
                         console.error(`[CLIENT] ❌ Failed to send client-hello - stopping attempts`);
                         clearInterval(intervalId);
@@ -190,6 +213,27 @@ async function initialize() {
                             console.log('[CLIENT] Received offer from agent. Stopping client-hello retries.');
                             clearInterval(intervalId);
 
+                            // Handle session assignment from agent
+                            if (nextData.sessionId) {
+                                currentSession = {
+                                    id: nextData.sessionId,
+                                    name: nextData.sessionName || 'Terminal Session',
+                                    isNewSession: nextData.isNewSession || false
+                                };
+                                console.log('[CLIENT] 📋 Session assigned:', currentSession);
+                                
+                                // Update UI to show session info
+                                updateSessionDisplay();
+                                
+                                // Save session info to localStorage for dashboard
+                                saveSessionToLocalStorage(AGENT_ID, currentSession);
+                            }
+                            
+                            if (nextData.availableSessions) {
+                                availableSessions = nextData.availableSessions;
+                                console.log('[CLIENT] 📚 Available sessions:', availableSessions);
+                            }
+
                             console.log('[CLIENT] Received WebRTC offer from agent.');
                             await createPeerConnection();
                             await peerConnection.setRemoteDescription(new RTCSessionDescription(nextData));
@@ -459,6 +503,9 @@ function setupDataChannel() {
             const message = JSON.parse(event.data);
             if (message.type === 'output') {
                 term.write(message.data);
+            } else {
+                // Handle session-related messages
+                handleSessionMessage(message);
             }
         } catch (err) {
             console.error('[CLIENT] Error parsing data channel message:', err);
@@ -521,4 +568,165 @@ function sendMessage(message) {
         console.error(`[CLIENT] ❌ Error sending message:`, error);
         return false;
     }
+}
+
+// Session Management Functions
+function updateSessionDisplay() {
+    const sessionHeader = document.getElementById('session-header');
+    const sessionName = document.getElementById('session-name');
+    const sessionId = document.getElementById('session-id');
+    
+    if (currentSession) {
+        sessionHeader.style.display = 'flex';
+        sessionName.textContent = currentSession.name;
+        sessionId.textContent = `(${currentSession.id.substring(0, 8)}...)`;
+        
+        // Update available sessions dropdown
+        updateSessionDropdown();
+        
+        console.log('[CLIENT] 📋 Session display updated:', currentSession);
+    }
+}
+
+function updateSessionDropdown() {
+    const dropdownContent = document.getElementById('session-dropdown-content');
+    
+    // Clear existing items except "New Session"
+    dropdownContent.innerHTML = `
+        <div class="session-dropdown-item" onclick="createNewSession()">
+            <span>+ New Session</span>
+        </div>
+    `;
+    
+    // Add available sessions
+    if (availableSessions && availableSessions.length > 0) {
+        availableSessions.forEach(session => {
+            const item = document.createElement('div');
+            item.className = 'session-dropdown-item';
+            if (currentSession && session.id === currentSession.id) {
+                item.classList.add('current');
+            }
+            
+            item.innerHTML = `
+                <span>${session.name}</span>
+                <small>${formatLastActivity(session.lastActivity)}</small>
+            `;
+            item.onclick = () => switchToSession(session.id);
+            dropdownContent.appendChild(item);
+        });
+    }
+}
+
+function 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`;
+    if (hours < 24) return `${hours}h`;
+    return `${days}d`;
+}
+
+function switchToSession(sessionId) {
+    if (!dataChannel || dataChannel.readyState !== 'open') {
+        console.error('[CLIENT] ❌ Cannot switch session - data channel not open');
+        return;
+    }
+    
+    console.log('[CLIENT] 🔄 Switching to session:', sessionId);
+    dataChannel.send(JSON.stringify({ 
+        type: 'session-switch', 
+        sessionId: sessionId 
+    }));
+    
+    // Hide dropdown
+    document.getElementById('session-dropdown-content').classList.remove('show');
+}
+
+function createNewSession() {
+    // Navigate to terminal with new session request
+    const url = new URL(window.location.href);
+    url.searchParams.delete('session'); // Remove session param to create new one
+    window.location.href = url.toString();
+}
+
+// Setup dropdown toggle
+document.addEventListener('DOMContentLoaded', () => {
+    const dropdownBtn = document.getElementById('session-dropdown-btn');
+    const dropdownContent = document.getElementById('session-dropdown-content');
+    
+    if (dropdownBtn && dropdownContent) {
+        dropdownBtn.onclick = (e) => {
+            e.stopPropagation();
+            dropdownContent.classList.toggle('show');
+        };
+        
+        // Close dropdown when clicking outside
+        document.addEventListener('click', () => {
+            dropdownContent.classList.remove('show');
+        });
+    }
+});
+
+// Handle session-related data channel messages
+function handleSessionMessage(message) {
+    switch (message.type) {
+        case 'session-switched':
+            currentSession = {
+                id: message.sessionId,
+                name: message.sessionName || 'Terminal Session'
+            };
+            updateSessionDisplay();
+            term.clear(); // Clear terminal for new session
+            console.log('[CLIENT] ✅ Switched to session:', currentSession);
+            
+            // Save updated session info
+            saveSessionToLocalStorage(AGENT_ID, currentSession);
+            break;
+        case 'session-ended':
+            term.write(`\r\n\x1b[31m❌ Session ended: ${message.reason}\x1b[0m\r\n`);
+            if (message.code) {
+                term.write(`Exit code: ${message.code}\r\n`);
+            }
+            break;
+        case 'session-terminated':
+            term.write(`\r\n\x1b[31m❌ Session terminated\x1b[0m\r\n`);
+            term.write('🔄 Click Dashboard to start a new session\r\n');
+            break;
+        case 'error':
+            term.write(`\r\n\x1b[31m❌ Error: ${message.message}\x1b[0m\r\n`);
+            break;
+    }
+}
+
+// Session storage helper
+function saveSessionToLocalStorage(agentId, sessionInfo) {
+    try {
+        const storedSessions = localStorage.getItem('shell-mirror-sessions');
+        let sessionData = storedSessions ? JSON.parse(storedSessions) : {};
+        
+        if (!sessionData[agentId]) {
+            sessionData[agentId] = [];
+        }
+        
+        // Remove existing session with same ID
+        sessionData[agentId] = sessionData[agentId].filter(s => s.id !== sessionInfo.id);
+        
+        // Add updated session info
+        sessionData[agentId].push({
+            id: sessionInfo.id,
+            name: sessionInfo.name,
+            lastActivity: Date.now(),
+            createdAt: sessionInfo.createdAt || Date.now(),
+            status: 'active'
+        });
+        
+        localStorage.setItem('shell-mirror-sessions', JSON.stringify(sessionData));
+        console.log('[CLIENT] 💾 Session saved to storage:', sessionInfo);
+    } catch (error) {
+        console.error('[CLIENT] Error saving session to storage:', error);
+    }
 }