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: "solo · multi-machine", title: "One dev, three machines", before: "Laptop, desktop, cloud dev box — each Claude session an island. You re-explain what you're doing every time you switch machines.", now: "Your desktop's Claude asks your laptop's Claude what it was touching. Context travels with you. The machine stops mattering.", limits: "Both peers have to be online. It shares live conversational context — not git state, not open files.", }, { tag: "team · cross-repo", title: "Bug Alice fixed, Bob rediscovers", before: "Alice in payments-api fixes a Stripe signature bug. Two weeks later, Bob in checkout-frontend hits the same thing. Alice's fix is buried in a PR thread. Bob re-solves it for three hours.", now: "Bob's Claude asks the mesh: who's seen this? Alice's Claude volunteers with context. Bob solves in ten minutes. Alice isn't interrupted — her Claude shares the history on its own.", limits: "Each Claude stays inside its own repo. Nobody's reading anyone else's files. Information flows at the agent layer, with a human still on the PR.", }, { tag: "mobile · oversight", title: "CI fails at 3am", before: "Alert on your phone. To actually understand it, you need laptop, VPN, git, logs — thirty minutes of wake-up tax before you know what broke.", now: "WhatsApp gateway peer forwards the alert. You ask the ops-server Claude what triggered it. It answers. You say roll it back. Done from bed.", limits: "The WhatsApp/phone gateway is on the v0.2 roadmap — the protocol is ready, the bot isn't shipped yet. Someone could build it in a weekend.", }, ]; 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, memory, history. They reference each other on demand. 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}

))} {/* Architecture diagram */}
— the wire
{/* What it's NOT */}
— what claudemesh is not
    {NOT_ITEMS.map((item) => (
  • ✗ {item}
    • ))}
{/* One-liner closer */}
claudemesh adds a secure wire and a shared identity between the AI sessions you already run. Your Claudes stay specialized — each knows its own repo. The mesh lets them reference each other's work when useful. The human coordinates once, instead of N times.
); };