+
+
+ {title}
+
+
+
+
+ {title}
+
+ {description}
+
+ 0{order + 1}
+
+ + {step.title} +
+{step.description}
+
+
+
+
+
+
+ {sourceParts(code, "\n").map(({ text: line, id }, i) => (
+
+
+ {highlight(line)}
+ {"\n"}
+
+ ))}
+
+
+
+ {messages[copyState]}
+
+ Full setup
+
+
+ );
+}
diff --git a/website/src/components/diagram-edges.tsx b/website/src/components/diagram-edges.tsx
new file mode 100644
index 0000000..a5be967
--- /dev/null
+++ b/website/src/components/diagram-edges.tsx
@@ -0,0 +1,183 @@
+import { motion } from "motion/react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+
+export interface DiagramEdge {
+ active?: boolean;
+ color?: string;
+ from: string;
+ to: string;
+}
+interface Point {
+ x: number;
+ y: number;
+}
+type Connection = DiagramEdge & { path: string; start: Point; end: Point };
+
+type Side = "left" | "right" | "top" | "bottom";
+function nodePoint(node: Element, side: Side, root: DOMRect): Point {
+ const box = node.getBoundingClientRect();
+ let x = box.left + box.width / 2;
+ let y = box.top + box.height / 2;
+ if (side === "left") {
+ x = box.left;
+ }
+ if (side === "right") {
+ x = box.right;
+ }
+ if (side === "top") {
+ y = box.top;
+ }
+ if (side === "bottom") {
+ y = box.bottom;
+ }
+ return { x: x - root.left, y: y - root.top };
+}
+function connectionPath(
+ start: Point,
+ end: Point,
+ vertical: boolean,
+ workerBranch: boolean
+) {
+ if (workerBranch) {
+ // The mobile worker bus occupies a reserved gutter, never another card.
+ const bus = end.x - 18;
+ const turn = start.y + 18;
+ return `M${start.x},${start.y} V${turn} H${bus} V${end.y} H${end.x}`;
+ }
+ if (vertical) {
+ const mid = (start.y + end.y) / 2;
+ return `M${start.x},${start.y} C${start.x},${mid} ${end.x},${mid} ${end.x},${end.y}`;
+ }
+ const mid = (start.x + end.x) / 2;
+ return `M${start.x},${start.y} C${mid},${start.y} ${mid},${end.y} ${end.x},${end.y}`;
+}
+function measureConnections(
+ container: HTMLElement,
+ edges: DiagramEdge[]
+): Connection[] {
+ const root = container.getBoundingClientRect();
+ const vertical =
+ getComputedStyle(container)
+ .getPropertyValue("--diagram-direction")
+ .trim() === "vertical";
+ const nodes = new Map(
+ [...container.querySelectorAll
+ {cards.map(({ step, markerRef }, order) => (
+
+ + Fragments assume an initialized store, a running worker, and a unique + job ID. Your application supplies its model and tool calls. +
+
+
+ );
+}
+
+function ProgressIllustration({ phase }: Frame) {
+ const reduce = useReducedMotion();
+ const completed = [3, 7, 12, 18, 24, 24][phase];
+ return (
+
+ SHARED START BUDGET
+ 6 / window
+
+
+ {[0, 1, 2, 3, 4, 5].map((i) => (
+
+
+
+ ))}
+
+
+ {used} starts admitted
+ {6 - used} starts left
+
+
+
+ {status}
+
+
+
+
+
+
+
+ );
+}
+
+function QuarantineIllustration({ phase }: Frame) {
+ const rows = [
+ { id: "run_82a", worker: "worker-01" },
+ { id: "run_94b", worker: "worker-03" },
+ { id: "run_c17", worker: "worker-02" },
+ ];
+ const count = Math.min(phase + 1, 3),
+ isolated = phase >= 3;
+ return (
+
+
+ Sources reviewed
+
+
+ {completed}
+
+ / 24
+
+
+
+
+ {completed === 24
+ ? "Research saved. Ready for synthesis."
+ : "Reading evidence and recording progress."}
+
+
+
+ );
+}
+
+function WorkflowIllustration({ phase, playing }: Frame) {
+ const status = (step: number) => {
+ if (phase > step) {
+ return "done";
+ }
+ return phase === step ? "active" : "pending";
+ };
+ const node = (id: string, label: string, step: number) => (
+
+
+
+
+
+ Illustrative threshold · same payload fingerprint
+
+
+
+ a7f2
+
+
+ {rows.slice(0, count).map((row) => (
+
+
+
+ ))}
+
+
+ {row.id}
+ {row.worker}
+ crashed
+
+ {status(step) === "done" ? (
+
+ );
+ return (
+
+
+ );
+}
+
+function scheduleStatus(day: number, phase: number) {
+ if (day < phase) {
+ return "completed";
+ }
+ return day === phase ? "enqueued" : "scheduled";
+}
+function ScheduleIcon({ status }: { status: string }) {
+ if (status === "completed") {
+ return
+ {node("research", "Research", 1)}
+ {node("analyze", "Analyze", 1)}
+
+ {node("report", "Report", 2)}
+
+
+ );
+}
+
+export function FeatureShowcase() {
+ const [paused, setPaused] = useState(false);
+ const reduce = useReducedMotion();
+ const togglePaused = useCallback(() => setPaused((current) => !current), []);
+ const action = paused ? "Play" : "Pause";
+ const controlLabel = reduce
+ ? "Feature illustrations use reduced motion"
+ : `${action} feature illustrations`;
+ const controlText = reduce ? "Reduced motion" : `${action} illustrations`;
+ return (
+
+
+ 09:00 UTC
+
+ {days.map((day, i) => (
+
+
+ {day}
+
+
+ {scheduleStatus(i, phase)}
+
+ ))}
+
+
+ );
+}
diff --git a/website/src/components/fleet-demo.tsx b/website/src/components/fleet-demo.tsx
new file mode 100644
index 0000000..a102e5d
--- /dev/null
+++ b/website/src/components/fleet-demo.tsx
@@ -0,0 +1,357 @@
+import {
+ ArrowRight,
+ Check,
+ Gauge,
+ Minus,
+ Pause,
+ Play,
+ Plus,
+ RotateCcw,
+ Server,
+ ShieldCheck,
+ StepForward,
+ Waves,
+ Zap,
+} from "lucide-react";
+import { useReducedMotion } from "motion/react";
+import { type ChangeEvent, useCallback, useEffect, useState } from "react";
+import { agentSnapshot } from "../lib/simulation";
+import { DiagramEdges } from "./diagram-edges";
+
+const tenantColors = ["#5593cc", "#9392c9", "#6fa993"];
+const tenants = ["Acme", "Orbit", "Nova"];
+export function Mark({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+export function FleetDemo() {
+ const [workers, setWorkers] = useState(3);
+ const [rate, setRate] = useState(6);
+ const [concurrency, setConcurrency] = useState(8);
+ const [flooded, setFlooded] = useState(false);
+ const [paused, setPaused] = useState(false);
+ const [tick, setTick] = useState(0);
+ const reduce = useReducedMotion();
+ const playing = !(paused || reduce);
+ useEffect(() => {
+ if (!playing) {
+ return;
+ }
+ const interval = setInterval(() => setTick((t) => t + 1), 3000);
+ return () => clearInterval(interval);
+ }, [playing]);
+ const round = agentSnapshot({ concurrency, flooded, rate, workers }, tick);
+ const activeWorkers = Array.from({ length: workers }, (_, i) => ({
+ id: `worker-${i}`,
+ slots: round.assignments.slice(i * 2, i * 2 + 2),
+ }));
+ const reset = useCallback(() => {
+ setWorkers(3);
+ setRate(6);
+ setConcurrency(8);
+ setFlooded(false);
+ setTick(0);
+ }, []);
+ const togglePaused = useCallback(() => setPaused((p) => !p), []);
+ const advance = useCallback(() => {
+ setPaused(true);
+ setTick((t) => t + 1);
+ }, []);
+ const removeWorker = useCallback(() => {
+ setWorkers((w) => Math.max(1, w - 1));
+ setTick(0);
+ }, []);
+ const addWorker = useCallback(() => {
+ setWorkers((w) => Math.min(6, w + 1));
+ setTick(0);
+ }, []);
+ const changeRate = useCallback((event: ChangeEvent
+
+
+
+
+ {(frame) =>
+
+ {(frame) => (
+ <>
+
+
+
+ {(frame) =>
+
+ {(frame) =>
+
+ {(frame) =>
+
+ {(frame) =>
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/website/src/components/resume-demo.tsx b/website/src/components/resume-demo.tsx
new file mode 100644
index 0000000..0fd9ad6
--- /dev/null
+++ b/website/src/components/resume-demo.tsx
@@ -0,0 +1,119 @@
+import { ArrowRight, Check, Circle, RotateCcw, Unplug } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import { useCallback, useState } from "react";
+import { DiagramEdges } from "./diagram-edges";
+
+const stages = ["running", "interrupted", "resumed", "done"] as const;
+type Stage = (typeof stages)[number];
+const stageInfo = {
+ done: {
+ action: "Try again",
+ icon: RotateCcw,
+ label: "Completed",
+ next: "running",
+ },
+ interrupted: {
+ action: "Resume job",
+ icon: ArrowRight,
+ label: "Worker disconnected",
+ next: "resumed",
+ },
+ resumed: {
+ action: "Finish research",
+ icon: ArrowRight,
+ label: "Resumed · attempt 2",
+ next: "done",
+ },
+ running: {
+ action: "Disconnect worker",
+ icon: Unplug,
+ label: "Running · attempt 1",
+ next: "interrupted",
+ },
+} as const;
+function stepDescription(stage: Stage, index: number) {
+ if (index === 0 && (stage === "resumed" || stage === "done")) {
+ return "Already complete · skipped on retry";
+ }
+ if (index === 0 || stage === "done") {
+ return "Checkpoint saved";
+ }
+ if (index !== 1) {
+ return "Waiting for previous step";
+ }
+ if (stage === "interrupted") {
+ return "Interrupted · retry this step";
+ }
+ if (stage === "resumed") {
+ return "Retrying synthesis on a new worker";
+ }
+ return "Reviewing source material…";
+}
+export function ResumeDemo({ autoStage }: { autoStage?: number } = {}) {
+ const [manualStage, setManualStage] = useState
+
+
+
+ Long-running agents. One shared gate.
+
+
+ INTERACTIVE SIMULATION
+
+
+
+
+
+ ({
+ active: round.admitted[i] > 0,
+ color: tenantColors[i],
+ from: `tenant-${i}`,
+ to: "gate",
+ })),
+ ...activeWorkers.map(({ slots, id }) => ({
+ active: slots.length > 0,
+ from: "gate",
+ to: id,
+ })),
+ ]}
+ playing={playing && round.elapsedMinutes === 0}
+ />
+
+
+
+ 01 / QUEUED AGENT RUNS
+
+ {tenants.map((name, i) => (
+
+
+
+ ))}
+
+
+
+ {name}
+
+
+ {round.demand[i]} queued
+
+
+
+ {[0, 1, 2, 3, 4, 5, 6, 7]
+ .slice(0, Math.min(round.demand[i], 8))
+ .map((j) => (
+
+ ))}
+ {round.demand[i] > 8 && (
+
+ +{round.demand[i] - 8}
+
+ )}
+
+
+ {round.admitted[i]} admitted
+ {round.demand[i] - round.admitted[i]} waiting
+
+
+
+
+
+
+ headgate
+ One atomic decision.
+
+
+
+
+
+
+
+
+
+
+ {round.total} agent runs admitted
+
+
+
+ 02 / YOUR WORKER FLEET
+
+ {activeWorkers.map(({ slots, id }, i) => (
+
+
+
+ ))}
+
+ worker-{String(i + 1).padStart(2, "0")}
+
+ {slots.length ? round.stage : "Waiting for an agent run"}
+
+
+
+ {[0, 1].map((slot) => (
+
+ ))}
+
+
+ {round.total} agents running
+ {workers * 2 - round.total} slots available
+
+
+
+ Admitted jobs
+
+
+ Waiting for admission
+
+
+ Agent elapsed: {String(round.elapsedMinutes).padStart(2, "0")}:00 ·
+ simulated
+
+
+
+
+
+ Workers
+
+
+
+
+
+
+
+
+
+
+
+ Time-compressed simulation: 12-minute agent runs, with 2 minutes per
+ tick. Controls restart the scenario. Limits apply to job starts, not
+ model tokens.
+
+
+
+ );
+}
diff --git a/website/src/components/theme-toggle.tsx b/website/src/components/theme-toggle.tsx
new file mode 100644
index 0000000..d96d926
--- /dev/null
+++ b/website/src/components/theme-toggle.tsx
@@ -0,0 +1,59 @@
+import { Moon, Sun } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+const storageKey = "headgate-website-theme";
+type Theme = "light" | "dark";
+
+export function ThemeToggle() {
+ const [theme, setTheme] = useState
+ research_agent
+
+ {stageInfo[stage].label}
+
+
+
+
+
+
+ {done ?
+ );
+ })}
+
+ {name}
+ {stepDescription(stage, i)}
+
+ {done === true && saved}
+
+ {stage === "done" ? "3" : "1"} of 3 steps complete
+
+
+
+
+ ILLUSTRATIVE STEP REPLAY
+ {autoStage === undefined && (
+
+ )}
+
+
+
+
+
+ headgate
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ GUARANTEES WITH SOMETHING BEHIND THEM
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Open source. Built for the whole
+ fleet.
+ Background jobs.
+
+
+
+ Background jobs.
+
+ Fleet-wide control.
+
+
+ Shared rate limits. Fair tenants. Workers in sync.
+
Background jobs for{" "}
+ Go and Rust, on the database
+ you already use.
+
+ Apache 2.0
+ +
+ Self-hosted
+ +
+ Go & Rust
+
+
+ {["top-left", "top-right", "bottom-left", "bottom-right"].map(
+ (corner) => (
+
+ )
+ )}
+
+
+ YOUR STORE. YOUR INFRASTRUCTURE.
+
+
+
+
+
+
+
+
+
+
+
+ 01 — ADMISSION, NOT JUST DEQUEUE
+
+
+ One fleet.
+
+
+
+ One fleet.
+
+ One set of rules.
+
+ + Every worker asks the same question: “What am I allowed to run?” + Headgate evaluates your policies atomically inside the store, in + the same operation that claims the job. +
+
+
+
+
+
+
+
+
+
+
+
+ Limits that stay shared.
++ Add workers without multiplying your rate budget. Concurrency + and rate limits apply across the entire fleet. +
+ + Explore fleet policiesA fair turn for every tenant.
++ A busy tenant shouldn’t drown out everyone else. Quiet tenants + get service, and spare capacity stays useful. +
+ + Understand admissionBad jobs stop spreading.
++ Correlate repeated crashes by payload fingerprint. Quarantine + troublesome work before it keeps taking down workers. +
+ + See quarantine controls
+
+
+
+ 02 — WRITE THE JOB. WE’LL COORDINATE.
+
+
+ Your language.
+
+
+
+ Your language.
+
+ Your kind of job.
+
+ + A research agent that runs for minutes. A multi-step analysis. + Define a typed handler and let Headgate coordinate execution + across your fleet. +
+-
+
-
+
First-class Go and Rust SDKs +
+ -
+
Shared wire format and conformance suite +
+ -
+
Install only the backend you need +
+
+
+
+ 03 — ROOM FOR THE COMPLEX PARTS
+
+ Start with a job.
+
+
+
+ Start with a job.
+
+ Keep building.
+
+ + Research that takes minutes. Agent runs that span hours. Explore + the mechanics that keep the work moving. +
+
+ 04 — SEE WHAT’S REALLY HAPPENING
+
+ “Why isn’t this
+
+
+
+ “Why isn’t this
+
+ job running?”
+
+ + A question your queue should answer. Inspect admission + decisions, follow workflows, and manage your fleet from the + embedded console. +
+ + Meet the operations console
+
+
+ 
+
+
+
+
+
+
+
+
+ headgate / operations
+
+
+
+ Trust is built.
+
+
+
+
+ Trust is built.
+
+ Then tested.
+
+
+
+ + Two languages. Three stores. One shared behavioral contract. + Headgate’s conformance suite exercises admission, lifecycle, + and cross-language behavior against real backends. +
+ + Explore the verification suite
+ SUPPORTERS
+
+ Help build what’s next.
++ Headgate is early, open source, and looking for its first + supporters. Help us keep building reliable background jobs. +
+ + Get involved on GitHub{" "} + + +
+
+
+ Your logo could be here
+
+
+ A place for our first supporter.
+
+
+ Your next job starts here.
+Pick your language. Bring your database. Let’s get to work.
+ + Get started with Headgate