shell-mirror 1.5.45 → 1.5.47

package/mac-agent/agent.js

@@ -55,17 +55,79 @@ logToFile(`🐚 Shell: ${shell}`);
 
 // Circular buffer for session output persistence
 class CircularBuffer {
-  constructor(size = 10000) {
+  constructor(size = 10000, maxTotalSize = 512 * 1024) { // 512KB max total size
     this.size = size;
+    this.maxTotalSize = maxTotalSize;
     this.buffer = [];
     this.index = 0;
     this.full = false;
+    this.totalSize = 0;
   }
 
   add(data) {
+    const dataSize = Buffer.byteLength(data, 'utf8');
+    
+    // Add new data
+    const oldData = this.buffer[this.index];
+    if (oldData) {
+      this.totalSize -= Buffer.byteLength(oldData, 'utf8');
+    }
+    
     this.buffer[this.index] = data;
+    this.totalSize += dataSize;
     this.index = (this.index + 1) % this.size;
     if (this.index === 0) this.full = true;
+    
+    // If total size exceeds limit, remove older data
+    this.enforceMaxSize();
+  }
+  
+  enforceMaxSize() {
+    if (this.totalSize <= this.maxTotalSize) return;
+    
+    // Remove data from the oldest end until under limit
+    let removed = 0;
+    while (this.totalSize > this.maxTotalSize && this.getTotalItems() > 0) {
+      let oldestIndex;
+      if (this.full) {
+        oldestIndex = this.index; // Oldest item when buffer is full
+      } else {
+        oldestIndex = 0; // Start from beginning when not full
+      }
+      
+      const oldestData = this.buffer[oldestIndex];
+      if (oldestData) {
+        this.totalSize -= Buffer.byteLength(oldestData, 'utf8');
+        this.buffer[oldestIndex] = '';
+        removed++;
+        
+        if (this.full) {
+          this.index = (this.index + 1) % this.size;
+          if (this.getTotalItems() === 0) {
+            this.full = false;
+            this.index = 0;
+          }
+        } else {
+          // Shift array to remove empty spot
+          this.buffer.splice(oldestIndex, 1);
+          this.buffer.push('');
+          this.index = Math.max(0, this.index - 1);
+        }
+      } else {
+        break; // Prevent infinite loop
+      }
+    }
+    
+    if (removed > 0) {
+      logToFile(`[BUFFER] Enforced max size limit: removed ${removed} old entries, total size now ${this.totalSize} bytes`);
+    }
+  }
+  
+  getTotalItems() {
+    if (!this.full) {
+      return this.buffer.slice(0, this.index).filter(item => item).length;
+    }
+    return this.buffer.filter(item => item).length;
   }
 
   getAll() {
@@ -79,6 +141,16 @@ class CircularBuffer {
     this.buffer = [];
     this.index = 0;
     this.full = false;
+    this.totalSize = 0;
+  }
+  
+  getStats() {
+    return {
+      items: this.getTotalItems(),
+      totalSize: this.totalSize,
+      maxSize: this.maxTotalSize,
+      utilizationPercent: Math.round((this.totalSize / this.maxTotalSize) * 100)
+    };
   }
 }
 
@@ -261,10 +333,9 @@ class SessionManager {
     // For now, we'll use a global dataChannel reference
     // In a full implementation, this would use a clientId-to-dataChannel mapping
     if (typeof dataChannel !== 'undefined' && dataChannel && dataChannel.readyState === 'open') {
-      try {
-        dataChannel.send(JSON.stringify(message));
-      } catch (err) {
-        logToFile(`[SESSION] Error sending to client ${clientId}: ${err.message}`);
+      const success = sendLargeMessage(dataChannel, message, '[SESSION]');
+      if (!success) {
+        logToFile(`[SESSION] ❌ Failed to send message to client ${clientId}`);
       }
     } else {
       logToFile(`[SESSION] ⚠️ Cannot send to client ${clientId} - data channel not available`);
@@ -423,6 +494,11 @@ function connectToSignalingServer() {
             // Force ICE gathering if it hasn't started within 2 seconds
             logToFile('[AGENT] 🔧 Setting up ICE gathering fallback timer...');
             setTimeout(() => {
+              if (!peerConnection) {
+                logToFile('[AGENT] ⚠️ ICE gathering timer fired but peerConnection is null (connection already closed)');
+                return;
+              }
+              
               if (peerConnection.iceGatheringState === 'new') {
                 logToFile('[AGENT] ⚠️ ICE gathering hasn\'t started - checking peer connection state');
                 logToFile(`[AGENT] Current ICE gathering state: ${peerConnection.iceGatheringState}`);
@@ -628,6 +704,80 @@ function cleanup(clientId = null) {
   }
 }
 
+// WebRTC data channel message size limits and chunking
+const MAX_WEBRTC_MESSAGE_SIZE = 32 * 1024; // 32KB - conservative limit for compatibility
+const CHUNK_TYPE_START = 'chunk_start';
+const CHUNK_TYPE_DATA = 'chunk_data';  
+const CHUNK_TYPE_END = 'chunk_end';
+
+function sendLargeMessage(dataChannel, message, logPrefix = '[AGENT]') {
+  try {
+    const messageStr = JSON.stringify(message);
+    const messageBytes = Buffer.byteLength(messageStr, 'utf8');
+    
+    if (messageBytes <= MAX_WEBRTC_MESSAGE_SIZE) {
+      // Small message, send directly
+      dataChannel.send(messageStr);
+      logToFile(`${logPrefix} ✅ Sent small message (${messageBytes} bytes)`);
+      return true;
+    }
+    
+    // Large message, chunk it
+    logToFile(`${logPrefix} 📦 Chunking large message (${messageBytes} bytes) into ${MAX_WEBRTC_MESSAGE_SIZE} byte chunks`);
+    
+    const chunkId = Date.now().toString() + Math.random().toString(36).substr(2, 9);
+    const chunks = [];
+    
+    // Split message string into chunks
+    for (let i = 0; i < messageStr.length; i += MAX_WEBRTC_MESSAGE_SIZE - 200) { // Reserve 200 bytes for chunk metadata
+      chunks.push(messageStr.slice(i, i + MAX_WEBRTC_MESSAGE_SIZE - 200));
+    }
+    
+    logToFile(`${logPrefix} 📦 Split into ${chunks.length} chunks`);
+    
+    // Send chunk start notification
+    dataChannel.send(JSON.stringify({
+      type: CHUNK_TYPE_START,
+      chunkId: chunkId,
+      totalChunks: chunks.length,
+      totalSize: messageBytes,
+      originalType: message.type
+    }));
+    
+    // Send each chunk with a small delay to prevent overwhelming
+    chunks.forEach((chunk, index) => {
+      setTimeout(() => {
+        try {
+          dataChannel.send(JSON.stringify({
+            type: CHUNK_TYPE_DATA,
+            chunkId: chunkId,
+            chunkIndex: index,
+            data: chunk
+          }));
+          
+          // Send end notification after last chunk
+          if (index === chunks.length - 1) {
+            setTimeout(() => {
+              dataChannel.send(JSON.stringify({
+                type: CHUNK_TYPE_END,
+                chunkId: chunkId
+              }));
+              logToFile(`${logPrefix} ✅ Large message sent successfully (${chunks.length} chunks)`);
+            }, 10);
+          }
+        } catch (err) {
+          logToFile(`${logPrefix} ❌ Error sending chunk ${index}: ${err.message}`);
+        }
+      }, index * 10); // 10ms delay between chunks
+    });
+    
+    return true;
+  } catch (err) {
+    logToFile(`${logPrefix} ❌ Error in sendLargeMessage: ${err.message}`);
+    return false;
+  }
+}
+
 function setupDataChannel(clientId) {
   dataChannel.onopen = () => {
     logToFile('[AGENT] ✅ Data channel is open!');
@@ -638,11 +788,9 @@ function setupDataChannel(clientId) {
       const bufferedOutput = session.buffer.getAll();
       if (bufferedOutput) {
         logToFile(`[AGENT] 📤 Sending buffered output to client (${bufferedOutput.length} chars)`);
-        try {
-          dataChannel.send(JSON.stringify({ type: 'output', data: bufferedOutput }));
-          logToFile('[AGENT] ✅ Buffered output sent successfully');
-        } catch (err) {
-          logToFile(`[AGENT] ❌ Error sending buffered output: ${err.message}`);
+        const success = sendLargeMessage(dataChannel, { type: 'output', data: bufferedOutput }, '[AGENT]');
+        if (!success) {
+          logToFile('[AGENT] ❌ Failed to send buffered output');
         }
       } else {
         logToFile('[AGENT] ℹ️ No buffered output to send for this session');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shell-mirror",
-  "version": "1.5.45",
+  "version": "1.5.47",
   "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.html

@@ -4,6 +4,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shell Mirror Dashboard</title>
+    
+    <!-- Google Analytics 4 -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LG7ZGLB8FK"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-LG7ZGLB8FK');
+    </script>
+    
+    <!-- Microsoft Clarity -->
+    <script type="text/javascript">
+        (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", "CLARITY_PROJECT_ID");
+    </script>
+    
     <link rel="stylesheet" href="dashboard.css">
 </head>
 <body>

package/public/app/dashboard.js

@@ -429,21 +429,62 @@ class ShellMirrorDashboard {
                 session.lastActivity > latest.lastActivity ? session : latest
             );
             console.log(`[DASHBOARD] ✅ Reconnecting to existing session: ${mostRecentSession.id}`);
+            
+            // Track terminal connection in Google Analytics
+            if (typeof gtag !== 'undefined') {
+                gtag('event', 'terminal_connect', {
+                    event_category: 'terminal',
+                    event_label: 'existing_session',
+                    agent_id: agentId,
+                    session_id: mostRecentSession.id
+                });
+            }
+            
             window.location.href = `/app/terminal.html?agent=${agentId}&session=${mostRecentSession.id}`;
         } else {
             // No existing sessions, create new one
             console.log(`[DASHBOARD] 🆕 Creating new session for agent: ${agentId}`);
+            
+            // Track new session creation in Google Analytics
+            if (typeof gtag !== 'undefined') {
+                gtag('event', 'terminal_connect', {
+                    event_category: 'terminal',
+                    event_label: 'new_session',
+                    agent_id: agentId
+                });
+            }
+            
             window.location.href = `/app/terminal.html?agent=${agentId}`;
         }
     }
 
     async connectToSession(agentId, sessionId) {
+        // Track specific session connection in Google Analytics
+        if (typeof gtag !== 'undefined') {
+            gtag('event', 'terminal_connect', {
+                event_category: 'terminal',
+                event_label: 'specific_session',
+                agent_id: agentId,
+                session_id: sessionId
+            });
+        }
+        
         window.location.href = `/app/terminal.html?agent=${agentId}&session=${sessionId}`;
     }
 
     async createNewSession(agentId) {
         // Force creation of new session by not passing session parameter
         console.log(`[DASHBOARD] Creating new session for agent: ${agentId}`);
+        
+        // Track explicit new session creation in Google Analytics
+        if (typeof gtag !== 'undefined') {
+            gtag('event', 'terminal_connect', {
+                event_category: 'terminal',
+                event_label: 'force_new_session',
+                agent_id: agentId
+            });
+        }
+        
         window.location.href = `/app/terminal.html?agent=${agentId}`;
     }
 

package/public/app/terminal.html

@@ -2,6 +2,25 @@
 <html>
   <head>
     <title>Terminal Mirror</title>
+    
+    <!-- Google Analytics 4 -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LG7ZGLB8FK"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-LG7ZGLB8FK');
+    </script>
+    
+    <!-- Microsoft Clarity -->
+    <script type="text/javascript">
+        (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", "CLARITY_PROJECT_ID");
+    </script>
+    
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.15.0/css/xterm.css" />
     <script src="https://cdn.jsdelivr.net/npm/xterm@4.15.0/lib/xterm.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.js"></script>
@@ -222,6 +241,6 @@
         </div>
     </footer>
     
-    <script src="/app/terminal.js?v=debug-20250819-v2"></script>
+    <script src="/app/terminal.js?v=chunked-20250820"></script>
   </body>
 </html>

package/public/app/terminal.js

@@ -55,6 +55,102 @@ let currentSession = null;
 let availableSessions = [];
 let requestedSessionId = null; // For connecting to specific session from URL
 
+// Chunk reassembly for large messages
+const chunkAssembler = {
+    activeChunks: new Map(),
+    
+    handleChunkedMessage(message) {
+        const { type, chunkId } = message;
+        
+        switch (type) {
+            case 'chunk_start':
+                console.log(`[CLIENT] 📦 Starting chunk reassembly: ${chunkId} (${message.totalChunks} chunks, ${message.totalSize} bytes)`);
+                this.activeChunks.set(chunkId, {
+                    originalType: message.originalType,
+                    totalChunks: message.totalChunks,
+                    totalSize: message.totalSize,
+                    receivedChunks: new Map(),
+                    startTime: Date.now()
+                });
+                return true;
+                
+            case 'chunk_data':
+                const chunkInfo = this.activeChunks.get(chunkId);
+                if (!chunkInfo) {
+                    console.error(`[CLIENT] ❌ Received chunk data for unknown chunk ID: ${chunkId}`);
+                    return true;
+                }
+                
+                chunkInfo.receivedChunks.set(message.chunkIndex, message.data);
+                console.log(`[CLIENT] 📦 Received chunk ${message.chunkIndex + 1}/${chunkInfo.totalChunks}`);
+                return true;
+                
+            case 'chunk_end':
+                return this.reassembleChunks(chunkId);
+                
+            default:
+                return false; // Not a chunk message
+        }
+    },
+    
+    reassembleChunks(chunkId) {
+        const chunkInfo = this.activeChunks.get(chunkId);
+        if (!chunkInfo) {
+            console.error(`[CLIENT] ❌ Cannot reassemble unknown chunk: ${chunkId}`);
+            return true;
+        }
+        
+        try {
+            // Check if we have all chunks
+            if (chunkInfo.receivedChunks.size !== chunkInfo.totalChunks) {
+                console.error(`[CLIENT] ❌ Missing chunks: expected ${chunkInfo.totalChunks}, got ${chunkInfo.receivedChunks.size}`);
+                return true;
+            }
+            
+            // Reassemble chunks in order
+            let reassembledData = '';
+            for (let i = 0; i < chunkInfo.totalChunks; i++) {
+                if (!chunkInfo.receivedChunks.has(i)) {
+                    console.error(`[CLIENT] ❌ Missing chunk ${i}`);
+                    return true;
+                }
+                reassembledData += chunkInfo.receivedChunks.get(i);
+            }
+            
+            const elapsed = Date.now() - chunkInfo.startTime;
+            console.log(`[CLIENT] ✅ Reassembled ${chunkInfo.totalChunks} chunks in ${elapsed}ms (${reassembledData.length} chars)`);
+            
+            // Parse and process the reassembled message
+            const originalMessage = JSON.parse(reassembledData);
+            this.activeChunks.delete(chunkId);
+            
+            // Process the original message
+            if (originalMessage.type === 'output') {
+                term.write(originalMessage.data);
+            } else {
+                handleSessionMessage(originalMessage);
+            }
+            
+            return true;
+        } catch (err) {
+            console.error(`[CLIENT] ❌ Error reassembling chunks for ${chunkId}:`, err);
+            this.activeChunks.delete(chunkId);
+            return true;
+        }
+    },
+    
+    cleanup() {
+        // Clean up old incomplete chunks (older than 30 seconds)
+        const now = Date.now();
+        for (const [chunkId, chunkInfo] of this.activeChunks.entries()) {
+            if (now - chunkInfo.startTime > 30000) {
+                console.log(`[CLIENT] 🧹 Cleaning up stale chunk: ${chunkId}`);
+                this.activeChunks.delete(chunkId);
+            }
+        }
+    }
+};
+
 // Connection status management
 function updateConnectionStatus(status) {
     const statusElement = document.getElementById('connection-status');
@@ -75,6 +171,11 @@ function updateConnectionStatus(status) {
     }
 }
 
+// Cleanup timer for chunk assembler
+setInterval(() => {
+    chunkAssembler.cleanup();
+}, 30000); // Clean up every 30 seconds
+
 // Check for agent parameter and connect directly
 window.addEventListener('load', () => {
     loadVersionInfo();
@@ -132,6 +233,17 @@ function startConnection() {
     connectContainer.style.display = 'none';
     terminalContainer.classList.add('show');
     term.open(document.getElementById('terminal'));
+    
+    // Track terminal session start in Google Analytics
+    if (typeof gtag !== 'undefined') {
+        gtag('event', 'terminal_session_start', {
+            event_category: 'terminal',
+            event_label: requestedSessionId ? 'existing_session' : 'new_session',
+            agent_id: AGENT_ID,
+            session_id: requestedSessionId || 'new'
+        });
+    }
+    
     // Delay fit to ensure proper dimensions after CSS transitions
     setTimeout(() => {
         fitAddon.fit();
@@ -419,6 +531,16 @@ async function createPeerConnection() {
             case 'connected':
                 console.log('[CLIENT] ✅ WebRTC connection established!');
                 updateConnectionStatus('connected');
+                
+                // Track successful connection in Google Analytics
+                if (typeof gtag !== 'undefined') {
+                    gtag('event', 'terminal_connection_success', {
+                        event_category: 'terminal',
+                        event_label: 'webrtc_established',
+                        agent_id: AGENT_ID
+                    });
+                }
+                
                 break;
             case 'completed':
                 console.log('[CLIENT] ✅ ICE connection completed successfully!');
@@ -508,6 +630,14 @@ function setupDataChannel() {
     dataChannel.onmessage = (event) => {
         try {
             const message = JSON.parse(event.data);
+            
+            // Check if this is a chunked message
+            if (chunkAssembler.handleChunkedMessage(message)) {
+                // Message was handled by chunk assembler
+                return;
+            }
+            
+            // Handle normal messages
             if (message.type === 'output') {
                 term.write(message.data);
             } else {

package/public/index.html

@@ -18,6 +18,24 @@
     <meta property="twitter:title" content="Shell Mirror - Use Claude Code CLI from your phone">
     <meta property="twitter:description" content="Access your Mac terminal from your phone to use Claude Code CLI, Gemini CLI, and other command-line tools.">
     
+    <!-- Google Analytics 4 -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LG7ZGLB8FK"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-LG7ZGLB8FK');
+    </script>
+    
+    <!-- Microsoft Clarity -->
+    <script type="text/javascript">
+        (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", "CLARITY_PROJECT_ID");
+    </script>
+    
     <style>
         * {
             margin: 0;
@@ -679,12 +697,28 @@
 
         // Handle Google login - direct web OAuth
         async function handleGoogleLogin() {
+            // Track login attempt in Google Analytics
+            if (typeof gtag !== 'undefined') {
+                gtag('event', 'login_attempt', {
+                    event_category: 'authentication',
+                    event_label: 'google_oauth'
+                });
+            }
+            
             // Direct OAuth flow using the web backend
             window.location.href = '/php-backend/api/auth-login.php?return=' + encodeURIComponent('/app/dashboard');
         }
 
         // Handle dashboard navigation
         async function openDashboard() {
+            // Track dashboard access in Google Analytics
+            if (typeof gtag !== 'undefined') {
+                gtag('event', 'dashboard_access', {
+                    event_category: 'navigation',
+                    event_label: 'from_landing_page'
+                });
+            }
+            
             window.location.href = '/app/dashboard.html';
         }