feat(agents): Improve AI span presentation with tool input preview and response model (#112579)

Author: obostjancic

src/sentry/api/endpoints/organization_ai_conversation_details.py

@@ -46,6 +46,8 @@
     "gen_ai.response.object",
     "gen_ai.response.text",
     "gen_ai.tool.name",
+    "gen_ai.tool.call.arguments",
+    "gen_ai.tool.input",
     "gen_ai.usage.total_tokens",
     "gen_ai.request.model",
     "gen_ai.response.model",

static/app/views/insights/pages/agents/components/aiSpanList.tsx

@@ -13,6 +13,7 @@ import {t} from 'sentry/locale';
 import {getDuration} from 'sentry/utils/duration/getDuration';
 import {LLMCosts} from 'sentry/views/insights/pages/agents/components/llmCosts';
 import {
+  getFirstToolInputValue,
   getGenAiOpType,
   getIsAiAgentNode,
   getNumberAttr,
@@ -475,6 +476,7 @@ function getSpanPresentation(
     case GenAiOperationType.AI_CLIENT: {
       const tokens = getNumberAttr(node, SpanFields.GEN_AI_USAGE_TOTAL_TOKENS);
       const cost = getNumberAttr(node, SpanFields.GEN_AI_COST_TOTAL_TOKENS);
+      const responseModel = getStringAttr(node, SpanFields.GEN_AI_RESPONSE_MODEL);
       const tokenLabel = tokens ? (
         <Fragment>
           <Count value={tokens} />
@@ -484,7 +486,7 @@ function getSpanPresentation(
       return {
         icon: <IconChat size="md" />,
         color,
-        title: description || op,
+        title: responseModel || description || op,
         subtitle:
           tokenLabel && cost ? (
             <Fragment>
@@ -497,11 +499,12 @@ function getSpanPresentation(
     }
     case GenAiOperationType.TOOL: {
       const toolName = getStringAttr(node, SpanFields.GEN_AI_TOOL_NAME);
+      const firstInputValue = getFirstToolInputValue(node);
       return {
         icon: <IconFix size="md" />,
         color,
         title: toolName || op,
-        subtitle: toolName ? op : '',
+        subtitle: firstInputValue || (toolName ? op : ''),
       };
     }
     case GenAiOperationType.HANDOFF:

static/app/views/insights/pages/agents/hooks/useAITrace.tsx

@@ -35,6 +35,8 @@ const AI_TRACE_BASE_ATTRIBUTES = [
   SpanFields.GEN_AI_OPERATION_NAME,
   SpanFields.SPAN_STATUS,
   'status',
+  'gen_ai.tool.call.arguments',
+  'gen_ai.tool.input',
 ];
 
 export function useAITrace(traceSlug: string, timestamp?: number): UseAITraceResult {

static/app/views/insights/pages/agents/utils/aiTraceNodes.tsx

@@ -139,6 +139,40 @@ export function getNumberAttr(node: AITraceSpanNode, field: string): number | un
   return undefined;
 }
 
+const MAX_TOOL_INPUT_PREVIEW_LENGTH = 80;
+
+/**
+ * Parses tool input JSON and returns the value of the first key.
+ * Used to show a preview of the tool input next to the tool name.
+ */
+export function getFirstToolInputValue(node: AITraceSpanNode): string | undefined {
+  const toolInput =
+    getStringAttr(node, 'gen_ai.tool.call.arguments') ||
+    getStringAttr(node, 'gen_ai.tool.input');
+  if (!toolInput) {
+    return undefined;
+  }
+
+  try {
+    const parsed = JSON.parse(toolInput);
+    if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
+      const firstKey = Object.keys(parsed)[0];
+      if (firstKey !== undefined) {
+        const value = parsed[firstKey];
+        const str = typeof value === 'string' ? value : JSON.stringify(value);
+        if (str.length > MAX_TOOL_INPUT_PREVIEW_LENGTH) {
+          return str.slice(0, MAX_TOOL_INPUT_PREVIEW_LENGTH) + '\u2026';
+        }
+        return str;
+      }
+    }
+  } catch {
+    // Invalid JSON, return undefined
+  }
+
+  return undefined;
+}
+
 export function hasError(node: AITraceSpanNode): boolean {
   if (node.errors.size > 0) {
     return true;

static/app/views/insights/pages/conversations/hooks/useConversation.tsx

@@ -45,6 +45,8 @@ interface ConversationApiSpan {
   'gen_ai.response.model'?: string;
   'gen_ai.response.object'?: string;
   'gen_ai.response.text'?: string;
+  'gen_ai.tool.call.arguments'?: string;
+  'gen_ai.tool.input'?: string;
   'gen_ai.tool.name'?: string;
   'gen_ai.usage.total_tokens'?: number;
   'span.name'?: string;
@@ -114,6 +116,8 @@ function createNodeFromApiSpan(
       [SpanFields.GEN_AI_RESPONSE_MODEL]: apiSpan['gen_ai.response.model'] ?? '',
       [SpanFields.GEN_AI_AGENT_NAME]: apiSpan['gen_ai.agent.name'] ?? '',
       [SpanFields.GEN_AI_TOOL_NAME]: apiSpan['gen_ai.tool.name'] ?? '',
+      'gen_ai.tool.call.arguments': apiSpan['gen_ai.tool.call.arguments'] ?? '',
+      'gen_ai.tool.input': apiSpan['gen_ai.tool.input'] ?? '',
       [SpanFields.GEN_AI_USAGE_TOTAL_TOKENS]: apiSpan['gen_ai.usage.total_tokens'] ?? 0,
       [SpanFields.GEN_AI_COST_TOTAL_TOKENS]: apiSpan['gen_ai.cost.total_tokens'] ?? 0,
       [SpanFields.SPAN_STATUS]: apiSpan['span.status'],

static/app/views/performance/newTraceDetails/traceRow/traceEAPSpanRow.tsx

@@ -2,6 +2,15 @@ import React from 'react';
 import {PlatformIcon} from 'platformicons';
 
 import {ellipsize} from 'sentry/utils/string/ellipsize';
+import {
+  getFirstToolInputValue,
+  getStringAttr,
+} from 'sentry/views/insights/pages/agents/utils/aiTraceNodes';
+import {
+  GenAiOperationType,
+  getGenAiOperationTypeFromSpanOp,
+} from 'sentry/views/insights/pages/agents/utils/query';
+import {SpanFields} from 'sentry/views/insights/types';
 import {TraceIcons} from 'sentry/views/performance/newTraceDetails/traceIcons';
 import type {EapSpanNode} from 'sentry/views/performance/newTraceDetails/traceModels/traceTreeNode/eapSpanNode';
 import {TraceBar} from 'sentry/views/performance/newTraceDetails/traceRow/traceBar';
@@ -13,6 +22,43 @@ import {
   type TraceRowProps,
 } from 'sentry/views/performance/newTraceDetails/traceRow/traceRow';
 
+/**
+ * Returns an enriched description for AI spans when attributes are available.
+ * - Tool spans: "toolName: firstInputValue"
+ * - AI client spans: responseModel (e.g., "gpt-4o")
+ * Falls back to undefined so the caller can use the default description.
+ */
+function getAIEnhancedDescription(node: EapSpanNode): string | undefined {
+  const attrs = node.attributes;
+  if (!attrs) {
+    return undefined;
+  }
+
+  const opType =
+    (attrs[SpanFields.GEN_AI_OPERATION_TYPE] as string | undefined) ??
+    getGenAiOperationTypeFromSpanOp(node.op);
+
+  if (!opType) {
+    return undefined;
+  }
+
+  if (opType === GenAiOperationType.TOOL) {
+    const toolName = getStringAttr(node as any, SpanFields.GEN_AI_TOOL_NAME);
+    const firstValue = getFirstToolInputValue(node as any);
+    if (toolName && firstValue) {
+      return `${toolName}: ${firstValue}`;
+    }
+    return toolName ?? undefined;
+  }
+
+  if (opType === GenAiOperationType.AI_CLIENT) {
+    const responseModel = getStringAttr(node as any, SpanFields.GEN_AI_RESPONSE_MODEL);
+    return responseModel ?? undefined;
+  }
+
+  return undefined;
+}
+
 export function TraceEAPSpanRow(props: TraceRowProps<EapSpanNode>) {
   const spanId = props.node.id;
 
@@ -22,7 +68,10 @@ export function TraceEAPSpanRow(props: TraceRowProps<EapSpanNode>) {
     <PlatformIcon platform={props.projects[props.node.projectSlug ?? ''] ?? 'default'} />
   );
 
-  const description = props.node.description || props.node.value.name;
+  const description =
+    getAIEnhancedDescription(props.node) ||
+    props.node.description ||
+    props.node.value.name;
 
   return (
     <div