feat(ai): Add a "total tokens used" readout to AI analytics (#69502)

static/app/views/aiAnalytics/aiAnalyticsDetailsPage.tsx

@@ -67,6 +67,17 @@ export default function AiAnalyticsPage({params}: Props) {
   });
   const spanMetrics = data[0] ?? {};
 
+  const {data: totalTokenData, isLoading: isTotalTokenDataLoading} = useSpanMetrics({
+    search: MutableSearch.fromQueryObject({
+      'span.category': 'ai',
+      'span.ai.pipeline.group': groupId,
+    }),
+    fields: ['ai_total_tokens_used()'],
+    enabled: Boolean(groupId),
+    referrer: 'api.ai-pipelines.view',
+  });
+  const tokenUsedMetric = totalTokenData[0] ?? {};
+
   return (
     <PageFiltersContainer>
       <SentryDocumentTitle
@@ -110,6 +121,13 @@ export default function AiAnalyticsPage({params}: Props) {
                             isLoading={areSpanMetricsLoading}
                           />
 
+                          <MetricReadout
+                            title={t('Total Tokens Used')}
+                            value={tokenUsedMetric['ai_total_tokens_used()']}
+                            unit={'count'}
+                            isLoading={isTotalTokenDataLoading}
+                          />
+
                           <MetricReadout
                             title={t('Runs Per Minute')}
                             value={spanMetrics?.[`${SpanFunction.SPM}()`]}

static/app/views/starfish/types.tsx

@@ -86,6 +86,7 @@ export const SPAN_FUNCTIONS = [
   'http_response_rate',
   'http_error_count',
   'cache_hit_rate',
+  'ai_total_tokens_used',
 ] as const;
 
 const BREAKPOINT_CONDITIONS = ['less', 'greater'] as const;