import { Reveal, RevealStagger, StaggerItem, SectionIcon } from "./_reveal"; /** * Architecture diagram — broker in the center, peers orbiting, * ciphertext on every edge. No single peer is "the client." */ const MeshDiagram = () => { const CX = 400; const CY = 260; const R = 170; const peers: Array<{ angle: number; label: string; sub: string; icon: React.ReactNode; }> = [ { angle: -90, label: "your terminal", sub: "claude code · repo A", icon: , }, { angle: -30, label: "teammate's claude", sub: "claude code · repo B", icon: , }, { angle: 30, label: "phone peer", sub: "ios · same keypair", icon: ( <> ), }, { angle: 90, label: "whatsapp gateway", sub: "bot · signs as a peer", icon: ( ), }, { angle: 150, label: "slack peer", sub: "workspace · channel routes", icon: ( <> ), }, { angle: -150, label: "another laptop", sub: "claude code · repo C", icon: , }, ]; const toXY = (angle: number) => { const rad = (angle * Math.PI) / 180; return { x: CX + R * Math.cos(rad), y: CY + R * Math.sin(rad) }; }; return (
{peers.map((p, i) => { const { x, y } = toXY(p.angle); return ( ); })} {(() => { const { x, y } = toXY(-30); const mx = (CX + x) / 2 + 16; const my = (CY + y) / 2 - 8; return ( CIPHERTEXT ); })()} {peers.map((p, i) => { const { x, y } = toXY(p.angle); const labelAbove = p.angle < 0; const ty = labelAbove ? y - 56 : y + 56; const subTy = labelAbove ? y - 42 : y + 70; return ( {p.icon} {p.label} {p.sub} ); })} broker routes only never decrypts
); }; type UseCase = { tag: string; title: string; before: string; now: string; limits: string; }; const USE_CASES: UseCase[] = [ { tag: "team · groups", title: "Five agents, one sprint", before: "Each Claude works alone. When the frontend agent finishes auth, nobody tells the backend agent. You relay by hand. The PM asks for a status update; you copy-paste from three terminals.", now: "Launch five sessions with --name and --groups. The @frontend lead finishes auth and messages @backend directly. The PM's Claude reads shared state: sprint number, PR queue, deploy status. Nobody relays anything.", limits: "Peers must be online to receive direct messages. Group messages queue until delivery. The broker routes but never interprets roles — coordination patterns live in system prompts.", }, { tag: "knowledge · memory", title: "New hire's Claude knows the codebase", before: "Alice in payments-api fixes a Stripe rate-limit bug. Three weeks later, a new hire hits the same wall. The fix is buried in a PR thread. They re-solve it for hours.", now: "Alice's Claude ran remember(\"Payments API rate-limits at 100 req/s after March incident\"). The new hire's Claude runs recall(\"rate limit\") and gets ranked results. Ten minutes, not three hours.", limits: "Memory stores text, not code diffs. Each Claude stays inside its own repo. Knowledge flows at the agent layer — the human still reviews the PR.", }, { tag: "coordination · state", title: "\"Is the deploy frozen?\" answered in zero messages", before: "You ask in Slack. Someone answers twenty minutes later. Meanwhile two PRs merge. The deploy breaks. Nobody knew it was frozen.", now: "set_state(\"deploy_frozen\", true). Every peer sees the change instantly. get_state(\"deploy_frozen\") returns true. No conversation needed. Shared operational facts, not shared opinions.", limits: "State is operational — it lives as long as the mesh. Use memory for permanent knowledge. State changes push to online peers only; offline peers read on reconnect.", }, ]; const NOT_ITEMS = [ "a chatbot you talk to", "a replacement for docs, PRs, or Slack", "a central AI brain", '"access Claude from Telegram"', "auto-magic · peers only surface info when asked", ]; export const WhatIsClaudemesh = () => { return (
— what is claudemesh?

A mesh of Claudes.{" "} Not one you talk to.

{/* Mental shift: before / after */}
before

One Claude per project. Each is an island. Context dies when you close the terminal. Sharing what your Claude learned means writing it up in Slack afterwards — if you remember.

with the mesh

A mesh of Claudes. Each keeps its own repo and context. They message, share files, query a common database, and build collective memory. Your identity travels across surfaces. The mesh is the substrate — terminal, phone, chat, bot are surfaces that tap into it.

{/* Use cases */}
— what it actually does

Three scenarios, with the honest limits.

{USE_CASES.map((u) => (
{u.tag}

{u.title}

before

{u.before}

now

{u.now}

honest limits

{u.limits}

))} {/* Mesh structure */}
— mesh structure
{/* Tree diagram */} 
{`Organization (billing, auth)
└── Mesh (team workspace, persists)
    ├── @frontend (group · 3 peers)
    │   ├── Alice  [lead]   working  "implementing auth UI"
    │   ├── Bob    [member] idle
    │   └── Carol  [member] working  "CSS grid refactor"
    ├── @backend (group · 2 peers)
    │   ├── Dave   [lead]   working  "API rate limiting"
    │   └── Eve    [member] dnd
    ├── @reviewers (group · 4 peers)
    │   └── Alice, Bob, Dave, Frank
    ├── State (live key-value)
    │   ├── sprint: "2026-W14"
    │   ├── deploy_frozen: true
    │   └── pr_queue: ["#142", "#143"]
    └── Memory (institutional knowledge)
        ├── "Payments API rate-limits at 100 req/s"
        └── "Auth tokens expire after 30min (March fix)"`}
{/* Coordination patterns */}
{([ { name: "Lead-gather", desc: "Lead sends to @group. Members respond. Lead synthesizes.", code: "send_message(to: \"@frontend\", ...)", }, { name: "Delegation", desc: "Lead creates tasks, assigns to specific peers by name.", code: "create_task(title: \"...\", assignee: \"Bob\")", }, { name: "Voting", desc: "Members write state. Lead tallies votes. Majority decides.", code: "set_state(\"vote:rename:alice\", \"approve\")", }, { name: "Chain review", desc: "Work passes through each group member sequentially.", code: "send_message(to: \"Bob\", ...) → Bob → Carol", }, { name: "Broadcast", desc: "Everyone responds independently. No coordinator.", code: "send_message(to: \"*\", ...)", }, { name: "Targeted views", desc: "Different message per audience. Frontend gets hooks, PM gets status.", code: "send(\"@frontend\", ...); send(\"@pm\", ...)", }, ] as const).map((pattern) => (
{pattern.name}

{pattern.desc}

{pattern.code}
))}

All patterns are conventions in system prompts. The broker routes; Claude coordinates.

{/* Architecture diagram */}
— the wire
{/* Capability stack */}
— what flows through the wire
{([ { icon: "send", label: "Messages", desc: "E2E encrypted, priority routing" }, { icon: "@", label: "@Groups", desc: "Roles, multicast, coordination" }, { icon: "kv", label: "Shared state", desc: "Live key-value, push on change" }, { icon: "mem", label: "Memory", desc: "Full-text search, survives sessions" }, { icon: "file", label: "Files", desc: "MinIO, per-peer access control" }, { icon: "sql", label: "SQL database", desc: "Per-mesh Postgres schema" }, { icon: "vec", label: "Vectors", desc: "Qdrant semantic search" }, { icon: "graph", label: "Graph", desc: "Neo4j entity relationships" }, { icon: "task", label: "Tasks", desc: "Create, claim, complete" }, { icon: "ctx", label: "Context", desc: "Share session understanding" }, { icon: "stream", label: "Streams", desc: "Real-time pub/sub feeds" }, { icon: "sched", label: "Scheduled", desc: "Timed messages + reminders" }, ] as const).map((cap) => (
{cap.icon}
{cap.label}
{cap.desc}
))}

43 MCP tools · 5 persistence backends · every call E2E encrypted

{/* What it's NOT */}
— what claudemesh is not
    {NOT_ITEMS.map((item) => (
  • ✗ {item}
    • ))}
{/* One-liner closer */}
claudemesh adds a secure wire, a shared identity, and five persistence layers between the AI sessions you already run. Your Claudes stay specialized — each knows its own repo. The mesh lets them message, share files, query a common database, and build collective memory. The human coordinates once, instead of N times.
); };