@inkeep/agents-manage-ui 0.1.0

package/src/components/traces/charts/chart-card.tsx

@@ -0,0 +1,98 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import type { LucideIcon } from 'lucide-react';
+import { ArrowUpRight, Info } from 'lucide-react';
+import { ChartError } from './chart-error';
+import { Button } from '@/components/ui/button';
+import { ErrorBoundary } from 'react-error-boundary';
+
+export interface ChartCardProps {
+  className?: string;
+  title?: string | React.ReactNode;
+  titleClassName?: string;
+  Icon?: LucideIcon;
+  description?: string | React.ReactNode;
+  tooltip?: string | React.ReactNode;
+  children: React.ReactNode;
+  footer?: string | React.ReactNode;
+  hasError?: boolean;
+  onClick?: () => void;
+}
+
+export function ChartCard({
+  className,
+  title,
+  titleClassName,
+  Icon,
+  description,
+  tooltip,
+  children,
+  footer,
+  hasError,
+  onClick,
+}: ChartCardProps) {
+  return (
+    <Card
+      className={cn(
+        'flex flex-col h-full p-6 gap-4 shadow-none border-none bg-sidebar dark:bg-card',
+        className
+      )}
+    >
+      <CardHeader className="p-0 pb-2">
+        <CardTitle
+          className={cn(
+            'text-md font-medium text-gray-700 dark:text-white/70 flex items-center justify-between gap-2 flex-wrap',
+            titleClassName
+          )}
+        >
+          <div className="flex items-center gap-2">
+            {Icon && <Icon className="w-4 h-4 text-gray-400 dark:text-white/40" />}
+            {title}
+          </div>
+          {tooltip && (
+            <TooltipProvider>
+              <Tooltip delayDuration={0}>
+                <TooltipTrigger>
+                  <Info className="w-4 h-4 text-gray-300 dark:text-white/300" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="text-sm text-gray-600 dark:text-white/60">{tooltip}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+          {onClick && (
+            <Button
+              className="text-primary dark:text-primary hover:text-primary/80 hover:bg-transparent dark:hover:bg-transparent text-xs h-auto"
+              variant="ghost"
+              size="sm"
+              onClick={onClick}
+            >
+              View Details
+              <ArrowUpRight className="w-4 h-4" />
+            </Button>
+          )}
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      {hasError ? (
+        <CardContent className="flex-1 p-0 min-h-0">
+          <ChartError />
+        </CardContent>
+      ) : (
+        <ErrorBoundary fallback={<ChartError />}>
+          <CardContent className="p-0 flex-1 min-h-0 gap-2">{children}</CardContent>
+        </ErrorBoundary>
+      )}
+      {footer && <CardFooter className="p-0">{footer}</CardFooter>}
+    </Card>
+  );
+}

package/src/components/traces/charts/chart-error.tsx

@@ -0,0 +1,7 @@
+export function ChartError() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full">
+      <p className="text-md text-gray-500">Something went wrong.</p>
+    </div>
+  );
+}

package/src/components/traces/charts/chart-no-results.tsx

@@ -0,0 +1,7 @@
+export function ChartNoResults() {
+  return (
+    <div className="text-center flex flex-col items-center justify-center text-gray-500 min-h-0 h-full">
+      No results.
+    </div>
+  );
+}

package/src/components/traces/charts/stat-card.tsx

@@ -0,0 +1,45 @@
+import { ChartCard, type ChartCardProps } from './chart-card';
+import { Stat, type StatProps } from './stat';
+
+type StatCardProps = StatProps &
+  Pick<
+    ChartCardProps,
+    | 'title'
+    | 'description'
+    | 'footer'
+    | 'hasError'
+    | 'Icon'
+    | 'tooltip'
+    | 'titleClassName'
+    | 'className'
+    | 'onClick'
+  >;
+
+export function StatCard({
+  title,
+  Icon,
+  description,
+  footer,
+  hasError,
+  tooltip,
+  titleClassName,
+  className,
+  onClick,
+  ...props
+}: StatCardProps) {
+  return (
+    <ChartCard
+      className={className}
+      description={description}
+      footer={footer}
+      hasError={hasError}
+      Icon={Icon}
+      title={title}
+      titleClassName={titleClassName}
+      tooltip={tooltip}
+      onClick={onClick}
+    >
+      <Stat {...props} />
+    </ChartCard>
+  );
+}

package/src/components/traces/charts/stat.tsx

@@ -0,0 +1,36 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import { cn } from '@/lib/utils';
+
+export interface StatProps {
+  stat?: number | null;
+  statDescription?: string;
+  isLoading?: boolean;
+  unit?: string;
+}
+
+export function Stat({ stat, statDescription, isLoading, unit }: StatProps) {
+  const formattedStat =
+    stat !== null && stat !== undefined ? new Intl.NumberFormat().format(stat) : 'N/A';
+
+  return (
+    <div className="flex flex-col gap-2 h-full justify-end">
+      {isLoading && !stat ? (
+        <Skeleton className="h-12 w-full" />
+      ) : (
+        <div
+          className={cn(
+            'text-3xl xl:text-4xl font-mono font-bold text-foreground',
+            isLoading ? 'opacity-50' : ''
+          )}
+        >
+          {formattedStat} {unit}
+        </div>
+      )}
+      <div className="flex flex-wrap gap-2 items-center justify-between">
+        {statDescription && (
+          <div className="flex-1 text-sm text-muted-foreground">{statDescription}</div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,275 @@
+'use client';
+
+import { Activity, ArrowLeft, MessageSquare, TriangleAlert } 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';
+import type {
+  ActivityItem,
+  ConversationDetail as ConversationDetailType,
+} from '@/components/traces/timeline/types';
+import { formatDateTime } from '@/app/utils/format-date';
+import { ConversationErrors } from './conversation-errors';
+import { SignozLink } from './signoz-link';
+import { formatDuration } from '@/app/utils/format-date';
+import { InfoRow } from './timeline/blocks';
+import { TimelineWrapper } from './timeline/timeline-wrapper';
+import { ResizablePanelGroup } from '@/components/ui/resizable';
+
+interface ConversationDetailProps {
+  conversationId: string;
+  onBack?: () => void;
+}
+
+export function ConversationDetail({ conversationId, onBack }: ConversationDetailProps) {
+  const [conversation, setConversation] = useState<ConversationDetailType | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showErrorsPage, setShowErrorsPage] = useState(false);
+
+  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();
+        if (typeof data.totalErrors === 'undefined') data.totalErrors = 0;
+        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>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {[1, 2, 3, 4].map((i) => (
+            <Skeleton key={i} className="h-32" />
+          ))}
+        </div>
+        <Skeleton className="h-96" />
+      </div>
+    );
+  }
+
+  if (error || !conversation) {
+    return (
+      <Card className="shadow-none bg-background">
+        <CardHeader>
+          <CardTitle className="text-destructive">Error Loading Conversation</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 Overview
+            </Button>
+          )}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (showErrorsPage) {
+    return (
+      <ConversationErrors conversationId={conversationId} onBack={() => setShowErrorsPage(false)} />
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8 flex-shrink-0">
+        <div className="flex items-center gap-2">
+          {onBack && (
+            <Button onClick={onBack} variant="ghost" size="icon-sm">
+              <ArrowLeft className="h-4 w-4" />
+              <span className="sr-only">Back</span>
+            </Button>
+          )}
+          <div className="flex items-center gap-2">
+            <h3 className="text-xl font-light">Conversation Details</h3>
+            <Badge variant="code" className="text-xs">
+              {conversationId}
+            </Badge>
+            {(conversation.graphId || conversation.graphName) && (
+              <Badge variant="code" className="text-xs">
+                Graph: {conversation.graphName ? `${conversation.graphName} (${conversation.graphId})` : conversation.graphId}
+              </Badge>
+            )}
+          </div>
+        </div>
+        <SignozLink conversationId={conversationId} />
+      </div>
+
+      {/* Summary Cards */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 mb-4 flex-shrink-0">
+        {/* Errors */}
+        <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);
+          }}
+        >
+          <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" />
+          </CardHeader>
+          <CardContent>
+            <div
+              className={`text-2xl font-bold ${conversation.totalErrors > 0 ? 'text-red-600' : 'text-green-600'}`}
+            >
+              {conversation.totalErrors}
+            </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>
+
+        {/* AI Calls summary grouped by model */}
+        <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">AI Calls</CardTitle>
+            <MessageSquare className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            {(() => {
+              const ai = conversation?.activities?.filter(
+                (a: ActivityItem) =>
+                  a.type === 'ai_generation' || a.type === 'ai_model_streamed_text'
+              ) as ActivityItem[];
+              const models: Record<
+                string,
+                { inputTokens: number; outputTokens: number; count: number }
+              > = {};
+              ai.forEach((a: ActivityItem) => {
+                const model = a.aiModel || a.aiStreamTextModel || 'Unknown Model';
+                models[model] ||= { inputTokens: 0, outputTokens: 0, count: 0 };
+                models[model].inputTokens += a.inputTokens || 0;
+                models[model].outputTokens += a.outputTokens || 0;
+                models[model].count += 1;
+              });
+              const entries = Object.entries(models);
+              return (
+                <div className="space-y-3">
+                  {entries.length ? (
+                    entries.map(([model, data]) => (
+                      <div key={model} className="border border-border rounded-lg p-3">
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-sm font-medium text-foreground">{model}</span>
+                          <span className="text-xs text-muted-foreground">{data.count} calls</span>
+                        </div>
+                        <div className="space-y-1">
+                          <InfoRow
+                            label="Total Input Tokens"
+                            value={data.inputTokens.toLocaleString()}
+                          />
+                          <InfoRow
+                            label="Total Output Tokens"
+                            value={data.outputTokens.toLocaleString()}
+                          />
+                        </div>
+                      </div>
+                    ))
+                  ) : (
+                    <div className="text-center">
+                      <div className="text-2xl font-bold text-muted-foreground mb-1">0</div>
+                      <p className="text-xs text-muted-foreground">No AI calls found</p>
+                    </div>
+                  )}
+                </div>
+              );
+            })()}
+          </CardContent>
+        </Card>
+
+        {/* Duration */}
+        <Card
+          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">Duration</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <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>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Timeline Panel - Takes remaining height */}
+      <div className="flex-1 min-h-0">
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="h-full border rounded-xl bg-background"
+        >
+          <TimelineWrapper conversation={conversation} />
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  );
+}