hanzo.ai/components/kai/Instrument.tsx

'use client'

/**
 * The /kai hero: one decision, forming. A deploy's state, one question with three
 * options, and the distribution Kai's answer is — which converges once on load
 * and deforms when the reader changes the one fact that matters.
 *
 * EVERY PROBABILITY HERE IS AN EXAMPLE, and the window's bar says so. The shape
 * is the API's own: a `choice` question over named options, answered with a
 * `choice`, `probabilities` keyed by label, and `usage.output_tokens` of 0.
 *
 * The export draws the settled answer: the first render holds the targets, and the
 * convergence from an even split plays only once the page knows motion is wanted.
 */

import { useEffect, useState } from 'react'
import { Text, View, XStack, YStack } from '@hanzo/ui'
import { useReduced, useTween } from '@/components/motion'
import { Dist, Lines, Panel, Switch } from './figures'

/** The options, in the order the question names them. */
const OPTIONS = ['continue', 'review', 'stop'] as const

/** The answer for each state of the one fact the reader can change. */
type Review = 'pending' | 'passed'
const ANSWER: { readonly [k in Review]: readonly number[] } = {
  pending: [0.17, 0.76, 0.07],
  passed: [0.91, 0.07, 0.02],
}

/** An even split, the distribution before any evidence is read. */
const EVEN = [1 / 3, 1 / 3, 1 / 3]

const prob = (p: number) => p.toFixed(2).replace(/^0/, '')

export default function Instrument() {
  const reduced = useReduced()
  const [review, setReview] = useState<Review>('pending')
  // The export and the first paint hold the settled answer. Once the page knows
  // motion is wanted, the distribution starts again from an even split and
  // converges, once: the answer forming, rather than arriving.
  // `still` is the same settled answer, hydrated, for a reader who declined motion.
  const [phase, setPhase] = useState<'settled' | 'still' | 'even' | 'live'>('settled')
  useEffect(() => {
    if (reduced) {
      const raf = requestAnimationFrame(() => setPhase('still'))
      return () => cancelAnimationFrame(raf)
    }
    const raf = requestAnimationFrame(() => setPhase('even'))
    const t = setTimeout(() => setPhase('live'), 200)
    return () => {
      cancelAnimationFrame(raf)
      clearTimeout(t)
    }
  }, [reduced])
  const target = phase === 'even' ? EVEN : ANSWER[review]
  const now = useTween(target, { ms: phase === 'live' ? 900 : 0 })
  const top = now.indexOf(Math.max(...now))
  const chosen = OPTIONS[ANSWER[review].indexOf(Math.max(...ANSWER[review]))]

  return (
    <YStack data-figure="instrument" data-phase={phase} gap="$4" width="100%" maxW={560} mx="auto">
      <Panel title="POST /v1/decisions">
        <Lines lines={[['state', 'dim']]} />
        <Text display="grid" gridTemplateColumns="max-content minmax(0, 1fr)" columnGap={24} rowGap={4} items="center">
          <Text color="var(--text-tertiary)">deployment</Text>
          <Text color="$ink">production</Text>
          <Text color="var(--text-tertiary)">tests</Text>
          <Text color="$ink">passing</Text>
          <Text color="var(--text-tertiary)">security_review</Text>
          <XStack gap={6} flexWrap="wrap" role="group" aria-label="security_review">
            {(['pending', 'passed'] as const).map((v) => (
              <Switch key={v} pressed={review === v} onClick={() => setReview(v)}>
                {v}
              </Switch>
            ))}
          </XStack>
          <Text color="var(--text-tertiary)">rollback</Text>
          <Text color="$ink">ready</Text>
        </Text>
        <Lines lines={['', ['question · choice', 'dim'], ['Should the deploy continue?', 'lit'], '']} />
        <Dist rows={OPTIONS.map((o, i) => [o, now[i]] as const)} lead={top} />
        <Lines lines={['', ['answer', 'dim']]} />
        <Text display="block" aria-live="polite" data-answer>
          <Text color="$ink">choice</Text>
          <Text color="var(--text-tertiary)"> · </Text>
          <Text color="$ink">{chosen}</Text>
          <Text color="var(--text-tertiary)"> · p </Text>
          <Text color="$ink" $platform-web={{ fontVariantNumeric: 'tabular-nums' }}>
            {prob(Math.max(...ANSWER[review]))}
          </Text>
        </Text>
        <Lines lines={[['usage.output_tokens · 0', 'dim']]} />
      </Panel>
      <Text fontSize="$2" lineHeight="$2" color="var(--muted-foreground)" $platform-web={{ textAlign: 'center', textWrap: 'balance' }}>
        Change the review. Only the answer moves &mdash; Kai evaluates the options, it does not write a reply.
      </Text>
      <XStack borderTopWidth={1} borderColor="var(--border)" pt="$4" justify="space-between" gap="$4">
        {[
          ['Typed', 'The answer space is known in advance.'],
          ['Calibrated', 'A probability on every option.'],
          ['0', 'Output tokens generated.'],
        ].map(([k, v]) => (
          <View key={k} flex={1} minW={0}>
            <Text display="block" fontFamily="$mono" fontSize="$5" lineHeight="$5" color="$ink" $platform-web={{ fontVariantNumeric: 'tabular-nums' }}>
              {k}
            </Text>
            <Text display="block" mt="$1" fontSize="$1" lineHeight="$1" color="var(--muted-foreground)">
              {v}
            </Text>
          </View>
        ))}
      </XStack>
    </YStack>
  )
}