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

apps/web/src/app/dashboard/layout.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  Activity,
+  GitBranch,
+  Settings,
+  Menu,
+  X,
+  ChevronRight,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  comingSoon?: boolean;
+}
+
+const navItems: NavItem[] = [
+  { href: "/dashboard", label: "Traces", icon: Activity },
+  { href: "/dashboard/decisions", label: "Decisions", icon: GitBranch, comingSoon: true },
+  { href: "/dashboard/settings", label: "Settings", icon: Settings, comingSoon: true },
+];
+
+function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex flex-col h-full bg-neutral-900 border-r border-neutral-800">
+      {/* Logo */}
+      <div className="p-6 border-b border-neutral-800">
+        <Link
+          href="/"
+          className="flex items-center gap-3 group"
+          onClick={onNavigate}
+        >
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-emerald-500/20 group-hover:shadow-emerald-500/30 transition-shadow">
+            <Activity className="w-5 h-5 text-white" />
+          </div>
+          <div className="flex flex-col">
+            <span className="font-bold text-lg text-neutral-100">AgentLens</span>
+            <span className="text-xs text-neutral-500">Dashboard</span>
+          </div>
+        </Link>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-4 space-y-1">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
+
+          return (
+            <Link
+              key={item.href}
+              href={item.comingSoon ? "#" : item.href}
+              onClick={(e) => {
+                if (item.comingSoon) {
+                  e.preventDefault();
+                  return;
+                }
+                onNavigate?.();
+              }}
+              className={cn(
+                "flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all duration-200",
+                isActive
+                  ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
+                  : "text-neutral-400 hover:text-neutral-100 hover:bg-neutral-800/50",
+                item.comingSoon && "opacity-50 cursor-not-allowed"
+              )}
+            >
+              <Icon className="w-5 h-5" />
+              <span className="flex-1">{item.label}</span>
+              {item.comingSoon && (
+                <span className="text-xs px-2 py-0.5 rounded-full bg-neutral-800 text-neutral-500">
+                  Soon
+                </span>
+              )}
+              {isActive && <ChevronRight className="w-4 h-4" />}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Footer */}
+      <div className="p-4 border-t border-neutral-800">
+        <div className="px-4 py-3 rounded-lg bg-neutral-800/50 border border-neutral-700/50">
+          <p className="text-xs text-neutral-500">AgentLens v0.1.0</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-neutral-950 flex">
+      {/* Desktop Sidebar */}
+      <aside className="hidden lg:block w-64 h-screen sticky top-0">
+        <Sidebar />
+      </aside>
+
+      {/* Mobile Sidebar Overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Mobile Sidebar */}
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 w-72 z-50 transform transition-transform duration-300 ease-in-out lg:hidden",
+          sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        <Sidebar onNavigate={() => setSidebarOpen(false)} />
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 min-w-0">
+        {/* Mobile Header */}
+        <header className="lg:hidden sticky top-0 z-30 bg-neutral-950/80 backdrop-blur-md border-b border-neutral-800 px-4 py-3">
+          <div className="flex items-center justify-between">
+            <button
+              onClick={() => setSidebarOpen(true)}
+              className="p-2 rounded-lg bg-neutral-900 border border-neutral-800 text-neutral-400 hover:text-neutral-100 transition-colors"
+            >
+              <Menu className="w-5 h-5" />
+            </button>
+            <Link href="/" className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center">
+                <Activity className="w-4 h-4 text-white" />
+              </div>
+              <span className="font-bold text-neutral-100">AgentLens</span>
+            </Link>
+            <div className="w-9" />
+          </div>
+        </header>
+
+        {/* Page Content */}
+        <div className="p-4 sm:p-6 lg:p-8">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}

apps/web/src/app/dashboard/page.tsx

@@ -0,0 +1,63 @@
+import { TraceList } from "@/components/trace-list";
+
+interface TracesResponse {
+  traces: Array<{
+    id: string;
+    name: string;
+    status: "RUNNING" | "COMPLETED" | "ERROR";
+    startedAt: string;
+    endedAt: string | null;
+    durationMs: number | null;
+    tags: string[];
+    metadata: Record<string, unknown>;
+    _count: {
+      decisionPoints: number;
+      spans: number;
+      events: number;
+    };
+  }>;
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+async function getTraces(
+  limit = 50,
+  page = 1
+): Promise<TracesResponse> {
+  try {
+    const res = await fetch(
+      `http://localhost:3000/api/traces?limit=${limit}&page=${page}`,
+      { cache: "no-store" }
+    );
+
+    if (!res.ok) {
+      throw new Error(`Failed to fetch traces: ${res.status}`);
+    }
+
+    return res.json();
+  } catch (error) {
+    console.error("Error fetching traces:", error);
+    return {
+      traces: [],
+      total: 0,
+      page: 1,
+      limit,
+      totalPages: 0,
+    };
+  }
+}
+
+export default async function DashboardPage() {
+  const data = await getTraces(50, 1);
+
+  return (
+    <TraceList
+      initialTraces={data.traces}
+      initialTotal={data.total}
+      initialTotalPages={data.totalPages}
+      initialPage={data.page}
+    />
+  );
+}

apps/web/src/app/dashboard/traces/[id]/page.tsx

@@ -0,0 +1,87 @@
+import { notFound } from "next/navigation";
+import { TraceDetail } from "@/components/trace-detail";
+
+interface TraceResponse {
+  trace: {
+    id: string;
+    name: string;
+    status: "RUNNING" | "COMPLETED" | "ERROR";
+    startedAt: string;
+    endedAt: string | null;
+    durationMs: number | null;
+    tags: string[];
+    metadata: Record<string, unknown>;
+    costUsd: number | null;
+  };
+  decisionPoints: Array<{
+    id: string;
+    type: string;
+    chosenAction: string;
+    alternatives: string[];
+    reasoning: string | null;
+    contextSnapshot: Record<string, unknown> | null;
+    confidence: number | null;
+    timestamp: string;
+  }>;
+  spans: Array<{
+    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>;
+  }>;
+  events: Array<{
+    id: string;
+    type: string;
+    name: string;
+    timestamp: string;
+    metadata: Record<string, unknown>;
+  }>;
+}
+
+async function getTrace(id: string): Promise<TraceResponse | null> {
+  try {
+    const res = await fetch(`http://localhost:3000/api/traces/${id}`, {
+      cache: "no-store",
+    });
+
+    if (!res.ok) {
+      if (res.status === 404) {
+        return null;
+      }
+      throw new Error(`Failed to fetch trace: ${res.status}`);
+    }
+
+    return res.json();
+  } catch (error) {
+    console.error("Error fetching trace:", error);
+    return null;
+  }
+}
+
+interface TraceDetailPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function TraceDetailPage({ params }: TraceDetailPageProps) {
+  const { id } = await params;
+  const data = await getTrace(id);
+
+  if (!data) {
+    notFound();
+  }
+
+  return (
+    <TraceDetail
+      trace={data.trace}
+      decisionPoints={data.decisionPoints}
+      spans={data.spans}
+      events={data.events}
+    />
+  );
+}

apps/web/src/components/trace-detail.tsx

@@ -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">
+            &ldquo;{decision.reasoning}&rdquo;
+          </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>
+  );
+}

apps/web/src/components/trace-list.tsx

@@ -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">&quot;your-api-key&quot;</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">
+                &quot;Hello, AgentLens!&quot;
+              </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>
+  );
+}

apps/web/src/lib/utils.ts

@@ -0,0 +1,24 @@
+export function formatDuration(ms: number | null | undefined): string {
+  if (ms === null || ms === undefined) return "—";
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+export function formatRelativeTime(date: string | Date): string {
+  const now = new Date();
+  const then = typeof date === "string" ? new Date(date) : date;
+  const diffMs = now.getTime() - then.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  if (diffSec < 60) return "just now";
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHour = Math.floor(diffMin / 60);
+  if (diffHour < 24) return `${diffHour}h ago`;
+  const diffDay = Math.floor(diffHour / 24);
+  return `${diffDay}d ago`;
+}
+
+export function cn(...classes: (string | boolean | undefined | null)[]): string {
+  return classes.filter(Boolean).join(" ");
+}