@inkeep/agents-manage-ui 0.11.1 → 0.11.3

package/src/app/api/signoz/conversations/[conversationId]/route.ts

@@ -356,9 +356,8 @@ function buildConversationListPayload(
           ]
         ),
 
-        // error categories
-        contextErrors: listQuery(
-          QUERY_EXPRESSIONS.CONTEXT_ERRORS,
+        agentGenerations: listQuery(
+          QUERY_EXPRESSIONS.AGENT_GENERATIONS,
           [
             {
               key: {
@@ -366,15 +365,7 @@ function buildConversationListPayload(
                 ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
               },
               op: OPERATORS.EQUALS,
-              value: SPAN_NAMES.CONTEXT_HANDLE,
-            },
-            {
-              key: {
-                key: SPAN_KEYS.HAS_ERROR,
-                ...QUERY_FIELD_CONFIGS.BOOL_TAG_COLUMN,
-              },
-              op: OPERATORS.EQUALS,
-              value: true,
+              value: SPAN_NAMES.AGENT_GENERATION,
             },
           ],
           [
@@ -386,6 +377,10 @@ function buildConversationListPayload(
               key: SPAN_KEYS.TIMESTAMP,
               ...QUERY_FIELD_CONFIGS.INT64_TAG_COLUMN,
             },
+            {
+              key: SPAN_KEYS.HAS_ERROR,
+              ...QUERY_FIELD_CONFIGS.BOOL_TAG_COLUMN,
+            },
             {
               key: SPAN_KEYS.STATUS_MESSAGE,
               ...QUERY_FIELD_CONFIGS.STRING_TAG,
@@ -396,17 +391,11 @@ function buildConversationListPayload(
             },
           ]
         ),
-        agentGenerationErrors: listQuery(
-          QUERY_EXPRESSIONS.AGENT_GENERATION_ERRORS,
+
+        // Count spans with errors
+        spansWithErrors: listQuery(
+          QUERY_EXPRESSIONS.SPANS_WITH_ERRORS,
           [
-            {
-              key: {
-                key: SPAN_KEYS.NAME,
-                ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
-              },
-              op: OPERATORS.EQUALS,
-              value: SPAN_NAMES.AGENT_GENERATION,
-            },
             {
               key: {
                 key: SPAN_KEYS.HAS_ERROR,
@@ -422,16 +411,8 @@ function buildConversationListPayload(
               ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
             },
             {
-              key: SPAN_KEYS.TIMESTAMP,
-              ...QUERY_FIELD_CONFIGS.INT64_TAG_COLUMN,
-            },
-            {
-              key: SPAN_KEYS.STATUS_MESSAGE,
-              ...QUERY_FIELD_CONFIGS.STRING_TAG,
-            },
-            {
-              key: SPAN_KEYS.OTEL_STATUS_DESCRIPTION,
-              ...QUERY_FIELD_CONFIGS.STRING_TAG,
+              key: SPAN_KEYS.NAME,
+              ...QUERY_FIELD_CONFIGS.STRING_TAG_COLUMN,
             },
           ]
         ),
@@ -587,6 +568,14 @@ function buildConversationListPayload(
               key: SPAN_KEYS.AI_RESPONSE_TEXT,
               ...QUERY_FIELD_CONFIGS.STRING_TAG,
             },
+            {
+              key: SPAN_KEYS.AI_RESPONSE_TOOL_CALLS,
+              ...QUERY_FIELD_CONFIGS.STRING_TAG,
+            },
+            {
+              key: SPAN_KEYS.AI_PROMPT_MESSAGES,
+              ...QUERY_FIELD_CONFIGS.STRING_TAG,
+            },
           ]
         ),
 
@@ -750,8 +739,8 @@ export async function GET(
     const toolCallSpans = parseList(resp, QUERY_EXPRESSIONS.TOOL_CALLS);
     const contextResolutionSpans = parseList(resp, QUERY_EXPRESSIONS.CONTEXT_RESOLUTION);
     const contextHandleSpans = parseList(resp, QUERY_EXPRESSIONS.CONTEXT_HANDLE);
-    const contextErrorSpans = parseList(resp, QUERY_EXPRESSIONS.CONTEXT_ERRORS);
-    const agentGenErrorSpans = parseList(resp, QUERY_EXPRESSIONS.AGENT_GENERATION_ERRORS);
+    const agentGenerationSpans = parseList(resp, QUERY_EXPRESSIONS.AGENT_GENERATIONS);
+    const spansWithErrorsList = parseList(resp, QUERY_EXPRESSIONS.SPANS_WITH_ERRORS);
     const userMessageSpans = parseList(resp, QUERY_EXPRESSIONS.USER_MESSAGES);
     const aiAssistantSpans = parseList(resp, QUERY_EXPRESSIONS.AI_ASSISTANT_MESSAGES);
     const aiGenerationSpans = parseList(resp, QUERY_EXPRESSIONS.AI_GENERATIONS);
@@ -759,6 +748,33 @@ export async function GET(
     const contextFetcherSpans = parseList(resp, QUERY_EXPRESSIONS.CONTEXT_FETCHERS);
     const durationSpans = parseList(resp, QUERY_EXPRESSIONS.DURATION_SPANS);
 
+    // Categorize spans with errors into critical errors vs warnings
+    const CRITICAL_ERROR_SPAN_NAMES = [
+      'execution_handler.execute',
+      'agent.load_tools',
+      'context.handle_context_resolution',
+      'context.resolve',
+      'agent.generate',
+      'context-resolver.resolve_single_fetch_definition',
+      'graph_session.generate_structured_update',
+      'graph_session.process_artifact',
+      'graph_session.generate_artifact_metadata',
+      'response.format_object_response',
+      'response.format_response',
+    ];
+
+    let errorCount = 0;
+    let warningCount = 0;
+
+    for (const span of spansWithErrorsList) {
+      const spanName = getString(span, SPAN_KEYS.NAME, '');
+      if (CRITICAL_ERROR_SPAN_NAMES.includes(spanName)) {
+        errorCount++;
+      } else {
+        warningCount++;
+      }
+    }
+
     let graphId: string | null = null;
     let graphName: string | null = null;
     for (const s of userMessageSpans) {
@@ -772,6 +788,7 @@ export async function GET(
       type:
         | 'tool_call'
         | 'ai_generation'
+        | 'agent_generation'
         | 'context_fetch'
         | 'context_resolution'
         | 'user_message'
@@ -815,6 +832,9 @@ export async function GET(
       aiStreamTextContent?: string;
       aiStreamTextModel?: string;
       aiStreamTextOperationId?: string;
+      // ai generation specifics
+      aiResponseToolCalls?: string;
+      aiPromptMessages?: string;
       // save_tool_result specifics
       saveResultSaved?: boolean;
       saveArtifactType?: string;
@@ -828,6 +848,9 @@ export async function GET(
       saveFacts?: string;
       saveToolArgs?: Record<string, any>;
       saveFullResult?: Record<string, any>;
+      hasError?: boolean;
+      otelStatusCode?: string;
+      otelStatusDescription?: string;
     };
 
     const activities: Activity[] = [];
@@ -983,24 +1006,6 @@ export async function GET(
       });
     }
 
-    const contextErrors = contextErrorSpans.map((s) => ({
-      spanId: getString(s, SPAN_KEYS.SPAN_ID, ''),
-      timestamp: s.timestamp,
-      statusDescription:
-        getString(s, SPAN_KEYS.STATUS_MESSAGE) ||
-        getString(s, SPAN_KEYS.OTEL_STATUS_DESCRIPTION, '') ||
-        'No description available',
-    }));
-    const agentGenerationErrors = agentGenErrorSpans.map((s) => ({
-      spanId: getString(s, SPAN_KEYS.SPAN_ID, ''),
-      timestamp: s.timestamp,
-      statusDescription:
-        getString(s, SPAN_KEYS.STATUS_MESSAGE) ||
-        getString(s, SPAN_KEYS.OTEL_STATUS_DESCRIPTION, '') ||
-        'No description available',
-    }));
-    const errorCount = contextErrors.length + agentGenerationErrors.length;
-
     // user messages
     for (const span of userMessageSpans) {
       const hasError = getField(span, SPAN_KEYS.HAS_ERROR) === true;
@@ -1046,6 +1051,11 @@ export async function GET(
     for (const span of aiGenerationSpans) {
       const hasError = getField(span, SPAN_KEYS.HAS_ERROR) === true;
       const durMs = getNumber(span, SPAN_KEYS.DURATION_NANO) / 1e6;
+      
+      // Extract ai.response.toolCalls and ai.prompt.messages for ai.generateText.doGenerate spans
+      const aiResponseToolCalls = getString(span, SPAN_KEYS.AI_RESPONSE_TOOL_CALLS, '');
+      const aiPromptMessages = getString(span, SPAN_KEYS.AI_PROMPT_MESSAGES, '');
+      
       activities.push({
         id: getString(span, SPAN_KEYS.SPAN_ID, ''),
         type: ACTIVITY_TYPES.AI_GENERATION,
@@ -1062,6 +1072,32 @@ export async function GET(
         inputTokens: getNumber(span, SPAN_KEYS.GEN_AI_USAGE_INPUT_TOKENS, 0),
         outputTokens: getNumber(span, SPAN_KEYS.GEN_AI_USAGE_OUTPUT_TOKENS, 0),
         aiResponseText: getString(span, SPAN_KEYS.AI_RESPONSE_TEXT, '') || undefined,
+        aiResponseToolCalls: aiResponseToolCalls || undefined,
+        aiPromptMessages: aiPromptMessages || undefined,
+      });
+    }
+
+    for (const span of agentGenerationSpans) {
+      const hasError = getField(span, SPAN_KEYS.HAS_ERROR) === true;
+      const statusMessage =
+        getString(span, SPAN_KEYS.STATUS_MESSAGE) ||
+        getString(span, SPAN_KEYS.OTEL_STATUS_DESCRIPTION, '');
+      const otelStatusCode = getString(span, SPAN_KEYS.OTEL_STATUS_CODE, '');
+      const otelStatusDescription = getString(span, SPAN_KEYS.OTEL_STATUS_DESCRIPTION, '');
+
+      activities.push({
+        id: getString(span, SPAN_KEYS.SPAN_ID, ''),
+        type: ACTIVITY_TYPES.AGENT_GENERATION,
+        name: 'agent.generate',
+        description: hasError ? 'Agent generation failed' : 'Agent generation',
+        timestamp: span.timestamp,
+        status: hasError ? ACTIVITY_STATUS.ERROR : ACTIVITY_STATUS.SUCCESS,
+        result: hasError
+          ? statusMessage || 'Agent generation failed'
+          : 'Agent generation completed',
+        hasError,
+        otelStatusCode: hasError ? otelStatusCode : undefined,
+        otelStatusDescription: hasError ? otelStatusDescription || statusMessage : undefined,
       });
     }
 
@@ -1192,7 +1228,7 @@ export async function GET(
         return count;
       })(),
       totalToolCalls: activities.filter((a) => a.type === ACTIVITY_TYPES.TOOL_CALL).length,
-      totalErrors: errorCount,
+      totalErrors: 0,
       totalOpenAICalls: openAICallsCount,
     };
 
@@ -1215,11 +1251,12 @@ export async function GET(
       totalInputTokens,
       totalOutputTokens,
       mcpToolErrors: [],
-      contextErrors,
-      agentGenerationErrors,
       graphId,
       graphName,
       allSpanAttributes,
+      spansWithErrorsCount: spansWithErrorsList.length,
+      errorCount,
+      warningCount,
     });
   } catch (error) {
     const logger = getLogger('conversation-details');

package/src/components/graph/nodes/mcp-node.tsx

@@ -8,6 +8,8 @@ import { type MCPNodeData, mcpNodeHandleId } from '../configuration/node-types';
 import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
 import { Handle } from './handle';
 
+const TOOLS_SHOWN_LIMIT = 4;
+
 export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
   const { data, selected } = props;
   const toolLookup = useGraphStore((state) => state.toolLookup);
@@ -32,10 +34,14 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
   const getToolDisplay = () => {
     if (selectedTools === null) {
       // All tools selected
-      return {
-        toolBadges: [(activeTools?.length ?? 0).toString()],
-        additionalBadge: null,
-      };
+      const toolsToShow = (activeTools?.slice(0, TOOLS_SHOWN_LIMIT) || []).map((tool) => tool.name);
+      const remainingCount = (activeTools?.length ?? 0) - TOOLS_SHOWN_LIMIT;
+      const toolBadges = [...toolsToShow];
+      if (remainingCount > 0) {
+        toolBadges.push(`+${remainingCount} (ALL)`);
+      }
+
+      return toolBadges;
     }
 
     const selectedCount = selectedTools.length;
@@ -43,41 +49,35 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
 
     // If no tools selected, show 0
     if (selectedCount === 0) {
-      return {
-        toolBadges: ['0'],
-        additionalBadge: null,
-      };
+      return ['0'];
     }
 
     // If all tools are selected, show total count
     if (selectedCount === totalCount) {
-      return {
-        toolBadges: [totalCount.toString()],
-        additionalBadge: null,
-      };
+      const toolsToShow = selectedTools.slice(0, TOOLS_SHOWN_LIMIT);
+      const remainingCount = selectedCount - TOOLS_SHOWN_LIMIT;
+      const toolBadges = [...toolsToShow];
+      if (remainingCount > 0) {
+        toolBadges.push(`+${remainingCount} (ALL)`);
+      }
+      return toolBadges;
     }
 
-    // If 2 or fewer tools selected, show each tool name as separate badge
-    if (selectedCount <= 2) {
-      return {
-        toolBadges: selectedTools,
-        additionalBadge: null,
-      };
+    // If TOOLS_SHOWN_LIMIT or fewer tools selected, show each tool name as separate badge
+    if (selectedCount <= TOOLS_SHOWN_LIMIT) {
+      return selectedTools;
     }
 
-    // Show first 2 tool names as separate badges, remaining count in additional badge
-    const firstTwoTools = selectedTools.slice(0, 2);
-    const remainingCount = selectedCount - 2;
-    return {
-      toolBadges: firstTwoTools,
-      additionalBadge: `+${remainingCount}`,
-    };
+    // Show first TOOLS_SHOWN_LIMIT tool names as separate badges, remaining count in additional badge
+    const toolsToShow = selectedTools.slice(0, TOOLS_SHOWN_LIMIT);
+    const remainingCount = selectedCount - TOOLS_SHOWN_LIMIT;
+    return [...toolsToShow, `+${remainingCount}`];
   };
 
-  const toolDisplay = getToolDisplay();
+  const toolBadges = getToolDisplay();
 
   return (
-    <BaseNode isSelected={selected} className="rounded-full min-w-40 min-h-13 max-w-3xs">
+    <BaseNode isSelected={selected} className="rounded-4xl min-w-40 min-h-13 max-w-3xs">
       <BaseNodeHeader className="mb-0 py-3">
         <div className="flex items-center flex-wrap gap-1">
           <div className="flex items-center gap-2 flex-shrink-0 mr-4">
@@ -90,23 +90,17 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
             />
             <BaseNodeHeaderTitle className="flex-shrink-0">{name}</BaseNodeHeaderTitle>
           </div>
-          {toolDisplay.toolBadges.map((toolName, index) => (
-            <Badge
-              key={index}
-              variant="code"
-              className="px-2 text-2xs text-gray-700 dark:text-gray-300 flex-shrink-0"
-            >
-              {toolName}
-            </Badge>
-          ))}
-          {toolDisplay.additionalBadge && (
-            <Badge
-              variant="code"
-              className="px-2 text-2xs text-gray-700 dark:text-gray-300 flex-shrink-0"
-            >
-              {toolDisplay.additionalBadge}
-            </Badge>
-          )}
+          <div className="flex items-center flex-wrap gap-1">
+            {toolBadges.map((label, index) => (
+              <Badge
+                key={index}
+                variant="code"
+                className="px-2 text-2xs text-gray-700 dark:text-gray-300 flex-shrink-0"
+              >
+                {label}
+              </Badge>
+            ))}
+          </div>
         </div>
       </BaseNodeHeader>
       <Handle id={mcpNodeHandleId} type="target" position={Position.Top} isConnectable />

package/src/components/graph/nodes/mcp-placeholder-node.tsx

@@ -12,7 +12,7 @@ export function MCPPlaceholderNode(props: NodeProps & { data: MCPPlaceholderNode
   return (
     <BaseNode
       isSelected={selected}
-      className={`rounded-full border-dashed min-w-40 min-h-13 flex items-center justify-center max-w-3xs ${selected ? 'outline-dashed outline-2 outline-gray-700 hover:outline-gray-700 ring-0 hover:ring-0' : ''}`}
+      className={`rounded-4xl border-dashed min-w-40 min-h-13 flex items-center justify-center max-w-3xs ${selected ? 'outline-dashed outline-2 outline-gray-700 hover:outline-gray-700 ring-0 hover:ring-0' : ''}`}
     >
       <BaseNodeHeader className="mb-0 py-3">
         <Hammer className="size-4 text-muted-foreground/65" />

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>
   );
 }