+
-
+
+ step {step.n}
+
+
+
+ {step.label}
+ + {step.title} +
+{step.desc}
- Works with your favorite AI agents
-
-
- {agents.map((agent) => (
-
+
+ );
+}
+
+function ClientNode({ label, sub }: { label: string; sub: string }) {
+ return (
+
-
- 
-
+
+
+ {agent.name}
+
+
-
+
+ 01 - coverage
+
- ))}
+ + One daemon. Twenty-three agent harnesses. +
+ Swap harnesses per project. The daemon does not care which CLI is in the pane - adapters obey one port. +
+
+
+
);
}
diff --git a/frontend/src/landing/components/LandingArchitecture.tsx b/frontend/src/landing/components/LandingArchitecture.tsx
new file mode 100644
index 000000000..fc1da2649
--- /dev/null
+++ b/frontend/src/landing/components/LandingArchitecture.tsx
@@ -0,0 +1,145 @@
+const ports = [
+ { name: "Agent", impls: "claude-code · codex · cursor · +20", accent: true },
+ { name: "Runtime", impls: "tmux · process · conpty" },
+ { name: "Workspace", impls: "git worktree" },
+ { name: "SCM", impls: "GitHub" },
+ { name: "Tracker", impls: "GitHub", muted: true },
+ { name: "Reviewer", impls: "claude-code" },
+];
+
+export function LandingArchitecture() {
+ return (
+
+ {agents.map((agent) => (
+
+
+
+ ))}
+
+
+
+
+ {agent.name}
+
+
+
+
+
+
+
+
+ 04 - architecture
+ + A daemon at the center.{" "} + Ports at the edges. +
+
+
+ + Hexagonal architecture. Inbound/outbound port contracts make every external system - agent, runtime, + workspace, SCM - a swappable adapter. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 127.0.0.1 · loopback only
+
+
+ Go daemon
+
+ {["HTTP API", "Lifecycle mgr", "CDC stream", "SQLite store"].map((item) => (
+
+
+ {item}
+
+ ))}
+
+ {ports.map((port) => (
+
+
+
+ ports/ backend/internal/ports/
+
+
+ adapters/ registered at boot
+
+
+ events/ sse fan-out
+
+
+
+
+ );
+}
+
+function Port({ port }: { port: (typeof ports)[number] }) {
+ return (
+
+
+ {label}
+ {sub}
+
+
+ );
+}
+
+function Wires({ variant }: { variant: "clients" | "ports" }) {
+ const paths =
+ variant === "clients"
+ ? ["M260 0 L300 60", "M340 0 L300 60"]
+ : ["M300 0 L80 60", "M300 0 L200 60", "M300 0 L300 60", "M300 0 L400 60", "M300 0 L520 60"];
+ return (
+
+
+ port
+
+ {port.name}
+ {port.impls}
+
+
+
+ );
+}
diff --git a/frontend/src/landing/components/LandingCTA.tsx b/frontend/src/landing/components/LandingCTA.tsx
index 2a1d5e6fc..dcb3bf8d8 100644
--- a/frontend/src/landing/components/LandingCTA.tsx
+++ b/frontend/src/landing/components/LandingCTA.tsx
@@ -1,31 +1,81 @@
+function GithubIcon({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+
+function ArrowRightIcon({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+
+function BookIcon({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+
export function LandingCTA() {
return (
-
-
- Stop babysitting. -
-- Start orchestrating. -
-
- $ npm i -g @aoagents/ao
-
-
-
+
-
+
diff --git a/frontend/src/landing/components/LandingFeatures.tsx b/frontend/src/landing/components/LandingFeatures.tsx
index 0e1ab637b..19bb6b838 100644
--- a/frontend/src/landing/components/LandingFeatures.tsx
+++ b/frontend/src/landing/components/LandingFeatures.tsx
@@ -1,520 +1,208 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-type DemoKind = "parallel" | "recovery" | "plugins" | "dashboard";
-
-const features: { n: string; title: string; desc: string; demo: DemoKind }[] = [
+const features = [
{
- n: "01",
- title: "Multi-agent execution",
- desc: "Run Claude Code, Codex, Cursor, Aider, and OpenCode in parallel. Each agent in its own git worktree, branch, and context.",
- demo: "parallel",
+ kicker: "the substrate",
+ title: "An operating system, not a wrapper.",
+ desc: "Inbound and outbound port contracts. Swappable adapters. A CDC stream. The kind of substrate that survives the next model upgrade - and the one after that.",
+ visual: "ports",
+ accent: true,
+ span: "lg:col-span-2",
},
{
- n: "02",
- title: "Autonomous CI + review handling",
- desc: "CI fails? The agent reads the logs and pushes a fix. Review comments land? The agent addresses them. You sleep, your agents ship.",
- demo: "recovery",
+ kicker: "isolation",
+ title: "Every agent gets a worktree.",
+ desc: "No branch collisions. No stash gymnastics. Each session lives in its own git worktree with its own attachable pane.",
+ visual: "branch",
+ span: "lg:col-span-1",
},
{
- n: "03",
- title: "Seven swappable slots",
- desc: "Runtime, Agent, Workspace, Tracker, SCM, Notifier, Terminal. Use tmux or process. GitHub or GitLab. Slack or webhooks.",
- demo: "plugins",
+ kicker: "feedback loop",
+ title: "PRs watched. Agents nudged.",
+ desc: "CI failure, requested change, merge conflict - the lifecycle manager routes each fact back to the owning agent automatically.",
+ visual: "pr",
+ span: "lg:col-span-1",
},
{
- n: "04",
- title: "Real-time Kanban + terminal",
- desc: "Every agent's state in one view. Attach to any terminal via the browser. SSE updates every 5 seconds. WebSocket for live I/O.",
- demo: "dashboard",
+ kicker: "durability",
+ title: "Durable facts. Derived status.",
+ desc: "SQLite stores a small set of session facts. Display state is computed at read time. Triggers append to change_log; CDC fans events out via SSE.",
+ visual: "log",
+ span: "lg:col-span-2",
+ },
+ {
+ kicker: "trust model",
+ title: "Bound to 127.0.0.1.",
+ desc: "No auth, no CORS, no TLS. No SaaS in the loop. Your threat model fits on a sticky note.",
+ span: "lg:col-span-1",
+ },
+ {
+ kicker: "lifecycle",
+ title: "Lifecycle manager + reaper.",
+ desc: "Reduces runtime, activity and PR observations into durable state. Crash-safe reconcile on every boot.",
+ span: "lg:col-span-1",
+ },
+ {
+ kicker: "interfaces",
+ title: "ao CLI and Electron app.",
+ desc: "Both drive the same daemon over loopback. Spawn from a terminal; supervise in a desktop kanban.",
+ span: "lg:col-span-1",
},
];
-// The feature's animated demo — the stacked back panel + a smaller front peek,
-// reused as-is from the original switcher so each card stays rich.
-function FeatureDemo({ kind }: { kind: DemoKind }) {
- return (
-
+
- Read Docs
-
-
- View on GitHub
-
+ Stop babysitting one agent.
+
+
+
+
+ $ ao spawn --project your-repo --prompt "ship it"
+
+
+
+
- Read Docs
-
-
- View on GitHub
-
+ Stop babysitting one agent.
+
+ Start orchestrating.
+
+
+ + Free, Apache 2.0 licensed, runs on your laptop. The whole repo is on GitHub - read the source, fork it, and + ship your first parallel agent in five minutes. +
+ +
-
- );
-}
-
-// Sticky offset from the top of the viewport where each card pins (leaves room
-// for the fixed nav); each successive card pins STACK_GAP lower so the tops peek.
-const BASE_TOP = 120;
-const STACK_GAP = 26;
-
export function LandingFeatures() {
- const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
- const [stack, setStack] = useState(false);
-
- // Scroll-stack only on desktop; on narrow screens cards read as a plain list.
- useEffect(() => {
- const mq = window.matchMedia("(min-width: 768px)");
- const apply = () => setStack(mq.matches);
- apply();
- mq.addEventListener("change", apply);
- return () => mq.removeEventListener("change", apply);
- }, []);
-
- // As later cards pin on top, shrink + dim the cards beneath them so the deck
- // reads as a stack. CSS transition smooths the steps; rAF throttles scroll.
- useEffect(() => {
- const els = cardRefs.current;
- if (!stack) {
- els.forEach((el) => {
- if (el) {
- el.style.transform = "";
- el.style.opacity = "";
- }
- });
- return;
- }
- let raf = 0;
- const update = () => {
- raf = 0;
- els.forEach((el, i) => {
- if (!el) return;
- let depth = 0;
- for (let j = i + 1; j < els.length; j++) {
- const ej = els[j];
- if (ej && ej.getBoundingClientRect().top <= BASE_TOP + j * STACK_GAP + 0.5) {
- depth += 1;
- }
- }
- el.style.transform = `scale(${1 - depth * 0.05})`;
- el.style.opacity = `${Math.max(1 - depth * 0.16, 0.55)}`;
- });
- };
- const onScroll = () => {
- if (!raf) raf = requestAnimationFrame(update);
- };
- update();
- window.addEventListener("scroll", onScroll, { passive: true });
- window.addEventListener("resize", onScroll);
- return () => {
- window.removeEventListener("scroll", onScroll);
- window.removeEventListener("resize", onScroll);
- if (raf) cancelAnimationFrame(raf);
- };
- }, [stack]);
-
return (
-
- {kind === "parallel" &&
-
- {kind === "parallel" &&
-
-
- Features
-
-
-
- - A unified orchestrator that scales. -
- -
- {features.map((f, i) => (
-
{
- cardRefs.current[i] = el;
- }}
- className="landing-card rounded-2xl grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center overflow-hidden"
- style={{
- padding: "clamp(1.5rem, 3vw, 2.5rem)",
- marginBottom: "1.5rem",
- transformOrigin: "center top",
- transition: "transform 0.4s ease, opacity 0.4s ease, border-color 0.2s ease",
- ...(stack ? { position: "sticky", top: `${BASE_TOP + i * STACK_GAP}px`, zIndex: i + 1 } : null),
- }}
- >
-
+
);
}
-/* ──────── 01 · Parallel ──────── */
-
-function ParallelBack() {
- const agents = [
- { name: "claude-code", task: "#42 auth", color: "rgba(255,159,102,0.7)", dur: 3.4, delay: 0 },
- { name: "codex", task: "#43 pagination", color: "rgba(134,239,172,0.65)", dur: 4.2, delay: 0.5 },
- { name: "aider", task: "#44 rate limit", color: "rgba(167,139,250,0.65)", dur: 3.6, delay: 1.0 },
- { name: "opencode", task: "#46 db refactor", color: "rgba(96,165,250,0.65)", dur: 4.8, delay: 0.3 },
- ];
+function FeatureCard({ feature, index }: { feature: (typeof features)[number]; index: number }) {
return (
-
-
-
- {f.n}
-
- {f.title}
-{f.desc}
-
+
+
+
+
+
- ))}
+ 02 - what's inside
+ + Built like an operating system,{" "} + not a wrapper. +
+
+ + Inbound/outbound port contracts. Swappable adapters. A CDC stream - the kind of substrate that survives + the next model upgrade. And the one after that. +
+
+ {features.map((feature, i) => (
+
-
- );
-}
-
-function ParallelFront() {
- const fleet = [
- { name: "claude-code", color: "rgba(255,159,102,0.85)" },
- { name: "codex", color: "rgba(134,239,172,0.75)" },
- { name: "aider", color: "rgba(167,139,250,0.75)" },
- { name: "opencode", color: "rgba(96,165,250,0.75)" },
- { name: "cursor", color: "rgba(244,114,182,0.65)" },
- ];
- return (
-
-
- 4 sessions · parallel
-
-
-
- live
-
-
-
- {agents.map((a) => (
-
-
-
- ))}
-
-
- {a.name}
-
-
- {a.task}
-
-
-
-
-
-
- );
-}
-
-/* ──────── 02 · Recovery ──────── */
-
-const recoveryStages: { time: string; text: string; kind: "info" | "fail" | "fix" | "ok" }[] = [
- { time: "10:42", text: "agent.spawn → s-312", kind: "info" },
- { time: "10:43", text: "✗ tests/auth failed", kind: "fail" },
- { time: "10:44", text: "agent.investigate()", kind: "info" },
- { time: "10:44", text: "patch · re-running ci", kind: "fix" },
- { time: "10:45", text: "✓ tests/auth (48/48)", kind: "ok" },
- { time: "10:45", text: "✗ lint failed", kind: "fail" },
- { time: "10:46", text: "patch · eslint --fix", kind: "fix" },
- { time: "10:47", text: "✓ lint passed", kind: "ok" },
- { time: "10:47", text: "● ready to merge", kind: "ok" },
-];
-
-function RecoveryBack() {
- const [count, setCount] = useState(3);
- useEffect(() => {
- const id = setInterval(() => {
- setCount((c) => (c >= recoveryStages.length ? 3 : c + 1));
- }, 1000);
- return () => clearInterval(id);
- }, []);
- const visible = recoveryStages.slice(0, count);
- return (
-
- Fleet · 5 agents
-
-
- {fleet.map((a) => (
-
-
-
- {a.name}
-
- ))}
-
-
- );
-}
-
-function RecoveryFront() {
- return (
-
- PR #312 · feat/user-auth
- healing
-
-
- {visible.map((s, i) => {
- const isLast = i === visible.length - 1;
- const color =
- s.kind === "fail"
- ? "text-[rgba(248,113,113,0.85)]"
- : s.kind === "ok"
- ? "text-[rgba(134,239,172,0.85)]"
- : s.kind === "fix"
- ? "text-[rgba(251,191,36,0.85)]"
- : "text-[var(--landing-muted)]";
- return (
-
-
- {s.time}
- {s.text}
-
- );
- })}
-
-
- );
-}
-
-/* ──────── 03 · Plugins ──────── */
-
-function PluginsBack() {
- const slots = [
- { slot: "agent", values: ["claude-code", "codex", "aider", "opencode"] },
- { slot: "tracker", values: ["github", "linear", "gitlab"] },
- { slot: "runtime", values: ["tmux", "process"] },
- { slot: "workspace", values: ["worktree", "clone"] },
- { slot: "scm", values: ["github", "gitlab"] },
- { slot: "notifier", values: ["slack", "webhook", "desktop"] },
- { slot: "terminal", values: ["iterm2", "web"] },
- ];
- const [tick, setTick] = useState(0);
- useEffect(() => {
- const id = setInterval(() => setTick((t) => t + 1), 1600);
- return () => clearInterval(id);
- }, []);
- return (
-
- before
- ✗
- 12/48
-
-
- after
- ✓
- 48/48
-
-
-
- );
-}
-
-function PluginsFront() {
- const pairs = [
- { from: "tmux", to: "process" },
- { from: "github", to: "linear" },
- { from: "slack", to: "webhook" },
- { from: "worktree", to: "clone" },
- ];
- const [idx, setIdx] = useState(0);
- useEffect(() => {
- const id = setInterval(() => setIdx((i) => (i + 1) % pairs.length), 1800);
- return () => clearInterval(id);
- }, []);
- const p = pairs[idx];
- return (
-
- agent-orchestrator.yaml
-
- 7 slots
-
-
-
- {slots.map((s, i) => {
- const val = s.values[(tick + i) % s.values.length];
- return (
-
-
- {s.slot}:
-
- {val}
-
-
- );
- })}
-
-
- swap
-
-
-
+
+ ([
- { id: 1, col: 0, title: "Add user auth", agent: "claude-code", color: "rgba(255,159,102,0.7)" },
- { id: 2, col: 0, title: "Fix pagination", agent: "codex", color: "rgba(134,239,172,0.65)" },
- { id: 3, col: 1, title: "Add rate limit", agent: "aider", color: "rgba(167,139,250,0.65)" },
- { id: 4, col: 2, title: "Refactor DB", agent: "opencode", color: "rgba(96,165,250,0.65)" },
- ]);
- useEffect(() => {
- const id = setInterval(() => {
- setCards((prev) => {
- const advanceable = prev.filter((c) => c.col < 2);
- if (advanceable.length === 0) {
- return prev.map((c) => ({ ...c, col: 0 as 0 | 1 | 2 }));
- }
- const oldest = advanceable[0];
- return prev.map((c) => (c.id === oldest.id ? { ...c, col: (c.col + 1) as 0 | 1 | 2 } : c));
- });
- }, 2400);
- return () => clearInterval(id);
- }, []);
- const cols = ["Working", "Review", "Merged"];
+ label: string;
+ status: string;
+ highlight?: boolean;
+}) {
return (
-
- {p.from}
+ {String(index + 1).padStart(2, "0")}
+
+
+ {feature.kicker}
- ⇄
-
+ + {feature.title} +
+{feature.desc}
+ {feature.visual === "ports" &&
+ {["Agent", "Runtime", "Workspace", "SCM", "Tracker", "Reviewer"].map((port, i) => (
+
+ );
+}
+
+function BranchVisual() {
+ return (
+
+ );
+}
+
+function PrVisual() {
+ return (
+
- {p.to}
-
+
+ {port}
+
+ ))}
+
+ |
+ |
+ |
+ |
+
);
}
-/* ──────── 04 · Dashboard ──────── */
-
-type KanbanCard = {
- id: number;
- col: 0 | 1 | 2;
- title: string;
- agent: string;
+function Row({
+ color,
+ label,
+ status,
+ highlight,
+}: {
color: string;
-};
-
-function DashboardBack() {
- const [cards, setCards] = useState
+ -> nudge -> sess_8f2
-
- my-saas-app · 4 sessions
-
-
- sse
-
-
-
- {cols.map((name, col) => (
-
+
-
- ))}
-
- {name}
-
- {cards
- .filter((c) => c.col === col)
- .map((c) => (
-
-
- ))}
- {c.title}
-
-
- {c.agent}
-
-
+
+
+ {label}
+
+
+ {status}
+
);
}
-const streamPool = [
- "tests/auth.py::test_login",
- "tests/api.py::test_pagination",
- "tests/db.py::test_migration",
- "tests/queue.py::test_dequeue",
- "tests/auth.py::test_logout",
- "tests/api.py::test_cursor",
- "tests/db.py::test_index",
- "tests/queue.py::test_retry",
-];
-
-function DashboardFront() {
- const [stream, setStream] = useState(() =>
- streamPool.slice(0, 4).map((text, i) => ({ id: i, text, exiting: false })),
- );
- const nextRef = useRef(4);
- useEffect(() => {
- const id = setInterval(() => {
- setStream((prev) => {
- const marked = prev.map((l, i) => (i === 0 ? { ...l, exiting: true } : l));
- const next = [
- ...marked,
- {
- id: nextRef.current,
- text: streamPool[nextRef.current % streamPool.length],
- exiting: false,
- },
- ];
- nextRef.current += 1;
- return next;
- });
- setTimeout(() => {
- setStream((prev) => prev.filter((l) => !l.exiting));
- }, 240);
- }, 1300);
- return () => clearInterval(id);
- }, []);
+function LogVisual() {
return (
-
-
+
+
);
}
diff --git a/frontend/src/landing/components/LandingHowItWorks.tsx b/frontend/src/landing/components/LandingHowItWorks.tsx
index 670646a84..eec076a80 100644
--- a/frontend/src/landing/components/LandingHowItWorks.tsx
+++ b/frontend/src/landing/components/LandingHowItWorks.tsx
@@ -1,319 +1,127 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-const DURATION_MS = 3000;
-
const steps = [
{
n: "01",
- title: "Configure & assign",
- titleEm: "assign",
- desc: "Point Agent Orchestrator at your repo with a YAML config. Choose your agent, set up trackers and notifiers. One file, full control.",
- tags: ["YAML", "Plugins", "Trackers"],
- kind: "cli" as const,
+ label: "register",
+ title: "Tell ao about your repo",
+ desc: "Point the daemon at a local git repo. Worker and orchestrator agents are picked per project - no global setting wars.",
+ code: `ao project add --path . \\
+ --worker-agent codex \\
+ --orchestrator-agent claude-code`,
+ out: `ok project "your-repo" registered
+ok data dir -> ~/.ao/`,
},
{
n: "02",
- title: "Agents work",
- titleEm: "work",
- desc: "Each agent spawns in an isolated worktree. They write code, create PRs, run tests, and fix failures. Monitor everything from the live dashboard, or let them run.",
- tags: ["Worktrees", "Live dashboard", "Parallel"],
- kind: "dashboard" as const,
+ label: "spawn",
+ title: "Carve out a worktree, attach a pane",
+ desc: "Every spawn creates its own git worktree and an attachable runtime session. Multiple sessions, zero collisions.",
+ code: `ao spawn --project your-repo --prompt \\
+ "Add SSO via Okta to /auth"`,
+ out: `ok session sess_8f2 spawned
+ok worktree wt-add-sso-okta
+ok pane attached · streaming activity`,
},
{
n: "03",
- title: "PRs land",
- titleEm: "land",
- desc: "Agents create pull requests, address review comments, fix CI failures, and get them to mergeable state. Your morning starts with merged PRs, not a backlog.",
- tags: ["Pull requests", "CI fixes", "Review"],
- kind: "prs" as const,
+ label: "ship",
+ title: "Agent pushes the PR. You go for coffee.",
+ desc: "The agent develops, tests, and opens a PR from inside its worktree. Activity streams back to your terminal or the desktop app.",
+ code: `git push -u origin add-sso-okta
+gh pr create --fill`,
+ out: `PR #482 opened
+checks: queued · 0/4 complete`,
+ },
+ {
+ n: "04",
+ label: "react",
+ title: "Feedback routes itself",
+ desc: "The SCM observer watches the PR. CI failure, requested change, merge conflict - all become nudges to the owning agent.",
+ code: `[scm/github] PR #482 · lint -> fail
+[lcm] derive nudge for sess_8f2
+[agent/codex] received nudge · fix in progress`,
+ out: `ok lint passing · pushed fixup
+ok pr.merged -> main`,
+ accent: true,
},
];
export function LandingHowItWorks() {
- const [active, setActive] = useState(0);
- const [progress, setProgress] = useState(0);
- const [isDesktop, setIsDesktop] = useState(true);
- const pausedRef = useRef(false);
- const startRef = useRef(null);
-
- useEffect(() => {
- const mq = window.matchMedia("(min-width: 768px)");
- const apply = () => setIsDesktop(mq.matches);
- apply();
- mq.addEventListener("change", apply);
- return () => mq.removeEventListener("change", apply);
- }, []);
-
- useEffect(() => {
- let raf = 0;
- const tick = (now: number) => {
- if (startRef.current === null) startRef.current = now;
- if (!pausedRef.current) {
- const p = Math.min((now - startRef.current) / DURATION_MS, 1);
- setProgress(p);
- if (p >= 1) {
- startRef.current = now;
- setActive((a) => (a + 1) % steps.length);
- setProgress(0);
- }
- } else {
- startRef.current = now - progress * DURATION_MS;
- }
- raf = requestAnimationFrame(tick);
- };
- raf = requestAnimationFrame(tick);
- return () => cancelAnimationFrame(raf);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [active]);
-
- const select = (i: number) => {
- if (i === active) return;
- startRef.current = null;
- setProgress(0);
- setActive(i);
- };
-
return (
-
-
- s-003 · attached
- tail -f
-
-
- {stream.map((l) => (
-
+
- ✓ {l.text}
-
- ))}
-
+ {[
+ ["0x1f", "sess.spawn", "var(--fg-muted)"],
+ ["0x20", "pr.opened", "var(--fg-muted)"],
+ ["0x21", "ci.fail -> nudge", "var(--status-fail)"],
+ ["0x22", "agent.resume", "var(--fg-muted)"],
+ ["0x23", "pr.merged", "var(--status-ok)"],
+ ].map(([hex, label, color]) => (
+
);
}
diff --git a/frontend/src/landing/components/LandingFooter.tsx b/frontend/src/landing/components/LandingFooter.tsx
new file mode 100644
index 000000000..34f4fae1e
--- /dev/null
+++ b/frontend/src/landing/components/LandingFooter.tsx
@@ -0,0 +1,93 @@
+const LOGO_URL = "/ao-logo.svg";
+
+function GithubIcon({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+
+const productLinks = [
+ { label: "Features", href: "#features" },
+ { label: "How it works", href: "#how" },
+ { label: "Architecture", href: "#architecture" },
+ { label: "Quickstart", href: "#quickstart" },
+];
+
+const resourceLinks = [
+ { label: "GitHub", href: "https://github.com/AgentWrapper/agent-orchestrator" },
+ { label: "Architecture docs", href: "/docs/architecture" },
+ { label: "CLI reference", href: "/docs/cli" },
+ { label: "Releases", href: "https://github.com/AgentWrapper/agent-orchestrator/releases" },
+];
+
+const communityLinks = [
+ { label: "Contributors", href: "https://github.com/AgentWrapper/agent-orchestrator/graphs/contributors" },
+ { label: "Issues", href: "https://github.com/AgentWrapper/agent-orchestrator/issues" },
+ { label: "Pull requests", href: "https://github.com/AgentWrapper/agent-orchestrator/pulls" },
+ { label: "ao-agents.com", href: "https://ao-agents.com" },
+];
+
+export function LandingFooter() {
+ return (
+
+ );
+}
+
+function FooterCol({ title, links }: { title: string; links: Array<{ label: string; href: string }> }) {
+ return (
+
+ {label}
+ {hex}
+
+ ))}
+
+ );
+}
diff --git a/frontend/src/landing/components/LandingHero.tsx b/frontend/src/landing/components/LandingHero.tsx
index 32aa1beca..3558f8ea0 100644
--- a/frontend/src/landing/components/LandingHero.tsx
+++ b/frontend/src/landing/components/LandingHero.tsx
@@ -1,101 +1,134 @@
-interface LandingHeroProps {
- starsLabel: string;
-}
-
-export function LandingHero({ starsLabel }: LandingHeroProps) {
+function GithubIcon({ className = "" }: { className?: string }) {
return (
- {title}
+-
+ {links.map((link) => (
+
- + + {link.label} + + + ))} +
-
-
- Run 30 AI agents in parallel.
-
-
-
+
+ );
+}
+
+function ArrowRightIcon({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+
+function BookIcon({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+
+export function LandingHero() {
+ return (
+
-
- Open Source · MIT Licensed · {starsLabel} GitHub Stars
-
-
- Run 30 AI agents in parallel.
-
- One dashboard.
-
- - Agent Orchestrator spawns Claude Code, Codex, Cursor, Aider, and OpenCode in isolated git worktrees. Each - agent gets its own branch, creates PRs, fixes CI, and addresses reviews autonomously. -
- - -
-
-
- {/* Laptop screen / lid */}
-
-
-
- {/* Laptop base / hinge */}
-
- {/* eslint-disable-next-line @next/next/no-img-element */}
- 
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Agent work, from issue to merge
+
+ + Review the work, + Not the agents. +
++ Every issue gets its own checkout, session, branch, PR, checks, and review thread. When something breaks, + the right context goes back to the right agent. +
+ +
+ issue -> worktree -> session -> pull request -> review loop
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
-
-
- Process
- - Three steps to orchestration -
- (pausedRef.current = true)}
- onMouseLeave={() => (pausedRef.current = false)}
- >
- {steps.map((step, i) => {
- const isActive = i === active;
- return (
-
select(i)}
- onKeyDown={(e) => {
- if (e.key === "Enter" || e.key === " ") {
- e.preventDefault();
- select(i);
- }
- }}
- className="relative min-w-0 cursor-pointer overflow-hidden border-l border-[var(--landing-border-subtle)] pl-7 pr-5 py-2 first:border-l-0 first:pl-0 md:first:pl-7"
- style={{
- flex: isDesktop ? (isActive ? "1 1 0%" : "0 1 15rem") : "0 0 auto",
- transition: "flex 0.6s cubic-bezier(0.22,1,0.36,1)",
- }}
+
+
);
}
-function CliDemo() {
+function Step({ step, index }: { step: (typeof steps)[number]; index: number }) {
return (
-
+
- );
- })}
+
+
- {/* Expanding body */}
-
+
- {/* Header — always visible */}
-
+
+ 03 - how it works
+
- {/* Header — always visible */}
-
- {step.n}
-
-
- {step.title.replace(` ${step.titleEm}`, "")}{" "}
- {step.titleEm}
-
+ Four commands.{" "}
+ A fleet at work.
+
+
+
+ + No control plane. No SaaS account. No Docker network to debug. One Go binary, your favorite agent CLI, and + the orchestrator runs on loopback. +
+
-
-
- {/* Vertical progress bar */}
-
-
-
-
-
-
-
- - {step.desc} -
-
- {step.kind === "cli" &&
-
- {step.tags.map((t, ti) => (
-
- {ti > 0 && ·}
- {t}
-
- ))}
-
-
+ {steps.map((step, i) => (
+
-
-
-
-
-
-
-
-
-
- ${" "}
- ao batch-spawn 42 43 44 45 46
-
- ⟡ Loading config from agent-orchestrator.yaml
- ⟡ Resolving 5 issues from GitHub
- ⟡ Spawning sessions in worktrees...
- ✓ Session s-001 spawned → issue #42
- ✓ Session s-002 spawned → issue #43
- ✓ Session s-003 spawned → issue #44
- ✓ Session s-004 spawned → issue #45
- ✓ Session s-005 spawned → issue #46
-
-
-
- 5 agents working · Dashboard → http://localhost:3000
+
+
- );
-}
-function DashboardDemo() {
- return (
-
-
- );
-}
-
-function PrsDemo() {
- return (
-
-
-
-
- my-saas-app · 5 sessions
-
-
-
-
- {[
- { branch: "feat/user-auth", title: "Add user authentication flow" },
- { branch: "fix/pagination-offset", title: "Fix off-by-one in cursor pagination" },
- { branch: "feat/rate-limiting", title: "Add Redis-backed rate limiter" },
- { branch: "refactor/db-layer", title: "Extract repository pattern from services" },
- ].map((pr) => (
-
-
+
+ );
+}
diff --git a/frontend/src/landing/components/LandingNav.tsx b/frontend/src/landing/components/LandingNav.tsx
index af2bdfec5..7aa58f5be 100644
--- a/frontend/src/landing/components/LandingNav.tsx
+++ b/frontend/src/landing/components/LandingNav.tsx
@@ -1,104 +1,170 @@
"use client";
-import Image from "next/image";
-import Link from "next/link";
+import { useEffect, useState } from "react";
-function XIcon() {
+const navItems = [
+ { label: "Features", href: "#features" },
+ { label: "How it works", href: "#how" },
+ { label: "Architecture", href: "#architecture" },
+ { label: "Quickstart", href: "#quickstart" },
+];
+
+function GithubIcon({ className = "" }: { className?: string }) {
return (
-
-
- {pr.branch}
- {pr.title}
-
- ✓ Merged
-
+
+
- );
-}
-
-interface DashCardData {
- title: string;
- meta: string;
- agent: string;
- amber?: boolean;
- done?: boolean;
-}
-
-function DashColumn({ title, cards }: { title: string; cards: DashCardData[] }) {
- return (
-
+
+ ~/projects/your-repo
+ {step.label}.sh
- ))}
-
-
+
);
}
diff --git a/frontend/src/landing/components/LandingLiveDemo.tsx b/frontend/src/landing/components/LandingLiveDemo.tsx
new file mode 100644
index 000000000..95f57a1e4
--- /dev/null
+++ b/frontend/src/landing/components/LandingLiveDemo.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import { useState } from "react";
+
+const tabs = [
+ {
+ id: "install",
+ label: "Install",
+ lines: [
+ "# Requires Go 1.25+, tmux on PATH",
+ "$ cd backend && go build -o /tmp/ao ./cmd/ao",
+ "",
+ "# Start the daemon and wait for /readyz",
+ "$ /tmp/ao start",
+ "✓ daemon up on 127.0.0.1:3001",
+ "✓ pid 4821 · ready in 184ms",
+ "",
+ "$ /tmp/ao doctor",
+ "✓ git found · 2.43.0",
+ "✓ tmux found · 3.5a",
+ "✓ data dir ~/.ao",
+ "✓ all checks passing",
+ ],
+ },
+ {
+ id: "spawn",
+ label: "Spawn agents",
+ lines: [
+ "# Register a local repo with worker + orchestrator",
+ "$ ao project add --path /path/to/repo --id myrepo \\",
+ " --worker-agent codex \\",
+ " --orchestrator-agent claude-code",
+ '✓ project "myrepo" registered',
+ "",
+ "# Fan a task out across parallel sessions",
+ "$ ao spawn --project myrepo \\",
+ ' --prompt "Refactor auth to use JWT"',
+ "✓ session sess_8f2 · worktree wt-jwt",
+ "",
+ "$ ao session ls --project myrepo",
+ " sess_8f2 codex wt-jwt active",
+ " sess_a13 claude-code wt-add-sso active",
+ " sess_c01 cursor wt-webhooks active",
+ ],
+ },
+ {
+ id: "ci",
+ label: "Auto-nudge on CI",
+ lines: [
+ "# the SCM observer is already running. no flags needed.",
+ "# when GitHub Actions fails:",
+ "",
+ '[scm/github] PR #482 · check "lint" → fail',
+ "[lcm] derive nudge for sess_8f2",
+ "[agent/codex] received nudge · resuming pane",
+ "",
+ "# the agent re-opens the worktree, fixes the lint,",
+ "# pushes a new commit, and CI re-runs.",
+ "# you do nothing.",
+ "",
+ '[scm/github] PR #482 · check "lint" → pass',
+ "[scm/github] PR #482 · merged → main",
+ "✓ ship it.",
+ ],
+ },
+];
+
+function classify(line: string) {
+ if (!line) return "blank";
+ if (line.startsWith("✓")) return "ok";
+ if (line.startsWith("$")) return "cmd";
+ if (line.startsWith("#")) return "comment";
+ if (line.startsWith("[")) return "log";
+ return "out";
+}
+
+function CommandLines({ lines }: { lines: string[] }) {
+ const colorFor = (kind: string) =>
+ kind === "ok"
+ ? "text-[color:var(--status-ok)]"
+ : kind === "cmd"
+ ? "text-[color:var(--code-fg)]"
+ : "text-[color:var(--code-muted)]";
+
+ return (
+
- {title}
-
- {cards.map((card) => (
-
-
+ {card.title}
- {card.meta}
-
- {card.done ? (
- ✓
- ) : (
-
- )}
- {card.agent}
-
+ {step.code}
+
+
- ))}
- {step.out}
+ {lines.map((line, index) => (
+
+ );
+}
+
+async function copyText(text: string) {
+ if (navigator.clipboard?.writeText) {
+ try {
+ await navigator.clipboard.writeText(text);
+ return true;
+ } catch {
+ // Fall through to the textarea path for browsers that block Clipboard API.
+ }
+ }
+
+ const textarea = document.createElement("textarea");
+ textarea.value = text;
+ textarea.setAttribute("readonly", "");
+ textarea.style.position = "fixed";
+ textarea.style.left = "-9999px";
+ textarea.style.top = "0";
+ document.body.appendChild(textarea);
+ textarea.select();
+
+ try {
+ return document.execCommand("copy");
+ } finally {
+ document.body.removeChild(textarea);
+ }
+}
+
+export function LandingLiveDemo() {
+ const [active, setActive] = useState("install");
+ const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">("idle");
+ const current = tabs.find((tab) => tab.id === active) ?? tabs[0];
+
+ const onCopy = async () => {
+ const copied = await copyText(current.lines.join("\n"));
+ setCopyState(copied ? "copied" : "failed");
+ window.setTimeout(() => setCopyState("idle"), 1600);
+ };
+
+ return (
+
+ {line || "\u00A0"}
+
+ ))}
+
+
+
+
+
+
+
+ 05 - quickstart
+ + From zero to a fleet -{" "} + in three commands. +
+
+
+ + Live transcript. Click a tab - the daemon types it back. +
+
+
+
+
+
+
+
+
+
+
+ ao - {current.label.toLowerCase()}
+
+
+
+ {tabs.map((tab) => {
+ const isActive = tab.id === active;
+ return (
+
+ );
+ })}
+
+
+
+