feat: Add event tracking for table quickstart experiment (supabase#39854)

* Add event tracking for table quickstart experiment

Implements telemetry instrumentation for the table quickstart experiment
to measure exposure and engagement across AI, Templates, and Assistant variations.

Events added:
- table_quickstart_viewed: Exposure tracking for variant assignment
- table_quickstart_ai_prompt_submitted: AI prompt submissions
- table_quickstart_ai_generation_completed: AI generation success/failure
- table_quickstart_template_selected: Template selection (unified for AI and templates)
- table_quickstart_quick_idea_clicked: Quick idea button clicks
- table_quickstart_category_selected: Template category navigation
- table_quickstart_assistant_opened: Assistant chat creation

All events use type-safe useTrack() hook with automatic project/org context.
Conversion tracking intentionally omitted - relying on joins with existing
table_created events for post-analysis.

* event name cleanup

* Address code review feedback

- Use nullish coalescing operator (??) instead of logical OR (||) for categoryName fallback
- Refactor handleGenerateTables to accept object parameter for improved call site readability

* prettier

* action key name alignment with event name

Author: seanoliver

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/QuickstartAIWidget.tsx

@@ -15,6 +15,7 @@ import { AI_QUICK_IDEAS } from './constants'
 import type { TableSuggestion } from './types'
 import { useAITableGeneration } from './useAITableGeneration'
 import { convertTableSuggestionToTableField } from './utils'
+import { useTrack } from 'lib/telemetry/track'
 
 interface QuickstartAIWidgetProps {
   onSelectTable: (tableData: Partial<TableField>) => void
@@ -26,6 +27,7 @@ const SUCCESS_MESSAGE_DURATION_MS = 3000
 export const QuickstartAIWidget = ({ onSelectTable, disabled }: QuickstartAIWidgetProps) => {
   const [lastGeneratedPrompt, setLastGeneratedPrompt] = useState('')
   const inputRef = useRef<HTMLInputElement>(null)
+  const track = useTrack()
 
   const {
     generateTables,
@@ -53,32 +55,66 @@ export const QuickstartAIWidget = ({ onSelectTable, disabled }: QuickstartAIWidg
 
   const handleSelectTemplate = useCallback(
     (template: TableSuggestion) => {
+      track('table_quickstart_template_clicked', {
+        tableName: template.tableName,
+        columnCount: template.fields.length,
+        source: 'ai',
+      })
+
       const tableField = convertTableSuggestionToTableField(template)
       onSelectTable(tableField)
       toast.success(`Applied ${template.tableName} template. You can customize the fields below.`, {
         duration: SUCCESS_MESSAGE_DURATION_MS,
       })
     },
-    [onSelectTable]
+    [onSelectTable, track]
   )
 
   const handleGenerateTables = useCallback(
-    async (promptOverride?: string) => {
+    async ({
+      promptOverride,
+      wasQuickIdea = false,
+    }: { promptOverride?: string; wasQuickIdea?: boolean } = {}) => {
       const promptToUse = promptOverride ?? aiPrompt
       if (!promptToUse.trim() || isGenerating) return
 
-      await generateTables(promptToUse)
-      setLastGeneratedPrompt(promptToUse)
+      track('table_quickstart_ai_prompt_submitted', {
+        promptLength: promptToUse.length,
+        wasQuickIdea,
+      })
+
+      try {
+        const tables = await generateTables(promptToUse)
+
+        track('table_quickstart_ai_generation_completed', {
+          success: tables.length > 0,
+          tablesGenerated: tables.length,
+          promptLength: promptToUse.length,
+        })
+
+        setLastGeneratedPrompt(promptToUse)
+      } catch (error) {
+        track('table_quickstart_ai_generation_completed', {
+          success: false,
+          tablesGenerated: 0,
+          promptLength: promptToUse.length,
+          errorMessage: error instanceof Error ? error.message : 'Unknown error',
+        })
+      }
     },
-    [aiPrompt, generateTables, isGenerating]
+    [aiPrompt, generateTables, isGenerating, track]
   )
 
   const handleQuickIdea = useCallback(
     (idea: string) => {
+      track('table_quickstart_quick_idea_clicked', {
+        ideaText: idea,
+      })
+
       setAiPrompt(idea)
-      handleGenerateTables(idea)
+      handleGenerateTables({ promptOverride: idea, wasQuickIdea: true })
     },
-    [handleGenerateTables, setAiPrompt]
+    [handleGenerateTables, setAiPrompt, track]
   )
 
   return (

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableQuickstart/QuickstartTemplatesWidget.tsx

@@ -7,6 +7,7 @@ import type { TableField } from '../TableEditor.types'
 import { tableTemplates } from './templates'
 import type { TableSuggestion } from './types'
 import { convertTableSuggestionToTableField } from './utils'
+import { useTrack } from 'lib/telemetry/track'
 
 interface QuickstartTemplatesWidgetProps {
   onSelectTemplate: (tableData: Partial<TableField>) => void
@@ -21,22 +22,40 @@ export const QuickstartTemplatesWidget = ({
   disabled,
 }: QuickstartTemplatesWidgetProps) => {
   const [activeCategory, setActiveCategory] = useState<string | null>(null)
+  const track = useTrack()
 
   useEffect(() => {
     if (activeCategory === null && CATEGORIES.length > 0) {
       setActiveCategory(CATEGORIES[0])
     }
   }, [activeCategory])
 
+  const handleCategorySelect = useCallback(
+    (category: string) => {
+      setActiveCategory(category)
+      track('table_quickstart_category_clicked', {
+        categoryName: category,
+      })
+    },
+    [track]
+  )
+
   const handleSelectTemplate = useCallback(
     (template: TableSuggestion) => {
+      track('table_quickstart_template_clicked', {
+        tableName: template.tableName,
+        columnCount: template.fields.length,
+        source: 'templates',
+        categoryName: activeCategory ?? 'Unknown',
+      })
+
       const tableField = convertTableSuggestionToTableField(template)
       onSelectTemplate(tableField)
       toast.success(`Applied ${template.tableName} template. You can customize the fields below.`, {
         duration: SUCCESS_MESSAGE_DURATION_MS,
       })
     },
-    [onSelectTemplate]
+    [onSelectTemplate, track, activeCategory]
   )
 
   const displayedTemplates = activeCategory ? tableTemplates[activeCategory] || [] : []
@@ -58,7 +77,7 @@ export const QuickstartTemplatesWidget = ({
           {CATEGORIES.map((category) => (
             <button
               key={category}
-              onClick={() => setActiveCategory(category)}
+              onClick={() => handleCategorySelect(category)}
               disabled={disabled}
               role="tab"
               aria-selected={activeCategory === category}

apps/studio/components/layouts/Tabs/NewTab.tsx

@@ -4,7 +4,7 @@ import { partition } from 'lodash'
 import { Table2 } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
 import { useParams } from 'common'
@@ -20,6 +20,7 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { usePHFlag } from 'hooks/ui/useFlag'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
+import { useTrack } from 'lib/telemetry/track'
 import { AssistantMessageType, useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
@@ -28,12 +29,12 @@ import { createTabId, useTabsStateSnapshot } from 'state/tabs'
 import {
   AiIconAnimation,
   Button,
-  cn,
   SQL_ICON,
-  Tabs_Shadcn_,
   TabsContent_Shadcn_,
   TabsList_Shadcn_,
   TabsTrigger_Shadcn_,
+  Tabs_Shadcn_,
+  cn,
 } from 'ui'
 import { useEditorType } from '../editors/EditorsLayout.hooks'
 import { ActionCard } from './ActionCard'
@@ -65,8 +66,10 @@ export function NewTab() {
   const [isCreatingChat, setIsCreatingChat] = useState(false)
   const [templates] = partition(SQL_TEMPLATES, { type: 'template' })
   const [quickstarts] = partition(SQL_TEMPLATES, { type: 'quickstart' })
+  const hasTrackedExposure = useRef(false)
 
   const { mutate: sendEvent } = useSendEventMutation()
+  const track = useTrack()
   const { can: canCreateSQLSnippet } = useAsyncCheckPermissions(
     PermissionAction.CREATE,
     'user_content',
@@ -78,7 +81,7 @@ export function NewTab() {
 
   /**
    * Returns:
-   * - `QuickstartVariant`: user variation (if bucketed into AI, Templates, or future variants)
+   * - `QuickstartVariant`: user variation (`ai`, `templates`, `assistant`)
    * - `false`: user not yet bucketed or not targeted for experiment
    * - `undefined`: PostHog still loading
    */
@@ -99,6 +102,15 @@ export function NewTab() {
       ? tableQuickstartVariant
       : null
 
+  useEffect(() => {
+    if (activeQuickstartVariant && !hasTrackedExposure.current) {
+      hasTrackedExposure.current = true
+      track('table_quickstart_opened', {
+        variant: activeQuickstartVariant,
+      })
+    }
+  }, [activeQuickstartVariant, track])
+
   const handleOpenAssistant = () => {
     if (isCreatingChat) return
 
@@ -111,6 +123,9 @@ export function NewTab() {
       })
 
       if (!chatId) {
+        track('table_quickstart_assistant_opened', {
+          chatCreated: false,
+        })
         throw new Error('Failed to create chat')
       }
 
@@ -127,6 +142,10 @@ export function NewTab() {
       }
 
       aiSnap.saveMessage([userMessage, assistantMessage])
+
+      track('table_quickstart_assistant_opened', {
+        chatCreated: true,
+      })
     } catch (error) {
       console.error('Failed to open AI assistant:', error)
       const message = error instanceof Error ? error.message : 'Unknown error'