shell-mirror 1.5.76 → 1.5.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.76",
+  "version": "1.5.77",
   "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;
@@ -256,29 +346,40 @@
     </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,6 +392,16 @@
                     </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>
@@ -340,13 +451,6 @@
         </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() {

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