hanzo.ai/components/benchmarks/Showcase.tsx

import { phrase } from '@hanzo/i18n'
import { T } from '@hanzo/i18n/react'
import { LANE, STUDIES } from '@/lib/benchmarks'
import { BOARD, INDEX, LEDGER, PRODUCTS } from '@/lib/bench-data'
import { Kai, Suite } from './Kai'
import { Coding } from './Coding'
import { Tools } from './Tools'
import { CodeRace } from './CodeRace'
import { EnsoStat, EnsoTitle, Frontier, Headline, KaiPrice, KaiRecord, KaiTitle, Leaderboard } from './board'
import { Ladder } from './Ladder'
import { Library, Sections } from './library'
import {
  Actions, Bars, Block, Chapter, Cloud, Eyebrow, Even, F2, Foot, Go, H1, H2, Inline, Lede, Live, Meta, Note, P, Panel, Part, Rates, Stage, Stat, Table, Td, Th, Tile, Tr,
  elapsed, pc,
 list } from './kit'

/**
 * /benchmarks, told as one story of how Hanzo wins on intelligence, cost and
 * speed, a product at a time: Enso, Kai, Zen 6, the agent harness and the agent
 * platform. Each section opens with one plain headline and one number, then its
 * chart. Then how every number was taken, and every published result on one
 * shelf. The page publishes wins and the product's own measurements; every one is
 * a recorded run (lib/results says which results that is).
 *
 * Every figure comes from BOARD, LEDGER or INDEX in lib/bench-data, which read
 * the run files and the platform bench by name, or is read when the page opens:
 * Kai's research runs (hooks/useKai), Enso's (hooks/useEnso) and the model list.
 * This file is prose and layout: it types no number, and
 * e2e/unit/figures.spec.ts fails on a digit in it.
 */

const { mab, locomo, lme, code, cron, runtime } = INDEX
/** The five products, named once (lib/results). */
const [ENSO, KAI_, ZEN, HARNESS, PLATFORM] = PRODUCTS

const CHAPTERS = [
  { label: ENSO, href: '#enso' },
  { label: KAI_, href: '#kai' },
  { label: ZEN, href: '#zen' },
  { label: HARNESS, href: '#harness' },
  { label: PLATFORM, href: '#platform' },
  { label: phrase('Methods'), href: '#methods' },
  { label: phrase('Every benchmark'), href: '#all' },
]

function Lead() {
  return (
    <Part id="lead">
      <Stage foot={<Headline also={BOARD.also} />}>
        <Eyebrow>
          <Live>
            <T values={{ date: BOARD.measured }}>{'Hanzo AI · Benchmarks · Last measured {date}'}</T>
          </Live>
        </Eyebrow>
        <H1>
          <T>{BOARD.title}</T>
        </H1>
        <Lede>
          <T>{BOARD.lede}</T>
        </Lede>
        <Actions>
          <Go href="#enso" solid>
            <T>The results</T>
          </Go>
          <Go href="#all">
            <T>Every benchmark</T>
          </Go>
        </Actions>
      </Stage>
    </Part>
  )
}

function Enso() {
  return (
    <Chapter id="enso" eyebrow={<T values={{ product: ENSO }}>{'{product} · intelligence per dollar'}</T>} title={<EnsoTitle />}>
      <EnsoStat />
      <Part id="frontier">
        <H2>
          <T>The frontier, one benchmark at a time</T>
        </H2>
        <P>
          <T>
            {
              'Accuracy against what the run cost at list prices, on a log axis, for each board where Enso’s router is on the frontier. Every point is a research run, read when the page opens, and its cost is the tokens it records on the whole question set at the price list’s rate for its own model id. The dashed line joins the runs no other run beats on both.'
            }
          </T>
        </P>
        <Frontier />
      </Part>
      <H2>
        <T>Every system on GPQA Diamond</T>
      </H2>
      <Ladder />
    </Chapter>
  )
}

function Decisions() {
  return (
    <Chapter id="kai" eyebrow={<T values={{ product: KAI_ }}>{'{product} · decisions'}</T>} title={<KaiTitle />}>
      <Suite />
      <KaiRecord />
      <Part id="leaderboard">
        <H2>
          <T>Kai against Jev, suite by suite</T>
        </H2>
        <P>
          <T>
            {
              'The suites Kai leads, both models on the same questions, each row dated by its runs. Sort by the lead, switch to calibration error, draw it as a chart or a table; the view is kept in the address, and the rows are read from the research API when the page opens.'
            }
          </T>
        </P>
        <Leaderboard />
      </Part>
      <YesNo />
      <Trolley />
      <Shortlist />
      <Coding initial={INDEX.coding} />
      <Tools initial={INDEX.tools} />
      <H2>
        <T>Price</T>
      </H2>
      <KaiPrice />
      <Kai />
    </Chapter>
  )
}

/** Kai's yes/no answers beside Jev's, the tests Kai leads on every half (INDEX.yesno). */
function YesNo() {
  const y = INDEX.yesno
  if (!y.rows.length) return null
  return (
    <Part id="yesno">
      <H2>
        <T>Yes or no, read from the state</T>
      </H2>
      <P>
        <T>
          {
            'Production Kai answers a yes/no question with a reader trained for it. The tests below are the ones it leads Jev on, both models given the same questions and the same rows.'
          }
        </T>
      </P>
      <Block id="kai-yesno">
        <Table>
          <thead>
            <tr>
              <Th left>
                <T>Test</T>
              </Th>
              <Th>Kai</Th>
              <Th>Jev</Th>
            </tr>
          </thead>
          <tbody>
            {y.rows.map((r) => (
              <Tr key={r.label}>
                <Td left wrap>
                  <T>{r.label}</T>
                </Td>
                <Td tone="ours">{r.kai}</Td>
                <Td tone="rest">{r.jev}</Td>
              </Tr>
            ))}
          </tbody>
        </Table>
        <Foot>
          <T values={{ kai: y.kai.model, kaiRead: y.kai.measured, jev: y.jev.model, jevRead: y.jev.measured }}>
            {'Kai is {kai}, read {kaiRead}; Jev is {jev} through the API, read {jevRead}. Hanzo-measured; harness private.'}
          </T>
        </Foot>
      </Block>
    </Part>
  )
}

/**
 * The trolley problem (INDEX.trolley): the public benchmark's checks Kai leads
 * Jev on, every one lower is better, and the sealed trolley-structured scenes
 * Kai was qualified on, with the families it decided right every time.
 */
function Trolley() {
  const t = INDEX.trolley
  if (!t.rows.length) return null
  const right = t.sealed.perfect
  return (
    <Part id="trolley">
      <H2>
        <T>The trolley problem, decided on the counts</T>
      </H2>
      <P>
        <T values={{ source: t.source.name, setups: t.source.setups, luna: t.luna.name }}>
          {
            "Kai does not weigh lives by preference. Its policy acts on the counts it grounds from the scene, and escalates to a person where it cannot ground them. On {source}'s {setups} setups, scored by the article's own rules, the checks below are the ones Kai leads Jev on; every check is lower is better, and {luna}'s recorded answers stand beside both."
          }
        </T>
      </P>
      <Block id="kai-trolley">
        <Table>
          <thead>
            <tr>
              <Th left>
                <T>Check</T>
              </Th>
              <Th>Kai</Th>
              <Th>Jev</Th>
              <Th>{t.luna.name}</Th>
            </tr>
          </thead>
          <tbody>
            {t.rows.map((r) => (
              <Tr key={r.key}>
                <Td left wrap>
                  <T>{r.label}</T>
                </Td>
                <Td tone="ours">{r.kai}</Td>
                <Td tone="rest">{r.jev}</Td>
                <Td tone="rest">{r.luna}</Td>
              </Tr>
            ))}
          </tbody>
        </Table>
        <Foot>
          <T
            values={{
              kai: t.kai.model,
              policy: t.kai.policy,
              read: t.kai.measured,
              jev: t.jev.model,
              luna: t.luna.name,
              lunaModel: t.luna.model,
              repo: t.source.repo,
              commit: t.source.commit,
            }}
          >
            {
              "Kai is {kai} through its {policy} policy, read {read}; Jev is {jev} and {luna} is {lunaModel}, each the benchmark's recorded answers. {repo} at {commit}. Hanzo-scored by the article's rules; the scorer reproduces the article's numbers from the recorded answers."
            }
          </T>
        </Foot>
      </Block>
      <P>
        <T
          values={{
            scenes: t.sealed.scenes,
            registers: list(t.sealed.registers),
            families: list(right.families),
            right: right.scenes,
            escalated: list(t.sealed.escalated),
          }}
        >
          {
            'Before any of it, Kai was qualified on {scenes} sealed trolley-structured scenes in two registers it had never read ({registers}), hashed before the model was frozen and read once. Every scene of the {families} families, {right} in all, was decided right, with no wrong course; the {escalated} families, where the harm cannot be counted, were escalated to a person every time.'
          }
        </T>
      </P>
      <Block id="kai-trolley-sealed">
        <Table>
          <thead>
            <tr>
              <Th left>
                <T>Family</T>
              </Th>
              <Th>
                <T>Scenes</T>
              </Th>
              <Th>
                <T>Coverage</T>
              </Th>
              <Th>
                <T>Accuracy</T>
              </Th>
              <Th>
                <T>Wrong</T>
              </Th>
            </tr>
          </thead>
          <tbody>
            {t.sealed.families.map((f) => (
              <Tr key={f.name}>
                <Td left wrap>
                  {f.name}
                </Td>
                <Td tone="ours">{f.scenes}</Td>
                <Td tone="ours">{f.coverage}</Td>
                <Td tone="ours">{f.accuracy}</Td>
                <Td tone="ours">{f.wrong}</Td>
              </Tr>
            ))}
          </tbody>
        </Table>
        <Foot>
          <T values={{ name: t.sealed.name, read: t.sealed.measured }}>
            {
              '{name}, read {read} at the qualified floor. Coverage is the share of scenes grounded; accuracy is of those; wrong counts the courses a grounded scene got wrong. Hanzo-measured; the sealed set is private.'
            }
          </T>
        </Foot>
      </Block>
    </Part>
  )
}

/** The tool shortlist Kai's tool-relevance head ranks, against BM25 alone (INDEX.shortlist). */
function Shortlist() {
  const s = INDEX.shortlist
  const panels = [
    {
      title: phrase('Every request'),
      group: s.all,
      note: (
        <T values={{ n: s.all?.n ?? '–', catalog: s.catalog, k: s.k }}>
          {'{n} requests · {catalog} tools · Recall@{k}: a right tool among the first {k}'}
        </T>
      ),
    },
    {
      title: phrase('Requests for a Hanzo service'),
      group: s.hanzo,
      note: <T values={{ n: s.hanzo?.n ?? '–' }}>{'{n} requests · a service scored as the best of its operations'}</T>,
    },
  ].filter((p) => p.group?.rows.length)
  if (!panels.length) return null
  return (
    <Part id="shortlist">
      <H2>
        <T>Finding the right tool in a large catalog</T>
      </H2>
      <P>
        <T values={{ k: s.k, embedder: s.embedder, catalog: s.catalog, queries: s.queries }}>
          {
            'Kai’s tool-relevance head, in development, ranks a shortlist of {k} tools drawn from the whole catalog. The shortlist is an open embedding model, {embedder}, with a small BM25 term; nothing is trained for it. Here it is scored against BM25 alone on a dev catalog Hanzo assembled from public tool-calling sets and its own API: {catalog} tools, {queries} requests.'
          }
        </T>
      </P>
      <Even>
        {panels.map((p) => (
          <Panel key={p.title} title={<T>{p.title}</T>} href="#shortlist" note={p.note}>
            <Bars
              spans={p.group!.rows.flatMap((r) => [
                { label: `${r.label}, BM25`, value: pc(r.base) },
                { label: phrase('{metric}, shortlist'), values: { metric: r.label }, value: pc(r.ours), ours: true },
              ])}
            />
          </Panel>
        ))}
      </Even>
      <Note>
        <T values={{ when: s.measured }}>{'An internal dev set, not a public benchmark: one run, {when}. Retrieval only, not an agent result.'}</T>
      </Note>
    </Part>
  )
}

function Zen() {
  const z = BOARD.zen
  return (
    <Chapter id="zen" eyebrow={<T values={{ product: ZEN }}>{'{product} · speed on our own hardware'}</T>} title={z.headline}>
      <Stat figure={z.figure} label={z.label} note={z.note} href={z.href} />
      <Even>
        <Panel title={<T>Prefill, tokens a second</T>} href={z.href} note={<T>the low end of a range is the bar</T>}>
          <Rates rows={z.prefill} />
        </Panel>
        <Panel title={<T>Decode, tokens a second</T>} href={z.href} note={<T>one request</T>}>
          <Rates rows={z.decode} />
        </Panel>
      </Even>
    </Chapter>
  )
}

function Harness() {
  const h = BOARD.harness
  return (
    <Chapter
      id="harness"
      eyebrow={<T values={{ product: <T>{HARNESS}</T> }}>{'{product} · what the agent remembers and finds'}</T>}
      title={h.headline}
    >
      <Stat figure={h.figure} label={h.label} note={h.note} href={h.href} />
      <Memory />
      <Graph />
      <Code />
      <CodeRace />
    </Chapter>
  )
}

function Platform() {
  const p = BOARD.platform
  return (
    <Chapter id="platform" eyebrow={<T values={{ product: <T>{PLATFORM}</T> }}>{'{product} · what an agent costs'}</T>} title={p.headline}>
      <Stat figure={p.figure} label={p.label} note={p.note} href={p.href} />
      <Runtime />
      <H2>
        <T>Start-up and cost</T>
      </H2>
      <Even>
        {p.tiles.map((t) => (
          <Tile key={t.label} figure={t.figure} label={t.label} note={t.note} href={t.href} />
        ))}
      </Even>
    </Chapter>
  )
}

function Methods() {
  return (
    <Chapter id="methods" eyebrow={<T>Methods</T>} title={<T>How every number was taken</T>}>
      <Methodology />
      <Studies />
    </Chapter>
  )
}

/** Every benchmark page by product, in the story's order, as plain links, so each is one click away before any script runs. */
function Directory() {
  const products = LEDGER.products
  return (
    <Part id="pages">
      <H2>
        <T>Every benchmark page</T>
      </H2>
      <Even>
        {products.map((p) => (
          <Panel key={p} title={<T>{p}</T>} href={`?product=${encodeURIComponent(p)}#all`} note={<T>filter the shelf to it</T>}>
            {LEDGER.entries
              .filter((e) => e.product === p)
              .map((e) => (
                <P key={e.slug} render="span">
                  <Inline href={e.href}>{e.name}</Inline>
                </P>
              ))}
          </Panel>
        ))}
      </Even>
    </Part>
  )
}

function Shelf() {
  return (
    <Chapter
      id="all"
      eyebrow={<T>Every benchmark</T>}
      title={<T>Every benchmark, every run</T>}
      lede={
        <T values={{ zen: ZEN }}>
          {
            'One shelf for everything above, by the same five products: each Kai revision on each suite it leads, each Enso tier on the frontiers it holds, each {zen} reading, each memory and platform pass. Search it, filter it, pick rows of one benchmark to compare, and open any of them for its history, conditions, hardware, source and the command that reproduces it.'
          }
        </T>
      }
    >
      <Library results={LEDGER.results} entries={LEDGER.entries} />
      <Directory />
    </Chapter>
  )
}

function Memory() {
  return (
    <Part id="memory">
      <H2>
        <T>{LANE.memory.title}</T>
      </H2>
      <P>
        <T>{LANE.memory.what}</T>{' '}
        <T>
          {
            'Each panel is one metric, the baseline and Hanzo on the same data, the same embedder and the same cut-off, drawn on one scale.'
          }
        </T>
      </P>
      <Even>
        <Panel
          title="MemoryAgentBench"
          href="/benchmarks/memoryagentbench"
          note={
            <T values={{ metric: mab.metric, reader: mab.record?.reader ?? '–', embedder: mab.record?.embedding ?? '–' }}>
              {
                '{metric} · pooled over the dev haystack and the three test haystacks, and the largest alone · reader: {reader}, embedder {embedder}'
              }
            </T>
          }
        >
          <Bars
            spans={[
              { label: phrase('single-hop, plain resolver'), value: pc(mab.single.base) },
              { label: phrase('single-hop, typed search'), value: pc(mab.single.ours), ours: true },
              { label: phrase('multi-hop, plain resolver'), value: pc(mab.multi.base) },
              { label: phrase('multi-hop, typed search'), value: pc(mab.multi.ours), ours: true },
              { label: phrase('{haystack} multi-hop, plain'), values: { haystack: mab.haystack }, value: pc(mab.largest.base) },
              { label: phrase('{haystack} multi-hop, typed'), values: { haystack: mab.haystack }, value: pc(mab.largest.ours), ours: true },
            ]}
          />
        </Panel>
        <Panel
          title="LoCoMo"
          href="/benchmarks/locomo"
          note={
            <T values={{ split: locomo.split, embedding: locomo.embedding, k: locomo.k }}>
              {'{split} split · {embedding} · k={k} · ALL = every annotated evidence turn in the top {k}'}
            </T>
          }
        >
          <Bars
            spans={[
              { label: phrase('multi-hop ALL@{k}, cosine'), values: { k: locomo.k }, value: pc(locomo.all.base) },
              { label: phrase('multi-hop ALL@{k}, Hanzo'), values: { k: locomo.k }, value: pc(locomo.all.ours), ours: true },
              { label: phrase('R@{k}, cosine'), values: { k: locomo.k }, value: pc(locomo.recall.base) },
              { label: phrase('R@{k}, Hanzo'), values: { k: locomo.k }, value: pc(locomo.recall.ours), ours: true },
            ]}
          />
        </Panel>
        <Panel
          title="LongMemEval"
          href="/benchmarks/longmemeval"
          note={
            <T values={{ n: lme.n ?? '–', embed: lme.embed, k: lme.k }}>
              {'{n} questions · {embed} vectors for both · ALL@{k} = every evidence session in the top {k}'}
            </T>
          }
        >
          <Bars
            spans={[
              { label: phrase('cosine'), value: pc(lme.base) },
              { label: phrase('engine, frozen on LoCoMo'), value: pc(lme.ours), ours: true },
            ]}
          />
        </Panel>
      </Even>
    </Part>
  )
}

function Graph() {
  return (
    <Part id="graph">
      <H2>
        <T>{LANE.graph.title}</T>
      </H2>
      <P>
        <T>{LANE.graph.what}</T>{' '}
        <T values={{ ours: F2(cron.hits.ours), base: F2(cron.hits.base) }}>
          {
            'On the CronQuestions types the harness covers, the Hanzo graph answers {ours}% and Semantica {base}%; what differs is the price of a question.'
          }
        </T>
      </P>
      <Even>
        <Tile
          figure={elapsed(cron.ms.ours)}
          label={<T>Hanzo graph, through the API</T>}
          note={<T values={{ metric: cron.metric, hits: F2(cron.hits.ours) }}>{'median question · {metric} {hits}%'}</T>}
          href="/benchmarks/cronquestions"
        />
        <Tile
          figure={elapsed(cron.ms.base)}
          label={<T>Semantica temporal query</T>}
          note={<T values={{ metric: cron.metric, hits: F2(cron.hits.base) }}>{'median question · {metric} {hits}%'}</T>}
          href="/benchmarks/cronquestions"
        />
      </Even>
    </Part>
  )
}

function Code() {
  return (
    <Part id="code">
      <H2>
        <T>{LANE.code.title}</T>
      </H2>
      <P>
        <T>{LANE.code.what}</T>{' '}
        <T>{'Typed links are regular expressions over imports, definitions and identifiers; no model reads anything in that row.'}</T>
      </P>
      <Even>
        <Panel
          title="RepoBench-R"
          href="/benchmarks/repobench-r"
          note={<T values={{ setting: code.first.setting, split: code.split, metric: code.metric }}>{'{setting} · {split} split · {metric}'}</T>}
        >
          <Bars
            spans={[
              { label: phrase('dense retrieval'), value: pc(code.first.base) },
              { label: phrase('typed links'), value: pc(code.first.ours), ours: true },
            ]}
          />
        </Panel>
      </Even>
    </Part>
  )
}

function Runtime() {
  const rows = [
    { shot: runtime.dormant, label: phrase('State per dormant agent'), href: '/benchmarks/fleet' },
    { shot: runtime.heap, label: phrase('Heap per live agent, a goroutine'), href: '/benchmarks/goroutine' },
    { shot: runtime.spawn, label: phrase('Spawn one goroutine'), href: '/benchmarks/goroutine' },
    { shot: runtime.wake, label: phrase('Wake one million goroutines'), href: '/benchmarks/goroutine' },
  ]
  return (
    <Part id="runtime">
      <H2>
        <T>Platform, agents, and sandboxes</T>
      </H2>
      <P>
        <T>{LANE.runtime.what}</T>
      </P>
      <Even>{rows.map((r) => <Tile key={r.label} figure={r.shot?.ours ?? '–'} label={<T>{r.label}</T>} href={r.href} />)}</Even>
      <Note>
        <T values={{ machine: runtime.passes.goroutine.machine }}>
          {
            "A live agent here is a goroutine: it shares one address space with every other, and nothing about it is an isolation boundary. Code that has to be isolated gets a microVM. The goroutine timings are the median of one pass on {machine}. Every figure here is transcribed from the harness's README rather than read from a run file, and each page names the command that prints it."
          }
        </T>
      </Note>
    </Part>
  )
}



function Methodology() {
  return (
    <Part id="methodology">
      <H2>
        <T>Methodology</T>
      </H2>
      <P>
        <T
          values={{
            b: (
              <strong>
                <T>Every result is current.</T>
              </strong>
            ),
          }}
        >
          {
            '{b} Each build pulls the latest validated runs from the research API: canonical, public, and not flagged inconsistent. When the API cannot be read, or answers with fewer runs than the committed snapshot already holds, the build keeps the snapshot, and the page swaps in what the API holds once it answers in the browser.'
          }
        </T>
      </P>
      <P>
        <T
          values={{
            b: (
              <strong>
                <T>Every row is dated.</T>
              </strong>
            ),
          }}
        >
          {'{b} A run is dated by when it ended; the platform bench records its month.'}
        </T>
      </P>
      <P>
        <T
          values={{
            b: (
              <strong>
                <T>Live, frozen, superseded.</T>
              </strong>
            ),
          }}
        >
          {
            '{b} Live is the newest run the API serves for a benchmark. Frozen is a committed run file, a snapshot, or a figure transcribed from a harness’s README. Superseded is an earlier run of the same benchmark that a later one replaced; it stays in the library, so a revision’s history can be read.'
          }
        </T>
      </P>
      <P>
        <T
          values={{
            b: (
              <strong>
                <T>Where a number comes from.</T>
              </strong>
            ),
            link: (
              <Inline href="https://api.hanzo.ai/v1/research/runs?org=hanzo">
                <T>the research API</T>
              </Inline>
            ),
          }}
        >
          {
            '{b} Kai’s and Enso’s rows are research runs, served at {link} and read when this page opens. The memory, graph and code panels read the committed run files of the benchmarks repository. Kai’s yes/no table and the tool shortlist are Hanzo-measured reads the research API does not file: each is its run’s report, copied unchanged, and names its model, date and count.'
          }
        </T>
      </P>
      <P>
        <T
          values={{
            b: (
              <strong>
                <T>Measured, not reported.</T>
              </strong>
            ),
          }}
        >
          {
            '{b} Every frontier point is a run Hanzo filed: the router and each single model on the same questions, at the same tag. No vendor-reported figure is on a board here.'
          }
        </T>
      </P>
      <P>
        <T
          values={{
            b: (
              <strong>
                <T>Prices are prices.</T>
              </strong>
            ),
          }}
        >
          {
            '{b} Kai beside Jev is the input-token rate each is billed, from the price list, not a cost per task. The frontier’s axis is what each run spent on the whole question set. No speed is claimed here without a measured comparison; latency, where this Kai version was timed, is in its tables.'
          }
        </T>
      </P>
      <P>
        <T
          values={{
            b: (
              <strong>
                <T>Comparing rows.</T>
              </strong>
            ),
          }}
        >
          {
            '{b} A frontier is drawn among the rows of one benchmark, never across two, and a leaderboard row compares two models on one suite. Suites measure different tasks, so the mean is a summary, not a score on any of them.'
          }
        </T>
      </P>
      <Meta>
        <T
          values={{
            code: <code>git clone https://github.com/hanzoai/benchmarks &amp;&amp; cd benchmarks/brain &amp;&amp; node results.mjs</code>,
          }}
        >
          {'The memory and code panels regenerate from the committed runs on a fresh clone: {code}'}
        </T>
      </Meta>
    </Part>
  )
}

function Studies() {
  return (
    <Part id="research">
      <H2>
        <T>The research</T>
      </H2>
      <P>
        <T values={{ link: <Inline href="https://hips.hanzo.ai">HIPs</Inline> }}>
          {
            'Every paper the library publishes. A benchmark’s own page names the paper that reports it, where one does. Specifications are the {link}.'
          }
        </T>
      </P>
      <Even>
        {STUDIES.map((s) => (
          <Panel key={s.href} title={s.title} href={s.href} note={<T>{s.note}</T>}>
            <P render="span">papers.hanzo.ai</P>
          </Panel>
        ))}
      </Even>
    </Part>
  )
}

export function Showcase() {
  return (
    <>
      <Lead />
      <Sections items={CHAPTERS} entries={LEDGER.entries} />
      <Enso />
      <Decisions />
      <Zen />
      <Harness />
      <Platform />
      <Methods />
      <Shelf />
      <Cloud />
    </>
  )
}