shell-mirror 1.5.39 → 1.5.41

package/public/app/terminal.js

@@ -50,18 +50,45 @@ 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');
+    if (!statusElement) return;
+    
+    statusElement.className = 'connection-status';
+    switch(status) {
+        case 'connecting':
+            statusElement.classList.add('connecting');
+            break;
+        case 'connected':
+            statusElement.classList.add('connected');
+            break;
+        case 'disconnected':
+        default:
+            // Default red styling already applied
+            break;
+    }
+}
+
 // Check for agent parameter and connect directly
 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
@@ -97,8 +124,9 @@ 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(() => {
@@ -143,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);
@@ -169,6 +213,24 @@ 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();
+                            }
+                            
+                            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));
@@ -346,25 +408,31 @@ async function createPeerConnection() {
                 break;
             case 'connected':
                 console.log('[CLIENT] ✅ WebRTC connection established!');
+                updateConnectionStatus('connected');
                 break;
             case 'completed':
                 console.log('[CLIENT] ✅ ICE connection completed successfully!');
+                updateConnectionStatus('connected');
                 break;
             case 'failed':
                 console.log('[CLIENT] ❌ ICE connection failed - no viable candidates');
                 console.log('[CLIENT] 💡 Troubleshooting: This may be due to firewall/NAT issues or blocked STUN servers');
+                updateConnectionStatus('disconnected');
                 term.write('\r\n\r\n❌ Connection failed: Network connectivity issues\r\n');
                 term.write('💡 This may be due to:\r\n');
                 term.write('  • Firewall blocking WebRTC traffic\r\n');
                 term.write('  • Corporate network restrictions\r\n');
                 term.write('  • STUN/TURN servers unreachable\r\n');
-                term.write('\r\n🔄 Please refresh the page to retry...\r\n');
+                term.write('  • Agent may have crashed or disconnected\r\n');
+                term.write('\r\n🔄 Click Dashboard to return and try another agent\r\n');
                 break;
             case 'disconnected':
                 console.log('[CLIENT] ⚠️ ICE connection disconnected');
+                updateConnectionStatus('disconnected');
                 break;
             case 'closed':
                 console.log('[CLIENT] 🔐 ICE connection closed');
+                updateConnectionStatus('disconnected');
                 break;
         }
     };
@@ -432,6 +500,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);
@@ -440,12 +511,16 @@ function setupDataChannel() {
 
     dataChannel.onclose = () => {
         console.log('[CLIENT] Data channel closed.');
+        updateConnectionStatus('disconnected');
         term.write('\r\n\r\n\x1b[31m❌ Terminal session ended.\x1b[0m\r\n');
+        term.write('🔄 Click Dashboard to return and start a new session\r\n');
     };
 
     dataChannel.onerror = (error) => {
         console.error('[CLIENT] Data channel error:', error);
+        updateConnectionStatus('disconnected');
         term.write('\r\n\r\n\x1b[31m❌ Data channel error occurred.\x1b[0m\r\n');
+        term.write('🔄 Click Dashboard to return and try again\r\n');
     };
 
     term.onData((data) => {
@@ -490,4 +565,133 @@ 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);
+            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;
+    }
 }