shell-mirror 1.5.16 → 1.5.18

package/lib/auto-start.js

@@ -5,6 +5,7 @@ const crypto = require('crypto');
 const { spawn } = require('child_process');
 const https = require('https');
 const querystring = require('querystring');
+const NetworkUtils = require('./network-utils');
 
 class AutoStart {
   constructor() {
@@ -400,13 +401,16 @@ NODE_ENV=development
     });
   }
 
-  async createEnvFile(authInfo) {
+  async createEnvFile(authInfo, wsConfig = null) {
+    const port = wsConfig ? wsConfig.port : 8080;
+    const host = wsConfig ? wsConfig.host : '0.0.0.0';
+    
     const envContent = `# Shell Mirror Configuration
 # Auto-generated on ${new Date().toISOString()}
 
-BASE_URL=http://localhost:8080
-PORT=8080
-HOST=0.0.0.0
+BASE_URL=http://localhost:${port}
+PORT=${port}
+HOST=${host}
 GOOGLE_CLIENT_ID=${this.oauthConfig.clientId}
 GOOGLE_CLIENT_SECRET=${this.oauthConfig.clientSecret}
 SESSION_SECRET=${crypto.randomBytes(32).toString('hex')}
@@ -416,62 +420,93 @@ NODE_ENV=development
 USER_EMAIL=${authInfo.email}
 USER_NAME=${authInfo.name}
 ACCESS_TOKEN=${authInfo.accessToken}
+
+# WebSocket server configuration
+${wsConfig ? `WS_PORT=${wsConfig.port}
+WS_HOST=${wsConfig.host}
+WS_LOCAL_IP=${wsConfig.localIP}
+WS_URL=${wsConfig.wsUrl}` : ''}
 `;
 
     await fs.writeFile(this.envFile, envContent);
   }
 
-  displayStatus(authInfo) {
+  displayStatus(authInfo, wsConfig = null) {
     const pkg = require('../package.json');
+    console.log('');
     console.log(`✅ Shell Mirror v${pkg.version} - Running (${authInfo.email})`);
+    if (wsConfig) {
+      console.log(`🌐 WebSocket Server: ${wsConfig.wsUrl}`);
+      console.log(`📱 Access from browser: https://shellmirror.app`);
+    }
     console.log('Press Ctrl+C to stop');
+    console.log('');
   }
 
   async startAuthenticatedServer(authInfo) {
     console.log('');
-    console.log('🚀 Starting authenticated Shell Mirror server...');
-    
-    // Create .env file with authentication
-    await this.createEnvFile(authInfo);
-    
-    // Register this server as a Mac agent
-    await this.registerAsMacAgent(authInfo);
-    
-    // Find the package root directory (where server.js is located)
-    const packageRoot = path.resolve(__dirname, '..');
-    const serverPath = path.join(packageRoot, 'server.js');
+    console.log('🚀 Starting authenticated Shell Mirror with local WebSocket server...');
     
-    // Start the main server process
-    const serverProcess = spawn('node', [serverPath], {
-      stdio: 'inherit',
-      cwd: path.dirname(this.envFile),
-      env: { ...process.env }
-    });
+    try {
+      // Set up local WebSocket server configuration
+      const wsPort = await NetworkUtils.findAvailablePort(8080, 10);
+      const wsConfig = NetworkUtils.generateWebSocketConfig(wsPort);
+      
+      // Display network information
+      NetworkUtils.displayNetworkInfo(wsConfig);
+      
+      // Create .env file with authentication and WebSocket config
+      await this.createEnvFile(authInfo, wsConfig);
+      
+      // Register this server as a Mac agent with WebSocket endpoint
+      await this.registerAsMacAgent(authInfo, wsConfig);
+      
+      // Start the local WebSocket server process
+      const packageRoot = path.resolve(__dirname, '..');
+      const serverPath = path.join(packageRoot, 'server.js');
+      
+      console.log('🔄 Starting local WebSocket server...');
+      const serverProcess = spawn('node', [serverPath], {
+        stdio: 'inherit',
+        cwd: path.dirname(this.envFile),
+        env: { 
+          ...process.env,
+          WS_PORT: wsConfig.port.toString(),
+          WS_HOST: wsConfig.host,
+          LOCAL_IP: wsConfig.localIP
+        }
+      });
 
-    // Display status information
-    this.displayStatus(authInfo);
+      // Display status information
+      this.displayStatus(authInfo, wsConfig);
 
-    // Handle Ctrl+C gracefully
-    process.on('SIGINT', () => {
-      console.log('');
-      console.log('🛑 Stopping Shell Mirror...');
-      serverProcess.kill('SIGINT');
-      process.exit(0);
-    });
+      // Handle Ctrl+C gracefully
+      process.on('SIGINT', () => {
+        console.log('');
+        console.log('🛑 Stopping Shell Mirror and WebSocket server...');
+        serverProcess.kill('SIGINT');
+        process.exit(0);
+      });
 
-    // Wait for server process
-    serverProcess.on('close', (code) => {
-      if (code !== 0) {
-        console.error(`❌ Server exited with code ${code}`);
-        process.exit(code);
-      }
-    });
+      // Wait for server process
+      serverProcess.on('close', (code) => {
+        if (code !== 0) {
+          console.error(`❌ Server exited with code ${code}`);
+          process.exit(code);
+        }
+      });
+      
+    } catch (error) {
+      console.error('❌ Failed to start WebSocket server:', error.message);
+      process.exit(1);
+    }
   }
 
-  async registerAsMacAgent(authInfo) {
-    console.log('🔗 Registering as Mac agent...');
+  async registerAsMacAgent(authInfo, wsConfig) {
+    console.log('🔗 Registering as Mac agent with WebSocket endpoint...');
     console.log(`   User: ${authInfo.email}`);
     console.log(`   Machine: ${os.hostname()}`);
+    console.log(`   WebSocket: ${wsConfig.wsUrl}`);
     
     try {
       const agentId = `local-${os.hostname()}-${Date.now()}`;
@@ -481,9 +516,11 @@ ACCESS_TOKEN=${authInfo.accessToken}
         ownerName: authInfo.name,
         ownerToken: authInfo.accessToken,
         machineName: os.hostname(),
-        agentVersion: '1.3.0',
+        agentVersion: '1.5.17',
         capabilities: ['terminal', 'websocket'],
-        serverPort: 8080
+        serverPort: wsConfig.port,
+        websocketUrl: wsConfig.wsUrl,
+        localIP: wsConfig.localIP
       };
 
       console.log(`   Agent ID: ${agentId}`);

package/lib/network-utils.js

@@ -0,0 +1,145 @@
+const os = require('os');
+
+/**
+ * Network utilities for local WebSocket server setup
+ */
+class NetworkUtils {
+  /**
+   * Get the local IP address for WebSocket server binding
+   * Prioritizes Wi-Fi and Ethernet interfaces over others
+   */
+  static getLocalIP() {
+    const interfaces = os.networkInterfaces();
+    
+    // Priority order for interface selection
+    const priorityOrder = [
+      'Wi-Fi',           // macOS Wi-Fi
+      'en0',             // macOS primary interface
+      'en1',             // macOS secondary interface  
+      'eth0',            // Linux Ethernet
+      'wlan0',           // Linux Wi-Fi
+      'Ethernet',        // Windows Ethernet
+      'Wi-Fi'            // Windows Wi-Fi (might be different name)
+    ];
+    
+    // First, try priority interfaces
+    for (const interfaceName of priorityOrder) {
+      const addresses = interfaces[interfaceName];
+      if (addresses) {
+        for (const addr of addresses) {
+          if (addr.family === 'IPv4' && !addr.internal) {
+            console.log(`🌐 Selected network interface: ${interfaceName} (${addr.address})`);
+            return addr.address;
+          }
+        }
+      }
+    }
+    
+    // Fallback: find any non-internal IPv4 address
+    for (const interfaceName in interfaces) {
+      const addresses = interfaces[interfaceName];
+      for (const addr of addresses) {
+        if (addr.family === 'IPv4' && !addr.internal) {
+          console.log(`🌐 Fallback network interface: ${interfaceName} (${addr.address})`);
+          return addr.address;
+        }
+      }
+    }
+    
+    // Last resort: localhost (won't work for remote clients)
+    console.warn('⚠️  No external network interface found, using localhost');
+    return '127.0.0.1';
+  }
+  
+  /**
+   * Find an available port for the WebSocket server
+   * @param {number} startPort - Starting port to check
+   * @param {number} maxAttempts - Maximum number of ports to try
+   */
+  static async findAvailablePort(startPort = 8080, maxAttempts = 10) {
+    const net = require('net');
+    
+    for (let i = 0; i < maxAttempts; i++) {
+      const port = startPort + i;
+      const isAvailable = await this.checkPortAvailable(port);
+      if (isAvailable) {
+        console.log(`🔌 Found available port: ${port}`);
+        return port;
+      }
+    }
+    
+    throw new Error(`No available ports found in range ${startPort}-${startPort + maxAttempts - 1}`);
+  }
+  
+  /**
+   * Check if a specific port is available
+   * @param {number} port - Port to check
+   */
+  static checkPortAvailable(port) {
+    return new Promise((resolve) => {
+      const net = require('net');
+      const server = net.createServer();
+      
+      server.listen(port, (err) => {
+        if (err) {
+          resolve(false);
+        } else {
+          server.once('close', () => resolve(true));
+          server.close();
+        }
+      });
+      
+      server.on('error', () => resolve(false));
+    });
+  }
+  
+  /**
+   * Generate WebSocket server configuration
+   * @param {number} port - Port for WebSocket server
+   */
+  static generateWebSocketConfig(port) {
+    const localIP = this.getLocalIP();
+    
+    return {
+      host: '0.0.0.0',      // Bind to all interfaces
+      port: port,
+      localIP: localIP,
+      wsUrl: `ws://${localIP}:${port}`,
+      httpsWsUrl: `wss://${localIP}:${port}` // For future HTTPS support
+    };
+  }
+  
+  /**
+   * Display network connectivity information
+   * @param {object} config - WebSocket configuration
+   */
+  static displayNetworkInfo(config) {
+    console.log('');
+    console.log('🌐 Network Configuration:');
+    console.log(`   Local IP: ${config.localIP}`);
+    console.log(`   WebSocket URL: ${config.wsUrl}`);
+    console.log(`   Binding: ${config.host}:${config.port}`);
+    console.log('');
+    console.log('📱 Access from other devices:');
+    console.log(`   Use this URL in browser: https://shellmirror.app`);
+    console.log(`   Mac agent WebSocket: ${config.wsUrl}`);
+    console.log('');
+  }
+  
+  /**
+   * Validate WebSocket URL format
+   * @param {string} wsUrl - WebSocket URL to validate
+   */
+  static validateWebSocketURL(wsUrl) {
+    try {
+      const url = new URL(wsUrl);
+      return (url.protocol === 'ws:' || url.protocol === 'wss:') && 
+             url.hostname && 
+             url.port;
+    } catch (error) {
+      return false;
+    }
+  }
+}
+
+module.exports = NetworkUtils;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.16",
+  "version": "1.5.18",
   "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/terminal.html

@@ -54,7 +54,7 @@
     <!-- Version Footer -->
     <footer style="background: #ff6b35; color: white; text-align: center; padding: 10px 0; font-size: 0.8rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;">
         <div style="max-width: 1200px; margin: 0 auto;">
-            <p id="terminal-version-info">Terminal Mirror v1.5.14 • Loading...</p>
+            <p id="terminal-version-info">Terminal Mirror • Loading version...</p>
         </div>
     </footer>
     

package/public/app/terminal.js

@@ -54,6 +54,7 @@ let dataChannel;
 let user;
 let AGENT_ID;
 let CLIENT_ID;
+let SELECTED_AGENT; // Store full agent data including WebSocket URL
 
 // Auto-discover agents on page load
 window.addEventListener('load', () => {
@@ -67,13 +68,21 @@ async function loadVersionInfo() {
         const response = await fetch('/build-info.json');
         const buildInfo = await response.json();
         const versionElement = document.getElementById('terminal-version-info');
+        const footerElement = versionElement?.parentElement?.parentElement; // Get the footer element
+        
         if (versionElement && buildInfo) {
             const buildDate = new Date(buildInfo.buildTime).toLocaleDateString();
             versionElement.textContent = `Terminal Mirror v${buildInfo.version} • Built ${buildDate}`;
+            
+            // Apply random footer color from build info
+            if (footerElement && buildInfo.footerColor) {
+                footerElement.style.background = buildInfo.footerColor;
+                console.log(`🎨 Applied footer color: ${buildInfo.footerColor}`);
+            }
         }
     } catch (error) {
         console.log('Could not load build info for terminal:', error);
-        // Keep default version if build-info.json not available
+        // Keep default version and color if build-info.json not available
     }
 }
 
@@ -92,8 +101,17 @@ connectBtn.onclick = () => {
     startConnection();
 };
 
-function connectToAgent(agentId) {
-    AGENT_ID = agentId;
+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();
 }
 
@@ -185,8 +203,8 @@ function displayAvailableAgents(agents) {
             agentDiv.style.background = '#333';
         };
         agentDiv.onclick = () => {
-            console.log(`[DISCOVERY] 🖱️ User clicked on agent: ${agent.id}`);
-            connectToAgent(agent.id);
+            console.log(`[DISCOVERY] 🖱️ User clicked on agent: ${agent.id}`, agent);
+            connectToAgent(agent);
         };
         
         agentList.appendChild(agentDiv);
@@ -208,8 +226,19 @@ function displayAvailableAgents(agents) {
 
 async function initialize() {
     console.log('[CLIENT] 🚀 Initializing WebRTC connection to agent:', AGENT_ID);
-    // WebSocket server on same domain as web app
-    const signalingUrl = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host;
+    console.log('[CLIENT] 📋 Selected agent data:', SELECTED_AGENT);
+    
+    // Determine WebSocket URL - use agent's local WebSocket server if available
+    let signalingUrl;
+    if (SELECTED_AGENT && SELECTED_AGENT.websocketUrl) {
+        signalingUrl = SELECTED_AGENT.websocketUrl;
+        console.log('[CLIENT] 🌐 Using agent\'s local WebSocket server:', signalingUrl);
+    } else {
+        // Fallback to web app domain (old behavior)
+        signalingUrl = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host;
+        console.log('[CLIENT] 🌐 Using fallback WebSocket server:', signalingUrl);
+    }
+    
     ws = new WebSocket(`${signalingUrl}?role=client`);
 
     ws.onopen = () => {

package/public/index.html

@@ -655,7 +655,7 @@
         <!-- Version Footer -->
         <footer style="background: #ff6b35; color: white; text-align: center; padding: 20px 0; font-size: 0.8rem;">
             <div class="container">
-                <p id="version-info">Shell Mirror v1.5.11 • Loading build info...</p>
+                <p id="version-info">Shell Mirror • Loading version...</p>
             </div>
         </footer>
     </main>
@@ -695,9 +695,17 @@
                 const response = await fetch('/build-info.json');
                 const buildInfo = await response.json();
                 const versionElement = document.getElementById('version-info');
+                const footerElement = versionElement?.parentElement?.parentElement; // Get the footer element
+                
                 if (versionElement && buildInfo) {
                     const buildDate = new Date(buildInfo.buildTime).toLocaleDateString();
                     versionElement.textContent = `Shell Mirror v${buildInfo.version} • Built ${buildDate}`;
+                    
+                    // Apply random footer color from build info
+                    if (footerElement && buildInfo.footerColor) {
+                        footerElement.style.background = buildInfo.footerColor;
+                        console.log(`🎨 Applied footer color: ${buildInfo.footerColor}`);
+                    }
                 }
             } catch (error) {
                 console.log('Could not load build info:', error);

package/server.js

@@ -255,10 +255,15 @@ function handleSignalingMessage(ws, rawMessage, senderRole) {
 }
 
 // --- Server Startup ---
-const PORT = process.env.PORT || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
+const PORT = process.env.WS_PORT || process.env.PORT || 8080;
+const HOST = process.env.WS_HOST || process.env.HOST || '0.0.0.0';
+const LOCAL_IP = process.env.WS_LOCAL_IP || process.env.LOCAL_IP || 'localhost';
+
 server.listen(PORT, HOST, () => {
-  logToFile(`✅ Signaling server is running on ${process.env.BASE_URL}`);
+  const baseUrl = process.env.BASE_URL || `http://${LOCAL_IP}:${PORT}`;
+  logToFile(`✅ Local WebSocket server is running on ${baseUrl}`);
+  logToFile(`🌐 WebSocket URL: ws://${LOCAL_IP}:${PORT}`);
+  logToFile(`🔧 Binding to: ${HOST}:${PORT}`);
 });
 
 // Graceful shutdown