shell-mirror 1.5.92 → 1.5.93

package/package.json

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

@@ -521,6 +521,33 @@ body {
     text-align: center;
 }
 
+.agent-name-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.btn-delete-agent {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9rem;
+    opacity: 0.4;
+    transition: opacity 0.2s ease;
+    padding: 2px 4px;
+}
+
+.btn-delete-agent:hover {
+    opacity: 1;
+}
+
+.agent-session-count {
+    font-weight: normal;
+    font-size: 0.7rem;
+    color: #666;
+    margin-left: 6px;
+}
+
 .agent-actions {
     display: flex;
     gap: 8px;

package/public/app/dashboard.js

@@ -587,9 +587,15 @@ class ShellMirrorDashboard {
             <div class="agent-item ${!isConnectable ? 'agent-offline' : ''}">
                 <div class="agent-header">
                     <div class="agent-info">
-                        <div class="agent-name">${agent.machineName || agent.agentId}</div>
+                        <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>
                         <div class="agent-status ${agent.status}">
                             ${statusIcon} ${statusText}
+                            ${sessionCount > 0 ? `<span class="agent-session-count">(${sessionCount} session${sessionCount !== 1 ? 's' : ''})</span>` : ''}
                         </div>
                         <div class="agent-last-seen">Last seen: ${lastSeenText}</div>
                     </div>
@@ -597,7 +603,7 @@ class ShellMirrorDashboard {
                 ${isConnectable ? `
                 <div class="agent-sessions-inline">
                     ${sessionCount > 0 ? `
-                        <div class="sessions-label">Sessions (${sessionCount})</div>
+                        <div class="sessions-label">Active Sessions</div>
                         <div class="sessions-list">
                             ${sessionsHtml}
                         </div>
@@ -1033,6 +1039,10 @@ class ShellMirrorDashboard {
     }
 
     async connectToSession(agentId, sessionId) {
+        // Validate agent is reachable before connecting
+        const isReachable = await this.validateAgentBeforeConnect(agentId);
+        if (!isReachable) return;
+
         // Track specific session connection in Google Analytics
         if (typeof sendGAEvent === 'function') {
             sendGAEvent('terminal_connect', {
@@ -1042,14 +1052,18 @@ class ShellMirrorDashboard {
                 session_id: sessionId
             });
         }
-        
-        window.location.href = `/app/terminal.html?agent=${agentId}&session=${sessionId}`;
+
+        // Open in new browser tab so user can return to dashboard
+        window.open(`/app/terminal.html?agent=${agentId}&session=${sessionId}`, '_blank');
     }
 
     async createNewSession(agentId) {
-        // Force creation of new session by not passing session parameter
+        // Validate agent is reachable before connecting
+        const isReachable = await this.validateAgentBeforeConnect(agentId);
+        if (!isReachable) return;
+
         console.log(`[DASHBOARD] Creating new session for agent: ${agentId}`);
-        
+
         // Track explicit new session creation in Google Analytics
         if (typeof sendGAEvent === 'function') {
             sendGAEvent('terminal_connect', {
@@ -1058,8 +1072,61 @@ class ShellMirrorDashboard {
                 agent_id: agentId
             });
         }
-        
-        window.location.href = `/app/terminal.html?agent=${agentId}`;
+
+        // Open in new browser tab so user can return to dashboard
+        window.open(`/app/terminal.html?agent=${agentId}&newSession=true`, '_blank');
+    }
+
+    async validateAgentBeforeConnect(agentId) {
+        const agent = this.agents.find(a => a.agentId === agentId);
+        if (!agent) {
+            alert('Agent not found. Please refresh and try again.');
+            return false;
+        }
+
+        // Always test connectivity before connecting (not just for 'recent')
+        console.log('[DASHBOARD] 🔍 Validating agent connectivity...');
+        this.showAgentConnectionTest(agentId, 'testing');
+
+        const isReachable = await this.testAgentConnectivity(agentId);
+        this.showAgentConnectionTest(agentId, 'done');
+
+        if (!isReachable) {
+            this.showConnectionError(agent, 'Agent is not reachable. It may be offline or disconnected.');
+            await this.refreshDashboardData();
+            return false;
+        }
+
+        return true;
+    }
+
+    async deleteAgent(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;
+        }
+
+        try {
+            const response = await fetch('/php-backend/api/delete-agent.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ agentId })
+            });
+
+            const data = await response.json();
+            if (data.success) {
+                console.log('[DASHBOARD] Agent deleted:', agentId);
+                await this.refreshDashboardData();
+            } else {
+                alert('Failed to remove agent: ' + (data.message || 'Unknown error'));
+            }
+        } catch (error) {
+            console.error('[DASHBOARD] Delete agent failed:', error);
+            alert('Failed to remove agent: ' + error.message);
+        }
     }
 
     startNewSession() {

package/public/app/terminal.html

@@ -153,17 +153,17 @@
       .session-tab {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 8px 12px;
+        gap: 4px;
+        padding: 6px 8px;
         background: transparent;
         border: none;
         border-bottom: 3px solid transparent;
-        color: #999;
-        cursor: pointer;
-        min-width: 120px;
+        color: #888;
+        min-width: 100px;
         white-space: nowrap;
         transition: all 0.2s ease;
         flex-shrink: 0;
+        border-radius: 6px 6px 0 0;
       }
 
       .session-tab:hover {
@@ -175,7 +175,40 @@
         color: #fff;
         font-weight: 600;
         border-bottom-color: #667eea;
-        background: #1a1a1a;
+        background: #333;
+        box-shadow: inset 0 -3px 0 #667eea;
+      }
+
+      .session-tab-btn {
+        background: none;
+        border: none;
+        color: inherit;
+        font: inherit;
+        cursor: pointer;
+        padding: 2px 4px;
+      }
+
+      .session-tab-close {
+        background: none;
+        border: none;
+        color: #666;
+        font-size: 1.1rem;
+        cursor: pointer;
+        padding: 0 4px;
+        line-height: 1;
+        border-radius: 3px;
+        opacity: 0;
+        transition: all 0.2s ease;
+      }
+
+      .session-tab:hover .session-tab-close {
+        opacity: 0.7;
+      }
+
+      .session-tab-close:hover {
+        opacity: 1 !important;
+        background: rgba(255, 100, 100, 0.3);
+        color: #ff6b6b;
       }
 
       .session-tab-name {

package/public/app/terminal.js

@@ -411,6 +411,9 @@ function setupDirectConnection(directWs) {
                 term.clear();
                 term.write(`\r\n\x1b[36m✨ New session created: ${currentSession.name}\x1b[0m\r\n\r\n`);
 
+                // Update URL with session ID so refresh reconnects to same session
+                updateUrlWithSession(data.sessionId);
+
                 // Update UI
                 updateSessionDisplay();
 
@@ -995,12 +998,14 @@ function renderTabs() {
             const displayName = session.name || 'Terminal Session';
 
             return `
-                <button class="session-tab ${isActive ? 'active' : ''}"
-                        onclick="switchToSession('${session.id}')"
-                        ${isActive ? 'disabled' : ''}
-                        title="${displayName}">
-                    <span class="session-tab-name">${displayName}</span>
-                </button>
+                <div class="session-tab ${isActive ? 'active' : ''}" title="${displayName}">
+                    <button class="session-tab-btn"
+                            onclick="switchToSession('${session.id}')"
+                            ${isActive ? '' : ''}>
+                        <span class="session-tab-name">${displayName}</span>
+                    </button>
+                    <button class="session-tab-close" onclick="closeSession('${session.id}', event)" title="Close session">×</button>
+                </div>
             `;
         }).join('');
     }
@@ -1012,6 +1017,56 @@ function renderTabs() {
     console.log('[CLIENT] ✅ Tabs rendered:', sessionsToRender.length, 'tabs');
 }
 
+// Update URL with current session ID so refresh reconnects
+function updateUrlWithSession(sessionId) {
+    const url = new URL(window.location.href);
+    url.searchParams.set('session', sessionId);
+    window.history.replaceState({}, '', url.toString());
+    console.log('[CLIENT] 📍 URL updated with session:', sessionId);
+}
+
+// Close a session with confirmation
+function closeSession(sessionId, event) {
+    event.stopPropagation(); // Don't trigger tab switch
+
+    const session = availableSessions.find(s => s.id === sessionId);
+    const sessionName = session?.name || 'this session';
+
+    if (!confirm(`Close "${sessionName}"?\n\nThis will terminate the terminal session.`)) {
+        return;
+    }
+
+    console.log('[CLIENT] 🗑️ Closing session:', sessionId);
+
+    // Send close request to agent
+    const closeMessage = {
+        type: 'close_session',
+        sessionId: sessionId
+    };
+
+    if (dataChannel && dataChannel.readyState === 'open') {
+        dataChannel.send(JSON.stringify(closeMessage));
+    } else if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(closeMessage));
+    }
+
+    // Remove from available sessions
+    availableSessions = availableSessions.filter(s => s.id !== sessionId);
+
+    // If closing current session, switch to another or show message
+    if (currentSession && currentSession.id === sessionId) {
+        if (availableSessions.length > 0) {
+            switchToSession(availableSessions[0].id);
+        } else {
+            currentSession = null;
+            term.clear();
+            term.write('\r\n\x1b[33mSession closed. Click + to create a new session.\x1b[0m\r\n');
+        }
+    }
+
+    renderTabs();
+}
+
 function getConnectionStatus() {
     // Check direct WebSocket connection
     if (ws && ws.readyState === WebSocket.OPEN) {
@@ -1119,6 +1174,9 @@ function handleSessionMessage(message) {
             term.clear();
             term.write(`\r\n\x1b[36m✨ New session created: ${currentSession.name}\x1b[0m\r\n\r\n`);
 
+            // Update URL with session ID so refresh reconnects to same session
+            updateUrlWithSession(message.sessionId);
+
             // Update UI
             updateSessionDisplay();
 
@@ -1135,6 +1193,9 @@ function handleSessionMessage(message) {
             term.clear(); // Clear terminal for new session
             console.log('[CLIENT] ✅ Switched to session:', currentSession);
 
+            // Update URL so refresh reconnects to this session
+            updateUrlWithSession(message.sessionId);
+
             // Save updated session info
             saveSessionToLocalStorage(AGENT_ID, currentSession);
             break;