feat: add web console usage telemetry

package.json

@@ -62,6 +62,7 @@
     "@styled-icons/remix-line": "10.46.0",
     "allotment": "^1.19.3",
     "animate.css": "3.7.2",
+    "bowser": "^2.14.1",
     "compare-versions": "^5.0.1",
     "core-js": "^3.22.8",
     "date-fns": "4.1.0",
@@ -146,6 +147,7 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.1.0",
+    "fake-indexeddb": "^6.2.5",
     "globals": "^15.0.0",
     "husky": "^9.1.7",
     "jiti": "^2.6.1",

src/components/CopyButton/index.tsx

@@ -19,11 +19,13 @@ export const CopyButton = ({
   text,
   iconOnly,
   size = "md",
+  onCopy,
   ...props
 }: {
   text: string
   iconOnly?: boolean
   size?: ButtonProps["size"]
+  onCopy?: () => void
 } & ButtonProps) => {
   const [copied, setCopied] = useState(false)
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -47,6 +49,7 @@ export const CopyButton = ({
         e.stopPropagation()
         setCopied(true)
         timeoutRef.current = setTimeout(() => setCopied(false), 2000)
+        onCopy?.()
       }}
       {...(!iconOnly && {
         prefixIcon: <FileCopy size={size === "sm" ? "12px" : "16px"} />,

src/components/Drawer/index.tsx

@@ -11,6 +11,8 @@ import { Button } from "../Button"
 import { ContentWrapper } from "./content-wrapper"
 import { Panel } from "../../components/Panel"
 import { XIcon, ArrowLeftIcon, ArrowRightIcon } from "@phosphor-icons/react"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 type DrawerProps = {
   mode?: "modal" | "side"
@@ -143,10 +145,12 @@ export const Drawer = ({
   const canGoForward = useSelector(selectors.console.canGoForwardInSidebar)
 
   const handleNavigateBack = () => {
+    void trackEvent(ConsoleEvent.SIDEBAR_NAVIGATE)
     dispatch(actions.console.goBackInSidebar())
   }
 
   const handleNavigateForward = () => {
+    void trackEvent(ConsoleEvent.SIDEBAR_NAVIGATE)
     dispatch(actions.console.goForwardInSidebar())
   }
 

src/components/ExplainQueryButton/index.tsx

@@ -13,6 +13,8 @@ import {
   executeAIFlow,
   createExplainFlowConfig,
 } from "../../utils/executeAIFlow"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const KeyBinding = styled(Box).attrs({ alignItems: "center", gap: "0" })`
   color: ${({ theme }) => theme.color.pinkPrimary};
@@ -54,6 +56,7 @@ export const ExplainQueryButton = ({
   } = useAIConversation()
 
   const handleExplainQuery = () => {
+    void trackEvent(ConsoleEvent.AI_EXPLAIN_QUERY)
     const currentModel = currentModelValue!
     const apiKey = apiKeyValue!
 

src/components/FixQueryButton/index.tsx

@@ -12,6 +12,8 @@ import { useAIConversation } from "../../providers/AIConversationProvider"
 import { extractErrorByQueryKey } from "../../scenes/Editor/utils"
 import type { ExecutionRefs } from "../../scenes/Editor/index"
 import { executeAIFlow, createFixFlowConfig } from "../../utils/executeAIFlow"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const FixButton = styled(Button)`
   gap: 1rem;
@@ -34,6 +36,7 @@ export const FixQueryButton = () => {
   } = useAIConversation()
 
   const handleFixQuery = () => {
+    void trackEvent(ConsoleEvent.AI_FIX_QUERY)
     const conversationId = chatWindowState.activeConversationId!
     const conversation = getConversationMeta(conversationId)!
 

src/components/SetupAIAssistant/ConfigurationModal.tsx

@@ -21,6 +21,8 @@ import { OpenAIIcon } from "./OpenAIIcon"
 import { AnthropicIcon } from "./AnthropicIcon"
 import { BrainIcon } from "./BrainIcon"
 import { theme } from "../../theme"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const ModalContent = styled.div`
   display: flex;
@@ -753,6 +755,10 @@ export const ConfigurationModal = ({
   const handleComplete = () => {
     if (!selectedProvider || enabledModels.length === 0) return
 
+    void trackEvent(ConsoleEvent.AI_PROVIDER_CONFIGURE, {
+      type: selectedProvider,
+    })
+
     const selectedModel =
       enabledModels.find(
         (m) => MODEL_OPTIONS.find((mo) => mo.value === m)?.default,
@@ -812,6 +818,7 @@ export const ConfigurationModal = ({
         setEnabledModels(defaultModels)
       }
       setError(null)
+      void trackEvent(ConsoleEvent.AI_CONFIGURATION_VALIDATE)
       return true
     } catch (err) {
       const errorMessage =

src/components/SetupAIAssistant/ModelDropdown.tsx

@@ -13,6 +13,8 @@ import { OpenAIIcon } from "./OpenAIIcon"
 import { AnthropicIcon } from "./AnthropicIcon"
 import { BrainIcon } from "./BrainIcon"
 import { Tooltip } from "../Tooltip"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const ExpandUpDown = () => (
   <svg
@@ -170,6 +172,7 @@ export const ModelDropdown = () => {
   }, [enabledModelValues])
 
   const handleModelSelect = (modelValue: string) => {
+    void trackEvent(ConsoleEvent.AI_MODEL_CHANGE)
     updateSettings(StoreKey.AI_ASSISTANT_SETTINGS, {
       ...aiAssistantSettings,
       selectedModel: modelValue,

src/components/SetupAIAssistant/SettingsModal.tsx

@@ -29,6 +29,8 @@ import type { AiAssistantSettings } from "../../providers/LocalStorageProvider/t
 import { ForwardRef } from "../ForwardRef"
 import { Badge, BadgeType } from "../../components/Badge"
 import { CheckboxCircle } from "@styled-icons/remix-fill"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const ModalContent = styled.div`
   display: flex;
@@ -657,6 +659,7 @@ export const SettingsModal = ({ open, onOpenChange }: SettingsModalProps) => {
   )
 
   const handleRemoveApiKey = useCallback((provider: Provider) => {
+    void trackEvent(ConsoleEvent.AI_SETTINGS_API_KEY_REMOVE)
     // Remove API key from local state only
     // Settings will be persisted when Save Settings is clicked
     setApiKeys((prev) => ({ ...prev, [provider]: "" }))
@@ -668,6 +671,7 @@ export const SettingsModal = ({ open, onOpenChange }: SettingsModalProps) => {
 
   const handleModelToggle = useCallback(
     (provider: Provider, modelValue: string) => {
+      void trackEvent(ConsoleEvent.AI_SETTINGS_MODEL_TOGGLE)
       setEnabledModels((prev) => {
         const current = prev[provider]
         const isEnabled = current.includes(modelValue)
@@ -684,6 +688,9 @@ export const SettingsModal = ({ open, onOpenChange }: SettingsModalProps) => {
 
   const handleSchemaAccessChange = useCallback(
     (provider: Provider, checked: boolean) => {
+      if (!checked) {
+        void trackEvent(ConsoleEvent.AI_SETTINGS_SCHEMA_ACCESS_REMOVE)
+      }
       setGrantSchemaAccess((prev) => ({ ...prev, [provider]: checked }))
     },
     [],
@@ -908,6 +915,9 @@ export const SettingsModal = ({ open, onOpenChange }: SettingsModalProps) => {
                         <EditButton
                           type="button"
                           onClick={() => {
+                            void trackEvent(
+                              ConsoleEvent.AI_SETTINGS_API_KEY_EDIT,
+                            )
                             inputRef.current?.focus()
                           }}
                           title="Edit API key"

src/components/SetupAIAssistant/index.tsx

@@ -8,6 +8,8 @@ import { ConfigurationModal } from "./ConfigurationModal"
 import { SettingsModal } from "./SettingsModal"
 import { ModelDropdown } from "./ModelDropdown"
 import { useAIStatus } from "../../providers/AIStatusProvider"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const SettingsButton = styled(Button)`
   padding: 0.6rem;
@@ -26,6 +28,7 @@ export const SetupAIAssistant = () => {
 
   const handleSettingsClick = () => {
     if (isConfigured) {
+      void trackEvent(ConsoleEvent.AI_SETTINGS_OPEN)
       setSettingsModalOpen(true)
     } else {
       if (showPromo) {
@@ -60,6 +63,7 @@ export const SetupAIAssistant = () => {
         showPromo={showPromo}
         setShowPromo={setShowPromo}
         onSetupClick={() => {
+          void trackEvent(ConsoleEvent.AI_CONFIGURATION_OPEN)
           setShowPromo(false)
           setConfigModalOpen(true)
         }}

src/js/console/grid.js

@@ -24,6 +24,8 @@
 import { copyToClipboard } from "../../utils/copyToClipboard"
 import { unescapeHtml } from "../../utils/escapeHtml"
 import { toast } from "../../components"
+import { trackEvent } from "../../modules/ConsoleEventTracker"
+import { ConsoleEvent } from "../../modules/ConsoleEventTracker/events"
 
 const hashString = (str) => {
   let hash = 0
@@ -1755,6 +1757,7 @@ export function grid(rootElement, _paginationFn, id) {
 
   function copyActiveCellToClipboard() {
     if (focusedCell) {
+      void trackEvent(ConsoleEvent.GRID_CELL_COPY)
       if (activeCellPulseClearTimer) {
         clearTimeout(activeCellPulseClearTimer)
       }