{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "trace",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/ui/trace.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\nexport type TraceEvent = {\n  id: string;\n  kind: \"llm\" | \"tool\" | \"retrieval\" | \"agent\";\n  name: string;\n  /** Start offset in ms from the beginning of the run. */\n  start: number;\n  /** Duration in ms. */\n  duration: number;\n  status?: \"success\" | \"error\";\n};\n\nconst kindColor: Record<TraceEvent[\"kind\"], string> = {\n  llm: \"bg-primary\",\n  tool: \"bg-emerald-500\",\n  retrieval: \"bg-amber-500\",\n  agent: \"bg-foreground/70\",\n};\n\nconst fmt = (ms: number) => (ms >= 1000 ? `${(ms / 1000).toFixed(2)}s` : `${Math.round(ms)}ms`);\n\n/** Waterfall view of an agent run: one row per span, bars scaled to total duration. */\nexport function Trace({ events, className }: { events: TraceEvent[]; className?: string }) {\n  const total = Math.max(1, ...events.map((e) => e.start + e.duration));\n  return (\n    <div className={cn(\"@container rounded border\", className)} role=\"table\" aria-label=\"Trace\">\n      <div role=\"row\" className=\"flex items-center justify-between border-b px-3 py-2 font-mono text-[11px] uppercase tracking-wider text-muted-foreground\">\n        <span role=\"columnheader\">Span</span>\n        <span role=\"columnheader\">Total {fmt(total)}</span>\n      </div>\n      {events.map((e) => (\n        <div key={e.id} role=\"row\" className=\"grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1.5 px-3 py-2 text-xs @md:grid-cols-[minmax(0,12rem)_1fr_4rem] @md:py-1.5\">\n          <span role=\"cell\" className=\"truncate font-mono\">\n            <span className=\"mr-2 text-[10px] uppercase tracking-wider text-muted-foreground\">{e.kind}</span>\n            {e.name}\n            {e.status === \"error\" && <span className=\"ml-1.5 font-sans text-red-700 dark:text-red-400\">failed</span>}\n          </span>\n          <span role=\"cell\" className=\"relative order-3 col-span-2 h-1.5 rounded-sm bg-muted @md:order-none @md:col-span-1\">\n            <span\n              className={cn(\"absolute inset-y-0 rounded-sm\", e.status === \"error\" ? \"bg-red-500\" : kindColor[e.kind])}\n              style={{ left: `${(e.start / total) * 100}%`, width: `max(2px, ${(e.duration / total) * 100}%)` }}\n            />\n          </span>\n          <span role=\"cell\" className=\"text-right tabular-nums text-muted-foreground\">{fmt(e.duration)}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}