shell-mirror 1.5.37 → 1.5.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.37",
+  "version": "1.5.39",
   "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/dashboard.css

@@ -294,6 +294,10 @@ body {
     border-bottom: 1px solid #f0f0f0;
 }
 
+.session-item.compact {
+    padding: 12px 0;
+}
+
 .session-item:last-child {
     border-bottom: none;
 }
@@ -345,6 +349,11 @@ body {
     color: #f57c00;
 }
 
+.session-status.disconnected {
+    background: #f5f5f5;
+    color: #666;
+}
+
 /* Empty States */
 .no-data {
     text-align: center;

package/public/app/dashboard.html

@@ -46,6 +46,13 @@
         <p>Loading dashboard...</p>
     </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="dashboard-version-info">Shell Mirror Dashboard • Loading version...</p>
+        </div>
+    </footer>
+
     <script src="dashboard.js"></script>
 </body>
 </html>

package/public/app/dashboard.js

@@ -10,6 +10,7 @@ class ShellMirrorDashboard {
 
     async init() {
         this.showLoading();
+        this.loadVersionInfo(); // Load version info immediately
         
         try {
             const authStatus = await this.checkAuthStatus();
@@ -109,7 +110,10 @@ class ShellMirrorDashboard {
         `;
 
         // Show centered login button
-        document.getElementById('login-button-overlay').style.display = 'flex';
+        const loginOverlay = document.getElementById('login-button-overlay');
+        if (loginOverlay) {
+            loginOverlay.style.display = 'flex';
+        }
     }
 
     renderAuthenticatedDashboard() {
@@ -137,12 +141,21 @@ class ShellMirrorDashboard {
         `;
 
         // Hide login button overlay
-        document.getElementById('login-button-overlay').style.display = 'none';
+        const loginOverlay = document.getElementById('login-button-overlay');
+        if (loginOverlay) {
+            loginOverlay.style.display = 'none';
+        }
     }
 
     renderActiveAgents() {
-        const agentCount = this.agents.length;
-        const agentsHtml = this.agents.map(agent => `
+        // Filter for recently active agents (online or seen within last 5 minutes)
+        const activeAgents = this.agents.filter(agent => {
+            const timeSinceLastSeen = Date.now() / 1000 - agent.lastSeen;
+            return agent.onlineStatus === 'online' || timeSinceLastSeen < 300; // 5 minutes
+        });
+
+        const agentCount = activeAgents.length;
+        const agentsHtml = activeAgents.map(agent => `
             <div class="agent-item">
                 <div class="agent-info">
                     <div class="agent-name">${agent.machineName || agent.agentId}</div>
@@ -193,8 +206,31 @@ class ShellMirrorDashboard {
     }
 
     renderRecentSessions() {
-        const sessionsHtml = this.sessions.map(session => `
-            <div class="session-item">
+        // Get inactive agents (not seen in last 5 minutes and offline)
+        const inactiveAgents = this.agents.filter(agent => {
+            const timeSinceLastSeen = Date.now() / 1000 - agent.lastSeen;
+            return agent.onlineStatus === 'offline' && timeSinceLastSeen >= 300; // More than 5 minutes
+        });
+
+        // Combine real sessions with inactive agents as past connections
+        const allSessions = [
+            // Add inactive agents as past connections
+            ...inactiveAgents.map(agent => ({
+                type: 'past_agent',
+                agentId: agent.machineName || agent.agentId,
+                startTime: new Date(agent.lastSeen * 1000),
+                duration: 'Last connection',
+                status: 'disconnected'
+            })),
+            // Add actual session history
+            ...this.sessions
+        ];
+
+        // Sort by most recent
+        allSessions.sort((a, b) => b.startTime - a.startTime);
+
+        const sessionsHtml = allSessions.map(session => `
+            <div class="session-item compact">
                 <div class="session-info">
                     <div class="session-agent">${session.agentId}</div>
                     <div class="session-time">${this.formatDate(session.startTime)}</div>
@@ -210,7 +246,7 @@ class ShellMirrorDashboard {
             <div class="dashboard-card full-width">
                 <h2>📊 Recent Sessions</h2>
                 <div class="card-content">
-                    ${this.sessions.length > 0 ? sessionsHtml : '<p class="no-data">No recent sessions</p>'}
+                    ${allSessions.length > 0 ? sessionsHtml : '<p class="no-data">No recent sessions</p>'}
                 </div>
             </div>
         `;
@@ -317,6 +353,30 @@ class ShellMirrorDashboard {
         }).format(date);
     }
 
+    // Load version info for footer
+    async loadVersionInfo() {
+        try {
+            const response = await fetch('/build-info.json');
+            const buildInfo = await response.json();
+            const versionElement = document.getElementById('dashboard-version-info');
+            const footerElement = versionElement?.parentElement?.parentElement; // Get the footer element
+            
+            if (versionElement && buildInfo) {
+                const buildDateTime = new Date(buildInfo.buildTime).toLocaleString();
+                versionElement.textContent = `Shell Mirror Dashboard 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}`);
+                }
+            }
+        } catch (error) {
+            console.log('Could not load build info for dashboard:', error);
+            // Keep default version and color if build-info.json not available
+        }
+    }
+
     // Action handlers
     async connectToAgent(agentId) {
         window.location.href = `/app/terminal.html?agent=${agentId}`;

package/public/app/terminal.js

@@ -79,8 +79,8 @@ async function loadVersionInfo() {
         const footerElement = versionElement?.parentElement?.parentElement; // Get the footer element
         
         if (versionElement && buildInfo) {
-            const buildDate = new Date(buildInfo.buildTime).toLocaleDateString();
-            versionElement.textContent = `Terminal Mirror v${buildInfo.version} • Built ${buildDate}`;
+            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) {