@inkeep/agents-manage-ui 0.1.0

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

@@ -0,0 +1,312 @@
+'use client';
+
+import { AlertCircle, ArrowLeft } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface ConversationErrorsProps {
+  conversationId: string;
+  onBack?: () => void;
+}
+
+interface MCPToolError {
+  spanId: string;
+  toolName: string;
+  error: string;
+  failureReason: string;
+  timestamp: string;
+}
+
+interface ConversationDetail {
+  conversationId: string;
+  totalErrors: number;
+  mcpToolErrors?: MCPToolError[];
+  contextErrors?: ContextError[];
+  agentGenerationErrors?: AgentGenerationError[];
+  executionIterationErrors?: ExecutionIterationError[];
+}
+
+interface ExecutionIterationError {
+  spanId: string;
+  error: string;
+  timestamp: string;
+}
+
+interface ContextError {
+  spanId: string;
+  timestamp: string;
+  statusDescription: string;
+}
+
+interface AgentGenerationError {
+  spanId: string;
+  timestamp: string;
+  statusDescription: string;
+}
+
+export function ConversationErrors({ conversationId, onBack }: ConversationErrorsProps) {
+  const [conversation, setConversation] = useState<ConversationDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchConversationDetail = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await fetch(`/api/signoz/conversations/${conversationId}`);
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch conversation details');
+        }
+
+        const data = await response.json();
+        setConversation(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (conversationId) {
+      fetchConversationDetail();
+    }
+  }, [conversationId]);
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-4 mb-6">
+          <Skeleton className="h-10 w-24" />
+          <Skeleton className="h-8 w-64" />
+        </div>
+        <Skeleton className="h-96" />
+      </div>
+    );
+  }
+
+  if (error || !conversation) {
+    return (
+      <Card className="shadow-none bg-background">
+        <CardHeader>
+          <CardTitle className="text-destructive">Error Loading Conversation Errors</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">{error || 'Conversation not found'}</p>
+          {onBack && (
+            <Button onClick={onBack} variant="outline" className="mt-4">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Conversation
+            </Button>
+          )}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <Card className="shadow-none bg-background">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              {onBack && (
+                <Button onClick={onBack} variant="ghost" size="sm" className="h-8 w-8 p-0">
+                  <ArrowLeft className="h-4 w-4" />
+                </Button>
+              )}
+              <div>
+                <CardTitle className="text-foreground text-lg">Conversation Errors</CardTitle>
+                <p className="text-sm text-muted-foreground mt-1">{conversationId}</p>
+              </div>
+            </div>
+            <Badge variant="destructive">{conversation.totalErrors} errors</Badge>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Errors List */}
+      <div className="space-y-4">
+        {/* MCP Tool Errors */}
+        {conversation.mcpToolErrors && conversation.mcpToolErrors.length > 0 && (
+          <>
+            <h3 className="text-md font-semibold text-foreground mt-6 mb-3">MCP Tool Errors</h3>
+            {conversation.mcpToolErrors.map((mcpError) => (
+              <Card
+                key={`mcp-${mcpError.spanId}`}
+                className="shadow-none bg-background border-l-4 border-l-red-500"
+              >
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-lg flex items-center gap-2">
+                      <AlertCircle className="h-5 w-5 text-red-500" />
+                      {mcpError.toolName}
+                    </CardTitle>
+                    <Badge variant="outline" className="font-mono text-xs">
+                      {mcpError.spanId}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div>
+                    <div className="text-sm font-medium text-foreground">Error Message</div>
+                    <div className="bg-destructive/10 dark:bg-destructive/20 border border-destructive/20 dark:border-destructive/30 rounded-lg p-3 mt-1">
+                      <p className="text-destructive dark:text-destructive text-sm leading-relaxed">
+                        {mcpError.error}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="text-sm font-medium text-foreground">Failure Reason</div>
+                    <div className="bg-orange-100 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-3 mt-1">
+                      <p className="text-orange-800 dark:text-orange-400 text-sm leading-relaxed">
+                        {mcpError.failureReason}
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </>
+        )}
+
+        {/* Context Errors */}
+        {conversation.contextErrors && conversation.contextErrors.length > 0 && (
+          <>
+            <h3 className="text-md font-semibold text-foreground mt-6 mb-3">
+              Context Resolution Errors
+            </h3>
+            {conversation.contextErrors.map((contextError) => (
+              <Card
+                key={`context-${contextError.spanId}`}
+                className="shadow-none bg-background border-l-4 border-l-red-500"
+              >
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-lg flex items-center gap-2">
+                      <AlertCircle className="h-5 w-5 text-red-500" />
+                      Context Resolution Failed
+                    </CardTitle>
+                    <Badge variant="outline" className="font-mono text-xs">
+                      {contextError.spanId}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div>
+                    <div className="text-sm font-medium text-foreground">Error Description</div>
+                    <div className="bg-destructive/10 dark:bg-destructive/20 border border-destructive/20 dark:border-destructive/30 rounded-lg p-3 mt-1">
+                      <p className="text-destructive dark:text-destructive text-sm leading-relaxed">
+                        {contextError.statusDescription}
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </>
+        )}
+
+        {/* Agent Generation Errors */}
+        {conversation.agentGenerationErrors && conversation.agentGenerationErrors.length > 0 && (
+          <>
+            <h3 className="text-md font-semibold text-foreground mt-6 mb-3">
+              Agent Generation Errors
+            </h3>
+            {conversation.agentGenerationErrors.map((agentError) => (
+              <Card
+                key={`agent-${agentError.spanId}`}
+                className="shadow-none bg-background border-l-4 border-l-red-500"
+              >
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-lg flex items-center gap-2">
+                      <AlertCircle className="h-5 w-5 text-red-500" />
+                      Agent Generation Failed
+                    </CardTitle>
+                    <Badge variant="outline" className="font-mono text-xs">
+                      {agentError.spanId}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div>
+                    <div className="text-sm font-medium text-foreground">Error Description</div>
+                    <div className="bg-destructive/10 dark:bg-destructive/20 border border-destructive/20 dark:border-destructive/30 rounded-lg p-3 mt-1">
+                      <p className="text-destructive dark:text-destructive text-sm leading-relaxed">
+                        {agentError.statusDescription}
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </>
+        )}
+
+        {/* Execution Iteration Errors */}
+        {conversation.executionIterationErrors &&
+          conversation.executionIterationErrors.length > 0 && (
+            <>
+              <h3 className="text-md font-semibold text-foreground mt-6 mb-3">
+                Execution Iteration Errors
+              </h3>
+              {conversation.executionIterationErrors.map((execError) => (
+                <Card
+                  key={`exec-${execError.spanId}`}
+                  className="shadow-none bg-background border-l-4 border-l-red-500"
+                >
+                  <CardHeader>
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-lg flex items-center gap-2">
+                        <AlertCircle className="h-5 w-5 text-red-500" />
+                        Maximum Execution Iterations Reached
+                      </CardTitle>
+                      <Badge variant="outline" className="font-mono text-xs">
+                        {execError.spanId}
+                      </Badge>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <div className="text-sm font-medium text-foreground">Error Message</div>
+                      <div className="bg-destructive/10 dark:bg-destructive/20 border border-destructive/20 dark:border-destructive/30 rounded-lg p-3 mt-1">
+                        <p className="text-destructive dark:text-destructive text-sm leading-relaxed">
+                          {execError.error}
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </>
+          )}
+
+        {/* No Errors Message */}
+        {(!conversation.mcpToolErrors || conversation.mcpToolErrors.length === 0) &&
+          (!conversation.contextErrors || conversation.contextErrors.length === 0) &&
+          (!conversation.agentGenerationErrors ||
+            conversation.agentGenerationErrors.length === 0) &&
+          (!conversation.executionIterationErrors ||
+            conversation.executionIterationErrors.length === 0) && (
+            <Card className="shadow-none bg-background">
+              <CardContent className="py-8 text-center">
+                <AlertCircle className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                <h3 className="text-lg font-medium text-foreground mb-2">No Errors Found</h3>
+                <p className="text-sm text-muted-foreground">
+                  No errors found for this conversation.
+                </p>
+              </CardContent>
+            </Card>
+          )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import type { ConversationStats } from '@/lib/api/signoz-stats';
+import { Badge } from '@/components/ui/badge';
+import Link from 'next/link';
+import { TooltipContent, Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
+import { formatDateAgo, formatDateTime } from '@/app/utils/format-date';
+
+interface ConversationListItemProps {
+  conversation: ConversationStats;
+  projectId: string;
+}
+
+export function ConversationListItem({ conversation, projectId }: ConversationListItemProps) {
+  const { conversationId, firstUserMessage, tenantId, graphId, graphName, hasErrors, totalErrors, toolsUsed, startTime } =
+    conversation;
+
+  return (
+    <Link
+      href={`/${tenantId}/projects/${projectId}/traces/conversations/${conversationId}`}
+      className="w-full hover:bg-muted/50 transition-colors py-4 px-6 border-border/50 not-last:border-b"
+    >
+      <div className="space-y-3">
+        <div className="flex items-center justify-between flex-wrap gap-2">
+          <div className="flex flex-col gap-1">
+            <div className="text-sm font-medium text-foreground">
+              {firstUserMessage || 'No user message'}
+            </div>
+
+            <div className="flex items-center gap-2 text-xs">
+              <code className="font-mono text-gray-500 dark:text-white/50">
+                {conversationId}
+              </code>
+              {startTime && (() => {
+                try {
+                  const date = new Date(startTime);
+                  // Check if the date is valid
+                  if (isNaN(date.getTime())) return null;
+                  
+                  const isoString = date.toISOString();
+                  return (
+                    <>
+                      <span className="text-gray-400 dark:text-white/40">•</span>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span className="text-gray-400 dark:text-white/40 cursor-help">
+                            {formatDateAgo(isoString)}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="text-xs">
+                            Started: {formatDateTime(isoString)}
+                          </p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </>
+                  );
+                } catch (error) {
+                  console.warn('Invalid startTime for conversation:', conversationId, startTime, error);
+                  return null;
+                }
+              })()}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {toolsUsed.length > 0 && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge variant="primary" className="text-xs">
+                    {toolsUsed.length} tool{toolsUsed.length > 1 ? 's' : ''} used
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="text-xs font-mono text-muted-foreground">
+                    {toolsUsed.map((tool) => tool.name).join(', ')}
+                  </p>
+                </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>
+            )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}

package/src/components/traces/conversation-stats/conversation-stats-card.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+import React from 'react';
+import { ChevronLeft, ChevronRight, MessageSquare, Search, X } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import type { ConversationStats } from '@/lib/api/signoz-stats';
+import EmptyState from '../../layout/empty-state';
+import { ConversationListItem } from './conversation-list-item';
+import { LoadingSkeleton } from './loading-skeleton';
+
+interface ConversationStatsCardProps {
+  stats: ConversationStats[];
+  loading: boolean;
+  error: string | null;
+  projectId: string;
+  selectedTimeRange?: string;
+  pagination?: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    nextPage: () => void;
+    previousPage: () => void;
+    goToPage: (page: number) => void;
+  };
+  searchQuery?: string;
+  onSearchChange?: (query: string) => void;
+}
+
+export function ConversationStatsCard({
+  stats,
+  loading,
+  error,
+  projectId,
+  selectedTimeRange,
+  pagination,
+  searchQuery = '',
+  onSearchChange,
+}: ConversationStatsCardProps) {
+  const [localQuery, setLocalQuery] = React.useState<string>(searchQuery);
+  const [searchError, setSearchError] = React.useState<string | null>(null);
+  const debounceTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  React.useEffect(() => {
+    setLocalQuery(searchQuery);
+  }, [searchQuery]);
+
+  const debouncedSearch = React.useCallback(
+    (query: string) => {
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+      debounceTimer.current = setTimeout(() => {
+        try {
+          onSearchChange?.(query);
+          setSearchError(null);
+        } catch (error) {
+          console.error('Search failed:', error);
+          setSearchError('Search failed. Please try again.');
+        }
+      }, 300);
+    },
+    [onSearchChange]
+  );
+
+  React.useEffect(() => {
+    return () => {
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    };
+  }, []);
+
+  const clearSearch = () => {
+    setLocalQuery('');
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    try {
+      onSearchChange?.('');
+      setSearchError(null);
+    } catch (error) {
+      console.error('Search failed:', error);
+      setSearchError('Search failed. Please try again.');
+    }
+  };
+
+  if (error) {
+    return (
+      <Card className="shadow-none bg-background">
+        <CardContent className="flex items-center justify-center py-8">
+          <div className="text-center">
+            <MessageSquare className="h-8 w-8 text-red-500 mx-auto mb-2" />
+            <p className="text-sm text-muted-foreground">Failed to load conversation stats</p>
+            <p className="text-xs text-muted-foreground/60 mt-1">{error}</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="shadow-none bg-background mt-8 pb-4">
+      <CardHeader>
+        <div className="flex items-center justify-between gap-4">
+          <CardTitle className="flex font-medium items-center gap-4 text-foreground">
+            <div className="flex items-center gap-2">
+              <MessageSquare className="h-4 w-4 text-gray-400 dark:text-white/40" />
+              Recent Conversations
+            </div>
+
+            <Badge variant="code" className="text-xs">
+              {pagination?.total || stats.length}
+            </Badge>
+          </CardTitle>
+
+          <div className="relative flex-1 max-w-md">
+            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-white/40" />
+            <Input
+              placeholder="Search conversations..."
+              value={localQuery}
+              onChange={(e) => {
+                const v = e.target.value;
+                setLocalQuery(v);
+                debouncedSearch(v);
+              }}
+              className="pl-8 pr-8"
+            />
+            {localQuery && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={clearSearch}
+                className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0 hover:bg-accent"
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            )}
+            {searchError && (
+              <p className="absolute left-0 -bottom-5 text-xs text-red-500">{searchError}</p>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="px-0">
+        {loading ? (
+          <div className="space-y-6">
+            {[...Array(3)].map((_, i) => (
+              <LoadingSkeleton key={i} />
+            ))}
+          </div>
+        ) : stats.length > 0 ? (
+          <div className="flex flex-col">
+            {stats.map((conversation) => (
+              <ConversationListItem
+                key={conversation.conversationId}
+                conversation={conversation}
+                projectId={projectId}
+              />
+            ))}
+          </div>
+        ) : (
+          <EmptyState
+            title={
+              localQuery
+                ? 'No conversations found'
+                : selectedTimeRange === '24h'
+                  ? 'No conversation statistics found.'
+                  : `No data for ${selectedTimeRange === '7d' ? '7 days' : selectedTimeRange === '15d' ? '15 days' : 'this time range'}`
+            }
+            description={
+              localQuery
+                ? `No conversations match "${localQuery}". Try a different search term.`
+                : selectedTimeRange === '24h'
+                  ? 'Tool calls will appear here when conversations use tools.'
+                  : `Try selecting a shorter time range (like 24 hours) as data may only be retained for a few days.`
+            }
+          />
+        )}
+
+        {/* Pagination Controls */}
+        {pagination && pagination.totalPages > 1 && !searchQuery && (
+          <div className="flex items-center justify-between pt-4 px-6 border-t border-border">
+            <div className="text-sm text-muted-foreground">
+              Page {pagination.page} of {pagination.totalPages}
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={pagination.previousPage}
+                disabled={!pagination.hasPreviousPage}
+                className="h-8 w-8 p-0 relative"
+              >
+                <ChevronLeft className="h-4 w-4" />
+                <span className="sr-only">Previous page</span>
+              </Button>
+
+              {/* Page numbers */}
+              <div className="flex items-center gap-1">
+                {Array.from({ length: Math.min(5, pagination.totalPages) }, (_, i) => {
+                  let pageNum: number;
+                  if (pagination.totalPages <= 5) {
+                    pageNum = i + 1;
+                  } else if (pagination.page <= 3) {
+                    pageNum = i + 1;
+                  } else if (pagination.page >= pagination.totalPages - 2) {
+                    pageNum = pagination.totalPages - 4 + i;
+                  } else {
+                    pageNum = pagination.page - 2 + i;
+                  }
+
+                  return (
+                    <Button
+                      key={pageNum}
+                      variant={pageNum === pagination.page ? 'outline-primary' : 'ghost'}
+                      size="sm"
+                      onClick={() => pagination.goToPage(pageNum)}
+                      className="h-8 w-8 p-0 font-mono"
+                    >
+                      {pageNum}
+                    </Button>
+                  );
+                })}
+              </div>
+
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={pagination.nextPage}
+                disabled={!pagination.hasNextPage}
+                className="h-8 w-8 p-0 relative"
+              >
+                <ChevronRight className="h-4 w-4" />
+                <span className="sr-only">Next page</span>
+              </Button>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/traces/conversation-stats/loading-skeleton.tsx

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+
+interface LoadingSkeletonProps {
+  className?: string;
+}
+
+export function LoadingSkeleton({ className }: LoadingSkeletonProps) {
+  return (
+    <div className={cn('flex items-start justify-between p-4 border-b', className)}>
+      {/* Left section */}
+      <div className="space-y-2">
+        {/* Title skeleton */}
+        <div className="h-5 w-24 bg-muted animate-pulse rounded" />
+        {/* ID/Hash skeleton */}
+        <div className="h-4 w-48 bg-muted animate-pulse rounded" />
+      </div>
+
+      {/* Right section */}
+      <div className="flex items-center gap-3">
+        {/* Tool used badge skeleton */}
+        <div className="h-6 w-20 bg-muted animate-pulse rounded-full" />
+
+        {/* Service name skeleton */}
+        <div className="h-6 w-32 bg-muted animate-pulse rounded-full" />
+
+        {/* Error badge skeleton */}
+        <div className="h-6 w-16 bg-muted animate-pulse rounded-full" />
+      </div>
+    </div>
+  );
+}