shell-mirror 1.5.122 → 1.5.124

package/package.json

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

package/public/app/terminal.html

@@ -363,7 +363,7 @@
         <p>Connecting to terminal...</p>
     </div>
     <div id="terminal-container">
-        <div class="session-header" id="session-header" style="display: none;">
+        <div class="session-header" id="session-header">
             <!-- Connection Status Indicator -->
             <div class="connection-status" id="connection-status"></div>
 

package/public/app/terminal.js

@@ -243,7 +243,10 @@ function startConnection() {
     connectContainer.style.display = 'none';
     terminalContainer.classList.add('show');
     term.open(document.getElementById('terminal'));
-    
+
+    // Initialize session display (shows header with connection status even before session exists)
+    updateSessionDisplay();
+
     // Track terminal session start in Google Analytics
     if (typeof sendGAEvent === 'function') {
         sendGAEvent('terminal_session_start', {
@@ -955,14 +958,14 @@ function updateSessionDisplay() {
         return;
     }
 
-    if (currentSession) {
-        sessionHeader.style.display = 'flex';
-
-        // Update tabs
-        console.log('[CLIENT] 📋 Rendering tabs, availableSessions:', availableSessions);
-        renderTabs();
+    // Always render tabs (they will show appropriate state even if no sessions)
+    console.log('[CLIENT] 📋 Rendering tabs, availableSessions:', availableSessions, 'currentSession:', currentSession);
+    renderTabs();
 
+    if (currentSession) {
         console.log('[CLIENT] 📋 Session display updated:', currentSession);
+    } else {
+        console.log('[CLIENT] 📋 No current session - showing connection state only');
     }
 }
 
@@ -1036,10 +1039,13 @@ function renderTabs() {
                 </div>
             `;
         }).join('');
-    }
 
-    // Add new session button
-    tabsHTML += '<button class="session-tab-new" onclick="createNewSession()" title="New Session">+</button>';
+        // Add new session button only when we have sessions
+        tabsHTML += '<button class="session-tab-new" onclick="createNewSession()" title="New Session">+</button>';
+    } else {
+        // No sessions available - show status message
+        tabsHTML = '<div style="color: #888; font-size: 0.85rem; padding: 6px 12px;">No sessions available</div>';
+    }
 
     tabBar.innerHTML = tabsHTML;
     console.log('[CLIENT] ✅ Tabs rendered:', sessionsToRender.length, 'tabs');