shell-mirror 1.5.118 → 1.5.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.118",
+  "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,11 +1035,15 @@ body {
 .connection-status.disconnected { color: var(--warning); }
 .connection-status.error { color: var(--danger); }
 
-/* Usage Instructions - muted helper section */
+/* Dashboard content wrapper */
+.dashboard-content-wrapper {
+    display: contents;
+}
+
+/* Usage Instructions - muted helper section (borderless, floating) */
 .usage-instructions {
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid var(--border);
+    margin-top: 24px;
+    padding: 0 16px;
     color: var(--text-muted);
     font-size: 0.8rem;
 }
@@ -1093,9 +1097,7 @@ body {
 }
 
 .usage-troubleshooting {
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid var(--border);
+    margin-top: 16px;
 }
 
 .usage-trouble-title {

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,13 +669,15 @@ class ShellMirrorDashboard {
         }).join('');
 
         return `
-            <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 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="usage-instructions">
                     <div class="usage-step">