shell-mirror 1.5.36 → 1.5.38

package/package.json

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

@@ -361,76 +361,34 @@ body {
     text-decoration: underline;
 }
 
-/* Login Overlay */
-.login-overlay {
+/* Centered Login Button Overlay */
+.login-button-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
 }
 
-.login-modal {
-    background: white;
-    border-radius: 16px;
-    padding: 40px;
-    max-width: 500px;
-    width: 90%;
-    text-align: center;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-}
-
-.login-content h2 {
-    margin-bottom: 12px;
-    color: #333;
-}
-
-.login-content p {
-    color: #666;
-    margin-bottom: 30px;
-}
-
-.dashboard-preview {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: 20px;
-    margin: 30px 0;
-}
-
-.preview-section {
-    padding: 20px;
-    background: #f8f9fa;
-    border-radius: 8px;
+.centered-login {
     text-align: center;
 }
 
-.preview-section h3 {
-    font-size: 1rem;
-    margin-bottom: 8px;
-    color: #333;
-}
-
-.preview-section p {
-    font-size: 0.8rem;
-    color: #666;
-    margin: 0;
-}
-
-.login-note {
-    margin-top: 20px;
-    font-size: 0.85rem;
-    color: #999;
+.btn-primary.large {
+    padding: 16px 32px;
+    font-size: 1.1rem;
+    border-radius: 12px;
 }
 
-/* Dashboard Skeleton (for unauthenticated preview) */
-.dashboard-skeleton .dashboard-card.blurred {
-    filter: blur(2px);
-    opacity: 0.6;
+/* Blurred Dashboard (for unauthenticated preview) */
+.dashboard-grid.blurred {
+    filter: blur(3px);
+    opacity: 0.7;
     pointer-events: none;
 }
 

package/public/app/dashboard.html

@@ -25,43 +25,18 @@
         <!-- Will be populated by JavaScript based on auth status -->
     </main>
 
-    <!-- Login Overlay (for unauthenticated users) -->
-    <div class="login-overlay" id="login-overlay" style="display: none;">
-        <div class="login-modal">
-            <div class="login-content">
-                <h2>Welcome to Shell Mirror</h2>
-                <p>Sign in to access your dashboard and manage your terminal sessions</p>
-                
-                <!-- Dashboard Preview -->
-                <div class="dashboard-preview">
-                    <div class="preview-section">
-                        <h3>🖥️ Active Agents</h3>
-                        <p>See and connect to your running Mac agents</p>
-                    </div>
-                    <div class="preview-section">
-                        <h3>📊 Session History</h3>
-                        <p>Track your past terminal sessions</p>
-                    </div>
-                    <div class="preview-section">
-                        <h3>⚙️ Quick Actions</h3>
-                        <p>Manage settings and download agents</p>
-                    </div>
-                </div>
-
-                <button class="btn-primary" onclick="handleLogin()">
-                    <svg width="20" height="20" viewBox="0 0 24 24" style="margin-right: 8px;">
-                        <path fill="white" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                        <path fill="white" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                        <path fill="white" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                        <path fill="white" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                    </svg>
-                    Sign in with Google
-                </button>
-                
-                <p class="login-note">
-                    Your credentials are secure and encrypted. We use Google OAuth 2.0 for authentication.
-                </p>
-            </div>
+    <!-- Centered Login Button (for unauthenticated users) -->
+    <div class="login-button-overlay" id="login-button-overlay" style="display: none;">
+        <div class="centered-login">
+            <button class="btn-primary large" onclick="handleLogin()">
+                <svg width="20" height="20" viewBox="0 0 24 24" style="margin-right: 8px;">
+                    <path fill="white" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                    <path fill="white" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                    <path fill="white" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                    <path fill="white" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                </svg>
+                Login with Google Account
+            </button>
         </div>
     </div>
 
@@ -71,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();
@@ -93,25 +94,26 @@ class ShellMirrorDashboard {
 
         // Show actual dashboard content but blurred
         document.getElementById('dashboard-main').innerHTML = `
-            <div class="dashboard-skeleton">
-                <div class="dashboard-grid">
-                    <div class="dashboard-card blurred">
-                        ${this.renderActiveAgentsPreview()}
-                    </div>
-                    
-                    <div class="dashboard-card blurred">
-                        ${this.renderQuickActions()}
-                    </div>
-                    
-                    <div class="dashboard-card blurred full-width">
-                        ${this.renderRecentSessionsPreview()}
-                    </div>
+            <div class="dashboard-grid blurred">
+                <div class="dashboard-card">
+                    ${this.renderActiveAgentsPreview()}
+                </div>
+                
+                <div class="dashboard-card">
+                    ${this.renderQuickActions()}
+                </div>
+                
+                <div class="dashboard-card full-width">
+                    ${this.renderRecentSessionsPreview()}
                 </div>
             </div>
         `;
 
-        // Show login overlay
-        document.getElementById('login-overlay').style.display = 'flex';
+        // Show centered login button
+        const loginOverlay = document.getElementById('login-button-overlay');
+        if (loginOverlay) {
+            loginOverlay.style.display = 'flex';
+        }
     }
 
     renderAuthenticatedDashboard() {
@@ -138,8 +140,11 @@ class ShellMirrorDashboard {
             </div>
         `;
 
-        // Hide login overlay
-        document.getElementById('login-overlay').style.display = 'none';
+        // Hide login button overlay
+        const loginOverlay = document.getElementById('login-button-overlay');
+        if (loginOverlay) {
+            loginOverlay.style.display = 'none';
+        }
     }
 
     renderActiveAgents() {
@@ -319,6 +324,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) {