Cost-Quality Frontier

npx shadcn@latest add https://ui.zyeon.ai/r/chart-cost-quality-frontier.json

Build a React + TypeScript + Tailwind "ChartCostQualityFrontier" card — a model
price/quality plane in hand-rolled SVG (no chart library), typed by zod.

Contract
- One zod schema is the single source of truth:
  { status: "loading" | "empty" | "error" | "ready"; title: string;
    metric: { label, unit?, digits? };
    higherIsBetter: boolean;
    costLabel?: string; priceBasis?: string;
    models: { id, label, cost > 0, quality, family? }[] }
  `ready` is refined to require at least one model.
- Props = z.infer of that schema plus height? (plot px, clamped 180-420),
  defaultRate?, onRetry?, and the div's own props spread on the root, with
  forwardRef. No hand-written parallel interface.
- `cost` is a blended price in dollars per million tokens and must be strictly
  positive, because the price axis is logarithmic and a log axis has nowhere to
  put a zero. `higherIsBetter` is the only place the metric's direction lives.

Behavior
- Pure model first (exported, testable, no pixels). Normalise once:
  gain = (higherIsBetter ? 1 : -1) * quality, so bigger is always better and
  every comparison downstream reads gain, never quality.
  - Dominance, tested pairwise: A is dominated when some B is no dearer and no
    worse, strictly better on at least one axis. Record *which* B — the strongest,
    then the cheapest — so the table can say who to buy instead. A dozen rows
    make the quadratic version cheaper to read than a sweep that has to
    special-case equal prices and equal quality.
  - The non-dominated set is the frontier. Its upper convex hull is the sharper
    answer: only a hull vertex is ever the argmax of gain - rate * cost, so a
    frontier model under the chord between two others is non-dominated yet never
    the pick at any exchange rate. Say so by name, and say that a routing split
    across the two chord ends beats it everywhere.
  - Slopes between consecutive hull vertices are the breakpoints: the exchange
    rates at which the best buy changes hands, strictly descending by
    construction. Vertex i owns the band [breaks[i], breaks[i-1]).
- One control: an exchange rate — quality units gained (or removed, for a
  lower-is-better metric) per extra $1 / M tokens. It is a hand-rolled
  role="slider" on a logarithmic track from a third of the lowest breakpoint to
  three times the highest, driven by pointer capture (never window listeners)
  plus arrows / PageUp / PageDown / Home / End, with aria-valuetext naming the
  current rate and the model it crowns. Breakpoints are ticked on the track;
  under it, one shortcut button per hull vertex jumps the rate to the geometric
  centre of that vertex's band. The live one is aria-current, not aria-pressed —
  pressing it again changes nothing.
- The card opens at the geometric centre of the breakpoint range, which on a log
  track is dead centre; a single breakpoint would *be* a tie, so that case opens
  half an octave above it. Uncontrolled: the derived rate follows the data until
  the reader moves the line, then the reader owns it — no effect, no sync.
- Four first-class branches in one bg-card panel: loading (skeleton in the ready
  silhouette: two tiles, a scatter with a rising frontier, a track), empty
  (outlined axes plus what will fill them), error (message plus a Try again
  button only when onRetry exists), ready. A ready payload whose rows are all
  unusable degrades to empty and counts them.
- No hover state and no tooltip: every number is printed — in the plot, in the
  two tiles, in the caption or in the screen-reader table — so the card reads the
  same on a phone as under a mouse.

Rendering & styling
- Price axis logarithmic with 1 / 2 / 5 ticks per decade, thinning to 1 / 5 and
  then to bare decades as the plot narrows. Quality axis linear on the smallest
  1 / 2 / 2.5 / 5 x 10^n step that fits ~6 gridlines, with decimals derived from
  the observed spread (0 for a 240-point Elo range, 2 for a half-nat loss range).
- Three marks, one rule each: frontier models are filled with their family's
  chart token, dominated models are hollow rings in muted-foreground, and the
  current best buy wears a primary ring. Every mark is placed by the same cost
  and quality that decide its ink and print in its row — nothing is positioned by
  a rank.
- The frontier is a solid polyline through the non-dominated models; its segments
  join measured models and claim nothing between them. The iso-value line is the
  support line through the current best buy, sampled and clipped to the plot: on
  a log price axis it bends, because the rate is constant and the axis is not.
  Nothing sits on the good side of it, by construction.
- Labels: greedy placement per mark — beside, then above or below, then stepped
  away with a leader line — rejecting any slot that leaves the plot or touches
  another label or mark, in importance order (the pick, then hull vertices, then
  the rest of the frontier, then the also-rans). Text over paint gets a
  card-coloured halo (paintOrder="stroke", stroke="var(--card)"). Anything that
  still cannot fit is counted out loud rather than dropped in silence.
- Family shares are apportioned to whole percents by largest remainder — ties to
  the bigger count, then the earlier family — so three equal families read
  34 / 33 / 33 instead of the 99 that per-row rounding prints.
- Only semantic tokens: bg-card, border, muted, muted-foreground, primary,
  destructive, ring and var(--chart-1..5). cn() merges className. Plot width comes
  from a ResizeObserver disconnected on unmount and on node change; skeletons use
  animate-pulse with motion-reduce:animate-none.
- The svg is role="img" with a sentence-long aria-label; the full model table is
  real DOM in an sr-only wrapper (never sr-only on the table itself), ranked by
  cost-adjusted quality at the live rate.

Customization levers
- Metric direction: higherIsBetter is the whole story — Elo, accuracy and win
  rate one way, loss, error rate and perplexity the other. Nothing else changes.
- Rate units: the exchange rate is quality per dollar because that is the plot's
  own slope. Invert it to dollars per quality point if your readers budget that
  way, and invert the breakpoints with it.
- Slider range: a third of the lowest breakpoint to three times the highest.
  Widen it to expose more of the two open-ended bands, or pin it to a band your
  procurement policy already fixes.
- Density: `height` for the plot; drop the ladder of shortcut buttons on narrow
  cards, or drop the second tile and keep the winner alone.
- Axis: swap the log price projection for a linear one when your catalogue spans
  less than a decade — the iso-value line then draws straight, and the sampling
  loop can collapse to two points.
- Palette: family colours cycle five chart tokens; map a fixed token per lab
  instead, keeping dominated marks on muted-foreground so grey never means a
  vendor.
- Grouping: `family` colours and gets a legend share; re-point it at a weight
  class, a serving region or a licence type without touching the geometry.