{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "model-race",
  "title": "Model Race",
  "description": "One prompt across several models, with live time and cost, and the winner marked.",
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json",
    "https://spotcheckui.com/r/roll-number.json",
    "https://spotcheckui.com/r/tag.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/model-race.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { RollNumber } from \"@/registry/spotcheck/components/spotcheck/roll-number\"\nimport { Tag } from \"@/registry/spotcheck/components/spotcheck/tag\"\n\nexport type RaceLane = {\n  id: string\n  model: string\n  /** The answer so far. */\n  text: string\n  status: \"waiting\" | \"streaming\" | \"done\" | \"error\"\n  /** Time so far, in milliseconds. */\n  ms: number\n  /** Cost so far, in dollars. */\n  cost: number\n}\n\n/** Finishing order among the lanes that are done, with ties sharing a place. */\nexport function finishPlaces(lanes: RaceLane[]) {\n  const times = lanes.filter((lane) => lane.status === \"done\").map((lane) => lane.ms)\n  return new Map(\n    lanes\n      .filter((lane) => lane.status === \"done\")\n      .map((lane) => [lane.id, times.filter((time) => time < lane.ms).length + 1]),\n  )\n}\n\ntype ModelRaceProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  lanes: RaceLane[]\n}\n\nexport function ModelRace({ lanes, className, ...props }: ModelRaceProps) {\n  const places = finishPlaces(lanes)\n  const winner = lanes.find((lane) => places.get(lane.id) === 1)\n\n  return (\n    <div className={cn(\"flex flex-col gap-2 font-(family-name:--f-body)\", className)} {...props}>\n      <div className=\"grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3\">\n        {lanes.map((lane) => {\n          const place = places.get(lane.id)\n          return (\n            <section\n              key={lane.id}\n              aria-label={lane.model}\n              data-status={lane.status}\n              className={cn(\"border-ink flex min-w-0 flex-col border-(length:--rule)\", place === 1 && \"shadow-[4px_4px_0_var(--accent-ink)]\")}\n            >\n              <div className=\"border-ink flex items-center justify-between gap-2 border-b-(length:--rule) px-3 py-2\">\n                <b className=\"spotcheck-heading min-w-0 truncate text-lg leading-none\">{lane.model}</b>\n                {place ? (\n                  <Tag variant={place === 1 ? \"accent\" : \"outline\"}>{place === 1 ? \"First\" : `#${place}`}</Tag>\n                ) : (\n                  <Tag>{lane.status}</Tag>\n                )}\n              </div>\n              <p aria-hidden className=\"m-0 min-h-[6.5em] grow px-3 py-2.5 text-sm text-pretty\">\n                {lane.text}\n                {lane.status === \"streaming\" && (\n                  <span className=\"bg-accent-ink ml-0.5 inline-block h-[1em] w-[.5em] align-[-2px] motion-safe:[animation:spotcheck-blink_1s_steps(1)_infinite]\" />\n                )}\n              </p>\n              <div className=\"border-ink grid grid-cols-2 border-t-(length:--rule)\">\n                <div className=\"border-ink border-r-(length:--rule) px-3 py-1.5\">\n                  <div className=\"spotcheck-label\">Time</div>\n                  <RollNumber text={`${(lane.ms / 1000).toFixed(2)}s`} duration={200} className=\"text-xl normal-case\" />\n                </div>\n                <div className=\"px-3 py-1.5\">\n                  <div className=\"spotcheck-label\">Cost</div>\n                  <RollNumber text={`$${lane.cost.toFixed(4)}`} duration={200} className=\"text-xl\" />\n                </div>\n              </div>\n            </section>\n          )\n        })}\n      </div>\n      <p role=\"status\" className=\"spotcheck-label\" data-testid=\"race-result\">\n        {winner ? `${winner.model} finished first` : \"\"}\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ai"
  ],
  "type": "registry:component"
}