feat: add analytics for mcp page (#198)

apps/agent/entrypoints/options/connect-mcp/ConnectMCP.tsx

@@ -2,7 +2,12 @@ import { Check, Loader2, Plus, Server, Trash2 } from 'lucide-react'
 import { type FC, useState } from 'react'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
+import {
+  CUSTOM_MCP_ADDED_EVENT,
+  MANAGED_MCP_ADDED_EVENT,
+} from '@/lib/constants/analyticsEvents'
 import { useMcpServers } from '@/lib/mcp/mcpServerStorage'
+import { track } from '@/lib/metrics/track'
 import { sentry } from '@/lib/sentry/sentry'
 import { AddCustomMCPDialog } from './AddCustomMCPDialog'
 import { AddManagedMCPDialog } from './AddManagedMCPDialog'
@@ -82,6 +87,7 @@ export const ConnectMCP: FC = () => {
         managedServerName: name,
         managedServerDescription: description,
       })
+      track(MANAGED_MCP_ADDED_EVENT, { server_name: name })
     } catch (e) {
       failedToAddMcp(name, e)
     }
@@ -125,6 +131,7 @@ export const ConnectMCP: FC = () => {
         description: config.description,
       },
     })
+    track(CUSTOM_MCP_ADDED_EVENT)
   }
 
   const availableServers = serversList?.servers.filter((eachServer) => {

apps/agent/entrypoints/options/layout/DashboardLayout.tsx

@@ -14,11 +14,13 @@ import {
   X,
 } from 'lucide-react'
 import type { FC, HTMLAttributeAnchorTarget } from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { NavLink, Outlet, useLocation } from 'react-router'
 import { ThemeToggle } from '@/components/elements/theme-toggle'
 import { Feature } from '@/lib/browseros/capabilities'
 import { useCapabilities } from '@/lib/browseros/useCapabilities'
+import { SETTINGS_PAGE_VIEWED_EVENT } from '@/lib/constants/analyticsEvents'
+import { track } from '@/lib/metrics/track'
 
 type NavItem = {
   name: string
@@ -97,6 +99,11 @@ export const DashboardLayout: FC = () => {
   const location = useLocation()
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const { supports } = useCapabilities()
+
+  useEffect(() => {
+    track(SETTINGS_PAGE_VIEWED_EVENT, { page: location.pathname })
+  }, [location.pathname])
+
   return (
     <div className="min-h-screen bg-background">
       {/* Mobile Header */}

apps/agent/lib/constants/analyticsEvents.ts

@@ -66,3 +66,11 @@ export const NEWTAB_SEARCH_EXECUTED_EVENT = 'newtab.search.executed'
 
 /** @public */
 export const SIDEPANEL_AI_TRIGGERED_EVENT = 'sidepanel.ai.triggered'
+
+export const SETTINGS_PAGE_VIEWED_EVENT = 'settings.page.viewed'
+
+/** @public */
+export const MANAGED_MCP_ADDED_EVENT = 'settings.managed_mcp.added'
+
+/** @public */
+export const CUSTOM_MCP_ADDED_EVENT = 'settings.custom_mcp.added'