shell-mirror 1.5.69 → 1.5.70

package/package.json

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

@@ -64,6 +64,26 @@ body {
     backdrop-filter: blur(10px);
 }
 
+.help-button {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 8px;
+    color: white;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.9rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.help-button:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateY(-1px);
+}
+
 .user-info {
     display: flex;
     align-items: center;
@@ -880,6 +900,239 @@ body {
     text-align: center;
 }
 
+/* Empty Agent State Styles */
+.empty-agent-state {
+    padding: 20px;
+}
+
+.empty-state-header {
+    text-align: center;
+    margin-bottom: 32px;
+}
+
+.empty-state-header h3 {
+    margin: 0 0 8px 0;
+    font-size: 1.4rem;
+    color: #333;
+    font-weight: 600;
+}
+
+.empty-state-header p {
+    margin: 0;
+    color: #666;
+    font-size: 1rem;
+}
+
+.empty-state-steps {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.empty-state-step {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+    align-items: flex-start;
+}
+
+.empty-step-number {
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+.empty-step-content {
+    flex: 1;
+}
+
+.empty-step-content h4 {
+    margin: 0 0 10px 0;
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.inline-command-box {
+    background: #2d3748;
+    border-radius: 8px;
+    padding: 14px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.inline-command-box code {
+    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+    font-size: 0.95rem;
+    color: #48bb78;
+    flex: 1;
+    font-weight: 500;
+}
+
+.inline-copy-btn {
+    background: #667eea;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 7px 14px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+    font-weight: 500;
+}
+
+.inline-copy-btn:hover {
+    background: #5568d3;
+}
+
+.inline-copy-btn:active {
+    transform: scale(0.95);
+}
+
+.empty-state-footer {
+    text-align: center;
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid #eee;
+}
+
+.empty-state-footer p {
+    margin: 0;
+    color: #666;
+    font-size: 0.95rem;
+}
+
+/* Help Modal Styles */
+.help-modal-content {
+    font-size: 0.95rem;
+}
+
+.help-intro {
+    margin-top: 0;
+    margin-bottom: 24px;
+    color: #666;
+    font-size: 1rem;
+}
+
+.help-step {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+    align-items: flex-start;
+}
+
+.step-number {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 0.95rem;
+}
+
+.step-content {
+    flex: 1;
+}
+
+.step-content h4 {
+    margin: 0 0 12px 0;
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.command-box {
+    background: #f8f9fa;
+    border: 1px solid #e1e4e8;
+    border-radius: 8px;
+    padding: 12px 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 8px;
+}
+
+.command-box code {
+    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+    font-size: 0.9rem;
+    color: #1a1a1a;
+    flex: 1;
+}
+
+.copy-btn {
+    background: #667eea;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 6px 12px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.copy-btn:hover {
+    background: #5568d3;
+}
+
+.copy-btn:active {
+    transform: scale(0.95);
+}
+
+.help-note {
+    margin: 8px 0 0 0;
+    font-size: 0.85rem;
+    color: #666;
+    font-style: italic;
+}
+
+.help-troubleshooting {
+    margin-top: 32px;
+    padding: 16px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border-left: 4px solid #667eea;
+}
+
+.help-troubleshooting h4 {
+    margin: 0 0 12px 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.help-troubleshooting ul {
+    margin: 0;
+    padding-left: 20px;
+    list-style-type: disc;
+}
+
+.help-troubleshooting li {
+    margin-bottom: 8px;
+    color: #555;
+    font-size: 0.9rem;
+}
+
+.help-troubleshooting li:last-child {
+    margin-bottom: 0;
+}
+
 /* Agent Notifications */
 .agent-notification {
     position: fixed;

package/public/app/dashboard.js

@@ -504,6 +504,9 @@ class ShellMirrorDashboard {
                 <span id="connection-status" class="connection-status" style="display: none;"></span>
                 <span id="refresh-status" class="refresh-status">Initializing...</span>
             </div>
+            <button class="help-button" onclick="dashboard.showAgentInstructions()" title="How to Use">
+                📖 How to Use
+            </button>
             <div class="user-info">
                 <span class="user-name">${this.user.name || this.user.email}</span>
                 <div class="user-dropdown">
@@ -607,7 +610,46 @@ class ShellMirrorDashboard {
                     </div>
                 </div>
                 <div class="card-content">
-                    ${agentCount > 0 ? agentsHtml : '<p class="no-data">No active agents. <a href="#" onclick="dashboard.showAgentInstructions()">Set up an agent</a></p>'}
+                    ${agentCount > 0 ? agentsHtml : this.renderEmptyAgentState()}
+                </div>
+            </div>
+        `;
+    }
+
+    renderEmptyAgentState() {
+        return `
+            <div class="empty-agent-state">
+                <div class="empty-state-header">
+                    <h3>🚀 Get Started with Shell Mirror</h3>
+                    <p>Connect your Mac in 2 simple steps:</p>
+                </div>
+
+                <div class="empty-state-steps">
+                    <div class="empty-state-step">
+                        <div class="empty-step-number">1</div>
+                        <div class="empty-step-content">
+                            <h4>Install the agent</h4>
+                            <div class="inline-command-box">
+                                <code>npm install -g shell-mirror</code>
+                                <button class="inline-copy-btn" onclick="navigator.clipboard.writeText('npm install -g shell-mirror'); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 2000)">Copy</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="empty-state-step">
+                        <div class="empty-step-number">2</div>
+                        <div class="empty-step-content">
+                            <h4>Run the agent</h4>
+                            <div class="inline-command-box">
+                                <code>shell-mirror</code>
+                                <button class="inline-copy-btn" onclick="navigator.clipboard.writeText('shell-mirror'); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 2000)">Copy</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="empty-state-footer">
+                    <p>✨ Your agent will appear here once connected</p>
                 </div>
             </div>
         `;
@@ -1186,8 +1228,45 @@ class ShellMirrorDashboard {
     }
 
     showAgentInstructions() {
-        // TODO: Show modal with agent setup instructions
-        alert('Agent setup instructions coming soon!');
+        const content = `
+            <div class="help-modal-content">
+                <p class="help-intro">Get started in 2 easy steps:</p>
+
+                <div class="help-step">
+                    <div class="step-number">1</div>
+                    <div class="step-content">
+                        <h4>Install the agent</h4>
+                        <div class="command-box">
+                            <code>npm install -g shell-mirror</code>
+                            <button class="copy-btn" onclick="navigator.clipboard.writeText('npm install -g shell-mirror'); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 2000)">Copy</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="help-step">
+                    <div class="step-number">2</div>
+                    <div class="step-content">
+                        <h4>Run the agent</h4>
+                        <div class="command-box">
+                            <code>shell-mirror</code>
+                            <button class="copy-btn" onclick="navigator.clipboard.writeText('shell-mirror'); this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 2000)">Copy</button>
+                        </div>
+                        <p class="help-note">The agent will automatically connect to your dashboard</p>
+                    </div>
+                </div>
+
+                <div class="help-troubleshooting">
+                    <h4>💡 Troubleshooting</h4>
+                    <ul>
+                        <li>Make sure you're logged in with the same Google account</li>
+                        <li>Check that the agent is running in your terminal</li>
+                        <li>Refresh this dashboard after starting the agent</li>
+                    </ul>
+                </div>
+            </div>
+        `;
+
+        this.showModal('🚀 How to Use Shell Mirror', content);
     }
 
     showSettings() {

package/public/app/terminal.html

@@ -176,6 +176,32 @@
       #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;
+        cursor: pointer;
+        font-size: 0.9em;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        z-index: 10000;
+        backdrop-filter: blur(10px);
+        transition: all 0.2s ease;
+      }
+
+      .how-to-use-btn:hover {
+        background: rgba(102, 126, 234, 1);
+        transform: translateY(-1px);
+      }
+
       /* Back to Dashboard Button */
       .back-to-dashboard {
         position: fixed;
@@ -234,6 +260,11 @@
         <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>
@@ -262,6 +293,51 @@
         <div id="terminal"></div>
     </div>
     
+    <!-- Help Modal -->
+    <div id="help-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; z-index: 20000;">
+        <div style="background: white; border-radius: 12px; max-width: 500px; width: 90%; max-height: 80vh; overflow: hidden;">
+            <div style="padding: 20px 24px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
+                <h3 style="margin: 0; font-size: 1.2rem; color: #333;">🚀 How to Use Shell Mirror</h3>
+                <button onclick="closeHelpModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #666;">×</button>
+            </div>
+            <div style="padding: 24px; max-height: 60vh; overflow-y: auto;">
+                <p style="margin-top: 0; margin-bottom: 24px; color: #666; font-size: 1rem;">Get started in 2 easy steps:</p>
+
+                <div style="display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start;">
+                    <div style="flex-shrink: 0; width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem;">1</div>
+                    <div style="flex: 1;">
+                        <h4 style="margin: 0 0 12px 0; font-size: 1.05rem; font-weight: 600; color: #333;">Install the agent</h4>
+                        <div style="background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
+                            <code style="font-family: 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.9rem; color: #1a1a1a; flex: 1;">npm install -g shell-mirror</code>
+                            <button onclick="copyToClipboard('npm install -g shell-mirror', this)" style="background: #667eea; color: white; border: none; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0;">Copy</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div style="display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start;">
+                    <div style="flex-shrink: 0; width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem;">2</div>
+                    <div style="flex: 1;">
+                        <h4 style="margin: 0 0 12px 0; font-size: 1.05rem; font-weight: 600; color: #333;">Run the agent</h4>
+                        <div style="background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
+                            <code style="font-family: 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 0.9rem; color: #1a1a1a; flex: 1;">shell-mirror</code>
+                            <button onclick="copyToClipboard('shell-mirror', this)" style="background: #667eea; color: white; border: none; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0;">Copy</button>
+                        </div>
+                        <p style="margin: 8px 0 0 0; font-size: 0.85rem; color: #666; font-style: italic;">The agent will automatically connect to your dashboard</p>
+                    </div>
+                </div>
+
+                <div style="margin-top: 32px; padding: 16px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #667eea;">
+                    <h4 style="margin: 0 0 12px 0; font-size: 1rem; font-weight: 600; color: #333;">💡 Troubleshooting</h4>
+                    <ul style="margin: 0; padding-left: 20px; list-style-type: disc;">
+                        <li style="margin-bottom: 8px; color: #555; font-size: 0.9rem;">Make sure you're logged in with the same Google account</li>
+                        <li style="margin-bottom: 8px; color: #555; font-size: 0.9rem;">Check that the agent is running in your terminal</li>
+                        <li style="margin-bottom: 0; color: #555; font-size: 0.9rem;">Refresh your dashboard after starting the agent</li>
+                    </ul>
+                </div>
+            </div>
+        </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;">
@@ -269,6 +345,39 @@
         </div>
     </footer>
     
+    <script>
+        // Help Modal Functions
+        function showHelpModal() {
+            const modal = document.getElementById('help-modal');
+            modal.style.display = 'flex';
+        }
+
+        function closeHelpModal() {
+            const modal = document.getElementById('help-modal');
+            modal.style.display = 'none';
+        }
+
+        function copyToClipboard(text, button) {
+            navigator.clipboard.writeText(text).then(() => {
+                const originalText = button.textContent;
+                button.textContent = 'Copied!';
+                setTimeout(() => {
+                    button.textContent = originalText;
+                }, 2000);
+            }).catch(err => {
+                console.error('Failed to copy:', err);
+            });
+        }
+
+        // Close modal when clicking outside
+        document.addEventListener('click', function(event) {
+            const modal = document.getElementById('help-modal');
+            if (event.target === modal) {
+                closeHelpModal();
+            }
+        });
+    </script>
+
     <script src="/app/terminal.js?v=chunked-20250820"></script>
   </body>
 </html>

package/public/index.html

@@ -199,6 +199,12 @@
             text-align: center;
         }
 
+        /* Quick Start Section */
+        .quick-start {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 60px 0;
+        }
+
         /* Installation Code */
         .install-code {
             background: rgba(0, 0, 0, 0.3);
@@ -569,6 +575,57 @@
             </div>
         </section>
 
+        <!-- Quick Start Section -->
+        <section class="quick-start" id="quick-start">
+            <div class="container">
+                <h2 class="section-title" style="color: white; margin-bottom: 30px;">Quick Start</h2>
+                <p style="text-align: center; color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; margin-bottom: 40px;">
+                    Get started in 2 simple steps:
+                </p>
+
+                <div class="setup-steps">
+                    <div class="setup-step">
+                        <div class="step-number">1</div>
+                        <div class="install-code">
+                            <pre>npm install -g shell-mirror</pre>
+                            <button class="copy-btn" onclick="copyToClipboard('npm install -g shell-mirror', this)" title="Copy to clipboard">
+                                <svg width="16" height="16" fill="white" viewBox="0 0 16 16">
+                                    <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2z"/>
+                                    <path d="M2 6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2H4a2 2 0 0 1-2-2V6z"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="setup-step">
+                        <div class="step-number">2</div>
+                        <div class="install-code">
+                            <pre>shell-mirror</pre>
+                            <button class="copy-btn" onclick="copyToClipboard('shell-mirror', this)" title="Copy to clipboard">
+                                <svg width="16" height="16" fill="white" viewBox="0 0 16 16">
+                                    <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2z"/>
+                                    <path d="M2 6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2H4a2 2 0 0 1-2-2V6z"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="setup-step">
+                        <div class="step-number">3</div>
+                        <button class="btn-google" onclick="handleGoogleLogin()">
+                            <svg width="20" height="20" viewBox="0 0 24 24">
+                                <path fill="#4285F4" 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="#34A853" 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="#FBBC05" 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="#EA4335" 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
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
         <!-- How It Works -->
         <section class="how-it-works" id="how-it-works">
             <div class="container">
@@ -696,6 +753,23 @@
 
 
     <script>
+        // Copy to clipboard function
+        function copyToClipboard(text, button) {
+            navigator.clipboard.writeText(text).then(() => {
+                // Show feedback
+                const originalHTML = button.innerHTML;
+                button.innerHTML = '<span style="font-size: 0.9rem;">✓</span>';
+                button.style.background = 'rgba(0, 255, 136, 0.3)';
+
+                setTimeout(() => {
+                    button.innerHTML = originalHTML;
+                    button.style.background = 'rgba(255, 255, 255, 0.1)';
+                }, 2000);
+            }).catch(err => {
+                console.error('Failed to copy:', err);
+            });
+        }
+
         // Check authentication status without auto-redirect
         async function checkAuthStatus() {
             try {