hanzo.ai/components/zap/ZapArchitecture.tsx

'use client'

/**
 * NO TAILWIND. `Band` and `Head` carry the section frame and the centred head;
 * the diagram frame and the three figures under it are gui props over
 * @hanzo/design's tokens.
 */

import React from "react";
import { motion } from "@/components/motion";
import { Box, View } from '@hanzo/ui'
import { Grid as Columns } from '@hanzo/ui/grid'
import { Band, Head, Words } from '@/components/marketing/band'

/** The drawing's ink, and the names inside it one step brighter. */
const RULES = 'color-mix(in oklab, var(--foreground) 80%, transparent)'
const SOFT = 'color-mix(in oklab, var(--foreground) 70%, transparent)'

/** A box's name inside the drawing. */
function Name({ children }: { children: string }) {
  return <Words color={SOFT}>{children}</Words>
}

/** One figure under the drawing: the ratio, and what it counts. */
function Figure({ value, caption }: { value: string; caption: string }) {
  return (
    <Box $platform-web={{ textAlign: 'center' }}>
      <Words render="div" mb={8} fontSize="$8" lineHeight="1.2" weight="700" color={SOFT}>{value}</Words>
      <Words render="div" color="var(--muted-foreground)">{caption}</Words>
    </Box>
  )
}

const ZapArchitecture = () => {
  return (
    <Band rule={false} pad="$11" measure={1152} ground="color-mix(in oklab, var(--secondary) 30%, transparent)">
      <Head
        title="How it is put together"
        lede="Many agents on one side, many tool servers on the other, one address in the middle."
      />

      <Words
        render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.1 }} />}
        overflowX="auto"
        rounded="var(--radius-xl)"
        borderWidth={1}
        borderColor="var(--border)"
        background="color-mix(in oklab, var(--background) 50%, transparent)"
        p={32}
        fontSize="$2"
        lineHeight="1.4286"
      >
        <Words render="pre" my="1em" whiteSpace="pre" color={RULES}>
{`┌─────────────────────────────────────────────────────────────────┐
│                        Agent Swarm                               │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐             │
│  │ Agent 1 │  │ Agent 2 │  │ Agent 3 │  │ Agent N │    ...      │
│  └────┬────┘  └────┬────┘  └────┬────┘  └────┬────┘             │
│       │            │            │            │                   │
│       └────────────┴─────┬──────┴────────────┘                   │
│                          │                                       │
│                          ▼                                       │
│              ┌───────────────────────┐                           │
│              │      `}<Name>ZAP Gateway</Name>{`       │                           │
│              │   zap://localhost:9999│                           │
│              │                       │                           │
│              │  • Schema Federation  │                           │
│              │  • Request Routing    │                           │
│              │  • Capability Control │                           │
│              └───────────┬───────────┘                           │
│                          │                                       │
│       ┌──────────────────┼──────────────────┐                    │
│       │                  │                  │                    │
│       ▼                  ▼                  ▼                    │
│  ┌─────────┐       ┌─────────┐       ┌─────────┐                │
│  │`}<Name>MCP Srv</Name>{` │       │`}<Name>ZAP Srv</Name>{` │       │`}<Name>MCP Srv</Name>{` │                │
│  │ GitHub  │       │ Native  │       │ Slack   │    ...         │
│  └─────────┘       └─────────┘       └─────────┘                │
└─────────────────────────────────────────────────────────────────┘`}
        </Words>
      </Words>

      <View
        render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.2 }} />}
        display="block"
        mt={32}
      >
        <Columns columns={{ min: 224, max: 3 }} gap={24}>
          <Figure value="N:1" caption="Every agent, one address" />
          <Figure value="1:M" caption="One schema over every backend" />
          <Figure value="0" caption="Copies of the same tool server" />
        </Columns>
      </View>
    </Band>
  );
};

export default ZapArchitecture;