shell-mirror 1.5.36 → 1.5.37

package/package.json

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

package/public/app/dashboard.js

@@ -93,25 +93,23 @@ 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
+        document.getElementById('login-button-overlay').style.display = 'flex';
     }
 
     renderAuthenticatedDashboard() {
@@ -138,8 +136,8 @@ class ShellMirrorDashboard {
             </div>
         `;
 
-        // Hide login overlay
-        document.getElementById('login-overlay').style.display = 'none';
+        // Hide login button overlay
+        document.getElementById('login-button-overlay').style.display = 'none';
     }
 
     renderActiveAgents() {