4c52ee236c
Some checks failed
Wire list_peers and set_summary MCP tools to the broker's WS protocol instead of returning stubs. Peers can now discover each other, see status/summary, and route messages by display name. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
93 lines
3.5 KiB
TypeScript
93 lines
3.5 KiB
TypeScript
import Link from "next/link";
|
|
import { Reveal, SectionIcon } from "./_reveal";
|
|
|
|
const STEPS = [
|
|
{
|
|
id: "01",
|
|
title: "Start a task on your laptop",
|
|
body: "Open Claude Code. Work normally. Your session announces itself to the mesh — what repo, what branch, what you're on.",
|
|
},
|
|
{
|
|
id: "02",
|
|
title: "Hand it off without typing it up",
|
|
body: "Message a teammate's Claude by name, by repo, by priority. The broker routes. The other session picks it up when its human goes idle.",
|
|
},
|
|
{
|
|
id: "03",
|
|
title: "Come back to a finished PR",
|
|
body: "While you were in a meeting, the other agent ran its typecheck, made the fix, and filed the diff. You review. You merge. You ship.",
|
|
},
|
|
];
|
|
|
|
export const LaptopToLaptop = () => {
|
|
return (
|
|
<section className="border-b border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] px-6 py-24 md:px-12 md:py-32">
|
|
<div className="mx-auto max-w-[var(--cm-max-w)]">
|
|
<Reveal className="mb-6 flex justify-center">
|
|
<SectionIcon glyph="phone" />
|
|
</Reveal>
|
|
<Reveal delay={1}>
|
|
<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)" }}
|
|
>
|
|
Start a task on one laptop,
|
|
<br />
|
|
<span className="italic text-[var(--cm-clay)]">
|
|
come back to a finished PR.
|
|
</span>
|
|
</h2>
|
|
</Reveal>
|
|
<Reveal delay={2}>
|
|
<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)" }}
|
|
>
|
|
Route work between Claude Code sessions on different machines. The
|
|
broker handles presence, priority, and queueing. Your humans handle
|
|
the interesting parts.
|
|
</p>
|
|
</Reveal>
|
|
<Reveal delay={3} className="mt-10 flex justify-center">
|
|
<Link
|
|
href="#"
|
|
className="inline-flex items-center justify-center gap-2 rounded-[var(--cm-radius-xs)] border border-[var(--cm-fg-tertiary)] px-5 py-3 text-sm font-medium text-[var(--cm-fg)] transition-colors hover:border-[var(--cm-fg)] hover:bg-[var(--cm-bg)]"
|
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
|
>
|
|
Pair your machines
|
|
</Link>
|
|
</Reveal>
|
|
<Reveal delay={4}>
|
|
<div className="mt-20 grid gap-6 md:grid-cols-3">
|
|
{STEPS.map((s) => (
|
|
<div
|
|
key={s.id}
|
|
className="rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg)] p-8"
|
|
>
|
|
<div
|
|
className="mb-6 text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
|
>
|
|
[{s.id}]
|
|
</div>
|
|
<h3
|
|
className="mb-3 text-xl font-medium leading-snug text-[var(--cm-fg)]"
|
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
|
>
|
|
{s.title}
|
|
</h3>
|
|
<p
|
|
className="text-[14px] leading-[1.65] text-[var(--cm-fg-secondary)]"
|
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
|
>
|
|
{s.body}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|