shell-mirror 1.5.34 → 1.5.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.34",
+  "version": "1.5.36",
   "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.js

@@ -58,8 +58,8 @@ class ShellMirrorDashboard {
             const agentsResponse = await fetch('/php-backend/api/agents-list.php');
             const agentsData = await agentsResponse.json();
             
-            if (agentsData.success && agentsData.data) {
-                this.agents = agentsData.data;
+            if (agentsData.success && agentsData.data && agentsData.data.agents) {
+                this.agents = agentsData.data.agents;
             }
 
             // TODO: Load session history when API is available
@@ -91,33 +91,20 @@ class ShellMirrorDashboard {
             <button class="btn-primary small" onclick="handleLogin()">Sign In</button>
         `;
 
-        // Show blurred dashboard skeleton
+        // Show actual dashboard content but blurred
         document.getElementById('dashboard-main').innerHTML = `
             <div class="dashboard-skeleton">
                 <div class="dashboard-grid">
                     <div class="dashboard-card blurred">
-                        <h2>🖥️ Active Agents</h2>
-                        <div class="skeleton-content">
-                            <div class="skeleton-agent"></div>
-                            <div class="skeleton-agent"></div>
-                        </div>
+                        ${this.renderActiveAgentsPreview()}
                     </div>
                     
                     <div class="dashboard-card blurred">
-                        <h2>⚡ Quick Actions</h2>
-                        <div class="skeleton-content">
-                            <div class="skeleton-action"></div>
-                            <div class="skeleton-action"></div>
-                            <div class="skeleton-action"></div>
-                        </div>
+                        ${this.renderQuickActions()}
                     </div>
                     
                     <div class="dashboard-card blurred full-width">
-                        <h2>📊 Recent Sessions</h2>
-                        <div class="skeleton-content">
-                            <div class="skeleton-session"></div>
-                            <div class="skeleton-session"></div>
-                        </div>
+                        ${this.renderRecentSessionsPreview()}
                     </div>
                 </div>
             </div>
@@ -160,11 +147,11 @@ class ShellMirrorDashboard {
         const agentsHtml = this.agents.map(agent => `
             <div class="agent-item">
                 <div class="agent-info">
-                    <div class="agent-name">${agent.hostname || agent.id}</div>
-                    <div class="agent-status ${agent.status}">${agent.status}</div>
+                    <div class="agent-name">${agent.machineName || agent.agentId}</div>
+                    <div class="agent-status ${agent.onlineStatus}">${agent.onlineStatus}</div>
                     <div class="agent-last-seen">Last seen: ${this.formatLastSeen(agent.lastSeen)}</div>
                 </div>
-                <button class="btn-connect" onclick="dashboard.connectToAgent('${agent.id}')">
+                <button class="btn-connect" onclick="dashboard.connectToAgent('${agent.agentId}')">
                     Connect
                 </button>
             </div>
@@ -231,6 +218,75 @@ class ShellMirrorDashboard {
         `;
     }
 
+    renderActiveAgentsPreview() {
+        // Show sample agent data for preview
+        const sampleAgents = [
+            { machineName: 'MacBook Pro', onlineStatus: 'online', lastSeen: Date.now() / 1000 - 60 },
+            { machineName: 'Mac Studio', onlineStatus: 'offline', lastSeen: Date.now() / 1000 - 3600 }
+        ];
+
+        const agentsHtml = sampleAgents.map(agent => `
+            <div class="agent-item">
+                <div class="agent-info">
+                    <div class="agent-name">${agent.machineName}</div>
+                    <div class="agent-status ${agent.onlineStatus}">${agent.onlineStatus}</div>
+                    <div class="agent-last-seen">Last seen: ${this.formatLastSeen(agent.lastSeen)}</div>
+                </div>
+                <button class="btn-connect" disabled>
+                    Connect
+                </button>
+            </div>
+        `).join('');
+
+        return `
+            <div class="card-header">
+                <h2>🖥️ Active Agents</h2>
+                <span class="agent-count">${sampleAgents.length} agents</span>
+            </div>
+            <div class="card-content">
+                ${agentsHtml}
+            </div>
+        `;
+    }
+
+    renderRecentSessionsPreview() {
+        // Show sample session data for preview
+        const sampleSessions = [
+            {
+                agentId: 'MacBook-Pro-xyz',
+                startTime: new Date(Date.now() - 86400000), // 1 day ago
+                duration: '45 minutes',
+                status: 'completed'
+            },
+            {
+                agentId: 'Mac-Studio-abc',
+                startTime: new Date(Date.now() - 3600000), // 1 hour ago
+                duration: '2 hours',
+                status: 'completed'
+            }
+        ];
+
+        const sessionsHtml = sampleSessions.map(session => `
+            <div class="session-item">
+                <div class="session-info">
+                    <div class="session-agent">${session.agentId}</div>
+                    <div class="session-time">${this.formatDate(session.startTime)}</div>
+                </div>
+                <div class="session-details">
+                    <span class="session-duration">${session.duration}</span>
+                    <span class="session-status ${session.status}">${session.status}</span>
+                </div>
+            </div>
+        `).join('');
+
+        return `
+            <h2>📊 Recent Sessions</h2>
+            <div class="card-content">
+                ${sessionsHtml}
+            </div>
+        `;
+    }
+
     renderErrorState() {
         document.getElementById('dashboard-main').innerHTML = `
             <div class="error-state">

package/public/app/terminal.html

@@ -66,17 +66,7 @@
     
     <div id="connect-container">
         <h2>Terminal Mirror</h2>
-        <div id="agent-discovery">
-            <p>Discovering available Mac agents...</p>
-            <div id="agent-list"></div>
-        </div>
-        <div id="manual-connect" style="display: none; margin-top: 20px;">
-            <p>Or manually enter Agent ID:</p>
-            <input type="text" id="agent-id-input" placeholder="e.g., agent-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
-            <br>
-            <button id="connect-btn">Connect</button>
-        </div>
-        <button id="show-manual" style="margin-top: 10px;">Manual Connect</button>
+        <p>Connecting to terminal...</p>
     </div>
     <div id="terminal-container">
         <div id="terminal"></div>

package/public/app/terminal.js

@@ -41,12 +41,6 @@ term.loadAddon(fitAddon);
 
 const connectContainer = document.getElementById('connect-container');
 const terminalContainer = document.getElementById('terminal-container');
-const agentIdInput = document.getElementById('agent-id-input');
-const connectBtn = document.getElementById('connect-btn');
-const showManualBtn = document.getElementById('show-manual');
-const manualConnect = document.getElementById('manual-connect');
-const agentDiscovery = document.getElementById('agent-discovery');
-const agentList = document.getElementById('agent-list');
 
 let ws;
 let peerConnection;
@@ -56,10 +50,24 @@ let AGENT_ID;
 let CLIENT_ID;
 let SELECTED_AGENT; // Store full agent data including WebSocket URL
 
-// Auto-discover agents on page load
+// Check for agent parameter and connect directly
 window.addEventListener('load', () => {
-    discoverAgents();
     loadVersionInfo();
+    
+    // Get agent ID from URL parameter
+    const urlParams = new URLSearchParams(window.location.search);
+    const agentId = urlParams.get('agent');
+    
+    if (agentId) {
+        AGENT_ID = agentId;
+        SELECTED_AGENT = { id: agentId, agentId: agentId };
+        console.log('[CLIENT] 🔗 Connecting directly to agent:', agentId);
+        startConnection();
+    } else {
+        // No agent specified, redirect to dashboard
+        console.log('[CLIENT] ❌ No agent specified, redirecting to dashboard');
+        window.location.href = '/app/dashboard.html';
+    }
 });
 
 // Load version info for footer
@@ -86,34 +94,7 @@ async function loadVersionInfo() {
     }
 }
 
-showManualBtn.onclick = () => {
-    agentDiscovery.style.display = 'none';
-    manualConnect.style.display = 'block';
-    showManualBtn.style.display = 'none';
-};
-
-connectBtn.onclick = () => {
-    AGENT_ID = agentIdInput.value.trim();
-    if (!AGENT_ID) {
-        alert('Please enter a valid Agent ID.');
-        return;
-    }
-    startConnection();
-};
 
-function connectToAgent(agent) {
-    if (typeof agent === 'string') {
-        // Fallback for manual connection - agent is just the ID
-        AGENT_ID = agent;
-        SELECTED_AGENT = { id: agent, websocketUrl: null };
-    } else {
-        // Full agent object from discovery
-        AGENT_ID = agent.id;
-        SELECTED_AGENT = agent;
-    }
-    console.log('[CLIENT] 🔗 Connecting to agent:', SELECTED_AGENT);
-    startConnection();
-}
 
 function startConnection() {
     connectContainer.style.display = 'none';
@@ -126,103 +107,6 @@ function startConnection() {
     initialize();
 }
 
-async function discoverAgents() {
-    console.log('[DISCOVERY] 🔍 Starting agent discovery via PHP backend...');
-    agentList.innerHTML = '<p style="color: #ccc;">Searching for Mac agents...</p>';
-    
-    try {
-        // Use PHP backend for agent discovery instead of WebSocket
-        const response = await fetch('/php-backend/api/list-agents.php', {
-            method: 'GET',
-            credentials: 'include', // Include session cookies for authentication
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            }
-        });
-        
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-        
-        const data = await response.json();
-        console.log('[DISCOVERY] 📨 PHP Backend Response:', data);
-        
-        if (data.success && data.data && data.data.agents) {
-            displayAvailableAgents(data.data.agents);
-        } else {
-            console.log('[DISCOVERY] ⚠️ No agents found in response');
-            agentList.innerHTML = '<p style="color: #ff9800;">⚠️ No Mac agents found.<br><small>Make sure your Mac agent is running with: <code>shell-mirror</code></small></p>';
-            showManualBtn.style.display = 'block';
-        }
-        
-    } catch (error) {
-        console.error('[DISCOVERY] ❌ PHP Backend error:', error);
-        
-        if (error.message.includes('401')) {
-            agentList.innerHTML = '<p style="color: #f44336;">Authentication required. <a href="/php-backend/api/auth-login.php" style="color: #4CAF50;">Please log in</a></p>';
-        } else {
-            agentList.innerHTML = '<p style="color: #f44336;">Discovery failed. Check server connection.</p>';
-        }
-        
-        showManualBtn.style.display = 'block';
-    }
-}
-
-function displayAvailableAgents(agents) {
-    console.log('[DISCOVERY] 🖥️ Displaying agents:', agents);
-    agentList.innerHTML = '';
-    
-    if (agents.length === 0) {
-        agentList.innerHTML = '<p style="color: #ff9800;">❌ No Mac agents currently running.</p>';
-        showManualBtn.style.display = 'block';
-        return;
-    }
-    
-    console.log(`[DISCOVERY] ✅ Found ${agents.length} agent(s)`);
-    
-    agents.forEach(agent => {
-        const agentDiv = document.createElement('div');
-        agentDiv.style.cssText = 'margin: 10px 0; padding: 15px; background: #333; border-radius: 8px; cursor: pointer; border: 2px solid #555; transition: all 0.3s ease;';
-        agentDiv.innerHTML = `
-            <div style="display: flex; align-items: center; gap: 10px;">
-                <div style="width: 12px; height: 12px; background: #4CAF50; border-radius: 50%; animation: pulse 2s infinite;"></div>
-                <div>
-                    <strong style="color: #fff;">${agent.id}</strong><br>
-                    <small style="color: #aaa;">🖱️ Click to connect to Mac terminal</small>
-                </div>
-            </div>
-        `;
-        
-        agentDiv.onmouseover = () => {
-            agentDiv.style.borderColor = '#4CAF50';
-            agentDiv.style.background = '#444';
-        };
-        agentDiv.onmouseout = () => {
-            agentDiv.style.borderColor = '#555';
-            agentDiv.style.background = '#333';
-        };
-        agentDiv.onclick = () => {
-            console.log(`[DISCOVERY] 🖱️ User clicked on agent: ${agent.id}`, agent);
-            connectToAgent(agent);
-        };
-        
-        agentList.appendChild(agentDiv);
-    });
-    
-    showManualBtn.style.display = 'block';
-    
-    // Add CSS animation for pulse effect
-    const style = document.createElement('style');
-    style.textContent = `
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.5; }
-            100% { opacity: 1; }
-        }
-    `;
-    document.head.appendChild(style);
-}
 
 async function initialize() {
     console.log('[CLIENT] 🚀 Initializing WebRTC connection to agent:', AGENT_ID);