ref(agent-insights): Split into tabs

static/app/router/routes.tsx

@@ -22,6 +22,7 @@ import {MODULE_BASE_URLS} from 'sentry/views/insights/common/utils/useModuleURL'
 import {AGENTS_LANDING_SUB_PATH} from 'sentry/views/insights/pages/agents/settings';
 import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings';
 import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
+import {MCP_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mcp/settings';
 import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings';
 import {DOMAIN_VIEW_BASE_URL} from 'sentry/views/insights/pages/settings';
 import {getModuleView} from 'sentry/views/insights/pages/utils';
@@ -2069,35 +2070,101 @@ function buildRoutes(): RouteObject[] {
         ...moduleRoutes,
       ],
     },
+    // Redirect old links to the new mcp landing page
+    {
+      path: `ai/mcp/`,
+      redirectTo: `/${DOMAIN_VIEW_BASE_URL}/${MCP_LANDING_SUB_PATH}/`,
+    },
+    {
+      path: `${MCP_LANDING_SUB_PATH}/`,
+      component: make(() => import('sentry/views/insights/pages/mcp/layout')),
+      children: [
+        {
+          index: true,
+          handle: {module: undefined},
+          component: make(() => import('sentry/views/insights/pages/mcp/overview')),
+        },
+        transactionSummaryRoute,
+        traceView,
+        {
+          path: `${MODULE_BASE_URLS[ModuleName.MCP_TOOLS]}/`,
+          children: [
+            {
+              index: true,
+              handle: {module: ModuleName.MCP_TOOLS},
+              component: make(
+                () => import('sentry/views/insights/mcp-tools/views/mcpToolsLandingPage')
+              ),
+            },
+          ],
+        },
+        {
+          path: `${MODULE_BASE_URLS[ModuleName.MCP_RESOURCES]}/`,
+          children: [
+            {
+              index: true,
+              handle: {module: ModuleName.MCP_RESOURCES},
+              component: make(
+                () =>
+                  import(
+                    'sentry/views/insights/mcp-resources/views/mcpResourcesLandingPage'
+                  )
+              ),
+            },
+          ],
+        },
+        {
+          path: `${MODULE_BASE_URLS[ModuleName.MCP_PROMPTS]}/`,
+          children: [
+            {
+              index: true,
+              handle: {module: ModuleName.MCP_PROMPTS},
+              component: make(
+                () =>
+                  import('sentry/views/insights/mcp-prompts/views/mcpPromptsLandingPage')
+              ),
+            },
+          ],
+        },
+      ],
+    },
+    // Redirect old links to the new agents landing page
+    {
+      path: `ai/*`,
+      redirectTo: `/${DOMAIN_VIEW_BASE_URL}/${AGENTS_LANDING_SUB_PATH}/`,
+    },
     {
       path: `${AGENTS_LANDING_SUB_PATH}/`,
       component: make(() => import('sentry/views/insights/pages/agents/layout')),
       children: [
         {
           index: true,
-          component: make(() => import('sentry/views/insights/pages/agents/redirect')),
+          handle: {module: undefined},
+          component: make(() => import('sentry/views/insights/pages/agents/overview')),
         },
         transactionSummaryRoute,
         traceView,
         {
-          path: `${MODULE_BASE_URLS[ModuleName.AGENTS]}/`,
+          path: `${MODULE_BASE_URLS[ModuleName.AGENT_MODELS]}/`,
           children: [
             {
               index: true,
-              handle: {module: ModuleName.AGENTS},
+              handle: {module: ModuleName.AGENT_MODELS},
               component: make(
-                () => import('sentry/views/insights/agents/views/overview')
+                () => import('sentry/views/insights/agentModels/views/modelsLandingPage')
               ),
             },
           ],
         },
         {
-          path: `${MODULE_BASE_URLS[ModuleName.MCP]}/`,
+          path: `${MODULE_BASE_URLS[ModuleName.AGENT_TOOLS]}/`,
           children: [
             {
               index: true,
-              handle: {module: ModuleName.MCP},
-              component: make(() => import('sentry/views/insights/mcp/views/overview')),
+              handle: {module: ModuleName.AGENT_TOOLS},
+              component: make(
+                () => import('sentry/views/insights/agentTools/views/toolsLandingPage')
+              ),
             },
           ],
         },

static/app/utils/analytics/insightAnalyticEvents.tsx

@@ -23,13 +23,17 @@ export type InsightEventParameters = {
   'insight.general.select_region_value': {regions: string[]};
   'insight.general.table_paginate': {direction: string; source: string};
   'insight.general.table_sort': {direction: string; field: string; source: string};
-  'insight.page_loads.agents': {has_ever_sent_data: boolean; view: DomainView};
+  'insight.page_loads.agent_models': {has_ever_sent_data: boolean; view: DomainView};
+  'insight.page_loads.agent_tools': {has_ever_sent_data: boolean; view: DomainView};
   'insight.page_loads.ai': {has_ever_sent_data: boolean; view: DomainView};
   'insight.page_loads.app_start': {has_ever_sent_data: boolean; view: DomainView};
   'insight.page_loads.assets': {has_ever_sent_data: boolean; view: DomainView};
   'insight.page_loads.cache': {has_ever_sent_data: boolean; view: DomainView};
   'insight.page_loads.db': {has_ever_sent_data: boolean; view: DomainView};
   'insight.page_loads.http': {has_ever_sent_data: boolean; view: DomainView};
+  'insight.page_loads.mcp_prompts': {has_ever_sent_data: boolean; view: DomainView};
+  'insight.page_loads.mcp_resources': {has_ever_sent_data: boolean; view: DomainView};
+  'insight.page_loads.mcp_tools': {has_ever_sent_data: boolean; view: DomainView};
   'insight.page_loads.queue': {has_ever_sent_data: boolean; view: DomainView};
   'insight.page_loads.screen_load': {has_ever_sent_data: boolean; view: DomainView};
   'insight.page_loads.screen_rendering': {has_ever_sent_data: boolean; view: DomainView};
@@ -58,7 +62,11 @@ export type InsightEventKey = keyof InsightEventParameters;
 export const insightEventMap: Record<InsightEventKey, string | null> = {
   'insights.page_loads.overview': 'Insights: Overview Page Load',
   'insight.page_loads.ai': 'Insights: AI Page Load',
-  'insight.page_loads.agents': 'Insights: Agents Page Load',
+  'insight.page_loads.agent_models': 'Insights: Agent Models Page Load',
+  'insight.page_loads.agent_tools': 'Insights: Agent Tools Page Load',
+  'insight.page_loads.mcp_prompts': 'Insights: MCP Prompts Page Load',
+  'insight.page_loads.mcp_resources': 'Insights: MCP Resources Page Load',
+  'insight.page_loads.mcp_tools': 'Insights: MCP Tools Page Load',
   'insight.page_loads.app_start': 'Insights: App Start Page Load',
   'insight.page_loads.assets': 'Insights: Assets Page Load',
   'insight.page_loads.cache': 'Insights: Cache Page Load',

static/app/utils/discover/fieldRenderers.tsx

@@ -68,14 +68,14 @@ import {
 import {QuickContextHoverWrapper} from 'sentry/views/discover/table/quickContext/quickContextWrapper';
 import {ContextType} from 'sentry/views/discover/table/quickContext/utils';
 import type {TraceItemDetailsMeta} from 'sentry/views/explore/hooks/useTraceItemDetails';
-import {ModelName} from 'sentry/views/insights/agents/components/modelName';
 import {PerformanceBadge} from 'sentry/views/insights/browser/webVitals/components/performanceBadge';
 import {CurrencyCell} from 'sentry/views/insights/common/components/tableCells/currencyCell';
 import {PercentChangeCell} from 'sentry/views/insights/common/components/tableCells/percentChangeCell';
 import {ResponseStatusCodeCell} from 'sentry/views/insights/common/components/tableCells/responseStatusCodeCell';
 import {SpanDescriptionCell} from 'sentry/views/insights/common/components/tableCells/spanDescriptionCell';
 import {StarredSegmentCell} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
 import {TimeSpentCell} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
+import {ModelName} from 'sentry/views/insights/pages/agents/components/modelName';
 import {ModuleName, SpanFields} from 'sentry/views/insights/types';
 import {
   filterToLocationQuery,

static/app/views/insights/agentModels/settings.ts

@@ -0,0 +1,11 @@
+import {t} from 'sentry/locale';
+
+export const MODULE_TITLE = t('Models');
+export const BASE_URL = 'models';
+
+export const DATA_TYPE = t('Model');
+export const DATA_TYPE_PLURAL = t('Models');
+
+export const MODULE_DOC_LINK = 'https://docs.sentry.io/product/insights/agents/';
+
+export const MODULE_FEATURES = [];

static/app/views/insights/agentModels/views/modelsLandingPage.tsx

@@ -0,0 +1,108 @@
+import {Fragment} from 'react';
+
+import {Flex} from 'sentry/components/core/layout';
+import * as Layout from 'sentry/components/layouts/thirds';
+import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
+import {EAPSpanSearchQueryBuilder} from 'sentry/components/performance/spanSearchQueryBuilder';
+import {SearchQueryBuilderProvider} from 'sentry/components/searchQueryBuilder/context';
+import useOrganization from 'sentry/utils/useOrganization';
+import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceItemAttributeContext';
+import {TraceItemDataset} from 'sentry/views/explore/types';
+import {limitMaxPickableDays} from 'sentry/views/explore/utils';
+import {InsightsEnvironmentSelector} from 'sentry/views/insights/common/components/enviornmentSelector';
+import {ModuleFeature} from 'sentry/views/insights/common/components/moduleFeature';
+import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
+import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
+import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
+import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
+import {useDefaultToAllProjects} from 'sentry/views/insights/common/utils/useDefaultToAllProjects';
+import TokenCostWidget from 'sentry/views/insights/pages/agents/components/modelCostWidget';
+import {ModelsTable} from 'sentry/views/insights/pages/agents/components/modelsTable';
+import {WidgetGrid} from 'sentry/views/insights/pages/agents/components/styles';
+import TokenTypesWidget from 'sentry/views/insights/pages/agents/components/tokenTypesWidget';
+import TokenUsageWidget from 'sentry/views/insights/pages/agents/components/tokenUsageWidget';
+import {useAgentSpanSearchProps} from 'sentry/views/insights/pages/agents/hooks/useAgentSpanSearchProps';
+import {useShowAgentOnboarding} from 'sentry/views/insights/pages/agents/hooks/useShowAgentOnboarding';
+import {Onboarding} from 'sentry/views/insights/pages/agents/onboarding';
+import {TableUrlParams} from 'sentry/views/insights/pages/agents/utils/urlParams';
+import {ModuleName} from 'sentry/views/insights/types';
+
+function AgentModelsLandingPage() {
+  const organization = useOrganization();
+  const showOnboarding = useShowAgentOnboarding();
+  const datePageFilterProps = limitMaxPickableDays(organization);
+  useDefaultToAllProjects();
+
+  const agentSpanSearchProps = useAgentSpanSearchProps();
+
+  return (
+    <SearchQueryBuilderProvider {...agentSpanSearchProps.provider}>
+      <ModuleFeature moduleName={ModuleName.AGENT_MODELS}>
+        <Layout.Body>
+          <Layout.Main width="full">
+            <ModuleLayout.Layout>
+              <ModuleLayout.Full>
+                <ToolRibbon>
+                  <PageFilterBar condensed>
+                    <InsightsProjectSelector
+                      resetParamsOnChange={[TableUrlParams.CURSOR]}
+                    />
+                    <InsightsEnvironmentSelector
+                      resetParamsOnChange={[TableUrlParams.CURSOR]}
+                    />
+                    <DatePageFilter
+                      {...datePageFilterProps}
+                      resetParamsOnChange={[TableUrlParams.CURSOR]}
+                    />
+                  </PageFilterBar>
+                  {!showOnboarding && (
+                    <Flex flex={2}>
+                      <EAPSpanSearchQueryBuilder {...agentSpanSearchProps.queryBuilder} />
+                    </Flex>
+                  )}
+                </ToolRibbon>
+              </ModuleLayout.Full>
+
+              <ModuleLayout.Full>
+                {showOnboarding ? (
+                  <Onboarding />
+                ) : (
+                  <Fragment>
+                    <WidgetGrid rowHeight={260}>
+                      <WidgetGrid.Position1>
+                        <TokenCostWidget />
+                      </WidgetGrid.Position1>
+                      <WidgetGrid.Position2>
+                        <TokenUsageWidget />
+                      </WidgetGrid.Position2>
+                      <WidgetGrid.Position3>
+                        <TokenTypesWidget />
+                      </WidgetGrid.Position3>
+                    </WidgetGrid>
+                    <ModelsTable />
+                  </Fragment>
+                )}
+              </ModuleLayout.Full>
+            </ModuleLayout.Layout>
+          </Layout.Main>
+        </Layout.Body>
+      </ModuleFeature>
+    </SearchQueryBuilderProvider>
+  );
+}
+
+function PageWithProviders() {
+  return (
+    <ModulePageProviders
+      moduleName={ModuleName.AGENT_MODELS}
+      analyticEventName="insight.page_loads.agent_models"
+    >
+      <TraceItemAttributeProvider traceItemType={TraceItemDataset.SPANS} enabled>
+        <AgentModelsLandingPage />
+      </TraceItemAttributeProvider>
+    </ModulePageProviders>
+  );
+}
+
+export default PageWithProviders;

static/app/views/insights/agentTools/settings.ts

@@ -0,0 +1,11 @@
+import {t} from 'sentry/locale';
+
+export const MODULE_TITLE = t('Tools');
+export const BASE_URL = 'tools';
+
+export const DATA_TYPE = t('Tool');
+export const DATA_TYPE_PLURAL = t('Tools');
+
+export const MODULE_DOC_LINK = 'https://docs.sentry.io/product/insights/agents/';
+
+export const MODULE_FEATURES = [];