[rh-test] Telemetry Backports (#6522)

## Summary

Resolves issues with #6503

## Changes

- Backport #6400
- Fix circular dependency issue
- Backport #6505

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6522-rh-test-Telemetry-Backports-29e6d73d365081258d10c08299bde69b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: Christian Byrne <chrbyrne96@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>

src/views/GraphView.vue

@@ -46,7 +46,9 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import { i18n, loadLocale } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
 import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
 import type { StatusWsMessageStatus } from '@/schemas/apiSchema'
@@ -56,6 +58,7 @@ import { setupAutoQueueHandler } from '@/services/autoQueueService'
 import { useKeybindingService } from '@/services/keybindingService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useModelStore } from '@/stores/modelStore'
 import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
@@ -89,6 +92,13 @@ const showBottomMenu = computed(
   () => !isMobile.value && useNewMenu.value === 'Bottom'
 )
 
+const telemetry = useTelemetry()
+const firebaseAuthStore = useFirebaseAuthStore()
+let hasTrackedLogin = false
+let visibilityListener: (() => void) | null = null
+let tabCountInterval: number | null = null
+let tabCountChannel: BroadcastChannel | null = null
+
 watch(
   () => colorPaletteStore.completedActivePalette,
   (newTheme) => {
@@ -244,6 +254,22 @@ onBeforeUnmount(() => {
   api.removeEventListener('reconnecting', onReconnecting)
   api.removeEventListener('reconnected', onReconnected)
   executionStore.unbindExecutionEvents()
+
+  // Clean up page visibility listener
+  if (visibilityListener) {
+    document.removeEventListener('visibilitychange', visibilityListener)
+    visibilityListener = null
+  }
+
+  // Clean up tab count tracking
+  if (tabCountInterval) {
+    window.clearInterval(tabCountInterval)
+    tabCountInterval = null
+  }
+  if (tabCountChannel) {
+    tabCountChannel.close()
+    tabCountChannel = null
+  }
 })
 
 useEventListener(window, 'keydown', useKeybindingService().keybindHandler)
@@ -262,6 +288,61 @@ void nextTick(() => {
 
 const onGraphReady = () => {
   runWhenGlobalIdle(() => {
+    // Track user login when app is ready in graph view (cloud only)
+    if (isCloud && firebaseAuthStore.isAuthenticated && !hasTrackedLogin) {
+      telemetry?.trackUserLoggedIn()
+      hasTrackedLogin = true
+    }
+
+    // Set up page visibility tracking (cloud only)
+    if (isCloud && telemetry && !visibilityListener) {
+      visibilityListener = () => {
+        telemetry.trackPageVisibilityChanged({
+          visibility_state: document.visibilityState as 'visible' | 'hidden'
+        })
+      }
+      document.addEventListener('visibilitychange', visibilityListener)
+    }
+
+    // Set up tab count tracking (cloud only)
+    if (isCloud && telemetry && !tabCountInterval) {
+      tabCountChannel = new BroadcastChannel('comfyui-tab-count')
+      const activeTabs = new Map<string, number>()
+      const currentTabId = crypto.randomUUID()
+
+      // Listen for heartbeats from other tabs
+      tabCountChannel.onmessage = (event) => {
+        if (
+          event.data.type === 'heartbeat' &&
+          event.data.tabId !== currentTabId
+        ) {
+          activeTabs.set(event.data.tabId, Date.now())
+        }
+      }
+
+      // 30-second heartbeat interval
+      tabCountInterval = window.setInterval(() => {
+        const now = Date.now()
+
+        // Clean up stale tabs (no heartbeat for 45 seconds)
+        activeTabs.forEach((lastHeartbeat, tabId) => {
+          if (now - lastHeartbeat > 45000) {
+            activeTabs.delete(tabId)
+          }
+        })
+
+        // Broadcast our heartbeat
+        tabCountChannel?.postMessage({ type: 'heartbeat', tabId: currentTabId })
+
+        // Track tab count (include current tab)
+        const tabCount = activeTabs.size + 1
+        telemetry.trackTabCount({ tab_count: tabCount })
+      }, 30000)
+
+      // Send initial heartbeat
+      tabCountChannel.postMessage({ type: 'heartbeat', tabId: currentTabId })
+    }
+
     // Setting values now available after comfyApp.setup.
     // Load keybindings.
     wrapWithErrorHandling(useKeybindingService().registerUserKeybindings)()