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

For tool spans, parse the tool input parameters and display the first
key's value next to the tool name (e.g. "search: weather in NYC").
For AI client spans, display the response model (e.g. "gpt-4o") instead
of generic "chat"/"request", falling back to the original behavior.

https://claude.ai/code/session_0113Szysfr5Bf4ZQZ59nkxgJ

Author: claude

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