hanzo.ai/app/(marketing)/blog/pareto-frontier/page.tsx

import type { Metadata } from 'next'
import Link from 'next/link'
import { ArrowLeft, Calendar, Clock } from 'lucide-react'
import { phrase } from '@hanzo/i18n'
import { T } from '@hanzo/i18n/react'
import { Text, XStack, YStack } from '@/components/ui'
import { Band, Card } from '@/components/marketing/band'
import { Action, Chip, Display, Lede, Title } from '@hanzo/ui/marketing'
import { Grid } from '@hanzo/ui/grid'
import { Code } from '@/components/code'
import { Chart } from '@/components/enso/Chart'

/**
 * Hanzo Gen, Enso and Kai: one agent better, cheaper and faster at once. The
 * chart is /enso's, drawn from the research runs as the page loads; the Kai
 * figures are the ones /blog/kai-decision-models states (production's read of
 * 2026-10-10). No other figure is said here.
 */

const START = `curl -fsSL https://hanzo.sh | sh
hanzo dev --claude`

/** The three parts, each with what it does on an agent's step. */
const PARTS: readonly [string, string, string][] = [
  ['Gen', phrase('The harness'), phrase('Runs Claude Code, Codex, Cursor or Dev with Hanzo’s tools attached and its model calls on Hanzo.')],
  ['Enso', phrase('The router'), phrase('Sends each call to the model that answers it right for the least, and a hard one to the best.')],
  ['Kai', phrase('The decider'), phrase('Answers the agent’s choices with a probability for each option. Writes no text.')],
]

const TITLE = 'A New Pareto Frontier — Hanzo AI'
const DESCRIPTION = 'Hanzo Gen weaves Enso and Kai into the coding agent you already use: better, cheaper and faster at once.'

export const metadata: Metadata = {
  title: TITLE,
  description: DESCRIPTION,
  alternates: { canonical: 'https://hanzo.ai/blog/pareto-frontier' },
  openGraph: { title: TITLE, description: DESCRIPTION, url: 'https://hanzo.ai/blog/pareto-frontier', siteName: 'Hanzo AI', type: 'article' },
  twitter: { card: 'summary_large_image', title: TITLE, description: DESCRIPTION },
}

const BODY = { fontSize: '$3', color: 'var(--text-secondary)', '$platform-web': { lineHeight: '1.8em' } } as const

export default function ParetoFrontierPage() {
  return (
    <YStack minH="100vh" bg="var(--background)">
      <Band rule={false} pad="$14" measure={860}>
        <YStack gap={24}>
          <XStack render={<Link href="/blog" />} items="center" gap={6}>
            <ArrowLeft size={14} color="var(--muted-foreground)" data-i18n-mirror />
            <Text fontSize="$1" color="var(--muted-foreground)">
              <T>Back to Blog</T>
            </Text>
          </XStack>

          <XStack items="center" justify="space-between" flexWrap="wrap" gap={12}>
            <Chip px={10} py={3} fontSize="$1" fontFamily="$mono" color="var(--foreground)" borderWidth={0} bg="var(--glass-strong)">
              Hanzo Gen
            </Chip>
            <XStack items="center" gap={16}>
              <XStack items="center" gap={6}>
                <Calendar size={13} color="var(--muted-foreground)" />
                <Text fontSize="$1" color="var(--muted-foreground)">
                  October 18, 2026
                </Text>
              </XStack>
              <XStack items="center" gap={6}>
                <Clock size={13} color="var(--muted-foreground)" />
                <Text fontSize="$1" color="var(--muted-foreground)">
                  <T values={{ n: 3 }}>{'{n} min read'}</T>
                </Text>
              </XStack>
            </XStack>
          </XStack>

          <Display mb={0} text="left">
            <T>A New Pareto Frontier</T>
          </Display>

          <Lede mb={0} text="left">
            <T>{'Better, cheaper, faster: pick all three. Hanzo Gen weaves Enso and Kai into the coding agent you already use, so every step costs what it needs to and no more.'}</T>
          </Lede>
        </YStack>
      </Band>

      <Band rule={true} pad="$10" measure={860}>
        <Grid columns={{ min: 220, max: 3 }} gap={16}>
          {PARTS.map(([name, role, does]) => (
            <Card key={name} p={20} bg="$panel" borderWidth={0} rounded="var(--radius-xl)">
              <YStack gap={6}>
                <Text fontSize="$1" fontFamily="$mono" color="var(--muted-foreground)">
                  <T>{role}</T>
                </Text>
                <Text fontSize="$6" fontWeight="600" color="var(--foreground)">
                  {name}
                </Text>
                <Text fontSize="$2" color="var(--muted-foreground)">
                  <T>{does}</T>
                </Text>
              </YStack>
            </Card>
          ))}
        </Grid>
      </Band>

      <Band rule={true} pad="$12" measure={860}>
        <YStack gap={40}>
          <YStack gap={16}>
            <Title quiet={false}><T>The trade nobody should make</T></Title>
            <Text {...BODY}>
              <T>{'Every model sits on a curve: a better answer costs more and takes longer. A coding agent pays that curve on every step, and most of its steps never needed the top of it. Reading a file, choosing a tool, deciding a test passed: the frontier model does all of it at frontier prices.'}</T>
            </Text>
            <Text {...BODY}>
              <T>{'Moving the curve takes two things: put each request on the model it actually needs, and stop generating text where a decision will do.'}</T>
            </Text>
          </YStack>

          <YStack gap={16}>
            <Title quiet={false}><T>Enso picks the model</T></Title>
            <Text {...BODY}>
              <T>{'Enso is a router trained on outcomes. Each request goes to the model that answers it right for the least, and a hard one goes to the best there is. Its tiers are prices, Flash, Pro and Ultra, and the routing under each is learned. Route statically, by your own policy, or train it on your own traffic as we train ours.'}</T>
            </Text>
            <Card p="$4" bg="$panel">
              <Chart />
            </Card>
            <Text fontSize="$1" color="var(--muted-foreground)">
              <T values={{ n: '1,000' }}>{'GPQA Diamond accuracy against what {n} questions cost, drawn from the research runs as this page loads.'}</T>
            </Text>
          </YStack>

          <YStack gap={16}>
            <Title quiet={false}><T>Kai makes the small calls</T></Title>
            <Text {...BODY}>
              <T values={{ p50: '0.27 ms', price: '$0.021' }}>
                {"Most of an agent's steps are choices: run this command or ask first, did the test pass, is the task done. Kai answers each as a decision, a probability for every option, in sub-millisecond latency on GPU ({p50} p50). It writes no text, so no output is billed, and its input costs {price} per million tokens."}
              </T>
            </Text>
          </YStack>

          <YStack gap={16}>
            <Title quiet={false}><T>Gen weaves them into your agent</T></Title>
            <Text {...BODY}>
              <T>{"Gen is the harness. It launches the agent you name, Claude Code, Codex, Cursor or Dev, attaches the Hanzo MCP toolset, links the session to your account and sends the agent's model calls through api.hanzo.ai, where Enso routes them. Dev, the agent Gen opens when you name none, runs with Kai deciding each step."}</T>
            </Text>
            <Text {...BODY}><T>Same agent, same workflow. The curve moves under it.</T></Text>
            <Card p="$4" bg="$panel">
              <Code lang="bash" code={START} />
            </Card>
          </YStack>

          <Card p={36} bg="$panel" borderWidth={1} borderColor="var(--border)" rounded="var(--radius-2xl)" mt={24}>
            <YStack items="center" gap={16} $platform-web={{ textAlign: 'center' }}>
              <Text fontSize="$5" fontWeight="600" color="var(--foreground)">
                <T>Start with the agent you have</T>
              </Text>
              <XStack items="center" justify="center" gap={12} flexWrap="wrap" mt={8}>
                <Action href="/gen" fill>
                  Hanzo Gen
                </Action>
                <Action href="/enso"><T>How Enso routes</T></Action>
                <Action href="/kai">Kai</Action>
              </XStack>
            </YStack>
          </Card>
        </YStack>
      </Band>
    </YStack>
  )
}