shell-mirror 1.5.76 → 1.5.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.76",
+  "version": "1.5.78",
   "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

@@ -76,7 +76,7 @@
         flex-direction: column;
       }
       
-      /* Session Header */
+      /* Session Header - Unified Design */
       .session-header {
         background: #2a2a2a;
         color: #ccc;
@@ -87,64 +87,157 @@
         justify-content: space-between;
         font-size: 0.9em;
         z-index: 100;
+        height: 40px;
       }
-      
-      .session-info {
+
+      .header-left {
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: 10px;
+        position: relative;
       }
-      
-      .session-name {
-        font-weight: bold;
-        color: #fff;
+
+      .header-center {
+        flex: 1;
+        display: flex;
+        justify-content: center;
       }
-      
-      .session-controls {
+
+      .header-right {
         display: flex;
         align-items: center;
         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;
+      }
+
+      .session-id {
+        color: #999;
+        font-size: 0.85em;
+      }
+
+      .dropdown-arrow {
+        color: #888;
+        font-size: 0.7em;
+      }
+
+      /* Session Info Dropdown */
+      .session-info-dropdown {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        margin-top: 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;
+      }
+
+      .dropdown-divider {
+        height: 1px;
+        background: #444;
+      }
+
+      .session-detail-name {
+        font-weight: bold;
+        color: #fff;
+        margin-bottom: 4px;
+      }
+
+      .session-detail-id {
+        color: #999;
+        font-size: 0.85em;
+        font-family: monospace;
+      }
+
+      .connection-detail {
+        color: #ccc;
+        font-size: 0.9em;
+      }
+
+      .version-info {
+        color: #888;
+        font-size: 0.85em;
+      }
+
+      /* Sessions Dropdown */
       .session-dropdown {
         position: relative;
         display: inline-block;
       }
-      
+
       .session-dropdown-btn {
-        background: #3a3a3a;
+        background: transparent;
         color: #ccc;
-        border: 1px solid #555;
-        padding: 4px 8px;
+        border: 1px solid #444;
+        padding: 4px 12px;
         border-radius: 4px;
         cursor: pointer;
-        font-size: 0.8em;
+        font-size: 0.9em;
         display: flex;
         align-items: center;
         gap: 4px;
+        transition: all 0.2s ease;
       }
-      
+
       .session-dropdown-btn:hover {
-        background: #4a4a4a;
+        background: #3a3a3a;
+        border-color: #667eea;
       }
-      
+
       .session-dropdown-content {
         display: none;
         position: absolute;
         background: #2a2a2a;
         border: 1px solid #555;
         border-radius: 4px;
-        right: 0;
+        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-dropdown-content.show {
         display: block;
       }
-      
+
       .session-dropdown-item {
         padding: 8px 12px;
         cursor: pointer;
@@ -153,82 +246,79 @@
         justify-content: space-between;
         align-items: center;
       }
-      
+
       .session-dropdown-item:last-child {
         border-bottom: none;
       }
-      
+
       .session-dropdown-item:hover {
         background: #3a3a3a;
       }
-      
+
       .session-dropdown-item.current {
         background: #4285f4;
         color: white;
       }
-      
-      #terminal {
-        padding: 8px;  /* Mac Terminal.app padding */
-        background-color: #000000;
-        height: calc(100% - 16px - 40px); /* Subtract session header height */
-        width: calc(100% - 16px);
-        flex: 1;
-      }
-      #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; }
-      
-      /* How to Use Button */
-      .how-to-use-btn {
-        position: fixed;
-        top: 20px;
-        left: 170px;
-        background: rgba(102, 126, 234, 0.9);
-        color: white;
-        border: none;
-        border-radius: 8px;
-        padding: 10px 16px;
+
+      /* Header Buttons */
+      .header-btn {
+        background: transparent;
+        border: 1px solid #444;
+        color: #ccc;
+        padding: 6px 12px;
+        border-radius: 4px;
         cursor: pointer;
-        font-size: 0.9em;
-        font-weight: 500;
         display: flex;
         align-items: center;
         gap: 6px;
-        z-index: 10000;
-        backdrop-filter: blur(10px);
+        font-size: 0.9em;
+        text-decoration: none;
         transition: all 0.2s ease;
       }
 
-      .how-to-use-btn:hover {
-        background: rgba(102, 126, 234, 1);
-        transform: translateY(-1px);
+      .header-btn:hover {
+        background: #3a3a3a;
+        border-color: #667eea;
       }
 
-      /* Back to Dashboard Button */
-      .back-to-dashboard {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        background: rgba(66, 133, 244, 0.9);
-        color: white;
-        border: none;
-        padding: 12px 20px;
-        border-radius: 8px;
-        font-weight: 500;
-        cursor: pointer;
-        z-index: 1000;
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        text-decoration: none;
+      .help-btn .btn-text {
+        display: none;
       }
-      
-      .back-to-dashboard:hover {
-        background: rgba(51, 103, 214, 0.9);
-        transform: translateY(-1px);
+
+      @media (min-width: 768px) {
+        .help-btn .btn-text {
+          display: inline;
+        }
+      }
+
+      /* 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;
+        height: calc(100% - 16px - 40px); /* Subtract session header height */
+        width: calc(100% - 16px);
+        flex: 1;
+      }
+      #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;
@@ -253,32 +343,125 @@
         from { opacity: 1; }
         to { opacity: 0.4; }
       }
+
+      /* Help Modal - Tab Navigation */
+      .help-tabs {
+        display: flex;
+        padding: 0 24px;
+        border-bottom: 1px solid #eee;
+        background: #f8f9fa;
+      }
+
+      .help-tab {
+        padding: 12px 20px;
+        background: transparent;
+        border: none;
+        border-bottom: 3px solid transparent;
+        cursor: pointer;
+        font-size: 0.9rem;
+        color: #666;
+        transition: all 0.2s ease;
+      }
+
+      .help-tab:hover {
+        color: #333;
+        background: rgba(102, 126, 234, 0.05);
+      }
+
+      .help-tab.active {
+        color: #667eea;
+        border-bottom-color: #667eea;
+        font-weight: 600;
+      }
+
+      /* Help Modal - Tab Content */
+      .help-tab-content {
+        display: none;
+      }
+
+      .help-tab-content.active {
+        display: block;
+      }
+
+      /* Help Modal - Content Sections */
+      .help-section {
+        margin-bottom: 24px;
+      }
+
+      .help-section h4 {
+        color: #333;
+        font-size: 1rem;
+        margin-bottom: 12px;
+      }
+
+      .help-section p {
+        color: #666;
+        line-height: 1.6;
+        margin-bottom: 8px;
+      }
+
+      .help-section ul {
+        list-style: none;
+        padding: 0;
+        margin: 8px 0;
+      }
+
+      .help-section li {
+        padding: 4px 0;
+        color: #666;
+        line-height: 1.6;
+      }
+
+      /* Help Modal - Mobile Responsiveness */
+      @media (max-width: 768px) {
+        .help-tabs {
+          overflow-x: auto;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        .help-tab {
+          font-size: 0.8rem;
+          padding: 10px 12px;
+          white-space: nowrap;
+        }
+      }
     </style>
   </head>
   <body>
-    <!-- Back to Dashboard Button -->
-    <a href="/app/dashboard.html" class="back-to-dashboard" id="dashboard-btn">
-        <div class="connection-status" id="connection-status"></div>
-        <span>←</span>
-        <span>Dashboard</span>
-    </a>
-
-    <!-- How to Use Button -->
-    <button class="how-to-use-btn" id="how-to-use-btn" onclick="showHelpModal()">
-        📖 How to Use
-    </button>
-    
     <div id="connect-container">
         <h2>Terminal Mirror</h2>
         <p>Connecting to terminal...</p>
     </div>
     <div id="terminal-container">
         <div class="session-header" id="session-header" style="display: none;">
-            <div class="session-info">
-                <span class="session-name" id="session-name">Terminal Session</span>
-                <span class="session-id" id="session-id"></span>
+            <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>
-            <div class="session-controls">
+
+            <div class="header-center">
                 <div class="session-dropdown">
                     <button class="session-dropdown-btn" id="session-dropdown-btn">
                         <span>Sessions</span>
@@ -291,62 +474,86 @@
                     </div>
                 </div>
             </div>
+
+            <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>
+                </a>
+            </div>
         </div>
         <div id="terminal"></div>
     </div>
     
     <!-- Help Modal -->
     <div id="help-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; z-index: 20000;">
-        <div style="background: white; border-radius: 12px; max-width: 500px; width: 90%; max-height: 80vh; overflow: hidden;">
+        <div style="background: white; border-radius: 12px; max-width: 600px; width: 90%; max-height: 80vh; overflow: hidden;">
+            <!-- Header -->
             <div style="padding: 20px 24px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
-                <h3 style="margin: 0; font-size: 1.2rem; color: #333;">🚀 How to Use Shell Mirror</h3>
+                <h3 style="margin: 0; font-size: 1.2rem; color: #333;">🚀 Shell Mirror Terminal</h3>
                 <button onclick="closeHelpModal()" 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: #666;">×</button>
             </div>
+
+            <!-- Tab Navigation -->
+            <div class="help-tabs">
+                <button class="help-tab active" onclick="showHelpTab('sessions')">Sessions</button>
+                <button class="help-tab" onclick="showHelpTab('help')">Troubleshooting</button>
+            </div>
+
+            <!-- Tab Content -->
             <div style="padding: 24px; max-height: 60vh; overflow-y: auto;">
-                <p style="margin-top: 0; margin-bottom: 24px; color: #666; font-size: 1rem;">Get started in 2 easy steps:</p>
-
-                <div style="display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start;">
-                    <div style="flex-shrink: 0; width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem;">1</div>
-                    <div style="flex: 1;">
-                        <h4 style="margin: 0 0 12px 0; font-size: 1.05rem; font-weight: 600; color: #333;">Install the agent</h4>
-                        <div style="background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
-                            <code style="font-family: 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.9rem; color: #1a1a1a; flex: 1;">npm install -g shell-mirror</code>
-                            <button onclick="copyToClipboard('npm install -g shell-mirror', this)" style="background: #667eea; color: white; border: none; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0;">Copy</button>
-                        </div>
-                    </div>
-                </div>
+                <!-- Sessions Tab -->
+                <div id="tab-sessions" class="help-tab-content active">
+                    <p style="margin-top: 0; margin-bottom: 16px;">Sessions let you run multiple terminals simultaneously.</p>
 
-                <div style="display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start;">
-                    <div style="flex-shrink: 0; width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem;">2</div>
-                    <div style="flex: 1;">
-                        <h4 style="margin: 0 0 12px 0; font-size: 1.05rem; font-weight: 600; color: #333;">Run the agent</h4>
-                        <div style="background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
-                            <code style="font-family: 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.9rem; color: #1a1a1a; flex: 1;">shell-mirror</code>
-                            <button onclick="copyToClipboard('shell-mirror', this)" style="background: #667eea; color: white; border: none; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0;">Copy</button>
-                        </div>
-                        <p style="margin: 8px 0 0 0; font-size: 0.85rem; color: #666; font-style: italic;">The agent will automatically connect to your dashboard</p>
-                    </div>
+                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Creating</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0;">
+                        <li>• Tap "Sessions" → "+ New Session"</li>
+                        <li>• Each session runs independently</li>
+                    </ul>
+
+                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Switching</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0;">
+                        <li>• Tap "Sessions" dropdown</li>
+                        <li>• Select any session</li>
+                        <li>• Your processes keep running in background</li>
+                    </ul>
+
+                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Limits</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0;">
+                        <li>• Max 10 sessions per Mac</li>
+                        <li>• Auto-deleted after 24h inactive</li>
+                    </ul>
                 </div>
 
-                <div style="margin-top: 32px; padding: 16px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #667eea;">
-                    <h4 style="margin: 0 0 12px 0; font-size: 1rem; font-weight: 600; color: #333;">💡 Troubleshooting</h4>
-                    <ul style="margin: 0; padding-left: 20px; list-style-type: disc;">
-                        <li style="margin-bottom: 8px; color: #555; font-size: 0.9rem;">Make sure you're logged in with the same Google account</li>
-                        <li style="margin-bottom: 8px; color: #555; font-size: 0.9rem;">Check that the agent is running in your terminal</li>
-                        <li style="margin-bottom: 0; color: #555; font-size: 0.9rem;">Refresh your dashboard after starting the agent</li>
+                <!-- Troubleshooting Tab -->
+                <div id="tab-help" class="help-tab-content" style="display: none;">
+                    <h4 style="margin-top: 0; margin-bottom: 8px;">Connection stuck?</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0 0 20px 0;">
+                        <li>• Wait 10 seconds for auto-retry</li>
+                        <li>• Still red? Return to Dashboard → Reconnect</li>
+                    </ul>
+
+                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Slow connection?</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0 0 20px 0;">
+                        <li>• App tries: Local network → WebRTC → Fallback</li>
+                        <li>• First connect may take 30 seconds</li>
+                        <li>• WebRTC works best (100-500ms)</li>
+                    </ul>
+
+                    <h4 style="margin-top: 20px; margin-bottom: 8px;">Behind corporate firewall?</h4>
+                    <ul style="list-style: none; padding: 0; margin: 0;">
+                        <li>• May need IT to whitelist STUN servers</li>
+                        <li>• Contact: stun.l.google.com port 19302</li>
                     </ul>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Version Footer -->
-    <footer style="background: #ff6b35; color: white; text-align: center; padding: 10px 0; font-size: 0.8rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;">
-        <div style="max-width: 1200px; margin: 0 auto;">
-            <p id="terminal-version-info">Terminal Mirror • Loading version...</p>
-        </div>
-    </footer>
-    
     <script>
         // Help Modal Functions
         function showHelpModal() {
@@ -359,16 +566,27 @@
             modal.style.display = 'none';
         }
 
-        function copyToClipboard(text, button) {
-            navigator.clipboard.writeText(text).then(() => {
-                const originalText = button.textContent;
-                button.textContent = 'Copied!';
-                setTimeout(() => {
-                    button.textContent = originalText;
-                }, 2000);
-            }).catch(err => {
-                console.error('Failed to copy:', err);
+        function showHelpTab(tabName) {
+            // Hide all tab content
+            document.querySelectorAll('.help-tab-content').forEach(content => {
+                content.classList.remove('active');
+                content.style.display = 'none';
+            });
+
+            // Remove active from all tab buttons
+            document.querySelectorAll('.help-tab').forEach(btn => {
+                btn.classList.remove('active');
             });
+
+            // Show selected tab content
+            const selectedContent = document.getElementById('tab-' + tabName);
+            if (selectedContent) {
+                selectedContent.classList.add('active');
+                selectedContent.style.display = 'block';
+            }
+
+            // Activate corresponding button
+            event.target.classList.add('active');
         }
 
         // Close modal when clicking outside

package/public/app/terminal.js

@@ -155,7 +155,7 @@ const chunkAssembler = {
 function updateConnectionStatus(status) {
     const statusElement = document.getElementById('connection-status');
     if (!statusElement) return;
-    
+
     statusElement.className = 'connection-status';
     switch(status) {
         case 'connecting':
@@ -169,6 +169,9 @@ function updateConnectionStatus(status) {
             // Default red styling already applied
             break;
     }
+
+    // Update connection detail in dropdown
+    updateConnectionDetail(status);
 }
 
 // Cleanup timer for chunk assembler
@@ -217,27 +220,63 @@ window.addEventListener('load', () => {
     }
 });
 
-// Load version info for footer
+// Load version info into dropdown
 async function loadVersionInfo() {
     try {
         const response = await fetch('/build-info.json');
         const buildInfo = await response.json();
-        const versionElement = document.getElementById('terminal-version-info');
-        const footerElement = versionElement?.parentElement?.parentElement; // Get the footer element
-        
-        if (versionElement && buildInfo) {
-            const buildDateTime = new Date(buildInfo.buildTime).toLocaleString();
-            versionElement.textContent = `Terminal Mirror v${buildInfo.version} • Built ${buildDateTime}`;
-            
-            // Apply random footer color from build info
-            if (footerElement && buildInfo.footerColor) {
-                footerElement.style.background = buildInfo.footerColor;
-                console.log(`🎨 Applied footer color: ${buildInfo.footerColor}`);
+
+        if (buildInfo) {
+            const buildDateTime = new Date(buildInfo.buildTime).toLocaleString('en-US', {
+                month: 'short',
+                day: 'numeric',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+
+            const versionElement = document.getElementById('version-info-dropdown');
+            if (versionElement) {
+                versionElement.textContent = `v${buildInfo.version} • Built ${buildDateTime}`;
             }
         }
     } catch (error) {
         console.log('Could not load build info for terminal:', error);
-        // Keep default version and color if build-info.json not available
+    }
+}
+
+// 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}`;
+        }
     }
 }
 
@@ -920,15 +959,18 @@ function updateSessionDisplay() {
     const sessionHeader = document.getElementById('session-header');
     const sessionName = document.getElementById('session-name');
     const sessionId = document.getElementById('session-id');
-    
+
     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();
+
         console.log('[CLIENT] 📋 Session display updated:', currentSession);
     }
 }
@@ -998,22 +1040,49 @@ function createNewSession() {
     window.location.href = url.toString();
 }
 
-// Setup dropdown toggle
+// 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 dropdown when clicking outside
-        document.addEventListener('click', () => {
-            dropdownContent.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