shell-mirror 1.5.122 → 1.5.123

package/package.json

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

@@ -647,6 +647,125 @@ body {
     border-color: var(--accent);
 }
 
+/* Empty state - additional content */
+.empty-state-note {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    margin: 16px 0;
+    text-align: center;
+}
+
+.empty-state-troubleshooting {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border);
+}
+
+.troubleshooting-title {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    font-weight: 500;
+    display: block;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.empty-state-troubleshooting ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.empty-state-troubleshooting li {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    padding: 4px 0;
+    padding-left: 12px;
+    position: relative;
+}
+
+.empty-state-troubleshooting li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--text-muted);
+}
+
+/* Collapsible help section */
+.collapsible-help {
+    margin-top: 32px;
+    padding: 0 32px;
+}
+
+.help-toggle {
+    width: 100%;
+    background: transparent;
+    border: none;
+    padding: 12px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.help-toggle:hover {
+    color: var(--text-secondary);
+}
+
+.help-arrow {
+    transition: transform 0.2s ease;
+    color: var(--text-muted);
+}
+
+.help-arrow.rotated {
+    transform: rotate(180deg);
+}
+
+.help-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+.help-content.expanded {
+    max-height: 300px;
+    padding: 16px 0;
+}
+
+.help-step {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 12px;
+}
+
+.help-step-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-muted);
+}
+
+.help-step code {
+    background: var(--bg-tertiary);
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    display: inline-block;
+}
+
+.help-note {
+    color: var(--text-muted);
+    font-size: 0.7rem;
+    margin-top: 8px;
+    font-style: italic;
+}
+
 /* Modals */
 .modal-overlay {
     position: fixed;

package/public/app/dashboard.js

@@ -679,31 +679,7 @@ class ShellMirrorDashboard {
                         ${agentCount > 0 ? agentsHtml : this.renderEmptyAgentState()}
                     </div>
                 </div>
-                <div class="usage-instructions">
-                    <div class="usage-step">
-                        <span class="usage-step-num">1</span>
-                        <div class="usage-step-content">
-                            <span class="usage-step-title">Install the agent (on Mac)</span>
-                            <code>npm install -g shell-mirror</code>
-                        </div>
-                    </div>
-                    <div class="usage-step">
-                        <span class="usage-step-num">2</span>
-                        <div class="usage-step-content">
-                            <span class="usage-step-title">Run the agent</span>
-                            <code>shell-mirror</code>
-                        </div>
-                    </div>
-                    <p class="usage-note">The agent will automatically connect to your dashboard</p>
-                    <div class="usage-troubleshooting">
-                        <span class="usage-trouble-title">Troubleshooting</span>
-                        <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>
+                ${agentCount > 0 ? this.renderCollapsibleHelp() : ''}
             </div>
         `;
     }
@@ -728,10 +704,57 @@ class ShellMirrorDashboard {
                         </div>
                     </div>
                 </div>
+                <p class="empty-state-note">The agent will automatically connect to your dashboard</p>
+                <div class="empty-state-troubleshooting">
+                    <span class="troubleshooting-title">Troubleshooting</span>
+                    <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>
+        `;
+    }
+
+    renderCollapsibleHelp() {
+        return `
+            <div class="collapsible-help">
+                <button class="help-toggle" onclick="dashboard.toggleHelp()">
+                    <span>Need help adding another agent?</span>
+                    <svg class="help-arrow" width="12" height="12" viewBox="0 0 12 12">
+                        <path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+                    </svg>
+                </button>
+                <div class="help-content" id="help-content">
+                    <div class="help-step">
+                        <span class="help-step-label">1. Install</span>
+                        <code>npm install -g shell-mirror</code>
+                    </div>
+                    <div class="help-step">
+                        <span class="help-step-label">2. Run</span>
+                        <code>shell-mirror</code>
+                    </div>
+                    <p class="help-note">The agent will automatically connect to your dashboard</p>
+                </div>
             </div>
         `;
     }
 
+    toggleHelp() {
+        const content = document.getElementById('help-content');
+        const arrow = document.querySelector('.help-arrow');
+        const isExpanded = content.classList.contains('expanded');
+
+        if (isExpanded) {
+            content.classList.remove('expanded');
+            arrow.classList.remove('rotated');
+        } else {
+            content.classList.add('expanded');
+            arrow.classList.add('rotated');
+        }
+    }
+
     renderQuickActions() {
         return `
             <div class="dashboard-card">