shell-mirror 1.5.83 → 1.5.85

package/mac-agent/agent.js

@@ -931,6 +931,31 @@ function setupDataChannel(clientId) {
             message: `Session ${message.sessionId} not found`
           }));
         }
+      } else if (message.type === 'session-create') {
+        // Handle new session creation via data channel
+        logToFile(`[AGENT] Client ${clientId} creating new session`);
+
+        const newSessionId = sessionManager.createSession(null, clientId);
+
+        if (newSessionId) {
+          const newSession = sessionManager.getSession(newSessionId);
+
+          // Send confirmation with updated session list
+          dataChannel.send(JSON.stringify({
+            type: 'session-created',
+            sessionId: newSessionId,
+            sessionName: newSession.name,
+            availableSessions: sessionManager.getAllSessions()
+          }));
+
+          logToFile(`[AGENT] ✅ New session created: ${newSessionId}`);
+        } else {
+          dataChannel.send(JSON.stringify({
+            type: 'error',
+            message: 'Failed to create session - maximum sessions reached'
+          }));
+          logToFile(`[AGENT] ❌ Failed to create session for client ${clientId}`);
+        }
       }
     } catch (err) {
       logToFile(`[AGENT] Error parsing data channel message: ${err.message}`);
@@ -1038,6 +1063,7 @@ function startLocalServer() {
             localWs.send(JSON.stringify({
               type: 'session_created',
               sessionId,
+              sessionName: `Session ${sessionId.slice(0, 8)}`,
               cols: message.cols || 120,
               rows: message.rows || 30
             }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.83",
+  "version": "1.5.85",
   "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/terminal.html

@@ -109,6 +109,26 @@
         gap: 8px;
       }
 
+      /* Connection Status Indicator */
+      .connection-status {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: #ff4444;
+        margin-right: 12px;
+        flex-shrink: 0;
+      }
+
+      .connection-status.connecting {
+        background: #ffaa44;
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+
+      .connection-status.connected {
+        background: #44ff44;
+        box-shadow: 0 0 6px rgba(68, 255, 68, 0.5);
+      }
+
       /* Session Tab Bar */
       .session-tab-bar {
         display: flex;
@@ -158,27 +178,6 @@
         background: #1a1a1a;
       }
 
-      .session-tab-status {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-
-      .session-tab-status.connected {
-        background: #44ff44;
-        box-shadow: 0 0 6px rgba(68, 255, 68, 0.5);
-      }
-
-      .session-tab-status.connecting {
-        background: #ffaa44;
-        animation: pulse 1.5s ease-in-out infinite;
-      }
-
-      .session-tab-status.disconnected {
-        background: #ff4444;
-      }
-
       .session-tab-name {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -237,23 +236,6 @@
         }
       }
 
-      /* Dashboard button with status dot */
-      .dashboard-btn {
-        position: relative;
-      }
-
-      .dashboard-btn::before {
-        content: '';
-        position: absolute;
-        top: 4px;
-        right: 4px;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: #44ff44;
-        box-shadow: 0 0 8px rgba(68, 255, 68, 0.5);
-      }
-      
       #terminal {
         padding: 8px;  /* Mac Terminal.app padding */
         background-color: #000000;
@@ -355,6 +337,9 @@
     </div>
     <div id="terminal-container">
         <div class="session-header" id="session-header" style="display: none;">
+            <!-- Connection Status Indicator -->
+            <div class="connection-status" id="connection-status"></div>
+
             <!-- Session Tab Bar -->
             <div class="session-tab-bar" id="session-tab-bar">
                 <!-- Tabs will be rendered here by JavaScript -->

package/public/app/terminal.js

@@ -153,10 +153,16 @@ const chunkAssembler = {
 
 // Connection status management
 function updateConnectionStatus(status) {
-    // Update tab status indicators only (removed global connection-status element)
-    if (currentSession) {
-        renderTabs();
+    const statusElement = document.getElementById('connection-status');
+    if (!statusElement) return;
+
+    statusElement.className = 'connection-status';
+    if (status === 'connecting') {
+        statusElement.classList.add('connecting');
+    } else if (status === 'connected') {
+        statusElement.classList.add('connected');
     }
+    // else: disconnected (default red)
 }
 
 // Cleanup timer for chunk assembler
@@ -382,8 +388,20 @@ function setupDirectConnection(directWs) {
                 
             case 'session_created':
                 console.log('[CLIENT] ✅ Direct session created:', data.sessionId);
-                currentSession = { id: data.sessionId };
+                currentSession = {
+                    id: data.sessionId,
+                    name: data.sessionName || 'Terminal Session'
+                };
+
+                // Update available sessions
+                if (data.availableSessions) {
+                    availableSessions = data.availableSessions;
+                }
+
                 updateSessionDisplay();
+
+                // Save to localStorage
+                saveSessionToLocalStorage(AGENT_ID, currentSession);
                 break;
                 
             case 'output':
@@ -958,14 +976,12 @@ function renderTabs() {
         tabsHTML = sessionsToRender.map(session => {
             const isActive = currentSession && session.id === currentSession.id;
             const displayName = session.name || 'Terminal Session';
-            const status = getSessionStatus(session.id); // Per-session status
 
             return `
                 <button class="session-tab ${isActive ? 'active' : ''}"
                         onclick="switchToSession('${session.id}')"
                         ${isActive ? 'disabled' : ''}
                         title="${displayName}">
-                    <span class="session-tab-status ${status}"></span>
                     <span class="session-tab-name">${displayName}</span>
                 </button>
             `;
@@ -979,18 +995,27 @@ function renderTabs() {
     console.log('[CLIENT] ✅ Tabs rendered:', sessionsToRender.length, 'tabs');
 }
 
-function getSessionStatus(sessionId) {
-    // Current/active session shows actual connection status
-    if (currentSession && sessionId === currentSession.id) {
-        if (dataChannel && dataChannel.readyState === 'open') {
-            return 'connected';
-        } else if (dataChannel && dataChannel.readyState === 'connecting') {
-            return 'connecting';
-        }
-        return 'disconnected';
+function getConnectionStatus() {
+    // Check direct WebSocket connection
+    if (ws && ws.readyState === WebSocket.OPEN) {
+        return 'connected';
+    }
+
+    // Check WebRTC data channel connection
+    if (dataChannel && dataChannel.readyState === 'open') {
+        return 'connected';
+    }
+
+    // Check connecting states
+    if (ws && ws.readyState === WebSocket.CONNECTING) {
+        return 'connecting';
     }
 
-    // Inactive sessions show as disconnected (not currently connected)
+    if (dataChannel && dataChannel.readyState === 'connecting') {
+        return 'connecting';
+    }
+
+    // Not connected
     return 'disconnected';
 }
 
@@ -1021,16 +1046,60 @@ function switchToSession(sessionId) {
 }
 
 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();
+    console.log('[CLIENT] 🆕 Creating new session...');
+
+    if (ws && ws.readyState === WebSocket.OPEN) {
+        // Direct WebSocket connection - use underscore
+        ws.send(JSON.stringify({
+            type: 'create_session',
+            cols: term.cols,
+            rows: term.rows
+        }));
+    } else if (dataChannel && dataChannel.readyState === 'open') {
+        // WebRTC data channel connection - use hyphen
+        dataChannel.send(JSON.stringify({
+            type: 'session-create',
+            cols: term.cols,
+            rows: term.rows
+        }));
+    } else {
+        console.error('[CLIENT] ❌ Cannot create session - no active connection');
+        term.write('\r\n\x1b[31m❌ Cannot create session - not connected\x1b[0m\r\n');
+    }
 }
 
 
 // Handle session-related data channel messages
 function handleSessionMessage(message) {
     switch (message.type) {
+        case 'session-created':
+            console.log('[CLIENT] ✅ New session created:', message.sessionId);
+
+            // Update current session
+            currentSession = {
+                id: message.sessionId,
+                name: message.sessionName || 'Terminal Session'
+            };
+
+            // Update available sessions list
+            if (message.availableSessions) {
+                availableSessions = message.availableSessions;
+            } else {
+                // Add to local list if not provided
+                availableSessions.push(currentSession);
+            }
+
+            // Clear terminal for new session
+            term.clear();
+            term.write(`\r\n\x1b[36m✨ New session created: ${currentSession.name}\x1b[0m\r\n\r\n`);
+
+            // Update UI
+            updateSessionDisplay();
+
+            // Save to localStorage
+            saveSessionToLocalStorage(AGENT_ID, currentSession);
+            break;
+
         case 'session-switched':
             currentSession = {
                 id: message.sessionId,
@@ -1039,7 +1108,7 @@ function handleSessionMessage(message) {
             updateSessionDisplay();
             term.clear(); // Clear terminal for new session
             console.log('[CLIENT] ✅ Switched to session:', currentSession);
-            
+
             // Save updated session info
             saveSessionToLocalStorage(AGENT_ID, currentSession);
             break;