shell-mirror 1.5.81 → 1.5.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.81",
+  "version": "1.5.82",
   "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,26 @@
         gap: 8px;
       }
 
-      /* Session Info Button */
+      /* 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;
@@ -381,6 +400,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 -->
@@ -393,7 +415,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

@@ -564,6 +564,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 +928,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,32 +946,57 @@ 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,
+        connectionStatus,
+        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';
+
             return `
                 <button class="session-tab ${isActive ? 'active' : ''}"
                         onclick="switchToSession('${session.id}')"
-                        ${isActive ? 'disabled' : ''}>
+                        ${isActive ? 'disabled' : ''}
+                        title="${displayName}">
                     <span class="session-tab-status ${connectionStatus}"></span>
-                    <span class="session-tab-name">${session.name}</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() {