shell-mirror 1.5.81 → 1.5.83

package/mac-agent/agent.js

@@ -910,6 +910,21 @@ function setupDataChannel(clientId) {
             sessionId: message.sessionId,
             sessionName: newSession.name
           }));
+
+          // Send buffered output for this session
+          const bufferedOutput = newSession.buffer.getAll();
+          if (bufferedOutput) {
+            logToFile(`[AGENT] 📤 Sending ${bufferedOutput.length} chars of buffered output for session switch`);
+            const success = sendLargeMessage(dataChannel, {
+              type: 'output',
+              data: bufferedOutput
+            }, '[AGENT]');
+            if (!success) {
+              logToFile('[AGENT] ❌ Failed to send buffered output');
+            }
+          } else {
+            logToFile('[AGENT] ℹ️ No buffered output for switched session');
+          }
         } else {
           dataChannel.send(JSON.stringify({
             type: 'error',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.81",
+  "version": "1.5.83",
   "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,7 +109,6 @@
         gap: 8px;
       }
 
-      /* Session Info Button */
       /* Session Tab Bar */
       .session-tab-bar {
         display: flex;
@@ -265,31 +264,6 @@
       #connect-container { padding: 2em; text-align: center; }
       #agent-id-input { font-size: 1.2em; padding: 8px; width: 400px; margin-bottom: 1em; }
       #connect-btn { font-size: 1.2em; padding: 10px 20px; }
-      
-      /* Connection Status Indicator */
-      .connection-status {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: #ff4444;
-        margin-right: 4px;
-        transition: all 0.3s ease;
-      }
-      
-      .connection-status.connected {
-        background: #44ff44;
-        box-shadow: 0 0 8px rgba(68, 255, 68, 0.5);
-      }
-      
-      .connection-status.connecting {
-        background: #ffaa44;
-        animation: pulse 1.5s ease-in-out infinite alternate;
-      }
-      
-      @keyframes pulse {
-        from { opacity: 1; }
-        to { opacity: 0.4; }
-      }
 
       /* Help Modal - Tab Navigation */
       .help-tabs {
@@ -393,7 +367,7 @@
                     <span class="btn-text">Help</span>
                 </button>
                 <a href="/app/dashboard.html" class="header-btn dashboard-btn">
-                    <span>📊</span>
+                    <span class="btn-text">Dashboard</span>
                 </a>
             </div>
         </div>

package/public/app/terminal.js

@@ -153,24 +153,7 @@ const chunkAssembler = {
 
 // 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;
-    }
-
-    // Update tab status indicators
+    // Update tab status indicators only (removed global connection-status element)
     if (currentSession) {
         renderTabs();
     }
@@ -564,6 +547,11 @@ async function initializeWebRTCSignaling() {
                             if (nextData.availableSessions) {
                                 availableSessions = nextData.availableSessions;
                                 console.log('[CLIENT] 📚 Available sessions:', availableSessions);
+
+                                // Re-render tabs with updated session list
+                                if (currentSession) {
+                                    renderTabs();
+                                }
                             }
 
                             console.log('[CLIENT] Received WebRTC offer from agent.');
@@ -923,11 +911,16 @@ function sendMessage(message) {
 // Session Management Functions
 function updateSessionDisplay() {
     const sessionHeader = document.getElementById('session-header');
+    if (!sessionHeader) {
+        console.warn('[CLIENT] ⚠️ session-header element not found');
+        return;
+    }
 
     if (currentSession) {
         sessionHeader.style.display = 'flex';
 
         // Update tabs
+        console.log('[CLIENT] 📋 Rendering tabs, availableSessions:', availableSessions);
         renderTabs();
 
         console.log('[CLIENT] 📋 Session display updated:', currentSession);
@@ -936,42 +929,69 @@ function updateSessionDisplay() {
 
 function renderTabs() {
     const tabBar = document.getElementById('session-tab-bar');
-    if (!tabBar) return;
+    if (!tabBar) {
+        console.warn('[CLIENT] ⚠️ session-tab-bar element not found');
+        return;
+    }
 
-    // Get connection status
-    const connectionStatus = getConnectionStatus();
+    // Ensure we have sessions to display
+    let sessionsToRender = [];
+
+    if (availableSessions && availableSessions.length > 0) {
+        // Use availableSessions from agent
+        sessionsToRender = availableSessions;
+    } else if (currentSession) {
+        // Fallback: show at least the current session
+        sessionsToRender = [currentSession];
+    }
+
+    console.log('[CLIENT] 🎨 Rendering tabs:', {
+        sessionCount: sessionsToRender.length,
+        currentSession: currentSession?.id,
+        source: availableSessions?.length > 0 ? 'agent' : 'fallback'
+    });
 
     // Build tabs HTML
     let tabsHTML = '';
 
-    if (availableSessions && availableSessions.length > 0) {
-        tabsHTML = availableSessions.map(session => {
+    if (sessionsToRender.length > 0) {
+        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' : ''}>
-                    <span class="session-tab-status ${connectionStatus}"></span>
-                    <span class="session-tab-name">${session.name}</span>
+                        ${isActive ? 'disabled' : ''}
+                        title="${displayName}">
+                    <span class="session-tab-status ${status}"></span>
+                    <span class="session-tab-name">${displayName}</span>
                 </button>
             `;
         }).join('');
     }
 
     // Add new session button
-    tabsHTML += '<button class="session-tab-new" onclick="createNewSession()">+</button>';
+    tabsHTML += '<button class="session-tab-new" onclick="createNewSession()" title="New Session">+</button>';
 
     tabBar.innerHTML = tabsHTML;
+    console.log('[CLIENT] ✅ Tabs rendered:', sessionsToRender.length, 'tabs');
 }
 
-function getConnectionStatus() {
-    if (dataChannel && dataChannel.readyState === 'open') {
-        return 'connected';
-    } else if (dataChannel && dataChannel.readyState === 'connecting') {
-        return 'connecting';
-    } else {
+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';
     }
+
+    // Inactive sessions show as disconnected (not currently connected)
+    return 'disconnected';
 }
 
 function formatLastActivity(timestamp) {