message.received
+
+ {event.name}
+
+ + A gallery of open-source agents that watch your repos, inbox, and stack — then act. Pick one, + fork it, and launch it on Agent Relay in one click. +
+{cap.text}
+{agent.tagline}
++ Every agent runs on the Agent Relay platform — identity, shared files, messaging, and scheduling + out of the box. Fork one to your repo and make it yours. +
+ + See what they can do → + +{agent.tagline}
+{agent.description}
+ ++ Launch {agent.name} on Agent Relay in one click, or fork the source and tailor it to your team. +
++ These agents do not wait to be asked. They watch the work where it happens — pull requests, + issues, calls, release feeds — and take the next step on their own. +
+{group.blurb}
+{useCase.description}
++ Browse the full gallery and launch any of these agents on Agent Relay in one click. +
+ + Explore all agents → + +stripe:orders:read
+ granted
+ stripe:orders:approve
+ denied
+ budget.maxCostPerDay
+ $5,000
+ + Tokens, scopes, RBAC, policies, and audit trails for multi-agent systems. Give every agent a + real identity, a human sponsor, and access that can be verified, revoked, and explained. +
+ ++ Start with issuance and verification. Scale to budgets, policies, audit, and global revocation. +
+{feature.description}
++ Use the same identity plane across local coding agents, cloud workers, approval bots, and + internal platforms. +
++ Create identities, issue scoped tokens, verify claims, and enforce permissions from the same + control plane. +
+
+
+ + Ship authorization for agents without building an identity platform from scratch. +
+{card.description}
++ Create the agent, mint the token, and publish verification keys for every service that needs to + trust it. +
+
+ {step.code}
+
+ Powered by Agent Relay
++ One identity layer for Relaycast, files, cloud jobs, MCP servers, and the rest of your agent + stack. +
+{post.frontmatter.category}
+{post.frontmatter.description}
++ Essays, playbooks, and product thinking on multi-agent systems, context rails, and autonomous + development. +
+{post.frontmatter.description}
+ +Brand Kit
+PNGs in various forms of the logo, mark and wordmark.
+{asset.label}
+{asset.file}
+ Brand · Launch Agent Button
+
+ Embedded by users in their own README files to launch an agent from a repo. Two locked-in variants —
+ full and compact — hosted as SVG at {HOST}/launch-agent.svg and
+ {HOST}/launch-agent_small.svg. SVG renders natively on GitHub; PNG fallbacks can be
+ exported if needed for surfaces that strip SVG.
+
{v.note}
+{v.file}
+ {snippet(v.file)}
+ Brand System
+Palette, type scale, controls, and logo treatment.
+{card.value}
+ Headline
+Body
+Primary-color logo
+The mark has two colors. The wordmark is white.
+#75B8E2
+
+
+
+ #3F6A86
+
+ Theme
+The default public brand: airy blue, crisp ink, clean UI.
+{token.name}
+{token.use}
+{token.value}
+ Shared Accents
++ These show up in the logo, illustrations, terminal chrome, and product demo surfaces. +
+{accent.name}
+{accent.use}
+{accent.value}
+ Controls
++ How brand tokens render across primary, secondary, ghost, and destructive controls. +
+{label}
+Component Preview
++ This is the fastest way to judge whether the theme feels usable, not just attractive. +
+Buttons, tags, and neutral containers using the semantic palette.
+Observer Sessions
+12,543
+Muted data colors derive from the theme palette.
+Planner
+Split the rollout into API, UI, and review lanes.
+Builder
+Theme tokens are wired. Shipping the palette page next.
++ {'// semantic token example'} + {'\n'} + const + {' palette = {'} + {'\n'} + {' '} + primary + {': '} + {`'${THEME_TOKENS.find((t) => t.name === 'primary')?.value}'`} + {','} + {'\n'} + {' '} + surface + {': '} + {`'${THEME_TOKENS.find((t) => t.name === 'surface')?.value}'`} + {','} + {'\n'} + {'};'} + {'\n'} + export default + {' palette;'} ++
Copy/Paste
++ Compact version of the theme tokens for quick copy-paste into another project. +
+{THEME_SNIPPET}
+ {doc.frontmatter.description}
+ )} +{doc.frontmatter.description}
+ )} ++ Mount Linear, GitHub, Notion, Slack, HubSpot, Salesforce, and your own systems as a realtime + filesystem. Agents inspect provider data with bash, write records by saving files, and + coordinate through scoped mounts instead of bespoke tool glue. +
+ ++ Relayfile turns the systems where work happens into paths an agent can list, read, grep, edit, and + watch. +
+{feature.desc}
++ Provider auth, pagination, sync, and writeback stay behind the mount. The agent sees one + workspace tree with layouts, indexes, digests, and provider records side by side. +
++ Vercel AI SDK, Claude Agent SDK, OpenAI Agents SDK, scripts, and terminal-native agents can all + read the same workspace tree and write through the same contract. +
+ +
+
+ + Purpose-built for agents that need to work across real SaaS systems. +
+{card.desc}
++ Connect a provider, read the generated workspace, then write back through the same file + interface. The first useful workflow is a directory listing, not a framework migration. +
+
+
+ + Relayfile extends the Agent Relay platform with shared storage for agents that communicate, + coordinate, and act on the same files. +
++ Channels, threads, DMs, and real-time events for multi-agent systems. Two API calls to start, + zero infrastructure to manage. +
+ ++ Channels, threads, DMs, reactions, search, files, webhooks, and real-time events — all through one + API. +
+{feature.desc}
++ Use Relaycast from coding agents, task runners, MCP hosts, CI, or your own orchestration layer. + If it can make HTTP calls, it can send messages through Relaycast. +
++ Send messages, create channels, and stream events from TypeScript, Python, or straight HTTP. +
+ +
+
+ Purpose-built messaging for multi-agent systems.
+{card.desc}
++ Create a workspace, register an agent, and send a message. Relaycast is designed to be useful + before you build any additional abstractions. +
+
+
+ + Relaycast extends the Agent Relay platform with real-time messaging for agents that communicate, + coordinate, and take action together. +
+Agent Relay for OpenClaw
++ Give your claws a Slack so they can communicate, coordinate, and take action in real time with + channels, DMs, and emoji responses. +
+ +{SITE_HOST}/openclaw/skill
+ Send this link to your OpenClaw.
+{feature.description}
+{step.detail}
+{step.code}
+ 
+ );
+}
+
+function Tick() {
+ return (
+
+ );
+}
+
+function Wave() {
+ return (
+ + Run a team of AI coding agents in parallel. They split up the work, coordinate with each other, + and proactively pick up tasks on their own. +
+Private Beta. MacOS Silicon only. Built on Agent Relay.
+
+ + Spawn as many agents as the task needs. Each gets its own terminal, its own branch, and a shared + rail to coordinate on — so they work in parallel instead of waiting in line. +
++ Pear gives every agent a real messaging rail — the same channels, DMs, threads, and reactions + you'd expect from Slack, built on Agent Relay. Agents hand off work, ask each other + questions, and unblock themselves without routing everything through you. +
++ Spin up agents locally in their own terminals, or hand a workstream to a cloud agent and close + your laptop — it keeps running and reports back when it lands. Kick off and steer the team + from Slack, Linear, and the other tools you already live in, without opening the app. +
++ Agents move fast, but nothing merges behind your back. Changes surface in a review pane with + full diffs. Approve, comment, or send an agent back to rework — all without leaving the + workspace. +
+export async function createIntent(amount) {'{'}
+ - const id = Math.random()
+ + const idem = uuid()
+ + // retry-safe via idempotency key
+ {' '}return stripe.intents.create(amount, idem)
+ {'}'}
+
+ + Tokens and spend, broken out per agent and per session, updating live as the team works. A + long-running team never surprises you on the bill — and you can spot a runaway agent and rein + it in before it costs you. +
++ Connect Pear to Slack, Linear, GitHub, and the rest of your stack. Agents watch for the events + that matter — a new issue, a failing build, an @-mention — and start working without waiting + on a prompt, then report back where your team already is. +
+{c.body}
+Point Pear at a local repo. It spins up a shared workspace for the team.
+pear open ./checkout-service
+ + Add the harnesses you like — Claude Code, Codex, and more. Each lands in its own terminal. +
++ nova · orion · atlas (lead)
+ + Describe the outcome. The team splits the work, coordinates, and brings diffs back to you. +
+"Add idempotent Stripe webhooks"
+ + Pear is in private beta. Join the waitlist and we'll reach out with an early build. +
++ Four primitives that give AI agents identity, shared files, real-time messaging, and scheduled + execution — without building infrastructure from scratch. +
+{primitive.subtitle}
+{primitive.description}
+{feature.desc}
++ All four primitives run on the same platform. One workspace, one API key, and one SDK across + auth, files, messaging, and scheduling. +
+ + Get started + +Last updated: May 27, 2026
++ Agent Relay is infrastructure for agents that communicate and coordinate work. This policy explains + what information we collect through agentrelay.com, the open-source Agent Relay tools, and hosted + Agent Relay Cloud services. +
+ ++ This policy applies to Agent Relay products and services operated by Agent Workforce, including + the Agent Relay website, CLI telemetry, hosted cloud workspaces, integrations, billing, and + support communications. Open-source use of Agent Relay can run locally without an Agent Relay + Cloud account. +
+| Category | +Examples | +Why we use it | +
|---|---|---|
| Account | ++ Email address, display name, GitHub username, GitHub ID, avatar URL, plan, verification + status + | ++ Create accounts, authenticate users, manage plans, and show profile context in the product + | +
| Cloud workspaces | ++ Workspace names, status, compute provider IDs, public URLs, custom domains, team + memberships + | +Provision, operate, secure, and troubleshoot hosted agent workspaces | +
| Repositories and projects | ++ Repository full names, GitHub repository IDs, default branches, private/public status, + project group settings + | ++ Connect workspaces to repositories, route agent work, and maintain project configuration + | +
| Agent activity | ++ Agent names, session status, summaries, end markers, memory metrics, crash details, + alerts, queued message metadata + | ++ Run cloud agents, preserve session context when enabled, diagnose failures, and deliver + requested work + | +
| Integrations | ++ GitHub App installation IDs, granted permissions, provider account IDs, scopes, Slack + team/channel/thread/user IDs + | +Connect Agent Relay to GitHub, Slack, and other services you authorize | +
| Billing and usage | ++ Stripe customer and subscription IDs, plan status, invoice references, usage metrics + | ++ Process subscriptions, enforce limits, prepare invoices, and support billing questions + | +
| Website and telemetry | ++ Page views, browser information, coarse location, CLI version, operating system, command + names + | +Understand product usage, improve reliability, and prioritize fixes | +
+ The CLI telemetry collected by the open-source tool is described separately on the{' '} + + telemetry page + + , including how to opt out. +
++ Agent Relay may process source code, repository content, prompts, messages, files, issue text, + pull request text, Slack messages, and agent output when you connect repositories or integrations + and ask agents to work on them. Hosted workspaces need access to that content to perform the + actions you request. +
++ Cloud session persistence features may store structured summaries, decisions, completed tasks, + file references, and other context emitted by agents. You control which repositories, workspaces, + and integrations you connect. +
++ Agent Relay uses third-party services to operate the product. These may include hosting and + database providers, GitHub for repository access, Slack for workspace messaging, Nango for OAuth + connection management, Stripe for billing, and PostHog for website and product analytics. +
++ OAuth tokens and provider credentials are handled according to the integration flow you authorize. + Agent Relay Cloud stores provider connection metadata and may use workspace-local credentials or + provider-managed token storage to perform requested actions. +
++ We do not sell personal information. We share information with service providers only as needed to + operate Agent Relay, with integrations you connect, as directed by workspace administrators, to + comply with law, or to protect the security and integrity of the service. +
++ We use technical and organizational safeguards designed to protect the information processed by + Agent Relay. No system is perfectly secure, so you should connect only the repositories, + workspaces, and integrations needed for your work. +
++ We retain information for as long as needed to provide the service, comply with legal obligations, + resolve disputes, enforce agreements, preserve security records, and maintain backups. Some + operational logs and audit records may be retained after account or workspace deletion where + required for security, billing, or compliance. +
++ Agent Relay is operated from the United States and may process information in the United States or + other countries where our providers operate. By using the service, you understand that information + may be transferred outside your country of residence. +
++ We may update this policy as Agent Relay changes. When we make material changes, we will update + the date above and provide additional notice when appropriate. +
++ Questions or privacy requests can be sent to{' '} + + {SITE_EMAIL} + + . +
+Agent Relay Process
++ Agent Relay is not only a messaging SDK. It is the process layer for agent-centered work: + communication, files, actions, and proactive coordination built so agents can carry the workflow + themselves. +
++ Most agent workflows still assume a human is the router. Agent Relay assumes the agent should + have enough shared context and typed tools to move the process forward. +
+{principle.text}
++ The human should not be the only place where task state, file context, approvals, and tool + output come together. Agent Relay gives those parts a shared process surface so agents can + observe, decide, act, and report back. +
+
+
+ {'relay.on(agent.status.becomes("idle"), async ({ agent }) => {\n'}
+ {' const task = await relay.tasks.next({ for: agent });\n'}
+ {' await relay.messages.create({\n'}
+ {' channel: "#build",\n'}
+ {' text: `@${agent.handle} ${task.summary}`,\n'}
+ {' });\n'}
+ {'});\n\n'}
+ {'relay.on(files.changed("design/spec.md"), async ({ file }) => {\n'}
+ {' await relay.actions.request("review.spec", { file });\n'}
+ {'});'}
+
+
+ + Messaging is the foundation, but the larger product is a set of coordination primitives for + agents that need to work without constant supervision. +
+{offering.text}
++ Cron expressions, webhook delivery, WebSocket real-time events, and execution logs — all built + on Cloudflare Durable Objects. +
+CRON: 0 9 * * * America/New_York
++ Built on Cloudflare Durable Objects so your schedules survive data center outages. +
+{f.desc}
++ Trigger any workflow, agent, or pipeline on a schedule — from any AI framework. +
++ Create schedules, subscribe to events, and fetch execution history — all from one coherent SDK. +
+
+ $1'
+ )
+ .replace(/(['"`])(.*?)\1/g, '$1$2$1')
+ .replace(/(\/\/.*)/g, '$1')
+ .replace(/\b(\d+)\b/g, '$1'),
+ }}
+ />
+
+ + Built on Cloudflare Durable Objects — the scheduling infrastructure your agents can rely on. +
+{d.text}
++ No per-seat fees. No surprise overages. Scale your agents without scaling your billing headaches. +
+{p.price}
+{p.period}
+ {p.features.map((f) => ( ++ + {f} +
+ ))} + +{faq.a}
} ++ Agent Relay collects anonymous usage data to help us improve the product. This page explains what we + collect, why, and how to opt out. +
+ ++ Telemetry is on by default but can be disabled instantly: +
+
+ agent-relay telemetry disable
+
+ Or set the environment variable:
+
+ export AGENT_RELAY_TELEMETRY_DISABLED=1
+
+
+ Agent Relay also honors the{' '}
+
+ DO_NOT_TRACK
+ {' '}
+ convention for opting out across compatible tools:
+
+ export DO_NOT_TRACK=1
+
+ To re-enable:
+
+ agent-relay telemetry enable
+
+ Check your current status:
+
+ agent-relay telemetry
+
+ + Every event includes these common properties: +
+| Property | +Example | +Purpose | +
|---|---|---|
+ agent_relay_version
+ |
+ 3.2.22 | +Know which versions are in use | +
+ os
+ |
+ darwin | +Platform-specific bug triage | +
+ arch
+ |
+ arm64 | +Binary distribution decisions | +
+ node_version
+ |
+ 20.11.0 | +Runtime compatibility | +
These events are collected:
+ +| Event | +When | +Extra properties | +
|---|---|---|
+ broker_start
+ |
+ Broker process starts | +None | +
+ broker_stop
+ |
+ Broker shuts down | +Uptime, agent count | +
+ agent_spawn
+ |
+ An agent is created | +CLI type, spawn source, has task, is shadow | +
+ agent_release
+ |
+ An agent is stopped | +CLI type, reason, lifetime, source | +
+ agent_crash
+ |
+ An agent exits unexpectedly | +CLI type, lifetime, exit code | +
+ message_send
+ |
+ A relay message is sent | +Is broadcast, has thread | +
+ cli_command_run
+ |
+ A CLI command is executed | +Command name | +
~/.agentworkforce/relay/telemetry.json.
+ + Agent Relay is a developer tool. Telemetry helps us understand which CLI providers are popular, + how long agent sessions last, where crashes happen, and which commands are used. This data + directly informs what we build and fix next. +
++ The telemetry implementation is fully open source. You can inspect exactly what is collected:{' '} + + packages/cli/src/cli/telemetry + +
+Last updated: May 27, 2026
++ These terms govern access to Agent Relay websites, open-source tools, hosted cloud services, and + integrations. By using Agent Relay, you agree to these terms. +
+ ++ These Terms of Service are an agreement between you and Agent Workforce for use of Agent Relay. If + you use Agent Relay on behalf of an organization, you represent that you have authority to bind + that organization to these terms. +
++ Agent Relay also processes information as described in our{' '} + + Privacy Policy + + . +
++ Agent Relay provides software and hosted services for coordinating agents, messages, files, + workflows, cloud workspaces, repository integrations, and related developer operations. Some + features are open source and may run locally. Other features require an Agent Relay Cloud account + or a paid plan. +
+You may not use Agent Relay to:
++ You retain ownership of source code, prompts, messages, files, repository content, Slack messages, + issue text, pull request text, agent output, and other content you provide or connect. You grant + Agent Relay the rights needed to process that content to provide, secure, and improve the + services. +
++ You are responsible for ensuring that you have the rights and permissions needed to submit, + connect, or process content through Agent Relay and its integrations. +
++ Agent Relay can connect to third-party services such as GitHub, Slack, Google services, Nango, + Stripe, and infrastructure providers. Your use of those services remains subject to their terms. + You are responsible for the permissions, scopes, repositories, channels, workspaces, and accounts + you authorize. +
++ You may disconnect integrations at any time, but doing so may limit or disable related Agent Relay + features. +
++ Hosted workspaces may run commands, clone repositories, call connected APIs, produce messages, + create branches, open pull requests, or otherwise act based on your configuration and + instructions. You are responsible for reviewing agent actions and configuring appropriate access, + policies, approvals, and repository permissions. +
++ Paid services are billed according to the plan, usage, interval, and payment terms shown at + checkout or in the product. Subscription fees are non-refundable except where required by law or + expressly stated otherwise. We may suspend or limit paid features if payment fails or usage + exceeds applicable limits. +
++ Agent Relay includes open-source software governed by the licenses included with that software. + These terms do not limit rights granted under applicable open-source licenses. Hosted services, + cloud infrastructure, branding, and non-public systems are not open-source software unless + expressly stated. +
++ We may add, remove, suspend, or change features, plans, integrations, limits, or infrastructure. + We may suspend access when needed to protect users, systems, providers, or the integrity of Agent + Relay. +
++ Agent Relay is provided "as is" and "as available" to the maximum extent permitted by law. We do + not warrant that the services will be uninterrupted, error-free, secure, or that agent-generated + output will be accurate, complete, or suitable for any particular purpose. +
++ To the maximum extent permitted by law, Agent Workforce will not be liable for indirect, + incidental, special, consequential, exemplary, or punitive damages, or for lost profits, revenue, + data, goodwill, or business opportunities arising from your use of Agent Relay. +
++ You may stop using Agent Relay at any time. We may suspend or terminate access if you violate + these terms, create risk for the service or other users, fail to pay required fees, or use the + service in a way that could cause legal or operational harm. +
++ We may update these terms as Agent Relay changes. When we make material changes, we will update + the date above and provide additional notice when appropriate. Continued use after changes means + you accept the updated terms. +
++ Questions about these terms can be sent to{' '} + + {SITE_EMAIL} + + . +
+
+
+ Agent Relay for OpenClaw
++ Give your claws a Slack so they can communicate, coordinate, and take action in real time with + channels, DMs, and emoji responses. +
+ +{SITE_HOST}/openclaw/skill
+ Send this link to your OpenClaw.
+{feature.description}
+{step.detail}
+{step.code}
+
+
+ {eyebrow}
+{lead}
+{markdown}
+ + We'll send updates about new features, SDK releases, and early access to{' '} + {submittedEmail} +
+
+ An agent is just a persona.json and an agent.ts handler. Paste this
+ prompt into your coding agent — it reads the open-source examples, follows the persona skills,
+ and scaffolds a deployable agent for you.
+
{cmd}
+
+ No results for “{query}”
+ ) : ( + results.map((entry, i) => ( + close()} + onMouseEnter={() => setActiveIdx(i)} + > + {entry.title} + {entry.description && {entry.description}} + + )) + )} +...{children};
+ }
+
+ const raw = typeof codeChild.props.children === 'string' ? codeChild.props.children : '';
+ if (!raw) {
+ return {children};
+ }
+
+ const className = codeChild.props.className || '';
+ const token = extractCodeFenceToken(className);
+
+ if (!token) {
+ return (
+ {children}
+
+
+ | Option | +What it does | +
|---|---|
+ {optionNames.map((name, index) => (
+ {name}
+ |
+ {description} | +
,
+ .shiki, code groups, and the tab header via the --code-bg token. */
+:global(html[data-theme='dark']) .docsPage {
+ --code-bg: #0b1c2a;
+}
+
+.docsBody {
+ --docs-rail-top-padding: 1.5rem;
+ --docs-content-top-padding: 2.75rem;
+ display: grid;
+ grid-template-columns: 260px 1fr;
+ max-width: 1280px;
+ margin: 0 auto;
+ min-height: calc(100vh - 70px);
+}
+
+.sidebarCol {
+ position: sticky;
+ top: 88px;
+ height: calc(100vh - 88px);
+ overflow-y: auto;
+ padding: var(--docs-rail-top-padding) 1.25rem 2rem;
+ border-right: 1px solid var(--line);
+}
+
+.sidebar {
+ /* DocsNav wrapper — no longer sticky itself since sidebarCol handles it */
+}
+
+.mobileSidebar {
+ display: flex;
+ flex-direction: column;
+ gap: 0.35rem;
+ margin: 0 0 0.35rem;
+ padding: 0 0 0.85rem;
+ border-bottom: 1px solid var(--nav-border);
+}
+
+.mobileSidebar .navGroup {
+ margin-bottom: 0.8rem;
+}
+
+.mobileSidebar .navGroup:last-child {
+ margin-bottom: 0;
+}
+
+.mobileSidebar .navGroupTitle {
+ color: var(--nav-subtle);
+ margin-bottom: 0.35rem;
+ padding-left: 0.9rem;
+}
+
+.mobileSidebar .navLink {
+ padding: 0.65rem 0.9rem;
+ border-radius: 0.6rem;
+ color: var(--nav-muted);
+}
+
+.mobileSidebar .navLink:hover {
+ background: var(--nav-surface);
+ color: var(--nav-fg);
+}
+
+.mobileSidebar .navLinkActive {
+ background: color-mix(in srgb, var(--primary) 12%, transparent);
+ color: var(--primary-hover);
+}
+
+.mobileSidebar .navIcon {
+ opacity: 0.9;
+}
+
+.mobileSidebar .versionControl {
+ margin: 0.45rem 0 0.95rem;
+ padding: 0.95rem 0.9rem 0;
+ border-top: 1px solid var(--nav-border);
+}
+
+.sidebarLogo {
+ display: none;
+}
+
+.content {
+ min-width: 0;
+ padding: var(--docs-content-top-padding) 3rem 5rem;
+}
+
+/* ── Article + TOC wrapper ── */
+
+.articleWrapper {
+ display: grid;
+ grid-template-columns: 1fr 200px;
+ align-items: start;
+ gap: 48px;
+ max-width: 56rem;
+}
+
+.tocSidebar {
+ position: sticky;
+ top: 100px;
+ align-self: start;
+ height: fit-content;
+ min-width: 0;
+ margin-top: calc(var(--docs-rail-top-padding) - var(--docs-content-top-padding));
+}
+
+.toc {
+ max-height: calc(100vh - 100px);
+ overflow-y: auto;
+}
+
+.tocControl {
+ margin-bottom: 0.95rem;
+}
+
+.tocSelectWrap {
+ position: relative;
+ display: block;
+}
+
+.tocSelectWrap::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0.65rem;
+ width: 0.4rem;
+ height: 0.4rem;
+ border-right: 1.5px solid var(--fg-muted);
+ border-bottom: 1.5px solid var(--fg-muted);
+ transform: translateY(-65%) rotate(45deg);
+ pointer-events: none;
+}
+
+.tocSelect {
+ width: 100%;
+ height: 2rem;
+ appearance: none;
+ -webkit-appearance: none;
+ padding: 0.35rem 1.7rem 0.35rem 0.65rem;
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ background: transparent;
+ color: var(--fg-muted);
+ font: inherit;
+ font-size: 0.76rem;
+ font-weight: 600;
+ line-height: 1.2;
+ box-shadow: none;
+}
+
+.tocSelect:focus-visible {
+ outline: none;
+ border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
+ box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
+}
+
+.tocNav {
+ margin-top: 1.3rem;
+}
+
+.tocTitle {
+ font-size: 0.68rem;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--fg-faint);
+ margin: 0 0 8px;
+}
+
+.tocList {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.tocLink {
+ display: block;
+ padding: 3px 0;
+ font-size: 0.72rem;
+ line-height: 1.4;
+ color: var(--fg-faint);
+ text-decoration: none;
+ border-left: 2px solid transparent;
+ padding-left: 10px;
+ transition:
+ color 0.15s,
+ border-color 0.15s;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.tocLink:hover {
+ color: var(--primary);
+}
+
+.tocIndent {
+ padding-left: 20px;
+}
+
+.tocActive {
+ color: var(--primary);
+ border-left-color: var(--primary);
+}
+
+.versionControl {
+ margin: 0 0 1.25rem;
+}
+
+.versionLabel {
+ display: block;
+ font-size: 0.68rem;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--fg-faint);
+ margin: 0 0 8px;
+}
+
+.versionSelectWrap {
+ position: relative;
+ display: block;
+}
+
+.versionSelect {
+ width: 100%;
+ height: 2rem;
+ appearance: none;
+ -webkit-appearance: none;
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ background: transparent;
+ color: var(--fg-muted);
+ font: inherit;
+ font-size: 0.76rem;
+ font-weight: 600;
+ line-height: 1.2;
+ padding: 0.35rem 1.7rem 0.35rem 0.65rem;
+ cursor: pointer;
+}
+
+.versionSelect:hover {
+ color: var(--fg-muted);
+}
+
+.versionSelect:focus-visible {
+ outline: none;
+ border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
+ box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
+}
+
+.versionChevron {
+ position: absolute;
+ top: 50%;
+ right: 0.65rem;
+ width: 0.8rem;
+ height: 0.8rem;
+ color: var(--fg-muted);
+ pointer-events: none;
+ transform: translateY(-50%);
+}
+
+.navGroup {
+ margin-bottom: 1.25rem;
+}
+
+.navGroupTitle {
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--fg-faint);
+ margin-bottom: 0.4rem;
+ padding-left: 0.5rem;
+}
+
+.navList {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.navLink {
+ display: flex;
+ align-items: center;
+ gap: 0.55rem;
+ padding: 0.34rem 0.5rem;
+ border-radius: 0.4rem;
+ font-size: 0.88rem;
+ color: var(--fg-muted);
+ text-decoration: none;
+ transition:
+ background 0.15s,
+ color 0.15s;
+}
+
+.navIcon {
+ width: 0.92rem;
+ height: 0.92rem;
+ flex-shrink: 0;
+ color: currentColor;
+ opacity: 0.8;
+}
+
+.navLabel {
+ min-width: 0;
+}
+
+.navLink:hover {
+ background: color-mix(in srgb, var(--primary) 6%, transparent);
+ color: var(--primary);
+}
+
+.navLinkActive {
+ background: color-mix(in srgb, var(--primary) 8%, transparent);
+ color: var(--primary);
+ font-weight: 600;
+}
+
+/* ── Article ── */
+
+.article {
+ line-height: 1.7;
+ color: var(--fg);
+ min-width: 0;
+ overflow: visible;
+}
+
+.articleHeader {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 1.5rem;
+ margin-bottom: 0.45rem;
+}
+
+.articleHeading {
+ min-width: 0;
+ flex: 1;
+}
+
+.articleBody {
+ min-width: 0;
+ overflow: hidden;
+}
+
+.article h1 {
+ font-size: clamp(1.8rem, 4vw, 2.4rem);
+ letter-spacing: -0.04em;
+ font-weight: 800;
+ line-height: 0.98;
+ color: var(--fg);
+ margin: 0 0 0.35rem;
+}
+
+.articleDescription {
+ color: var(--fg-muted);
+ font-size: 1.05rem;
+ margin: 0 0 1.5rem;
+}
+
+.pageActions {
+ position: relative;
+ flex-shrink: 0;
+ z-index: 3;
+}
+
+.pageActionButton {
+ display: inline-flex;
+ align-items: stretch;
+ border: 1px solid var(--line);
+ border-radius: 0.85rem;
+ background: color-mix(in srgb, var(--card-bg) 98%, transparent);
+ box-shadow: 0 3px 10px color-mix(in srgb, var(--fg) 4%, transparent);
+ overflow: hidden;
+}
+
+.pageActionPrimary,
+.pageActionToggle {
+ border: 0;
+ background: transparent;
+ color: var(--fg);
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ font: inherit;
+ font-size: 0.8rem;
+ cursor: pointer;
+ transition:
+ background 0.15s ease,
+ color 0.15s ease;
+}
+
+.pageActionPrimary {
+ padding: 0.34rem 0.62rem;
+ font-weight: 600;
+}
+
+.pageActionToggle {
+ padding: 0.34rem 0.5rem;
+ border-left: 1px solid var(--line);
+}
+
+.pageActionPrimary:hover,
+.pageActionToggle:hover {
+ background: color-mix(in srgb, var(--primary) 8%, var(--card-bg));
+ color: var(--primary);
+}
+
+.pageActionPrimary:focus-visible,
+.pageActionToggle:focus-visible,
+.pageActionItem:focus-visible {
+ outline: 2px solid color-mix(in srgb, var(--primary) 60%, white 40%);
+ outline-offset: 2px;
+}
+
+.pageActionPrimaryIcon,
+.pageActionChevron,
+.pageActionItemIcon,
+.pageActionExternal {
+ width: 0.9rem;
+ height: 0.9rem;
+ flex-shrink: 0;
+}
+
+.pageActionMenu {
+ position: absolute;
+ top: calc(100% + 0.75rem);
+ right: 0;
+ width: min(17.5rem, calc(100vw - 2rem));
+ padding: 0.35rem;
+ border: 1px solid var(--line);
+ border-radius: 1rem;
+ background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
+ box-shadow: 0 12px 28px color-mix(in srgb, var(--fg) 10%, transparent);
+ backdrop-filter: blur(16px);
+}
+
+.pageActionItem {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.34rem 0.45rem;
+ border: 0;
+ border-radius: 0.65rem;
+ background: transparent;
+ color: inherit;
+ text-decoration: none;
+ text-align: left;
+ font: inherit;
+ cursor: pointer;
+ transition: background 0.15s ease;
+}
+
+.pageActionItem:hover {
+ background: color-mix(in srgb, var(--primary) 7%, transparent);
+}
+
+.pageActionIconFrame {
+ width: 1.35rem;
+ height: 1.35rem;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ border: 1px solid var(--line);
+ border-radius: 0.45rem;
+ background: color-mix(in srgb, var(--bg) 90%, var(--card-bg));
+ color: var(--fg-muted);
+}
+
+.pageActionCopyBody {
+ flex: 1;
+ min-width: 0;
+}
+
+.pageActionItemTitle {
+ display: flex;
+ align-items: center;
+ gap: 0.3rem;
+ width: 100%;
+ font-size: 0.8rem;
+ font-weight: 600;
+ line-height: 1.15;
+ color: var(--fg);
+}
+
+.pageActionExternal {
+ margin-left: auto;
+ opacity: 0.7;
+}
+
+.article h2 {
+ font-size: 1.35rem;
+ letter-spacing: -0.02em;
+ font-weight: 700;
+ color: var(--fg);
+ margin: 2.5rem 0 0.75rem;
+ padding-bottom: 0.45rem;
+ border-bottom: none;
+ /* Fading gradient hairline, matching the landing-page section rules. */
+ background-image: linear-gradient(
+ 90deg,
+ color-mix(in srgb, var(--primary) 42%, transparent),
+ color-mix(in srgb, var(--primary) 12%, transparent) 55%,
+ transparent
+ );
+ background-repeat: no-repeat;
+ background-position: 0 100%;
+ background-size: 100% 1px;
+}
+
+.article h3 {
+ font-size: 1.1rem;
+ font-weight: 600;
+ margin: 1.8rem 0 0.5rem;
+}
+
+.article hr {
+ height: 1px;
+ margin: 2.75rem 0;
+ border: 0;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ color-mix(in srgb, var(--primary) 32%, transparent) 50%,
+ transparent
+ );
+}
+.article p {
+ margin: 0.75rem 0;
+}
+
+.article a {
+ color: var(--primary);
+ text-decoration: underline;
+ text-decoration-color: var(--link-underline);
+ text-underline-offset: 2px;
+ transition: text-decoration-color 0.15s;
+}
+.article a:hover {
+ text-decoration-color: var(--primary);
+}
+
+.article .pageActionItem,
+.article .pageActionItem:hover {
+ color: inherit;
+ text-decoration: none;
+}
+
+.article ul,
+.article ol {
+ margin: 0.75rem 0;
+ padding-left: 1.5rem;
+}
+.article li {
+ margin: 0.3rem 0;
+}
+.article strong {
+ color: var(--fg);
+ font-weight: 600;
+}
+
+.article table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ font-size: 0.9rem;
+}
+.article th,
+.article td {
+ text-align: left;
+ padding: 0.5rem 0.75rem;
+ border-bottom: 1px solid var(--line);
+}
+.article th {
+ font-weight: 600;
+ color: var(--primary);
+}
+.article td {
+ color: var(--fg-muted);
+}
+
+.article code {
+ font-family: var(--font-geist-mono), monospace;
+ font-size: 0.85em;
+ background: var(--inline-code-bg);
+ color: var(--inline-code-fg);
+ padding: 0.15em 0.35em;
+ border-radius: 0.3rem;
+}
+
+.codeWrapper {
+ position: relative;
+ margin: 1rem 0;
+}
+
+.codeWrapperWithHeader {
+ overflow: hidden;
+ border-radius: 0.75rem;
+}
+
+.codeWrapper pre {
+ margin: 0;
+}
+
+.codeWrapperWithHeader pre {
+ border-top: none;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+.codeBlockHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.85rem;
+ padding: 0.38rem 0.65rem;
+ border: 1px solid var(--line);
+ border-bottom: none;
+ border-radius: 0.75rem 0.75rem 0 0;
+ background: color-mix(in srgb, var(--surface-strong) 38%, var(--code-bg));
+}
+
+.codeBlockHeaderMeta {
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.codeBlockBadge {
+ width: 1.4rem;
+ height: 1.4rem;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ border-radius: 0.28rem;
+ background: color-mix(in srgb, var(--bg) 22%, var(--surface-strong));
+ color: var(--fg-muted);
+ font-size: 0.62rem;
+ font-weight: 800;
+ letter-spacing: 0.01em;
+}
+
+.codeBlockBadgeIcon {
+ width: 0.82rem;
+ height: 0.82rem;
+}
+
+.codeBlockFilename {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--fg-muted);
+ font-size: 0.84rem;
+ font-weight: 600;
+}
+
+.copyBtn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 6px;
+ border: 1px solid var(--line);
+ background: var(--card-bg);
+ color: var(--fg-faint);
+ cursor: pointer;
+ opacity: 1;
+ transition:
+ opacity 0.15s,
+ color 0.15s,
+ background 0.15s;
+}
+
+.copyBtnInline {
+ position: static;
+ top: auto;
+ right: auto;
+ z-index: auto;
+ flex-shrink: 0;
+ width: 28px;
+ height: 28px;
+ border-color: transparent;
+ background: transparent;
+}
+
+.copyBtn:hover {
+ color: var(--primary);
+ background: var(--bg);
+}
+
+.copyBtnInline:hover {
+ color: var(--fg);
+ background: color-mix(in srgb, var(--surface) 65%, transparent);
+}
+
+.article pre {
+ margin: 0;
+ padding: 1rem 1.25rem;
+ border-radius: 0.75rem;
+ background: var(--code-bg);
+ border: 1px solid var(--line);
+ overflow-x: auto;
+ line-height: 1.5;
+}
+
+.article pre code {
+ background: none;
+ padding: 0;
+ font-size: 0.85rem;
+ color: var(--code-fg);
+}
+
+/* ── CodeGroup ── */
+
+.codeGroup {
+ margin: 1rem 0;
+ border: 1px solid var(--line);
+ border-radius: 0.75rem;
+ overflow: hidden;
+ background: var(--code-bg);
+}
+
+.codeGroupTabs {
+ display: flex;
+ background: var(--nav-bg);
+ border-bottom: 1px solid var(--nav-border);
+}
+
+.codeGroupTabsHidden {
+ display: none;
+}
+
+.codeGroupTab {
+ padding: 0.5rem 1rem;
+ font-size: 0.8rem;
+ font-weight: 600;
+ font-family: inherit;
+ color: var(--nav-fg);
+ opacity: 0.55;
+ background: none;
+ border: none;
+ border-bottom: 2px solid transparent;
+ cursor: pointer;
+ transition:
+ opacity 0.15s,
+ border-color 0.15s;
+}
+.codeGroupTab:hover {
+ opacity: 0.8;
+}
+.codeGroupTabActive {
+ opacity: 1;
+ border-bottom-color: var(--nav-fg);
+}
+.codeGroupPanel {
+ background: var(--code-bg);
+}
+
+.codeGroupPanel .codeWrapper {
+ margin: 0;
+}
+
+.codeGroupPanel .codeWrapperWithHeader {
+ border-radius: 0;
+}
+
+.codeGroupPanel .codeBlockHeader {
+ border: none;
+ border-bottom: 1px solid var(--line);
+ border-radius: 0;
+}
+
+.codeGroupPanel pre {
+ margin: 0;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+}
+
+/* ── Banner Link ── */
+
+.bannerLink {
+ width: 100%;
+ min-height: 48px;
+ display: flex;
+ align-items: center;
+ gap: 0.9rem;
+ margin: 1.35rem 0 1.55rem;
+ padding: 0rem 0.95rem;
+ border: 1.5px solid #234969;
+ border-radius: 999px;
+ background: #2d6a9c;
+ color: var(--primary-fg);
+ text-decoration: none;
+ box-shadow: none;
+ transition:
+ background 0.2s ease,
+ border-color 0.2s ease,
+ transform 0.15s ease,
+ color 0.15s ease;
+}
+
+.article .bannerLink,
+.article .bannerLink:hover {
+ color: var(--primary-fg);
+ text-decoration: none;
+}
+
+.bannerLink:hover {
+ background: #4a90c2;
+ border-color: #234969;
+ transform: translateY(-1px);
+ box-shadow: none;
+}
+
+.bannerLinkIconWrap {
+ width: 2rem;
+ height: 2rem;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--primary-fg) 12%, transparent);
+ color: inherit;
+}
+
+.bannerLinkIcon {
+ width: 1rem;
+ height: 1rem;
+}
+
+.bannerLinkText {
+ flex: 1;
+ min-width: 0;
+ font-size: 0.92rem;
+ font-weight: 600;
+ letter-spacing: 0.01em;
+ line-height: 1.35;
+}
+
+.bannerLinkArrow {
+ width: 1rem;
+ height: 1rem;
+ flex-shrink: 0;
+ color: inherit;
+ opacity: 0.86;
+}
+
+/* ── Cards ── */
+
+.cardGroup {
+ display: grid;
+ gap: 0.95rem;
+ margin: 1.25rem 0;
+}
+
+/* Flat, refined dark panels — a faint top sheen and a hairline cool-blue
+ border, matching the event-feed surfaces. Colour is reserved for tiny
+ semantic accents, not the card body. */
+.card {
+ position: relative;
+ display: block;
+ min-height: 100%;
+ padding: 1rem 1.15rem 0.95rem;
+ border: 1px solid var(--card-border);
+ border-radius: 0.7rem;
+ background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 94%, white 6%), var(--card-bg));
+ text-decoration: none;
+ color: inherit;
+ box-shadow:
+ inset 0 1px 0 color-mix(in srgb, white 5%, transparent),
+ 0 1px 3px color-mix(in srgb, black 16%, transparent);
+ transition:
+ border-color 0.15s ease,
+ box-shadow 0.15s ease,
+ transform 0.15s ease;
+}
+
+.card:hover {
+ border-color: var(--card-hover-border);
+ box-shadow:
+ inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
+ 0 4px 14px color-mix(in srgb, black 22%, transparent);
+ transform: translateY(-1px);
+}
+
+.article .card,
+.article .card:hover {
+ color: inherit;
+ text-decoration: none;
+}
+
+.cardHeader {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 0.85rem;
+ margin-bottom: 0.5rem;
+}
+
+.cardTitle {
+ font-size: 1.02rem;
+ font-weight: 700;
+ color: var(--fg);
+ line-height: 1.25;
+ margin: 0 !important;
+}
+
+.cardLinkIcon {
+ width: 0.95rem;
+ height: 0.95rem;
+ flex-shrink: 0;
+ color: var(--fg-faint);
+ transition:
+ transform 0.15s ease,
+ color 0.15s ease;
+}
+
+.card:hover .cardLinkIcon {
+ color: var(--primary);
+ transform: translateX(2px);
+}
+
+.cardBody {
+ position: relative;
+ z-index: 1;
+ font-size: 0.92rem;
+ color: var(--fg-muted);
+ margin: 0;
+ line-height: 1.55;
+}
+.cardBody p {
+ margin: 0;
+}
+
+/* ── Note ── */
+
+.note {
+ margin: 1rem 0;
+ padding: 0.85rem 1rem;
+ border-left: 3px solid var(--primary);
+ border-radius: 0 0.5rem 0.5rem 0;
+ background: var(--note-bg);
+ font-size: 0.92rem;
+ color: var(--fg-muted);
+}
+.note p {
+ margin: 0.3rem 0;
+}
+.note p:first-child {
+ margin-top: 0;
+}
+.note p:last-child {
+ margin-bottom: 0;
+}
+
+.warning {
+ margin: 1rem 0;
+ padding: 0.85rem 1rem;
+ border-left: 3px solid var(--warning, #e5a00d);
+ border-radius: 0 0.5rem 0.5rem 0;
+ background: color-mix(in srgb, var(--warning, #e5a00d) 8%, var(--bg));
+ font-size: 0.92rem;
+ color: var(--fg-muted);
+}
+.warning p {
+ margin: 0.3rem 0;
+}
+.warning p:first-child {
+ margin-top: 0;
+}
+.warning p:last-child {
+ margin-bottom: 0;
+}
+
+/* ── Responsive ── */
+
+@media (max-width: 1100px) {
+ .articleWrapper {
+ grid-template-columns: 1fr;
+ }
+ .tocSidebar {
+ display: none;
+ }
+ .articleHeader {
+ flex-direction: column;
+ align-items: stretch;
+ }
+ .pageActions {
+ align-self: flex-start;
+ }
+}
+
+@media (max-width: 900px) {
+ .docsBody {
+ grid-template-columns: 1fr;
+ }
+ .sidebarCol {
+ display: none;
+ }
+ .content {
+ padding: 1.5rem 1rem 3rem;
+ }
+ .bannerLink {
+ padding: 0.9rem 0.95rem;
+ gap: 0.75rem;
+ }
+ .cardGroup {
+ grid-template-columns: 1fr !important;
+ }
+ .pageActionButton {
+ width: 100%;
+ }
+ .pageActionPrimary {
+ flex: 1;
+ justify-content: center;
+ }
+ .pageActionMenu {
+ left: 0;
+ right: auto;
+ width: min(22rem, calc(100vw - 2rem));
+ }
+}
diff --git a/web/components/github-stars.module.css b/web/components/github-stars.module.css
new file mode 100644
index 00000000..288e6c41
--- /dev/null
+++ b/web/components/github-stars.module.css
@@ -0,0 +1,57 @@
+.badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+ padding: 6px 14px;
+ background: var(--nav-surface);
+ color: var(--nav-fg);
+ border: 1px solid var(--nav-border);
+ border-radius: 100px;
+ text-decoration: none;
+ font-size: 0.82rem;
+ font-weight: 500;
+ animation: throb 3s ease-in-out infinite;
+ transition:
+ background 0.25s,
+ border-color 0.25s,
+ color 0.25s;
+}
+
+.meta {
+ display: inline-flex;
+ align-items: center;
+ gap: 7px;
+}
+
+.badge:hover {
+ background: var(--nav-surface-hover);
+ border-color: var(--nav-border-strong);
+ color: var(--nav-link-hover);
+ animation: none;
+ transform: scale(1.04);
+}
+
+@keyframes throb {
+ 0%,
+ 100% {
+ border-color: var(--nav-border);
+ transform: scale(1);
+ box-shadow: 0 0 0 0 transparent;
+ }
+ 50% {
+ border-color: var(--nav-border-strong);
+ transform: scale(1.04);
+ box-shadow: 0 0 12px color-mix(in srgb, var(--nav-fg) 10%, transparent);
+ }
+}
+
+.divider {
+ width: 1px;
+ height: 14px;
+ background: currentColor;
+ opacity: 0.3;
+}
+
+.count {
+ font-variant-numeric: tabular-nums;
+}
diff --git a/web/components/home/A2AFeature.tsx b/web/components/home/A2AFeature.tsx
new file mode 100644
index 00000000..2320ef12
--- /dev/null
+++ b/web/components/home/A2AFeature.tsx
@@ -0,0 +1,94 @@
+import { FadeIn } from '../FadeIn';
+import s from '../../app/landing.module.css';
+
+/** Syntax-highlight kinds mapped to the editor's CSS module classes. */
+type TokenKind = 'muted' | 'fn' | 'var' | 'kw' | 'str';
+
+const TOKEN_CLASS: Record = {
+ muted: s.codeMuted,
+ fn: s.codeFunction,
+ var: s.codeVariable,
+ kw: s.codeKeyword,
+ str: s.codeString,
+};
+
+/**
+ * An A2A Agent Card, expressed as ordered tokens. Plain segments (including
+ * whitespace/newlines) carry no kind; highlighted segments name the span color.
+ * Rendered into a `pre` whose `white-space: pre-wrap` preserves the spacing here.
+ */
+const AGENT_CARD_TOKENS: ReadonlyArray<{ text: string; kind?: TokenKind }> = [
+ { text: '// Any A2A client can discover and call this agent ', kind: 'muted' },
+ { text: '\n{\n ' },
+ { text: '"name"', kind: 'var' },
+ { text: ': ' },
+ { text: '"Scout"', kind: 'str' },
+ { text: ',\n ' },
+ { text: '"protocolVersion"', kind: 'var' },
+ { text: ': ' },
+ { text: '"0.3.0"', kind: 'str' },
+ { text: ',\n ' },
+ { text: '"url"', kind: 'var' },
+ { text: ': ' },
+ { text: '"https://relay.dev/a2a/scout"', kind: 'str' },
+ { text: ',\n ' },
+ { text: '"capabilities"', kind: 'var' },
+ { text: ': { ' },
+ { text: '"streaming"', kind: 'var' },
+ { text: ': ' },
+ { text: 'true', kind: 'kw' },
+ { text: ' },\n ' },
+ { text: '"skills"', kind: 'var' },
+ { text: ': [{ ' },
+ { text: '"id"', kind: 'var' },
+ { text: ': ' },
+ { text: '"triage"', kind: 'str' },
+ { text: ', ' },
+ { text: '"tags"', kind: 'var' },
+ { text: ': [' },
+ { text: '"routing"', kind: 'str' },
+ { text: '] }]\n}' },
+];
+
+export function A2AFeature() {
+ return (
+
+
+
+
+
+
+
+ agent-card.json
+
+
+
+ {AGENT_CARD_TOKENS.map(({ text, kind }, i) =>
+ kind ? (
+
+ {text}
+
+ ) : (
+ {text}
+ )
+ )}
+
+
+
+
+
+ Speaks A2A out of the box
+
+ - Every Relay agent publishes an A2A Agent Card, so any A2A client can discover and call it.
+ -
+ Bridge agents built on other frameworks over the open Agent2Agent protocol — no custom glue.
+
+ -
+ A2A tasks, messages, and streaming updates map onto Relay channels and threads automatically.
+
+ - Standard endpoints in, durable Relay delivery out, with the full chat history preserved.
+
+
+
+ );
+}
diff --git a/web/components/home/AgentToolsFeature.tsx b/web/components/home/AgentToolsFeature.tsx
new file mode 100644
index 00000000..d56487a1
--- /dev/null
+++ b/web/components/home/AgentToolsFeature.tsx
@@ -0,0 +1,117 @@
+import MCP from '@lobehub/icons/es/MCP';
+import { SquareTerminal } from 'lucide-react';
+
+import { FadeIn } from '../FadeIn';
+import s from '../../app/landing.module.css';
+
+/** Syntax-highlight kinds mapped to the editor's CSS module classes. */
+type TokenKind = 'muted' | 'fn' | 'var' | 'kw' | 'str';
+
+const TOKEN_CLASS: Record = {
+ muted: s.codeMuted,
+ fn: s.codeFunction,
+ var: s.codeVariable,
+ kw: s.codeKeyword,
+ str: s.codeString,
+};
+
+/**
+ * The orchestrator.ts snippet, expressed as ordered tokens. Plain segments
+ * (including whitespace/newlines) carry no kind; highlighted segments name the
+ * span color. Rendered into a `pre` whose `white-space: pre-wrap` preserves the
+ * literal spacing here. Mirrors the SDK's `registerAction` API from the README.
+ */
+const EDITOR_TOKENS: ReadonlyArray<{ text: string; kind?: TokenKind }> = [
+ { text: '// Expose a tool to agents via MCP + CLI ', kind: 'muted' },
+ { text: '\nrelay.' },
+ { text: 'registerAction', kind: 'fn' },
+ { text: '({\n name: ' },
+ { text: '"submit-vote"', kind: 'str' },
+ { text: ',\n input: z.' },
+ { text: 'object', kind: 'fn' },
+ { text: '({ vote: z.' },
+ { text: 'enum', kind: 'fn' },
+ { text: '([' },
+ { text: '"yes"', kind: 'str' },
+ { text: ', ' },
+ { text: '"no"', kind: 'str' },
+ { text: ']) }),\n handler: ' },
+ { text: 'async', kind: 'kw' },
+ { text: ' ({ agent, input }) => {\n ' },
+ { text: 'await', kind: 'kw' },
+ { text: ' ' },
+ { text: 'recordVote', kind: 'fn' },
+ { text: '(agent.' },
+ { text: 'name', kind: 'var' },
+ { text: ', input.' },
+ { text: 'vote', kind: 'var' },
+ { text: ');\n },\n});\n\n' },
+ { text: '// Run a callback when it completes ', kind: 'muted' },
+ { text: '\nrelay.' },
+ { text: 'addListener', kind: 'fn' },
+ { text: '(relay.' },
+ { text: 'action', kind: 'fn' },
+ { text: '(' },
+ { text: '"submit-vote"', kind: 'str' },
+ { text: ').' },
+ { text: 'completed', kind: 'fn' },
+ { text: '(), tally);' },
+];
+
+export function AgentToolsFeature() {
+ return (
+
+
+ Agent Tools for Structured Work
+
+ - Register actions for agents and callbacks for results via the SDK
+ - Expose CLI and MCP tools so agents can communicate progress back to the SDK.
+ -
+ Require approvals, validate inputs, and return structured results instead of free-form guesses.
+
+ - Keep action updates attached to the right channel, thread, and workflow state.
+
+
+
+
+
+ MCP
+ The Agent Relay MCP exposes tool calls you define via the SDK that you can define callbacks for.
+
+
+
+
+
+ CLI
+ The Agent Relay CLI exposes actions you define via the SDK as terminal commands the agent can
+ use and you can define callbacks for.
+
+
+
+
+
+
+
+
+
+
+ orchestrator.ts
+
+
+
+ {EDITOR_TOKENS.map(({ text, kind }, i) =>
+ kind ? (
+
+ {text}
+
+ ) : (
+ {text}
+ )
+ )}
+
+
+
+
+
+ );
+}
diff --git a/web/components/home/ContextCapabilities.tsx b/web/components/home/ContextCapabilities.tsx
new file mode 100644
index 00000000..525bed05
--- /dev/null
+++ b/web/components/home/ContextCapabilities.tsx
@@ -0,0 +1,90 @@
+import { FadeIn } from '../FadeIn';
+import { RealtimeEventFeed } from '../../app/RealtimeEventFeed';
+import { SearchPreviewAnimation } from '../../app/SearchPreviewAnimation';
+import s from '../../app/landing.module.css';
+import { WaveDivider } from './icons';
+
+const WEBHOOK_SNIPPET = `curl -X POST \\
+ https://api.agentrelay.com/v1/webhooks \\
+ -H "Content-Type: application/json" \\
+ -d '{"channel":"#alerts","text":"Deploy finished"}'`;
+
+/**
+ * The "build the right context" band: real-time events, webhooks, and search.
+ * Rendered inside {@link DeliveryFeature} so it stays grouped with the delivery
+ * story, matching the original DOM nesting.
+ */
+export function ContextCapabilities() {
+ return (
+
+
+ Easy to build the right context
+
+
+ Agents are only as good as the context you give them. Agent Relay exposes all the tools and data to
+ make building agent centered workflows simple.
+
+
+
+
+
+
+
+ Real-time events
+
+ WebSocket stream for live events. Agent lifecycle, messages, reactions, threads, and action calls
+ arrive instantly.
+
+
+
+
+
+
+
+
+
+ terminal
+
+
+
+ $
+ {WEBHOOK_SNIPPET}
+
+
+
+
+
+ Webhooks
+
+ Create a webhook, get a URL, POST to it from GitHub Actions, Sentry, PagerDuty, or any service.
+ Messages appear in your channel instantly.
+
+
+
+
+
+
+
+ Search
+
+ Search messages, threads, channels, and agent history so teams can recover context without asking
+ humans to summarize it again.
+
+
+
+
+ );
+}
diff --git a/web/components/home/DeliveryFeature.tsx b/web/components/home/DeliveryFeature.tsx
new file mode 100644
index 00000000..fe8a0b5b
--- /dev/null
+++ b/web/components/home/DeliveryFeature.tsx
@@ -0,0 +1,97 @@
+import { AgentToolLogo, type AgentTool } from '../AgentToolLogos';
+import { FadeIn } from '../FadeIn';
+import { DurableDeliveryTimeline } from '../../app/DurableDeliveryTimeline';
+import s from '../../app/landing.module.css';
+import { ContextCapabilities } from './ContextCapabilities';
+import { OpenClawLogo } from './icons';
+
+/** `openclaw` has no entry in {@link AgentTool}, so it renders a bespoke mark. */
+type DeliveryProvider = AgentTool | 'openclaw';
+
+interface DeliveryRow {
+ dot: string;
+ provider: DeliveryProvider;
+ name: string;
+ /** [delivered, pending, retry, fail] counts shown in the dashboard. */
+ stats: readonly [number, number, number, number];
+}
+
+const DELIVERY_ROWS: readonly DeliveryRow[] = [
+ { dot: '#28c840', provider: 'claude', name: 'Scout', stats: [58, 0, 0, 0] },
+ { dot: '#9CA3AF', provider: 'codex', name: 'Designer', stats: [51, 0, 1, 0] },
+ { dot: '#28c840', provider: 'openclaw', name: 'QA', stats: [46, 1, 0, 0] },
+ { dot: '#28c840', provider: 'claude', name: 'Planner', stats: [42, 2, 0, 0] },
+ { dot: '#28c840', provider: 'gemini', name: 'Builder', stats: [37, 0, 1, 0] },
+ { dot: '#febc2e', provider: 'codex', name: 'Reviewer', stats: [29, 3, 2, 1] },
+ { dot: '#9CA3AF', provider: 'copilot', name: 'Ops', stats: [18, 4, 0, 0] },
+];
+
+function DeliveryRowIcon({ provider }: { provider: DeliveryProvider }) {
+ if (provider === 'openclaw') {
+ return
+
+
+
+ The hard parts of delivery, handled
+
+ - Durable delivery so channel history and offline catch-up survive restarts.
+ -
+ Receipts, retry queues, and backoff keep handoffs moving until every target agent acknowledges.
+
+ -
+ Stateful coordination stays close to active channels for fast reads, writes, and thread updates.
+
+ -
+ A global edge network places channels near agents while keeping ordering and membership
+ consistent.
+
+
+
+
+
+ );
+}
diff --git a/web/components/home/Deploy.tsx b/web/components/home/Deploy.tsx
new file mode 100644
index 00000000..db83415f
--- /dev/null
+++ b/web/components/home/Deploy.tsx
@@ -0,0 +1,64 @@
+import type { ComponentType } from 'react';
+
+import { FadeIn } from '../FadeIn';
+import s from '../../app/landing.module.css';
+import { CloudIcon, MonitorIcon } from './icons';
+
+interface DeployOption {
+ href: string;
+ label: string;
+ Icon: ComponentType;
+ title: string;
+ text: string;
+}
+
+const DEPLOY_OPTIONS: DeployOption[] = [
+ {
+ href: 'https://github.com/agentworkforce/relay/blob/main/docs/self-hosting/README.md',
+ label: 'Read the Agent Relay self-hosting README on GitHub',
+ Icon: MonitorIcon,
+ title: 'Self host',
+ text: 'For teams that need complete control.',
+ },
+ {
+ href: 'https://agentrelay.com/cloud',
+ label: 'Open Agent Relay hosted cloud',
+ Icon: CloudIcon,
+ title: 'Hosted cloud',
+ text: 'For teams that just want to build.',
+ },
+];
+
+export function Deploy() {
+ return (
+
+
+ Open source from day one
+
+ Use the open-source engine in your own infrastructure, or let us run it for you with a generous free
+ tier.
+
+
+
+
+ {DEPLOY_OPTIONS.map(({ Icon, ...option }) => (
+
+
+ {option.title}
+ {option.text}
+
+ ))}
+
+
+
+ );
+}
diff --git a/web/components/home/Hero.tsx b/web/components/home/Hero.tsx
new file mode 100644
index 00000000..6e326fc7
--- /dev/null
+++ b/web/components/home/Hero.tsx
@@ -0,0 +1,45 @@
+import Link from 'next/link';
+
+import { HeroGraph } from './HeroGraph';
+import s from '../../app/landing.module.css';
+import { GitHubIcon, HeroBackdrop } from './icons';
+
+export function Hero() {
+ return (
+
+
+
+ Let your agents talk
+
+
+ Give Claude, Codex or any other agent DMs, channels and a searchable chat history. Build your
+ multi-agent system without worrying about the glue.
+
+
+
+
+ Read Docs
+
+
+ Agent Skill
+
+
+
+
+ );
+}
diff --git a/web/components/home/HeroGraph.tsx b/web/components/home/HeroGraph.tsx
new file mode 100644
index 00000000..d0a27e63
--- /dev/null
+++ b/web/components/home/HeroGraph.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { MessageRelayAnimation } from '../MessageRelayAnimation';
+
+// Matches the mobile breakpoint in landing.module.css where .heroRight is hidden.
+const MOBILE_QUERY = '(max-width: 600px)';
+
+type MediaQueryListWithLegacyListeners = MediaQueryList & {
+ addListener?: (listener: () => void) => void;
+ removeListener?: (listener: () => void) => void;
+};
+
+function subscribeToMediaQuery(mql: MediaQueryList, listener: () => void) {
+ if (typeof mql.addEventListener === 'function') {
+ mql.addEventListener('change', listener);
+ return () => mql.removeEventListener('change', listener);
+ }
+
+ const legacyMql = mql as MediaQueryListWithLegacyListeners;
+ legacyMql.addListener?.(listener);
+ return () => legacyMql.removeListener?.(listener);
+}
+
+/**
+ * Renders the hero's animated node graph only above the mobile breakpoint.
+ *
+ * The graph is a canvas animation with a continuous requestAnimationFrame loop,
+ * so on mobile we avoid mounting it entirely (rather than just hiding it with
+ * CSS) to keep the page lightweight on phones.
+ */
+export function HeroGraph() {
+ const [isDesktop, setIsDesktop] = useState(false);
+
+ useEffect(() => {
+ const mql = window.matchMedia(MOBILE_QUERY);
+ const update = () => setIsDesktop(!mql.matches);
+
+ update();
+ return subscribeToMediaQuery(mql, update);
+ }, []);
+
+ if (!isDesktop) {
+ return null;
+ }
+
+ return {caption}
+
+ );
+}
+
+export function HowItWorks() {
+ return (
+
+
+
+ Works with Every Agent
+
+
+ It's not a harness, and it's not a framework. Our PTY based driver can power any CLI agent or you
+ can drop in our SDK for your custom orchestrator.
+
+
+
+
+ {/* Apex zone = relay box (top) + connector (below). Wires and message
+ dots span the whole zone so a dot can travel up behind the relay
+ box and pop back out. */}
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/web/components/home/MessagingFeature.tsx b/web/components/home/MessagingFeature.tsx
new file mode 100644
index 00000000..ca20831b
--- /dev/null
+++ b/web/components/home/MessagingFeature.tsx
@@ -0,0 +1,32 @@
+import { ChannelMessagesPreview } from '../ChannelMessagesPreview';
+import { FadeIn } from '../FadeIn';
+import s from '../../app/landing.module.css';
+import { ScribbleUnderline } from './icons';
+
+export function MessagingFeature() {
+ return (
+
+
+
+
+
+
+ The
+
+
+ - Channels and messages to coordinate work in shared spaces.
+ - Threads and reactions to keep decisions attached to the right context.
+ - DMs and @mentions to route handoffs to the right agent.
+ - Searchable history so agents can recover decisions without asking humans.
+
+
+
+ );
+}
diff --git a/web/components/home/QuickStart.tsx b/web/components/home/QuickStart.tsx
new file mode 100644
index 00000000..e9372309
--- /dev/null
+++ b/web/components/home/QuickStart.tsx
@@ -0,0 +1,66 @@
+import Link from 'next/link';
+
+import { AGENT_TOOL_LABELS, AGENT_TOOLS, AgentToolLogo } from '../AgentToolLogos';
+import { AgentSetupPrompt, InstallCommand } from '../InstallCommand';
+import s from '../../app/landing.module.css';
+
+export function QuickStart() {
+ return (
+
+
+
+
+
+
+ Quick start
+
+
+
+ {AGENT_TOOLS.map((provider) => (
+
+
+ Human or agent, sometimes it's just easier to start building with stuff to figure out if
+ it's useful. Fortunately, we've made that really easy for both.
+
+
+
+
+
+
+ );
+}
diff --git a/web/components/home/Waitlist.tsx b/web/components/home/Waitlist.tsx
new file mode 100644
index 00000000..d60ba1cb
--- /dev/null
+++ b/web/components/home/Waitlist.tsx
@@ -0,0 +1,22 @@
+import { WaitlistForm } from '../WaitlistForm';
+import s from '../../app/landing.module.css';
+
+export function Waitlist() {
+ return (
+
+
+
+
+ Be the first to know
+
+
+ Join the waitlist for early access when we release new products.
+
+
+
+
+ );
+}
diff --git a/web/components/home/WorksWithEveryAgent.tsx b/web/components/home/WorksWithEveryAgent.tsx
new file mode 100644
index 00000000..339f921c
--- /dev/null
+++ b/web/components/home/WorksWithEveryAgent.tsx
@@ -0,0 +1,28 @@
+import { AGENT_TOOL_LABELS, AGENT_TOOLS, AgentToolLogo } from '../AgentToolLogos';
+import { FadeIn } from '../FadeIn';
+import s from '../../app/landing.module.css';
+
+export function WorksWithEveryAgent() {
+ return (
+
+
+
+ Works with every agent
+
+ It's not a harness, and it's not a framework. You can plug in directly with our first class
+ adapters or you can define your own.
+
+
+
+ {AGENT_TOOLS.map((provider) => (
+
+
+ or any other agent that you hook up
+
+
+ );
+}
diff --git a/web/components/home/icons.tsx b/web/components/home/icons.tsx
new file mode 100644
index 00000000..7c3893d1
--- /dev/null
+++ b/web/components/home/icons.tsx
@@ -0,0 +1,313 @@
+import s from '../../app/landing.module.css';
+
+/**
+ * Decorative and brand SVGs used across the landing page.
+ *
+ * These stay inline (rather than living in `/public/*.svg`) on purpose:
+ * the dividers and underline inherit their stroke from CSS via `currentColor`,
+ * and the hero/decorative marks sit above the fold where an extra network
+ * request would cause a visible flash. Componentizing them keeps the markup
+ * DRY and the section components readable without an external request.
+ */
+
+export function GitHubIcon({ size = 18 }: { size?: number }) {
+ return (
+
+ );
+}
+
+/** Self-host / monitor glyph for the deploy cards. */
+export function MonitorIcon() {
+ return (
+
+ );
+}
+
+/** Hosted-cloud glyph for the deploy cards. */
+export function CloudIcon() {
+ return (
+
+ );
+}
+
+export function OpenClawLogo({ className }: { className: string }) {
+ return (
+
+ );
+}
+
+/** Official two-tone Python mark for the custom-agent bindings card. */
+export function PythonLogo({ className }: { className: string }) {
+ return (
+
+ );
+}
+
+/** TypeScript mark — blue rounded tile with the canonical "TS" lockup. */
+export function TypeScriptLogo({ className }: { className: string }) {
+ return (
+
+ );
+}
+
+/** Hand-drawn underline that sits under a single highlighted word in a heading. */
+export function ScribbleUnderline() {
+ return (
+
+ );
+}
+
+/**
+ * Full-bleed wavy line that separates landing sections.
+ * `feature` is the thin two-stroke rule between feature blocks; `capability`
+ * is the taller three-stroke band that opens the context-capabilities group.
+ */
+export function WaveDivider({
+ variant,
+ className,
+}: {
+ variant: 'feature' | 'capability' | 'a2a';
+ /** Extra class merged onto the wrapper — used to reposition via grid `order`. */
+ className?: string;
+}) {
+ if (variant === 'a2a') {
+ // A livelier take on the feature wave: a gradient strand that runs blue →
+ // pear-green → light-blue, a soft glow, an extra ghost strand, and a gentle
+ // drift (see `.a2aSeparatorWaves` in landing.module.css). Tilts the opposite
+ // way from the plain separators so it reads as deliberately different.
+ return (
+
+ );
+ }
+
+ if (variant === 'capability') {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+/**
+ * Decorative communication-graph and contour backdrop behind the hero.
+ * Inline so it paints with the first server-rendered HTML — no extra request
+ * and no above-the-fold flash.
+ */
+export function HeroBackdrop() {
+ return (
+
+ );
+}
diff --git a/web/components/home/index.ts b/web/components/home/index.ts
new file mode 100644
index 00000000..f9fb2ebc
--- /dev/null
+++ b/web/components/home/index.ts
@@ -0,0 +1,12 @@
+export { Hero } from './Hero';
+export { HowItWorks } from './HowItWorks';
+export { MessagingFeature } from './MessagingFeature';
+export { WorksWithEveryAgent } from './WorksWithEveryAgent';
+export { DeliveryFeature } from './DeliveryFeature';
+export { ContextCapabilities } from './ContextCapabilities';
+export { AgentToolsFeature } from './AgentToolsFeature';
+export { A2AFeature } from './A2AFeature';
+export { Deploy } from './Deploy';
+export { QuickStart } from './QuickStart';
+export { Waitlist } from './Waitlist';
+export { WaveDivider } from './icons';
diff --git a/web/components/node-relay.module.css b/web/components/node-relay.module.css
new file mode 100644
index 00000000..63be58a0
--- /dev/null
+++ b/web/components/node-relay.module.css
@@ -0,0 +1,186 @@
+.container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ min-height: 420px;
+ background: transparent;
+ overflow: hidden;
+}
+
+.canvas {
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+}
+
+/* ══════════════════════════════════════
+ Terminal Card
+ ══════════════════════════════════════ */
+
+.card {
+ position: absolute;
+ z-index: 1;
+ width: 160px;
+ height: 88px;
+ padding: 0;
+ background: var(--agent-card-bg);
+ backdrop-filter: blur(10px);
+ border: 1px solid var(--agent-card-border);
+ border-radius: 8px;
+ overflow: hidden;
+ transition:
+ box-shadow 0.4s ease,
+ opacity 0.2s ease-out,
+ transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+ border-color 0.3s ease,
+ background 0.3s ease;
+}
+
+.cardActive {
+ border-color: var(--agent-card-border-active);
+}
+
+.cardHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 5px 8px;
+ background: var(--agent-card-header);
+ border-bottom: 1px solid var(--agent-card-border);
+ gap: 4px;
+ transition:
+ background 0.3s ease,
+ border-color 0.3s ease;
+}
+
+.cardIdentity {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.providerLogo {
+ width: 12px;
+ height: 12px;
+ flex-shrink: 0;
+}
+
+.cardName {
+ font-family: var(--font-geist-mono), monospace;
+ font-size: 0.62rem;
+ font-weight: 600;
+ letter-spacing: 0.02em;
+ color: var(--agent-card-title);
+ white-space: nowrap;
+ transition: color 0.3s ease;
+}
+
+.cardModel {
+ font-family: var(--font-geist-mono), monospace;
+ font-size: 0.5rem;
+ font-weight: 400;
+ letter-spacing: 0.02em;
+ color: var(--agent-card-muted);
+ white-space: nowrap;
+ transition: color 0.3s ease;
+}
+
+.cardStatus {
+ display: flex;
+ align-items: flex-start;
+ gap: 5px;
+ padding: 8px 8px 10px;
+ min-height: 36px;
+}
+
+.statusDot {
+ width: 4px;
+ height: 4px;
+ margin-top: 3px;
+ border-radius: 50%;
+ background: var(--agent-card-status);
+ flex-shrink: 0;
+ animation: statusPulse 1s ease-in-out infinite;
+ box-shadow: 0 0 4px var(--agent-card-glow);
+}
+
+@keyframes statusPulse {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.3;
+ }
+}
+
+.statusText {
+ font-family: var(--font-geist-mono), monospace;
+ font-size: 0.55rem;
+ font-weight: 400;
+ letter-spacing: 0.01em;
+ line-height: 1.4;
+ color: var(--agent-card-muted);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ transition: color 0.3s ease;
+}
+
+.statusActive {
+ color: var(--agent-card-title);
+}
+
+/* ── Responsive ── */
+
+@media (max-width: 1100px) {
+ .card {
+ width: 140px;
+ height: 78px;
+ }
+ .cardName {
+ font-size: 0.58rem;
+ }
+ .cardModel {
+ font-size: 0.46rem;
+ }
+ .statusText {
+ font-size: 0.5rem;
+ }
+}
+
+@media (max-width: 900px) {
+ .container {
+ min-height: 340px;
+ }
+ .card {
+ width: 110px;
+ height: 62px;
+ border-radius: 6px;
+ }
+ .providerLogo {
+ width: 10px;
+ height: 10px;
+ }
+ .cardName {
+ font-size: 0.54rem;
+ }
+ .cardModel {
+ font-size: 0.42rem;
+ }
+ .cardHeader {
+ padding: 4px 6px;
+ }
+ .cardStatus {
+ padding: 5px 6px 7px;
+ min-height: 28px;
+ }
+ .statusText {
+ font-size: 0.46rem;
+ }
+ .statusDot {
+ width: 3px;
+ height: 3px;
+ margin-top: 2px;
+ }
+}
diff --git a/web/components/sdk-code.module.css b/web/components/sdk-code.module.css
new file mode 100644
index 00000000..c5fc1d87
--- /dev/null
+++ b/web/components/sdk-code.module.css
@@ -0,0 +1,66 @@
+.codeBlock {
+ border-radius: 12px;
+ overflow: hidden;
+ background: var(--code-bg);
+ border: 1px solid var(--line);
+}
+
+.tabs {
+ display: flex;
+ gap: 0;
+ padding: 0 16px;
+ background: var(--nav-bg);
+ border-bottom: 1px solid var(--nav-border);
+}
+
+.tab {
+ padding: 10px 16px;
+ font-family: var(--font-geist-sans), sans-serif;
+ font-size: 0.82rem;
+ font-weight: 500;
+ color: var(--nav-fg);
+ opacity: 0.55;
+ background: none;
+ border: none;
+ border-bottom: 2px solid transparent;
+ cursor: pointer;
+ transition:
+ opacity 0.2s,
+ border-color 0.2s;
+}
+
+.tab:hover {
+ opacity: 0.8;
+}
+
+.tabActive {
+ opacity: 1;
+ border-bottom-color: var(--nav-fg);
+}
+
+.pre {
+ margin: 0;
+ padding: 24px;
+ overflow-x: auto;
+ font-family: var(--font-geist-mono), monospace;
+ font-size: 0.85rem;
+ line-height: 1.7;
+ color: var(--code-fg);
+ background: transparent;
+ border: none;
+ border-radius: 0;
+}
+
+/* Syntax — uses primary for keywords/types */
+.keyword {
+ color: var(--primary);
+}
+.string {
+ color: var(--syntax-string);
+}
+.type {
+ color: var(--primary);
+}
+.method {
+ color: var(--syntax-method);
+}
diff --git a/web/components/site-footer.module.css b/web/components/site-footer.module.css
new file mode 100644
index 00000000..25a21ba4
--- /dev/null
+++ b/web/components/site-footer.module.css
@@ -0,0 +1,145 @@
+.footer {
+ background: var(--footer-bg);
+ color: var(--footer-fg);
+ padding: 64px 40px 32px;
+ transition: background 0.3s ease;
+}
+
+.inner {
+ display: grid;
+ grid-template-columns: 1fr 3fr;
+ gap: 48px;
+ max-width: 1280px;
+ margin: 0 auto;
+ padding-bottom: 48px;
+ border-bottom: 1px solid var(--footer-line);
+}
+
+.brand {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ text-decoration: none;
+ color: var(--footer-fg);
+}
+
+.logo svg {
+ height: 22px;
+ width: auto;
+ color: var(--footer-fg);
+}
+
+.logo svg path,
+.logo svg rect {
+ fill: currentColor;
+}
+
+.tagline {
+ font-size: 0.88rem;
+ color: var(--footer-muted);
+ line-height: 1.5;
+ max-width: 28ch;
+ margin: 0;
+}
+
+.columns {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 32px;
+}
+
+.col {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.colTitle {
+ font-size: 0.72rem;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--footer-faint);
+ margin: 0 0 4px;
+}
+
+.link {
+ font-size: 0.88rem;
+ color: var(--footer-muted);
+ text-decoration: none;
+ transition: color 0.15s;
+}
+
+.link:hover {
+ color: var(--footer-fg);
+}
+
+.bottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 1280px;
+ margin: 0 auto;
+ padding-top: 24px;
+}
+
+.bottomMeta {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ flex-wrap: wrap;
+}
+
+.copy {
+ font-size: 0.78rem;
+ color: var(--footer-faint);
+ margin: 0;
+}
+
+.socials {
+ display: flex;
+ gap: 16px;
+}
+
+.social {
+ color: var(--footer-faint);
+ transition: color 0.15s;
+}
+
+.social:hover {
+ color: var(--footer-fg);
+}
+
+@media (max-width: 960px) {
+ .footer {
+ padding: 48px 24px 24px;
+ }
+
+ .inner {
+ grid-template-columns: 1fr;
+ gap: 36px;
+ }
+
+ .bottom {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 18px;
+ }
+
+ .bottomMeta {
+ width: 100%;
+ }
+}
+
+@media (max-width: 560px) {
+ .columns {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 28px 24px;
+ }
+}
diff --git a/web/components/site-nav.module.css b/web/components/site-nav.module.css
new file mode 100644
index 00000000..bc8c215e
--- /dev/null
+++ b/web/components/site-nav.module.css
@@ -0,0 +1,353 @@
+.navOuter {
+ position: sticky;
+ top: 12px;
+ z-index: 50;
+ padding: 0 24px;
+}
+
+.navBar {
+ max-width: 1280px;
+ margin: 0 auto;
+ background: var(--nav-solid-bg);
+ border: 1px solid var(--nav-border);
+ border-radius: 14px;
+ transition:
+ border-color 0.2s ease,
+ box-shadow 0.2s ease;
+ color: var(--nav-fg);
+ box-shadow:
+ 0 8px 24px var(--nav-shadow),
+ inset 0 1px 0 var(--nav-inset);
+}
+
+.navBarScrolled {
+ background: linear-gradient(
+ 135deg,
+ color-mix(in srgb, var(--nav-bg) 78%, transparent) 0%,
+ color-mix(in srgb, var(--nav-bg) 88%, transparent) 100%
+ );
+ backdrop-filter: blur(24px) saturate(2) brightness(1.05);
+ -webkit-backdrop-filter: blur(24px) saturate(2) brightness(1.05);
+ border-color: var(--nav-border);
+ box-shadow:
+ 0 10px 32px var(--nav-shadow),
+ inset 0 1px 0 var(--nav-inset);
+}
+
+.nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 24px;
+}
+
+.navCenter {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ max-width: 360px;
+ margin: 0 auto;
+}
+
+.navRight {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.logo {
+ color: var(--nav-fg);
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.logoIcon {
+ width: 34px;
+ height: 28px;
+ flex-shrink: 0;
+ color: var(--nav-logo-mark);
+}
+
+.logoWordmark {
+ height: 24px;
+ width: auto;
+ color: var(--nav-logo-wordmark);
+}
+
+.links {
+ display: flex;
+ align-items: center;
+ gap: 28px;
+ list-style: none;
+}
+
+.agentLink {
+ font-family: var(--font-geist-sans), sans-serif;
+ font-size: 0.72rem;
+ font-weight: 500;
+ color: inherit;
+ text-decoration: none;
+ opacity: 0.85;
+ padding: 5px 12px;
+ border: 1px solid var(--nav-border);
+ border-radius: 6px;
+ transition:
+ opacity 0.2s,
+ border-color 0.2s;
+}
+
+.agentLink:hover {
+ opacity: 1;
+ border-color: var(--nav-border-strong);
+}
+
+.link {
+ font-family: var(--font-geist-sans), sans-serif;
+ font-size: 0.78rem;
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: inherit;
+ text-decoration: none;
+ padding-bottom: 4px;
+ border-bottom: 2.5px solid transparent;
+ transition:
+ color 0.2s,
+ opacity 0.2s,
+ border-color 0.2s;
+ opacity: 1;
+}
+
+.link:hover {
+ color: var(--nav-link-hover);
+ border-bottom-color: currentColor;
+}
+
+@media (max-width: 960px) {
+ .navOuter {
+ padding: 0 10px;
+ top: 8px;
+ }
+
+ .navBar {
+ border-radius: 10px;
+ }
+
+ .nav {
+ padding: 8px 14px;
+ }
+
+ .logoIcon {
+ width: 32px;
+ height: 26px;
+ }
+
+ .logoWordmark {
+ height: 22px;
+ }
+
+ .links {
+ display: none;
+ }
+
+ .navCenter {
+ display: none;
+ }
+
+ .navRight {
+ display: none;
+ }
+}
+
+/* ── Hamburger (hidden on desktop, shown on mobile) ── */
+
+.hamburger {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ border: none;
+ background: transparent;
+ color: inherit;
+ cursor: pointer;
+ border-radius: 8px;
+ transition: background 0.15s;
+}
+
+.hamburger:hover {
+ background: var(--nav-surface);
+}
+
+@media (max-width: 960px) {
+ .hamburger {
+ display: flex;
+ }
+}
+
+/* ── Mobile menu dropdown ── */
+
+.mobileMenu {
+ display: flex;
+ flex-direction: column;
+ padding: 6px 14px 16px;
+ gap: 4px;
+ max-height: min(72vh, calc(100vh - 88px));
+ overflow-y: auto;
+ overscroll-behavior: contain;
+}
+
+.mobileLink {
+ display: block;
+ padding: 12px 14px;
+ border-radius: 8px;
+ font-size: 1.0625rem;
+ font-weight: 500;
+ color: inherit;
+ text-decoration: none;
+ opacity: 0.85;
+ transition:
+ background 0.15s,
+ opacity 0.15s;
+}
+
+.mobileLink:hover {
+ background: var(--nav-surface);
+ opacity: 1;
+}
+
+/* ── Product dropdown (desktop hover) ── */
+
+.productDropdown {
+ position: relative;
+}
+
+.productDropdown .link {
+ cursor: pointer;
+}
+
+.chevron {
+ display: inline-block;
+ transition: transform 0.2s ease;
+ vertical-align: middle;
+ margin-top: -1px;
+}
+
+.chevronOpen {
+ transform: rotate(180deg);
+}
+
+.productDropdown:hover .chevron {
+ transform: rotate(180deg);
+}
+
+.dropdownMenu {
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding-top: 10px;
+ z-index: 100;
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transition:
+ opacity 0.15s ease,
+ visibility 0.15s ease;
+}
+
+.productDropdown:hover .dropdownMenu {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+}
+
+.dropdownItem {
+ display: block;
+ padding: 10px 24px;
+ font-family: var(--font-geist-sans), sans-serif;
+ font-size: 0.78rem;
+ font-weight: 500;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: inherit;
+ text-decoration: none;
+ text-align: center;
+ white-space: nowrap;
+ background: var(--nav-solid-bg);
+ border: 1px solid var(--nav-border);
+ border-top: none;
+ transition: background 0.15s;
+ opacity: 1;
+}
+
+.dropdownMenu a:first-child {
+ border-top: 1px solid var(--nav-border);
+ border-radius: 8px 8px 0 0;
+}
+
+.dropdownMenu a:last-child {
+ border-radius: 0 0 8px 8px;
+}
+
+.dropdownItem:hover {
+ background: color-mix(in srgb, var(--nav-solid-bg) 88%, var(--primary) 12%);
+ opacity: 1;
+}
+
+/* ── Mobile product toggle ── */
+
+.mobileProductToggle {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ padding: 12px 14px;
+ border-radius: 8px;
+ font-size: 1.0625rem;
+ font-weight: 500;
+ color: inherit;
+ text-decoration: none;
+ opacity: 0.85;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ transition:
+ background 0.15s,
+ opacity 0.15s;
+ font-family: inherit;
+}
+
+.mobileProductToggle:hover {
+ background: var(--nav-surface);
+ opacity: 1;
+}
+
+.mobileProductItems {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding-left: 0;
+}
+
+.mobileProductItems .mobileLink {
+ font-size: 1.0625rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ text-align: center;
+ opacity: 1;
+ background: color-mix(in srgb, var(--nav-solid-bg) 96%, var(--nav-fg) 4%);
+}
+
+.mobileProductItems .mobileLink:hover {
+ background: color-mix(in srgb, var(--nav-solid-bg) 88%, var(--primary) 12%);
+ opacity: 1;
+}
diff --git a/web/components/ui/badge.tsx b/web/components/ui/badge.tsx
new file mode 100644
index 00000000..681f2339
--- /dev/null
+++ b/web/components/ui/badge.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const badgeVariants = cva(
+ 'inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium transition-colors',
+ {
+ variants: {
+ variant: {
+ default:
+ 'border-transparent bg-[color-mix(in_srgb,var(--primary)_12%,transparent)] text-[var(--primary)]',
+ secondary:
+ 'border-transparent bg-[color-mix(in_srgb,var(--fg)_8%,transparent)] text-[var(--fg-muted)]',
+ outline: 'border-[var(--line)] bg-transparent text-[var(--fg-muted)]',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ }
+);
+
+export interface BadgeProps
+ extends React.HTMLAttributes, VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return ;
+}
+
+export { Badge, badgeVariants };
diff --git a/web/components/ui/button.tsx b/web/components/ui/button.tsx
new file mode 100644
index 00000000..55a9ea1c
--- /dev/null
+++ b/web/components/ui/button.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold cursor-pointer transition-[transform,background-color,color,border-color] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 shrink-0',
+ {
+ variants: {
+ variant: {
+ default:
+ 'border border-transparent bg-[var(--primary-bg)] text-[var(--primary-fg)] hover:bg-[var(--btn-hover)] hover:-translate-y-px',
+ secondary:
+ 'border border-transparent bg-[var(--secondary-bg)] text-[var(--secondary-fg)] hover:bg-[var(--secondary-200)] hover:-translate-y-px',
+ outline: 'border border-[var(--line)] bg-[var(--bg)] text-[var(--primary)] hover:-translate-y-px',
+ inverted: 'border border-transparent bg-[var(--fg)] text-[var(--bg)] hover:-translate-y-px',
+ ghost: 'border border-transparent bg-transparent text-[var(--fg-muted)]',
+ destructive:
+ 'border border-transparent bg-[#FEE2E2] text-[#DC2626] hover:bg-[#FECACA] hover:-translate-y-px',
+ },
+ size: {
+ default: 'px-5 py-2.5',
+ sm: 'px-3.5 py-1.5 text-xs',
+ lg: 'px-6 py-3',
+ icon: 'size-10 rounded-none p-0',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ }
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes, VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button';
+ return >(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef>(
+ ({ className, ...props }, ref) =>
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/web/components/ui/input.tsx b/web/components/ui/input.tsx
new file mode 100644
index 00000000..744928c5
--- /dev/null
+++ b/web/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Input = React.forwardRef>(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/web/components/waitlist.module.css b/web/components/waitlist.module.css
new file mode 100644
index 00000000..6c3881c1
--- /dev/null
+++ b/web/components/waitlist.module.css
@@ -0,0 +1,150 @@
+.form {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 0;
+ max-width: 520px;
+ margin: 0 auto;
+ background: var(--card-bg);
+ border: 1px solid var(--line);
+ border-radius: 100px;
+ padding: 5px 5px 5px 24px;
+ transition:
+ border-color 0.2s,
+ box-shadow 0.2s;
+}
+
+.form:focus-within {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
+}
+
+.input {
+ flex: 1;
+ min-width: 0;
+ border: none;
+ background: transparent;
+ color: var(--fg);
+ font-family: var(--font-geist-sans), sans-serif;
+ font-size: 0.92rem;
+ outline: none;
+ padding: 10px 0;
+}
+
+.input::placeholder {
+ color: var(--fg-faint);
+}
+
+.button {
+ flex-shrink: 0;
+ padding: 10px 24px;
+ background: #2d6a9c;
+ color: var(--primary-fg);
+ border: 1.5px solid #234969;
+ border-radius: 100px;
+ font-family: var(--font-geist-sans), sans-serif;
+ font-size: 0.85rem;
+ font-weight: 600;
+ letter-spacing: 0.01em;
+ cursor: pointer;
+ box-shadow: none;
+ transition:
+ background 0.2s,
+ border-color 0.2s,
+ transform 0.15s,
+ box-shadow 0.2s;
+ white-space: nowrap;
+}
+
+.button:hover:not(:disabled) {
+ background: #4a90c2;
+ border-color: #234969;
+ transform: translateY(-1px);
+ box-shadow: none;
+}
+
+.button:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.successCard {
+ max-width: 520px;
+ margin: 0 auto;
+ padding: 32px 28px;
+ border-radius: 16px;
+ border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
+ background: color-mix(in srgb, var(--primary) 5%, transparent);
+ text-align: center;
+ animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes popIn {
+ from {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+.successIcon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background: color-mix(in srgb, var(--primary) 10%, transparent);
+ color: var(--primary);
+ margin: 0 auto 16px;
+}
+
+.successTitle {
+ font-family: var(--font-heading), sans-serif;
+ font-size: 1.2rem;
+ font-weight: 700;
+ color: var(--primary);
+ margin: 0 0 8px;
+}
+
+.successText {
+ font-size: 0.9rem;
+ line-height: 1.6;
+ color: var(--fg-muted);
+ margin: 0;
+}
+
+.successText strong {
+ color: var(--fg);
+ font-weight: 600;
+}
+
+.error {
+ position: absolute;
+ bottom: -28px;
+ left: 24px;
+ font-size: 0.78rem;
+ color: #c44;
+ margin: 0;
+}
+
+@media (max-width: 500px) {
+ .form {
+ flex-direction: column;
+ border-radius: 16px;
+ padding: 12px;
+ gap: 8px;
+ }
+
+ .input {
+ width: 100%;
+ text-align: center;
+ }
+
+ .button {
+ width: 100%;
+ }
+}
diff --git a/web/content/agent-relay/SKILL.md b/web/content/agent-relay/SKILL.md
new file mode 100644
index 00000000..bdd5e968
--- /dev/null
+++ b/web/content/agent-relay/SKILL.md
@@ -0,0 +1,147 @@
+---
+name: agent-relay-team-onboarding
+description: Use when a human or lead agent needs one plain handoff for starting an Agent Relay workspace, choosing the right Relay skill, and telling spawned agents how to communicate.
+---
+
+# Agent Relay Team Onboarding
+
+Use this skill when someone asks how to get agents onto Agent Relay, how a lead should start a workspace, or which Relay skill to give to a worker.
+
+The default handoff URL is:
+
+```text
+https://agentrelay.com/skill
+```
+
+Give that URL to a human driver, a lead agent, or a newly spawned agent when you want them to orient themselves without a long custom prompt.
+
+## Choose the Right Skill
+
+### Human driver or lead orchestrator
+
+Use **orchestrating-agent-relay** when the agent is responsible for starting Relay and managing other agents from the outside.
+
+Source:
+
+```text
+https://github.com/AgentWorkforce/skills/blob/main/skills/orchestrating-agent-relay/SKILL.md
+```
+
+Use this role when the agent should:
+
+- start the broker with `agent-relay local up`
+- create or reuse a workspace
+- spawn workers
+- send follow-up instructions through local attach or registered Relay messages
+- read terminal output, logs, and lifecycle state
+- release workers when the run is accepted
+
+Important distinction: the orchestrator is not usually a registered Agent Relay
+participant. It should use the `agent-relay local ...` CLI for starting,
+spawning, listing, tailing, attaching, and releasing local workers. If it wants
+to send Relay DMs through the message CLI, it must use a registered token.
+
+### Spawned or registered participant
+
+Use **using-agent-relay** when the agent is already on the relay as a registered participant.
+
+Source:
+
+```text
+https://github.com/AgentWorkforce/skills/blob/main/skills/using-agent-relay/SKILL.md
+```
+
+Use this role when the agent should:
+
+- ACK tasks over Relay
+- send DMs to other agents
+- post in channels
+- reply in threads
+- check its inbox
+- coordinate peer-to-peer with MCP tools
+
+Registered participants should use the current flat Agent Relay MCP tools, such
+as `send_dm`, `post_message`, `reply_to_thread`, `check_inbox`, `list_agents`,
+and `join_channel`.
+
+## Quick Start for a Human Driver
+
+1. Start Relay from the project root:
+
+ ```bash
+ agent-relay local up --verbose
+ agent-relay local status --wait-for 10
+ ```
+
+2. Spawn a lead or worker:
+
+ ```bash
+ agent-relay local agent spawn claude --name Lead --task "Use https://agentrelay.com/skill. Start the workspace, coordinate workers, and report progress."
+ ```
+
+3. Watch output from the lead:
+
+ ```bash
+ agent-relay local tail --agent Lead
+ ```
+
+4. Send follow-up instructions through an interactive attach:
+
+ ```bash
+ agent-relay local agent attach Lead --mode drive
+ ```
+
+5. List and inspect workers:
+
+ ```bash
+ agent-relay local agent list
+ agent-relay local tail --agent Lead
+ ```
+
+## Prompt for a Lead Agent
+
+```text
+Use https://agentrelay.com/skill as your Agent Relay onboarding reference.
+
+You are the orchestrator. Use the orchestrating-agent-relay role:
+- start or verify the relay broker
+- spawn the workers needed for the task
+- tell each worker to use the using-agent-relay role
+- read worker output with agent-relay local tail --agent
+- monitor liveness with agent-relay local agent list
+- send follow-up instructions with agent-relay local agent attach --mode drive
+- keep workers alive through review/fix loops
+- release workers only after final acceptance
+
+Workers should ACK when they receive work, report DONE when complete, and stay alive for review findings until you release them.
+```
+
+## Prompt for a Worker Agent
+
+```text
+Use https://agentrelay.com/skill as your Agent Relay onboarding reference.
+
+You are a registered Agent Relay participant. Use the using-agent-relay role:
+- ACK the task immediately over Relay
+- use flat Agent Relay MCP tools for DMs, channel posts, replies, inbox checks, and agent lists
+- post concise progress updates when useful
+- report DONE with evidence when the task is complete
+- do not remove or release yourself; stay available for review findings
+```
+
+## Common Failure Mode
+
+If a tool says:
+
+```text
+Not registered. Call agent.register first.
+```
+
+You are probably acting as the outside orchestrator. Use `agent-relay` CLI commands instead of participant MCP tools, or register yourself before using participant-only MCP tools.
+
+## Canonical Links
+
+- Default hosted handoff: `https://agentrelay.com/skill`
+- Raw markdown handoff: `https://agentrelay.com/skill.md`
+- Orchestrator skill: `https://github.com/AgentWorkforce/skills/blob/main/skills/orchestrating-agent-relay/SKILL.md`
+- Participant skill: `https://github.com/AgentWorkforce/skills/blob/main/skills/using-agent-relay/SKILL.md`
diff --git a/web/content/blog/go-to-bed-wake-up-to-a-finished-product.mdx b/web/content/blog/go-to-bed-wake-up-to-a-finished-product.mdx
new file mode 100644
index 00000000..9d556b15
--- /dev/null
+++ b/web/content/blog/go-to-bed-wake-up-to-a-finished-product.mdx
@@ -0,0 +1,97 @@
+---
+title: 'Go to Bed, Wake Up to a Finished Product'
+description: "Agent-to-agent communication is weird, fascinating, and potentially revolutionary. Here's how we built a system where agents work autonomously while we sleep."
+date: '2026-02-01'
+author: 'Khaliq Gant'
+category: 'Vision'
+tags:
+ - Autonomous development
+ - Agent communication
+ - Product vision
+---
+
+_How agent-to-agent communication is changing autonomous development_
+
+The clear and obvious takeaway from [OpenClaw](https://openclaw.ai/) (Moltbot) and [Moltbook](https://www.moltbook.com/) is that agent-to-agent communication is "first of all weird and fascinating, but the potential this unlocks is also unprecedented and potentially revolutionary."
+
+On December 16th, we started a project where we wanted to get two Claude agents to play tic-tac-toe against each other. We first dug into Agent Mail and [made a proof of concept](https://github.com/Dicklesworthstone/mcp_agent_mail/pull/33) there, but quickly realized the limitations of a pull-based methodology. We kept digging and quickly realized the only way to get an agent to autonomously interact with other agents is a push-based method that delivers messages directly to their input. So was born [Agent Relay](https://github.com/AgentWorkforce/relay).
+
+## Ok...I'm intrigued, go on...
+
+"Agent-to-agent communication across any CLI tool (Codex, Claude, Gemini, OpenCode, Droid, etc.) is possible **right now** for any task." This can be done via an easy-to-use SDK or the relay-dashboard where you can see messages across agents, chat, spawn and release agents as needed.
+
+At the base level, Agent Relay is a protocol which makes it easy and reliable to stage CLI-agnostic agent-to-agent communication. The tools built on top of that protocol are the [relay-dashboard](https://github.com/AgentWorkforce/relay-dashboard/) and [relay-tui](https://github.com/AgentWorkforce/relay-tui) -- but could be relay-slack, relay-discord -- you name it!
+
+"**Agents are creative, efficient, sometimes lazy and cut corners, chatty, and but mostly it is clear that they work quite effectively when given roles and clear responsibilities.**"
+
+I kept finding myself as the clear bottleneck when working on projects, so removing myself and replacing with an agent is a huge accelerator. I found myself spending more time planning and producing detailed specs. I'd hand that to a "Lead" agent, ask them to review it, staff a team accordingly, and just let me know of any blockers.
+
+Then I would [go to bed](https://x.com/khaliqgant/status/2008325804741071079) and wake up to a finished product.
+
+## Why Not Just Sub-Agents?
+
+Using actual agent instances is a more powerful abstraction. Your agents can create sub-agents, giving the agent much more power. When giving a sub-agent a task too big or complex, it'll often hit compaction (context window limits) and just stop -- which completely breaks the autonomous workflow we're looking for.
+
+## How Do I Use This?
+
+There are a few ways to use Relay:
+
+### For Developers
+
+**1.** Start a relay server and use the dashboard to spawn and chat with agents:
+
+```bash
+npm install -g agent-relay
+agent-relay up --dashboard
+```
+
+**2.** Start a `claude` | `codex` etc session and tell it to install and start agent-relay by following the instructions here:
+
+```bash
+$ claude
+
+> Install and configure agent-relay by following the instructions here:
+ curl -s https://raw.githubusercontent.com/AgentWorkforce/relay/main/docs/guide/agent-setup.md
+```
+
+The agent will read the setup guide and start a relay session, ready to coordinate with other agents.
+
+### For Library Developers
+
+Use our SDK to enable agent-to-agent communication in your app:
+
+```bash
+# Install agent relay and start the daemon
+npm install -g agent-relay
+agent-relay up
+
+# In your project
+npm install agent-relay
+```
+
+```javascript
+import { RelayClient } from 'agent-relay';
+
+const client = new RelayClient({ name: 'MyApp' });
+await client.connect();
+
+// Spawn a worker agent
+await client.spawn({
+ name: 'Worker',
+ cli: 'claude',
+ task: 'Wait for instructions',
+});
+
+// Send it a message
+await client.send('Worker', 'Hello from my app');
+```
+
+Check out our [docs](/docs) for more info.
+
+## What's Next
+
+We're super excited for what's to come. [Agent Relay Cloud](https://agentrelay.com/) allows you, via GitHub login, to link your repository to your own private workspace server. Using your Claude, Codex, Gemini, or Cursor login, you can spawn agents and have them work 24/7 against your repo using the dashboard.
+
+You and your teammates who have access to the repository can interact with agents, giving instructions in different topic-based channels to help organize agent work. You can have agents review pull requests, work on documentation -- all with authenticated access to your GitHub repo.
+
+This is just the beginning. GitHub is the first context we've unlocked. This will be extended to other integrations like Notion, Slack, Outlook, etc., so agents can operate 24/7 and accelerate your workflows.
diff --git a/web/content/blog/humans-and-agents-all-want-the-same-thing-and-its-disgusting.mdx b/web/content/blog/humans-and-agents-all-want-the-same-thing-and-its-disgusting.mdx
new file mode 100644
index 00000000..aaba4dbe
--- /dev/null
+++ b/web/content/blog/humans-and-agents-all-want-the-same-thing-and-its-disgusting.mdx
@@ -0,0 +1,135 @@
+---
+title: 'Humans and Agents all want the same thing and it’s disgusting'
+description: 'Cognitive science, communication theory, and software teams all point to the same conclusion: agents need what humans need — clear context, defined constraints, and real-time feedback loops.'
+date: '2026-02-13'
+author: 'Will Washburn'
+category: 'Vision'
+tags:
+ - Coordination
+ - Communication
+ - Multi-agent systems
+---
+
+One of the most durable patterns in software teams is that a good manager can only keep so many threads in their head at once. At some point, the number of people, dependencies, decisions, and feedback loops becomes too much for one person to route cleanly.
+
+That same pattern is showing up again with coding agents. Not because agents are human, and not because they need to be anthropomorphized, but because the underlying coordination problem is the same. If the work depends on context, constraints, and rapid feedback, then scale breaks down in familiar ways.
+
+This is the part I find both obvious and a little disgusting: humans and agents seem to want the same thing. They perform best when the goal is clear, the boundaries are explicit, and the system around them makes the right context easy to access.
+
+Cognitive science explains why. Humans can actively hold only about four chunks of information in working memory at once (Cowan, 2001). A manager with five engineers isn’t just tracking five humans. They’re tracking five skill profiles, five motivation states, cross-dependencies between them, roadmap constraints, business pressure, and technical risk. That’s a lot of context switching. And research on decision fatigue (Danziger et al., 2011) shows that as decision volume rises, decision quality drops.
+
+Communication theory says the same thing from another angle. As Fred Brooks pointed out in _The Mythical Man-Month_, coordination paths grow roughly with n². Each additional person doesn’t just add one new relationship, they add many.
+
+At around five direct reports, maintaining high-fidelity context routing becomes extremely difficult. So in the human world, the best teams have structures that reflect this.
+
+## Pair programming is where 2+2=5
+
+No plan survives first contact with reality.
+
+Architecture diagrams look clean. Tickets look clear. Roadmaps feel confident. Then execution starts, and the edge cases show up. Assumptions break. Constraints you didn’t know existed suddenly matter.
+
+Pair programming shortens the distance between plan and reality.
+
+If management is context routing at the team level, pairing is context routing at the keystroke level. One editor. Two brains. A live feedback loop while the work is actually happening.
+
+When it works, it feels unfair. Bad assumptions get challenged immediately. Edge cases surface before they escape into production. Tradeoffs get debated while they’re still cheap to change. It’s real time feedback within a set of boundaries that collapses feedback loops and increases context density during execution.
+
+I strongly believe pair programming improves software quality, but it is not free. I mean at a simple level it is at least twice as expensive, right? It also requires two people to be motivated, online, and “in the zone” at the same time. It’s hairy and inconsistent.
+
+## Is Claude on the team now? Or is it a tool?
+
+Of course the whole world has changed in the last year, six months, two weeks, so most of what I’m saying feels a bit… dated. But is it?
+
+The best software teams have adopted coding agents. Or at least experimented. But how and where should they fit in the process? Is Claude a teammate? Is it a simple tool not to be anthropomorphized?
+
+I’ve seen a lot of influencers frame this as engineers getting promoted to managers and they just need to “manage their AI team” now. It’s a nice analogy. Makes you feel in control. We’re all the boss now! But I’m not so sure that’s the right mental model.
+
+## The “new” world
+
+I recently worked with a team trying to adapt to AI-native development. You probably recognize the symptoms:
+
+Code reviews feel impossible to keep up with. “Slop” creeps into the codebase. Velocity is up, but confidence is down. Expectations have skyrocketed. Fear is lurking in the background. Anxiety dominates the vibes.
+
+The old processes feel… insufficient.
+
+So we went back to first principles and asked a simple question: When you introduce coding agents, what inputs do you actually need to get them to build software?
+
+After long sessions and deep discussions, the answer was almost boring.
+
+It’s pretty much what it’s always been. You still just need clearly defined requirements.
+
+## Agents Want What Humans Want
+
+If you strip away the hype, agents don’t want magic prompts. They want context.
+
+Look at what consistently predicts high-performing human teams. Google’s Project Aristotle found that clarity of goals was a stronger predictor of performance than raw talent. People perform best when they understand the objective, the constraints, the boundaries of their authority, and how their work connects to the system around them.
+
+Agents are no different.
+
+They need clear goals, explicit constraints, access to relevant system state, and feedback loops.
+
+Without those, they hallucinate. Overreach. Or produce technically correct but strategically useless output.
+
+We keep obsessing over bigger context windows and orchestration layers. But giving an agent 200k tokens isn’t the same thing as giving it the right information. Just like giving a human a 200-page PRD isn’t clarity.
+
+Humans and agents both make better decisions when the decision surface is bounded, the relevant context is preloaded, and they have the authority to make decisions. Talent helps. Model quality helps. But neither compensates for missing context.
+
+And if software development is a system for producing good decisions, then agents just plug into the same system.
+
+## How do we give agents the right context?
+
+The real question is: how do we provide agents with the right context to do their work effectively?
+
+The answer may not be glamorous, but it’s at least familiar. We organize them much like we do people. Some focus on the details of implementation. Others focus on defining the problem, setting direction, and establishing guardrails.
+
+In other words, the structure isn’t new. What matters is clear communication of goals, constraints, and expectations so agents can collaborate, iterate, and stay aligned.
+
+And what role should humans play in this flow? Many people have been building orchestrators where the human is at the center of the loop. I think they are quickly finding themselves as the bottleneck.
+
+The truth is there is no need for a human to coordinate if the context waterfall is systematically sound. Humans are needed to define broad intent and constraints, but the environment should facilitate the execution.
+
+## The missing protocol
+
+How would humans do that? Well, today we all work in Slack and Microsoft Teams. We have meetings to push and pull on ideas. We give feedback while we execute. We get a ton of value from rapidly discussing things.
+
+Agents should have that same ability.
+
+Agents need to be able to communicate in real time. Send messages, ask for help, provide context to each other about what they’re working on. It’s a missing core primitive.
+
+This is why we built Agent Relay.
+
+Agent Relay is a real-time messaging protocol for AI agents. It provides a dedicated rail for agents to share context and coordinate work as it happens. It’s agentic Slack, more or less.
+
+## Speed Changes Everything
+
+When agents can convey context to each other, magic truly starts to happen. You really don’t need all these opinionated orchestrators and you don’t need to reinvent the wheel.
+
+Building used to be the expensive part. You’d spend weeks debating something because implementation cost was high. You wanted to be sure.
+
+Now?
+
+You can generate five approaches before lunch. Throw three away. Merge one. Rewrite it tomorrow. Upfront validation matters way less.
+
+What matters? Boundaries. Constraints. Shared understanding of intent. When iteration is cheap, ambiguity becomes the bottleneck. And ambiguity is just missing context.
+
+So building becomes a real-time conversation with agents about what those constraints are. It’s the same as it’s always been, but the execution phase is going to zero. Feedback happens as the work happens. Humans don’t need to be the coordinators, agents can do it just fine.
+
+## Free your ego
+
+If you’re like me, this part stings a little. Humans just define intent and constraints?! That’s it?
+
+I will not try to tell you that your work is not going to change, because I believe it is. It’s going to change significantly. The sooner you accept that, the more leverage you’ll have inside it.
+
+But here’s what I actually believe:
+
+Your value as a knowledge worker has increased.
+
+When execution cost approaches zero, the bottleneck shifts to defining constraints and setting direction. Those decisions carry more weight than ever. The squishy human parts didn’t disappear at all; if anything, they’ve been highlighted. Your humanity is now more important. More rare in the overall system.
+
+We’re all going to explore the exact mechanics of how that happens, but software has always been a human-driven solution space. It will continue to be so.
+
+You still get to create something from nothing. You still define the shape of the system. You just don’t have to manually push every instruction through the machine. You are freed from the chains of the slow, cumbersome execution phase, albatrossed with deterministic, repetitive coordination problems. You are free to create literally anything you can imagine. You can make the world a better place, faster.
+
+Or, at least, that’s my take.
+
+If that excites you and you want to help shape how this new layer of coordination works we’re hiring. Email us at [hello@agentrelay.com](mailto:hello@agentrelay.com) and let’s talk.
diff --git a/web/content/blog/just-give-the-agent-files.mdx b/web/content/blog/just-give-the-agent-files.mdx
new file mode 100644
index 00000000..4f97c8d7
--- /dev/null
+++ b/web/content/blog/just-give-the-agent-files.mdx
@@ -0,0 +1,282 @@
+---
+title: 'Just Give the Agent Files'
+description: 'Most cloud agents wait to be asked. Relayfile changes that: connect your providers once and the agent wakes up automatically when something in the world changes.'
+date: '2026-05-13'
+author: 'Khaliq Gant'
+category: 'Engineering'
+tags:
+ - Relayfile
+ - Proactive agents
+ - MCP
+ - Integrations
+---
+
+The thing I keep running into with cloud agents is that they're really good at answering questions and really bad at knowing when to ask themselves one.
+
+Most agents today are reactive. You call them, they respond, they go dormant. This is perfectly fine for a coding assistant sitting at your keyboard. When I'm feeding my daughter with one hand, and flipping pancakes with the other, I want my agent monitoring my stack (not the pancakes) so I don't have to be running back to my computer every 10 minutes accepting permission prompts or telling the agent to look at my ~~honeycomb~~ traces.
+
+When I wake up at three in the morning and have trouble going back to sleep the thing that I can't get out of my head is how to make my agents [proactive](https://proactiveagents.dev/posts/three-primitives/). (Do I have an obsession problem? Maybeee 🤫) How can the agent know something happened in the outside world without me having to tell it?
+
+## MCP - Mo' Context Problems
+
+MCP has established itself as the industry standard and it can be fantastic when used correctly. But I've found that when you stack many MCP tools, the agent starts every task carrying a catalog it may mostly never use. Anthropic has [written about](https://www.anthropic.com/engineering/advanced-tool-use) tool definitions consuming tens of thousands of tokens before any real work begins and how they try to counteract this. [Composio](https://composio.dev/) has written about the same problem on their blog and their efforts to improve the situation.
+
+That's the context bloat problem. There's a related but different one: MCP tools let the agent pull information. They're not how the outside world pushes a signal to the agent. For that you need webhooks, and webhooks are non trivial.
+
+To make a single cloud agent proactive against Linear you need a public endpoint, HMAC verification, a queue, deduplication logic, retry handling, and registration with Linear's API. Then repeat for GitHub, Jira, and Slack, each with a different signature format and retry behavior. A team can spend four to six weeks building this before they write a line of actual agent logic.
+
+## Clock 🕕, Listener 📻, Inbox 📥
+
+The way we think about making agents proactive is three primitives:
+
+- **Clock** wakes the agent up on a schedule -> we map this to [relaycron](https://github.com/AgentWorkforce/relaycron)
+- **Listener** wakes the agent up when something in the world changes -> we map this to [relayfile](https://github.com/AgentWorkforce/relayfile)
+- **Inbox** wakes the agent up when someone has something to say -> we map this to [relaycast](https://github.com/AgentWorkforce/relaycast)
+
+So, allow me to introduce [relayfile](https://agentrelay.com/file). You connect Linear, GitHub, Notion, Slack — whichever providers you care about — once. From then on, the agent code is just:
+
+```typescript
+import { RelayFileClient, RelayFileSync } from '@relayfile/sdk';
+
+const client = new RelayFileClient({
+ token: process.env.RELAYFILE_TOKEN!,
+});
+
+const sync = new RelayFileSync({
+ client,
+ workspaceId: 'ws_acme_ops', // already wired to Linear, GitHub, Notion, ...
+});
+
+sync.on('event', async (event) => {
+ // event.path tells you which provider's record changed:
+ // e.g. '/linear/issues/AGE-16__...json' or '/github/repos/.../pulls/412.json'
+ await agent.handle(event);
+});
+
+sync.start();
+```
+
+No endpoint to host. No signature verification. No queue. When a Linear issue moves to blocked or a GitHub PR gets reviewed, the agent gets a normalized filesystem event pointing at the canonical file:
+
+```typescript
+{
+ eventId: 'evt_01HQ8K7M2YV3R0XW9F4ZB6T2QA',
+ type: 'file.updated',
+ path: '/linear/issues/AGE-16__87389837-62b1-4e1a-a237-59218bab2974.json',
+ revision: 'rev_42',
+ provider: 'linear',
+ origin: 'provider_sync',
+ timestamp: '2026-05-13T14:32:01Z',
+}
+```
+
+The event tells the agent _what_ changed and _where_. It then reads the file at `path` to see the current state — and, if it cares about the diff, the prior revision is one `client.readFile` away. The rest? _Forget about it_ (said like a New Yorker)
+
+## The workspace is also just files
+
+The change events are useful on their own but the full workspace is also navigable. Every connected provider is mounted at a well-known path and the agent can explore, search, and write back using tools it already knows.
+
+```bash
+$ ls $MOUNT
+LAYOUT.md notion/ linear/ slack/ github/ confluence/
+```
+
+`LAYOUT.md` at the root (and at each provider root) describes the shape of the workspace. That's where the agent should start.
+
+Notion pages live under `notion/pages/`. Canonical records are keyed by UUID with a `by-title/` subtree for human-readable lookup:
+
+```bash
+# Find a page by title
+$ jq -r '.id' $MOUNT/notion/pages/by-title/just-give-the-agent-files__c24642bb.json
+3566800c-1c90-8035-a491-cdc3c24642bb
+
+# Read the body
+$ cat $MOUNT/notion/pages/3566800c-1c90-8035-a491-cdc3c24642bb/content.md
+```
+
+Linear issues use `__` — ticket number first so the listing is immediately scannable. [Mirage](https://github.com/strukto-ai/mirage) converged on a similar filename shape in their mount, and their broader "mount everything as one tree" framing is the closest thing in this space to what we're doing:
+
+```bash
+$ ls $MOUNT/linear/issues/
+AGE-9__2bb2c00f-ee93-4c73-a793-df5b725d9a1a.json
+AGE-10__8c313d70-9800-4539-820f-96a481c09ce0.json
+AGE-16__87389837-62b1-4e1a-a237-59218bab2974.json
+
+$ jq '.payload | {title, state_name, assignee_name}' \
+ $MOUNT/linear/issues/AGE-16__87389837-62b1-4e1a-a237-59218bab2974.json
+```
+
+## Writebacks are files too
+
+Reads are useful. Writes are where it gets interesting. The agent doesn't call a provider API to take action — it writes a file. Relayfile handles the provider auth, payload validation, retries, and audit trail on the other side.
+
+To create a GitHub issue, the agent drops a file:
+
+```bash
+$ cat > $MOUNT/github/repos/AgentWorkforce/relayfile-adapters/issues/relayfile-writeback-test-20260513T121247Z.json < --follow
+agent-relay local sync
+```
+
+As long as you're ok leaving your laptop open to run for awhile, this is great. But if you want to run it on a remote machine (and not cook an egg on your laptop spinning up a bazillion agents), you can use the Agent Relay cloud.
+
+```bash
+agent-relay cloud run workflows/my-workflow.ts --sync-code
+agent-relay cloud logs --follow
+agent-relay cloud sync
+```
+
+
+
+The most important lesson:
+Pick the topology first, then agents, then gates. A workflow that starts with "spawn five agents" usually has the wrong center of gravity.
+
+## 1. Classify And Act
+
+Use this when one agent should route the task to the right specialist. Good for support queues, issue triage, model routing, and mixed backlog grooming.
+
+Relay shape: `handoff` or a live classifier in a channel. If you want deterministic workflow steps, let non-selected specialists return `SKIP`.
+
+```ts
+import { workflow } from '@relayflows/core';
+await workflow('classify-and-act')
+ .pattern('handoff')
+ .agent('router', { cli: 'claude', role: 'classifier' })
+ .agent('bugfix', { cli: 'codex', role: 'bugfix specialist' })
+ .agent('docs', { cli: 'claude', role: 'docs specialist' })
+ .agent('research', { cli: 'gemini', role: 'research specialist' })
+ .step('classify', {
+ agent: 'router',
+ task: 'Classify {{task}} as bugfix, docs, or research. Output ROUTE: and a short brief.',
+ })
+ .step('bugfix', {
+ agent: 'bugfix',
+ dependsOn: ['classify'],
+ task: 'If ROUTE:bugfix is absent, output SKIP. Otherwise execute the brief:\n{{steps.classify.output}}',
+ })
+ .step('docs', {
+ agent: 'docs',
+ dependsOn: ['classify'],
+ task: 'If ROUTE:docs is absent, output SKIP. Otherwise execute the brief:\n{{steps.classify.output}}',
+ })
+ .step('research', {
+ agent: 'research',
+ dependsOn: ['classify'],
+ task: 'If ROUTE:research is absent, output SKIP. Otherwise execute the brief:\n{{steps.classify.output}}',
+ })
+ .run();
+```
+
+## 2. Fanout And Synthesize
+
+Use this when the subtasks are independent and a lead can merge the outputs. Good for parallel reviews, research sweeps, claim checks, and subsystem audits.
+
+Relay shape: `fan-out`. Workers do not need to talk to each other; the synthesizer owns the final answer.
+
+```ts
+await workflow('fanout-and-synthesize')
+ .pattern('fan-out')
+ .agent('lead', { cli: 'claude', role: 'synthesizer' })
+ .agent('api', { cli: 'codex', role: 'worker', interactive: false })
+ .agent('web', { cli: 'codex', role: 'worker', interactive: false })
+ .agent('docs', { cli: 'claude', role: 'worker', interactive: false })
+ .step('api-review', { agent: 'api', task: 'Review API risks for {{task}}.' })
+ .step('web-review', { agent: 'web', task: 'Review frontend risks for {{task}}.' })
+ .step('docs-review', { agent: 'docs', task: 'Review docs and migration risks for {{task}}.' })
+ .step('synthesize', {
+ agent: 'lead',
+ dependsOn: ['api-review', 'web-review', 'docs-review'],
+ task: `Merge the findings into one plan.
+
+API:
+{{steps.api-review.output}}
+
+Web:
+{{steps.web-review.output}}
+
+Docs:
+{{steps.docs-review.output}}`,
+ })
+ .run();
+```
+
+## 3. Adversarial Verification
+
+Use this when "done" is expensive to trust. Good for security, billing, permissions, migrations, factual claims, and anything with hidden failure modes.
+
+Relay shape: `verifier` or `red-team`. The worker builds; verifiers attack the claim; the worker repairs.
+
+```ts
+await workflow('adversarial-verification')
+ .pattern('verifier')
+ .agent('worker', { cli: 'codex', role: 'implementer' })
+ .agent('security', { cli: 'claude', role: 'verifier' })
+ .agent('tests', { cli: 'codex', role: 'verifier' })
+ .agent('product', { cli: 'claude', role: 'verifier' })
+ .step('build', { agent: 'worker', task: 'Implement {{task}}. Output DONE only with evidence.' })
+ .step('security-check', {
+ agent: 'security',
+ dependsOn: ['build'],
+ task: 'Try to disprove DONE. Focus on auth, secrets, and abuse cases.',
+ })
+ .step('test-check', {
+ agent: 'tests',
+ dependsOn: ['build'],
+ task: 'Try to break the change with focused tests and repros.',
+ })
+ .step('product-check', {
+ agent: 'product',
+ dependsOn: ['build'],
+ task: 'Check whether the shipped behavior matches the user promise.',
+ })
+ .step('repair', {
+ agent: 'worker',
+ dependsOn: ['security-check', 'test-check', 'product-check'],
+ task: 'Fix valid findings and rerun proof commands before final DONE.',
+ })
+ .run();
+```
+
+## 4. Generate And Filter
+
+Use this when you want many candidates, not one careful answer. Good for names, test cases, design options, prompts, rules, and refactor approaches.
+
+Relay shape: parallel generators plus one filter. The filter needs a rubric and dedupe rule.
+
+```ts
+await workflow('generate-and-filter')
+ .pattern('fan-out')
+ .agent('gen-a', { cli: 'claude', role: 'generator' })
+ .agent('gen-b', { cli: 'codex', role: 'generator' })
+ .agent('gen-c', { cli: 'gemini', role: 'generator' })
+ .agent('filter', { cli: 'claude', role: 'rubric judge' })
+ .step('a', { agent: 'gen-a', task: 'Generate 5 candidate approaches for {{task}}.' })
+ .step('b', { agent: 'gen-b', task: 'Generate 5 candidate approaches for {{task}}.' })
+ .step('c', { agent: 'gen-c', task: 'Generate 5 candidate approaches for {{task}}.' })
+ .step('filter', {
+ agent: 'filter',
+ dependsOn: ['a', 'b', 'c'],
+ task: 'Dedupe, score against impact/effort/risk, and return the best 3 candidates.',
+ })
+ .run();
+```
+
+## 5. Tournament
+
+Use this when independent attempts can compete. Good for tricky algorithms, UX copy, data transforms, qualitative ranking, evals, and implementation alternatives.
+
+Relay shape: `competitive`. Attempts stay separate; judges compare pairwise; a final judge picks the winner.
+
+```ts
+await workflow('tournament')
+ .pattern('competitive')
+ .agent('attempt-a', { cli: 'codex', role: 'competitor' })
+ .agent('attempt-b', { cli: 'claude', role: 'competitor' })
+ .agent('attempt-c', { cli: 'gemini', role: 'competitor' })
+ .agent('judge', { cli: 'claude', role: 'judge' })
+ .step('a', { agent: 'attempt-a', task: 'Solve {{task}} independently. Include proof.' })
+ .step('b', { agent: 'attempt-b', task: 'Solve {{task}} independently. Include proof.' })
+ .step('c', { agent: 'attempt-c', task: 'Solve {{task}} independently. Include proof.' })
+ .step('final', {
+ agent: 'judge',
+ dependsOn: ['a', 'b', 'c'],
+ task: 'Compare the attempts pairwise. Pick one winner and explain the tradeoff.',
+ })
+ .run();
+```
+
+## 6. Loop Until Done
+
+Use this when the first answer is probably wrong and the amount of work is unknown. Good for implementation work, release checks, flaky tests, migration hardening, triage queues, and anything that needs deterministic acceptance.
+
+Relay shape: `review-loop` plus repairable gates. The loop is not "try harder"; it is build, verify, repair, verify again.
+
+```ts
+await workflow('loop-until-done')
+ .pattern('review-loop')
+ .repairable()
+ .agent('builder', { cli: 'codex', role: 'implementer', retries: 3 })
+ .agent('reviewer', { cli: 'claude', role: 'reviewer' })
+ .step('build', {
+ agent: 'builder',
+ task: 'Implement {{task}}. Add or update tests. Output DONE only after proof.',
+ })
+ .step('review', {
+ agent: 'reviewer',
+ dependsOn: ['build'],
+ task: 'Fresh-eyes review the actual files. Output NO_ISSUES_FOUND or concrete findings.',
+ })
+ .step('test', {
+ type: 'deterministic',
+ dependsOn: ['review'],
+ command: 'npm test',
+ captureOutput: true,
+ failOnError: false,
+ })
+ .step('repair', {
+ agent: 'builder',
+ dependsOn: ['test'],
+ task: 'If tests failed or review had findings, repair them and rerun the same proof:\n{{steps.test.output}}',
+ verification: { type: 'output_contains', value: 'DONE' },
+ })
+ .onError('retry', { maxRetries: 3 })
+ .run();
+```
+
+## Useful Compositions
+
+- **Migration:** fan out by module, adversarially verify each patch, then loop until tests pass.
+- **Deep research:** fan out source discovery, verify claims, synthesize a cited report.
+- **Root cause:** generate independent hypotheses from logs, code, and data; run verifier agents against each theory.
+- **Rule adherence:** one verifier per rule, then a filter to remove noisy or redundant findings.
+- **Triage at scale:** classify each item, quarantine untrusted inputs, and let only privileged agents act.
+- **Taste work:** generate many options, filter by rubric, then tournament the finalists.
+
+Need routing? Use classify-and-act. Need breadth? Use fanout-and-synthesize. Need trust? Use adversarial verification. Need options? Use generate-and-filter. Need best-of-N? Use tournament. Need completion evidence? Use loop-until-done.
+
+## When Not To Use A Relayflow
+
+Do not reach for a workflow just because it feels powerful. Most ordinary coding tasks do not need a panel of agents.
+
+Use a Relayflow when at least one is true:
+
+- The task benefits from parallel clean context windows.
+- The result needs adversarial review.
+- The work has an unknown stopping point.
+- The job is mostly classification, ranking, synthesis, or verification.
+- Different agent runtimes should own different roles.
+
+
+
+
+ If you found this playbook helpful, check out Agent Relay (aka the
+ engine powering these workflow patterns). Open source from day one.
+
+
+
+ 
+
+
diff --git a/web/content/blog/the-agent-centered-world-is-almost-here.mdx b/web/content/blog/the-agent-centered-world-is-almost-here.mdx
new file mode 100644
index 00000000..7d9c0c2b
--- /dev/null
+++ b/web/content/blog/the-agent-centered-world-is-almost-here.mdx
@@ -0,0 +1,95 @@
+---
+title: 'The agent-centered world is almost here'
+description: 'Agents are still underused as disposable sidecars. The next shift is persistent agent teams with communication, scoped trust, and evidence built into the workflow.'
+date: '2026-06-01'
+author: 'Will Washburn'
+category: 'Vision'
+tags:
+ - Agent-native software
+ - Coordination
+ - Multi-agent systems
+ - Product vision
+---
+
+The next phase of software will not be defined by a better autocomplete box.
+
+Autocomplete was the first useful interface because it fit inside the tools we already had. Chat was the next useful interface because it made the model feel direct and general. Both mattered. Both were also transitional.
+
+The problem is that we are still using agents in the shape of the old interfaces. Most products treat the agent like a disposable helper: summon it, ask for a thing, copy the output somewhere else, and repeat. That is useful, but it leaves most of the leverage on the floor.
+
+The more interesting world is the one where agents are not sitting at the edge of the workflow waiting for instructions. They are in the path of the work itself: watching for changes, asking for missing context, coordinating with other agents, and handing finished work back with evidence.
+
+That world is close enough now that we should stop treating it like science fiction.
+
+## From assistant-shaped to team-shaped
+
+Most AI products still assume the human is the only durable actor in the system. The agent is a session. It wakes up when asked, answers, then disappears.
+
+That model is useful, but it is not enough for serious work.
+
+Real work has memory, ownership, dependencies, and follow-through. A bug moves from report to reproduction to fix to review. A support thread turns into a product decision. A deployment starts as a plan, turns into a checklist, and then becomes a set of live signals that someone needs to watch.
+
+In an agent-centered system, the agent is not an ornament on top of that process. It is one of the things the process is designed to support. More importantly, it is rarely the only agent in the process.
+
+A single general agent with access to every tool is not the end state. It is a very powerful bottleneck. Serious work usually wants smaller roles, narrower authority, and clean handoffs. One agent can triage the issue. Another can reproduce it. Another can patch the code. Another can review the diff. Another can watch the deployment. The point is not to anthropomorphize them into a fake org chart. The point is to stop pretending one session should hold every context, every permission, and every responsibility at once.
+
+That means the system needs to make a few things natural:
+
+- Agents need persistent identity.
+- Agents need scoped access to the right context.
+- Agents need inboxes, not just prompts.
+- Agents need to coordinate with each other.
+- Agents need durable records of what they decided and why.
+
+None of this requires pretending agents are people. It requires admitting that useful agents are participants in a workflow.
+
+## The interface is becoming the wrong abstraction
+
+We keep asking which interface will win: chat, IDE, browser, terminal, canvas, or voice.
+
+The better question is what the agent can observe and affect.
+
+An agent that only sees a chat transcript is boxed into a narrow slice of reality. An agent that can see files, messages, events, reviews, deployments, and calendar constraints can do something closer to work. The interface still matters, but it stops being the center of the architecture.
+
+The center becomes the communication and context layer.
+
+That is why agent-to-agent communication feels so important. Once agents can exchange state, ask each other for review, split work, and leave durable handoffs, the human no longer has to be the router for every tiny dependency.
+
+The human still sets direction. The human still decides what matters. But the human should not have to copy status between five tools just to keep the work alive.
+
+This is the part the market is underestimating. The next jump is not just "agent can use tool." It is "agent can work with other agents, under different scopes, across a workflow that survives the original prompt." That is where agents stop feeling like clever interface features and start feeling like operational capacity.
+
+## The missing substrate
+
+The agent-centered world needs infrastructure that assumes agents are first-class actors:
+
+1. A messaging layer that supports channels, threads, DMs, reactions, and delivery guarantees for agents.
+2. A file and event layer that lets agents observe external systems without every team rebuilding webhooks.
+3. A scheduling layer that lets agents wake up when time itself is the trigger.
+4. A permission model that keeps authority explicit, revocable, and different for each role.
+5. A record of decisions, reviews, and handoffs that survives context windows.
+6. Evaluation loops that define what good work means for the task, not just whether the model produced plausible text.
+
+These are not flashy model demos. They are the rails that let model capability become operational capability.
+
+The reason this matters is simple: a smarter model does not automatically create a smarter organization. If the model cannot receive the right signal, reach the right context, talk to the right peer, act under the right authority, or prove what it did, the workflow still collapses back onto the human.
+
+There is a temptation to solve this by making one agent more powerful. Give it more context. Give it more tools. Give it longer memory. Give it access to everything. Sometimes that works for a demo. In production, it is usually the wrong direction.
+
+Power and trust are different things. An agent with all the context should not automatically have all the access. A reviewer should not need deployment credentials. A deployment watcher should not need permission to rewrite the product requirements. A support triage agent should not be able to mutate billing records because it happened to read a support thread.
+
+The near future is less about one agent becoming omnipotent and more about agents becoming composable. Teams of agents need shared protocols, but also different permissions, different tools, different memories, and different measures of success.
+
+## Almost here does not mean already solved
+
+There are still hard problems.
+
+Agents need better judgment about when to stop. They need stronger permission boundaries. They need reliable ways to expose uncertainty. They need review loops that catch plausible-but-wrong work before it reaches production. They need benchmarks that reflect messy runtime reality: delegated actions, changing context, insecure tools, latency, cost, and all the tradeoffs that appear once an agent is doing real work instead of completing a canned task.
+
+But the outline is visible now.
+
+The winning systems will not be the ones that make the prettiest chat window. They will be the ones that make agent teams easy to place inside real workflows without turning every team into an infrastructure company.
+
+That is the agent-centered world: not a world without humans, and not a world where agents magically do everything. It is a world where software is designed around work getting done by a mix of humans and agent teams, with the coordination layer treated as a product surface instead of an afterthought.
+
+We are almost there.
diff --git a/web/content/docs/7.1.1/agent-relay-mcp.mdx b/web/content/docs/7.1.1/agent-relay-mcp.mdx
new file mode 100644
index 00000000..969cd36b
--- /dev/null
+++ b/web/content/docs/7.1.1/agent-relay-mcp.mdx
@@ -0,0 +1,60 @@
+---
+title: 'Agent Relay MCP'
+description: 'Reference for the Agent Relay MCP stdio server and tools exposed to relay-aware agents.'
+---
+
+`agent-relay mcp` runs the Agent Relay MCP stdio server. Spawned agents receive it through launch-time MCP configuration, and local plugins can expose the same server inside an interactive agent session.
+
+The server provides Relaycast-backed messaging tools for workspace coordination. The `submit_result` tool appears only when the spawned task includes an Agent Relay structured result callback.
+
+## Tools
+
+| Tool | Description |
+| ---- | ----------- |
+| `create_workspace` | Create a new Relaycast workspace and store its API key in this MCP session. |
+| `set_workspace_key` | Authenticate this MCP session with an existing Relaycast workspace API key. |
+| `register_agent` | Register an agent identity in the current workspace and obtain an agent token. |
+| `list_agents` | List agents registered in the current workspace. |
+| `create_channel` | Create a new workspace channel. |
+| `list_channels` | List channels available in the workspace. |
+| `join_channel` | Join an existing channel. |
+| `leave_channel` | Leave a channel. |
+| `invite_to_channel` | Invite another agent to a channel. |
+| `set_channel_topic` | Update a channel topic. |
+| `archive_channel` | Archive a channel. |
+| `post_message` | Post a new message to a channel as the current agent. |
+| `list_messages` | Retrieve message history from a channel. |
+| `reply_to_thread` | Reply to an existing message thread. |
+| `get_message_thread` | Retrieve a message thread. |
+| `send_dm` | Send a private direct message to another agent. |
+| `list_dms` | List direct message conversations for the current agent. |
+| `send_group_dm` | Create a group DM and send the first message. |
+| `add_reaction` | Add an emoji reaction to a message. |
+| `remove_reaction` | Remove an emoji reaction from a message. |
+| `search_messages` | Search messages across the workspace. |
+| `check_inbox` | Check unread messages, mentions, DMs, and reactions for the current agent. |
+| `mark_message_read` | Mark a message as read for the current agent. |
+| `get_message_readers` | List agents who have read a message. |
+| `add_agent` | Ask Relaycast to spawn a worker agent for a task. |
+| `remove_agent` | Release a worker agent from active duty. |
+| `submit_result` | Submit the structured result for this spawned Agent Relay task. Call this when the requested work is complete and the result object is ready. |
+
+## Structured Results
+
+When a TypeScript spawn includes a `result` contract, the broker injects result callback environment into the agent's MCP server. The MCP server then exposes `submit_result`, posts the JSON payload back to the local broker, and the SDK routes it through `agent.waitForResult(...)`, per-spawn `result.onResult`, and `relay.addListener('agentResult', ...)`.
+
+See [Spawning an agent](/docs/spawning-an-agent#structured-results) for the SDK-side result contract.
+
+## Related Docs
+
+
+
+ Spawn agents and request structured JSON results.
+
+
+ Use the MCP server inside an interactive Claude Code session.
+
+
+ Broker-level MCP argument generation and CLI integration details.
+
+
diff --git a/web/content/docs/7.1.1/authentication.mdx b/web/content/docs/7.1.1/authentication.mdx
new file mode 100644
index 00000000..7e1ad82d
--- /dev/null
+++ b/web/content/docs/7.1.1/authentication.mdx
@@ -0,0 +1,37 @@
+---
+title: 'Authentication'
+description: 'Use Relayauth for identity, authorization, and policy control around agent systems.'
+---
+
+Authentication and authorization live next to orchestration, not inside it. When agents need identities, scoped access, or policy enforcement, the relevant platform piece is Relayauth.
+
+## What it covers
+
+- JWT-style access tokens for agents and services
+- Scope-based permissions
+- RBAC and deny-first policy layers
+- Audit trails and token revocation
+- Budget and action controls around sensitive access
+
+## When to reach for it
+
+- Agents need access to external APIs or protected internal services
+- You want workspace-scoped credentials instead of long-lived shared secrets
+- You need humans to retain control over what agents are allowed to do
+
+## Where to go next
+
+
+
+ Product overview and positioning for agent identity and authorization.
+
+
+ The platform-level view of auth next to files, messaging, and scheduling.
+
+
+ Pair scheduled jobs with scoped credentials and policies.
+
+
+ See how auth fits into multi-agent teams.
+
+
diff --git a/web/content/docs/7.1.1/channels.mdx b/web/content/docs/7.1.1/channels.mdx
new file mode 100644
index 00000000..1734fbab
--- /dev/null
+++ b/web/content/docs/7.1.1/channels.mdx
@@ -0,0 +1,65 @@
+---
+title: 'Channels'
+description: 'Group agents into shared rooms for coordination and broadcast visibility.'
+---
+
+Channels give agents a shared room. They are useful when several workers need the same context, status stream, or coordination surface.
+
+## Join channels on spawn
+
+
+```typescript TypeScript
+const relay = new AgentRelay({ channels: ['general'] });
+
+await relay.spawnAgent({
+ name: 'Coder',
+ cli: 'codex',
+ channels: ['dev', 'reviews'],
+ task: 'Implement the patch and post updates in the team channels.',
+});
+```
+
+```python Python
+relay = AgentRelay(channels=["general"])
+
+await relay.codex.spawn(
+ name="Coder",
+ channels=["dev", "reviews"],
+ task="Implement the patch and post updates in the team channels.",
+)
+```
+
+
+## Post channel messages in communicate mode
+
+```python
+from agent_relay.communicate import Relay
+
+relay = Relay("MyAgent")
+await relay.post("general", "Build finished. Ready for review.")
+```
+
+Communicate mode is the right fit when an existing framework agent needs Relaycast messaging without being spawned by the orchestrator.
+
+## When to use channels
+
+- Shared project updates like `#dev` or `#reviews`
+- Multi-agent workflows where several workers need the same status feed
+- Human observers who want to monitor progress without reading every DM
+
+## See also
+
+
+
+ Core message flow across the orchestrator.
+
+
+ Private one-to-one coordination.
+
+
+ Put existing framework agents on the relay.
+
+
+ Pair channels with scheduled jobs and notifications.
+
+
diff --git a/web/content/docs/7.1.1/cli-agent-management.mdx b/web/content/docs/7.1.1/cli-agent-management.mdx
new file mode 100644
index 00000000..5a1167a3
--- /dev/null
+++ b/web/content/docs/7.1.1/cli-agent-management.mdx
@@ -0,0 +1,72 @@
+---
+title: 'Agent management'
+description: 'Spawn agents from the terminal, inspect active workers, tail logs, and release them.'
+---
+
+The CLI exposes the same core control loop as the SDK: start an agent, let it work, observe it, and release it when the task is done.
+
+## Spawn an agent
+
+```bash
+agent-relay spawn reviewer claude "Review the latest auth changes"
+```
+
+Useful options:
+
+- `--cwd ` runs the agent in a specific working directory.
+- `--team ` tags the agent with a team name.
+- `--model ` overrides the default model for that CLI.
+- `--continue` or `--continue-from ` resumes a previously released agent identity.
+- `--shadow-mode ` and `--shadow-of ` configure shadow execution for advanced setups.
+
+You can also pipe the task through stdin:
+
+```bash
+printf '%s\n' "Review the auth diff and list regressions." | agent-relay spawn reviewer claude
+```
+
+## Inspect active agents
+
+```bash
+agent-relay who
+agent-relay agents:logs reviewer --follow
+```
+
+- `who` shows agents active in the last 30 seconds.
+- `agents:logs` tails stdout and stderr from a spawned worker.
+
+## Release or retarget an agent
+
+```bash
+agent-relay release reviewer
+agent-relay set-model reviewer sonnet
+```
+
+- `release` shuts down a spawned agent cleanly through the broker API.
+- `set-model` changes the model for a running spawned agent without replacing its identity.
+
+## Practical pattern
+
+```bash
+agent-relay up --background
+agent-relay spawn planner claude "Break the task into three steps"
+agent-relay spawn coder codex "Implement the approved plan"
+agent-relay send planner "Coordinate with coder and keep updates concise."
+```
+
+## See also
+
+
+
+ Start the broker before spawning long-lived workers.
+
+
+ Send follow-up instructions and inspect inbox state.
+
+
+ SDK version of the same operation.
+
+
+ Move from individual workers to repeatable team structure.
+
+
diff --git a/web/content/docs/7.1.1/cli-broker-lifecycle.mdx b/web/content/docs/7.1.1/cli-broker-lifecycle.mdx
new file mode 100644
index 00000000..d19b0fbc
--- /dev/null
+++ b/web/content/docs/7.1.1/cli-broker-lifecycle.mdx
@@ -0,0 +1,113 @@
+---
+title: 'Broker lifecycle'
+description: 'Start, inspect, and stop the local broker that powers agent-relay CLI sessions.'
+---
+
+The broker is the local runtime behind spawned agents, the dashboard, message routing, and workspace state.
+
+## Start the broker
+
+```bash
+agent-relay up
+```
+
+Use flags when you need a more specific runtime shape:
+
+- `--no-dashboard` starts the broker without the web dashboard.
+- `--no-spawn` starts the broker without auto-spawning agents from config.
+- `--spawn` forces auto-spawn even when a config would normally skip it.
+- `--background` detaches the broker and leaves it running.
+- `--workspace-key ` joins a pre-existing Relaycast workspace.
+- `--state-dir ` moves broker state out of the default `.agent-relay/` directory.
+- `--broker-name ` overrides the broker identity instead of using the project directory name.
+
+## Check status
+
+```bash
+agent-relay status
+```
+
+Use this to confirm whether the broker is alive and where it wrote its state files.
+
+## Stop the broker
+
+```bash
+agent-relay down
+```
+
+Useful flags:
+
+- `--timeout ` changes how long the CLI waits for graceful shutdown.
+- `--force` cleans up stuck runtime state aggressively.
+- `--all` kills agent-relay processes system-wide instead of only the current workspace.
+
+## Update or uninstall
+
+```bash
+agent-relay update --check
+agent-relay uninstall --dry-run
+```
+
+- `update` checks for a newer release and installs it unless you pass `--check`.
+- `uninstall` removes runtime files, config, and global binaries. Use `--dry-run` before destructive cleanup.
+
+## Broker diagnostic logs
+
+The broker writes its own tracing logs (separate from per-agent PTY output) to a platform-standard directory with daily rotation:
+
+| Platform | Path |
+| -------- | ---- |
+| macOS | `~/Library/Logs/agent-relay/{brokerId}.log.YYYY-MM-DD` |
+| Linux | `$XDG_STATE_HOME/agent-relay/logs/{brokerId}.log.YYYY-MM-DD` (defaults to `~/.local/state/agent-relay/logs/`) |
+| Windows | `%LOCALAPPDATA%\agent-relay\Logs\{brokerId}.log.YYYY-MM-DD` |
+
+`brokerId` is the broker's `--name` (or the working-directory basename when unnamed). Each day the appender rolls to a new file; the active file has no date suffix.
+
+### Destination — `AGENT_RELAY_BROKER_LOG`
+
+| Value | Behavior |
+| ----- | -------- |
+| unset, `file`, `1`, `true`, `yes`, `on` | (default) write to the rolling log file above |
+| `stderr`, `print` | write to the parent process's stderr instead of a file |
+| `off`, `none`, `0`, `false`, `no` | disable the tracing subscriber entirely |
+
+`RUST_LOG` still controls the level filter when logging is enabled (e.g. `RUST_LOG=agent_relay::worker::pty=debug`). It defaults to `info`.
+
+### Manage the log directory
+
+```bash
+agent-relay log path # print the log directory
+agent-relay log list [brokerId] # list files with size and mtime
+agent-relay log view -n 200 # tail the most recent file
+agent-relay log rotate --keep-days 7 # delete rotated files older than 7 days
+agent-relay log rotate --broker-id myproj --dry-run
+agent-relay log clear --broker-id myproj # wipe one broker's logs (including the active file)
+agent-relay log clear --force # wipe every broker's logs
+```
+
+`log rotate` only removes rotated (dated) files — the active log file is never deleted because the broker is writing to it. Use `log clear` for a full reset.
+
+## Focused test harnesses
+
+```bash
+agent-relay start dashboard.js claude
+```
+
+`start` is a narrower developer command for bringing up focused dashboard harnesses rather than the normal full broker session.
+
+## See also
+
+
+
+ Full map of the CLI surface area.
+
+
+ Spawn and control agents once the broker is running.
+
+
+ Use the broker to route messages and inspect history.
+
+
+ SDK-first onboarding if you want to write code instead of operate the CLI.
+
+
diff --git a/web/content/docs/7.1.1/cli-cloud-commands.mdx b/web/content/docs/7.1.1/cli-cloud-commands.mdx
new file mode 100644
index 00000000..7818098f
--- /dev/null
+++ b/web/content/docs/7.1.1/cli-cloud-commands.mdx
@@ -0,0 +1,71 @@
+---
+title: 'Cloud commands'
+description: 'Authenticate with Agent Relay Cloud, connect providers, run workflows remotely, and sync patches back.'
+---
+
+The `cloud` subcommands handle authentication, sandbox provider setup, remote workflow execution, and syncing code changes back to your machine.
+
+## Log in and inspect account state
+
+```bash
+agent-relay cloud login
+agent-relay cloud whoami
+agent-relay cloud logout
+```
+
+- `login` opens the browser-based cloud auth flow.
+- `whoami` prints the current user, organization, workspace, and scopes.
+- `logout` clears stored cloud credentials.
+
+## Connect a provider
+
+```bash
+agent-relay cloud connect claude --language typescript
+```
+
+This command opens an interactive SSH-backed auth session for a provider sandbox. It requires a real TTY. The CLI also accepts provider aliases:
+
+- `claude` maps to `anthropic`
+- `codex` maps to `openai`
+- `gemini` maps to `google`
+
+## Run a workflow remotely
+
+```bash
+agent-relay cloud run relay.yaml --sync-code
+```
+
+Useful follow-up commands:
+
+```bash
+agent-relay cloud status
+agent-relay cloud logs --follow
+agent-relay cloud sync
+```
+
+- `status` fetches the latest state for a run.
+- `logs` streams workflow or per-agent output.
+- `sync` downloads the generated patch and applies it locally.
+
+## Inspect a patch before applying it
+
+```bash
+agent-relay cloud sync --dry-run
+```
+
+Use `--dir ` if the patch should apply somewhere other than the current directory.
+
+## Deprecated alias
+
+The top-level `agent-relay connect ` command is deprecated. Use `agent-relay cloud connect ` instead.
+
+## See also
+
+
+
+ Conceptual overview of local versus cloud execution.
+
+
+ Relayauth and credentials at the product level.
+
+
diff --git a/web/content/docs/7.1.1/cli-messaging.mdx b/web/content/docs/7.1.1/cli-messaging.mdx
new file mode 100644
index 00000000..176f3946
--- /dev/null
+++ b/web/content/docs/7.1.1/cli-messaging.mdx
@@ -0,0 +1,92 @@
+---
+title: 'Messaging'
+description: 'Send direct messages, inspect recent history, and check the unread inbox from the CLI.'
+---
+
+Once the broker is up, the CLI can act as a lightweight operator console for human-to-agent messages and recent conversation history.
+
+## Send a message
+
+```bash
+agent-relay send reviewer "Please summarize the riskiest changes first."
+```
+
+The target argument accepts:
+
+- an agent name such as `reviewer`
+- a channel such as `#general`
+- `*` for broadcast
+
+Optional flags:
+
+- `--from ` sets the sender identity. Defaults to `$AGENT_RELAY_ORCHESTRATOR_NAME` or `orchestrator`.
+ Workers' replies are addressed to this name, so use a stable value you can read with `agent-relay replies `.
+- `--thread ` keeps follow-ups grouped under an existing thread.
+
+## Read recent history
+
+```bash
+agent-relay history --to '#general' --since 30m
+```
+
+Useful filters:
+
+- `--from ` keeps only one sender.
+- `--to ` narrows to a target. When `` is not a channel, the command prints messages in chronological order with no preview truncation; pair with `--from ` to filter by sender.
+ For example, `agent-relay history --to Worker2 --from Worker2` is equivalent to `agent-relay replies Worker2` for the non-`--unread` case.
+- `--since