hanzo.ai/e2e/gates/ladder.spec.ts

import { test, expect, type Page } from '@playwright/test'
import { serveExport } from './export'
import { serve } from './api'
import { api } from './revision'
import { FIELD, PRICED, lab } from './field'
import { toPricing } from '../../lib/api/read'
import REPORTED from '../../lib/data/gpqa-reported.json' with { type: 'json' }
import { CODE, GPQA, NEW, SEEN, caveat, claim, date, derive, headline, lines, listed, pct, published, short, stat, tile, usd } from '../../lib/enso'

/**
 * ENSO'S BOARDS AND LEAD ARE THE RESEARCH RUNS AT LIST PRICES, READ WHEN THE PAGE OPENS.
 *
 * The gate serves the pages invented `enso.*` runs and the price list they are
 * priced at (./field), and holds every place Enso's figures are drawn —
 * /benchmarks/gpqa's board, /enso's lead and boards, /models/enso's boards,
 * /benchmarks' Enso section and its frontier, the home page's tile — to what
 * lib/enso derives from exactly those: a system's frontier run, else its v1
 * run, else its fill run, over the whole set; a v2 run, a degraded run and a run over part of the
 * set never on a board; every cost a run's tokens at the list's rate for its
 * own model id, the router's included, and never the cost a run files; an
 * Enso row drawn on a board only while it outscores every single model
 * (lib/enso `published`), the board not drawn while none does; the pool's
 * oracle never said, nor its arms, on any page (owner, 2026-10-16); Enso routed on new
 * questions against the best single model and on questions it has seen, no
 * routed run a board row or a comparison, a seen figure never without its set;
 * the GPQA chart each single model at its best priced run, each tier on questions it
 * has seen, a published score where no run measured its model, and the frontier
 * through them, Enso's tiers on it (e2e/unit/field holds its figures by hand). The multiples below
 * are worked by hand from ./field, so lib/enso cannot agree with itself. With
 * nothing served each section says the API is unreachable and draws no figure;
 * with no price list the boards draw no cost and the lines are not said.
 */

const LIST = toPricing(PRICED)!
const ENSO = derive(FIELD, LIST)!
const BOARD = (id: string) => ENSO.boards.find((b) => b.id === id)!
const ROW = (id: string, system: string) => BOARD(id).rows.find((r) => r.system === system)!
/** The cost a board row's run filed, which no board prints. */
const FILED = (href: string) => FIELD.find((r) => href.endsWith(encodeURIComponent(r.id)))?.measures?.find((m) => m.metric === 'cost_usd')?.value ?? null
/** The rows a page draws of a board: the single models, and ours while they top every one. */
const DRAWN = (id: string) => published(BOARD(id))
/** The pool's oracle as the field files it (189 of 198 with 4 arms), which no page states. */
const ORACLE = pct(189 / 198)
/** What the ceiling under a board was said in: the pool, its arms, or the word. */
const POOL = /ceiling|\barms?\b|pool/i
/** The list's own date, as every line says it. */
const ON = 'at list prices, Oct 1, 2026'

let server: Awaited<ReturnType<typeof serveExport>>
test.beforeAll(async () => {
  server = await serveExport()
})
test.afterAll(async () => {
  await server.close()
})

/** The runs at the research API and the price list beside them, as the page reads both. */
const served = async (page: Page, list: unknown = PRICED) => {
  await serve(page, { '/v1/pricing': list })
  await page.route(api, (r) => r.fulfill({ json: { data: FIELD, total: FIELD.length } }))
}
/** Enso routed, as the fixture's runs hold it: hand-written from ./field. */
const ROUTING = ENSO.routing!
const SAID = {
  new: `${NEW}: Enso Ultra ${pct(140 / 150)} at $21.50 per 1,000 questions, Enso ${pct(136 / 150)} at $13.25, against ${pct(133 / 150)} for the best single model at $15.40`,
  cheap: `Enso Flash, the low-cost option on new questions: $2.75 per 1,000 questions against $15.40 for the best single model, at ${pct(125 / 150)}`,
  seen: `${SEEN}: Enso Ultra ${pct(190 / 198)}, Enso ${pct(187 / 198)}, Enso Flash ${pct(180 / 198)}`,
}
/** Every place a text states a figure from questions it has seen has that set beside it: named before it in its sentence, or right after it. */
const unlabelled = (text: string) =>
  ROUTING.seen.flatMap((r) => {
    const f = pct(r.accuracy)
    const out: string[] = []
    for (let i = text.indexOf(f); i >= 0; i = text.indexOf(f, i + 1)) {
      const before = text.slice(Math.max(0, i - 80), i)
      const after = text.slice(i + f.length, i + f.length + 30)
      if (!/questions it has seen/.test(before) && !/^ · questions it has seen/.test(after)) out.push(text.slice(Math.max(0, i - 40), i + 40))
    }
    return out
  })
/** A page's text, the whole of its main. */
const text = (page: Page) => page.locator('main').last().evaluate((main) => (main.textContent ?? '').replace(/\s+/g, ' '))

test('a board reads one run a system, at frontier, v1 or fill, the whole set only, and never a ceiling as a score', () => {
  expect(BOARD(GPQA).rows.map((r) => [r.system, r.tag])).toEqual([
    ['enso', 'frontier'],
    ['enso-ultra', 'frontier'],
    ['wide-5', 'frontier'],
    ['mid-4', 'frontier'],
    ['opus-4.8', 'frontier'],
    ['solo-9', 'v1'],
    ['enso-flash', 'frontier'],
    ['cheap-3', 'frontier'],
  ])
  // v1 where the frontier read has none, and never v2; fill where a system has neither.
  expect(ROW(CODE, 'opus-4.8').tag).toBe('v1')
  expect(ROW(CODE, 'late-7').tag).toBe('fill')
  // The router answers as many as the pool's best single arm: level, which no line says.
  expect(ENSO.level).toBe('level')
  // An Enso tier a single model beats is no row a page draws, and the router, which tops them, is.
  expect(DRAWN(GPQA).map((r) => r.system)).toEqual(BOARD(GPQA).rows.map((r) => r.system).filter((s) => s !== 'enso-flash'))
  expect(DRAWN(CODE).map((r) => r.system)).not.toContain('enso-flash')
  for (const id of [GPQA, CODE]) {
    const rival = Math.max(...DRAWN(id).filter((r) => !r.ours).map((r) => r.accuracy))
    for (const r of DRAWN(id).filter((x) => x.ours)) expect(r.accuracy, `${id}: ${r.system}`).toBeGreaterThan(rival)
  }
  for (const b of ENSO.boards) expect(b.rows.map((r) => r.system), b.id).not.toEqual(expect.arrayContaining([expect.stringMatching(/^pool-oracle|^half|^blank|^gap/)]))
  // Every router point drawn on a frontier is on it, and a board is drawn only while one is.
  expect(ENSO.frontier.map((f) => f.id)).toEqual([GPQA, CODE])
  for (const f of ENSO.frontier) expect(f.points.some((p) => p.ours), f.id).toBe(true)
  expect(ENSO.frontier[0].points.map((p) => p.model)).not.toContain('enso-ultra')
  // No routed run is a board row, a frontier point or a comparison.
  for (const b of ENSO.boards) expect(b.rows.filter((r) => r.system === 'best-single' || (r.tag ?? '').startsWith('seen') || r.tag === '2.0'), b.id).toEqual([])
  for (const f of ENSO.frontier) expect(f.points.map((p) => p.model), f.id).not.toContain('best-single')
  expect(ENSO.gpqa?.enso.tag).toBe('frontier')
})

test('Enso routed: the tiers ahead of the best single model on new questions, the low-cost one by its cost, the tiers on questions they have seen', () => {
  // Each system's newest run on new questions: Ultra's 140 of 150, not its earlier 120.
  expect(ROUTING.fresh.map((r) => [r.system, r.correct, r.n, r.per1k])).toEqual([
    ['enso-ultra', 140, 150, 21.5],
    ['enso', 136, 150, 13.25],
  ])
  expect([ROUTING.best.system, ROUTING.best.name, ROUTING.best.correct, ROUTING.best.per1k]).toEqual(['best-single', 'Best single model', 133, 15.4])
  // Flash trails the best single model, so it is said by its cost alone.
  expect([ROUTING.cheap?.system, ROUTING.cheap?.correct]).toEqual(['enso-flash', 125])
  expect(ROUTING.seen.map((r) => [r.system, r.correct, r.n])).toEqual([
    ['enso-ultra', 190, 198],
    ['enso', 187, 198],
    ['enso-flash', 180, 198],
  ])
  // A best single model ahead of every tier takes Enso routed off the pages; a low-cost tier dearer than it is not said.
  const at = (system: string, correct: number, per1k: number) => (r: (typeof FIELD)[number]) =>
    r.id === `${GPQA}-heldout-2.0-${system}`
      ? { ...r, measures: [{ category: 'all', metric: 'accuracy', value: correct / 150, n: correct, of: 150 }, { category: 'all', metric: 'usd_per_1k', value: per1k }] }
      : r
  expect(derive(FIELD.map(at('best-single', 141, 15.4)), LIST)!.routing).toBeNull()
  expect(derive(FIELD.map(at('enso-flash', 125, 16)), LIST)!.routing!.cheap).toBeNull()
  expect(derive(FIELD.filter((r) => r.system !== 'best-single'), LIST)!.routing).toBeNull()
})

test("a single model's cost is its tokens at its own list rate; an Enso run's is the cost the API served, the router named by the dearest tier", () => {
  // Opus 4.8: 80,000 in at $13 and 290,000 out at $61. enso: the $5.077 its run is served with, the router's rates enso-ultra's.
  expect(ROW(GPQA, 'enso').sku?.id).toBe('enso-ultra')
  expect(ROW(GPQA, 'enso').cost).toBeCloseTo(5.077, 9)
  expect(ROW(GPQA, 'opus-4.8').sku?.id).toBe('anthropic/claude-opus-4.8')
  expect(ROW(GPQA, 'opus-4.8').cost).toBeCloseTo(18.73, 9)
  expect(ROW(GPQA, 'enso-ultra').cost).toBeCloseTo(35.1, 9)
  // A run that records no tokens has no cost; the filed cost_usd is never a board's.
  expect(ROW(GPQA, 'solo-9').cost).toBeNull()
  const filed = ENSO.boards.flatMap((b) => b.rows.flatMap((r) => (FILED(r.href) != null ? [{ id: `${b.id} ${r.system}`, cost: r.cost, filed: FILED(r.href) }] : [])))
  expect(filed.length, 'board rows whose run filed a cost').toBeGreaterThan(6)
  for (const r of filed) expect(r.cost, r.id).not.toBe(r.filed)
  expect(listed(FIELD[0], { input: 1, output: 0 })).toBe(5.077)
  expect(listed(FIELD.find((r) => r.system === 'cheap-3')!, { input: 1, output: 0 })).toBeCloseTo(0.055, 9)
})

test('each line divides the two runs at list prices and names the list', () => {
  // Enso routed says GPQA Diamond; the router's own GPQA line is said only without it.
  expect(lines(ENSO).map((l) => l.key)).toEqual(['new', 'cheap', 'seen', 'code'])
  const [fresh, cheap, seen, c] = lines(ENSO).map((l) => l.text)
  expect([fresh, cheap, seen]).toEqual([SAID.new, SAID.cheap, SAID.seen])
  expect(c).toBe(`LiveCodeBench ${pct(158 / 175)} at $9.31 — 3.4× less than Opus 4.8 (${pct(111 / 175)}, $32.06), ${ON}`)
  const plain = derive(FIELD.filter((r) => r.split !== 'heldout' && !r.id.includes('-seen-')), LIST)!
  expect(plain.routing).toBeNull()
  expect(lines(plain)[0].text).toBe(`Enso ${pct(165 / 198)} GPQA Diamond, at $5.08 — 3.7× less than Opus 4.8 (${pct(139 / 198)}, $18.73), ${ON}`)
  expect(caveat(plain)).toBe(
    "The enso measured here is enso-bench's router at the tag each run names, not today's catalog presets: its GPQA Diamond run is frontier, 2026-07-19; its LiveCodeBench run is frontier, 2026-07-19. Each run's cost is its recorded input and output tokens at the price list's rate per million, Oct 1, 2026: Opus 4.8's at anthropic/claude-opus-4.8's $13 in and $61 out; Enso's at the dearest Enso tier's, enso-ultra's $11 in and $47 out, since enso bills the tier that answers and the run does not record which. Opus 4.8 is one model, on the same questions.",
  )
  expect(caveat(ENSO)).toBe(
    "The enso measured here is enso-bench's router at the tag each run names, not today's catalog presets: its LiveCodeBench run is frontier, 2026-07-19. Each run's cost is its recorded input and output tokens at the price list's rate per million, Oct 1, 2026: Opus 4.8's at anthropic/claude-opus-4.8's $13 in and $61 out; Enso's at the dearest Enso tier's, enso-ultra's $11 in and $47 out, since enso bills the tier that answers and the run does not record which. Opus 4.8 is one model, on the same questions.",
  )
  expect(tile(ENSO)).toEqual({
    figure: '3.7× less',
    label: 'Enso against Opus 4.8, GPQA Diamond',
    note: `${pct(165 / 198)} against ${pct(139 / 198)} on the same 198 questions, at $5.08 against $18.73 for the run ${ON}. Both research runs, filed by Hanzo.`,
    href: '/enso',
  })
  expect(headline(ENSO)).toBe(`Enso answers ${pct(165 / 198)} of GPQA Diamond for 3.7× less than Opus 4.8, ${ON}.`)
})

test('a line is said only while its runs hold it, and only with a price list', () => {
  const dear = FIELD.map((r) =>
    r.id === `${GPQA}-test-frontier-enso` ? { ...r, measures: r.measures!.map((m) => (m.metric === 'list_cost_usd' ? { ...m, value: 31.43 } : m)) } : r,
  )
  const e = derive(dear.filter((r) => r.split !== 'heldout' && !r.id.includes('-seen-')), LIST)!
  expect(lines(e).map((l) => l.key)).toEqual(['gpqa', 'code'])
  // The router's run is still said, its cost and the multiple are not.
  expect(lines(e)[0].text).toBe(`Enso ${pct(165 / 198)} GPQA Diamond`)
  expect(tile(e)).toBeNull()
  expect(stat(e)).toBeNull()
  expect(headline(e)).toBe('Enso on the boards it was run on.')
  expect(derive(FIELD.filter((r) => r.benchmark !== GPQA), LIST)).toBeNull()
  // No list: the same boards, no cost on them, no line that needs one, no frontier; Enso routed states its own cost, so it and its chart stand.
  const bare = derive(FIELD, null)!
  expect(bare.boards.map((b) => b.rows.map((r) => r.system))).toEqual(ENSO.boards.map((b) => b.rows.map((r) => r.system)))
  for (const b of bare.boards) for (const r of b.rows) expect(r.cost, `${b.id} ${r.system}`).toBeNull()
  expect(lines(bare).map((l) => l.key)).toEqual(['new', 'cheap', 'seen'])
  expect([tile(bare), stat(bare), caveat(bare), bare.frontier]).toEqual([null, null, null, []])
  // The chart's costs are its own table's, so it stands without the list.
  expect(bare.field!.dots.map((d) => [d.system, d.cost])).toEqual(ENSO.field!.dots.map((d) => [d.system, d.cost]))
})

test('/benchmarks/gpqa draws the board from the runs at list prices, each row linking its run, and no pool or ceiling', async ({ page }) => {
  await served(page)
  await page.goto(server.url + '/benchmarks/gpqa')
  const rows = page.locator(`main [data-board="${GPQA}"] table tbody tr`)
  await expect(rows).toHaveCount(DRAWN(GPQA).length, { timeout: 15_000 })
  for (const [i, r] of DRAWN(GPQA).entries()) {
    const cells = rows.nth(i).locator('td')
    await expect(cells.nth(0)).toContainText(r.system)
    await expect(cells.nth(0).locator(`a[href="${r.href}"]`)).toHaveCount(1)
    await expect(cells.nth(1)).toHaveText(pct(r.accuracy))
    await expect(cells.nth(2)).toHaveText(`${r.correct} of ${r.n}`)
    await expect(cells.nth(3)).toHaveText(r.cost != null ? usd(r.cost) : '–')
    await expect(cells.nth(4)).toHaveText(`${r.tag} · ${date(r.ended)}`)
  }
  // A run's notes and the cost it files are not the page's.
  const board = page.locator(`main [data-board="${GPQA}"]`)
  await expect(board).not.toContainText('Fixture: run')
  for (const r of DRAWN(GPQA)) if (FILED(r.href) != null) await expect(board, r.system).not.toContainText(usd(FILED(r.href)!))
  await expect(board).toContainText(ON)
  await expect(board).not.toContainText('enso-flash')
  await expect(board).not.toContainText(POOL)
  expect(await text(page)).not.toContain(ORACLE)
})

test('/enso leads with Enso routed and the lines the runs hold at list prices, then its GPQA chart and table and the LiveCodeBench board', async ({ page }) => {
  await served(page)
  await page.goto(server.url + '/enso')
  for (const l of lines(ENSO)) {
    const line = page.locator(`#lead [data-lead="${l.key}"]`)
    await expect(line).toContainText(l.text, { timeout: 15_000 })
    await expect(line.locator(`a[href="${l.href}"]`)).toHaveCount(1)
  }
  await expect(page.locator('#lead [data-lead="note"]')).toHaveText(caveat(ENSO)!)
  // GPQA Diamond is Enso routed: the chart and its table, no board of the router's runs; LiveCodeBench keeps its board.
  await expect(page.locator(`#benchmarks [data-board="${GPQA}"]`)).toHaveCount(0)
  await expect(page.locator(`#benchmarks [data-board="${CODE}"] tbody tr`)).toHaveCount(DRAWN(CODE).length)
  await expect(page.locator(`#benchmarks [data-board="${CODE}"]`)).not.toContainText(POOL)
  const table = page.locator('#benchmarks [data-routed]')
  await expect(table.locator('[data-set="new"] thead th').nth(1)).toHaveText('New questions')
  await expect(table.locator('[data-set="new"] tbody tr')).toHaveText([
    /Enso Ultra.*93\.3%.*140 of 150.*\$21\.50/,
    /Enso.*90\.7%.*136 of 150.*\$13\.25/,
    /Best single model.*88\.7%.*133 of 150.*\$15\.40/,
    /Enso Flash.*83\.3% · the low-cost option.*125 of 150.*\$2\.75/,
  ])
  await expect(table.locator('[data-set="seen"] tbody tr')).toHaveText([
    /Enso Ultra.*96\.0% · questions it has seen.*190 of 198/,
    /Enso.*94\.4% · questions it has seen.*187 of 198/,
    /Enso Flash.*90\.9% · questions it has seen.*180 of 198/,
  ])
  // No caption under the chart or over the table: every figure names its set where it stands (owner, 2026-10-17).
  for (const gone of [NEW, 'ones Enso had never seen', 'read from api.hanzo.ai when the page opens'])
    for (const at of ['[data-chart="gpqa"]', '#benchmarks [data-routed]']) await expect(page.locator(at), `${at}: ${gone}`).not.toContainText(gone)
  // No ceiling anywhere on the page, no preset card states a score, and no figure from questions it has seen stands without that set.
  await expect(page.locator('main [data-ceiling], #lead [data-lead="ceiling"]')).toHaveCount(0)
  await expect(page.locator('#presets')).not.toContainText('%')
  const text = await page.locator('main').last().evaluate((m) => (m.textContent ?? '').replace(/\s+/g, ' '))
  expect(unlabelled(text)).toEqual([])
  expect(text).not.toMatch(/tuned|held out|replay/i)
})

/** The list with every published model's id on it, at invented rates dear enough that none beats a tier, so the chart draws them all beside every tier; what each point is comes from `derive` over it (e2e/unit/field holds the figures by hand). */
const SAYS = { ...PRICED, thirdPartyModels: [...PRICED.thirdPartyModels, ...REPORTED.models.map((m, i) => lab(m.id, `Fixture: ${m.name}`, 20 + i, 80 + i))] }
const SAID_ENSO = derive(FIELD, toPricing(SAYS)!)!

/**
 * The plot as drawn, measured in its own units: each point's label box, drawn
 * disc, centre, leader and tooltip, the label type in CSS px, and the plot's
 * size against its card's.
 */
const drawn = (page: Page) =>
  page.locator('[data-chart="gpqa"] svg[data-plot]').evaluate((svg: SVGSVGElement) => {
    const box = (e: SVGGraphicsElement) => {
      const b = e.getBBox()
      return { x0: b.x, x1: b.x + b.width, y0: b.y, y1: b.y + b.height }
    }
    const dots = [...svg.querySelectorAll<SVGGElement>('[data-dot]')].map((g) => {
      const t = g.querySelector<SVGTextElement>(':scope > text')
      const disc = [...g.querySelectorAll<SVGCircleElement>(':scope > circle')].map(box).sort((a, b) => b.x1 - b.x0 - (a.x1 - a.x0))[0]
      return {
        id: g.getAttribute('data-dot')!,
        text: t?.textContent ?? '',
        label: t ? box(t) : null,
        disc,
        x: (disc.x0 + disc.x1) / 2,
        y: (disc.y0 + disc.y1) / 2,
        lead: g.querySelector(':scope > polyline') != null,
        title: g.querySelector(':scope > title')?.textContent ?? '',
        size: t ? parseFloat(getComputedStyle(t).fontSize) * svg.getScreenCTM()!.a : 0,
      }
    })
    const r = svg.getBoundingClientRect()
    return { dots, width: r.width, height: r.height, card: svg.parentElement!.getBoundingClientRect().width, lines: svg.querySelectorAll(':scope > path, :scope > polyline, [data-frontier]').length }
  })

const WIDTHS = [360, 390, 768, 1024, 1440, 1920]
for (const scheme of ['light', 'dark'] as const) {
  for (const width of WIDTHS) {
    test(`/enso's chart at ${width}, ${scheme}: fills its card and stays short, no line, Enso's tiers and the frontier labelled, every label in 11px or more beside its own dot, on no label and no disc`, async ({ page }) => {
      await page.emulateMedia({ colorScheme: scheme, reducedMotion: 'reduce' })
      await page.setViewportSize({ width, height: 900 })
      await served(page, SAYS)
      await page.goto(server.url + '/enso')
      const plot = page.locator('[data-chart="gpqa"] svg[data-plot]')
      await expect(plot).toBeVisible({ timeout: 15_000 })
      await expect(plot).toHaveAttribute('data-plot', width < 768 ? 'phone' : 'wide')
      const f = SAID_ENSO.field!
      expect(f.dots.filter((d) => d.kind === 'reported').length, 'the published scores are drawn').toBe(REPORTED.models.length)
      await expect(plot.locator('[data-dot]')).toHaveCount(f.dots.length)
      // No legend: what a point is lives in its tooltip and the chart's alt text, the frontier among it.
      await expect(page.locator('[data-chart="gpqa"] [data-legend]')).toHaveCount(0)
      const names = f.front.map((s) => f.dots.find((d) => d.system === s)!.name).join(', ')
      await expect(plot).toHaveAttribute('aria-label', /single models tested on the same 198 questions.*Enso's tiers on questions it has seen.*scores reported by a lab or an independent evaluation.*list price/i)
      await expect(plot).toHaveAttribute('aria-label', new RegExp(`The frontier, the points no other beats on both accuracy and cost, is ${names.replace(/[.()]/g, '\\$&')}\\.$`))
      for (const s of ['enso-ultra', 'enso', 'enso-flash']) await expect(plot.locator(`[data-dot="${s}"] > title`)).toContainText('· questions it has seen')
      for (const m of REPORTED.models) {
        const dot = plot.locator(`a[href="${m.source}"] [data-dot="${m.id}"]`)
        await expect(dot).toHaveCount(1)
        await expect(dot.locator('title')).toContainText(`reported by ${m.publisher} (${m.kind})`)
        await expect(dot.locator('circle[stroke-dasharray]')).toHaveCount(1)
      }
      await expect(plot.locator('[data-kind="measured"] circle[stroke-dasharray]')).toHaveCount(0)
      // The frontier is the points' `data-front`, Enso's tiers among them, and no line is drawn through them.
      for (const s of ['enso-ultra', 'enso', 'enso-flash']) await expect(plot.locator(`[data-dot="${s}"][data-front]`), s).toHaveCount(1)
      await expect(plot.locator('[data-front]')).toHaveCount(f.front.length)
      // Ours wear Hanzo's H in the ground's colour on an ink disc; a lab's model its lab's mark. The mark table loads after the page.
      await expect(plot.locator('[data-dot="enso-ultra"] foreignObject svg')).toHaveCount(1)
      await expect(plot.locator('[data-dot="opus-4.8"] foreignObject svg')).toHaveCount(1)
      const marks = await plot.locator('[data-dot]').evaluateAll((gs) =>
        gs.map((g) => {
          const svg = g.querySelector('foreignObject svg') as SVGElement | null
          const disc = g.querySelectorAll('circle')
          return { dot: g.getAttribute('data-dot'), kind: g.getAttribute('data-kind'), mark: svg?.innerHTML ?? null, ink: svg ? getComputedStyle(svg).color : null, disc: getComputedStyle(disc[disc.length - 1]).fill, size: svg?.getBoundingClientRect().width ?? 0 }
        }),
      )
      for (const m of marks.filter((x) => x.kind === 'ours')) {
        expect(m.mark, m.dot!).toContain('M22.21 67V44.6369H0V67H22.21Z')
        expect(m.ink, `${m.dot}'s H stands out of its disc`).not.toBe(m.disc)
      }
      const labs = new Set(f.dots.filter((d) => !d.ours && d.mark && !d.mark.startsWith('fixture/')).map((d) => d.system))
      expect(labs.size, 'a real lab is on the chart').toBeGreaterThan(REPORTED.models.length)
      for (const m of marks.filter((x) => labs.has(x.dot!))) {
        expect(m.mark, `${m.dot} wears its lab's mark`).not.toBeNull()
        expect(m.size, `${m.dot}'s mark`).toBeGreaterThanOrEqual(width < 768 ? 10 : 12)
      }

      const d = await drawn(page)
      expect(d.lines, 'no frontier line, no line between dots').toBe(0)
      // It fills its card, and it is short: wide, at most 460px and 2.4 times as wide as tall or flatter from 1440 up; on a phone, at most 1.35 times as tall as wide.
      expect(d.width, 'the plot fills its card').toBeGreaterThanOrEqual(d.card - 1)
      expect(d.height, 'its height').toBeLessThanOrEqual(width < 768 ? d.width * 1.35 : 460)
      if (width >= 1440) expect(d.width / d.height, 'its aspect').toBeGreaterThanOrEqual(2.2)
      const hit = (a: { x0: number; x1: number; y0: number; y1: number }, b: { x0: number; x1: number; y0: number; y1: number }) => a.x0 < b.x1 - 0.5 && b.x0 < a.x1 - 0.5 && a.y0 < b.y1 - 0.5 && b.y0 < a.y1 - 0.5
      const far = (b: { x0: number; x1: number; y0: number; y1: number }, x: number, y: number) => Math.hypot(Math.max(b.x0 - x, 0, x - b.x1), Math.max(b.y0 - y, 0, y - b.y1))
      for (const p of d.dots) {
        const dot = f.dots.find((x) => x.system === p.id)!
        const figure = pct(dot.accuracy).replace('.', '\\.')
        // Every point's tooltip names it and its figure.
        expect(p.title, `${p.id}'s tooltip`).toContain(`${dot.name} `)
        expect(p.title, `${p.id}'s tooltip`).toContain(pct(dot.accuracy))
        // Ours carry name and figure, the frontier's at least a name; any other is labelled or left to its tooltip.
        if (dot.ours) expect(p.text, `${p.id} is labelled`).toMatch(new RegExp(`^${dot.name} ${figure}$`))
        else if (dot.front) expect(p.text, `${p.id} is labelled`).toMatch(new RegExp(`^${short(dot.name)}( ${figure})?$`))
        else expect(p.text, `${p.id}'s label`).toMatch(new RegExp(`^(${short(dot.name)}( ${figure})?)?$`))
        if (!p.label) continue
        expect(p.size, `${p.id}'s label in CSS px`).toBeGreaterThanOrEqual(11)
        // Beside its own dot: with no leader, nearer it than any other dot; with one, two lines off at most.
        const own = far(p.label, p.x, p.y)
        if (!p.lead) for (const q of d.dots.filter((q) => q !== p)) expect(far(p.label, q.x, q.y), `${p.id}'s label nearer ${q.id}`).toBeGreaterThan(own)
        else expect(own, `${p.id}'s leader`).toBeLessThanOrEqual(dot.ours || dot.front ? d.height : 2 * 14 * 1.4 + 2 * 2 + 30)
        // On no label and no disc, its own included.
        for (const q of d.dots) {
          if (q !== p && q.label) expect(hit(p.label, q.label), `${p.id}'s label on ${q.id}'s`).toBe(false)
          expect(hit(p.label, q.disc), `${p.id}'s label on ${q.id}'s disc`).toBe(false)
        }
      }
      const wide = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth)
      expect(wide, `${width}px: page scrolls sideways by`).toBeLessThanOrEqual(0)
    })
  }
}

test('/enso with no price list draws the boards without a cost and says no multiple; Enso routed states its own cost', async ({ page }) => {
  await page.route((u) => u.pathname === '/v1/pricing', (r) => r.abort('connectionrefused'))
  await page.route(api, (r) => r.fulfill({ json: { data: FIELD, total: FIELD.length } }))
  await page.goto(server.url + '/enso')
  for (const key of ['new', 'cheap', 'seen'] as const) await expect(page.locator(`#lead [data-lead="${key}"]`)).toHaveText(`${SAID[key]}. run`, { timeout: 15_000 })
  await expect(page.locator('#lead [data-lead="gpqa"], #lead [data-lead="code"], #lead [data-lead="note"]')).toHaveCount(0)
  await expect(page.locator('[data-chart="gpqa"]')).toBeVisible()
  const rows = page.locator(`#benchmarks [data-board="${CODE}"] tbody tr`)
  await expect(rows).toHaveCount(DRAWN(CODE).length)
  for (let i = 0; i < DRAWN(CODE).length; i++) await expect(rows.nth(i).locator('td').nth(3)).toHaveText('–')
  await expect(page.locator('main').last()).not.toContainText('less than Opus')
})

test('/models/enso draws both boards, and no pool or ceiling', async ({ page }) => {
  await served(page)
  await page.goto(server.url + '/models/enso')
  for (const id of [GPQA, CODE]) await expect(page.locator(`main [data-board="${id}"] tbody tr`)).toHaveCount(DRAWN(id).length, { timeout: 15_000 })
  for (const id of [GPQA, CODE]) await expect(page.locator(`main [data-board="${id}"]`)).not.toContainText(POOL)
  expect(await text(page)).not.toContain(ORACLE)
})

test('/benchmarks leads its Enso section, and its hero, with the GPQA Diamond run at list prices', async ({ page }) => {
  await served(page)
  await page.goto(server.url + '/benchmarks')
  const s = stat(ENSO)!
  await expect(page.locator('#enso-title')).toHaveText(headline(ENSO), { timeout: 15_000 })
  await expect(page.locator('#enso')).toContainText(s.note)
  await expect(page.locator(`#lead a[href="?bench=${GPQA}#frontier"]`)).toContainText(s.figure)
  await expect(page.locator(`#enso [data-board="${GPQA}"] tbody tr`)).toHaveCount(DRAWN(GPQA).length)
})

// The landing leads GPQA Diamond with the chart /enso draws (components/home/Pareto),
// titled by what its points hold; Frontier's lines left it in 14b522e3.
test('the landing leads GPQA Diamond with the chart /enso draws, titled by its points', async ({ page }) => {
  await served(page, SAYS)
  await page.goto(server.url + '/')
  const f = SAID_ENSO.field!
  await expect(page.locator('#pareto-title')).toHaveText(claim(f), { timeout: 15_000 })
  // The chart is drawn once its card comes into view, as on /enso.
  await page.locator('#pareto').scrollIntoViewIfNeeded()
  await expect(page.locator('#pareto [data-chart="gpqa"] svg[data-plot]')).toBeVisible({ timeout: 15_000 })
  await expect(page.locator('#pareto [data-chart="gpqa"] svg[data-plot] [data-dot]')).toHaveCount(f.dots.length)
  for (const s of ['enso-ultra', 'enso', 'enso-flash']) await expect(page.locator(`#pareto [data-dot="${s}"][data-front]`), s).toHaveCount(1)
  await expect(page.locator('[data-figure="low"], [data-figure="cheaper"]')).toHaveCount(0)
})

for (const path of ['/benchmarks/gpqa', '/enso', '/models/enso']) {
  test(`${path} says the API is unreachable and draws no figure when nothing answers`, async ({ page }) => {
    await page.route(api, (r) => r.abort('connectionrefused'))
    await page.goto(server.url + path)
    await expect(page.locator('main [data-api="unreachable"]').first()).toBeVisible({ timeout: 15_000 })
    const text = (await page.locator('main').last().innerText()).replace(/\s+/g, ' ')
    for (const b of ENSO.boards) for (const r of b.rows) expect(text).not.toContain(pct(r.accuracy))
    for (const r of [...ROUTING.fresh, ROUTING.best, ...ROUTING.seen]) expect(text).not.toContain(pct(r.accuracy))
    expect(text).not.toContain(ORACLE)
  })
}