feat: LangChain auto-instrumentation + dashboard UI
- LangChain: AgentLensCallbackHandler with auto-span creation for LLM calls, tool calls, chains, and agent decision logging - Dashboard: trace list with search, status filters, pagination - Dashboard: trace detail with Decision/Span/Event tabs - Dashboard: sidebar layout, responsive design, dark theme
This commit is contained in:
Vectry
535
apps/web/src/components/trace-detail.tsx
Normal file
535
apps/web/src/components/trace-detail.tsx
Normal file
@@ -0,0 +1,535 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Activity,
|
||||
Clock,
|
||||
Calendar,
|
||||
GitBranch,
|
||||
Layers,
|
||||
Zap,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
FileJson,
|
||||
DollarSign,
|
||||
AlertCircle,
|
||||
Terminal,
|
||||
} from "lucide-react";
|
||||
import { cn, formatDuration, formatRelativeTime } from "@/lib/utils";
|
||||
|
||||
type TraceStatus = "RUNNING" | "COMPLETED" | "ERROR";
|
||||
type TabType = "decisions" | "spans" | "events";
|
||||
|
||||
interface DecisionPoint {
|
||||
id: string;
|
||||
type: string;
|
||||
chosenAction: string;
|
||||
alternatives: string[];
|
||||
reasoning: string | null;
|
||||
contextSnapshot: Record<string, unknown> | null;
|
||||
confidence: number | null;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
interface Span {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
status: "OK" | "ERROR" | "CANCELLED";
|
||||
startedAt: string;
|
||||
endedAt: string | null;
|
||||
durationMs: number | null;
|
||||
input: unknown;
|
||||
output: unknown;
|
||||
metadata: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface Event {
|
||||
id: string;
|
||||
type: string;
|
||||
name: string;
|
||||
timestamp: string;
|
||||
metadata: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface Trace {
|
||||
id: string;
|
||||
name: string;
|
||||
status: TraceStatus;
|
||||
startedAt: string;
|
||||
endedAt: string | null;
|
||||
durationMs: number | null;
|
||||
tags: string[];
|
||||
metadata: Record<string, unknown>;
|
||||
costUsd: number | null;
|
||||
}
|
||||
|
||||
interface TraceDetailProps {
|
||||
trace: Trace;
|
||||
decisionPoints: DecisionPoint[];
|
||||
spans: Span[];
|
||||
events: Event[];
|
||||
}
|
||||
|
||||
const statusConfig: Record<TraceStatus, { label: string; icon: React.ComponentType<{ className?: string }>; color: string; bgColor: string }> = {
|
||||
RUNNING: {
|
||||
label: "Running",
|
||||
icon: Activity,
|
||||
color: "text-amber-400",
|
||||
bgColor: "bg-amber-500/10 border-amber-500/20",
|
||||
},
|
||||
COMPLETED: {
|
||||
label: "Completed",
|
||||
icon: CheckCircle,
|
||||
color: "text-emerald-400",
|
||||
bgColor: "bg-emerald-500/10 border-emerald-500/20",
|
||||
},
|
||||
ERROR: {
|
||||
label: "Error",
|
||||
icon: XCircle,
|
||||
color: "text-red-400",
|
||||
bgColor: "bg-red-500/10 border-red-500/20",
|
||||
},
|
||||
};
|
||||
|
||||
const decisionTypeColors: Record<string, { bg: string; text: string; border: string }> = {
|
||||
TOOL_SELECTION: {
|
||||
bg: "bg-blue-500/10",
|
||||
text: "text-blue-400",
|
||||
border: "border-blue-500/20",
|
||||
},
|
||||
PATH_SELECTION: {
|
||||
bg: "bg-purple-500/10",
|
||||
text: "text-purple-400",
|
||||
border: "border-purple-500/20",
|
||||
},
|
||||
RESPONSE_FORMULATION: {
|
||||
bg: "bg-emerald-500/10",
|
||||
text: "text-emerald-400",
|
||||
border: "border-emerald-500/20",
|
||||
},
|
||||
DEFAULT: {
|
||||
bg: "bg-neutral-700/30",
|
||||
text: "text-neutral-400",
|
||||
border: "border-neutral-600/30",
|
||||
},
|
||||
};
|
||||
|
||||
const spanStatusColors: Record<string, string> = {
|
||||
OK: "text-emerald-400 bg-emerald-500/10 border-emerald-500/20",
|
||||
ERROR: "text-red-400 bg-red-500/10 border-red-500/20",
|
||||
CANCELLED: "text-amber-400 bg-amber-500/10 border-amber-500/20",
|
||||
};
|
||||
|
||||
const eventTypeColors: Record<string, { icon: React.ComponentType<{ className?: string }>; color: string }> = {
|
||||
LLM_CALL: { icon: Zap, color: "text-purple-400" },
|
||||
TOOL_CALL: { icon: Terminal, color: "text-blue-400" },
|
||||
ERROR: { icon: AlertCircle, color: "text-red-400" },
|
||||
DEFAULT: { icon: Activity, color: "text-neutral-400" },
|
||||
};
|
||||
|
||||
export function TraceDetail({
|
||||
trace,
|
||||
decisionPoints,
|
||||
spans,
|
||||
events,
|
||||
}: TraceDetailProps) {
|
||||
const [activeTab, setActiveTab] = useState<TabType>("decisions");
|
||||
const status = statusConfig[trace.status];
|
||||
const StatusIcon = status.icon;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back Button */}
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="inline-flex items-center gap-2 text-neutral-400 hover:text-emerald-400 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
<span>Back to traces</span>
|
||||
</Link>
|
||||
|
||||
{/* Header */}
|
||||
<div className="p-6 bg-neutral-900 border border-neutral-800 rounded-xl">
|
||||
<div className="flex flex-col lg:flex-row lg:items-start gap-6">
|
||||
{/* Title and Status */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<h1 className="text-2xl font-bold text-neutral-100">
|
||||
{trace.name}
|
||||
</h1>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-full border",
|
||||
status.bgColor,
|
||||
status.color
|
||||
)}
|
||||
>
|
||||
<StatusIcon className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">{status.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm text-neutral-400">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Started {formatRelativeTime(trace.startedAt)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Clock className="w-4 h-4" />
|
||||
Duration {formatDuration(trace.durationMs)}
|
||||
</span>
|
||||
{trace.costUsd !== null && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
Cost ${trace.costUsd.toFixed(4)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{trace.tags.length > 0 && (
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
{trace.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2.5 py-1 rounded-md bg-neutral-800 text-neutral-300 text-xs"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-2 mb-1">
|
||||
<GitBranch className="w-4 h-4 text-emerald-400" />
|
||||
<span className="text-2xl font-bold text-neutral-100">
|
||||
{decisionPoints.length}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-neutral-500">Decisions</span>
|
||||
</div>
|
||||
<div className="w-px h-12 bg-neutral-800" />
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-2 mb-1">
|
||||
<Layers className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-2xl font-bold text-neutral-100">
|
||||
{spans.length}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-neutral-500">Spans</span>
|
||||
</div>
|
||||
<div className="w-px h-12 bg-neutral-800" />
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-2 mb-1">
|
||||
<Activity className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-2xl font-bold text-neutral-100">
|
||||
{events.length}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-neutral-500">Events</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-neutral-800">
|
||||
<div className="flex gap-1">
|
||||
<TabButton
|
||||
active={activeTab === "decisions"}
|
||||
onClick={() => setActiveTab("decisions")}
|
||||
icon={GitBranch}
|
||||
label={`Decisions (${decisionPoints.length})`}
|
||||
/>
|
||||
<TabButton
|
||||
active={activeTab === "spans"}
|
||||
onClick={() => setActiveTab("spans")}
|
||||
icon={Layers}
|
||||
label={`Spans (${spans.length})`}
|
||||
/>
|
||||
<TabButton
|
||||
active={activeTab === "events"}
|
||||
onClick={() => setActiveTab("events")}
|
||||
icon={Activity}
|
||||
label={`Events (${events.length})`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="min-h-[400px]">
|
||||
{activeTab === "decisions" && (
|
||||
<DecisionsTab decisionPoints={decisionPoints} />
|
||||
)}
|
||||
{activeTab === "spans" && <SpansTab spans={spans} />}
|
||||
{activeTab === "events" && <EventsTab events={events} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TabButton({
|
||||
active,
|
||||
onClick,
|
||||
icon: Icon,
|
||||
label,
|
||||
}: {
|
||||
active: boolean;
|
||||
onClick: () => void;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
label: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-3 text-sm font-medium transition-all border-b-2 -mb-px",
|
||||
active
|
||||
? "text-emerald-400 border-emerald-400"
|
||||
: "text-neutral-400 border-transparent hover:text-neutral-200 hover:border-neutral-700"
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function DecisionsTab({ decisionPoints }: { decisionPoints: DecisionPoint[] }) {
|
||||
if (decisionPoints.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-neutral-500">No decision points recorded</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{decisionPoints.map((decision) => (
|
||||
<DecisionCard key={decision.id} decision={decision} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DecisionCard({ decision }: { decision: DecisionPoint }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const colors = decisionTypeColors[decision.type] || decisionTypeColors.DEFAULT;
|
||||
|
||||
return (
|
||||
<div className="p-5 bg-neutral-900 border border-neutral-800 rounded-xl hover:border-neutral-700 transition-colors">
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={cn(
|
||||
"px-2.5 py-1 rounded-md border text-xs font-medium uppercase tracking-wide",
|
||||
colors.bg,
|
||||
colors.text,
|
||||
colors.border
|
||||
)}
|
||||
>
|
||||
{decision.type}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-neutral-100 mb-1">
|
||||
{decision.chosenAction}
|
||||
</h3>
|
||||
<p className="text-sm text-neutral-500">
|
||||
{formatRelativeTime(decision.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
{decision.confidence !== null && (
|
||||
<div className="text-right">
|
||||
<span className="text-xs text-neutral-500">Confidence</span>
|
||||
<p className="font-semibold text-emerald-400">
|
||||
{Math.round(decision.confidence * 100)}%
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{decision.reasoning && (
|
||||
<div className="mt-4 p-4 bg-neutral-800/50 border-l-2 border-emerald-500/50 rounded-r-lg">
|
||||
<p className="text-sm text-neutral-300 italic">
|
||||
“{decision.reasoning}”
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{decision.alternatives.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
|
||||
>
|
||||
{expanded ? (
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
)}
|
||||
{decision.alternatives.length} alternative
|
||||
{decision.alternatives.length !== 1 ? "s" : ""} considered
|
||||
</button>
|
||||
|
||||
{expanded && (
|
||||
<div className="mt-3 space-y-2">
|
||||
{decision.alternatives.map((alt, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-2 px-3 py-2 bg-neutral-800/50 rounded-lg text-sm text-neutral-400"
|
||||
>
|
||||
<span className="text-neutral-600">#{idx + 1}</span>
|
||||
{alt}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{decision.contextSnapshot && Object.keys(decision.contextSnapshot).length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t border-neutral-800">
|
||||
<details className="group">
|
||||
<summary className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-200 cursor-pointer transition-colors">
|
||||
<FileJson className="w-4 h-4" />
|
||||
<span>Context snapshot</span>
|
||||
<ChevronRight className="w-4 h-4 group-open:rotate-90 transition-transform" />
|
||||
</summary>
|
||||
<pre className="mt-3 p-4 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300">
|
||||
{JSON.stringify(decision.contextSnapshot, null, 2)}
|
||||
</pre>
|
||||
</details>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SpansTab({ spans }: { spans: Span[] }) {
|
||||
if (spans.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-neutral-500">No spans recorded</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const maxDuration = Math.max(...spans.map((s) => s.durationMs || 0));
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{spans.map((span) => (
|
||||
<SpanItem key={span.id} span={span} maxDuration={maxDuration} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SpanItem({ span, maxDuration }: { span: Span; maxDuration: number }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const statusColor = spanStatusColors[span.status] || spanStatusColors.CANCELLED;
|
||||
const durationPercent = maxDuration > 0 ? ((span.durationMs || 0) / maxDuration) * 100 : 0;
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-neutral-900 border border-neutral-800 rounded-xl hover:border-neutral-700 transition-colors">
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="w-full flex items-center gap-4"
|
||||
>
|
||||
<div className={cn("px-2 py-1 rounded text-xs font-medium border", statusColor)}>
|
||||
{span.status}
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<h4 className="font-medium text-neutral-100">{span.name}</h4>
|
||||
<p className="text-xs text-neutral-500">{span.type}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-32 h-2 bg-neutral-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-emerald-500 rounded-full"
|
||||
style={{ width: `${durationPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm text-neutral-400 w-16 text-right">
|
||||
{formatDuration(span.durationMs)}
|
||||
</span>
|
||||
{expanded ? (
|
||||
<ChevronDown className="w-5 h-5 text-neutral-500" />
|
||||
) : (
|
||||
<ChevronRight className="w-5 h-5 text-neutral-500" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{expanded && (
|
||||
<div className="mt-4 pt-4 border-t border-neutral-800 space-y-4">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-neutral-500 mb-2">Input</h5>
|
||||
<pre className="p-3 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300">
|
||||
{JSON.stringify(span.input, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-neutral-500 mb-2">Output</h5>
|
||||
<pre className="p-3 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300">
|
||||
{JSON.stringify(span.output, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
{Object.keys(span.metadata).length > 0 && (
|
||||
<div>
|
||||
<h5 className="text-xs font-medium text-neutral-500 mb-2">Metadata</h5>
|
||||
<pre className="p-3 bg-neutral-950 rounded-lg overflow-x-auto text-xs text-neutral-300">
|
||||
{JSON.stringify(span.metadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EventsTab({ events }: { events: Event[] }) {
|
||||
if (events.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-neutral-500">No events recorded</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{events.map((event) => {
|
||||
const { icon: Icon, color } = eventTypeColors[event.type] || eventTypeColors.DEFAULT;
|
||||
return (
|
||||
<div
|
||||
key={event.id}
|
||||
className="flex items-center gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-xl hover:border-neutral-700 transition-colors"
|
||||
>
|
||||
<div className={cn("p-2 rounded-lg bg-neutral-800", color)}>
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-neutral-100">{event.name}</h4>
|
||||
<p className="text-xs text-neutral-500">{event.type}</p>
|
||||
</div>
|
||||
<span className="text-sm text-neutral-400">
|
||||
{formatRelativeTime(event.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user