{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "model-compare",
  "type": "registry:ui",
  "title": "Model compare",
  "description": "A comparison table for AI models listing name, latency with a color coded badge, cost and a quality note per row. Helps users pick between LLM providers.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/latency-badge.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/model-compare.tsx",
      "type": "registry:ui",
      "target": "components/ui/model-compare.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { LatencyBadge } from \"@/components/ui/latency-badge\"\n\n/** ModelCompare — a compact table of AI models by latency, cost and quality, with latency colour coded. */\n\ntype ModelRow = { name: string; latencyMs: number; cost: string; quality: string }\n\n// Models available to the Lumen assistant, with p50 latency and price per 1M tokens.\nconst SAMPLE_ROWS: ModelRow[] = [\n  { name: \"Lumen Mini\", latencyMs: 84, cost: \"$0.15 / 1M\", quality: \"Good\" },\n  { name: \"Lumen Pro\", latencyMs: 310, cost: \"$2.50 / 1M\", quality: \"Great\" },\n  { name: \"Lumen Ultra\", latencyMs: 940, cost: \"$12.00 / 1M\", quality: \"Best\" },\n  { name: \"Atlas 8B\", latencyMs: 46, cost: \"$0.04 / 1M\", quality: \"Fair\" },\n]\n\ntype ModelCompareProps = {\n  rows?: ModelRow[]\n  className?: string\n}\n\nfunction ModelCompare({ rows = SAMPLE_ROWS, className }: ModelCompareProps) {\n  return (\n    <div data-slot=\"model-compare\" className={cn(\"overflow-hidden rounded-xl border border-border\", className)}>\n      <div className=\"grid grid-cols-4 gap-2 border-b border-border bg-sunken px-3 py-2 text-[11px] font-medium tracking-[0.01em] text-fg-muted uppercase\">\n        <span>Model</span><span>Latency</span><span>Cost</span><span>Quality</span>\n      </div>\n      {rows.map((r) => (\n        <div key={r.name} className=\"grid grid-cols-4 items-center gap-2 border-b border-border px-3 py-2.5 text-sm last:border-b-0\">\n          <span className=\"font-medium text-fg\">{r.name}</span>\n          <LatencyBadge ms={r.latencyMs} />\n          <span className=\"tabular-nums text-fg-muted\">{r.cost}</span>\n          <span className=\"text-fg-muted\">{r.quality}</span>\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { ModelCompare }\nexport type { ModelCompareProps, ModelRow }\n"
    }
  ]
}