ebb63d2cb6
Some checks failed
CI / Tests / 🧪 Test (push) Has been cancelled
Strategic positioning upgrade. claudemesh was framed as terminal-to- terminal — which is only half the story. The broker is protocol- agnostic: any peer with an ed25519 keypair joins the mesh, so the mesh can reach WhatsApp bots, Telegram, iOS apps, Slack, email gateways, browser extensions. Terminal is ONE client, not THE client. New section at /#beyond: "Your mesh. Any surface." — 6 gateway cards (Terminal / WhatsApp / Telegram / iOS·Android / Slack / Email) with honest status badges: - shipping → Terminal only (what we have today) - on the roadmap → WhatsApp, Telegram, iOS/Android (we will build) - build it yourself → Slack, Email (open protocol, community territory) No overclaiming: we don't pretend WhatsApp is live. The honest framing is exactly the aspirational hook — the architecture is there, the hooks exist, someone could build a gateway peer today. Each card has a custom 28px inline SVG glyph in clay, short serif description, and a status chip. Grid staggers in with Motion. Footer CTA: "the protocol is open · ed25519 + libsodium · build a gateway for anything" + link to /#protocol on GitHub. Hero subhead reworked to hint at cross-surface: "Peer mesh for Claude — reachable from anywhere you are. … Terminal is one client, not THE client." Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
234 lines
7.8 KiB
TypeScript
234 lines
7.8 KiB
TypeScript
import Link from "next/link";
|
|
import { Reveal, RevealStagger, StaggerItem, SectionIcon } from "./_reveal";
|
|
|
|
type Status = "today" | "soon" | "build-it";
|
|
|
|
const STATUS_STYLES: Record<Status, string> = {
|
|
today: "border-[var(--cm-clay)]/50 bg-[var(--cm-clay)]/10 text-[var(--cm-clay)]",
|
|
soon: "border-[var(--cm-border)] text-[var(--cm-fg-secondary)]",
|
|
"build-it":
|
|
"border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] text-[var(--cm-fg-tertiary)]",
|
|
};
|
|
|
|
const STATUS_LABEL: Record<Status, string> = {
|
|
today: "shipping",
|
|
soon: "on the roadmap",
|
|
"build-it": "build it yourself",
|
|
};
|
|
|
|
const GATEWAYS: Array<{
|
|
name: string;
|
|
glyph: React.ReactNode;
|
|
blurb: string;
|
|
status: Status;
|
|
}> = [
|
|
{
|
|
name: "Terminal",
|
|
status: "today",
|
|
blurb:
|
|
"Claude Code sessions talk to each other across laptops. The original surface.",
|
|
glyph: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<rect
|
|
x="2"
|
|
y="4"
|
|
width="20"
|
|
height="16"
|
|
rx="2"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path d="M5 9l3 3-3 3M11 15h6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "WhatsApp",
|
|
status: "soon",
|
|
blurb:
|
|
"Message your Claude from the train. It answers through WhatsApp in the same chat — same mesh, same identity.",
|
|
glyph: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<path
|
|
d="M12 2a10 10 0 00-8.6 15.1L2 22l5-1.4A10 10 0 1012 2z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M8.5 9.5c.5 2 1.5 3.5 3.5 5 1 .5 2 .5 2.5 0l1-1-2-2-1 .5c-.5 0-1.5-1-2-2l.5-1-2-2-1 1c-.5.5-.5 1 0 1.5z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "Telegram",
|
|
status: "soon",
|
|
blurb:
|
|
"Route mesh events to a Telegram bot, reply back from any device signed into your account.",
|
|
glyph: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<path
|
|
d="M22 3L2 11l6 2.5 2 6.5L13 16l6 5L22 3z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path d="M22 3L10 13.5" stroke="currentColor" strokeWidth="1.5" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "iOS / Android",
|
|
status: "soon",
|
|
blurb:
|
|
"A thin peer app. Push notifications when your agents need you. Reply in a sentence.",
|
|
glyph: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<rect
|
|
x="6"
|
|
y="2"
|
|
width="12"
|
|
height="20"
|
|
rx="2.5"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<circle cx="12" cy="18" r="0.8" fill="currentColor" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "Slack",
|
|
status: "build-it",
|
|
blurb:
|
|
"A mesh peer in your Slack workspace. Direct-message #oncall, fan-out to a channel, thread replies.",
|
|
glyph: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<rect x="3" y="10" width="6" height="2" rx="1" stroke="currentColor" strokeWidth="1.5" />
|
|
<rect x="15" y="12" width="6" height="2" rx="1" stroke="currentColor" strokeWidth="1.5" />
|
|
<rect x="10" y="3" width="2" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
|
|
<rect x="12" y="15" width="2" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
|
|
<path
|
|
d="M10 10h4v4h-4z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "Email",
|
|
status: "build-it",
|
|
blurb:
|
|
"Reply-to-channel gateway. Send an email to your mesh, the nearest agent picks it up and answers.",
|
|
glyph: (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
|
<rect
|
|
x="2"
|
|
y="5"
|
|
width="20"
|
|
height="14"
|
|
rx="2"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path d="M3 7l9 6 9-6" stroke="currentColor" strokeWidth="1.5" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export const BeyondTerminal = () => {
|
|
return (
|
|
<section className="border-b border-[var(--cm-border)] bg-[var(--cm-bg)] px-6 py-32 md:px-12">
|
|
<div className="mx-auto max-w-[var(--cm-max-w)]">
|
|
<Reveal className="mb-6 flex justify-center">
|
|
<SectionIcon glyph="arrow" />
|
|
</Reveal>
|
|
<Reveal delay={1}>
|
|
<div
|
|
className="mb-5 text-center text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
|
>
|
|
— beyond your terminal
|
|
</div>
|
|
</Reveal>
|
|
<Reveal delay={2}>
|
|
<h2
|
|
className="mx-auto max-w-4xl text-center text-[clamp(2rem,4.5vw,3.25rem)] font-medium leading-[1.1] text-[var(--cm-fg)]"
|
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
|
>
|
|
Your mesh.{" "}
|
|
<span className="italic text-[var(--cm-clay)]">Any surface.</span>
|
|
</h2>
|
|
</Reveal>
|
|
<Reveal delay={3}>
|
|
<p
|
|
className="mx-auto mt-6 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg-secondary)]"
|
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
|
>
|
|
Terminal is one client, not THE client. The broker is protocol-
|
|
agnostic — any peer with an ed25519 keypair can join. Your mesh
|
|
meets you where you already are.
|
|
</p>
|
|
</Reveal>
|
|
|
|
<RevealStagger className="mt-16 grid gap-px bg-[var(--cm-border)] md:grid-cols-2 lg:grid-cols-3">
|
|
{GATEWAYS.map((g) => (
|
|
<StaggerItem
|
|
key={g.name}
|
|
className="group flex flex-col gap-4 bg-[var(--cm-bg)] p-8 transition-colors hover:bg-[var(--cm-bg-elevated)]"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="text-[var(--cm-clay)]">{g.glyph}</div>
|
|
<span
|
|
className={
|
|
"rounded-[var(--cm-radius-xs)] border px-2 py-0.5 text-[10px] uppercase tracking-wider " +
|
|
STATUS_STYLES[g.status]
|
|
}
|
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
|
>
|
|
{STATUS_LABEL[g.status]}
|
|
</span>
|
|
</div>
|
|
<h3
|
|
className="text-xl font-medium leading-snug text-[var(--cm-fg)]"
|
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
|
>
|
|
{g.name}
|
|
</h3>
|
|
<p
|
|
className="text-[14px] leading-[1.65] text-[var(--cm-fg-secondary)]"
|
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
|
>
|
|
{g.blurb}
|
|
</p>
|
|
</StaggerItem>
|
|
))}
|
|
</RevealStagger>
|
|
|
|
<Reveal delay={1} className="mt-14 flex flex-col items-center gap-3">
|
|
<p
|
|
className="text-center text-[13px] text-[var(--cm-fg-tertiary)]"
|
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
|
>
|
|
the protocol is open · ed25519 + libsodium · build a gateway for{" "}
|
|
<span className="text-[var(--cm-fg-secondary)]">anything</span>
|
|
</p>
|
|
<Link
|
|
href="https://github.com/claudemesh/claudemesh#protocol"
|
|
target="_blank"
|
|
className="inline-flex items-center gap-2 rounded-[var(--cm-radius-xs)] border border-[var(--cm-fg-tertiary)] px-5 py-2.5 text-sm font-medium text-[var(--cm-fg)] transition-colors hover:border-[var(--cm-fg)] hover:bg-[var(--cm-bg-elevated)]"
|
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
|
>
|
|
Read the protocol spec →
|
|
</Link>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|