hanzo.ai/components/gen/GenLanding.tsx

/**
 * /gen — Hanzo Gen, the agentic harness: how to get it, what it is beside Dev,
 * the agents it runs, what it puts around each of them, and the same harness
 * inside the Hanzo CLI.
 *
 * `gen` installs from hanzo.sh (`sh -s gen` alone, or with every Hanzo tool by
 * default), and every command here was run against gen 0.1.0 (`gen --help`, and
 * `gen --<agent>` naming its agent back). The Hanzo CLI links the same harness,
 * so `hanzo dev --<agent>` is the same session with the same flags. What Gen
 * adds is said in its own help: `--cloud`, `--model`, `--no-mcp`,
 * `--project-mcp`, `--ask`, `--no-link`, `--resume`.
 *
 * No figure is typed: the latest release is GitHub's answer when the page opens
 * (components/product/Release) and is absent when it does not answer; the list
 * of agents is the harness's own (./roster), and the page counts nothing.
 *
 * A server component; the agent grid and the release are the client parts it stacks.
 */
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 { Sample } from '@/components/models/kit'
import { Term, type Line } from '@/components/frame/Term'
import { Code } from '@/components/code'
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 { Release } from '@/components/product/Release'
import { AgentPrompt } from '@/components/product/AgentPrompt'
import { product } from '@/lib/product'
import { Agents } from './Agents'

const REPO = 'https://github.com/hanzoai/gen'

/** The hero's transcript: the install, then the commands themselves, nothing they print. */
const NOW: Line[] = [
  { kind: 'run', text: 'curl -fsSL https://hanzo.sh | sh -s gen' },
  { kind: 'gap' },
  { kind: 'run', text: 'gen' },
  { kind: 'note', text: 'no agent named: Hanzo Dev' },
  { kind: 'gap' },
  { kind: 'run', text: 'gen --claude' },
  { kind: 'note', text: 'Claude Code, with the Hanzo toolset attached' },
  { kind: 'gap' },
  { kind: 'run', text: 'gen --codex "add a test"' },
  { kind: 'note', text: 'Codex, run headless on the task' },
  { kind: 'gap' },
  { kind: 'run', text: 'gen --claude --cloud' },
  { kind: 'note', text: 'its model calls on Hanzo’s, metered on your account' },
]

const INSTALL = `curl -fsSL https://hanzo.sh | sh -s gen   # gen alone
curl -fsSL https://hanzo.sh | sh          # or every Hanzo tool, gen included`

const START = `gen                        # Hanzo Dev, the default
gen --claude               # Claude Code; any agent is a flag
gen --codex "add a test"   # a task, run headless`

const FLAGS = `gen --claude --cloud                # its model calls through api.hanzo.ai
gen --claude --cloud --model enso-ultra
gen --codex --no-link               # keep the session on this machine
gen --resume <session-id>           # pick a linked session back up
gen --claude -- -c                  # after --, the agent's own arguments`

const CLI = `hanzo dev                  # gen
hanzo dev --claude         # gen --claude
hanzo dev --codex --cloud  # gen --codex --cloud`

/** The two, one line each. */
const TWO: readonly { name: string; line: string; body: string; href: string; more: string }[] = [
  {
    name: 'Gen',
    line: 'The harness. Any agent, our rails.',
    body: 'It launches the coding agent you name with Hanzo’s tools attached, routes its model calls through Hanzo when you ask, and links the session to your account.',
    href: REPO,
    more: 'hanzoai/gen →',
  },
  {
    name: 'Dev',
    line: 'Our agent.',
    body: 'The coding agent Hanzo builds, with Kai deciding each step. It is the agent Gen opens when none is named.',
    href: '/dev',
    more: 'Hanzo Dev →',
  },
]

/** What the harness puts around an agent, each with the flag that turns it. */
const RAILS: readonly { name: string; body: ReactNode; flags: string }[] = [
  {
    name: 'Tools',
    body: 'The Hanzo MCP toolset rides along on every agent that can take a server for one run.',
    flags: '--no-mcp',
  },
  {
    name: 'Models',
    body: 'Its model calls go to api.hanzo.ai, metered on your account, for an agent that can name another endpoint. Without the flag, an agent uses the account it is signed in to.',
    flags: '--cloud  --model',
  },
  {
    name: 'Sessions',
    body: 'Signed in, a session is linked to your Hanzo account and streams to mission control as it runs, so it can be followed and picked back up.',
    flags: '--resume  --no-link',
  },
  {
    name: 'Fences',
    body: 'Sessions are approved inside a sandbox; ask before each action instead. A repository’s own .mcp.json stays off until you trust it.',
    flags: '--ask  --project-mcp',
  },
]

const QUESTIONS = [
  {
    question: 'How do I install it?',
    answer: 'curl -fsSL https://hanzo.sh | sh -s gen installs gen alone; curl -fsSL https://hanzo.sh | sh installs every Hanzo tool, gen and the Hanzo CLI included. Run either again to upgrade. On Windows, take the build from the release page.',
  },
  {
    question: 'Is gen the same as hanzo dev?',
    answer: 'The same harness. The Hanzo CLI links it, so gen --claude and hanzo dev --claude take the same flags and run the same session. Bare gen, like bare hanzo dev, opens Hanzo Dev.',
  },
  {
    question: 'Does every agent run on Hanzo’s models?',
    answer: 'Only when you pass --cloud, and only an agent that can name another endpoint. Without it, each agent keeps the account it is signed in to.',
  },
  {
    question: 'What does Hanzo bill?',
    answer: 'On --cloud, the agent’s model calls, on your Hanzo account. On the agent’s own account, only what Hanzo’s tools handled for it.',
  },
  {
    question: 'Does Gen change the agent?',
    answer: 'No. Each agent runs as itself — its own interface and its own commands — and anything after -- goes to it untouched.',
  },
  {
    question: 'What license is it under?',
    answer: 'MIT. The source is hanzoai/gen on GitHub.',
  },
]

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

      <Box render="main" bg="$background" pt="$10" $platform-web={{ color: 'var(--foreground)' }}>
        <Hero
          chip="Hanzo Gen · Agentic harness"
          title={
            <>
              Any agent.
              <br />
              Our rails.
            </>
          }
          lede="Gen runs the coding agent you already use — Claude Code, Codex, Cursor and more — with Hanzo’s tools attached and every session linked to your Hanzo account: on Hanzo’s models, metered, or on the agent’s own account."
          primary={{ label: 'Get API key', href: 'https://platform.hanzo.ai/keys' }}
          action={{ label: 'Explore GitHub examples →', href: REPO }}
          more={{ label: 'Read the docs →', href: 'https://docs.hanzo.ai/docs/coding' }}
          figure={<Term title="terminal" lines={NOW} />}
        />

        <Band id="install" measure={896}>
          <Head
            eyebrow="Install"
            title="One line, then any agent."
            lede="Linux and macOS. hanzo.sh downloads gen’s native build and checks it: its checksum always, its provenance with a signed-in gh. Run it again to upgrade."
            loud
          />
          <YStack gap="$4">
            <Sample lang="bash">
              <Code lang="bash" code={INSTALL} />
            </Sample>
            <Sample lang="bash">
              <Code lang="bash" code={START} />
            </Sample>
          </YStack>
          <Text render="p" display="block" mt="$5" fontSize="$3" lineHeight="$3" color="var(--text-secondary)" $platform-web={{ textAlign: 'center' }}>
            Sign in once with the Hanzo CLI, hanzo auth login, and every session is linked to your account.
          </Text>
          <XStack mt="$6" flexWrap="wrap" columnGap="$5" rowGap="$2" justify="center">
            <Release repo="hanzoai/gen" />
            <More href={`${REPO}/releases`}>Every build →</More>
          </XStack>
        </Band>

        <Band id="two" measure={1024}>
          <Head eyebrow="Gen and Dev" title="One runs agents. One is an agent." loud />
          <Grid columns={{ min: 300, max: 2 }} gap={16}>
            {TWO.map((t, n) => (
              <Rise key={t.name} beat={n}>
                <Card display="flex" flexDirection="column" gap="$3" p="$6" height="100%">
                  <Text fontFamily="$mono" fontSize="$2" lineHeight="$2" color="var(--text-tertiary)">
                    {t.name}
                  </Text>
                  <Text render="h3" fontSize="$7" lineHeight="$7" fontWeight="600" color="$ink">
                    {t.line}
                  </Text>
                  <Text fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                    {t.body}
                  </Text>
                  <XStack mt="auto" pt="$2">
                    <More href={t.href}>{t.more}</More>
                  </XStack>
                </Card>
              </Rise>
            ))}
          </Grid>
        </Band>

        <Band id="agents" measure={1024}>
          <Head
            eyebrow="Agents"
            title="The agent you use is a flag."
            lede="Each launches as itself, with its own interface and its own habits, and Gen around it. gen --help lists every one."
            loud
          />
          <Agents />
        </Band>

        <Band id="rails" measure={1024}>
          <Head eyebrow="Our rails" title="What Gen puts around it." lede="Tools, models, sessions and fences, each set by a flag." loud />
          <Grid columns={{ min: 240, max: 4 }} gap={12}>
            {RAILS.map((r, n) => (
              <Rise key={r.name} beat={n}>
                <Card display="flex" flexDirection="column" gap="$2" p="$5" height="100%">
                  <Text render="h3" fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink">
                    {r.name}
                  </Text>
                  <Text fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                    {r.body}
                  </Text>
                  <Text mt="auto" pt="$2" fontFamily="$mono" fontSize="$2" lineHeight="$2" color="$ink" whiteSpace="pre-wrap">
                    {r.flags}
                  </Text>
                </Card>
              </Rise>
            ))}
          </Grid>
          <YStack mt="$8" width="100%" maxW={896} mx="auto">
            <Sample lang="bash">
              <Code lang="bash" code={FLAGS} />
            </Sample>
          </YStack>
        </Band>

        <Band id="cli" measure={896}>
          <Head
            eyebrow="In the Hanzo CLI"
            title="The same harness, as hanzo dev."
            lede="The Hanzo CLI links Gen, so hanzo dev takes the same flags and runs the same session. Use whichever is on your path."
            loud
          />
          <Sample lang="bash">
            <Code lang="bash" code={CLI} />
          </Sample>
          <XStack mt="$6" justify="center">
            <More href="/cli">The Hanzo CLI →</More>
          </XStack>
        </Band>

        <Band id="source" measure={896}>
          <Head eyebrow="Open source" title="MIT, in the open." lede="The harness, every agent's launcher and how its output is read are on GitHub, one file an agent." loud />
          <XStack justify="center">
            <More href={REPO}>The source →</More>
          </XStack>
        </Band>

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


        <Read
          eyebrow="Read"
          title="The harness, the agent, the CLI."
          lede="Where to get Gen, what it runs, and the same harness in the CLI."
          groups={[
            {
              label: 'Gen',
              links: [
                { href: REPO, label: 'hanzoai/gen →', note: 'MIT.' },
                { href: '#agents', label: 'The agents →' },
                { href: '#install', label: 'Install →', note: 'curl -fsSL https://hanzo.sh | sh -s gen' },
                { href: `${REPO}/releases`, label: 'Releases →' },
              ],
            },
            {
              label: 'Dev',
              links: [
                { href: '/dev', label: 'Hanzo Dev →', note: 'Our agent, Gen’s default.' },
                { href: '/kai', label: 'Kai →', note: 'Dev’s controller.' },
              ],
            },
            {
              label: 'Models',
              links: [
                { href: '/enso', label: 'Enso →' },
                { href: '/models', label: 'Every model →' },
                { href: '/cli', label: 'Hanzo CLI →' },
              ],
            },
          ]}
        />
        {product('gen') && <AgentPrompt product={product('gen')!} />}
        <Closing title="Bring the coding agent you use onto Hanzo." secondary={{ label: 'Install Gen', href: 'https://github.com/hanzoai/gen' }} />
      </Box>

      <SiteFooter />
    </>
  )
}