shell-mirror 1.5.48 → 1.5.50

package/package.json

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

@@ -6,12 +6,40 @@
     <title>Shell Mirror Dashboard</title>
     
     <!-- Google Analytics 4 -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LG7ZGLB8FK"></script>
     <script>
+        // Initialize dataLayer and gtag function first
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
         gtag('config', 'G-LG7ZGLB8FK');
+        
+        // Load gtag script with proper error handling
+        (function() {
+            var script = document.createElement('script');
+            script.async = true;
+            script.src = 'https://www.googletagmanager.com/gtag/js?id=G-LG7ZGLB8FK';
+            script.onload = function() {
+                console.log('✅ Google Analytics script loaded successfully');
+                window.gtagLoaded = true;
+            };
+            script.onerror = function() {
+                console.warn('❌ Failed to load Google Analytics script');
+                window.gtagLoaded = false;
+            };
+            document.head.appendChild(script);
+        })();
+        
+        // Google Analytics helper function
+        function sendGAEvent(eventName, eventParams) {
+            if (typeof gtag === 'function') {
+                console.log('📊 [GA] Sending event:', eventName, eventParams);
+                gtag('event', eventName, eventParams);
+                return true;
+            } else {
+                console.warn('❌ [GA] gtag not available, event not sent:', eventName);
+                return false;
+            }
+        }
     </script>
     
     <!-- Microsoft Clarity -->
@@ -20,7 +48,7 @@
             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");
+        })(window, document, "clarity", "script", "sy1w2d7il7");
     </script>
     
     <link rel="stylesheet" href="dashboard.css">

package/public/app/dashboard.js

@@ -13,22 +13,22 @@ class ShellMirrorDashboard {
         this.showLoading();
         this.loadVersionInfo(); // Load version info immediately
         
-        // Debug Google Analytics setup
-        console.log('🔍 [DASHBOARD DEBUG] Checking Google Analytics setup...');
-        console.log('🔍 [DASHBOARD DEBUG] gtag function available:', typeof gtag !== 'undefined');
-        console.log('🔍 [DASHBOARD DEBUG] dataLayer exists:', typeof window.dataLayer !== 'undefined');
-        
-        if (typeof gtag !== 'undefined') {
-            console.log('✅ [DASHBOARD DEBUG] Google Analytics is available');
-            // Send dashboard page view debug event
-            gtag('event', 'page_debug', {
-                event_category: 'debug',
-                event_label: 'dashboard_page_loaded'
-            });
-            console.log('📊 [DASHBOARD DEBUG] Dashboard page debug event sent');
-        } else {
-            console.warn('❌ [DASHBOARD DEBUG] Google Analytics gtag function not available');
-        }
+        // Wait for GA script to load and send page view
+        setTimeout(() => {
+            console.log('🔍 [DASHBOARD DEBUG] Checking Google Analytics setup...');
+            console.log('🔍 [DASHBOARD DEBUG] gtag function type:', typeof gtag);
+            console.log('🔍 [DASHBOARD DEBUG] gtagLoaded flag:', window.gtagLoaded);
+            
+            // Send dashboard page view event
+            if (typeof sendGAEvent === 'function') {
+                sendGAEvent('page_view', {
+                    page_title: 'Shell Mirror Dashboard',
+                    page_location: window.location.href
+                });
+            } else {
+                console.warn('❌ [DASHBOARD DEBUG] sendGAEvent function not available');
+            }
+        }, 1000);
         
         try {
             const authStatus = await this.checkAuthStatus();
@@ -448,18 +448,13 @@ class ShellMirrorDashboard {
             console.log(`[DASHBOARD] ✅ Reconnecting to existing session: ${mostRecentSession.id}`);
             
             // Track terminal connection in Google Analytics
-            console.log('🔍 [DASHBOARD DEBUG] Attempting to track terminal_connect (existing_session)');
-            if (typeof gtag !== 'undefined') {
-                console.log('📊 [DASHBOARD DEBUG] Sending terminal_connect event (existing_session) to Google Analytics');
-                gtag('event', 'terminal_connect', {
+            if (typeof sendGAEvent === 'function') {
+                sendGAEvent('terminal_connect', {
                     event_category: 'terminal',
                     event_label: 'existing_session',
                     agent_id: agentId,
                     session_id: mostRecentSession.id
                 });
-                console.log('✅ [DASHBOARD DEBUG] terminal_connect (existing_session) event sent successfully');
-            } else {
-                console.warn('❌ [DASHBOARD DEBUG] Cannot send terminal_connect event - gtag not available');
             }
             
             window.location.href = `/app/terminal.html?agent=${agentId}&session=${mostRecentSession.id}`;
@@ -468,17 +463,12 @@ class ShellMirrorDashboard {
             console.log(`[DASHBOARD] 🆕 Creating new session for agent: ${agentId}`);
             
             // Track new session creation in Google Analytics
-            console.log('🔍 [DASHBOARD DEBUG] Attempting to track terminal_connect (new_session)');
-            if (typeof gtag !== 'undefined') {
-                console.log('📊 [DASHBOARD DEBUG] Sending terminal_connect event (new_session) to Google Analytics');
-                gtag('event', 'terminal_connect', {
+            if (typeof sendGAEvent === 'function') {
+                sendGAEvent('terminal_connect', {
                     event_category: 'terminal',
                     event_label: 'new_session',
                     agent_id: agentId
                 });
-                console.log('✅ [DASHBOARD DEBUG] terminal_connect (new_session) event sent successfully');
-            } else {
-                console.warn('❌ [DASHBOARD DEBUG] Cannot send terminal_connect event - gtag not available');
             }
             
             window.location.href = `/app/terminal.html?agent=${agentId}`;
@@ -487,8 +477,8 @@ class ShellMirrorDashboard {
 
     async connectToSession(agentId, sessionId) {
         // Track specific session connection in Google Analytics
-        if (typeof gtag !== 'undefined') {
-            gtag('event', 'terminal_connect', {
+        if (typeof sendGAEvent === 'function') {
+            sendGAEvent('terminal_connect', {
                 event_category: 'terminal',
                 event_label: 'specific_session',
                 agent_id: agentId,
@@ -504,8 +494,8 @@ class ShellMirrorDashboard {
         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', {
+        if (typeof sendGAEvent === 'function') {
+            sendGAEvent('terminal_connect', {
                 event_category: 'terminal',
                 event_label: 'force_new_session',
                 agent_id: agentId

package/public/app/terminal.html

@@ -4,12 +4,40 @@
     <title>Terminal Mirror</title>
     
     <!-- Google Analytics 4 -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LG7ZGLB8FK"></script>
     <script>
+        // Initialize dataLayer and gtag function first
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
         gtag('config', 'G-LG7ZGLB8FK');
+        
+        // Load gtag script with proper error handling
+        (function() {
+            var script = document.createElement('script');
+            script.async = true;
+            script.src = 'https://www.googletagmanager.com/gtag/js?id=G-LG7ZGLB8FK';
+            script.onload = function() {
+                console.log('✅ Google Analytics script loaded successfully');
+                window.gtagLoaded = true;
+            };
+            script.onerror = function() {
+                console.warn('❌ Failed to load Google Analytics script');
+                window.gtagLoaded = false;
+            };
+            document.head.appendChild(script);
+        })();
+        
+        // Google Analytics helper function
+        function sendGAEvent(eventName, eventParams) {
+            if (typeof gtag === 'function') {
+                console.log('📊 [GA] Sending event:', eventName, eventParams);
+                gtag('event', eventName, eventParams);
+                return true;
+            } else {
+                console.warn('❌ [GA] gtag not available, event not sent:', eventName);
+                return false;
+            }
+        }
     </script>
     
     <!-- Microsoft Clarity -->
@@ -18,7 +46,7 @@
             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");
+        })(window, document, "clarity", "script", "sy1w2d7il7");
     </script>
     
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.15.0/css/xterm.css" />

package/public/app/terminal.js

@@ -180,22 +180,20 @@ setInterval(() => {
 window.addEventListener('load', () => {
     loadVersionInfo();
     
-    // Debug Google Analytics setup
-    console.log('🔍 [TERMINAL DEBUG] Checking Google Analytics setup...');
-    console.log('🔍 [TERMINAL DEBUG] gtag function available:', typeof gtag !== 'undefined');
-    console.log('🔍 [TERMINAL DEBUG] dataLayer exists:', typeof window.dataLayer !== 'undefined');
-    
-    if (typeof gtag !== 'undefined') {
-        console.log('✅ [TERMINAL DEBUG] Google Analytics is available');
-        // Send terminal page view debug event
-        gtag('event', 'page_debug', {
-            event_category: 'debug',
-            event_label: 'terminal_page_loaded'
-        });
-        console.log('📊 [TERMINAL DEBUG] Terminal page debug event sent');
-    } else {
-        console.warn('❌ [TERMINAL DEBUG] Google Analytics gtag function not available');
-    }
+    // Wait for GA script to load and send page view
+    setTimeout(() => {
+        console.log('🔍 [TERMINAL DEBUG] Checking Google Analytics setup...');
+        console.log('🔍 [TERMINAL DEBUG] gtag function type:', typeof gtag);
+        console.log('🔍 [TERMINAL DEBUG] gtagLoaded flag:', window.gtagLoaded);
+        
+        // Send terminal page view event
+        if (typeof sendGAEvent === 'function') {
+            sendGAEvent('page_view', {
+                page_title: 'Shell Mirror Terminal',
+                page_location: window.location.href
+            });
+        }
+    }, 1000);
     
     // Get agent ID and session ID from URL parameters
     const urlParams = new URLSearchParams(window.location.search);
@@ -252,18 +250,13 @@ function startConnection() {
     term.open(document.getElementById('terminal'));
     
     // Track terminal session start in Google Analytics
-    console.log('🔍 [TERMINAL DEBUG] Attempting to track terminal_session_start');
-    if (typeof gtag !== 'undefined') {
-        console.log('📊 [TERMINAL DEBUG] Sending terminal_session_start event to Google Analytics');
-        gtag('event', 'terminal_session_start', {
+    if (typeof sendGAEvent === 'function') {
+        sendGAEvent('terminal_session_start', {
             event_category: 'terminal',
             event_label: requestedSessionId ? 'existing_session' : 'new_session',
             agent_id: AGENT_ID,
             session_id: requestedSessionId || 'new'
         });
-        console.log('✅ [TERMINAL DEBUG] terminal_session_start event sent successfully');
-    } else {
-        console.warn('❌ [TERMINAL DEBUG] Cannot send terminal_session_start event - gtag not available');
     }
     
     // Delay fit to ensure proper dimensions after CSS transitions
@@ -555,17 +548,12 @@ async function createPeerConnection() {
                 updateConnectionStatus('connected');
                 
                 // Track successful connection in Google Analytics
-                console.log('🔍 [TERMINAL DEBUG] Attempting to track terminal_connection_success');
-                if (typeof gtag !== 'undefined') {
-                    console.log('📊 [TERMINAL DEBUG] Sending terminal_connection_success event to Google Analytics');
-                    gtag('event', 'terminal_connection_success', {
+                if (typeof sendGAEvent === 'function') {
+                    sendGAEvent('terminal_connection_success', {
                         event_category: 'terminal',
                         event_label: 'webrtc_established',
                         agent_id: AGENT_ID
                     });
-                    console.log('✅ [TERMINAL DEBUG] terminal_connection_success event sent successfully');
-                } else {
-                    console.warn('❌ [TERMINAL DEBUG] Cannot send terminal_connection_success event - gtag not available');
                 }
                 
                 break;

package/public/index.html

@@ -19,12 +19,28 @@
     <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>
+        // Initialize dataLayer and gtag function first
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
         gtag('config', 'G-LG7ZGLB8FK');
+        
+        // Load gtag script with proper error handling
+        (function() {
+            var script = document.createElement('script');
+            script.async = true;
+            script.src = 'https://www.googletagmanager.com/gtag/js?id=G-LG7ZGLB8FK';
+            script.onload = function() {
+                console.log('✅ Google Analytics script loaded successfully');
+                window.gtagLoaded = true;
+            };
+            script.onerror = function() {
+                console.warn('❌ Failed to load Google Analytics script');
+                window.gtagLoaded = false;
+            };
+            document.head.appendChild(script);
+        })();
     </script>
     
     <!-- Microsoft Clarity -->
@@ -33,7 +49,7 @@
             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");
+        })(window, document, "clarity", "script", "sy1w2d7il7");
     </script>
     
     <style>
@@ -700,16 +716,10 @@
             console.log('🔍 [DEBUG] Login button clicked');
             
             // Track login attempt in Google Analytics
-            if (typeof gtag !== 'undefined') {
-                console.log('📊 [DEBUG] Sending login_attempt event to Google Analytics');
-                gtag('event', 'login_attempt', {
-                    event_category: 'authentication',
-                    event_label: 'google_oauth'
-                });
-                console.log('✅ [DEBUG] login_attempt event sent successfully');
-            } else {
-                console.warn('❌ [DEBUG] Cannot send login_attempt event - gtag not available');
-            }
+            sendGAEvent('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');
@@ -720,16 +730,10 @@
             console.log('🔍 [DEBUG] Dashboard button clicked');
             
             // Track dashboard access in Google Analytics
-            if (typeof gtag !== 'undefined') {
-                console.log('📊 [DEBUG] Sending dashboard_access event to Google Analytics');
-                gtag('event', 'dashboard_access', {
-                    event_category: 'navigation',
-                    event_label: 'from_landing_page'
-                });
-                console.log('✅ [DEBUG] dashboard_access event sent successfully');
-            } else {
-                console.warn('❌ [DEBUG] Cannot send dashboard_access event - gtag not available');
-            }
+            sendGAEvent('dashboard_access', {
+                event_category: 'navigation',
+                event_label: 'from_landing_page'
+            });
             
             window.location.href = '/app/dashboard.html';
         }
@@ -757,26 +761,33 @@
             }
         }
 
+        // Google Analytics helper function
+        function sendGAEvent(eventName, eventParams) {
+            if (typeof gtag === 'function') {
+                console.log('📊 [GA] Sending event:', eventName, eventParams);
+                gtag('event', eventName, eventParams);
+                return true;
+            } else {
+                console.warn('❌ [GA] gtag not available, event not sent:', eventName);
+                return false;
+            }
+        }
+
         // Initialize page on load
         document.addEventListener('DOMContentLoaded', async () => {
-            // Debug Google Analytics setup
-            console.log('🔍 [DEBUG] Checking Google Analytics setup...');
-            console.log('🔍 [DEBUG] gtag function available:', typeof gtag !== 'undefined');
-            console.log('🔍 [DEBUG] dataLayer exists:', typeof window.dataLayer !== 'undefined');
-            console.log('🔍 [DEBUG] dataLayer contents:', window.dataLayer);
-            
-            // Test if gtag is working
-            if (typeof gtag !== 'undefined') {
-                console.log('✅ [DEBUG] Google Analytics gtag function is available');
-                // Send a test event
-                gtag('event', 'page_debug', {
-                    event_category: 'debug',
-                    event_label: 'landing_page_loaded'
+            // Wait a moment for GA script to load
+            setTimeout(() => {
+                console.log('🔍 [DEBUG] Checking Google Analytics setup...');
+                console.log('🔍 [DEBUG] gtag function type:', typeof gtag);
+                console.log('🔍 [DEBUG] dataLayer exists:', typeof window.dataLayer !== 'undefined');
+                console.log('🔍 [DEBUG] gtagLoaded flag:', window.gtagLoaded);
+                
+                // Send test event
+                sendGAEvent('page_view', {
+                    page_title: 'Shell Mirror Landing',
+                    page_location: window.location.href
                 });
-                console.log('📊 [DEBUG] Test event sent: page_debug');
-            } else {
-                console.warn('❌ [DEBUG] Google Analytics gtag function not available');
-            }
+            }, 1000);
             
             await updateHeaderAndCTA();
             loadVersionInfo();