hanzo.ai/components/kai/Results.tsx

'use client'

import { Fragment, type ComponentProps, type ReactNode } from 'react'
import { useI18n } from '@hanzo/i18n/react'
import { type About, type Board, type Kai, type Table as Drawn } from '@/lib/kai'
import { kaiHeadline, record } from '@/lib/tally'
import { ready } from '@/lib/api/use'
import { useKai } from '@/hooks/useKai'
import { useClaim, useSuite } from '@/hooks/useSuite'
import { Ready } from '@/components/api/state'
import { Band, Card, Head } from '@/components/marketing/band'
import { Text, YStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Panel } from './figures'

/**
 * /kai's results: the headline, the figures under it, and the tables — the
 * Decision Suite first, then the frozen harness's suites Kai leads, and the
 * cardinality suite and latency where this version was measured — each in a
 * `Window`, ending on the run its numbers are from.
 *
 * Everything here is read when the page opens: the research runs through
 * `useKai`, the Decision Suite's cost row from the model list through
 * `useSuite`, so the export carries no figure at all. Every figure and claim is
 * lib/kai's; this file is layout.
 *
 * A row's best is at full ink, bold, whoever holds it; the rest read a step
 * down. lib/kai publishes only the rows Kai leads. Wide tables scroll inside their
 * window, which is why every grid here floors its tracks at zero.
 */

/** The small print under a table: its note and its source. */
function Cite({ children }: { children: ReactNode }) {
  return (
    <Text render="p" display="block" mt={8} fontSize="$1" lineHeight="$1" color="var(--text-tertiary)">
      {children}
    </Text>
  )
}

/** Lining figures, so a column of numbers stays true. */
const FIGURES = { fontVariantNumeric: 'tabular-nums' } as const

/**
 * A cell: numbers right, the row's label left, set in from the column before.
 * A gui Text, stated a table cell, because a Text is an inline box until told.
 */
function Cell({
  head,
  first,
  rule,
  align,
  top = 3,
  colSpan,
  ink,
  weight,
  children,
  ...data
}: {
  head?: boolean
  first?: boolean
  rule?: boolean
  align?: 'center'
  top?: number
  colSpan?: number
  ink: ComponentProps<typeof Text>['color']
  weight?: '400' | '600'
  children?: ReactNode
  'data-best'?: string
  'data-who'?: string
}) {
  const Tag = head ? 'th' : 'td'
  return (
    <Text
      render={<Tag colSpan={colSpan} {...data} />}
      pt={top}
      pb={3}
      pl={first ? 0 : 18}
      text={align ?? (first ? 'left' : 'right')}
      minW={first && !head ? 'calc(10em)' : undefined}
      borderBottomWidth={rule ? 1 : 0}
      borderColor="$edge"
      fontWeight={weight ?? (head ? '400' : undefined)}
      color={ink}
      $platform-web={{ display: 'table-cell', ...FIGURES }}
    >
      {children}
    </Text>
  )
}

const TERTIARY = 'var(--text-tertiary)'

/** A link of a row's small print: a file with no public address is named, not linked. */
function Linked({ text, href }: { text: string; href?: string }) {
  return href ? (
    <Text render={<a href={href} />} color="inherit" textDecorationLine="underline" $platform-web={{ textUnderlineOffset: 2 }}>
      {text}
    </Text>
  ) : (
    <>{text}</>
  )
}

/** What a row says under its label: its data and links, then a line in words. It breaks anywhere, so a long path never widens the table. */
function Gloss({ a }: { a: About }) {
  const line = (children: ReactNode) => (
    <Text render="span" display="block" mt={2} fontSize="$1" lineHeight="$1" color={TERTIARY} $platform-web={{ overflowWrap: 'anywhere' }}>
      {children}
    </Text>
  )
  return (
    <>
      {line(
        [...a.data, ...a.links].map((l, i) => (
          <Fragment key={l.text}>
            {i ? ' · ' : null}
            <Linked {...l} />
          </Fragment>
        )),
      )}
      {a.also ? line(a.also) : null}
    </>
  )
}

function Window({ b }: { b: Board }) {
  const { t } = useI18n()
  return (
    <YStack id={b.id} $platform-web={{ scrollMarginTop: 96 }}>
      <Panel title={t(b.title).toLowerCase()} example={false}>
        {b.lede ? (
          <Text render="p" display="block" mb={12} fontSize="$2" lineHeight="1.15rem" color="var(--text-secondary)">
            {t(b.lede)}
          </Text>
        ) : null}
        <Table b={b} />
      </Panel>
      <Cite>{t(b.note)}</Cite>
      <Cite>
        {t('{lead}: {source}', {
          lead: b.cite.lead ? t(b.cite.lead) : t('Source'),
          source: (
            <Text render={<a href={b.cite.href} />} fontFamily="$mono" color="inherit" textDecorationLine="underline" $platform-web={{ textUnderlineOffset: 2 }}>
              {b.cite.text}
            </Text>
          ),
        })}
      </Cite>
    </YStack>
  )
}

function Table({ b }: { b: Board }) {
  const { t } = useI18n()
  const grouped = b.groups.some(Boolean)
  return (
    <Text render="table" width="100%" color="inherit" $platform-web={{ display: 'table', borderCollapse: 'collapse', ...FIGURES }}>
      <thead>
        {grouped ? (
          <tr>
            <Cell head first ink={TERTIARY} />
            {b.groups.map((g) => (
              <Cell key={g} head align="center" colSpan={b.heads.length} ink={TERTIARY}>
                {t(g)}
              </Cell>
            ))}
          </tr>
        ) : null}
        {/* The heading row the body hangs from takes the rule. */}
        <tr>
          <Cell head first rule ink={TERTIARY}>
            {t(b.first)}
          </Cell>
          {b.groups.map((g) => (
            <Fragment key={g}>
              {b.heads.map((h) => (
                <Cell key={h} head rule ink={TERTIARY}>
                  {t(h)}
                </Cell>
              ))}
            </Fragment>
          ))}
        </tr>
      </thead>
      <tbody>
        {b.blocks.map((block) => (
          <Fragment key={block.title ?? b.id}>
            {block.title ? (
              <tr>
                <Cell first top={14} colSpan={b.span} ink={TERTIARY}>
                  {t(block.title)}
                </Cell>
              </tr>
            ) : null}
            {block.lines.map((line, n) => (
              <tr key={`${line.label}-${n}`}>
                <Cell first ink="var(--text-secondary)">
                  {line.label}
                  {line.about ? <Gloss a={line.about} /> : null}
                </Cell>
                {line.cells.map((c, i) => (
                  <Cell key={i} data-best={c.best ? '' : undefined} data-who={c.who} weight={c.best ? '600' : undefined} ink={c.best ? '$ink' : TERTIARY}>
                    {c.text}
                  </Cell>
                ))}
              </tr>
            ))}
          </Fragment>
        ))}
      </tbody>
    </Text>
  )
}

/**
 * The band, read when the page opens: the headline and the claims under it, then
 * the tables. Until the research runs are read it says so, and if they cannot
 * be it says that; no earlier figure stands in.
 */
export function Results() {
  const { t } = useI18n()
  const kai = useKai()
  const suite = ready(useSuite())
  // The heading waits for the model list too, so the harness headline never stands in before the suite's.
  const said = useClaim()
  return (
    <Band>
      <YStack id="benchmarks" $platform-web={{ scrollMarginTop: 96 }}>
        <Head
          eyebrow={t('Results')}
          title={t(said ? (said.claim?.lede ?? said.kai.headline.title) : kaiHeadline(record([])))}
          lede={said?.kai.headline.lede ? t(said.kai.headline.lede) : undefined}
          loud
        />
      </YStack>
      <Ready reading={kai} what={t("Kai's research runs")}>
        {(k) => <Tables kai={k} suite={suite} />}
      </Ready>
    </Band>
  )
}

/** The claims and the tables, from the runs: the Decision Suite's count leads once every row of it holds both figures. */
function Tables({ kai, suite }: { kai: Kai; suite: Drawn | null }) {
  const { t } = useI18n()
  const { claims: held, who, boards } = kai
  const { harness, capability, latency, languages, stability } = boards
  const claims = suite?.claim ? [suite.claim, ...held] : held
  const n = claims.length
  const wide = n % 4 === 0 ? 4 : n % 3 === 0 ? 3 : 2
  const mid = n % 3 === 0 ? 3 : n % 2 === 0 ? 2 : 1
  return (
    <>
      {/* Track counts are forced, not auto-filled: a count that divides the list
          is the only thing that keeps the last row full, and auto-fill drops to
          two tracks in the band where three will not fit, stranding the ninth
          card alone. One column until the cards would go narrower than a
          paragraph. */}
      <Grid
        columns={1}
        $md={{ gridTemplateColumns: `repeat(${mid}, minmax(0, 1fr))` }}
        $xl={{ gridTemplateColumns: `repeat(${wide}, minmax(0, 1fr))` }}
        gap={16}
      >
        {claims.map((c) => (
          <YStack key={c.label} render={<a href={`#${c.board}`} />}>
            <Card height="100%">
              <Text render="p" display="block" mb={8} fontFamily="$mono" fontSize="$8" lineHeight="1.7875rem" color="$ink" $platform-web={FIGURES}>
                {c.figure}
                {c.unit ? (
                  <Text ml={6} fontSize="$2" color={TERTIARY}>
                    {c.unit}
                  </Text>
                ) : null}
              </Text>
              <Text render="h3" display="block" fontSize="$3" fontWeight="600" color="$ink">
                {t(c.label)}
              </Text>
              <Text render="p" display="block" mt={6} fontSize="$2" lineHeight="1.3203rem" color="var(--muted-foreground)">
                {t(c.note)}
              </Text>
            </Card>
          </YStack>
        ))}
      </Grid>
      <Text render="p" display="block" mt={24} fontSize="$2" lineHeight="1.15rem" text="center" color={TERTIARY}>
        {t('Jev is {who}.', { who: who.jev })}
      </Text>
      <Grid columns={1} gap={40} mt={48}>
        {suite?.board.blocks.some((b) => b.lines.length) ? <Window b={suite.board} /> : null}
        {harness ? <Window b={harness} /> : null}
        {capability ? <Window b={capability} /> : null}
        {latency ? <Window b={latency} /> : null}
        {stability ? <Window b={stability} /> : null}
        {languages ? <Window b={languages} /> : null}
      </Grid>
    </>
  )
}