shell-mirror 1.5.97 → 1.5.99

package/mac-agent/agent.js

@@ -423,10 +423,20 @@ let heartbeatInterval;
 
 async function sendHeartbeat() {
   try {
+    // Get full session list for dashboard display
+    const sessionList = sessionManager.getAllSessions().map(session => ({
+      id: session.id,
+      name: session.name,
+      lastActivity: session.lastActivity,
+      createdAt: session.createdAt,
+      status: session.status
+    }));
+
     const heartbeatData = JSON.stringify({
       agentId: AGENT_ID,
       timestamp: Date.now(),
-      activeSessions: Object.keys(sessionManager.sessions).length,
+      activeSessions: sessionList.length,
+      sessions: sessionList, // Full session list for dashboard
       localPort: process.env.LOCAL_PORT || 8080,
       capabilities: ['webrtc', 'direct_websocket']
     });
@@ -519,7 +529,6 @@ function connectToSignalingServer() {
           try {
             let sessionId;
             let isNewSession = false;
-            let availableSessions = sessionManager.getAllSessions();
 
             // Handle session request from client
             if (data.sessionRequest) {
@@ -569,15 +578,16 @@ function connectToSignalingServer() {
             await peerConnection.setLocalDescription(offer);
             
             // Send WebRTC offer with session assignment
-            sendMessage({ 
-              type: 'offer', 
-              sdp: offer.sdp, 
-              to: data.from, 
+            // Get availableSessions AFTER session creation so new session is included
+            sendMessage({
+              type: 'offer',
+              sdp: offer.sdp,
+              to: data.from,
               from: AGENT_ID,
               sessionId: sessionId,
               sessionName: sessionManager.getSession(sessionId).name,
               isNewSession: isNewSession,
-              availableSessions: availableSessions
+              availableSessions: sessionManager.getAllSessions()
             });
             logToFile('✅ WebRTC offer sent with session assignment');
             
@@ -1007,6 +1017,9 @@ process.on('SIGTERM', () => {
 });
 
 // --- Local WebSocket Server for Direct Connections ---
+// Sessions storage for direct WebSocket connections
+const directSessions = {};
+
 function startLocalServer() {
   const localPort = process.env.LOCAL_PORT || 8080;
   const localServer = require('ws').Server;
@@ -1039,57 +1052,96 @@ function startLocalServer() {
             break;
 
           case 'create_session':
-            // Create new terminal session for direct connection
-            const sessionId = uuidv4();
-            const ptyProcess = pty.spawn(shell, [], {
-              name: 'xterm-color',
-              cols: message.cols || 120,
-              rows: message.rows || 30,
-              cwd: process.env.HOME,
-              env: process.env
-            });
+            // Check if client requested an existing session
+            let sessionId;
+            let isNewSession = false;
 
-            // Store session
-            sessions[sessionId] = {
-              pty: ptyProcess,
-              buffer: new CircularBuffer(),
-              lastActivity: Date.now()
-            };
+            if (message.sessionId && directSessions[message.sessionId]) {
+              // Reconnect to existing session
+              sessionId = message.sessionId;
+              logToFile(`[LOCAL] Reconnecting to existing session: ${sessionId}`);
+
+              // Update activity timestamp
+              directSessions[sessionId].lastActivity = Date.now();
+
+              // Re-attach output handler for this connection
+              directSessions[sessionId].pty.onData((data) => {
+                if (localWs.readyState === WebSocket.OPEN) {
+                  localWs.send(JSON.stringify({
+                    type: 'output',
+                    sessionId,
+                    data
+                  }));
+                }
+              });
 
-            // Send session output to direct connection
-            ptyProcess.onData((data) => {
-              if (localWs.readyState === WebSocket.OPEN) {
+              // Send buffered output if available
+              const bufferedOutput = directSessions[sessionId].buffer.getAll();
+              if (bufferedOutput.length > 0) {
                 localWs.send(JSON.stringify({
                   type: 'output',
                   sessionId,
-                  data
+                  data: bufferedOutput.join('')
                 }));
               }
-            });
+            } else {
+              // Create new terminal session
+              sessionId = uuidv4();
+              isNewSession = true;
+
+              const ptyProcess = pty.spawn(shell, [], {
+                name: 'xterm-color',
+                cols: message.cols || 120,
+                rows: message.rows || 30,
+                cwd: process.env.HOME,
+                env: process.env
+              });
+
+              // Store session
+              directSessions[sessionId] = {
+                pty: ptyProcess,
+                buffer: new CircularBuffer(),
+                lastActivity: Date.now()
+              };
+
+              // Send session output to direct connection
+              ptyProcess.onData((data) => {
+                if (localWs.readyState === WebSocket.OPEN) {
+                  localWs.send(JSON.stringify({
+                    type: 'output',
+                    sessionId,
+                    data
+                  }));
+                }
+                // Store in buffer for reconnection
+                directSessions[sessionId].buffer.add(data);
+              });
+
+              logToFile(`[LOCAL] Created new direct session: ${sessionId}`);
+            }
 
             localWs.send(JSON.stringify({
               type: 'session_created',
               sessionId,
               sessionName: `Session ${sessionId.slice(0, 8)}`,
+              isNewSession: isNewSession,
               cols: message.cols || 120,
               rows: message.rows || 30
             }));
-
-            logToFile(`[LOCAL] Created direct session: ${sessionId}`);
             break;
 
           case 'input':
             // Handle terminal input for direct connection
-            if (sessions[message.sessionId]) {
-              sessions[message.sessionId].pty.write(message.data);
-              sessions[message.sessionId].lastActivity = Date.now();
+            if (directSessions[message.sessionId]) {
+              directSessions[message.sessionId].pty.write(message.data);
+              directSessions[message.sessionId].lastActivity = Date.now();
             }
             break;
 
           case 'resize':
             // Handle terminal resize for direct connection
-            if (sessions[message.sessionId]) {
-              sessions[message.sessionId].pty.resize(message.cols, message.rows);
+            if (directSessions[message.sessionId]) {
+              directSessions[message.sessionId].pty.resize(message.cols, message.rows);
             }
             break;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.97",
+  "version": "1.5.99",
   "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.js

@@ -383,7 +383,8 @@ class ShellMirrorDashboard {
     updateAgentsDisplay() {
         const agentsCard = document.querySelector('.dashboard-card');
         if (agentsCard) {
-            agentsCard.innerHTML = this.renderActiveAgents();
+            // Use outerHTML to replace the entire card, not nest inside it
+            agentsCard.outerHTML = this.renderActiveAgents();
         }
     }
 
@@ -421,11 +422,19 @@ class ShellMirrorDashboard {
             if (agentsData.success && agentsData.data && agentsData.data.agents) {
                 this.agents = agentsData.data.agents;
 
+                // Populate agentSessions from API response (sessions are sent via agent heartbeat)
+                this.agentSessions = {};
+                this.agents.forEach(agent => {
+                    if (agent.sessions && agent.sessions.length > 0) {
+                        this.agentSessions[agent.agentId] = agent.sessions;
+                    }
+                });
+
                 // Don't load stale sessions from localStorage - only show live sessions from agents
-                // Sessions will be populated via WebSocket updates from connected agents
                 localStorage.removeItem('shell-mirror-sessions'); // Clear any stale data
             } else {
                 this.agents = [];
+                this.agentSessions = {};
             }
 
             // TODO: Load session history when API is available

package/public/app/terminal.html

@@ -499,9 +499,86 @@
             if (event.target === modal) {
                 closeHelpModal();
             }
+            const closeModal = document.getElementById('close-session-modal');
+            if (event.target === closeModal) {
+                hideCloseSessionModal();
+            }
         });
     </script>
 
+    <!-- Close Session Confirmation Modal -->
+    <div id="close-session-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; z-index: 20000;">
+        <div style="background: #2a2a2a; border-radius: 12px; max-width: 400px; width: 90%; overflow: hidden; border: 1px solid #444; box-shadow: 0 10px 40px rgba(0,0,0,0.5);">
+            <!-- Header -->
+            <div style="padding: 20px 24px; border-bottom: 1px solid #444; display: flex; justify-content: space-between; align-items: center;">
+                <h3 style="margin: 0; font-size: 1.1rem; color: #fff;">Close Session?</h3>
+                <button onclick="hideCloseSessionModal()" style="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: #888;">&times;</button>
+            </div>
+
+            <!-- Content -->
+            <div style="padding: 24px;">
+                <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px;">
+                    <div style="font-size: 2.5rem;">🗑️</div>
+                    <div>
+                        <div id="close-session-name" style="font-size: 1.1rem; color: #fff; font-weight: 500; margin-bottom: 4px;">Session 1</div>
+                        <div id="close-session-duration" style="font-size: 0.85rem; color: #888;">Duration: 5 minutes</div>
+                    </div>
+                </div>
+
+                <p style="color: #bbb; margin: 0 0 24px 0; font-size: 0.9rem; line-height: 1.5;">
+                    This will terminate the terminal session. Any running processes will be stopped.
+                </p>
+
+                <!-- Buttons -->
+                <div style="display: flex; gap: 12px; justify-content: flex-end;">
+                    <button onclick="hideCloseSessionModal()" style="padding: 10px 20px; background: #444; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: background 0.2s;">Cancel</button>
+                    <button id="confirm-close-session-btn" onclick="confirmCloseSession()" style="padding: 10px 20px; background: #dc3545; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: background 0.2s;">Close Session</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Close Session Modal Functions
+        let pendingCloseSessionId = null;
+
+        function showCloseSessionModal(sessionId, sessionName, createdAt) {
+            pendingCloseSessionId = sessionId;
+
+            // Calculate duration
+            const duration = createdAt ? formatDuration(Date.now() - createdAt) : 'Unknown';
+
+            document.getElementById('close-session-name').textContent = sessionName || 'Session';
+            document.getElementById('close-session-duration').textContent = `Duration: ${duration}`;
+            document.getElementById('close-session-modal').style.display = 'flex';
+        }
+
+        function hideCloseSessionModal() {
+            document.getElementById('close-session-modal').style.display = 'none';
+            pendingCloseSessionId = null;
+        }
+
+        function confirmCloseSession() {
+            if (pendingCloseSessionId) {
+                // Call the actual close function from terminal.js
+                doCloseSession(pendingCloseSessionId);
+            }
+            hideCloseSessionModal();
+        }
+
+        function formatDuration(ms) {
+            const seconds = Math.floor(ms / 1000);
+            const minutes = Math.floor(seconds / 60);
+            const hours = Math.floor(minutes / 60);
+            const days = Math.floor(hours / 24);
+
+            if (days > 0) return `${days}d ${hours % 24}h`;
+            if (hours > 0) return `${hours}h ${minutes % 60}m`;
+            if (minutes > 0) return `${minutes} minute${minutes !== 1 ? 's' : ''}`;
+            return `${seconds} second${seconds !== 1 ? 's' : ''}`;
+        }
+    </script>
+
     <script src="/app/terminal.js?v=1.5.88"></script>
   </body>
 </html>

package/public/app/terminal.js

@@ -1025,17 +1025,27 @@ function updateUrlWithSession(sessionId) {
     console.log('[CLIENT] 📍 URL updated with session:', sessionId);
 }
 
-// Close a session with confirmation
+// Close a session with confirmation - shows custom modal
 function closeSession(sessionId, event) {
     event.stopPropagation(); // Don't trigger tab switch
 
     const session = availableSessions.find(s => s.id === sessionId);
     const sessionName = session?.name || 'this session';
+    const createdAt = session?.createdAt || null;
 
-    if (!confirm(`Close "${sessionName}"?\n\nThis will terminate the terminal session.`)) {
-        return;
+    // Show custom modal instead of browser confirm()
+    if (typeof showCloseSessionModal === 'function') {
+        showCloseSessionModal(sessionId, sessionName, createdAt);
+    } else {
+        // Fallback to native confirm if modal not available
+        if (confirm(`Close "${sessionName}"?\n\nThis will terminate the terminal session.`)) {
+            doCloseSession(sessionId);
+        }
     }
+}
 
+// Actually close the session (called from modal confirmation)
+function doCloseSession(sessionId) {
     console.log('[CLIENT] 🗑️ Closing session:', sessionId);
 
     // Send close request to agent