@inkeep/agents-manage-ui 0.11.2 → 0.12.0

package/src/components/mcp-servers/view-mcp-server-details.tsx

@@ -5,11 +5,9 @@ import Link from 'next/link';
 import { Badge } from '@/components/ui/badge';
 import { ExternalLink } from '@/components/ui/external-link';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { useOAuthLogin } from '@/hooks/use-oauth-login';
 import type { MCPTool } from '@/lib/types/tools';
-
 import { cn } from '@/lib/utils';
-import { getOAuthLoginUrl } from '@/lib/utils/mcp-urls';
 import { getToolTypeAndName } from '@/lib/utils/mcp-utils';
 import { Button } from '../ui/button';
 import { CopyableMultiLineCode } from '../ui/copyable-multi-line-code';
@@ -53,7 +51,14 @@ export function ViewMCPServerDetails({
   tenantId: string;
   projectId: string;
 }) {
-  const { INKEEP_AGENTS_MANAGE_API_URL } = useRuntimeConfig();
+  const { handleOAuthLogin } = useOAuthLogin({
+    tenantId,
+    projectId,
+    onFinish: () => {
+      window.location.reload();
+    },
+  });
+
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -99,50 +104,6 @@ export function ViewMCPServerDetails({
     return <div className={cn('flex w-full text-sm', className)}>{children}</div>;
   };
 
-  // Handle OAuth login for MCP tools that need authentication
-  const handleOAuthLogin = (toolId: string) => {
-    try {
-      // Get the OAuth URL and open in popup window
-      const oauthUrl = getOAuthLoginUrl({
-        INKEEP_AGENTS_MANAGE_API_URL,
-        tenantId,
-        projectId,
-        id: toolId,
-      });
-      const popup = window.open(
-        oauthUrl,
-        'oauth-popup',
-        'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
-      );
-
-      // Listen for OAuth success message from popup
-      const handleMessage = (event: MessageEvent) => {
-        if (event.data.type === 'oauth-success' && event.data.toolId === toolId) {
-          // Clean up listener
-          window.removeEventListener('message', handleMessage);
-          // Refresh the page to show updated tool status
-          window.location.reload();
-        }
-      };
-
-      if (popup) {
-        window.addEventListener('message', handleMessage);
-
-        // Fallback: Monitor popup for closure
-        const checkClosed = setInterval(() => {
-          if (popup.closed) {
-            clearInterval(checkClosed);
-            window.removeEventListener('message', handleMessage);
-            // Only refresh if we didn't already get the success message
-            window.location.reload();
-          }
-        }, 1000);
-      }
-    } catch (error) {
-      console.error('OAuth login failed:', error);
-    }
-  };
-
   let provider: string | undefined;
   try {
     provider = getToolTypeAndName(tool).type;
@@ -195,14 +156,6 @@ export function ViewMCPServerDetails({
             </ItemValue>
           </div>
         </div>
-        {tool.imageUrl && (
-          <div className="space-y-2">
-            <ItemLabel>Image URL</ItemLabel>
-            <ItemValue>
-              {tool.imageUrl.startsWith('data:image/') ? 'Base64 encoded image' : tool.imageUrl}
-            </ItemValue>
-          </div>
-        )}
 
         <div className="space-y-2">
           <ItemLabel>Status</ItemLabel>

package/src/components/traces/conversation-detail.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import { Activity, ArrowLeft, MessageSquare, TriangleAlert } from 'lucide-react';
+import {
+  Activity,
+  ArrowLeft,
+  ExternalLink as ExternalLinkIcon,
+  MessageSquare,
+  TriangleAlert,
+} from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { formatDateTime, formatDuration } from '@/app/utils/format-date';
@@ -13,7 +19,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ExternalLink } from '@/components/ui/external-link';
 import { ResizablePanelGroup } from '@/components/ui/resizable';
 import { Skeleton } from '@/components/ui/skeleton';
-import { ConversationErrors } from './conversation-errors';
+import { getSignozTracesExplorerUrl } from '@/lib/utils/signoz-links';
 import { SignozLink } from './signoz-link';
 import { InfoRow } from './timeline/blocks';
 import { TimelineWrapper } from './timeline/timeline-wrapper';
@@ -27,7 +33,6 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
   const [conversation, setConversation] = useState<ConversationDetailType | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [showErrorsPage, setShowErrorsPage] = useState(false);
   const { tenantId, projectId } = useParams();
 
   useEffect(() => {
@@ -38,7 +43,6 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
         const response = await fetch(`/api/signoz/conversations/${conversationId}`);
         if (!response.ok) throw new Error('Failed to fetch conversation details');
         const data = await response.json();
-        if (typeof data.totalErrors === 'undefined') data.totalErrors = 0;
         setConversation(data);
       } catch (err) {
         setError(err instanceof Error ? err.message : 'An error occurred');
@@ -86,12 +90,6 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
     );
   }
 
-  if (showErrorsPage) {
-    return (
-      <ConversationErrors conversationId={conversationId} onBack={() => setShowErrorsPage(false)} />
-    );
-  }
-
   return (
     <div className="h-full flex flex-col">
       {/* Header */}
@@ -121,40 +119,50 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
 
       {/* Summary Cards */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 mb-4 flex-shrink-0">
-        {/* Errors */}
+        {/* Duration */}
         <Card
-          className={`shadow-none bg-background ${conversation.totalErrors > 0 ? 'cursor-pointer hover:bg-destructive/5 dark:hover:bg-destructive/10 transition-colors' : ''}`}
-          onClick={() => {
-            if (conversation.totalErrors > 0) setShowErrorsPage(true);
-          }}
+          className="shadow-none bg-background"
+          title={
+            conversation.conversationStartTime && conversation.conversationEndTime
+              ? `Start: ${conversation.conversationStartTime}\nEnd: ${conversation.conversationEndTime}`
+              : 'Timing data not available'
+          }
         >
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-foreground">Errors</CardTitle>
-            <TriangleAlert className="h-4 w-4 text-muted-foreground" />
+            <CardTitle className="text-sm font-medium text-foreground">Duration</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div
-              className={`text-2xl font-bold ${conversation.totalErrors > 0 ? 'text-red-600' : 'text-green-600'}`}
-            >
-              {conversation.totalErrors}
+            <div className="space-y-2">
+              {conversation.conversationStartTime && conversation.conversationEndTime ? (
+                <>
+                  <div className="text-sm font-medium text-foreground">
+                    <div className="flex items-center gap-1">
+                      <span className="text-xs text-muted-foreground">Start:</span>
+                      <span className="text-xs font-mono">
+                        {formatDateTime(conversation.conversationStartTime)}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1 mt-1">
+                      <span className="text-xs text-muted-foreground">End:</span>
+                      <span className="text-xs font-mono">
+                        {formatDateTime(conversation.conversationEndTime)}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="space-y-1 mt-2">
+                    {conversation.conversationDuration && (
+                      <div className="text-xs text-muted-foreground">
+                        <span className="font-medium">Conversation Duration:</span>{' '}
+                        {formatDuration(conversation.conversationDuration)}
+                      </div>
+                    )}
+                  </div>
+                </>
+              ) : (
+                <div className="text-sm text-muted-foreground">Timing data not available</div>
+              )}
             </div>
-            <p className="text-xs text-muted-foreground">
-              {conversation.totalErrors === 0
-                ? 'No errors detected'
-                : (() => {
-                    const mcp = conversation.mcpToolErrors?.length || 0;
-                    const ctx = conversation.contextErrors?.length || 0;
-                    const agent = conversation.agentGenerationErrors?.length || 0;
-                    if (mcp || ctx || agent) {
-                      const parts = [];
-                      if (mcp) parts.push(`${mcp} MCP tool`);
-                      if (ctx) parts.push(`${ctx} context`);
-                      if (agent) parts.push(`${agent} agent generation`);
-                      return `${parts.join(', ')} errors - Click to view details`;
-                    }
-                    return 'Errors in conversation';
-                  })()}
-            </p>
           </CardContent>
         </Card>
 
@@ -215,50 +223,57 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
           </CardContent>
         </Card>
 
-        {/* Duration */}
-        <Card
-          className="shadow-none bg-background"
-          title={
-            conversation.conversationStartTime && conversation.conversationEndTime
-              ? `Start: ${conversation.conversationStartTime}\nEnd: ${conversation.conversationEndTime}`
-              : 'Timing data not available'
-          }
-        >
+        {/* Alerts */}
+        <Card className="shadow-none bg-background">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-foreground">Duration</CardTitle>
-            <Activity className="h-4 w-4 text-muted-foreground" />
+            <CardTitle className="text-sm font-medium text-foreground">Alerts</CardTitle>
+            <TriangleAlert className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="space-y-2">
-              {conversation.conversationStartTime && conversation.conversationEndTime ? (
+            {(() => {
+              const errors = conversation.errorCount ?? 0;
+              const warnings = conversation.warningCount ?? 0;
+              const total = errors + warnings;
+
+              return (
                 <>
-                  <div className="text-sm font-medium text-foreground">
-                    <div className="flex items-center gap-1">
-                      <span className="text-xs text-muted-foreground">Start:</span>
-                      <span className="text-xs font-mono">
-                        {formatDateTime(conversation.conversationStartTime)}
-                      </span>
+                  {total > 0 ? (
+                    <div className="space-y-1">
+                      {errors > 0 && (
+                        <div className="flex items-baseline gap-2">
+                          <span className="text-2xl font-bold font-mono text-red-600">{errors}</span>
+                          <span className="text-sm text-muted-foreground">error{errors > 1 ? 's' : ''}</span>
+                        </div>
+                      )}
+                       {warnings > 0 && (
+                         <div className="flex items-baseline gap-2">
+                           <span className="text-2xl font-bold font-mono text-yellow-500">{warnings}</span>
+                           <span className="text-sm text-muted-foreground">warning{warnings > 1 ? 's' : ''}</span>
+                         </div>
+                       )}
                     </div>
-                    <div className="flex items-center gap-1 mt-1">
-                      <span className="text-xs text-muted-foreground">End:</span>
-                      <span className="text-xs font-mono">
-                        {formatDateTime(conversation.conversationEndTime)}
-                      </span>
+                  ) : (
+                    <div>
+                      <div className="text-2xl font-bold font-mono text-green-600 mb-1">0</div>
+                      <p className="text-xs text-muted-foreground">No warnings or errors</p>
                     </div>
-                  </div>
-                  <div className="space-y-1 mt-2">
-                    {conversation.conversationDuration && (
-                      <div className="text-xs text-muted-foreground">
-                        <span className="font-medium">Conversation Duration:</span>{' '}
-                        {formatDuration(conversation.conversationDuration)}
-                      </div>
-                    )}
-                  </div>
+                  )}
+                  {total > 0 && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="mt-3 w-full flex items-center justify-center gap-1"
+                      onClick={() => {
+                        window.open(getSignozTracesExplorerUrl(conversationId as string), '_blank');
+                      }}
+                    >
+                      <ExternalLinkIcon className="h-3 w-3" />
+                      View in SigNoz
+                    </Button>
+                  )}
                 </>
-              ) : (
-                <div className="text-sm text-muted-foreground">Timing data not available</div>
-              )}
-            </div>
+              );
+            })()}
           </CardContent>
         </Card>
       </div>

package/src/components/traces/conversation-stats/conversation-list-item.tsx

@@ -86,14 +86,14 @@ export function ConversationListItem({ conversation, projectId }: ConversationLi
                 </TooltipContent>
               </Tooltip>
             )}
-            <Badge variant="code" className="text-xs">
-              {graphName ? `${graphName} (${graphId})` : graphId}
-            </Badge>
             {hasErrors && (
               <Badge variant="error" className="flex items-center gap-1">
                 {totalErrors} Error{totalErrors > 1 ? 's' : ''}
               </Badge>
             )}
+            <Badge variant="code" className="text-xs">
+              {graphName ? `${graphName} (${graphId})` : graphId}
+            </Badge>
           </div>
         </div>
       </div>

package/src/components/traces/signoz-link.tsx

@@ -137,14 +137,14 @@ interface SignozSpanLinkProps {
 export function SignozLink({ conversationId }: SignozLinkProps) {
   const { SIGNOZ_URL } = useRuntimeConfig();
   return (
-    <ExternalLink href={makeTracesUrl(SIGNOZ_URL, conversationId)}>View in SigNoz</ExternalLink>
+    <ExternalLink href={makeTracesUrl(SIGNOZ_URL, conversationId)}>View Conversation in SigNoz</ExternalLink>
   );
 }
 
 export function SignozSpanLink({ traceId, spanId }: SignozSpanLinkProps) {
   const { SIGNOZ_URL } = useRuntimeConfig();
   return (
-    <ExternalLink href={makeSpanUrl(SIGNOZ_URL, traceId, spanId)}>View in SigNoz</ExternalLink>
+    <ExternalLink href={makeSpanUrl(SIGNOZ_URL, traceId, spanId)}>View span in SigNoz</ExternalLink>
   );
 }
 

package/src/components/traces/timeline/render-panel-content.tsx

@@ -95,6 +95,66 @@ export function renderPanelContent({
                 </Bubble>
               </LabeledBlock>
             )}
+            {a.aiPromptMessages && (
+              <LabeledBlock label="Prompt messages">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.aiPromptMessages), null, 2);
+                    } catch {
+                      return a.aiPromptMessages;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
+            {a.aiResponseToolCalls && (
+              <LabeledBlock label="Tool calls">
+                <CodeBubble className="max-h-60 overflow-y-auto">
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.aiResponseToolCalls), null, 2);
+                    } catch {
+                      return a.aiResponseToolCalls;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
+                </CodeBubble>
+              </LabeledBlock>
+            )}
+            {/* Show error message if there's an error */}
+            {a.hasError && a.otelStatusDescription && (
+              <LabeledBlock label="Error">
+                <Bubble className="bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+                  {a.otelStatusDescription}
+                </Bubble>
+              </LabeledBlock>
+            )}
+            {a.hasError && a.otelStatusCode && (
+              <Info label="Status code" value={a.otelStatusCode} />
+            )}
+            <StatusBadge status={a.status} />
+            <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
+          </Section>
+          <Divider />
+          {SignozButton}
+          {AdvancedBlock}
+        </>
+      );
+
+    case 'agent_generation':
+      return (
+        <>
+          <Section>
+            {a.hasError && a.otelStatusDescription && (
+              <LabeledBlock label="Error">
+                <Bubble className="bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+                  {a.otelStatusDescription}
+                </Bubble>
+              </LabeledBlock>
+            )}
+            {a.hasError && a.otelStatusCode && (
+              <Info label="Status code" value={a.otelStatusCode} />
+            )}
             <StatusBadge status={a.status} />
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
@@ -231,14 +291,26 @@ export function renderPanelContent({
             {a.toolCallArgs && (
               <LabeledBlock label="Tool arguments">
                 <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${a.toolCallArgs}\n\`\`\``}</Streamdown>
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.toolCallArgs), null, 2);
+                    } catch {
+                      return a.toolCallArgs;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
                 </CodeBubble>
               </LabeledBlock>
             )}
             {a.toolCallResult && (
               <LabeledBlock label="Tool result">
                 <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${a.toolCallResult}\n\`\`\``}</Streamdown>
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.toolCallResult), null, 2);
+                    } catch {
+                      return a.toolCallResult;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
                 </CodeBubble>
               </LabeledBlock>
             )}
@@ -276,14 +348,26 @@ export function renderPanelContent({
             {a.toolCallArgs && (
               <LabeledBlock label="Tool arguments">
                 <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${a.toolCallArgs}\n\`\`\``}</Streamdown>
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.toolCallArgs), null, 2);
+                    } catch {
+                      return a.toolCallArgs;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
                 </CodeBubble>
               </LabeledBlock>
             )}
             {a.toolCallResult && (
               <LabeledBlock label="Tool result">
                 <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${a.toolCallResult}\n\`\`\``}</Streamdown>
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.toolCallResult), null, 2);
+                    } catch {
+                      return a.toolCallResult;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
                 </CodeBubble>
               </LabeledBlock>
             )}
@@ -322,14 +406,26 @@ export function renderPanelContent({
             {a.toolCallArgs && (
               <LabeledBlock label="Tool arguments">
                 <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${a.toolCallArgs}\n\`\`\``}</Streamdown>
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.toolCallArgs), null, 2);
+                    } catch {
+                      return a.toolCallArgs;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
                 </CodeBubble>
               </LabeledBlock>
             )}
             {a.toolCallResult && (
               <LabeledBlock label="Tool result">
                 <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${a.toolCallResult}\n\`\`\``}</Streamdown>
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.toolCallResult), null, 2);
+                    } catch {
+                      return a.toolCallResult;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
                 </CodeBubble>
               </LabeledBlock>
             )}
@@ -364,14 +460,26 @@ export function renderPanelContent({
             {a.toolCallArgs && (
               <LabeledBlock label="Tool arguments">
                 <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${a.toolCallArgs}\n\`\`\``}</Streamdown>
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.toolCallArgs), null, 2);
+                    } catch {
+                      return a.toolCallArgs;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
                 </CodeBubble>
               </LabeledBlock>
             )}
             {a.toolCallResult && (
               <LabeledBlock label="Tool result">
                 <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${a.toolCallResult}\n\`\`\``}</Streamdown>
+                  <Streamdown>{`\`\`\`json\n${(() => {
+                    try {
+                      return JSON.stringify(JSON.parse(a.toolCallResult), null, 2);
+                    } catch {
+                      return a.toolCallResult;
+                    }
+                  })()}\n\`\`\``}</Streamdown>
                 </CodeBubble>
               </LabeledBlock>
             )}

package/src/components/traces/timeline/timeline-item.tsx

@@ -1,9 +1,11 @@
 import {
+  AlertCircle,
   ArrowRight,
   ArrowUpRight,
   CheckCircle,
   ChevronDown,
   ChevronRight,
+  Cpu,
   Database,
   Hammer,
   Settings,
@@ -45,6 +47,7 @@ function statusIcon(
   const base: Record<string, { Icon: any; cls: string }> = {
     user_message: { Icon: User, cls: 'text-primary' },
     ai_generation: { Icon: Sparkles, cls: 'text-primary' },
+    agent_generation: { Icon: Cpu, cls: 'text-purple-500' },
     ai_assistant_message: { Icon: Sparkles, cls: 'text-primary' },
     ai_model_streamed_text: { Icon: Sparkles, cls: 'text-primary' },
     context_fetch: { Icon: Settings, cls: 'text-indigo-400' },
@@ -101,6 +104,12 @@ export function TimelineItem({
   const formattedDateTime = formatDateTime(activity.timestamp);
   const isoDateTime = new Date(activity.timestamp).toISOString();
 
+  // Determine text color based on status
+  const textColorClass =
+    activity.status === 'error'
+      ? 'text-red-500 hover:text-red-700'
+        : 'text-foreground hover:text-primary';
+
   return (
     <div className={`flex flex-col text-muted-foreground relative text-xs`}>
       <div className="flex items-start">
@@ -117,14 +126,14 @@ export function TimelineItem({
             <button
               type="button"
               onClick={onSelect}
-              className="flex items-center gap-1 group cursor-pointer hover:text-primary transition-colors text-foreground duration-200"
+              className={`flex items-center gap-1 group cursor-pointer transition-colors duration-200 ${textColorClass}`}
               title="Click to view details"
             >
               <span className="font-medium">
                 <Streamdown>{activity.description}</Streamdown>
               </span>
               <ArrowUpRight
-                className="h-4 w-4 text-muted-foreground group-hover:text-primary"
+                className={`h-4 w-4 transition-colors ${activity.status === 'error' ? 'text-red-700 group-hover:text-red-800' : 'text-muted-foreground group-hover:text-primary'}`}
                 aria-hidden="true"
               />
             </button>
@@ -382,6 +391,31 @@ export function TimelineItem({
             </div>
           )}
 
+          {/* OTEL status for failed agent.generate spans */}
+          {activity.type === ACTIVITY_TYPES.AI_GENERATION &&
+            activity.name === 'agent.generate' &&
+            activity.hasError &&
+            (activity.otelStatusCode || activity.otelStatusDescription) && (
+              <div className="mt-2">
+                <div className="flex items-start gap-2">
+                  <AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
+                  <div className="space-y-1.5 flex-1">
+                    {activity.otelStatusCode && (
+                      <div className="text-xs text-muted-foreground">
+                        <span className="font-medium">Status Code:</span>{' '}
+                        <span className="font-mono">{activity.otelStatusCode}</span>
+                      </div>
+                    )}
+                    {activity.otelStatusDescription && (
+                      <CodeBubble className="bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+                        {activity.otelStatusDescription}
+                      </CodeBubble>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+
           <time
             className="text-xs mb-2 inline-block text-gray-500 dark:text-white/50"
             dateTime={isoDateTime}

package/src/components/traces/timeline/timeline-wrapper.tsx

@@ -23,6 +23,8 @@ function panelTitle(selected: SelectedPanel) {
   switch (selected.type) {
     case 'ai_generation':
       return 'AI generation details';
+    case 'agent_generation':
+      return 'Agent generation details';
     case 'user_message':
       return 'User message details';
     case 'ai_assistant_message':