hanzo.ai/components/benchmarks/Ladder.tsx

'use client'

import { useI18n } from '@hanzo/i18n/react'
import { Ready } from '@/components/api/state'
import { YStack } from '@/components/ui'
import { useEnso } from '@/hooks/useEnso'
import { GPQA, atList, date, pct, published, usd } from '@/lib/enso'
import { Dim, Gloss, Inline, Meta, Note, Table, Td, Th, Tr } from './parts'

/**
 * One benchmark's board for the router and the field, read when the page opens
 * from the research API's `enso.*` runs and the price list (lib/enso): each
 * system's run at enso-bench's `frontier` tag, else its `v1` run, else its
 * `fill` run, over the whole question set. A row is the run: its
 * own system, accuracy, count, what its tokens cost at list price, its tag and
 * date, and a link to its record, with nothing typed in. A system of ours is a
 * row only while it outscores every single model (lib/enso `published`), and a
 * board where none does is not drawn. No pool, arm or ceiling is said (owner,
 * 2026-10-16). Until the runs are read the board says so; if they cannot be,
 * it says that.
 */
export function Ladder({ bench = GPQA }: { bench?: string }) {
  const { t } = useI18n()
  return (
    <Ready reading={useEnso()} what={t("Enso's research runs")}>
      {(e) => {
        const b = e.boards.find((x) => x.id === bench)
        const rows = b ? published(b) : []
        if (!b || !rows.length) return null
        return (
          <YStack {...{ 'data-board': b.id }}>
            <Meta>
              {t('{label} · {id}, split {split} · every row a research run, read from api.hanzo.ai when the page opens · sorted by accuracy', {
                label: b.label,
                id: b.id,
                split: b.split,
              })}
            </Meta>
            <Table>
              <thead>
                <tr>
                  <Th left>{t('System')}</Th>
                  <Th>{t('Accuracy')}</Th>
                  <Th>{t('Correct')}</Th>
                  <Th>{t('Run cost')}</Th>
                  <Th left>{t('Tag, date')}</Th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r) => (
                  <Tr key={r.system}>
                    <Td left wrap>
                      {r.ours ? <strong>{r.system}</strong> : r.system}
                      <Gloss>
                        <Inline href={r.href}>{t('run')}</Inline>
                      </Gloss>
                    </Td>
                    <Td tone={r.ours ? 'ours' : 'rest'}>{pct(r.accuracy)}</Td>
                    <Td>{r.correct != null && r.n != null ? t('{correct} of {n}', { correct: r.correct, n: r.n }) : '–'}</Td>
                    <Td>{r.cost != null ? usd(r.cost) : '–'}</Td>
                    <Td left>
                      <Dim>
                        {r.tag ?? '–'} · {date(r.ended)}
                      </Dim>
                    </Td>
                  </Tr>
                ))}
              </tbody>
            </Table>
            <Note>
              {e.list
                ? t(
                    "Each system's frontier run, else its v1 run, else its fill run: the three put the same prompts to a model. A run cost is the input and output tokens the run records at the price list's rate for its own model id, the router's included, {at}; a dash is a run that records no tokens, a model the list does not price, or a list that could not be read.",
                    { at: atList(e) },
                  )
                : t(
                    "Each system's frontier run, else its v1 run, else its fill run: the three put the same prompts to a model. A run cost is the input and output tokens the run records at the price list's rate for its own model id, the router's included; a dash is a run that records no tokens, a model the list does not price, or a list that could not be read.",
                  )}
            </Note>
          </YStack>
        )
      }}
    </Ready>
  )
}