shell-mirror 1.5.117 → 1.5.119

package/package.json

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

@@ -1035,20 +1035,95 @@ body {
 .connection-status.disconnected { color: var(--warning); }
 .connection-status.error { color: var(--danger); }
 
-/* Usage Instructions - muted helper text */
+/* Dashboard content wrapper */
+.dashboard-content-wrapper {
+    display: contents;
+}
+
+/* Usage Instructions - muted helper section (borderless, floating) */
 .usage-instructions {
     margin-top: 24px;
-    text-align: center;
+    padding: 0 16px;
     color: var(--text-muted);
     font-size: 0.8rem;
-    line-height: 1.6;
+}
+
+.usage-step {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.usage-step-num {
+    width: 20px;
+    height: 20px;
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.usage-step-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.usage-step-title {
+    color: var(--text-secondary);
+    font-size: 0.8rem;
 }
 
 .usage-instructions code {
     background: var(--bg-tertiary);
-    padding: 2px 6px;
+    padding: 4px 8px;
     border-radius: 4px;
     font-family: 'Monaco', 'Menlo', monospace;
     font-size: 0.75rem;
-    color: var(--text-secondary);
+    color: var(--text-muted);
+    display: inline-block;
+}
+
+.usage-note {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    margin: 8px 0 16px 32px;
+}
+
+.usage-troubleshooting {
+    margin-top: 16px;
+}
+
+.usage-trouble-title {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    display: block;
+    margin-bottom: 8px;
+}
+
+.usage-troubleshooting ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.usage-troubleshooting li {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    padding: 3px 0;
+    padding-left: 12px;
+    position: relative;
+}
+
+.usage-troubleshooting li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--text-muted);
 }

package/public/app/dashboard.js

@@ -431,10 +431,16 @@ class ShellMirrorDashboard {
     }
 
     updateAgentsDisplay() {
-        const agentsCard = document.querySelector('.dashboard-card');
-        if (agentsCard) {
-            // Use outerHTML to replace the entire card, not nest inside it
-            agentsCard.outerHTML = this.renderActiveAgents();
+        const wrapper = document.querySelector('.dashboard-content-wrapper');
+        if (wrapper) {
+            // Replace the entire wrapper to avoid duplication
+            wrapper.outerHTML = this.renderActiveAgents();
+        } else {
+            // Fallback for initial render
+            const agentsCard = document.querySelector('.dashboard-card');
+            if (agentsCard) {
+                agentsCard.outerHTML = this.renderActiveAgents();
+            }
         }
     }
 
@@ -663,18 +669,42 @@ class ShellMirrorDashboard {
         }).join('');
 
         return `
-            <div class="dashboard-card">
-                <div class="card-header">
-                    <h2>Agents</h2>
-                    ${agentCount > 0 ? `<span class="agent-count">${agentCount}</span>` : ''}
+            <div class="dashboard-content-wrapper">
+                <div class="dashboard-card">
+                    <div class="card-header">
+                        <h2>Agents</h2>
+                        ${agentCount > 0 ? `<span class="agent-count">${agentCount}</span>` : ''}
+                    </div>
+                    <div class="card-content">
+                        ${agentCount > 0 ? agentsHtml : this.renderEmptyAgentState()}
+                    </div>
                 </div>
-                <div class="card-content">
-                    ${agentCount > 0 ? agentsHtml : this.renderEmptyAgentState()}
+                <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</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>
             </div>
-            <div class="usage-instructions">
-                <p>New here? Install with <code>npm install -g shell-mirror</code> then run <code>shell-mirror</code></p>
-            </div>
         `;
     }