shell-mirror 1.5.111 → 1.5.113

package/package.json

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

@@ -23,11 +23,15 @@
     box-sizing: border-box;
 }
 
+html {
+    background: #0a0b0d;
+}
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     line-height: 1.5;
     color: var(--text-primary);
-    background: var(--bg-primary);
+    background: var(--bg-primary) !important;
     min-height: 100vh;
 }
 
@@ -194,12 +198,7 @@ body {
 }
 
 .agent-count {
-    background: var(--accent);
-    color: white;
-    padding: 2px 8px;
-    border-radius: 10px;
-    font-size: 0.75rem;
-    font-weight: 600;
+    display: none;
 }
 
 .refresh-time {
@@ -250,20 +249,58 @@ body {
     color: var(--text-primary);
 }
 
-.btn-delete-agent {
+/* Agent Menu Dropdown */
+.agent-menu {
+    position: relative;
+}
+
+.btn-agent-menu {
     background: none;
     border: none;
+    color: var(--text-muted);
+    font-size: 1.2rem;
     cursor: pointer;
-    font-size: 0.8rem;
-    opacity: 0.3;
-    transition: opacity 0.15s ease;
-    padding: 4px;
-    color: var(--text-secondary);
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+}
+
+.btn-agent-menu:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+}
+
+.agent-menu-dropdown {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: calc(100% + 4px);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    min-width: 160px;
+    z-index: 100;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
-.btn-delete-agent:hover {
-    opacity: 1;
+.agent-menu-dropdown.show {
+    display: block;
+}
+
+.agent-menu-dropdown button {
+    width: 100%;
+    padding: 10px 14px;
+    background: none;
+    border: none;
     color: var(--danger);
+    text-align: left;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: background 0.15s ease;
+}
+
+.agent-menu-dropdown button:hover {
+    background: var(--bg-hover);
 }
 
 .agent-status {
@@ -276,7 +313,7 @@ body {
 }
 
 .agent-status.online {
-    color: var(--success);
+    color: var(--text-secondary);
     background: none;
     padding: 0;
 }
@@ -290,17 +327,33 @@ body {
 }
 
 .agent-status.recent {
-    color: var(--warning);
+    color: var(--text-secondary);
     background: none;
     padding: 0;
 }
 
+.agent-status.recent::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    background: var(--warning);
+    border-radius: 50%;
+}
+
 .agent-status.offline {
-    color: var(--danger);
+    color: var(--text-secondary);
     background: none;
     padding: 0;
 }
 
+.agent-status.offline::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    background: var(--danger);
+    border-radius: 50%;
+}
+
 .agent-session-count {
     color: var(--text-muted);
     font-weight: 400;
@@ -556,7 +609,7 @@ body {
 .command-box code {
     font-family: 'Monaco', 'Menlo', monospace;
     font-size: 0.85rem;
-    color: var(--success);
+    color: var(--text-primary);
     flex: 1;
 }
 

package/public/app/dashboard.js

@@ -556,12 +556,6 @@ class ShellMirrorDashboard {
             const sessionCount = sessions.length;
             
             const isConnectable = agent.status === 'online' || agent.status === 'recent';
-            const statusIcon = {
-                'online': '🟢',
-                'recent': '🟡', 
-                'offline': '🔴'
-            }[agent.status] || '❓';
-            
             const statusText = {
                 'online': 'Live',
                 'recent': 'Recent',
@@ -592,13 +586,15 @@ class ShellMirrorDashboard {
                     <div class="agent-info">
                         <div class="agent-name-row">
                             <span class="agent-name">${agent.machineName || agent.agentId}</span>
-                            <button class="btn-delete-agent" onclick="dashboard.deleteAgent('${agent.agentId}')" title="Remove agent">
-                                🗑️
-                            </button>
+                            <div class="agent-menu">
+                                <button class="btn-agent-menu" onclick="event.stopPropagation(); dashboard.toggleAgentMenu('${agent.agentId}')">⋮</button>
+                                <div class="agent-menu-dropdown" id="agent-menu-${agent.agentId}">
+                                    <button onclick="dashboard.showShutdownConfirm('${agent.agentId}')">Shut down agent</button>
+                                </div>
+                            </div>
                         </div>
                         <div class="agent-status ${agent.status}">
-                            ${statusIcon} ${statusText}
-                            ${sessionCount > 0 ? ` · ${sessionCount} session${sessionCount !== 1 ? 's' : ''}` : ''}
+                            ${statusText}${sessionCount > 0 ? ` · ${sessionCount} session${sessionCount !== 1 ? 's' : ''}` : ''}
                         </div>
                     </div>
                 </div>
@@ -1072,13 +1068,66 @@ class ShellMirrorDashboard {
         return true;
     }
 
-    async deleteAgent(agentId) {
+    toggleAgentMenu(agentId) {
+        // Close all other menus first
+        document.querySelectorAll('.agent-menu-dropdown.show').forEach(el => {
+            el.classList.remove('show');
+        });
+        const menu = document.getElementById(`agent-menu-${agentId}`);
+        if (menu) {
+            menu.classList.toggle('show');
+        }
+    }
+
+    showShutdownConfirm(agentId) {
+        // Close menu
+        document.querySelectorAll('.agent-menu-dropdown.show').forEach(el => {
+            el.classList.remove('show');
+        });
+        this.showShutdownModal(agentId);
+    }
+
+    showShutdownModal(agentId) {
         const agent = this.agents.find(a => a.agentId === agentId);
         const agentName = agent ? (agent.machineName || agentId) : agentId;
 
-        if (!confirm(`Are you sure you want to remove "${agentName}" from the dashboard?\n\nThis will unregister the agent. If it's still running, it will re-register on next heartbeat.`)) {
-            return;
-        }
+        const modalOverlay = document.createElement('div');
+        modalOverlay.className = 'modal-overlay';
+        modalOverlay.id = 'shutdown-modal';
+        modalOverlay.onclick = (e) => {
+            if (e.target === modalOverlay) {
+                document.body.removeChild(modalOverlay);
+            }
+        };
+
+        modalOverlay.innerHTML = `
+            <div class="modal" onclick="event.stopPropagation()">
+                <div class="modal-header">
+                    <h3>Shut down agent</h3>
+                    <button class="modal-close" onclick="document.getElementById('shutdown-modal').remove()">×</button>
+                </div>
+                <div class="modal-body">
+                    <p style="margin-bottom: 12px; color: var(--text-secondary);">
+                        Are you sure you want to shut down <strong style="color: var(--text-primary);">${agentName}</strong>?
+                    </p>
+                    <p style="font-size: 0.85rem; color: var(--text-muted);">
+                        This will unregister the agent from the dashboard. If the agent is still running, it will re-register on next heartbeat.
+                    </p>
+                </div>
+                <div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 10px; padding: 16px; border-top: 1px solid var(--border);">
+                    <button onclick="document.getElementById('shutdown-modal').remove()" style="padding: 8px 16px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; cursor: pointer;">Cancel</button>
+                    <button onclick="dashboard.shutdownAgent('${agentId}')" style="padding: 8px 16px; background: var(--danger); color: white; border: none; border-radius: 6px; cursor: pointer;">Shut down</button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(modalOverlay);
+    }
+
+    async shutdownAgent(agentId) {
+        // Close modal
+        const modal = document.getElementById('shutdown-modal');
+        if (modal) modal.remove();
 
         try {
             const response = await fetch('/php-backend/api/delete-agent.php', {
@@ -1090,14 +1139,14 @@ class ShellMirrorDashboard {
 
             const data = await response.json();
             if (data.success) {
-                console.log('[DASHBOARD] Agent deleted:', agentId);
+                console.log('[DASHBOARD] Agent shut down:', agentId);
                 await this.refreshDashboardData();
             } else {
-                alert('Failed to remove agent: ' + (data.message || 'Unknown error'));
+                alert('Failed to shut down agent: ' + (data.message || 'Unknown error'));
             }
         } catch (error) {
-            console.error('[DASHBOARD] Delete agent failed:', error);
-            alert('Failed to remove agent: ' + error.message);
+            console.error('[DASHBOARD] Shutdown agent failed:', error);
+            alert('Failed to shut down agent: ' + error.message);
         }
     }
 
@@ -1329,4 +1378,13 @@ window.addEventListener('beforeunload', () => {
     if (dashboard && dashboard.refreshInterval) {
         clearInterval(dashboard.refreshInterval);
     }
+});
+
+// Close agent menu when clicking outside
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('.agent-menu')) {
+        document.querySelectorAll('.agent-menu-dropdown.show').forEach(el => {
+            el.classList.remove('show');
+        });
+    }
 });