shell-mirror 1.5.117 → 1.5.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.117",
+  "version": "1.5.118",
   "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,93 @@ body {
 .connection-status.disconnected { color: var(--warning); }
 .connection-status.error { color: var(--danger); }
 
-/* Usage Instructions - muted helper text */
+/* Usage Instructions - muted helper section */
 .usage-instructions {
-    margin-top: 24px;
-    text-align: center;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border);
     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: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+}
+
+.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

@@ -671,9 +671,31 @@ class ShellMirrorDashboard {
                 <div class="card-content">
                     ${agentCount > 0 ? agentsHtml : this.renderEmptyAgentState()}
                 </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 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>
         `;
     }