shell-mirror 1.5.36 → 1.5.37

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 (4) hide show
  1. package/package.json +1 -1
  2. package/public/app/dashboard.css +12 -54
  3. package/public/app/dashboard.html +12 -37
  4. package/public/app/dashboard.js +15 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shell-mirror",
3
- "version": "1.5.36",
3
+ "version": "1.5.37",
4
4
  "description": "Access your Mac shell from any device securely. Perfect for mobile coding with Claude Code CLI, Gemini CLI, and any shell tool.",
5
5
  "main": "server.js",
6
6
  "bin": {
package/public/app/dashboard.css CHANGED
@@ -361,76 +361,34 @@ body {
361
361
  text-decoration: underline;
362
362
  }
363
363
 
364
- /* Login Overlay */
365
- .login-overlay {
364
+ /* Centered Login Button Overlay */
365
+ .login-button-overlay {
366
366
  position: fixed;
367
367
  top: 0;
368
368
  left: 0;
369
369
  width: 100%;
370
370
  height: 100%;
371
- background: rgba(0, 0, 0, 0.8);
371
+ background: rgba(0, 0, 0, 0.3);
372
372
  display: flex;
373
373
  align-items: center;
374
374
  justify-content: center;
375
375
  z-index: 1000;
376
376
  }
377
377
 
378
- .login-modal {
379
- background: white;
380
- border-radius: 16px;
381
- padding: 40px;
382
- max-width: 500px;
383
- width: 90%;
384
- text-align: center;
385
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
386
- }
387
-
388
- .login-content h2 {
389
- margin-bottom: 12px;
390
- color: #333;
391
- }
392
-
393
- .login-content p {
394
- color: #666;
395
- margin-bottom: 30px;
396
- }
397
-
398
- .dashboard-preview {
399
- display: grid;
400
- grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
401
- gap: 20px;
402
- margin: 30px 0;
403
- }
404
-
405
- .preview-section {
406
- padding: 20px;
407
- background: #f8f9fa;
408
- border-radius: 8px;
378
+ .centered-login {
409
379
  text-align: center;
410
380
  }
411
381
 
412
- .preview-section h3 {
413
- font-size: 1rem;
414
- margin-bottom: 8px;
415
- color: #333;
416
- }
417
-
418
- .preview-section p {
419
- font-size: 0.8rem;
420
- color: #666;
421
- margin: 0;
422
- }
423
-
424
- .login-note {
425
- margin-top: 20px;
426
- font-size: 0.85rem;
427
- color: #999;
382
+ .btn-primary.large {
383
+ padding: 16px 32px;
384
+ font-size: 1.1rem;
385
+ border-radius: 12px;
428
386
  }
429
387
 
430
- /* Dashboard Skeleton (for unauthenticated preview) */
431
- .dashboard-skeleton .dashboard-card.blurred {
432
- filter: blur(2px);
433
- opacity: 0.6;
388
+ /* Blurred Dashboard (for unauthenticated preview) */
389
+ .dashboard-grid.blurred {
390
+ filter: blur(3px);
391
+ opacity: 0.7;
434
392
  pointer-events: none;
435
393
  }
436
394
 
package/public/app/dashboard.html CHANGED
@@ -25,43 +25,18 @@
25
25
  <!-- Will be populated by JavaScript based on auth status -->
26
26
  </main>
27
27
 
28
- <!-- Login Overlay (for unauthenticated users) -->
29
- <div class="login-overlay" id="login-overlay" style="display: none;">
30
- <div class="login-modal">
31
- <div class="login-content">
32
- <h2>Welcome to Shell Mirror</h2>
33
- <p>Sign in to access your dashboard and manage your terminal sessions</p>
34
-
35
- <!-- Dashboard Preview -->
36
- <div class="dashboard-preview">
37
- <div class="preview-section">
38
- <h3>🖥️ Active Agents</h3>
39
- <p>See and connect to your running Mac agents</p>
40
- </div>
41
- <div class="preview-section">
42
- <h3>📊 Session History</h3>
43
- <p>Track your past terminal sessions</p>
44
- </div>
45
- <div class="preview-section">
46
- <h3>⚙️ Quick Actions</h3>
47
- <p>Manage settings and download agents</p>
48
- </div>
49
- </div>
50
-
51
- <button class="btn-primary" onclick="handleLogin()">
52
- <svg width="20" height="20" viewBox="0 0 24 24" style="margin-right: 8px;">
53
- <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"/>
54
- <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"/>
55
- <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"/>
56
- <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"/>
57
- </svg>
58
- Sign in with Google
59
- </button>
60
-
61
- <p class="login-note">
62
- Your credentials are secure and encrypted. We use Google OAuth 2.0 for authentication.
63
- </p>
64
- </div>
28
+ <!-- Centered Login Button (for unauthenticated users) -->
29
+ <div class="login-button-overlay" id="login-button-overlay" style="display: none;">
30
+ <div class="centered-login">
31
+ <button class="btn-primary large" onclick="handleLogin()">
32
+ <svg width="20" height="20" viewBox="0 0 24 24" style="margin-right: 8px;">
33
+ <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"/>
34
+ <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"/>
35
+ <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"/>
36
+ <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"/>
37
+ </svg>
38
+ Login with Google Account
39
+ </button>
65
40
  </div>
66
41
  </div>
67
42
 
package/public/app/dashboard.js CHANGED
@@ -93,25 +93,23 @@ class ShellMirrorDashboard {
93
93
 
94
94
  // Show actual dashboard content but blurred
95
95
  document.getElementById('dashboard-main').innerHTML = `
96
- <div class="dashboard-skeleton">
97
- <div class="dashboard-grid">
98
- <div class="dashboard-card blurred">
99
- ${this.renderActiveAgentsPreview()}
100
- </div>
101
-
102
- <div class="dashboard-card blurred">
103
- ${this.renderQuickActions()}
104
- </div>
105
-
106
- <div class="dashboard-card blurred full-width">
107
- ${this.renderRecentSessionsPreview()}
108
- </div>
96
+ <div class="dashboard-grid blurred">
97
+ <div class="dashboard-card">
98
+ ${this.renderActiveAgentsPreview()}
99
+ </div>
100
+
101
+ <div class="dashboard-card">
102
+ ${this.renderQuickActions()}
103
+ </div>
104
+
105
+ <div class="dashboard-card full-width">
106
+ ${this.renderRecentSessionsPreview()}
109
107
  </div>
110
108
  </div>
111
109
  `;
112
110
 
113
- // Show login overlay
114
- document.getElementById('login-overlay').style.display = 'flex';
111
+ // Show centered login button
112
+ document.getElementById('login-button-overlay').style.display = 'flex';
115
113
  }
116
114
 
117
115
  renderAuthenticatedDashboard() {
@@ -138,8 +136,8 @@ class ShellMirrorDashboard {
138
136
  </div>
139
137
  `;
140
138
 
141
- // Hide login overlay
142
- document.getElementById('login-overlay').style.display = 'none';
139
+ // Hide login button overlay
140
+ document.getElementById('login-button-overlay').style.display = 'none';
143
141
  }
144
142
 
145
143
  renderActiveAgents() {