shell-mirror 1.5.80 → 1.5.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.80",
+  "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,155 +109,121 @@
         gap: 8px;
       }
 
-      /* Session Info Button */
-      .session-info-btn {
-        background: transparent;
-        border: 1px solid #444;
-        color: #ccc;
-        padding: 4px 12px;
-        border-radius: 4px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 0.9em;
-        transition: all 0.2s ease;
-      }
-
-      .session-info-btn:hover {
-        background: #3a3a3a;
-        border-color: #667eea;
-      }
-
-      .session-name {
-        font-weight: bold;
-        color: #fff;
+      /* Connection Status Indicator */
+      .connection-status {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: #ff4444;
+        margin-right: 12px;
+        flex-shrink: 0;
       }
 
-      .session-id {
-        color: #999;
-        font-size: 0.85em;
+      .connection-status.connecting {
+        background: #ffaa44;
+        animation: pulse 1.5s ease-in-out infinite;
       }
 
-      .dropdown-arrow {
-        color: #888;
-        font-size: 0.7em;
+      .connection-status.connected {
+        background: #44ff44;
+        box-shadow: 0 0 6px rgba(68, 255, 68, 0.5);
       }
 
-      /* Session Info Dropdown */
-      .session-info-dropdown {
-        display: none;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        margin-top: 8px;
+      /* Session Tab Bar */
+      .session-tab-bar {
+        display: flex;
+        gap: 4px;
+        padding: 8px;
         background: #2a2a2a;
-        border: 1px solid #555;
-        border-radius: 4px;
-        min-width: 280px;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-        z-index: 1000;
-      }
-
-      .session-info-dropdown.show {
-        display: block;
-      }
-
-      .dropdown-section {
-        padding: 12px 16px;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        flex: 1;
+        align-items: center;
       }
 
-      .dropdown-divider {
-        height: 1px;
-        background: #444;
+      .session-tab-bar::-webkit-scrollbar {
+        height: 4px;
       }
 
-      .session-detail-name {
-        font-weight: bold;
-        color: #fff;
-        margin-bottom: 4px;
+      .session-tab-bar::-webkit-scrollbar-thumb {
+        background: #555;
+        border-radius: 2px;
       }
 
-      .session-detail-id {
+      .session-tab {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 8px 12px;
+        background: transparent;
+        border: none;
+        border-bottom: 3px solid transparent;
         color: #999;
-        font-size: 0.85em;
-        font-family: monospace;
+        cursor: pointer;
+        min-width: 120px;
+        white-space: nowrap;
+        transition: all 0.2s ease;
+        flex-shrink: 0;
       }
 
-      .connection-detail {
+      .session-tab:hover {
+        background: #3a3a3a;
         color: #ccc;
-        font-size: 0.9em;
       }
 
-      .version-info {
-        color: #888;
-        font-size: 0.85em;
+      .session-tab.active {
+        color: #fff;
+        font-weight: 600;
+        border-bottom-color: #667eea;
+        background: #1a1a1a;
       }
 
-      /* Sessions Dropdown */
-      .session-dropdown {
-        position: relative;
-        display: inline-block;
+      .session-tab-status {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
       }
 
-      .session-dropdown-btn {
-        background: transparent;
-        color: #ccc;
-        border: 1px solid #444;
-        padding: 4px 12px;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 0.9em;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        transition: all 0.2s ease;
+      .session-tab-status.connected {
+        background: #44ff44;
+        box-shadow: 0 0 6px rgba(68, 255, 68, 0.5);
       }
 
-      .session-dropdown-btn:hover {
-        background: #3a3a3a;
-        border-color: #667eea;
+      .session-tab-status.connecting {
+        background: #ffaa44;
+        animation: pulse 1.5s ease-in-out infinite;
       }
 
-      .session-dropdown-content {
-        display: none;
-        position: absolute;
-        background: #2a2a2a;
-        border: 1px solid #555;
-        border-radius: 4px;
-        left: 50%;
-        transform: translateX(-50%);
-        top: 100%;
-        margin-top: 8px;
-        min-width: 200px;
-        z-index: 1000;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+      .session-tab-status.disconnected {
+        background: #ff4444;
       }
 
-      .session-dropdown-content.show {
-        display: block;
+      .session-tab-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      .session-dropdown-item {
-        padding: 8px 12px;
+      .session-tab-new {
+        padding: 6px 12px;
+        background: #667eea;
+        border-radius: 4px;
+        color: white;
+        border: none;
         cursor: pointer;
-        border-bottom: 1px solid #444;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .session-dropdown-item:last-child {
-        border-bottom: none;
+        margin-left: 4px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+        flex-shrink: 0;
       }
 
-      .session-dropdown-item:hover {
-        background: #3a3a3a;
+      .session-tab-new:hover {
+        background: #5568d3;
       }
 
-      .session-dropdown-item.current {
-        background: #4285f4;
-        color: white;
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
       }
 
       /* Header Buttons */
@@ -434,54 +400,22 @@
     </div>
     <div id="terminal-container">
         <div class="session-header" id="session-header" style="display: none;">
-            <div class="header-left">
-                <div class="connection-status" id="connection-status"></div>
-                <button class="session-info-btn" id="session-info-btn">
-                    <span class="session-name" id="session-name">Terminal Session</span>
-                    <span class="session-id" id="session-id"></span>
-                    <span class="dropdown-arrow">▼</span>
-                </button>
-
-                <!-- Session Info Dropdown -->
-                <div class="session-info-dropdown" id="session-info-dropdown">
-                    <div class="dropdown-section">
-                        <div class="session-detail-name" id="detail-name">Session 1</div>
-                        <div class="session-detail-id" id="detail-id">ses_1764...</div>
-                    </div>
-                    <div class="dropdown-divider"></div>
-                    <div class="dropdown-section">
-                        <div class="connection-detail" id="connection-detail">
-                            🟢 Connected via WebRTC
-                        </div>
-                    </div>
-                    <div class="dropdown-divider"></div>
-                    <div class="dropdown-section version-info">
-                        <div id="version-info-dropdown">v1.5.76 • Built Nov 26, 2025</div>
-                    </div>
-                </div>
-            </div>
+            <!-- Connection Status Indicator -->
+            <div class="connection-status" id="connection-status"></div>
 
-            <div class="header-center">
-                <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>
+            <!-- Session Tab Bar -->
+            <div class="session-tab-bar" id="session-tab-bar">
+                <!-- Tabs will be rendered here by JavaScript -->
             </div>
 
+            <!-- Header Right Section -->
             <div class="header-right">
                 <button class="header-btn help-btn" onclick="showHelpModal()">
                     <span>📖</span>
                     <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

@@ -170,8 +170,10 @@ function updateConnectionStatus(status) {
             break;
     }
 
-    // Update connection detail in dropdown
-    updateConnectionDetail(status);
+    // Update tab status indicators
+    if (currentSession) {
+        renderTabs();
+    }
 }
 
 // Cleanup timer for chunk assembler
@@ -246,42 +248,6 @@ async function loadVersionInfo() {
 }
 
 // Update connection detail in dropdown
-function updateConnectionDetail(status, method = 'WebRTC') {
-    const detail = document.getElementById('connection-detail');
-    if (!detail) return;
-
-    const statusIcons = {
-        connected: '🟢',
-        connecting: '🟡',
-        disconnected: '🔴'
-    };
-
-    const statusTexts = {
-        connected: 'Connected',
-        connecting: 'Connecting',
-        disconnected: 'Disconnected'
-    };
-
-    detail.textContent = `${statusIcons[status] || '⚪'} ${statusTexts[status] || 'Unknown'} via ${method}`;
-}
-
-// Update session details in dropdown
-function updateSessionDetails() {
-    if (currentSession) {
-        const detailName = document.getElementById('detail-name');
-        const detailId = document.getElementById('detail-id');
-
-        if (detailName) {
-            detailName.textContent = currentSession.name || 'Terminal Session';
-        }
-        if (detailId) {
-            detailId.textContent = `ID: ${currentSession.id}`;
-        }
-    }
-}
-
-
-
 function startConnection() {
     updateConnectionStatus('connecting');
     connectContainer.style.display = 'none';
@@ -598,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.');
@@ -957,50 +928,84 @@ function sendMessage(message) {
 // Session Management Functions
 function updateSessionDisplay() {
     const sessionHeader = document.getElementById('session-header');
-    const sessionName = document.getElementById('session-name');
-    const sessionId = document.getElementById('session-id');
+    if (!sessionHeader) {
+        console.warn('[CLIENT] ⚠️ session-header element not found');
+        return;
+    }
 
     if (currentSession) {
         sessionHeader.style.display = 'flex';
-        sessionName.textContent = currentSession.name;
-        sessionId.textContent = `(${currentSession.id.substring(0, 8)}...)`;
-
-        // Update available sessions dropdown
-        updateSessionDropdown();
 
-        // Update session details in dropdown
-        updateSessionDetails();
+        // Update tabs
+        console.log('[CLIENT] 📋 Rendering tabs, availableSessions:', availableSessions);
+        renderTabs();
 
         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
+function renderTabs() {
+    const tabBar = document.getElementById('session-tab-bar');
+    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) {
-        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>
+        // 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 (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' : ''}
+                        title="${displayName}">
+                    <span class="session-tab-status ${connectionStatus}"></span>
+                    <span class="session-tab-name">${displayName}</span>
+                </button>
             `;
-            item.onclick = () => switchToSession(session.id);
-            dropdownContent.appendChild(item);
-        });
+        }).join('');
+    }
+
+    // Add new session 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 {
+        return 'disconnected';
     }
 }
 
@@ -1022,15 +1027,12 @@ function switchToSession(sessionId) {
         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 
+    dataChannel.send(JSON.stringify({
+        type: 'session-switch',
+        sessionId: sessionId
     }));
-    
-    // Hide dropdown
-    document.getElementById('session-dropdown-content').classList.remove('show');
 }
 
 function createNewSession() {
@@ -1040,50 +1042,6 @@ function createNewSession() {
     window.location.href = url.toString();
 }
 
-// Setup dropdown toggles
-document.addEventListener('DOMContentLoaded', () => {
-    // Session info dropdown
-    const sessionInfoBtn = document.getElementById('session-info-btn');
-    const sessionInfoDropdown = document.getElementById('session-info-dropdown');
-
-    // Sessions menu dropdown
-    const dropdownBtn = document.getElementById('session-dropdown-btn');
-    const dropdownContent = document.getElementById('session-dropdown-content');
-
-    // Session info dropdown toggle
-    if (sessionInfoBtn && sessionInfoDropdown) {
-        sessionInfoBtn.onclick = (e) => {
-            e.stopPropagation();
-            sessionInfoDropdown.classList.toggle('show');
-            // Close sessions dropdown if open
-            if (dropdownContent) {
-                dropdownContent.classList.remove('show');
-            }
-        };
-    }
-
-    // Sessions menu dropdown toggle
-    if (dropdownBtn && dropdownContent) {
-        dropdownBtn.onclick = (e) => {
-            e.stopPropagation();
-            dropdownContent.classList.toggle('show');
-            // Close session info dropdown if open
-            if (sessionInfoDropdown) {
-                sessionInfoDropdown.classList.remove('show');
-            }
-        };
-    }
-
-    // Close both dropdowns when clicking outside
-    document.addEventListener('click', () => {
-        if (dropdownContent) {
-            dropdownContent.classList.remove('show');
-        }
-        if (sessionInfoDropdown) {
-            sessionInfoDropdown.classList.remove('show');
-        }
-    });
-});
 
 // Handle session-related data channel messages
 function handleSessionMessage(message) {