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
352
apps/web/src/components/trace-list.tsx
Normal file
352
apps/web/src/components/trace-list.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Search,
|
||||
Filter,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Activity,
|
||||
GitBranch,
|
||||
Layers,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
import { cn, formatDuration, formatRelativeTime } from "@/lib/utils";
|
||||
|
||||
type TraceStatus = "RUNNING" | "COMPLETED" | "ERROR";
|
||||
|
||||
interface Trace {
|
||||
id: string;
|
||||
name: string;
|
||||
status: TraceStatus;
|
||||
startedAt: string;
|
||||
endedAt: string | null;
|
||||
durationMs: number | null;
|
||||
tags: string[];
|
||||
metadata: Record<string, unknown>;
|
||||
_count: {
|
||||
decisionPoints: number;
|
||||
spans: number;
|
||||
events: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface TraceListProps {
|
||||
initialTraces: Trace[];
|
||||
initialTotal: number;
|
||||
initialTotalPages: number;
|
||||
initialPage: number;
|
||||
}
|
||||
|
||||
type FilterStatus = "ALL" | TraceStatus;
|
||||
|
||||
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",
|
||||
},
|
||||
};
|
||||
|
||||
export function TraceList({
|
||||
initialTraces,
|
||||
initialTotal,
|
||||
initialTotalPages,
|
||||
initialPage,
|
||||
}: TraceListProps) {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<FilterStatus>("ALL");
|
||||
const [currentPage, setCurrentPage] = useState(initialPage);
|
||||
|
||||
const filteredTraces = initialTraces.filter((trace) => {
|
||||
const matchesSearch =
|
||||
trace.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
trace.tags.some((tag) =>
|
||||
tag.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
const matchesStatus =
|
||||
statusFilter === "ALL" || trace.status === statusFilter;
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
|
||||
const filterChips: { value: FilterStatus; label: string }[] = [
|
||||
{ value: "ALL", label: "All" },
|
||||
{ value: "RUNNING", label: "Running" },
|
||||
{ value: "COMPLETED", label: "Completed" },
|
||||
{ value: "ERROR", label: "Error" },
|
||||
];
|
||||
|
||||
if (initialTraces.length === 0) {
|
||||
return <EmptyState />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-neutral-100">Traces</h1>
|
||||
<p className="text-neutral-400 mt-1">
|
||||
{initialTotal} trace{initialTotal !== 1 ? "s" : ""} captured
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and Filter */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search traces..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-5 h-5 text-neutral-500" />
|
||||
<div className="flex gap-2">
|
||||
{filterChips.map((chip) => (
|
||||
<button
|
||||
key={chip.value}
|
||||
onClick={() => setStatusFilter(chip.value)}
|
||||
className={cn(
|
||||
"px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200",
|
||||
statusFilter === chip.value
|
||||
? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
|
||||
: "bg-neutral-900 text-neutral-400 border border-neutral-800 hover:border-neutral-700"
|
||||
)}
|
||||
>
|
||||
{chip.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trace List */}
|
||||
<div className="space-y-3">
|
||||
{filteredTraces.map((trace) => (
|
||||
<TraceCard key={trace.id} trace={trace} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Empty Filtered State */}
|
||||
{filteredTraces.length === 0 && initialTraces.length > 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-neutral-400">
|
||||
No traces match your search criteria
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{initialTotalPages > 1 && (
|
||||
<div className="flex items-center justify-between pt-6 border-t border-neutral-800">
|
||||
<p className="text-sm text-neutral-500">
|
||||
Page {currentPage} of {initialTotalPages}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
disabled={currentPage <= 1}
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
className="p-2 rounded-lg border border-neutral-800 text-neutral-400 hover:text-neutral-100 hover:border-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
disabled={currentPage >= initialTotalPages}
|
||||
onClick={() =>
|
||||
setCurrentPage((p) => Math.min(initialTotalPages, p + 1))
|
||||
}
|
||||
className="p-2 rounded-lg border border-neutral-800 text-neutral-400 hover:text-neutral-100 hover:border-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TraceCard({ trace }: { trace: Trace }) {
|
||||
const status = statusConfig[trace.status];
|
||||
const StatusIcon = status.icon;
|
||||
|
||||
return (
|
||||
<Link href={`/dashboard/traces/${trace.id}`}>
|
||||
<div className="group p-5 bg-neutral-900 border border-neutral-800 rounded-xl hover:border-emerald-500/30 hover:bg-neutral-800/50 transition-all duration-200 cursor-pointer">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center gap-4">
|
||||
{/* Left: Name and Status */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="font-semibold text-neutral-100 truncate group-hover:text-emerald-400 transition-colors">
|
||||
{trace.name}
|
||||
</h3>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium",
|
||||
status.bgColor,
|
||||
status.color
|
||||
)}
|
||||
>
|
||||
<StatusIcon className="w-3.5 h-3.5" />
|
||||
{status.label}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-neutral-500">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Clock className="w-4 h-4" />
|
||||
{formatRelativeTime(trace.startedAt)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Activity className="w-4 h-4" />
|
||||
{formatDuration(trace.durationMs)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Middle: Stats */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-md bg-emerald-500/10">
|
||||
<GitBranch className="w-4 h-4 text-emerald-400" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-neutral-500">Decisions</span>
|
||||
<span className="text-sm font-medium text-neutral-200">
|
||||
{trace._count.decisionPoints}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-md bg-blue-500/10">
|
||||
<Layers className="w-4 h-4 text-blue-400" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-neutral-500">Spans</span>
|
||||
<span className="text-sm font-medium text-neutral-200">
|
||||
{trace._count.spans}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Tags and Arrow */}
|
||||
<div className="flex items-center gap-4">
|
||||
{trace.tags.length > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
{trace.tags.slice(0, 3).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-1 rounded-md bg-neutral-800 text-neutral-400 text-xs"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{trace.tags.length > 3 && (
|
||||
<span className="px-2 py-1 rounded-md bg-neutral-800 text-neutral-500 text-xs">
|
||||
+{trace.tags.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<ArrowRight className="w-5 h-5 text-neutral-600 group-hover:text-emerald-400 group-hover:translate-x-1 transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-neutral-900 border border-neutral-800 flex items-center justify-center mb-6">
|
||||
<Activity className="w-10 h-10 text-neutral-600" />
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-neutral-100 mb-2">
|
||||
No traces yet
|
||||
</h2>
|
||||
<p className="text-neutral-400 max-w-md mb-8">
|
||||
Install the SDK to start capturing traces from your AI agents
|
||||
</p>
|
||||
|
||||
<div className="w-full max-w-2xl">
|
||||
<div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900">
|
||||
<div className="px-4 py-3 border-b border-neutral-800 flex items-center gap-2">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-neutral-700" />
|
||||
<div className="w-3 h-3 rounded-full bg-neutral-700" />
|
||||
<div className="w-3 h-3 rounded-full bg-neutral-700" />
|
||||
</div>
|
||||
<span className="ml-4 text-sm text-neutral-500">example.py</span>
|
||||
</div>
|
||||
<pre className="p-6 overflow-x-auto text-sm text-left">
|
||||
<code className="text-neutral-300">
|
||||
<span className="text-purple-400">from</span>{" "}
|
||||
<span className="text-neutral-300">agentlens</span>{" "}
|
||||
<span className="text-purple-400">import</span>{" "}
|
||||
<span className="text-emerald-300">init</span>
|
||||
<span className="text-neutral-300">,</span>{" "}
|
||||
<span className="text-emerald-300">trace</span>
|
||||
{"\n"}
|
||||
{"\n"}
|
||||
<span className="text-emerald-300">init</span>
|
||||
<span className="text-neutral-300">(</span>
|
||||
{"\n"}
|
||||
{" "}
|
||||
<span className="text-orange-300">api_key</span>
|
||||
<span className="text-neutral-300">=</span>
|
||||
<span className="text-emerald-300">"your-api-key"</span>
|
||||
{"\n"}
|
||||
<span className="text-neutral-300">)</span>
|
||||
{"\n"}
|
||||
{"\n"}
|
||||
<span className="text-purple-400">@trace</span>
|
||||
{"\n"}
|
||||
<span className="text-purple-400">def</span>{" "}
|
||||
<span className="text-emerald-300">my_agent</span>
|
||||
<span className="text-neutral-300">():</span>
|
||||
{"\n"}
|
||||
{" "}
|
||||
<span className="text-purple-400">return</span>{" "}
|
||||
<span className="text-emerald-300">
|
||||
"Hello, AgentLens!"
|
||||
</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://agentlens.vectry.tech/docs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-8 inline-flex items-center gap-2 px-6 py-3 bg-emerald-500 hover:bg-emerald-400 text-neutral-950 font-semibold rounded-lg transition-colors"
|
||||
>
|
||||
View Documentation
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user