npm - shell-mirror - Versions diffs - 1.5.75 → 1.5.77 - Mend

shell-mirror 1.5.75 → 1.5.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/package.json +1 -1
package/public/app/terminal.html +205 -99
package/public/app/terminal.js +94 -24

package/package.json CHANGED Viewed

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

@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Terminal Mirror</title>
     <!-- Google Analytics 4 -->
@@ -74,7 +76,7 @@
         flex-direction: column;
       }
-      /* Session Header */
+      /* Session Header - Unified Design */
       .session-header {
         background: #2a2a2a;
         color: #ccc;
@@ -85,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;
@@ -151,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;
@@ -254,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>
@@ -289,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>
@@ -338,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 CHANGED Viewed

@@ -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}`;
+        }
     }
 }
@@ -262,6 +301,7 @@ function startConnection() {
     // Delay fit to ensure proper dimensions after CSS transitions
     setTimeout(() => {
         fitAddon.fit();
+        term.focus(); // Ensure cursor is visible even before connection
     }, 100);
     initialize();
 }
@@ -919,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);
     }
 }
@@ -997,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