hanzo.ai/components/kai/KaiLanding.tsx

'use client'

/**
 * /kai — Hanzo's decision model, told as one decision being explained: a decision
 * forming, what kind of answer it is, what changes it, how much recomputes, how
 * decisions compose and leave a record, who governs them, how Kai measures, what
 * it costs, where agents use it, what ships today, and the call.
 *
 * Kai converges. Enso routes and Zen evolves; the motion here is uncertainty
 * resolving — a distribution settling, a boundary crossed — and nothing moves
 * that does not explain a decision.
 *
 * Every monospace figure that explains the model is an EXAMPLE and says so in its
 * bar. The measured ones are read when the page opens, from the research runs
 * (hooks/useKai): the lead under the hero (Lead), `results`
 * (components/kai/Results), and the record and timing this page states beside
 * them (`standing`); a figure the runs do not hold is not drawn.
 */

import type { ReactNode } from 'react'
import { SiteFooter, SiteHeader } from '@/components/home/shell'
import { Split } from '@/components/home/band'
import { Hero, Siblings } from '@/components/family/Hero'
import { Read } from '@/components/family/Read'
import Closing from '@/components/marketing/Closing'
import { Band, Card, Head } from '@/components/marketing/band'
import { Box, Text, XStack, YStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Eyebrow, Lede, More, Title } from '@hanzo/ui/marketing'
import { dev } from '@hanzo/app/lib/host'
import { modelPagePath } from '@hanzo/app/lib/path'
import Graph from './Graph'
import Headline from './Headline'
import Instrument from './Instrument'
import Surface from './Surface'
import { ModelCardSection } from '@/components/product/ModelCardSection'
import { ProductArticlesSection, type ArticleItem } from '@/components/product/ProductArticlesSection'
import { ProductUseCasesSection, type UseCaseItem } from '@/components/product/ProductUseCasesSection'
import { AgentPrompt } from '@/components/product/AgentPrompt'
import { product } from '@/lib/product'
import { Dist, Lines, Pairs, Panel, Target, TARGET } from './figures'
import { Lead } from './Lead'
import Flash from '@/components/home/Flash'
import { useKai } from '@/hooks/useKai'
import { ready, usePricing } from '@/lib/api/use'
import { p50, type Kai } from '@/lib/kai'
import { kaiPrice, rate, verdict } from '@/lib/tally'

/** The specification, as hips.hanzo.ai serves it. */
const SPEC = 'https://hips.hanzo.ai/docs/hip-1332-kai-the-decision-model'

/** A measured figure: the value, what it measures, and where it was measured. */
export type Figure = { value: string; label: string; note?: string }

/** The record the page states, counted on the server from the research runs. */
export type Standing = {
  /** Suites where Kai's calibration error is lower than Jev's. */
  ece: { won: number } | null
  /** The multilingual suite as the harness scores it, and how many of its languages Kai is ahead of Jev on. */
  languages: { label: string; kai: string; jev: string; tally: { ahead: number } | null } | null
  /** Requests whose three answers are identical, Kai beside Jev, as rates. */
  stable: { kai: string; jev: string } | null
}

/**
 * The record this page states beside its results, counted from the runs: how
 * many of the published suites Kai is also better calibrated on, the
 * multilingual row, identical answers to a repeated request, and the first
 * latency the runs measured. Nothing while the runs are read.
 */
function standing(kai: Kai | null): { record: Standing; figures: Figure[] } {
  if (!kai) return { record: { ece: null, languages: null, stable: null }, figures: [] }
  const wins = kai.index.wins
  const calibrated = wins.filter((r) => verdict(r, 'ece') === 'won').length
  const massive = wins.find((r) => r.label.startsWith('MASSIVE'))
  const stable = kai.boards.stability?.blocks[0]?.lines[0]?.cells ?? null
  const timed = p50(kai)
  return {
    record: {
      ece: calibrated ? { won: calibrated } : null,
      languages: massive && massive.kai != null && massive.jev != null ? { label: massive.label, kai: rate(massive.kai), jev: rate(massive.jev), tally: kai.index.languages } : null,
      stable: stable && stable.length === 2 ? { kai: stable[0].text, jev: stable[1].text } : null,
    },
    figures: timed ? [{ value: `${timed.ms} ms`, label: 'One decision, p50', note: `${timed.mode} · ${timed.device} · ${timed.dtype}` }] : [],
  }
}

/** Copy beside its figure from 1024px, centred above it on a phone. */
function Row({ id, eyebrow, title, children, figure }: { id?: string; eyebrow: string; title: ReactNode; children: ReactNode; figure: ReactNode }) {
  return (
    <Band id={id}>
      <Split
        says={
          <Grid
            columns={1}
            gap={14}
            width="100%"
            maxW={672}
            mx="auto"
            $platform-web={{ textAlign: 'center' }}
            $lg={{ mx: 0, '$platform-web': { textAlign: 'left' } }}
          >
            <Eyebrow>{eyebrow}</Eyebrow>
            <Title>{title}</Title>
            {children}
          </Grid>
        }
      >
        {figure}
      </Split>
    </Band>
  )
}

/** A figure set large, what it is, and where it came from. */
function Big({ figure, label, note }: { figure: string; label: string; note?: string }) {
  return (
    <Card display="flex" flexDirection="column" gap="$2" p="$5" borderColor="var(--border)">
      <Text fontFamily="$mono" fontSize="$10" lineHeight="$10" color="$ink" $platform-web={{ fontVariantNumeric: 'tabular-nums' }}>
        {figure}
      </Text>
      <Text fontSize="$3" lineHeight="$3" fontWeight="600" color="$ink">
        {label}
      </Text>
      {note ? (
        <Text fontSize="$2" lineHeight="$2" color="var(--muted-foreground)">
          {note}
        </Text>
      ) : null}
    </Card>
  )
}

/** What ships today and what is being built, each in the words the docs use. */
const STATUS: readonly [string, 'live' | 'library' | 'in progress' | 'not yet', string][] = [
  ['Kai', 'live', `Unified multimodal decision intelligence: text, vision, audio, video and code with adaptive reasoning (auto, fast, deep). The model id is kai. Vision, audio, video and adaptive reasoning: ${TARGET}.`],
  ['POST /v1/decisions', 'live', 'choice, noul and score questions, answered with calibrated probabilities.'],
  ['Observe and decide', 'live', 'Hold a multimodal state once with observe; decide over it later by handle.'],
  ['Decision Programs', 'library', 'Versioned graphs of questions, code, solvers and approvals.'],
  ['Decision Packages and policy', 'library', 'A run’s reproducible record, and the rules that govern it.'],
  ['Programs on the wire', 'in progress', 'Sending a whole program in one call.'],
  ['Kai inside Enso', 'in progress', 'Enso sending the decide-shaped part of a request to Kai.'],
  ['Open weights', 'not yet', 'The Kai weights are closed; served via API and dedicated deployment.'],
]

/** Questions with a known set of answers, and the type each is asked as. */
const QUESTIONS: readonly [string, string][] = [
  ['Which tool should run next?', 'choice'],
  ['Which team owns this ticket?', 'choice'],
  ['Is this visual defect within tolerance?', 'noul'],
  ['How severe is the incident risk?', 'score'],
  ['Does this audio signal indicate bearing failure?', 'noul'],
  ['Which fix meets the constraints?', 'choice'],
  ['Should the agent keep going?', 'noul'],
  ['Does a person need to approve this?', 'noul'],
]

export default function KaiLanding({ results }: { results: ReactNode }) {
  const { record, figures: measured } = standing(ready(useKai()))
  // The price beside Jev's is the price list's, read when the page opens.
  const prices = ready(usePricing())
  const [less] = prices ? kaiPrice(prices) : []
  const figures = less ? [...measured, { value: less.figure, label: less.label, note: less.note }] : measured
  return (
    <>
      <SiteHeader />

      <Box render="main" bg="$background" pt="$10" $platform-web={{ color: 'var(--foreground)' }}>
        <Hero
          chip="Kai · Multimodal Decision Intelligence"
          title={<Headline lines={['See. Hear. Understand.', 'When the answer has a type,']} last="Decide." />}
          lede="One unified intelligence. Text, vision, audio, video, code, and system state evaluated into calibrated probabilities across your options — fast when it can be, deep when it needs to be."
          primary={{ label: 'Get decisions', href: '#api' }}
          action={{ label: 'Join Kai-1.7 Early Access →', href: '/research-access?track=kai' }}
          more={{ label: 'Read the docs →', href: 'https://docs.hanzo.ai/docs/decisions' }}
          figure={<Instrument />}
        />

        {/* What the runs say, first: the Decision Suite's rows as headlines. */}
        <Lead />

        {/* The clock: one decision, cached, served and hosted, drawn to scale. */}
        <Flash named />

        {/* Language models reason. Kai decides. */}
        <Band id="compare" measure={1024}>
          <Head
            eyebrow="Different computation for different jobs"
            title="Language models write. Kai decides."
            lede="Ask a writer for a decision and you get prose, then a parser, a retry and a guess at the schema. Ask Kai and the answer is already the type you asked for."
            loud
          />
          <Grid columns={{ min: 300, max: 2 }} gap={24}>
            <Panel title="generate" fill>
              <Lines
                lines={[
                  ['“Based on the information provided, the most', 'mid'],
                  ['appropriate action would probably be to escalate,', 'mid'],
                  ['although there are some considerations…”', 'mid'],
                  '',
                  ['→ parse   → validate   → retry   → normalize', 'dim'],
                ]}
              />
            </Panel>
            <Panel title="decide" fill>
              <Lines
                lines={[
                  '"next": {',
                  '  "type": "choice",',
                  '  "choice": "escalate",',
                  '  "probabilities": { "escalate": 0.94, "resolve": 0.06 }',
                  '}',
                  '',
                  ['usage.output_tokens · 0', 'dim'],
                ]}
              />
            </Panel>
          </Grid>
          <Text render="p" display="block" mt="$6" fontSize="$3" lineHeight="$3" color="var(--muted-foreground)" $platform-web={{ textAlign: 'center' }}>
            Zen is part of the same system. Reason with Zen; decide with Kai.
          </Text>
        </Band>

        {/* The kinds of answer, in the API's own words. */}
        <Band id="types" measure={1024}>
          <Head
            eyebrow="Typed answers"
            title="Ask in the shape of the answer."
            lede="Three question types. Each answer carries its probabilities, so software knows how sure to be."
            loud
          />
          <Grid columns={{ min: 280, max: 3 }} gap={24}>
            <Panel title="choice" fill>
              <Lines lines={[['Which tool should run?', 'mid'], '']} />
              <Dist rows={[['search', 0.81], ['browser', 0.14], ['none', 0.05]]} />
            </Panel>
            <Panel title="noul" fill>
              <Lines lines={[['Is this request safe to run?', 'mid'], '']} />
              <Dist rows={[['false', 0.97], ['true', 0.03]]} />
            </Panel>
            <Panel title="score" fill>
              <Lines lines={[['How severe is the incident?', 'mid'], '']} />
              <Dist rows={[['0', 0.01], ['1', 0.02], ['2', 0.06], ['3', 0.18], ['4', 0.51], ['5', 0.22]]} />
            </Panel>
          </Grid>
        </Band>

        {/* What flips the decision. */}
        <Row
          id="surface"
          eyebrow="Sensitivity"
          title="See what changes the answer."
          figure={<Surface />}
        >
          <Lede>
            A bounded decision has edges. Move the evidence or the risk and watch the answer cross the line — and read the smallest change
            that would cross it.
          </Lede>
          <Lede>Know what would change the answer before you act on it.</Lede>
        </Row>

        {/* Dependency-aware recomputation, the existing figure. */}
        <Band id="recompute">
          <Head
            eyebrow="Incremental"
            title="Only what the evidence touches recomputes."
            lede="Switch a source off. The decisions that read it wake and settle again; the rest stay quiet. Compute follows uncertainty."
            loud
          />
          <Graph />
        </Band>

        {/* Decisions compose into programs. */}
        <Row
          id="programs"
          eyebrow="Decision Programs"
          title="Decisions become programs."
          figure={
            <Panel title="vehicle.readiness · a program">
              <Lines
                lines={[
                  ['evidence  camera · CAN · SysML · simulation', 'dim'],
                  '   │',
                  'kai       fault         bearing      .91',
                  'kai       readiness     no-go        .96',
                  'kai       severity      critical     .86',
                  '   │',
                  ['zen       write the inspection plan', 'mid'],
                  ['solver    schedule the bay', 'mid'],
                  '   │',
                  ['policy    severity = critical → human_approval', 'lit'],
                  ['human     approve', 'lit'],
                ]}
              />
            </Panel>
          }
        >
          <Lede>
            One question becomes many: evidence, code, Kai’s questions, Zen’s prompts, solvers and human approvals, wired into a
            versioned graph.
          </Lede>
          <Text fontSize="$2" lineHeight="$2" color="var(--muted-foreground)">
            The program library ships today. Sending a whole program in one call is being built.
          </Text>
        </Row>

        {/* Every decision leaves a record. */}
        <Row
          id="record"
          eyebrow="Reproducible"
          title="Every decision leaves a record."
          figure={
            <Panel title="POST /v1/decisions → the response">
              <Pairs
                rows={[
                  ['routing.checkpoint', 'the checkpoint that answered'],
                  ['routing.extrapolated', 'whether the state ran past what it was trained to read'],
                  ['routing.sha256', 'the hash of its weights'],
                  ['routing.calibration', 'the calibration applied'],
                  ['state_hash', 'the hash of the state it read'],
                  ['answers', 'each answer, with probabilities'],
                  ['usage.output_tokens', '0'],
                ]}
              />
            </Panel>
          }
        >
          <Lede>
            Each answer names the checkpoint that gave it and a hash of the state it saw. Run the same state again and you know you asked
            the same question of the same model.
          </Lede>
          <Text fontSize="$2" lineHeight="$2" color="var(--muted-foreground)">
            Decision Packages bundle a program’s whole run — inputs, answers, probabilities, policy and result — for replay. The library
            ships today.
          </Text>
        </Row>

        {/* Policy governs. */}
        <Band id="policy" measure={1024}>
          <Head
            eyebrow="Authority"
            title="Kai recommends. Policy governs."
            lede="A probability is advice. Your policy, written as code, keeps the authority — and a person signs where it says one must."
            loud
          />
          <Grid columns={{ min: 280, max: 3 }} gap={24}>
            <Panel title="kai · recommends" fill>
              <Lines lines={[['Allow the transfer?', 'mid'], '']} />
              <Dist rows={[['allow', 0.94], ['deny', 0.06]]} />
            </Panel>
            <Panel title="policy · governs" fill>
              <Lines
                lines={[
                  ['if amount > threshold', 'lit'],
                  ['then human_approval = required', 'lit'],
                  '',
                  ['deterministic. no probability.', 'dim'],
                ]}
              />
            </Panel>
            <Panel title="final authority" fill>
              <Lines lines={[['HUMAN APPROVAL', 'lit'], ['required', 'mid'], '', ['Kai informed it. It did not decide it.', 'dim']]} />
            </Panel>
          </Grid>
        </Band>

        {results}

        {/* Calibration, from the same runs. */}
        <Band id="calibration" measure={1024}>
          <Head
            eyebrow="Calibration"
            title="Confidence you can act on."
            lede="“Approve” at .51 and “approve” at .99 pick the same option. Only one should ship without a second look — so a decision model has to be right about how sure it is."
            loud
          />
          <Grid columns={{ min: 260, max: 2 }} gap={16}>
            <Big figure=".51 → .99" label="The same choice, two different decisions" note="An example: a probability is only useful if it means what it says." />
            {record.ece ? (
              <Big
                figure={`${record.ece.won}`}
                label="Suites where Kai's calibration error is lower than Jev's"
                note="Kai against Jev on the frozen harness, the same questions. Lower is better."
              />
            ) : null}
            {record.stable ? (
              <Big
                figure={record.stable.kai}
                label="Identical answers to the same request, sent three times"
                note={`Jev ${record.stable.jev} on the same requests. A threshold only means something when the same input gives the same answer.`}
              />
            ) : null}
          </Grid>
        </Band>

        {/* Zero output tokens. */}
        <Band id="zero" measure={896}>
          <YStack items="center" gap="$3">
            <Text fontFamily="$mono" fontSize={160} lineHeight={160} color="$ink" $platform-web={{ fontVariantNumeric: 'tabular-nums' }} $max-sm={{ fontSize: 112, lineHeight: 112 }}>
              0
            </Text>
            <Text fontFamily="$mono" fontSize="$2" letterSpacing={2} color="var(--muted-foreground)" $platform-web={{ textTransform: 'uppercase' }}>
              output tokens
            </Text>
            <Title quiet $platform-web={{ textAlign: 'center' }}>
              The answer is the distribution. There is nothing to generate.
            </Title>
          </YStack>
          {figures.length > 0 ? (
            <Grid columns={{ min: 200, max: figures.length }} gap={16} mt="$8">
              {figures.map((f) => (
                <Big key={f.label} figure={f.value} label={f.label} note={f.note} />
              ))}
            </Grid>
          ) : null}
          <XStack mt="$6" justify="center">
            <More href="/pricing">Pricing →</More>
          </XStack>
        </Band>

        {/* Agents need decisions. */}
        <Row
          id="agents"
          eyebrow="Agents"
          title="Agents need decisions more often than prose."
          figure={
            <Panel title="an agent’s loop">
              <Lines
                lines={[
                  ['observe', 'mid'],
                  ['decide   which tool?            kai', 'lit'],
                  ['act', 'mid'],
                  ['decide   which context?         kai', 'lit'],
                  ['act', 'mid'],
                  ['decide   which model? budget?   kai', 'lit'],
                  ['decide   done, or keep going?   kai', 'lit'],
                ]}
              />
            </Panel>
          }
        >
          <Lede>Most of an agent’s steps are choices among known options. Each is one call, with its probability, and no prose to parse.</Lede>
          <Text fontSize="$2" lineHeight="$2" color="var(--muted-foreground)">
            Hanzo Dev asks Kai where to fix, what to do next and whether the work is done.
          </Text>
          <XStack flexWrap="wrap" columnGap="$5" rowGap="$2" justify="center" $lg={{ justify: 'flex-start' }}>
            <More href={dev()}>Hanzo Dev →</More>
          </XStack>
        </Row>

        {/* Kai with Zen, Kai with Enso. */}
        <Band id="family" measure={1024}>
          <Head eyebrow="One system" title="Reason with Zen. Decide with Kai." lede="Neither replaces the other. Zen writes what could be done; Kai says what should be." loud />
          <Grid columns={{ min: 300, max: 2 }} gap={24}>
            <Panel title="zen · then kai" fill>
              <Lines
                lines={[
                  ['zen   write the migration plan', 'mid'],
                  ['kai   should the migration proceed?', 'lit'],
                  '',
                  ['zen   generate possible fixes', 'mid'],
                  ['kai   choose the fix that meets the constraints', 'lit'],
                ]}
              />
            </Panel>
            <Panel title="enso · in progress" fill>
              <Lines
                lines={[
                  ['request', 'mid'],
                  ['  ↓', 'dim'],
                  ['enso   what kind of computation?', 'lit'],
                  ['  ├─ generate  →  zen', 'mid'],
                  ['  └─ decide    →  kai', 'mid'],
                  '',
                  ['Kai inside Enso is being built.', 'dim'],
                ]}
              />
            </Panel>
          </Grid>
        </Band>

        {/* What ships today. */}
        <Band id="status" measure={896}>
          <Head eyebrow="Status" title="What ships today." lede="The model and the call are live. The decision plane around them is being built — in the open, and marked as such." loud />
          <YStack>
            {STATUS.map(([name, state, note]) => (
              <XStack key={name} gap="$4" py="$3" borderTopWidth={1} borderColor="var(--border)" items="baseline" flexWrap="wrap">
                <Text width={240} $max-sm={{ width: '100%' }} fontSize="$3" lineHeight="$3" fontWeight="600" color="$ink">
                  {name}
                </Text>
                <Text
                  width={110}
                  fontFamily="$mono"
                  fontSize="$1"
                  letterSpacing={1}
                  color={state === 'live' ? '$ink' : 'var(--text-tertiary)'}
                  $platform-web={{ textTransform: 'uppercase' }}
                >
                  {state}
                </Text>
                <Text flex={1} minW={200} fontSize="$2" lineHeight="$2" color="var(--muted-foreground)">
                  {note}
                </Text>
              </XStack>
            ))}
          </YStack>
        </Band>

        {/* The call. */}
        <Row
          id="api"
          eyebrow="API"
          title="One endpoint for decisions."
          figure={
            <YStack gap="$4" width="100%">
              <Panel title="POST /v1/decisions">
                <Lines
                  lines={[
                    '{',
                    '  "model": "kai",',
                    `  "reasoning": "auto",        // ${TARGET}`,
                    '  "state": {',
                    '    "evidence": "sensor.vibration_peak_840hz",',
                    '    "telemetry": { "bearing_temp_c": 94.2, "rpm": 3600 },',
                    `    "image": "data:image/webp;base64,..."   // ${TARGET}`,
                    '  },',
                    '  "questions": {',
                    '    "status": {',
                    '      "type": "choice",',
                    '      "criteria": {',
                    '        "nominal": "vibration within threshold",',
                    '        "inspect": "harmonic anomaly detected",',
                    '        "shutdown": "immediate bearing failure risk"',
                    '      }',
                    '    }',
                    '  }',
                    '}',
                  ]}
                />
              </Panel>
              <Panel title="200 OK">
                <Lines
                  lines={[
                    ['"answers": { "status": {', 'mid'],
                    ['  "type": "choice", "choice": "inspect",', 'lit'],
                    ['  "probabilities": { "nominal": 0.02, "inspect": 0.94, "shutdown": 0.04 }', 'lit'],
                    ['} },', 'mid'],
                    ['"usage": { "input_tokens": 142, "output_tokens": 0 }', 'dim'],
                  ]}
                />
              </Panel>
            </YStack>
          }
        >
          <Lede>Name the questions, define criteria, pass multimodal state. Kai evaluates the evidence and returns calibrated probabilities for every option — fast by default, deepening compute only when ambiguity requires it.</Lede>
          <Text fontSize="$2" lineHeight="$2" color="var(--muted-foreground)">
            <Target /> Set <Text fontFamily="$mono">reasoning</Text> to <Text fontFamily="$mono">&quot;auto&quot;</Text> (default), <Text fontFamily="$mono">&quot;fast&quot;</Text>, or <Text fontFamily="$mono">&quot;deep&quot;</Text>. In the SDKs it is <Text fontFamily="$mono">post_decisions</Text> in Python and <Text fontFamily="$mono">postDecisions</Text> in
            TypeScript. Hold a state once with{' '}
            <Text fontFamily="$mono">observe</Text>, then decide over it by <Text fontFamily="$mono">handle</Text>.
          </Text>
          <XStack flexWrap="wrap" columnGap="$5" rowGap="$2" justify="center" $lg={{ justify: 'flex-start' }}>
            <More href="/kai/guide">How to use it →</More>
            <More href={SPEC}>The architecture →</More>
          </XStack>
        </Row>

        {/* Inside. */}
        <Row
          id="inside"
          eyebrow="Architecture"
          title="Modular encoders. One decision core."
          figure={
            <Panel title="kai · unified architecture">
              <Lines
                lines={[
                  ['inputs    text · vision · audio · video · code · state', 'dim'],
                  '   │',
                  ['encoders  text (320M, 32K) · vision (170M) · audio (300M)', 'mid'],
                  ['bridge    latent fusion (~60M cross-attention)', 'mid'],
                  '   │',
                  ['core      decision heads (choice · noul · score)', 'lit'],
                  ['adaptive  reasoning: auto | fast | deep', 'lit'],
                  ['guard     built-in policy & harm sensitivity', 'lit'],
                  '   │',
                  ['output    calibrated distribution · 0 output tokens', 'lit'],
                  '',
                  [`vision · audio · video · bridge · adaptive: ${TARGET}`, 'dim'],
                ]}
              />
            </Panel>
          }
        >
          <Lede>
            Kai organizes specialized modular encoders into a unified decision engine. Long text (up to 32,768 tokens) and structured telemetry are evaluated natively today; high-resolution imagery, acoustic signals, and video frames project into the unified latent space as the Kai-1.7 target.
          </Lede>
          <Lede>
            <strong>The functional parts list:</strong>
          </Lede>
          <YStack gap="$2" my="$2">
            <Text fontSize="$2" lineHeight="$3" color="var(--muted-foreground)">
              • <strong>Multimodal Decision Core (~850M architecture):</strong> High-capacity decision encoder with 32,768-token reach (YaRN stretched from 1,024 trained base), scoring questions and evidence with invariant option scoring.
            </Text>
            <Text fontSize="$2" lineHeight="$3" color="var(--muted-foreground)">
              • <strong>Vision Encoder (~170M params, {TARGET}):</strong> Spatial feature extraction for screenshots, diagrams, UI layouts, and physical component inspections.
            </Text>
            <Text fontSize="$2" lineHeight="$3" color="var(--muted-foreground)">
              • <strong>Audio Encoder (~300M params, {TARGET}):</strong> Continuous acoustic representation capturing speech intent, call center audio, and sensor acoustic harmonics.
            </Text>
            <Text fontSize="$2" lineHeight="$3" color="var(--muted-foreground)">
              • <strong>Video Processor ({TARGET}):</strong> Multi-frame temporal sampling bridge projecting dynamic scene progressions without token bloat.
            </Text>
            <Text fontSize="$2" lineHeight="$3" color="var(--muted-foreground)">
              • <strong>Latent Fusion Bridge (~60M params, {TARGET}):</strong> Cross-attention adapter projecting multimodal latents into Kai&apos;s decision geometry.
            </Text>
            <Text fontSize="$2" lineHeight="$3" color="var(--muted-foreground)">
              • <strong>Decision Core (shipping):</strong> Parallel factorized candidate scoring over typed schemas (choice, noul, score) with zero option-option coupling (<Text fontFamily="$mono">flip.order = 0.0000</Text>).
            </Text>
            <Text fontSize="$2" lineHeight="$3" color="var(--muted-foreground)">
              • <strong>Adaptive Reasoning Engine ({TARGET}):</strong> Dynamic compute scaling via <Text fontFamily="$mono">reasoning: &quot;auto&quot;</Text>. Sub-millisecond decisions on GPU, with automated refinement when ambiguity is high.
            </Text>
            <Text fontSize="$2" lineHeight="$3" color="var(--muted-foreground)">
              • <strong>Nio policy (experimental):</strong> Decides from the consequences a caller states, and escalates to a person when it cannot count them. It enforces its rule; it does not repair consequences read wrongly. An earlier &quot;zero dominated actions&quot; figure is withdrawn: it was not a measurement of Kai.
            </Text>
          </YStack>
          <Text fontSize="$2" lineHeight="$2" color="var(--muted-foreground)">
            Multimodal decision architecture: ~850M parameters, sub-millisecond p50 on GPU, $0.021 / MTok base input, zero output tokens billed.
          </Text>
          {record.languages ? (
            <Text fontSize="$2" lineHeight="$2" color="var(--muted-foreground)">
              {record.languages.label}: Kai {record.languages.kai}, Jev {record.languages.jev}, on the frozen harness.
              {record.languages.tally
                ? ` Language by language, Kai is ahead of Jev on ${record.languages.tally.ahead} ${record.languages.tally.ahead === 1 ? 'language' : 'languages'}.`
                : ''}
            </Text>
          ) : null}
        </Row>

        {/* Many domains, one instrument. */}
        <Band id="questions" measure={1024}>
          <Head eyebrow="Use it for" title="Any question with a known set of answers." lede="Routing, triage, safety, approvals, agent control. If you can list the options, Kai can weigh them." loud />
          <Grid columns={{ min: 260, max: 2 }} gap={12}>
            {QUESTIONS.map(([q, type]) => (
              <XStack key={q} justify="space-between" items="center" gap="$4" py="$3" px="$4" borderWidth={1} borderColor="var(--border)" rounded="$4">
                <Text fontSize="$3" lineHeight="$3" color="$ink">
                  {q}
                </Text>
                <Text fontFamily="$mono" fontSize="$1" color="var(--text-tertiary)">
                  {type}
                </Text>
              </XStack>
            ))}
          </Grid>
        </Band>

        <ModelCardSection
          id="model-card"
          badge="Kai · Decision Model"
          title="Calibrated decision intelligence. Every parameter, wire protocol, and metric."
          description="Evaluates multimodal evidence into discrete probabilities across typed schemas. Sub-millisecond p50 on GPU, zero output token cost, and 20 production enterprise recipes."
          modelId="kai"
          endpoint="POST https://api.hanzo.ai/v1/decisions"
          specs={[
            { label: 'Wire Schema', value: 'bool · choice · score', mono: true, note: 'noul accepted as bool' },
            { label: 'Context Window', value: '32,768 tokens (multilingual YaRN)', note: 'Stretched from 1,024 trained base' },
            { label: 'Latency Floor', value: '<1 ms p50 (one question, CUDA bf16)', note: 'Measured in production on GPU' },
            { label: 'Output Token Cost', value: '$0.00 / free (0 tokens)', note: 'Deterministic probability distributions' },
            { label: 'Input Token Pricing', value: '$0.021 / million tokens', note: '$0.000000021 per token' },
            { label: 'Reasoning Engine', value: 'auto · fast · deep', mono: true, note: TARGET },
            { label: 'Alignment & Safety', value: 'Nio policy profiles (experimental)', note: 'Escalates when consequences are unknown' },
          ]}
          sdkLinks={[
            { language: 'Python', href: 'https://github.com/hanzoai/kai/tree/main/examples/python', tag: 'examples/python' },
            { language: 'TypeScript', href: 'https://github.com/hanzoai/kai/tree/main/examples/typescript', tag: 'examples/typescript' },
            { language: 'Go', href: 'https://github.com/hanzoai/kai/tree/main/examples/go', tag: 'examples/go' },
            { language: 'Rust', href: 'https://github.com/hanzoai/kai/tree/main/examples/rust', tag: 'examples/rust' },
            { language: 'cURL', href: 'https://github.com/hanzoai/kai/tree/main/examples/curl', tag: 'examples/curl' },
          ]}
          recipesLink={{
            label: '20 Enterprise Recipes & Standalone Rust Crate',
            href: 'https://github.com/hanzoai/kai/tree/main/recipes',
          }}
          githubRepo="https://github.com/hanzoai/kai"
          docsUrl="https://docs.hanzo.ai/docs/decisions"
          sampleCode={{
            lang: 'bash',
            code: `# "reasoning" is the ${TARGET}: api.hanzo.ai refuses the field today (400).
curl -X POST https://api.hanzo.ai/v1/decisions \\
  -H "Authorization: Bearer $HANZO_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "kai",
    "reasoning": "auto",
    "state": { "telemetry": { "bearing_temp_c": 94.2, "rpm": 3600 } },
    "questions": {
      "triage": {
        "type": "choice",
        "criteria": { "nominal": "within specs", "inspect": "anomaly", "halt": "critical" }
      }
    }
  }'`,
          }}
        />

        <ProductUseCasesSection
          eyebrow="Enterprise Solutions"
          title="Battle-tested decision blueprints across high-throughput enterprise operations."
          lede="Edge-to-cloud calibrated decision pipelines built for massive SKU inventories, cold-chain logistics, and automated triage."
          useCases={[
            {
              tag: 'Retail availability',
              title: 'Shelf & Ghost Inventory Triage',
              stack: 'Kai-M + Kai',
              description: 'Multimodal edge vision detects misplaced SKUs, out-of-stock items, and occluded facings. Kai outputs calibrated probabilities over discrete restock actions with zero output tokens.',
              whitepaper: { label: 'HIP-1332 (Kai Decision Spec)', href: 'https://hips.hanzo.ai/docs/hip-1332-kai-the-decision-model' },
              blogPost: { label: 'Kai 1: Decisions, Not Completions', href: 'https://hanzo.blog/blog/2026-10-07-introducing-kai/' },
              sourceCode: { label: 'recipes/src/retail.rs', href: 'https://github.com/hanzoai/kai/tree/main/recipes' },
              actionLabel: 'Explore the shelf recipe',
              actionHref: 'https://github.com/hanzoai/kai/tree/main/recipes',
            },
            {
              tag: 'Supply chain',
              title: 'Cross-Dock Pallet Triage',
              stack: 'Kai-M + Kata',
              description: 'Real-time dock sensors flag pallet damage, tilt, and stretch-wrap tears. Kai computes disposition probabilities under site safety controls and routes to restock or quarantine.',
              whitepaper: { label: 'HIP-1334 (Unified Edge Runtime)', href: 'https://hips.hanzo.ai/docs/hip-1334-research-unified-runtime' },
              blogPost: { label: 'Decisions, Not Completions', href: 'https://hanzo.blog/blog/2026-10-07-introducing-kai/' },
              sourceCode: { label: 'recipes/src/industrial.rs', href: 'https://github.com/hanzoai/kai/tree/main/recipes' },
              actionLabel: 'Explore the logistics recipe',
              actionHref: 'https://github.com/hanzoai/kai/tree/main/recipes',
            },
            {
              tag: 'Asset protection',
              title: 'High-Value Returns Fraud Inspection',
              stack: 'Kai-M + Zen',
              description: 'Pairs high-resolution visual anomaly detectors with Kai discrete decision logic to flag item swaps, serial mismatches, tampering, and restock vs scrap dispositions.',
              whitepaper: { label: 'HIP-0039 (Vision Embeddings)', href: 'https://hips.hanzo.ai/docs/hip-0039-zen-model-architecture' },
              blogPost: { label: 'Your AI is Planning To Kill You', href: 'https://hanzo.blog/blog/2026-10-16-your-ai-is-planning-to-kill-you/' },
              sourceCode: { label: 'recipes/src/retail.rs', href: 'https://github.com/hanzoai/kai/tree/main/recipes' },
              actionLabel: 'Explore the returns recipe',
              actionHref: 'https://github.com/hanzoai/kai/tree/main/recipes',
            },
            {
              tag: 'Cold chain and fleet',
              title: 'Refrigeration & Fleet Anomaly Triage',
              stack: 'Kai-M + Kai',
              description: 'Continuous multivariate telemetry ingestion across trailer temperature, compressor vibration, and RPM sensors. Flags impending unit failure hours before spoilage thresholds trip.',
              whitepaper: { label: 'HIP-1145 (Telemetry Bounds)', href: 'https://hips.hanzo.ai/docs/hip-1145-research-experiment-record' },
              blogPost: { label: 'What Is a Decision Model?', href: 'https://hanzo.blog/blog/2026-09-30-what-is-a-decision-model/' },
              sourceCode: { label: 'recipes/src/industrial.rs', href: 'https://github.com/hanzoai/kai/tree/main/recipes' },
              actionLabel: 'Explore the sensor recipe',
              actionHref: 'https://github.com/hanzoai/kai/tree/main/recipes',
            },
          ]}
        />

        <ProductArticlesSection
          eyebrow="Research & Architecture"
          title="Deep-dives, ethics benchmarks, and decision model specifications."
          lede="The research, the benchmark results and the specification, from the Kai team."
          articles={[
            {
              title: 'Kai 1: Decisions, Not Completions',
              href: 'https://hanzo.blog/blog/2026-10-07-introducing-kai/',
              date: '2026-10-07',
              category: 'Decisions',
              description: "Kai is Hanzo's decision model, served by the Hanzo API. Give it explicit state and a listed question, and it returns a typed, calibrated answer — a choice, a score, a yes/no, or a reasoned deferral.",
            },
            {
              title: 'Your AI is Planning To Kill You',
              href: 'https://hanzo.blog/blog/2026-10-16-your-ai-is-planning-to-kill-you/',
              date: '2026-10-16',
              category: 'Alignment',
              description: "Why frontier models fail when real lives are on the line, and how Hanzo Nio enforces deterministic safety.",
            },
            {
              title: 'What Is a Decision Model?',
              href: 'https://hanzo.blog/blog/2026-09-30-what-is-a-decision-model/',
              date: '2026-09-30',
              category: 'Foundations',
              description: 'Generative models reason in unconstrained paragraphs. Decision models decide in typed, calibrated state transitions. Why the next frontier of AI is decisions, not completions.',
            },
          ]}
        />

        <Read
          eyebrow="Read"
          title="The model, the runs, the specification."
          lede="One model, the questions it is scored on, and the writing."
          groups={[
            {
              label: 'Models',
              links: [
                { href: modelPagePath('kai'), label: 'Kai →', note: 'One model. The id is kai.' },
                { href: '#api', label: 'The call →', note: 'POST /v1/decisions.' },
                { href: '/kai/guide', label: 'How to use it →' },
              ],
            },
            {
              label: 'Benchmarks',
              links: [
                { href: '#benchmarks', label: 'On this page →', note: 'Kai against Jev, on the same questions.' },
                { href: '/benchmarks', label: 'The suite →' },
              ],
            },
            {
              label: 'Research',
              links: [
                { href: SPEC, label: 'HIP-1332 →', note: 'The decision model.' },
                { href: '/blog/kai-decision-models', label: 'Kai 1 →', note: 'Decisions, not completions.' },
                {
                  href: 'https://hips.hanzo.ai/docs/hip-1145-research-experiment-record',
                  label: 'HIP-1145 →',
                  note: 'How a run is recorded.',
                },
                {
                  href: 'https://hips.hanzo.ai/docs/hip-1334-research-unified-runtime',
                  label: 'HIP-1334 →',
                  note: 'The research runtime.',
                },
                { href: 'https://hips.hanzo.ai', label: 'HIPs →' },
                { href: '/research', label: 'Research →' },
              ],
            },
          ]}
        />
        <Siblings name="Kai" />
        {product('kai') && <AgentPrompt product={product('kai')!} />}
        <Closing
          title="When the answer has a type, ask Kai."
          primary={{ label: 'Request early access', href: '/research-access?track=kai' }}
          secondary={{ label: 'Explore decision recipes', href: 'https://github.com/hanzoai/kai/tree/main/recipes' }}
        />
      </Box>

      <SiteFooter />
    </>
  )
}