shell-mirror 1.5.40 → 1.5.41

package/mac-agent/agent-debug.log

@@ -1,94 +1,9 @@
-=== Mac Agent Debug Log Started 2025-08-06T23:17:12.104Z ===
-[2025-08-06T23:17:12.119Z] ✅ @koush/wrtc package loaded successfully
-[2025-08-06T23:17:12.122Z] 🆔 Agent ID: agent-496ad28d-dd0c-4fdb-95fd-28bc1023ae3d
-[2025-08-06T23:17:12.122Z] [AGENT] Host is 0.0.0.0, connecting to localhost instead.
-[2025-08-06T23:17:12.122Z] 🌐 Signaling server URL: ws://localhost:3000
-[2025-08-06T23:17:12.122Z] 🐚 Shell: bash
-[2025-08-06T23:17:12.122Z] 🔌 Connecting to signaling server at ws://localhost:3000?role=agent&agentId=agent-496ad28d-dd0c-4fdb-95fd-28bc1023ae3d
-[2025-08-06T23:17:12.132Z] ✅ Connected to signaling server.
-[2025-08-06T23:17:17.684Z] 🔌 Connecting to signaling server at ws://localhost:3000?role=agent&agentId=agent-496ad28d-dd0c-4fdb-95fd-28bc1023ae3d
-[2025-08-06T23:17:17.690Z] ✅ Connected to signaling server.
-[2025-08-06T23:17:18.729Z] 📨 Received message of type: ping from: local-test-client-7f2cd128-5a64-4a9e-a565-eab1357ea731 to: agent-496ad28d-dd0c-4fdb-95fd-28bc1023ae3d
-[2025-08-06T23:17:18.730Z] [AGENT] ❓ Unknown message type: ping
-[2025-08-06T23:17:19.733Z] 📨 Received message of type: client-hello from: local-test-client-7f2cd128-5a64-4a9e-a565-eab1357ea731 to: agent-496ad28d-dd0c-4fdb-95fd-28bc1023ae3d
-[2025-08-06T23:17:19.733Z] 🔄 Received client-hello from local-test-client-7f2cd128-5a64-4a9e-a565-eab1357ea731. Initiating WebRTC connection.
-[2025-08-06T23:17:19.734Z] Creating new PeerConnection
-[2025-08-06T23:17:19.734Z] 🌐 Configuring ICE servers: stun:stun.l.google.com:19302, stun:stun1.l.google.com:19302, stun:stun.cloudflare.com:3478, stun:stun.services.mozilla.com:3478, turn:openrelay.metered.ca:80, turn:openrelay.metered.ca:443
-[2025-08-06T23:17:19.734Z] ⚙️ WebRTC config: {"iceServers":[{"urls":"stun:stun.l.google.com:19302"},{"urls":"stun:stun1.l.google.com:19302"},{"urls":"stun:stun.cloudflare.com:3478"},{"urls":"stun:stun.services.mozilla.com:3478"},{"urls":"turn:openrelay.metered.ca:80","username":"openrelayproject","credential":"openrelayproject"},{"urls":"turn:openrelay.metered.ca:443","username":"openrelayproject","credential":"openrelayproject"}],"iceCandidatePoolSize":10,"iceTransportPolicy":"all","bundlePolicy":"balanced"}
-[2025-08-06T23:17:19.748Z] [AGENT] 🔧 Attaching ICE candidate event handler...
-[2025-08-06T23:17:19.748Z] [AGENT] Creating data channel...
-[2025-08-06T23:17:19.750Z] [AGENT] Spawning new terminal
-[2025-08-06T23:17:19.753Z] [AGENT] ✅ Terminal spawned (PID: 70587)
-[2025-08-06T23:17:19.753Z] 📡 PeerConnection created, generating offer...
-[2025-08-06T23:17:19.755Z] 📋 Offer created: offer
-[2025-08-06T23:17:19.756Z] 📤 Sending WebRTC offer to client.
-[2025-08-06T23:17:19.756Z] [AGENT] Sending message: offer
-[2025-08-06T23:17:19.757Z] ✅ WebRTC offer sent successfully
-[2025-08-06T23:17:19.757Z] [AGENT] 🔧 Setting up ICE gathering fallback timer...
-[2025-08-06T23:17:19.757Z] [AGENT] 🔍 ICE gathering state changed: gathering
-[2025-08-06T23:17:19.758Z] [AGENT] 🔍 ICE gathering in progress...
-[2025-08-06T23:17:19.758Z] [AGENT] 🧊 ICE candidate event fired: candidate found
-[2025-08-06T23:17:19.758Z] [AGENT] 📤 ICE candidate details: {"candidate":"candidate:1431643032 1 udp 2122260224 192.168.31.244 61993 typ host generation 0 ufrag fZih network-id 1 network-cost 50","sdpMid":"0","sdpMLineIndex":0}
-[2025-08-06T23:17:19.758Z] [AGENT] 📤 Sending ICE candidate to client...
-[2025-08-06T23:17:19.758Z] [AGENT] Sending message: candidate
-[2025-08-06T23:17:19.759Z] [AGENT] ✅ ICE candidate sent successfully
-[2025-08-06T23:17:19.759Z] [AGENT] 🧊 ICE candidate event fired: candidate found
-[2025-08-06T23:17:19.759Z] [AGENT] 📤 ICE candidate details: {"candidate":"candidate:559267639 1 udp 2122202368 ::1 59459 typ host generation 0 ufrag fZih network-id 3","sdpMid":"0","sdpMLineIndex":0}
-[2025-08-06T23:17:19.759Z] [AGENT] 📤 Sending ICE candidate to client...
-[2025-08-06T23:17:19.759Z] [AGENT] Sending message: candidate
-[2025-08-06T23:17:19.759Z] [AGENT] ✅ ICE candidate sent successfully
-[2025-08-06T23:17:19.760Z] [AGENT] 🧊 ICE candidate event fired: candidate found
-[2025-08-06T23:17:19.760Z] [AGENT] 📤 ICE candidate details: {"candidate":"candidate:1510613869 1 udp 2122129152 127.0.0.1 52296 typ host generation 0 ufrag fZih network-id 2","sdpMid":"0","sdpMLineIndex":0}
-[2025-08-06T23:17:19.760Z] [AGENT] 📤 Sending ICE candidate to client...
-[2025-08-06T23:17:19.760Z] [AGENT] Sending message: candidate
-[2025-08-06T23:17:19.760Z] [AGENT] ✅ ICE candidate sent successfully
-[2025-08-06T23:17:19.785Z] 📨 Received message of type: answer from: local-test-client-7f2cd128-5a64-4a9e-a565-eab1357ea731 to: agent-496ad28d-dd0c-4fdb-95fd-28bc1023ae3d
-[2025-08-06T23:17:19.785Z] [AGENT] 📥 Received WebRTC answer from client.
-[2025-08-06T23:17:19.786Z] 📨 Received message of type: candidate from: local-test-client-7f2cd128-5a64-4a9e-a565-eab1357ea731 to: agent-496ad28d-dd0c-4fdb-95fd-28bc1023ae3d
-[2025-08-06T23:17:19.786Z] [AGENT] 🧊 Received ICE candidate from client.
-[2025-08-06T23:17:19.787Z] [AGENT] 📊 ICE connection state changed: new
-[2025-08-06T23:17:19.787Z] [AGENT] 📊 ICE gathering state: gathering
-[2025-08-06T23:17:19.787Z] [AGENT] 🆕 ICE connection starting...
-[2025-08-06T23:17:19.787Z] [AGENT] 📡 Connection state changed: new
-[2025-08-06T23:17:19.787Z] [AGENT] 🆕 Connection starting...
-[2025-08-06T23:17:19.787Z] [AGENT] ✅ WebRTC answer processed successfully
-[2025-08-06T23:17:19.787Z] [AGENT] ✅ ICE candidate added successfully
-[2025-08-06T23:17:19.791Z] [AGENT] 🧊 ICE candidate event fired: candidate found
-[2025-08-06T23:17:19.792Z] [AGENT] 📤 ICE candidate details: {"candidate":"candidate:2581077003 1 udp 1686052607 46.34.249.124 1753 typ srflx raddr 192.168.31.244 rport 61993 generation 0 ufrag fZih network-id 1 network-cost 50","sdpMid":"0","sdpMLineIndex":0}
-[2025-08-06T23:17:19.792Z] [AGENT] 📤 Sending ICE candidate to client...
-[2025-08-06T23:17:19.792Z] [AGENT] Sending message: candidate
-[2025-08-06T23:17:19.792Z] [AGENT] ✅ ICE candidate sent successfully
-[2025-08-06T23:17:19.797Z] 📨 Received message of type: candidate from: local-test-client-7f2cd128-5a64-4a9e-a565-eab1357ea731 to: agent-496ad28d-dd0c-4fdb-95fd-28bc1023ae3d
-[2025-08-06T23:17:19.797Z] [AGENT] 🧊 Received ICE candidate from client.
-[2025-08-06T23:17:19.797Z] [AGENT] ✅ ICE candidate added successfully
-[2025-08-06T23:17:19.847Z] [AGENT] 🧊 ICE candidate event fired: candidate found
-[2025-08-06T23:17:19.847Z] [AGENT] 📤 ICE candidate details: {"candidate":"candidate:467066728 1 tcp 1518280447 192.168.31.244 57774 typ host tcptype passive generation 0 ufrag fZih network-id 1 network-cost 50","sdpMid":"0","sdpMLineIndex":0}
-[2025-08-06T23:17:19.847Z] [AGENT] 📤 Sending ICE candidate to client...
-[2025-08-06T23:17:19.847Z] [AGENT] Sending message: candidate
-[2025-08-06T23:17:19.847Z] [AGENT] ✅ ICE candidate sent successfully
-[2025-08-06T23:17:19.847Z] [AGENT] 🧊 ICE candidate event fired: candidate found
-[2025-08-06T23:17:19.847Z] [AGENT] 📤 ICE candidate details: {"candidate":"candidate:1876313031 1 tcp 1518222591 ::1 57775 typ host tcptype passive generation 0 ufrag fZih network-id 3","sdpMid":"0","sdpMLineIndex":0}
-[2025-08-06T23:17:19.847Z] [AGENT] 📤 Sending ICE candidate to client...
-[2025-08-06T23:17:19.847Z] [AGENT] Sending message: candidate
-[2025-08-06T23:17:19.847Z] [AGENT] ✅ ICE candidate sent successfully
-[2025-08-06T23:17:19.847Z] [AGENT] 🧊 ICE candidate event fired: candidate found
-[2025-08-06T23:17:19.847Z] [AGENT] 📤 ICE candidate details: {"candidate":"candidate:344579997 1 tcp 1518149375 127.0.0.1 57776 typ host tcptype passive generation 0 ufrag fZih network-id 2","sdpMid":"0","sdpMLineIndex":0}
-[2025-08-06T23:17:19.847Z] [AGENT] 📤 Sending ICE candidate to client...
-[2025-08-06T23:17:19.847Z] [AGENT] Sending message: candidate
-[2025-08-06T23:17:19.848Z] [AGENT] ✅ ICE candidate sent successfully
-[2025-08-06T23:17:19.953Z] [AGENT] 🔍 ICE gathering state changed: complete
-[2025-08-06T23:17:19.953Z] [AGENT] ✅ ICE gathering completed
-[2025-08-06T23:17:19.953Z] [AGENT] 🧊 ICE candidate event fired: gathering complete
-[2025-08-06T23:17:19.953Z] [AGENT] 🏁 ICE candidate gathering complete.
-[2025-08-06T23:17:19.955Z] [AGENT] 📊 ICE connection state changed: connected
-[2025-08-06T23:17:19.955Z] [AGENT] 📊 ICE gathering state: complete
-[2025-08-06T23:17:19.955Z] [AGENT] ✅ WebRTC connection established!
-[2025-08-06T23:17:19.956Z] [AGENT] 📡 Connection state changed: connected
-[2025-08-06T23:17:19.956Z] [AGENT] ✅ Peer connection fully established!
-[2025-08-06T23:17:19.957Z] [AGENT] ✅ Data channel is open!
-[2025-08-06T23:17:21.758Z] [AGENT] ✅ ICE gathering is active: complete
-[2025-08-06T23:17:35.042Z] [AGENT] 📊 ICE connection state changed: completed
-[2025-08-06T23:17:35.043Z] [AGENT] 📊 ICE gathering state: complete
-[2025-08-06T23:17:35.044Z] [AGENT] ✅ ICE connection completed successfully!
-[2025-08-06T23:17:35.044Z] [AGENT] 📡 Connection state changed: connected
-[2025-08-06T23:17:35.044Z] [AGENT] ✅ Peer connection fully established!
+=== Mac Agent Debug Log Started 2025-08-17T10:31:27.217Z ===
+[2025-08-17T10:31:27.469Z] ✅ @koush/wrtc package loaded successfully
+[2025-08-17T10:31:27.471Z] 🆔 Agent ID: agent-69bf639a-7e26-4b2e-b34a-8cc840f35203
+[2025-08-17T10:31:27.471Z] [AGENT] Host is 0.0.0.0, connecting to localhost instead.
+[2025-08-17T10:31:27.471Z] 🌐 Using local WebSocket URL: ws://localhost:8080
+[2025-08-17T10:31:27.471Z] 🐚 Shell: bash
+[2025-08-17T10:31:27.471Z] 🔌 Connecting to signaling server at ws://localhost:8080?role=agent&agentId=agent-69bf639a-7e26-4b2e-b34a-8cc840f35203
+[2025-08-17T10:31:32.485Z] 🔌 Connecting to signaling server at ws://localhost:8080?role=agent&agentId=agent-69bf639a-7e26-4b2e-b34a-8cc840f35203
+[2025-08-17T10:31:37.492Z] 🔌 Connecting to signaling server at ws://localhost:8080?role=agent&agentId=agent-69bf639a-7e26-4b2e-b34a-8cc840f35203

package/mac-agent/agent.js

@@ -53,10 +53,268 @@ if (process.env.WEBSOCKET_URL) {
 const shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
 logToFile(`🐚 Shell: ${shell}`);
 
+// Circular buffer for session output persistence
+class CircularBuffer {
+  constructor(size = 10000) {
+    this.size = size;
+    this.buffer = [];
+    this.index = 0;
+    this.full = false;
+  }
+
+  add(data) {
+    this.buffer[this.index] = data;
+    this.index = (this.index + 1) % this.size;
+    if (this.index === 0) this.full = true;
+  }
+
+  getAll() {
+    if (!this.full) {
+      return this.buffer.slice(0, this.index).join('');
+    }
+    return this.buffer.slice(this.index).concat(this.buffer.slice(0, this.index)).join('');
+  }
+
+  clear() {
+    this.buffer = [];
+    this.index = 0;
+    this.full = false;
+  }
+}
+
+// Session Manager for multiple persistent terminal sessions
+class SessionManager {
+  constructor() {
+    this.sessions = {};
+    this.maxSessions = 10;
+    this.defaultSessionTimeout = 24 * 60 * 60 * 1000; // 24 hours
+    this.clientSessions = {}; // Maps clientId to sessionId
+  }
+
+  createSession(sessionName = null, clientId = null) {
+    const sessionId = `ses_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const name = sessionName || `Session ${Object.keys(this.sessions).length + 1}`;
+
+    logToFile(`[SESSION] Creating new session: ${sessionId} (${name})`);
+
+    // Check session limit
+    if (Object.keys(this.sessions).length >= this.maxSessions) {
+      logToFile(`[SESSION] ❌ Maximum sessions (${this.maxSessions}) reached`);
+      return null;
+    }
+
+    const macShell = os.platform() === 'darwin' ? '/bin/zsh' : shell;
+    const terminalEnv = {
+      ...process.env,
+      TERM: 'xterm-256color',
+      COLORTERM: 'truecolor',
+      LANG: 'en_US.UTF-8',
+      LC_ALL: 'en_US.UTF-8',
+      SHELL: macShell,
+      TERM_PROGRAM: 'Terminal',
+      TERM_PROGRAM_VERSION: '2.12.7'
+    };
+
+    const terminal = pty.spawn(macShell, ['--login'], {
+      name: 'xterm-256color',
+      cols: 120,
+      rows: 30,
+      cwd: process.env.HOME,
+      env: terminalEnv,
+      encoding: 'utf8'
+    });
+
+    const session = {
+      id: sessionId,
+      name: name,
+      terminal: terminal,
+      buffer: new CircularBuffer(10000),
+      connectedClients: [],
+      createdAt: Date.now(),
+      lastActivity: Date.now(),
+      status: 'active'
+    };
+
+    // Set up terminal event handlers
+    terminal.on('data', (data) => {
+      session.buffer.add(data);
+      session.lastActivity = Date.now();
+      
+      // Send to all connected clients for this session
+      session.connectedClients.forEach(clientId => {
+        this.sendToClient(clientId, { type: 'output', data: data });
+      });
+    });
+
+    terminal.on('exit', (code) => {
+      logToFile(`[SESSION] Terminal process exited for session ${sessionId} with code ${code}`);
+      session.status = 'crashed';
+      // Notify connected clients
+      session.connectedClients.forEach(clientId => {
+        this.sendToClient(clientId, { 
+          type: 'session-ended', 
+          sessionId: sessionId,
+          reason: 'terminal-exit',
+          code: code 
+        });
+      });
+    });
+
+    this.sessions[sessionId] = session;
+    
+    // Associate with client if provided
+    if (clientId) {
+      this.clientSessions[clientId] = sessionId;
+      session.connectedClients.push(clientId);
+    }
+
+    logToFile(`[SESSION] ✅ Session created: ${sessionId} (PID: ${terminal.pid})`);
+    return sessionId;
+  }
+
+  getSession(sessionId) {
+    return this.sessions[sessionId] || null;
+  }
+
+  connectClientToSession(clientId, sessionId) {
+    const session = this.sessions[sessionId];
+    if (!session) {
+      logToFile(`[SESSION] ❌ Cannot connect client ${clientId} - session ${sessionId} not found`);
+      return false;
+    }
+
+    // Disconnect client from any existing session
+    this.disconnectClient(clientId);
+
+    // Connect to new session
+    this.clientSessions[clientId] = sessionId;
+    if (!session.connectedClients.includes(clientId)) {
+      session.connectedClients.push(clientId);
+    }
+    session.lastActivity = Date.now();
+
+    logToFile(`[SESSION] ✅ Client ${clientId} connected to session ${sessionId}`);
+
+    // Send buffered output to newly connected client
+    const bufferedOutput = session.buffer.getAll();
+    if (bufferedOutput) {
+      this.sendToClient(clientId, { type: 'output', data: bufferedOutput });
+    }
+
+    return true;
+  }
+
+  disconnectClient(clientId) {
+    const sessionId = this.clientSessions[clientId];
+    if (sessionId && this.sessions[sessionId]) {
+      const session = this.sessions[sessionId];
+      session.connectedClients = session.connectedClients.filter(id => id !== clientId);
+      logToFile(`[SESSION] Client ${clientId} disconnected from session ${sessionId}`);
+    }
+    delete this.clientSessions[clientId];
+  }
+
+  getClientSession(clientId) {
+    const sessionId = this.clientSessions[clientId];
+    return sessionId ? this.sessions[sessionId] : null;
+  }
+
+  getAllSessions() {
+    return Object.values(this.sessions).map(session => ({
+      id: session.id,
+      name: session.name,
+      lastActivity: session.lastActivity,
+      createdAt: session.createdAt,
+      status: session.status,
+      connectedClients: session.connectedClients.length
+    }));
+  }
+
+  terminateSession(sessionId) {
+    const session = this.sessions[sessionId];
+    if (!session) return false;
+
+    logToFile(`[SESSION] Terminating session: ${sessionId}`);
+
+    // Notify connected clients
+    session.connectedClients.forEach(clientId => {
+      this.sendToClient(clientId, { 
+        type: 'session-terminated', 
+        sessionId: sessionId 
+      });
+      delete this.clientSessions[clientId];
+    });
+
+    // Kill terminal process
+    if (session.terminal) {
+      session.terminal.kill();
+    }
+
+    delete this.sessions[sessionId];
+    logToFile(`[SESSION] ✅ Session terminated: ${sessionId}`);
+    return true;
+  }
+
+  sendToClient(clientId, message) {
+    // This will be connected to the WebRTC data channel sending logic
+    // For now, we'll use a global dataChannel reference
+    // In a full implementation, this would use a clientId-to-dataChannel mapping
+    if (typeof dataChannel !== 'undefined' && dataChannel && dataChannel.readyState === 'open') {
+      try {
+        dataChannel.send(JSON.stringify(message));
+      } catch (err) {
+        logToFile(`[SESSION] Error sending to client ${clientId}: ${err.message}`);
+      }
+    } else {
+      logToFile(`[SESSION] ⚠️ Cannot send to client ${clientId} - data channel not available`);
+    }
+  }
+
+  writeToSession(sessionId, data) {
+    const session = this.sessions[sessionId];
+    if (session && session.terminal) {
+      session.terminal.write(data);
+      session.lastActivity = Date.now();
+      return true;
+    }
+    return false;
+  }
+
+  resizeSession(sessionId, cols, rows) {
+    const session = this.sessions[sessionId];
+    if (session && session.terminal) {
+      session.terminal.resize(cols, rows);
+      session.lastActivity = Date.now();
+      return true;
+    }
+    return false;
+  }
+
+  cleanupIdleSessions() {
+    const now = Date.now();
+    Object.keys(this.sessions).forEach(sessionId => {
+      const session = this.sessions[sessionId];
+      const idleTime = now - session.lastActivity;
+      
+      if (idleTime > this.defaultSessionTimeout && session.connectedClients.length === 0) {
+        logToFile(`[SESSION] Auto-cleanup idle session: ${sessionId} (idle for ${Math.floor(idleTime / 60000)} minutes)`);
+        this.terminateSession(sessionId);
+      }
+    });
+  }
+}
+
+// Initialize session manager
+const sessionManager = new SessionManager();
+
+// Cleanup idle sessions every 30 minutes
+setInterval(() => {
+  sessionManager.cleanupIdleSessions();
+}, 30 * 60 * 1000);
+
 let ws;
 let peerConnection;
 let dataChannel;
-let term;
 
 const iceServers = [
   // Google STUN servers (primary)
@@ -95,16 +353,71 @@ function connectToSignalingServer() {
 
       switch (data.type) {
         case 'client-hello':
-          logToFile(`🔄 Received client-hello from ${data.from}. Initiating WebRTC connection.`);
+          logToFile(`🔄 Received client-hello from ${data.from}. Processing session request.`);
           try {
+            let sessionId;
+            let isNewSession = false;
+            let availableSessions = sessionManager.getAllSessions();
+
+            // Handle session request from client
+            if (data.sessionRequest) {
+              if (data.sessionRequest.sessionId) {
+                // Connect to existing session
+                sessionId = data.sessionRequest.sessionId;
+                logToFile(`[SESSION] Client requesting existing session: ${sessionId}`);
+                if (!sessionManager.getSession(sessionId)) {
+                  logToFile(`[SESSION] ⚠️ Requested session ${sessionId} not found, creating new session`);
+                  sessionId = sessionManager.createSession(data.sessionRequest.sessionName, data.from);
+                  isNewSession = true;
+                }
+              } else if (data.sessionRequest.newSession) {
+                // Create new session
+                sessionId = sessionManager.createSession(data.sessionRequest.sessionName, data.from);
+                isNewSession = true;
+                logToFile(`[SESSION] Client requesting new session: ${sessionId}`);
+              } else {
+                // Default: create new session if no specific request
+                sessionId = sessionManager.createSession(null, data.from);
+                isNewSession = true;
+              }
+            } else {
+              // Backward compatibility: no session request means create default session
+              sessionId = sessionManager.createSession(null, data.from);
+              isNewSession = true;
+            }
+
+            if (!sessionId) {
+              logToFile(`[SESSION] ❌ Failed to create/connect to session`);
+              sendMessage({ 
+                type: 'error', 
+                message: 'Failed to create session - maximum sessions reached', 
+                to: data.from, 
+                from: AGENT_ID 
+              });
+              break;
+            }
+
+            // Connect client to session
+            sessionManager.connectClientToSession(data.from, sessionId);
+
             await createPeerConnection(data.from);
             logToFile('📡 PeerConnection created, generating offer...');
             const offer = await peerConnection.createOffer();
             logToFile(`📋 Offer created: ${offer.type}`);
             await peerConnection.setLocalDescription(offer);
-            logToFile('📤 Sending WebRTC offer to client.');
-            sendMessage({ type: 'offer', sdp: offer.sdp, to: data.from, from: AGENT_ID });
-            logToFile('✅ WebRTC offer sent successfully');
+            
+            // Send WebRTC offer with session assignment
+            sendMessage({ 
+              type: 'offer', 
+              sdp: offer.sdp, 
+              to: data.from, 
+              from: AGENT_ID,
+              sessionId: sessionId,
+              sessionName: sessionManager.getSession(sessionId).name,
+              isNewSession: isNewSession,
+              availableSessions: availableSessions
+            });
+            logToFile('✅ WebRTC offer sent with session assignment');
             
             // Force ICE gathering if it hasn't started within 2 seconds
             logToFile('[AGENT] 🔧 Setting up ICE gathering fallback timer...');
@@ -204,8 +517,7 @@ async function createPeerConnection(clientId) {
   dataChannel = peerConnection.createDataChannel('terminal', {
     ordered: true
   });
-  setupDataChannel();
-  setupTerminal();
+  setupDataChannel(clientId);
   
   peerConnection.ondatachannel = (event) => {
     logToFile('[AGENT] Additional data channel received (this should not happen)');
@@ -235,11 +547,11 @@ async function createPeerConnection(clientId) {
         break;
       case 'failed':
         logToFile('[AGENT] ❌ ICE connection failed - no viable candidates');
-        cleanup();
+        cleanup(clientId);
         break;
       case 'disconnected':
         logToFile('[AGENT] ⚠️ ICE connection disconnected');
-        cleanup();
+        cleanup(clientId);
         break;
       case 'closed':
         logToFile('[AGENT] 🔐 ICE connection closed');
@@ -299,11 +611,12 @@ async function createPeerConnection(clientId) {
   };
 }
 
-function cleanup() {
-  if (term) {
-    term.kill();
-    term = null;
+function cleanup(clientId = null) {
+  // Disconnect client from session manager
+  if (clientId) {
+    sessionManager.disconnectClient(clientId);
   }
+  
   if (dataChannel) {
     dataChannel.close();
     dataChannel = null;
@@ -314,7 +627,7 @@ function cleanup() {
   }
 }
 
-function setupDataChannel() {
+function setupDataChannel(clientId) {
   dataChannel.onopen = () => {
     logToFile('[AGENT] ✅ Data channel is open!');
   };
@@ -322,11 +635,35 @@ function setupDataChannel() {
   dataChannel.onmessage = (event) => {
     try {
       const message = JSON.parse(event.data);
-      if (term && message.type === 'input') {
-        term.write(message.data);
-      } else if (term && message.type === 'resize') {
-        logToFile(`[AGENT] Resizing terminal to ${message.cols}x${message.rows}`);
-        term.resize(message.cols, message.rows);
+      const session = sessionManager.getClientSession(clientId);
+      
+      if (!session) {
+        logToFile(`[AGENT] ⚠️ No session found for client ${clientId}`);
+        return;
+      }
+
+      if (message.type === 'input') {
+        sessionManager.writeToSession(session.id, message.data);
+      } else if (message.type === 'resize') {
+        logToFile(`[AGENT] Resizing session ${session.id} to ${message.cols}x${message.rows}`);
+        sessionManager.resizeSession(session.id, message.cols, message.rows);
+      } else if (message.type === 'session-switch') {
+        // Handle session switching
+        logToFile(`[AGENT] Client ${clientId} switching to session ${message.sessionId}`);
+        if (sessionManager.connectClientToSession(clientId, message.sessionId)) {
+          // Send confirmation and buffered output
+          const newSession = sessionManager.getSession(message.sessionId);
+          dataChannel.send(JSON.stringify({
+            type: 'session-switched',
+            sessionId: message.sessionId,
+            sessionName: newSession.name
+          }));
+        } else {
+          dataChannel.send(JSON.stringify({
+            type: 'error',
+            message: `Session ${message.sessionId} not found`
+          }));
+        }
       }
     } catch (err) {
       logToFile(`[AGENT] Error parsing data channel message: ${err.message}`);
@@ -335,7 +672,7 @@ function setupDataChannel() {
 
   dataChannel.onclose = () => {
     logToFile('[AGENT] Data channel closed.');
-    cleanup();
+    cleanup(clientId);
   };
 
   dataChannel.onerror = (error) => {
@@ -343,50 +680,6 @@ function setupDataChannel() {
   };
 }
 
-function setupTerminal() {
-  logToFile('[AGENT] Spawning new terminal');
-  
-  // Use zsh (default on modern macOS) instead of bash for Mac-like experience
-  const macShell = os.platform() === 'darwin' ? '/bin/zsh' : shell;
-  
-  // Create enhanced environment for Mac terminal appearance
-  const terminalEnv = {
-    ...process.env,
-    TERM: 'xterm-256color',        // Enable full 256 color support
-    COLORTERM: 'truecolor',        // Enable true color support
-    LANG: 'en_US.UTF-8',          // Proper locale for Mac
-    LC_ALL: 'en_US.UTF-8',        // Full UTF-8 support
-    SHELL: macShell,               // Set proper shell
-    TERM_PROGRAM: 'Terminal',      // Mimic macOS Terminal.app
-    TERM_PROGRAM_VERSION: '2.12.7' // Recent Terminal.app version
-  };
-  
-  term = pty.spawn(macShell, ['--login'], {
-    name: 'xterm-256color',        // Full color terminal emulation
-    cols: 120,                     // Wider default like Mac terminal
-    rows: 30,
-    cwd: process.env.HOME,
-    env: terminalEnv,
-    encoding: 'utf8'               // Ensure UTF-8 encoding
-  });
-
-  term.on('data', (data) => {
-    if (dataChannel && dataChannel.readyState === 'open') {
-      try {
-        dataChannel.send(JSON.stringify({ type: 'output', data: data }));
-      } catch (err) {
-        logToFile(`[AGENT] Error sending terminal output: ${err.message}`);
-      }
-    }
-  });
-
-  term.on('exit', (code) => {
-    logToFile(`[AGENT] Terminal process exited with code ${code}`);
-    cleanup();
-  });
-
-  logToFile(`[AGENT] ✅ Terminal spawned (PID: ${term.pid})`);
-}
 
 function sendMessage(message) {
   if (ws && ws.readyState === WebSocket.OPEN) {

package/package.json

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

@@ -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,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
@@ -174,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">
@@ -401,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; }
@@ -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>
     

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,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));
@@ -459,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);
@@ -521,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;
+    }
 }