feat(onboarding): new-flow diagnostics events

Emit single_page-only diagnostics for the flow's internal drop-off: onboarding
snippet copied (install / wire), AI-connect used, and the in-page flag toggle,
each carrying org / project / environment IDs (no PII). Kept separate from the
control comparison funnel since the control has no equivalent.

Contributes to #7738

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: talissoncosta

frontend/common/constants.ts

@@ -260,6 +260,18 @@ const Constants = {
       'category': 'User',
       'event': `User oauth ${type}`,
     }),
+    'ONBOARDING_AI_CONNECT': {
+      'category': 'Onboarding',
+      'event': 'Onboarding AI connect used',
+    },
+    'ONBOARDING_FLAG_TOGGLED': {
+      'category': 'Onboarding',
+      'event': 'Onboarding flag toggled',
+    },
+    'ONBOARDING_SNIPPET_COPIED': {
+      'category': 'Onboarding',
+      'event': 'Onboarding snippet copied',
+    },
     'REFERRER_CONVERSION': (referrer: string) => ({
       'category': 'Referrer',
       'event': `${referrer} converted`,

frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectWithAiPanel.tsx

@@ -7,6 +7,7 @@ import { useCopyFeedback } from 'components/pages/onboarding/hooks/useCopyFeedba
 export type ConnectWithAiPanelProps = {
   environmentKey: string
   featureName: string
+  onCopyPrompt?: () => void
 }
 
 // "Connect with AI" tab: an agent-agnostic prompt the user pastes into their
@@ -18,6 +19,7 @@ export type ConnectWithAiPanelProps = {
 const ConnectWithAiPanel: FC<ConnectWithAiPanelProps> = ({
   environmentKey,
   featureName,
+  onCopyPrompt,
 }) => {
   const { copied, copy } = useCopyFeedback()
 
@@ -39,7 +41,14 @@ Detect my stack, install the SDK, and wire ${featureName} into one place. Then r
         <code className='onboarding-connect__prompt-text flex-fill'>
           {aiPrompt}
         </code>
-        <Button theme='outline' size='small' onClick={() => copy(aiPrompt)}>
+        <Button
+          theme='outline'
+          size='small'
+          onClick={() => {
+            copy(aiPrompt)
+            onCopyPrompt?.()
+          }}
+        >
           <span
             className='d-inline-flex align-items-center gap-1'
             aria-live='polite'

frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.tsx

@@ -30,6 +30,7 @@ export type OnboardingConnectPanelProps = {
   featureName: string
   onCopyInstall?: () => void
   onCopyWire?: () => void
+  onCopyPrompt?: () => void
 }
 
 // Two ways to connect an app to the pre-created flag: paste an agent-agnostic
@@ -40,6 +41,7 @@ const OnboardingConnectPanel: FC<OnboardingConnectPanelProps> = ({
   environmentKey,
   featureName,
   onCopyInstall,
+  onCopyPrompt,
   onCopyWire,
 }) => {
   const [tab, setTab] = useState<ConnectTab>('manual')
@@ -61,6 +63,7 @@ const OnboardingConnectPanel: FC<OnboardingConnectPanelProps> = ({
         <ConnectWithAiPanel
           environmentKey={environmentKey}
           featureName={featureName}
+          onCopyPrompt={onCopyPrompt}
         />
       </OnboardingTabPanel>
 

frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx

@@ -16,6 +16,8 @@ import { useOnboardingFlag } from 'components/pages/onboarding/hooks/useOnboardi
 import { useOnboardingConnection } from 'components/pages/onboarding/hooks/useOnboardingConnection'
 import { useUpdateOrganisationMutation } from 'common/services/useOrganisation'
 import { useUpdateProjectMutation } from 'common/services/useProject'
+import API from 'project/api'
+import Constants from 'common/constants'
 import './OnboardingFlow.scss'
 
 // The single-page onboarding flow, rendered at /getting-started when
@@ -139,6 +141,37 @@ const OnboardingFlow: FC = () => {
     history.push(`${base}/features?feature=${flagId}&tab=${tab}`)
   }
 
+  const diagnosticIds = {
+    environment_id: environment?.id,
+    organisation_id: organisationId,
+    project_id: projectId,
+  }
+  const trackSnippetCopied = (snippet: 'install' | 'wire') =>
+    API.trackEvent({
+      ...Constants.events.ONBOARDING_SNIPPET_COPIED,
+      extra: { ...diagnosticIds, snippet },
+    })
+  const handleCopyInstall = () => {
+    trackSnippetCopied('install')
+    setInstallCopied(true)
+  }
+  const handleCopyWire = () => {
+    trackSnippetCopied('wire')
+    setSnippetCopied(true)
+  }
+  const handleCopyPrompt = () =>
+    API.trackEvent({
+      ...Constants.events.ONBOARDING_AI_CONNECT,
+      extra: diagnosticIds,
+    })
+  const handleToggleFlag = (enabled: boolean) => {
+    API.trackEvent({
+      ...Constants.events.ONBOARDING_FLAG_TOGGLED,
+      extra: { ...diagnosticIds, enabled },
+    })
+    toggleFlag(enabled)
+  }
+
   if (status === 'creating') {
     return (
       <div className='onboarding-flow mx-auto text-center'>
@@ -177,8 +210,9 @@ const OnboardingFlow: FC = () => {
       <OnboardingConnectPanel
         environmentKey={environmentKey}
         featureName={featureName}
-        onCopyInstall={() => setInstallCopied(true)}
-        onCopyWire={() => setSnippetCopied(true)}
+        onCopyInstall={handleCopyInstall}
+        onCopyWire={handleCopyWire}
+        onCopyPrompt={handleCopyPrompt}
       />
       <OnboardingTerminal
         featureName={featureName}
@@ -196,7 +230,7 @@ const OnboardingFlow: FC = () => {
             tags: flagTags,
           },
         ]}
-        onToggle={(_flag, next) => toggleFlag(next)}
+        onToggle={(_flag, next) => handleToggleFlag(next)}
         togglingFlag={isToggling ? featureName : null}
         togglesReady={flagStateReady}
       />