Track add_api_credit_button_clicked from SubscriptionPanel (#6470)

- Adds telemetry event `app:add_api_credit_button_clicked` and provider
method `trackAddApiCreditButtonClicked`
- Wires tracking to SubscriptionPanel “Add API credits” button
- Removes the same tracking from CurrentUserPopover’s “Top Up” button
(requested)

Verified with `pnpm lint:fix` and `pnpm typecheck`.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6470-Track-add_api_credit_button_clicked-from-SubscriptionPanel-29c6d73d3650812d9ac4f3bc4b42d40a)
by [Unito](https://www.unito.io)

Author: benceruleanlu

src/platform/cloud/subscription/components/SubscriptionPanel.vue

@@ -206,6 +206,7 @@ import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthAction
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useTelemetry } from '@/platform/telemetry'
 import type { AuditLog } from '@/services/customerEventsService'
 import { useCustomerEventsService } from '@/services/customerEventsService'
 import { useDialogService } from '@/services/dialogService'
@@ -218,6 +219,7 @@ const authActions = useFirebaseAuthActions()
 const commandStore = useCommandStore()
 const authStore = useFirebaseAuthStore()
 const customerEventService = useCustomerEventsService()
+const telemetry = useTelemetry()
 
 const {
   isActiveSubscription,
@@ -260,6 +262,7 @@ onMounted(() => {
 })
 
 const handleAddApiCredits = () => {
+  telemetry?.trackAddApiCreditButtonClicked()
   dialogService.showTopUpCreditsDialog()
 }
 

src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts

@@ -149,6 +149,10 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     this.trackEvent(eventName)
   }
 
+  trackAddApiCreditButtonClicked(): void {
+    this.trackEvent(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
+  }
+
   trackMonthlySubscriptionSucceeded(): void {
     this.trackEvent(TelemetryEvents.MONTHLY_SUBSCRIPTION_SUCCEEDED)
   }
@@ -170,7 +174,10 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
       subscribe_to_run: options?.subscribe_to_run || false,
       workflow_type: executionContext.is_template ? 'template' : 'custom',
       workflow_name: executionContext.workflow_name ?? 'untitled',
-      total_node_count: executionContext.total_node_count
+      total_node_count: executionContext.total_node_count,
+      subgraph_count: executionContext.subgraph_count,
+      has_api_nodes: executionContext.has_api_nodes,
+      api_node_names: executionContext.api_node_names
     }
 
     this.trackEvent(TelemetryEvents.RUN_BUTTON_CLICKED, runButtonProperties)
@@ -272,27 +279,49 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     const activeWorkflow = workflowStore.activeWorkflow
 
     // Calculate node metrics in a single traversal
-    const nodeMetrics = reduceAllNodes(
+    type NodeMetrics = {
+      custom_node_count: number
+      api_node_count: number
+      subgraph_count: number
+      total_node_count: number
+      has_api_nodes: boolean
+      api_node_names: string[]
+    }
+
+    const nodeCounts = reduceAllNodes<NodeMetrics>(
       app.graph,
-      (acc, node) => {
+      (metrics, node) => {
         const nodeDef = nodeDefStore.nodeDefsByName[node.type]
         const isCustomNode =
           nodeDef?.nodeSource?.type === NodeSourceType.CustomNodes
         const isApiNode = nodeDef?.api_node === true
         const isSubgraph = node.isSubgraphNode?.() === true
 
-        return {
-          custom_node_count: acc.custom_node_count + (isCustomNode ? 1 : 0),
-          api_node_count: acc.api_node_count + (isApiNode ? 1 : 0),
-          subgraph_count: acc.subgraph_count + (isSubgraph ? 1 : 0),
-          total_node_count: acc.total_node_count + 1
+        if (isApiNode) {
+          metrics.has_api_nodes = true
+          const canonicalName = nodeDef?.name
+          if (
+            canonicalName &&
+            !metrics.api_node_names.includes(canonicalName)
+          ) {
+            metrics.api_node_names.push(canonicalName)
+          }
         }
+
+        metrics.custom_node_count += isCustomNode ? 1 : 0
+        metrics.api_node_count += isApiNode ? 1 : 0
+        metrics.subgraph_count += isSubgraph ? 1 : 0
+        metrics.total_node_count += 1
+
+        return metrics
       },
       {
         custom_node_count: 0,
         api_node_count: 0,
         subgraph_count: 0,
-        total_node_count: 0
+        total_node_count: 0,
+        has_api_nodes: false,
+        api_node_names: []
       }
     )
 
@@ -319,21 +348,21 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
           template_models: englishMetadata?.models ?? template?.models,
           template_use_case: englishMetadata?.useCase ?? template?.useCase,
           template_license: englishMetadata?.license ?? template?.license,
-          ...nodeMetrics
+          ...nodeCounts
         }
       }
 
       return {
         is_template: false,
         workflow_name: activeWorkflow.filename,
-        ...nodeMetrics
+        ...nodeCounts
       }
     }
 
     return {
       is_template: false,
       workflow_name: undefined,
-      ...nodeMetrics
+      ...nodeCounts
     }
   }
 }

src/platform/telemetry/types.ts

@@ -43,6 +43,9 @@ export interface RunButtonProperties {
   workflow_type: 'template' | 'custom'
   workflow_name: string
   total_node_count: number
+  subgraph_count: number
+  has_api_nodes: boolean
+  api_node_names: string[]
 }
 
 /**
@@ -63,6 +66,8 @@ export interface ExecutionContext {
   api_node_count: number
   subgraph_count: number
   total_node_count: number
+  has_api_nodes: boolean
+  api_node_names: string[]
 }
 
 /**
@@ -175,6 +180,7 @@ export interface TelemetryProvider {
   // Subscription flow events
   trackSubscription(event: 'modal_opened' | 'subscribe_clicked'): void
   trackMonthlySubscriptionSucceeded(): void
+  trackAddApiCreditButtonClicked(): void
   trackApiCreditTopupButtonPurchaseClicked(amount: number): void
   trackRunButton(options?: { subscribe_to_run?: boolean }): void
 
@@ -227,6 +233,7 @@ export const TelemetryEvents = {
   SUBSCRIPTION_REQUIRED_MODAL_OPENED: 'app:subscription_required_modal_opened',
   SUBSCRIBE_NOW_BUTTON_CLICKED: 'app:subscribe_now_button_clicked',
   MONTHLY_SUBSCRIPTION_SUCCEEDED: 'app:monthly_subscription_succeeded',
+  ADD_API_CREDIT_BUTTON_CLICKED: 'app:add_api_credit_button_clicked',
   API_CREDIT_TOPUP_BUTTON_PURCHASE_CLICKED:
     'app:api_credit_topup_button_purchase_clicked',