hanzo.ai/components/kata/KataLanding.tsx

'use client'

import type { ReactNode } from 'react'
import { SiteFooter, SiteHeader } from '@/components/home/shell'
import { Hero } 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 { Rise } from '@/components/marketing/rise'
import { Term, type Line } from '@/components/frame/Term'
import { Box, Text, XStack, YStack } from '@/components/ui'
import { Faq } from '@/components/ui/faq'
import { Grid } from '@hanzo/ui/grid'
import { More } from '@hanzo/ui/marketing'
import { AgentPrompt } from '@/components/product/AgentPrompt'
import { product } from '@/lib/product'

const REPO = 'https://github.com/hanzoai/kata'
const DOCS = 'https://docs.hanzo.ai/docs/coding'

const TERMINAL_LINES: Line[] = [
  { kind: 'run', text: 'kata run --suite tests/unit' },
  { kind: 'note', text: '12 passed · 1 failed (test_token_expiry)' },
  { kind: 'gap' },
  { kind: 'run', text: 'kata triage' },
  { kind: 'note', text: 'Kai decision: patch · confidence: 0.96 · root cause: off-by-one jitter' },
  { kind: 'gap' },
  { kind: 'run', text: 'kata repair --model enso-ultra' },
  { kind: 'note', text: 'synthesized AST edit in auth/tokens.py · re-running test suite...' },
  { kind: 'gap' },
  { kind: 'ok', text: '13 passed · 0 failed · 100% green verification' },
]

const PIPELINE_STEPS = [
  {
    step: '01 · Observe',
    title: 'Catch the failure',
    desc: 'Reads the stack trace, exit code and test log from pytest, cargo test, vitest or go test.',
  },
  {
    step: '02 · Decide',
    title: 'Choose what to do',
    desc: 'Kai scores retry, patch, roll back or hand to a person, as probabilities, and writes no text.',
  },
  {
    step: '03 · Write',
    title: 'Write the fix',
    desc: 'Enso picks the model that writes the edit, weighing quality, latency and budget.',
  },
  {
    step: '04 · Verify',
    title: 'Prove it',
    desc: 'The candidate diff runs in an isolated microVM sandbox. Only a change whose whole suite passes lands.',
  },
]

const KATA_FEATURES = [
  {
    title: 'Test repair, end to end',
    desc: 'Finds regressions and flaky tests, traces each to its root cause, writes the smallest diff and checks that the suite passes.',
  },
  {
    title: 'Triage by Kai',
    desc: 'No prose to parse: Kai returns a probability for each action, patch, roll back, retry or approve.',
  },
  {
    title: 'Models picked by Enso',
    desc: 'Each attempt runs on enso-auto, enso-flash or enso-ultra, trading cost against accuracy.',
  },
  {
    title: 'Runs in your pipeline',
    desc: 'In GitHub Actions, GitLab CI or a pre-push hook in your terminal.',
  },
]

const QUESTIONS = [
  {
    question: 'How does Kata differ from Hanzo Dev and Gen?',
    answer: 'Dev is the coding agent that plans and writes whole features. Gen runs any coding agent on Hanzo’s tools and models. Kata repairs failing tests in CI: it triages each failure and lands a fix only when the suite passes.',
  },
  {
    question: 'Which test frameworks does Kata support?',
    answer: 'Kata natively supports pytest, vitest, jest, cargo test, go test, and custom test runners emitting standard TAP or JUnit XML output.',
  },
  {
    question: 'Where can I find the open-source examples and recipes?',
    answer: 'The open-source repository is at github.com/hanzoai/kata with runnable examples in Python, TypeScript, Go, Rust, and cURL, along with a standalone Rust recipes crate.',
  },
  {
    question: 'How do I authenticate with Hanzo Cloud?',
    answer: 'Log in once with `hanzo auth login` or export `HANZO_API_KEY` from platform.hanzo.ai/keys.',
  },
]

export default function KataLanding() {
  return (
    <>
      <SiteHeader />

      <Box render="main" bg="$background" pt="$10" $platform-web={{ color: 'var(--foreground)' }}>
        <Hero
          chip="Hanzo Kata · Test repair"
          title={
            <>
              Test. Repair. Verify.
              <br />
              Autonomous loop.
            </>
          }
          lede="Kata keeps your tests green. It triages a failing CI run, finds the regression, writes the fix and runs the suite again before anything lands."
          primary={{ label: 'Get API key', href: 'https://platform.hanzo.ai/keys' }}
          action={{ label: 'Explore GitHub examples →', href: REPO }}
          more={{ label: 'Read the docs →', href: DOCS }}
          figure={<Term title="terminal" lines={TERMINAL_LINES} />}
        />

        {/* 4-Step Closed Loop Pipeline */}
        <Band id="pipeline" measure={1180}>
          <Head
            eyebrow="The loop"
            title="From a failing test to a verified fix."
            lede="Kata never submits speculative code: Kai triages every failure, Enso writes the fix, and your own test suite decides whether it lands."
            loud
          />
          <Grid columns={{ min: 260, max: 4 }} gap={16} mt="$6">
            {PIPELINE_STEPS.map((s, i) => (
              <Rise key={s.step} beat={i}>
                <Card display="flex" flexDirection="column" gap="$2" p="$5" height="100%" borderColor="var(--border)" bg="$panel">
                  <Text fontFamily="$mono" fontSize="$1" lineHeight="$1" color="var(--primary)" textTransform="uppercase">
                    {s.step}
                  </Text>
                  <Text render="h3" fontSize="$4" lineHeight="$4" fontWeight="600" color="$ink">
                    {s.title}
                  </Text>
                  <Text fontSize="$2" lineHeight="$3" color="var(--text-secondary)">
                    {s.desc}
                  </Text>
                </Card>
              </Rise>
            ))}
          </Grid>
        </Band>

        {/* Feature Grid */}
        <Band id="features" measure={1180}>
          <Head
            eyebrow="Capabilities"
            title="Built for the pipeline."
            lede="Test repair, triage and the choice of model, in the CI you already run."
            loud
          />
          <Grid columns={{ min: 280, max: 2 }} gap={16} mt="$6">
            {KATA_FEATURES.map((f, i) => (
              <Rise key={f.title} beat={i}>
                <Card display="flex" flexDirection="column" gap="$3" p="$6" height="100%" borderColor="var(--border)">
                  <Text render="h3" fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink">
                    {f.title}
                  </Text>
                  <Text fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                    {f.desc}
                  </Text>
                </Card>
              </Rise>
            ))}
          </Grid>
        </Band>


        {/* FAQ Section */}
        <Band measure={768}>
          <Head eyebrow="Questions" title="Asked plainly." />
          <Faq items={QUESTIONS} />
        </Band>

        {/* Read Section */}
        <Read
          eyebrow="Read"
          title="The agent, the loop, the documentation."
          lede="Explore the source code, recipes, and documentation."
          groups={[
            {
              label: 'Kata',
              links: [
                { href: REPO, label: 'hanzoai/kata →', note: 'GitHub Repository.' },
                { href: `${REPO}/tree/main/examples`, label: 'Multi-Language SDKs →' },
                { href: `${REPO}/tree/main/recipes`, label: 'Rust Recipes Crate →' },
              ],
            },
            {
              label: 'Agent Systems',
              links: [
                { href: '/dev', label: 'Hanzo Dev →', note: 'Our coding agent.' },
                { href: '/gen', label: 'Hanzo Gen →', note: 'Universal harness.' },
                { href: '/kai', label: 'Kai →', note: 'Decision engine.' },
              ],
            },
            {
              label: 'Models',
              links: [
                { href: '/enso', label: 'Enso →', note: 'Model router.' },
                { href: '/zen', label: 'Zen →', note: 'Open weights.' },
                { href: '/models', label: 'Every model →' },
              ],
            },
          ]}
        />

        {product('kata') && <AgentPrompt product={product('kata')!} />}
        <Closing title="Keep your test suites green." secondary={{ label: 'Explore repair recipes', href: 'https://github.com/hanzoai/kata/tree/main/recipes' }} />
      </Box>

      <SiteFooter />
    </>
  )
}