hanzo.ai/components/benchmarks/board.tsx

'use client'

import { useMemo, useState } from 'react'
import { Picker, Text, View, XStack, YStack } from '@hanzo/ui'
import { useI18n } from '@hanzo/i18n/react'
import { useKai } from '@/hooks/useKai'
import { useClaim, useLead, useSettled } from '@/hooks/useSuite'
import { named, type IndexRow, type Kai } from '@/lib/kai'
import { useEnso } from '@/hooks/useEnso'
import { GPQA, atList, date, headline, stat, type FrontierBench, type Point } from '@/lib/enso'
import { day, dollars, ece, frontier, kaiHeadline, kaiLede, kaiPrice, kaiTiles, lead, points, rate, record, verdict, type Tile as Figure } from '@/lib/tally'
import { ready, usePricing } from '@/lib/api/use'
import { Ready } from '@/components/api/state'
import { Bar, DIM, Exports, FIGURES, INK, LINE, MONO, Mark, OURS, SOFT, Seg, THEM, TRACK, useParam } from './controls'
import { Even, Stat, Table, Td, Th, Tile, Tr } from './parts'

/**
 * The interactive half of /benchmarks: the hero's figures, Kai's live record,
 * the Kai leaderboard, and Enso's headline, figure and frontier explorer. Every
 * number they draw is handed in from lib/board (the build) or derived from the
 * research runs when the page opens — Kai's by lib/tally from what useKai holds,
 * Enso's by lib/enso from what useEnso holds — so a view can re-sort and
 * re-filter a figure but never type one.
 *
 * Monochrome: Hanzo in the brightest ink, everyone else in the mid grey, and a
 * result marked by a glyph and a word (Mark), never a colour. Every row handed
 * in is a win: lib/kai publishes the suites Kai leads and lib/board the frontier
 * points Enso holds, so a view can only re-sort what was won.
 */

/* ---------------- the headline ---------------- */

/** The lead's places: Enso's intelligence, Kai's record, Kai's cost, Zen 6's speed. */
const PLACES = 4
/**
 * The height each place keeps from first paint, one across, two and four: the
 * tallest tile the figures draw at each, so the tiles land in places already
 * held and nothing under them moves.
 */
const KEEP = { base: 141, sm: 161, lg: 181 }

/**
 * The hero's figures, in the story's order: Enso's intelligence, Kai's record,
 * Kai's cost, Zen 6's speed, each read when the page opens. Enso's is its GPQA
 * Diamond run (lib/enso `stat`); Kai's record is the one the landing draws too
 * (hooks/useSuite `useLead`): the Decision Suite's count once every row of it
 * holds both figures, else the harness suites Kai leads; its cost is the price
 * list's. The places are held at their final height from first paint, empty,
 * until every read has answered or failed (`useSettled`), then the tiles fill
 * them at once; a figure whose read failed gives up its place. Four across on
 * a wide screen, two on a tablet, one on a phone.
 */
export function Headline({ also }: { also: Figure[] }) {
  const { t } = useI18n()
  const settled = useSettled()
  const won = useLead()
  const read = ready(useEnso())
  const figure = read ? stat(read) : null
  const enso = figure ? { ...figure, href: `?bench=${GPQA}#frontier` } : null
  const speed = also.find((f) => f.href === '#zen')
  const prices = ready(usePricing())
  const [cost] = prices ? kaiPrice(prices) : []
  const tiles = [
    enso && { ...enso, label: t('Intelligence · {label}', { label: t(enso.label) }) },
    won && { ...won, label: t('Decisions · {label}', { label: t(won.label) }) },
    cost && { ...cost, label: t('Cost · {label}', { label: t(cost.label) }) },
    speed && { ...speed, label: t('Speed · {label}', { label: t(speed.label) }) },
  ].filter((f): f is Figure => Boolean(f))
  const across = settled ? tiles.length : PLACES
  const keep = { minH: KEEP.base, $sm: { minH: KEEP.sm }, $lg: { minH: KEEP.lg } }
  return (
    <View
      display="grid"
      gridTemplateColumns="1fr"
      gap={12}
      $sm={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
      $lg={{ gridTemplateColumns: `repeat(${across}, minmax(0, 1fr))` }}
      data-slot="lead-tiles"
    >
      {settled
        ? tiles.map((f) => (
            <View key={f.label} display="grid" {...keep}>
              <Tile figure={f.figure} label={f.label} note={f.note && t(f.note)} href={f.href} />
            </View>
          ))
        : Array.from({ length: PLACES }, (_, i) => (
            <View key={i} aria-hidden {...keep} rounded={8} borderWidth={1} borderColor="var(--border)" bg="var(--card)" />
          ))}
    </View>
  )
}

/** Kai's price beside Jev's, from the price list when the page opens (lib/tally `kaiPrice`). */
export function KaiPrice() {
  const { t } = useI18n()
  return (
    <Ready reading={usePricing()} what={t("Kai's price")}>
      {(doc) => (
        <Even>
          {kaiPrice(doc).map((f) => (
            <Tile key={f.label} figure={f.figure} label={t(f.label)} note={f.note && t(f.note)} href={f.href} />
          ))}
        </Even>
      )}
    </Ready>
  )
}

/** The Kai section's headline: the Decision Suite's count once every row of it holds both figures, else the harness suites Kai leads, from the same runs as the hero; a plain heading until the runs and the model list are read. */
export function KaiTitle() {
  const { t } = useI18n()
  const c = useClaim()
  return <>{t(c?.claim?.lede ?? kaiHeadline(record(c?.kai.index.wins ?? [])))}</>
}

/** The Kai section's one number and its sentence, from the same runs; nothing until they are read. */
export function KaiRecord() {
  const { t } = useI18n()
  const kai = ready(useKai())
  if (!kai) return null
  const v2 = record(kai.index.wins)
  const [won] = kaiTiles(v2, named(kai.run))
  return won ? <Stat figure={won.figure} label={t(won.label)} note={t(kaiLede(v2, kai.index.wins, named(kai.run)))} href="#leaderboard" /> : null
}

/* ---------------- Enso's headline and figure ---------------- */

/** The Enso section's headline, from its research runs (lib/enso `headline`); a plain heading until they are read. */
export function EnsoTitle() {
  const { t } = useI18n()
  return <>{t(headline(ready(useEnso())))}</>
}

/** The Enso section's one number: its GPQA Diamond run beside Opus 4.8's (lib/enso `stat`); nothing until the runs are read. */
export function EnsoStat() {
  const { t } = useI18n()
  const e = ready(useEnso())
  const s = e ? stat(e) : null
  return s ? <Stat figure={s.figure} label={t(s.label)} note={s.note && t(s.note)} href={s.href} /> : null
}

/* ---------------- the leaderboard: Kai against Jev ---------------- */

type Sort = 'lead' | 'kai' | 'jev' | 'name'
type Metric = 'acc' | 'ece'

function fig(r: IndexRow, who: 'kai' | 'jev', m: Metric) {
  return m === 'acc' ? rate(who === 'kai' ? r.kai : r.jev) : ece(who === 'kai' ? r.kaiEce : r.jevEce)
}
/** When a row's runs ended: one date when both sides ran the same day, both when they did not. */
function measuredOn(r: IndexRow, t: (source: string) => string) {
  const k = r.kaiEnded ? day(r.kaiEnded) : null
  const j = r.jevEnded ? day(r.jevEnded) : null
  return k && j && k !== j ? `Kai ${k} · Jev ${j}` : (k ?? j ?? t('undated'))
}
function leadText(r: IndexRow, m: Metric) {
  const g = lead(r, m)
  if (g == null) return '–'
  return m === 'acc' ? points(g) : `${g >= 0 ? '−' : '+'}${Math.abs(g).toFixed(3)}`
}
const STAND = { won: 'win', level: 'level', behind: 'loss', unscored: 'unscored' } as const

/** Kai against Jev on every suite it leads, once the research runs are read: a chart or a table, sortable, exportable, shareable. */
export function Leaderboard() {
  const { t } = useI18n()
  return (
    <Ready reading={useKai()} what={t("Kai's research runs")}>
      {(kai) => <Ranking kai={kai} />}
    </Ready>
  )
}

function Ranking({ kai }: { kai: Kai }) {
  const { t } = useI18n()
  const [view, setView] = useParam('view', 'chart', ['chart', 'table'] as const)
  const [sort, setSort] = useParam<Sort>('sort', 'lead', ['lead', 'kai', 'jev', 'name'])
  const [metric, setMetric] = useParam<Metric>('metric', 'acc', ['acc', 'ece'])

  const rows = kai.index.wins
  const tally = record(rows)
  const shown = useMemo(() => {
    const val = (r: IndexRow, who: 'kai' | 'jev') => (metric === 'acc' ? r[who] : who === 'kai' ? r.kaiEce : r.jevEce)
    const by: Record<Sort, (a: IndexRow, b: IndexRow) => number> = {
      lead: (a, b) => (lead(b, metric) ?? -Infinity) - (lead(a, metric) ?? -Infinity),
      kai: (a, b) => (metric === 'acc' ? -1 : 1) * ((val(a, 'kai') ?? 0) - (val(b, 'kai') ?? 0)),
      jev: (a, b) => (metric === 'acc' ? -1 : 1) * ((val(a, 'jev') ?? 0) - (val(b, 'jev') ?? 0)),
      name: (a, b) => a.label.localeCompare(b.label),
    }
    // The board publishes the suites Kai leads on the metric drawn.
    return [...rows].filter((r) => verdict(r, metric) === 'won').sort(by[sort])
  }, [rows, sort, metric])
  const top = metric === 'acc' ? 1 : Math.max(...shown.flatMap((r) => [r.kaiEce ?? 0, r.jevEce ?? 0]), 0.0001)

  const csv = () =>
    shown.map((r) => ({
      suite: r.label,
      kai_accuracy: r.kai,
      jev_accuracy: r.jev,
      kai_ece: r.kaiEce,
      jev_ece: r.jevEce,
      lead: lead(r, metric),
      verdict: verdict(r, metric),
      source: 'research run',
      kai_measured: r.kaiEnded?.slice(0, 10) ?? null,
      jev_measured: r.jevEnded?.slice(0, 10) ?? null,
    }))

  return (
    <YStack>
      <Text render="p" display="block" fontSize="$4" lineHeight="1.6rem" color={INK}>
        {t('{won} suites won · mean accuracy across these {total} suites {kai} against {jev}', {
          won: (
            <Text fontFamily={MONO} fontWeight="600" color={OURS} $platform-web={FIGURES}>
              {tally.won}
            </Text>
          ),
          total: tally.total,
          kai: (
            <Text fontFamily={MONO} fontWeight="600" color={OURS} $platform-web={FIGURES}>
              {rate(tally.kai)}
            </Text>
          ),
          jev: (
            <Text fontFamily={MONO} color={THEM} $platform-web={FIGURES}>
              {rate(tally.jev)}
            </Text>
          ),
        })}
      </Text>
      <Bar>
        <Seg label={t('Metric')} value={metric} options={[{ id: 'acc', name: t('Accuracy') }, { id: 'ece', name: t('Calibration error') }]} onChange={setMetric} />
        <Seg label={t('View')} value={view} options={[{ id: 'chart', name: t('Chart') }, { id: 'table', name: t('Table') }]} onChange={setView} />
        <Seg
          label={t('Sort')}
          value={sort}
          options={[
            { id: 'lead', name: t('Largest lead') },
            { id: 'kai', name: 'Kai' },
            { id: 'jev', name: 'Jev' },
            { id: 'name', name: t('Name') },
          ]}
          onChange={setSort}
        />
        <Exports name={`kai-vs-jev-${metric}`} rows={csv} />
      </Bar>

      {view === 'chart' ? (
        <YStack role="list" aria-label={metric === 'acc' ? t('Kai and Jev on each suite, accuracy, higher is better') : t('Kai and Jev on each suite, calibration error, lower is better')}>
          {shown.map((r) => {
            const v = verdict(r, metric)
            const kv = metric === 'acc' ? r.kai : r.kaiEce
            const jv = metric === 'acc' ? r.jev : r.jevEce
            return (
              <View
                key={r.label}
                role="listitem"
                display="grid"
                gridTemplateColumns="1fr"
                items="center"
                gap={8}
                py={10}
                borderBottomWidth={1}
                borderColor={TRACK}
                $sm={{ gridTemplateColumns: 'minmax(120px, 30%) minmax(0, 1fr) max-content', gap: 12 }}
              >
                <YStack gap={2}>
                  <Text fontSize="$2" color={INK}>
                    {r.label}
                  </Text>
                  <Text fontSize="$1" color={DIM} $platform-web={FIGURES}>
                    {measuredOn(r, t)}
                  </Text>
                </YStack>
                <YStack gap={4}>
                  {(['kai', 'jev'] as const).map((who) => {
                    const x = who === 'kai' ? kv : jv
                    return (
                      <XStack key={who} items="center" gap={8}>
                        <Text width={28} fontSize="$1" color={DIM}>
                          {who === 'kai' ? 'Kai' : 'Jev'}
                        </Text>
                        <View flex={1} height={8} rounded={2} bg={TRACK} overflow="hidden">
                          <View width={`${Math.min(100, ((x ?? 0) / top) * 100)}%`} height="100%" bg={who === 'kai' ? OURS : THEM} transition="quick" />
                        </View>
                        <Text minW={52} text="right" fontFamily={MONO} fontSize="$2" color={who === 'kai' ? OURS : THEM} $platform-web={FIGURES}>
                          {fig(r, who, metric)}
                        </Text>
                      </XStack>
                    )
                  })}
                </YStack>
                <XStack items="center" gap={10} $sm={{ justify: 'flex-end' }}>
                  <Text fontFamily={MONO} fontSize="$3" color={v === 'unscored' ? THEM : INK} $platform-web={FIGURES}>
                    {leadText(r, metric)}
                  </Text>
                  <Mark s={STAND[v]} />
                </XStack>
              </View>
            )
          })}
        </YStack>
      ) : (
        <Table>
          <thead>
            <tr>
              <Th left>{t('Suite')}</Th>
              <Th>Kai</Th>
              <Th>Jev</Th>
              <Th>{t('Lead')}</Th>
              <Th left>{t('Result')}</Th>
              <Th left>{t('Measured')}</Th>
            </tr>
          </thead>
          <tbody>
            {shown.map((r) => (
              <Tr key={r.label}>
                <Td left>{r.label}</Td>
                <Td tone="ours">{fig(r, 'kai', metric)}</Td>
                <Td tone="rest">{fig(r, 'jev', metric)}</Td>
                <Td>{leadText(r, metric)}</Td>
                <Td left>
                  <Mark s={STAND[verdict(r, metric)]} />
                </Td>
                <Td left>{measuredOn(r, t)}</Td>
              </Tr>
            ))}
          </tbody>
        </Table>
      )}
      <Text render="p" display="block" mt={12} fontSize="$1" lineHeight="1.3rem" color={DIM}>
        {t('Every cell a research run of {run} and of Jev, on the same questions.', { run: named(kai.run) })}{' '}
        {metric === 'ece'
          ? t('Calibration error is expected calibration error, lower is better: these are the {n} suites where Kai’s is lower, and a lead is by how much.', { n: shown.length })
          : t('Accuracy: higher is better; a lead is in percentage points.')}{' '}
        {t('Suites measure different tasks, so their rows are compared within a row, not across.')}
      </Text>
    </YStack>
  )
}

/* ---------------- the frontier explorer ---------------- */

/** The chart is drawn at the width it is shown, so its type stays the page's size from a phone to a wide screen. */
const geometry = (width: number) => {
  const narrow = width < 560
  return { W: width, H: narrow ? Math.round(width * 1.1) : 440, PAD: { l: narrow ? 40 : 56, r: narrow ? 12 : 24, t: 24, b: 56 }, narrow }
}
/** A label's box, guessed from its length at the chart's type size. */
const LABEL = { w: 6.6, h: 14 }

/**
 * Accuracy against what the run's tokens cost at list prices, one benchmark at
 * a time, read from the research runs and the price list when the page opens
 * (lib/enso): the boards where the router is on the frontier, every point a
 * run. Until they are read it says so; if they cannot be, it says that.
 */
export function Frontier() {
  const { t } = useI18n()
  return (
    <Ready reading={useEnso()} what={t("Enso's research runs")}>
      {(e) => (e.frontier.length ? <Explorer benches={e.frontier} at={atList(e)} /> : null)}
    </Ready>
  )
}

/** One benchmark's runs, their Pareto-efficient ones joined; hover or focus a point for its record. `at` names the price list the costs are at. */
function Explorer({ benches, at }: { benches: FrontierBench[]; at: string }) {
  const { t } = useI18n()
  const ids = benches.map((b) => b.id)
  const [benchId, setBench] = useParam('bench', ids[0] ?? '', ids)
  const [active, setActive] = useState<Point | null>(null)
  const [width, setWidth] = useState(760)
  const bench = benches.find((b) => b.id === benchId) ?? benches[0]
  const pts = useMemo(() => bench?.points ?? [], [bench])
  const front = useMemo(() => frontier(pts), [pts])
  const onFront = useMemo(() => new Set(front.map((p) => p.model)), [front])
  if (!bench) return null
  const { W, H, PAD, narrow } = geometry(width)

  const lo = Math.min(...pts.map((p) => p.price)) / 1.6
  const hi = Math.max(...pts.map((p) => p.price)) * 1.6
  const smin = Math.floor(Math.min(...pts.map((p) => p.score)) / 5) * 5
  const smax = Math.min(100, Math.ceil(Math.max(...pts.map((p) => p.score)) / 5) * 5)
  const x = (price: number) => PAD.l + ((Math.log10(price) - Math.log10(lo)) / (Math.log10(hi) - Math.log10(lo))) * (W - PAD.l - PAD.r)
  const y = (score: number) => PAD.t + ((smax - score) / Math.max(1, smax - smin)) * (H - PAD.t - PAD.b)
  const ticks = (narrow ? [0.1, 1, 10, 100] : [0.1, 0.3, 1, 3, 10, 30, 100, 300]).filter((t) => t >= lo && t <= hi)
  const step = narrow && smax - smin > 20 ? 10 : 5
  const yticks = Array.from({ length: Math.floor((smax - smin) / step) + 1 }, (_, i) => smin + i * step)
  const stair = front.flatMap((p, i) => (i ? [`${x(p.price)},${y(front[i - 1].score)}`, `${x(p.price)},${y(p.score)}`] : [`${x(p.price)},${y(p.score)}`]))
  if (front.length) stair.push(`${W - PAD.r},${y(front[front.length - 1].score)}`)

  // Labels: Hanzo's first, then the frontier's, each where it collides with none placed before it; the rest are in the tooltip and the table.
  const labels = new Map<string, { x: number; y: number; anchor: 'start' | 'end' }>()
  const placed: { x0: number; x1: number; y0: number; y1: number }[] = []
  const dots = pts.map((p) => ({ x: x(p.price), y: y(p.score) }))
  for (const p of [...pts.filter((q) => q.ours), ...front.filter((q) => !q.ours)]) {
    if (narrow && !p.ours) continue
    const cx = x(p.price)
    const cy = y(p.score)
    const w = p.model.length * LABEL.w
    for (const [dx, dy, anchor] of [[10, -8, 'start'], [10, 16, 'start'], [-10, -8, 'end'], [-10, 16, 'end']] as const) {
      const x0 = anchor === 'start' ? cx + dx : cx + dx - w
      const r = { x0, x1: x0 + w, y0: cy + dy - LABEL.h + 3, y1: cy + dy + 3 }
      const inside = r.x0 >= 0 && r.x1 <= W && r.y0 >= 0 && r.y1 <= H - PAD.b
      const hits = placed.some((o) => r.x0 < o.x1 && r.x1 > o.x0 && r.y0 < o.y1 && r.y1 > o.y0)
      const covers = dots.some((d) => d.x > r.x0 - 4 && d.x < r.x1 + 4 && d.y > r.y0 - 4 && d.y < r.y1 + 4)
      if (inside && !hits && !covers) {
        placed.push(r)
        labels.set(p.model, { x: cx + dx, y: cy + dy, anchor })
        break
      }
    }
  }
  const tipLeft = active ? x(active.price) < W * 0.55 : true

  const rows = () =>
    pts.map((p) => ({ system: p.model, benchmark: bench.label, accuracy: p.shown, list_cost_usd: p.price, priced: at, tag: p.tag, ended: p.ended, pareto_efficient: onFront.has(p.model), run: p.href }))

  return (
    <YStack>
      <Bar>
        <XStack items="center" gap={8} maxW="100%" minW={0}>
          <Text fontSize="$1" color={DIM} letterSpacing={0.6} textTransform="uppercase">
            {t('Benchmark')}
          </Text>
          <Picker aria-label={t('Benchmark')} value={bench.id} onChange={(e) => setBench(e.target.value)} maxW="100%">
            {benches.map((b) => (
              <option key={b.id} value={b.id}>
                {t('{label} · {n} runs', { label: b.label, n: b.points.length })}
              </option>
            ))}
          </Picker>
        </XStack>
        <Exports name={`frontier-${bench.id}`} rows={rows} />
      </Bar>
      <View position="relative" width="100%" onLayout={(e) => setWidth(Math.max(280, Math.round(e.nativeEvent.layout.width)))}>
        <svg viewBox={`0 0 ${W} ${H}`} width="100%" role="img" aria-label={t('{label}: accuracy against what the run cost {at}, log scale. {front} of {n} runs are Pareto-efficient: {models}.', { label: bench.label, at, front: front.length, n: pts.length, models: front.map((p) => p.model).join(', ') })} display="block" overflow="visible">
          {yticks.map((t) => (
            <g key={`y${t}`}>
              <line x1={PAD.l} x2={W - PAD.r} y1={y(t)} y2={y(t)} stroke={LINE} />
              <text x={PAD.l - 8} y={y(t) + 4} textAnchor="end" fill={DIM} fontSize={11} fontFamily="var(--font-mono, monospace)">
                {t}%
              </text>
            </g>
          ))}
          {ticks.map((t) => (
            <g key={`x${t}`}>
              <line x1={x(t)} x2={x(t)} y1={PAD.t} y2={H - PAD.b} stroke={TRACK} />
              <text x={x(t)} y={H - PAD.b + 18} textAnchor="middle" fill={DIM} fontSize={11} fontFamily="var(--font-mono, monospace)">
                {dollars(t)}
              </text>
            </g>
          ))}
          <text x={PAD.l} y={H - 8} fill={DIM} fontSize={11} letterSpacing={0.6}>
            {t('LIST-PRICE COST OF THE WHOLE SET, $, LOG SCALE')}
          </text>
          <polyline points={stair.join(' ')} fill="none" stroke="var(--muted-foreground)" strokeWidth={1.4} strokeDasharray="5 4" />
          {pts.map((p) => {
            const f = onFront.has(p.model)
            return (
              <g key={p.model}>
                <circle
                  cx={x(p.price)}
                  cy={y(p.score)}
                  r={p.ours ? 7 : 4.5}
                  fill={p.ours ? OURS : f ? THEM : 'var(--background)'}
                  stroke={p.ours ? OURS : THEM}
                  strokeWidth={1.4}
                  tabIndex={0}
                  role="button"
                  aria-label={
                    f
                      ? t('{model}, {score} for {cost}, run {tag} of {date}, Pareto-efficient', { model: p.model, score: p.shown, cost: dollars(p.price), tag: p.tag ?? t('untagged'), date: date(p.ended) })
                      : t('{model}, {score} for {cost}, run {tag} of {date}', { model: p.model, score: p.shown, cost: dollars(p.price), tag: p.tag ?? t('untagged'), date: date(p.ended) })
                  }
                  onMouseEnter={() => setActive(p)}
                  onMouseLeave={() => setActive((a) => (a === p ? null : a))}
                  onFocus={() => setActive(p)}
                  onBlur={() => setActive((a) => (a === p ? null : a))}
                  cursor="pointer"
                />
                {active === p ? <circle cx={x(p.price)} cy={y(p.score)} r={(p.ours ? 7 : 4.5) + 4} fill="none" stroke={INK} strokeWidth={1.5} pointerEvents="none" /> : null}
                {labels.has(p.model) ? (
                  <text x={labels.get(p.model)!.x} y={labels.get(p.model)!.y} textAnchor={labels.get(p.model)!.anchor} fill={p.ours ? OURS : THEM} fontSize={12} fontWeight={p.ours ? 600 : 400} pointerEvents="none">
                    {p.model}
                  </text>
                ) : null}
              </g>
            )
          })}
        </svg>
        {active ? (
          <YStack
            position="absolute"
            {...(tipLeft ? { l: x(active.price) + 12 } : { r: W - x(active.price) + 12 })}
            t={y(active.score) + 12}
            px={12}
            py={10}
            rounded={8}
            borderWidth={1}
            borderColor={LINE}
            bg="var(--card)"
            pointerEvents="none"
            minW={190}
            z={2}
          >
            <Text fontSize="$2" color={INK} fontWeight={active.ours ? '600' : '500'}>
              {active.model}
            </Text>
            <Text fontSize="$1" color={SOFT}>
              {bench.label} · {active.tag ?? t('untagged')} · {date(active.ended)}
            </Text>
            <Text fontFamily={MONO} fontSize="$2" color={INK} $platform-web={FIGURES}>
              {t('{score} · {cost} for the run', { score: active.shown, cost: dollars(active.price) })}
            </Text>
            <Text fontSize="$1" color={DIM}>
              {onFront.has(active.model) ? t('A research run · Pareto-efficient') : t('A research run')}
            </Text>
          </YStack>
        ) : null}
      </View>
      <Text render="p" display="block" mt={10} fontSize="$1" lineHeight="1.3rem" color={DIM}>
        {t(
          "One benchmark at a time: the frontier is drawn only among runs of the same benchmark, never across two. Filled points are Pareto-efficient — no other run scores higher for less. Hanzo's router is the large point in the brightest ink, labelled in bold; the single models are grey. A run's cost is the input and output tokens it records on the whole question set at the price list's rate for its own model id, the router's included, {at}. Hover or tab to a point for its record.",
          { at },
        )}
      </Text>
      <YStack render="details" mt={8}>
        <Text render="summary" fontSize="$2" color={SOFT} cursor="pointer">
          {t('The {n} runs as a table', { n: pts.length })}
        </Text>
        <Table>
          <thead>
            <tr>
              <Th left>{t('System')}</Th>
              <Th>{t('Accuracy')}</Th>
              <Th>{t('Run cost')}</Th>
              <Th left>{t('Tag, date')}</Th>
              <Th>{t('Pareto')}</Th>
            </tr>
          </thead>
          <tbody>
            {pts.map((p) => (
              <Tr key={p.model}>
                <Td left>{p.model}</Td>
                <Td>{p.shown}</Td>
                <Td>{dollars(p.price)}</Td>
                <Td left>
                  {p.tag ?? '–'} · {date(p.ended)}
                </Td>
                <Td>{onFront.has(p.model) ? t('yes') : ''}</Td>
              </Tr>
            ))}
          </tbody>
        </Table>
      </YStack>
    </YStack>
  )
}