From 451632b544f494bf6411809fcac0af763fcc43dc Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 00:17:35 -0700
Subject: [PATCH 01/13] [SLOP(claude-fable-5)] feat(website): cookbook template
 registry, JSON-LD, and header nav

---
 website/src/components/v2/Header.tsx       |  14 +++
 website/src/data/templates/shared.ts       | 103 ++++++++++++++++++++-
 website/src/layouts/MarketingLayout.astro  |   5 +-
 website/src/pages/cookbook/[...slug].astro |  29 ++++++
 website/src/pages/cookbook/index.astro     |   1 +
 5 files changed, 147 insertions(+), 5 deletions(-)

diff --git a/website/src/components/v2/Header.tsx b/website/src/components/v2/Header.tsx
index 4e7c217715..c283139335 100644
--- a/website/src/components/v2/Header.tsx
+++ b/website/src/components/v2/Header.tsx
@@ -466,6 +466,14 @@ export function Header({
 										</TextNavItem>
 									</>
 								)}
+								{!isLightTheme && (
+									<TextNavItem
+										href="/cookbook"
+										ariaCurrent={active === "cookbook" ? "page" : undefined}
+									>
+										Cookbook
+									</TextNavItem>
+								)}
 								{!isLightTheme && (
 									<TextNavItem
 										href="/cloud"
@@ -543,6 +551,12 @@ export function Header({
 					>
 						Documentation
 					</TextNavItem>
+					<TextNavItem
+						href="/cookbook"
+						ariaCurrent={active === "cookbook" ? "page" : undefined}
+					>
+						Cookbook
+					</TextNavItem>
 					<TextNavItem
 						href="/cloud"
 						ariaCurrent={active === "pricing" ? "page" : undefined}
diff --git a/website/src/data/templates/shared.ts b/website/src/data/templates/shared.ts
index b7f5f6ce85..31dba0b69c 100644
--- a/website/src/data/templates/shared.ts
+++ b/website/src/data/templates/shared.ts
@@ -22,6 +22,103 @@ export interface Template {
 
 // Local fallback registry for cookbook pages.
 // Entries can be expanded as cookbook templates are added.
-export const templates: Template[] = [];
-export const TAGS: Tag[] = [];
-export const TECHNOLOGIES: Technology[] = [];
+export const templates: Template[] = [
+	{
+		name: "ai-agent",
+		displayName: "AI Agent",
+		description:
+			"Queue-driven AI agents where each Rivet Actor keeps its own conversation memory and streams AI SDK responses to the browser as events.",
+		tags: ["ai", "realtime"],
+		technologies: ["react", "ai-sdk"],
+		providers: { vercel: null },
+	},
+	{
+		name: "chat-room",
+		displayName: "Chat Room",
+		description:
+			"Realtime chat where each room is its own Rivet Actor, persisting message history in the actor's SQLite database and broadcasting new messages to connected clients.",
+		tags: ["realtime"],
+		technologies: ["react", "sqlite", "websocket"],
+		providers: { vercel: null },
+	},
+	{
+		name: "collaborative-document",
+		displayName: "Collaborative Document",
+		description:
+			"A shared text editor where each document is a Rivet Actor that relays Yjs CRDT updates and awareness to every collaborator and persists the merged snapshot.",
+		tags: ["realtime", "collaboration"],
+		technologies: ["react", "yjs", "websocket"],
+		providers: { vercel: null },
+	},
+	{
+		name: "cursors",
+		displayName: "Live Cursors",
+		description:
+			"Tracks live cursor positions per connection with connection state and broadcasts moves to every client as typed events.",
+		tags: ["realtime", "collaboration"],
+		technologies: ["react", "websocket"],
+		providers: { vercel: null },
+	},
+	{
+		name: "cursors-raw-websocket",
+		displayName: "Live Cursors (Raw WebSocket)",
+		description:
+			"A collaborative cursor room built on the raw WebSocket handler with a custom JSON message protocol.",
+		tags: ["realtime", "collaboration"],
+		technologies: ["react", "websocket"],
+		providers: { vercel: null },
+	},
+	{
+		name: "per-tenant-database",
+		displayName: "Per-Tenant Database",
+		description:
+			"Each tenant maps to its own Rivet Actor keyed by tenant id, so actor state acts as a fully isolated per-tenant database with live updates.",
+		tags: ["data", "realtime"],
+		technologies: ["react"],
+		providers: { vercel: null },
+	},
+	{
+		name: "sqlite-drizzle",
+		displayName: "SQLite + Drizzle",
+		description:
+			"Drizzle ORM with actor-scoped SQLite using a typed schema and generated migrations.",
+		tags: ["data"],
+		technologies: ["sqlite"],
+		providers: { vercel: null },
+		noFrontend: true,
+	},
+	{
+		name: "scheduling",
+		displayName: "Scheduling",
+		description:
+			"Schedule actor actions to run after a delay or at an exact timestamp, with durable timers that survive actor restarts.",
+		tags: ["jobs"],
+		technologies: ["react"],
+		providers: { vercel: null },
+	},
+	{
+		name: "sandbox-coding-agent",
+		displayName: "Sandbox Coding Agent",
+		description:
+			"Each agent actor drives a coding agent running inside an isolated sandbox, with Docker, Daytona, or E2B providers.",
+		tags: ["ai"],
+		technologies: ["react"],
+		providers: { vercel: null },
+	},
+];
+
+export const TAGS: Tag[] = [
+	{ name: "ai", displayName: "AI" },
+	{ name: "realtime", displayName: "Realtime" },
+	{ name: "collaboration", displayName: "Collaboration" },
+	{ name: "data", displayName: "Data" },
+	{ name: "jobs", displayName: "Jobs" },
+];
+
+export const TECHNOLOGIES: Technology[] = [
+	{ name: "react", displayName: "React" },
+	{ name: "sqlite", displayName: "SQLite" },
+	{ name: "yjs", displayName: "Yjs" },
+	{ name: "ai-sdk", displayName: "AI SDK" },
+	{ name: "websocket", displayName: "WebSocket" },
+];
diff --git a/website/src/layouts/MarketingLayout.astro b/website/src/layouts/MarketingLayout.astro
index d7c9c1e24b..b6e98cd99e 100644
--- a/website/src/layouts/MarketingLayout.astro
+++ b/website/src/layouts/MarketingLayout.astro
@@ -8,13 +8,14 @@ interface Props {
 	canonicalUrl?: string;
 	ogImage?: string;
 	keywords?: string[];
+	active?: "product" | "docs" | "cookbook" | "blog" | "pricing" | "learn";
 }
 
-const { title, description, canonicalUrl, ogImage, keywords } = Astro.props;
+const { title, description, canonicalUrl, ogImage, keywords, active } = Astro.props;
 const pathname = Astro.url.pathname;
 ---
 
 <BaseLayout title={title} description={description} canonicalUrl={canonicalUrl} ogImage={ogImage} keywords={keywords}>
-	<Header variant="floating" initialPathname={pathname} client:load />
+	<Header variant="floating" initialPathname={pathname} active={active} client:load />
 	<slot />
 </BaseLayout>
diff --git a/website/src/pages/cookbook/[...slug].astro b/website/src/pages/cookbook/[...slug].astro
index 378973f0fc..97b7472c17 100644
--- a/website/src/pages/cookbook/[...slug].astro
+++ b/website/src/pages/cookbook/[...slug].astro
@@ -45,6 +45,32 @@ const slugPath = entry.id.replace(/\/index$/, "");
 const canonicalUrl = `https://rivet.dev/cookbook/${slugPath}/`;
 const skillId = slugPath.replaceAll("/", "-");
 
+const breadcrumbSchema = {
+	"@context": "https://schema.org",
+	"@type": "BreadcrumbList",
+	"itemListElement": [
+		{ name: "Home", url: "https://rivet.dev/" },
+		{ name: "Cookbook", url: "https://rivet.dev/cookbook/" },
+		{ name: title, url: canonicalUrl },
+	].map((item, index) => ({
+		"@type": "ListItem",
+		"position": index + 1,
+		"name": item.name,
+		"item": item.url,
+	})),
+};
+
+// The Organization node is defined in BaseLayout's global @graph.
+const techArticleSchema = {
+	"@context": "https://schema.org",
+	"@type": "TechArticle",
+	"headline": title,
+	"description": description,
+	"url": canonicalUrl,
+	"author": { "@id": "https://rivet.dev/#organization" },
+	"publisher": { "@id": "https://rivet.dev/#organization" },
+};
+
 function resolveTemplates(names?: string[]): Array<Template & { githubUrl: string }> {
 	if (!names?.length) return [];
 	const resolved = [];
@@ -78,7 +104,10 @@ const resolvedTemplates = resolveTemplates(templates);
 	title={`${title} - Rivet`}
 	description={description}
 	canonicalUrl={canonicalUrl}
+	active="cookbook"
 >
+	<script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
+	<script type="application/ld+json" set:html={JSON.stringify(techArticleSchema)} />
 	<main class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
 		<div class="relative overflow-hidden pb-12 pt-32 md:pt-48">
 			<div class="mx-auto max-w-7xl px-6">
diff --git a/website/src/pages/cookbook/index.astro b/website/src/pages/cookbook/index.astro
index 3108ae74a1..269f6fee1f 100644
--- a/website/src/pages/cookbook/index.astro
+++ b/website/src/pages/cookbook/index.astro
@@ -51,6 +51,7 @@ const allTechnologies = Array.from(new Set(pages.flatMap((p) => p.technologies))
 	title="Cookbooks - Rivet"
 	description="Step-by-step guides that link to working Rivet templates and example code."
 	canonicalUrl="https://rivet.dev/cookbook/"
+	active="cookbook"
 >
 	<CookbookPageContent pages={pages} allTags={allTags} allTechnologies={allTechnologies} client:load />
 </MarketingLayout>

From 9be949a61e6e0592659a86f6258b57b1e698af0d Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 01:51:17 -0700
Subject: [PATCH 02/13] [SLOP(claude-fable-5)] feat(website): FAQ system with
 FAQPage JSON-LD on cloud, actors, and agentOS pricing

---
 website/src/components/faq/FaqJsonLd.astro    |  25 ++++
 website/src/components/faq/FaqSection.tsx     | 110 ++++++++++++++++++
 .../marketing/pricing/PricingPageClient.tsx   |   5 +-
 .../solutions/AgentOSPricingPage.tsx          |  60 ++--------
 website/src/data/faqs/actors.ts               |  46 ++++++++
 website/src/data/faqs/agent-os-pricing.ts     |  31 +++++
 website/src/data/faqs/cloud.ts                |  47 ++++++++
 website/src/data/faqs/types.ts                |  29 +++++
 website/src/pages/actors.astro                |   6 +
 website/src/pages/agent-os/pricing.astro      |   3 +
 website/src/pages/cloud.astro                 |   3 +
 11 files changed, 314 insertions(+), 51 deletions(-)
 create mode 100644 website/src/components/faq/FaqJsonLd.astro
 create mode 100644 website/src/components/faq/FaqSection.tsx
 create mode 100644 website/src/data/faqs/actors.ts
 create mode 100644 website/src/data/faqs/agent-os-pricing.ts
 create mode 100644 website/src/data/faqs/cloud.ts
 create mode 100644 website/src/data/faqs/types.ts

diff --git a/website/src/components/faq/FaqJsonLd.astro b/website/src/components/faq/FaqJsonLd.astro
new file mode 100644
index 0000000000..30baef9d7c
--- /dev/null
+++ b/website/src/components/faq/FaqJsonLd.astro
@@ -0,0 +1,25 @@
+---
+// Emits FAQPage JSON-LD for a page's FAQ items. Usage rules:
+// - At most one FaqJsonLd per page, and only from .astro pages, so each URL
+//   has exactly one FAQPage block.
+// - The same items array must also be rendered visibly on the page through
+//   FaqList or FaqSection. Google requires schema content to be visible.
+// - FAQPage coexists with Product, Article, and other schema types as sibling
+//   script tags. Never nest it inside another schema object.
+// - Since August 2023 Google shows FAQ rich results only for authoritative
+//   government and health sites. The value here is long-tail content and
+//   AI-answer extraction; the schema is nearly free since it derives from the
+//   same data module as the visible rendering.
+import { faqPageSchema, type FaqItem } from '@/data/faqs/types';
+
+interface Props {
+	items: FaqItem[];
+}
+
+const { items } = Astro.props;
+
+// Escape < so HTML in answer text can never terminate the script element.
+const json = JSON.stringify(faqPageSchema(items)).replace(/</g, '\\u003c');
+---
+
+<script type="application/ld+json" set:html={json} />
diff --git a/website/src/components/faq/FaqSection.tsx b/website/src/components/faq/FaqSection.tsx
new file mode 100644
index 0000000000..5a0d500b35
--- /dev/null
+++ b/website/src/components/faq/FaqSection.tsx
@@ -0,0 +1,110 @@
+import type { FaqItem } from '@/data/faqs/types';
+
+// These components must stay hook-free with no framer-motion so they can be
+// server-rendered by Astro without a client directive. Disclosure behavior
+// comes from native <details>/<summary>, which works with zero JavaScript.
+
+type FaqTheme = 'dark' | 'light';
+
+const themeStyles: Record<
+	FaqTheme,
+	{
+		divider: string;
+		question: string;
+		answer: string;
+		answerLinks: string;
+		icon: string;
+		heading: string;
+		sectionBorder: string;
+	}
+> = {
+	dark: {
+		divider: 'divide-white/10 border-white/10',
+		question: 'text-white',
+		answer: 'text-zinc-400',
+		answerLinks: '[&_a]:text-white [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:text-zinc-300 [&_strong]:text-zinc-200 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:mt-1',
+		icon: 'text-zinc-500',
+		heading: 'text-white',
+		sectionBorder: 'border-white/10',
+	},
+	light: {
+		divider: 'divide-zinc-200 border-zinc-200',
+		question: 'text-zinc-900',
+		answer: 'text-zinc-500',
+		answerLinks: '[&_a]:text-zinc-900 [&_a]:underline [&_a]:underline-offset-2 [&_a:hover]:text-zinc-600 [&_strong]:text-zinc-700 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:mt-1',
+		icon: 'text-zinc-400',
+		heading: 'text-zinc-900',
+		sectionBorder: 'border-zinc-200',
+	},
+};
+
+interface FaqListProps {
+	items: FaqItem[];
+	theme?: FaqTheme;
+}
+
+export function FaqList({ items, theme = 'dark' }: FaqListProps) {
+	const styles = themeStyles[theme];
+
+	return (
+		<div className={`divide-y border-b ${styles.divider}`}>
+			{items.map((item) => (
+				<details key={item.question} className="group py-5">
+					<summary
+						className={`flex cursor-pointer list-none items-center justify-between gap-4 text-base font-medium [&::-webkit-details-marker]:hidden ${styles.question}`}
+					>
+						{item.question}
+						<svg
+							viewBox="0 0 16 16"
+							aria-hidden="true"
+							className={`h-4 w-4 flex-shrink-0 transition-transform duration-200 group-open:rotate-45 ${styles.icon}`}
+						>
+							<path
+								d="M8 2v12M2 8h12"
+								stroke="currentColor"
+								strokeWidth="1.5"
+								strokeLinecap="round"
+							/>
+						</svg>
+					</summary>
+					{/* Answers are first-party static strings from src/data/faqs, so rendering them as HTML is safe. */}
+					<div
+						className={`mt-3 text-sm leading-relaxed ${styles.answer} ${styles.answerLinks}`}
+						dangerouslySetInnerHTML={{ __html: item.answerHtml }}
+					/>
+				</details>
+			))}
+		</div>
+	);
+}
+
+interface FaqSectionProps {
+	items: FaqItem[];
+	title?: string;
+	theme?: FaqTheme;
+	id?: string;
+	className?: string;
+}
+
+export function FaqSection({
+	items,
+	title = 'Frequently asked questions',
+	theme = 'dark',
+	id,
+	className = '',
+}: FaqSectionProps) {
+	const styles = themeStyles[theme];
+
+	return (
+		<section id={id} className={`border-t px-6 py-24 ${styles.sectionBorder} ${className}`}>
+			<div className="mx-auto max-w-3xl">
+				<h2
+					className={`mb-12 text-center text-3xl font-normal tracking-tight md:text-4xl ${styles.heading}`}
+				>
+					{title}
+				</h2>
+				<FaqList items={items} theme={theme} />
+			</div>
+		</section>
+	);
+}
diff --git a/website/src/components/marketing/pricing/PricingPageClient.tsx b/website/src/components/marketing/pricing/PricingPageClient.tsx
index 74d1d6d8c7..8c5d42ee40 100644
--- a/website/src/components/marketing/pricing/PricingPageClient.tsx
+++ b/website/src/components/marketing/pricing/PricingPageClient.tsx
@@ -19,6 +19,8 @@ import {
 import rivetLogoWhite from '@/images/rivet-logos/icon-white.svg';
 import imgYC from '@/images/logos/yc.svg';
 import imgA16z from '@/images/logos/a16z.svg';
+import { FaqSection } from '@/components/faq/FaqSection';
+import { cloudFaqs } from '@/data/faqs/cloud';
 
 // --- Page Sections ---
 
@@ -534,7 +536,7 @@ const Pricing = () => {
     const plans = isCloud ? cloudPlans : selfHostedPlans;
 
     const usagePricing = [
-        { resource: "Awake Actors", price: "$0.05", unit: "per 1k awake actor-hours" },
+        { resource: "Awake Actors", price: "$0.05", unit: "per 1k Awake Actor Hours" },
         { resource: "State Storage", price: "$0.40", unit: "per GB-month" },
         { resource: "Reads*", price: "$0.20", unit: "per million reads" },
         { resource: "Writes*", price: "$1", unit: "per million writes" },
@@ -696,6 +698,7 @@ export default function PricingPageClient() {
     <div className="min-h-screen bg-black text-zinc-300 font-sans selection:bg-[#FF4500]/30 selection:text-orange-200">
       <main>
         <Pricing />
+        <FaqSection items={cloudFaqs} />
       </main>
     </div>
   );
diff --git a/website/src/components/marketing/solutions/AgentOSPricingPage.tsx b/website/src/components/marketing/solutions/AgentOSPricingPage.tsx
index cd7bbc6e86..c1d7e3ed25 100644
--- a/website/src/components/marketing/solutions/AgentOSPricingPage.tsx
+++ b/website/src/components/marketing/solutions/AgentOSPricingPage.tsx
@@ -11,6 +11,8 @@ import {
 	Terminal,
 	Copy,
 } from 'lucide-react';
+import { FaqSection } from '@/components/faq/FaqSection';
+import { agentOsPricingFaqs } from '@/data/faqs/agent-os-pricing';
 
 const pricingTiers = [
 	{
@@ -166,55 +168,6 @@ const PricingCard = ({ tier, index, showCloudNotice = false }: { tier: typeof pr
 	);
 };
 
-const FAQSection = () => {
-	const faqs = [
-		{
-			question: 'Is agentOS really free?',
-			answer: 'Yes. agentOS is open source under the Apache 2.0 license. You can run it on your own infrastructure at no cost. Rivet Cloud is a paid service for those who want managed infrastructure.',
-		},
-		{
-			question: 'What is the difference between self-hosted and Rivet Cloud?',
-			answer: 'Self-hosted means you run agentOS on your own servers. You handle deployment, scaling, and maintenance. Rivet Cloud is a fully managed service where we handle all of that for you.',
-		},
-		{
-			question: 'Can I switch from self-hosted to Rivet Cloud later?',
-			answer: 'Absolutely. agentOS uses the same API whether you self-host or use Rivet Cloud. You can migrate with minimal code changes.',
-		},
-		{
-			question: 'What support is available for open source users?',
-			answer: 'Open source users can get help through our Discord community and GitHub issues. Enterprise customers receive dedicated support channels with guaranteed response times.',
-		},
-		{
-			question: 'Do you offer volume discounts?',
-			answer: 'Yes. Contact our sales team for custom pricing on high-volume usage or enterprise deployments.',
-		},
-	];
-
-	return (
-		<motion.section
-			initial={{ opacity: 0, y: 20 }}
-			whileInView={{ opacity: 1, y: 0 }}
-			viewport={{ once: true }}
-			transition={{ duration: 0.5 }}
-			className="border-t border-zinc-200 px-6 py-24"
-		>
-			<div className="mx-auto max-w-3xl">
-				<h2 className="mb-12 text-center text-3xl font-normal tracking-tight text-zinc-900 md:text-4xl">
-					Frequently asked questions
-				</h2>
-				<div className="space-y-6">
-					{faqs.map((faq) => (
-						<div key={faq.question} className="border-b border-zinc-200 pb-6">
-							<h3 className="mb-2 text-lg font-medium text-zinc-900">{faq.question}</h3>
-							<p className="text-sm leading-relaxed text-zinc-500">{faq.answer}</p>
-						</div>
-					))}
-				</div>
-			</div>
-		</motion.section>
-	);
-};
-
 const CTASection = () => (
 	<motion.section
 		initial={{ opacity: 0, y: 20 }}
@@ -283,7 +236,14 @@ export default function AgentOSPricingPage() {
 					</div>
 				</section>
 
-				<FAQSection />
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5 }}
+				>
+					<FaqSection items={agentOsPricingFaqs} theme="light" />
+				</motion.div>
 				<CTASection />
 			</main>
 		</div>
diff --git a/website/src/data/faqs/actors.ts b/website/src/data/faqs/actors.ts
new file mode 100644
index 0000000000..ee6154c588
--- /dev/null
+++ b/website/src/data/faqs/actors.ts
@@ -0,0 +1,46 @@
+import type { FaqItem } from './types';
+
+// FAQ content for the Rivet Actors marketing page. Rendered statically on
+// pages/actors.astro and emitted as FAQPage JSON-LD from the same page.
+export const actorsFaqs: FaqItem[] = [
+	{
+		question: 'What is a Rivet Actor?',
+		answerHtml:
+			'A Rivet Actor is a long-lived unit of compute that keeps its own state between requests. It is like a serverless function with memory and no timeouts. The common pattern is one actor per agent, per session, or per user, with state, storage, and networking included. See the <a href="https://rivet.dev/docs/actors/">Rivet Actors docs</a> for details.',
+	},
+	{
+		question: 'How are Rivet Actors different from serverless functions?',
+		answerHtml:
+			'Serverless functions are stateless and short-lived, so every invocation re-fetches data from a database and long-running work hits timeouts. A Rivet Actor remembers state between requests, holds WebSocket connections, and runs as long as it has work to do. It still sleeps when idle, so you keep the scale-to-zero economics of serverless.',
+	},
+	{
+		question: 'Do I need a separate database for actor state?',
+		answerHtml:
+			'No. State lives on the same machine as your compute, so reads and writes are fast with no database round trips. Use <a href="https://rivet.dev/docs/actors/state/">in-memory state</a> for small values and each actor\'s built-in SQLite database for large, relational, or queryable data. State is persisted, so it survives restarts, crashes, and deployments. You can still connect to an external database when you need one.',
+	},
+	{
+		question: 'How do Rivet Actors compare to Cloudflare Durable Objects?',
+		answerHtml:
+			'Cloudflare Durable Objects provide stateful serverless computing tied to the Cloudflare platform. Rivet Actors give you the same actor model capabilities as open source software that works with your existing infrastructure, so you can deploy on Kubernetes, AWS, a VPS, or Rivet Cloud without vendor lock-in. See the full <a href="https://rivet.dev/compare/rivet-vs-cloudflare-durable-objects/">Rivet vs Cloudflare Durable Objects comparison</a>.',
+	},
+	{
+		question: 'What happens when an actor is idle?',
+		answerHtml:
+			'Actors automatically sleep after a period of inactivity to free up resources. Their state is persisted, and they wake on demand when a request, message, or scheduled alarm arrives. Sleeping actors consume no compute, which makes Rivet Actors cost-efficient for bursty workloads. See the <a href="https://rivet.dev/docs/actors/lifecycle/">lifecycle docs</a> for how sleeping works.',
+	},
+	{
+		question: 'How do Rivet Actors scale?',
+		answerHtml:
+			'The core pattern is one actor per entity in your system: a user, a document, a chat room, or an agent. Each actor is small and independent, so the system scales from zero to millions of concurrent actors automatically, with instant scaling and no cold starts.',
+	},
+	{
+		question: 'Do Rivet Actors support WebSockets and realtime updates?',
+		answerHtml:
+			'Yes. Realtime is built in. Clients call actions to send data to an actor, and the actor pushes updates back over WebSockets with <a href="https://rivet.dev/docs/actors/events/">events</a>, either to specific connections or broadcast to all of them. There is no external pub/sub system or polling to manage.',
+	},
+	{
+		question: 'What languages and frameworks can I use?',
+		answerHtml:
+			'Rivet Actors are written in TypeScript or JavaScript and run on Node.js, Bun, and Deno, with a Rust SDK available in preview. Quickstarts cover <a href="https://rivet.dev/docs/actors/quickstart/">backend, React, Next.js, and Rust</a> apps. Client libraries are available for JavaScript, React, and Swift.',
+	},
+];
diff --git a/website/src/data/faqs/agent-os-pricing.ts b/website/src/data/faqs/agent-os-pricing.ts
new file mode 100644
index 0000000000..1d6aa7b14c
--- /dev/null
+++ b/website/src/data/faqs/agent-os-pricing.ts
@@ -0,0 +1,31 @@
+import type { FaqItem } from './types';
+
+// FAQ content for the agentOS pricing page. Rendered by AgentOSPricingPage
+// and emitted as FAQPage JSON-LD from pages/agent-os/pricing.astro.
+export const agentOsPricingFaqs: FaqItem[] = [
+	{
+		question: 'Is agentOS really free?',
+		answerHtml:
+			'Yes. agentOS is open source under the Apache 2.0 license. You can run it on your own infrastructure at no cost. Rivet Cloud is a paid service for those who want managed infrastructure.',
+	},
+	{
+		question: 'What is the difference between self-hosted and Rivet Cloud?',
+		answerHtml:
+			'Self-hosted means you run agentOS on your own servers. You handle deployment, scaling, and maintenance. Rivet Cloud is a fully managed service where we handle all of that for you.',
+	},
+	{
+		question: 'Can I switch from self-hosted to Rivet Cloud later?',
+		answerHtml:
+			'Absolutely. agentOS uses the same API whether you self-host or use Rivet Cloud. You can migrate with minimal code changes.',
+	},
+	{
+		question: 'What support is available for open source users?',
+		answerHtml:
+			'Open source users can get help through our Discord community and GitHub issues. Enterprise customers receive dedicated support channels with guaranteed response times.',
+	},
+	{
+		question: 'Do you offer volume discounts?',
+		answerHtml:
+			'Yes. Contact our sales team for custom pricing on high-volume usage or enterprise deployments.',
+	},
+];
diff --git a/website/src/data/faqs/cloud.ts b/website/src/data/faqs/cloud.ts
new file mode 100644
index 0000000000..1a94d2a7e3
--- /dev/null
+++ b/website/src/data/faqs/cloud.ts
@@ -0,0 +1,47 @@
+import type { FaqItem } from './types';
+
+// FAQ content for the Rivet Cloud pricing page. Rendered by PricingPageClient
+// and emitted as FAQPage JSON-LD from pages/cloud.astro. Keep numbers in sync
+// with the plan and usage pricing data in PricingPageClient.tsx.
+export const cloudFaqs: FaqItem[] = [
+	{
+		question: 'What is an Awake Actor Hour?',
+		answerHtml:
+			'An Awake Actor Hour is one Rivet Actor running for one hour. Actors automatically <a href="https://rivet.dev/docs/actors/lifecycle/">sleep when idle</a> and wake on demand, so you are only billed for the time your actors are actually awake. Usage is billed by the second and rounded up to the nearest second.',
+	},
+	{
+		question: 'What does the free plan include?',
+		answerHtml:
+			'The free plan includes 100,000 Awake Actor Hours per month, 5GB of state storage, 5 million writes per month, 200 million reads per month, 100GB of egress, and community support. It is designed for prototyping and small projects.',
+	},
+	{
+		question: 'How does usage pricing work beyond plan limits?',
+		answerHtml:
+			'Paid plans include a usage allowance, and metered pricing applies beyond it: $0.05 per 1,000 Awake Actor Hours, $0.40 per GB-month of state storage, $0.20 per million reads, $1 per million writes, and $0.15 per GB of egress. Reads and writes refer to persisted actor state, not in-memory operations within an actor. The free plan has fixed monthly limits; upgrade to Hobby to scale with usage pricing.',
+	},
+	{
+		question: 'Do sleeping actors cost money?',
+		answerHtml:
+			'No. Sleeping actors consume no Awake Actor Hours. While an actor sleeps you only pay for its persisted state storage, so workloads that idle most of the time scale to zero compute cost. The actor wakes automatically when a request, message, or scheduled alarm arrives.',
+	},
+	{
+		question: 'Is Rivet free to self-host?',
+		answerHtml:
+			'Yes. Rivet is open source under the Apache 2.0 license and free to run on your own infrastructure with no usage limits. It ships as a single Rust binary or Docker image. See the <a href="https://rivet.dev/docs/self-hosting/">self-hosting docs</a> to get started, or use Rivet Cloud if you prefer managed infrastructure.',
+	},
+	{
+		question: 'Can Rivet run in my VPC, on-prem, or air-gapped?',
+		answerHtml:
+			'Yes. The open-source release runs in your VPC, on-prem, or fully air-gapped with no usage limits, using filesystem or Postgres storage. For production deployments in regulated networks, the Enterprise Edition adds the FoundationDB persistence layer, hardening guidance, and priority support. <a href="https://rivet.dev/sales/">Contact sales</a> for details.',
+	},
+	{
+		question: 'What support is included with each plan?',
+		answerHtml:
+			'The free plan includes community support through Discord and GitHub. Hobby includes email support, Team includes Slack and email support, and Enterprise includes priority support with an SLA.',
+	},
+	{
+		question: 'Do you offer discounts for startups or high-volume usage?',
+		answerHtml:
+			'Yes. New Rivet Cloud customers from Y Combinator or a16z Speedrun, including alumni, get 50% off the Team plan for 12 months through our <a href="https://rivet.dev/startups/">startup deal</a>. For high-volume workloads, Enterprise plans include volume pricing; <a href="https://rivet.dev/sales/">contact sales</a> for a custom quote.',
+	},
+];
diff --git a/website/src/data/faqs/types.ts b/website/src/data/faqs/types.ts
new file mode 100644
index 0000000000..e31f088d2d
--- /dev/null
+++ b/website/src/data/faqs/types.ts
@@ -0,0 +1,29 @@
+// Shared FAQ data types. Each page's FAQ content lives in one data module
+// under src/data/faqs/ and feeds both the visible FaqSection rendering and
+// the FAQPage JSON-LD emitted by FaqJsonLd.astro, so the schema can never
+// diverge from what is shown on the page.
+
+export interface FaqItem {
+	question: string;
+	// answerHtml is plain text or HTML limited to the tags Google allows in
+	// FAQPage Answer.text: h1-h6, br, ol, ul, li, a, p, div, b, strong, i, em.
+	// Links must use absolute https://rivet.dev URLs.
+	answerHtml: string;
+}
+
+// Builds a schema.org FAQPage object from FAQ items. Emit it only through
+// FaqJsonLd.astro so each URL gets at most one FAQPage block.
+export function faqPageSchema(items: FaqItem[]) {
+	return {
+		"@context": "https://schema.org",
+		"@type": "FAQPage",
+		mainEntity: items.map((item) => ({
+			"@type": "Question",
+			name: item.question,
+			acceptedAnswer: {
+				"@type": "Answer",
+				text: item.answerHtml,
+			},
+		})),
+	};
+}
diff --git a/website/src/pages/actors.astro b/website/src/pages/actors.astro
index 23664a100e..1609c479ae 100644
--- a/website/src/pages/actors.astro
+++ b/website/src/pages/actors.astro
@@ -6,6 +6,9 @@ import { BenchmarksSection } from '@/components/marketing/sections/BenchmarksSec
 import { ObservabilitySection } from '@/components/marketing/sections/ObservabilitySection';
 import { RedesignedCTA } from '@/components/marketing/sections/RedesignedCTA';
 import { ScrollObserver } from '@/components/ScrollObserver';
+import { FaqSection } from '@/components/faq/FaqSection';
+import FaqJsonLd from '@/components/faq/FaqJsonLd.astro';
+import { actorsFaqs } from '@/data/faqs/actors';
 ---
 
 <MarketingLayout
@@ -14,6 +17,7 @@ import { ScrollObserver } from '@/components/ScrollObserver';
 	canonicalUrl="https://rivet.dev/actors/"
 	keywords={["actors", "stateful", "workflows", "websockets", "real-time", "backend infrastructure", "serverless", "open source", "self-hosted", "AI infrastructure", "long-running processes", "state management"]}
 >
+	<FaqJsonLd items={actorsFaqs} />
 	<ScrollObserver client:load>
 		<div class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
 			<main>
@@ -41,6 +45,8 @@ import { ScrollObserver } from '@/components/ScrollObserver';
 				<ProblemSection client:visible />
 				<BenchmarksSection client:visible />
 				<ObservabilitySection client:visible />
+				<!-- Static render with no client directive. FaqSection is hook-free and uses native details/summary, so it needs no JS. -->
+				<FaqSection items={actorsFaqs} />
 				<RedesignedCTA client:visible />
 			</main>
 		</div>
diff --git a/website/src/pages/agent-os/pricing.astro b/website/src/pages/agent-os/pricing.astro
index 913d47bc9c..9ca03fce48 100644
--- a/website/src/pages/agent-os/pricing.astro
+++ b/website/src/pages/agent-os/pricing.astro
@@ -1,6 +1,8 @@
 ---
 import MarketingLayout from '@/layouts/MarketingLayout.astro';
 import AgentOSPricingPage from '@/components/marketing/solutions/AgentOSPricingPage';
+import FaqJsonLd from '@/components/faq/FaqJsonLd.astro';
+import { agentOsPricingFaqs } from '@/data/faqs/agent-os-pricing';
 ---
 
 <MarketingLayout
@@ -8,5 +10,6 @@ import AgentOSPricingPage from '@/components/marketing/solutions/AgentOSPricingP
 	description="agentOS is free and open source under the Apache 2.0 license. Self-host for free, use Rivet Cloud for managed infrastructure, or contact sales for enterprise support."
 	canonicalUrl="https://rivet.dev/agent-os/pricing/"
 >
+	<FaqJsonLd items={agentOsPricingFaqs} />
 	<AgentOSPricingPage client:load />
 </MarketingLayout>
diff --git a/website/src/pages/cloud.astro b/website/src/pages/cloud.astro
index e2a3649542..9a0a2cd6b9 100644
--- a/website/src/pages/cloud.astro
+++ b/website/src/pages/cloud.astro
@@ -1,6 +1,8 @@
 ---
 import MarketingLayout from '@/layouts/MarketingLayout.astro';
 import PricingPageClient from '@/components/marketing/pricing/PricingPageClient';
+import FaqJsonLd from '@/components/faq/FaqJsonLd.astro';
+import { cloudFaqs } from '@/data/faqs/cloud';
 
 // Product schema with pricing tiers
 const productSchema = {
@@ -64,5 +66,6 @@ const productSchema = {
 	ogImage="https://assets.rivet.dev/website/public/promo/og-cloud.png"
 >
 	<script type="application/ld+json" set:html={JSON.stringify(productSchema)} />
+	<FaqJsonLd items={cloudFaqs} />
 	<PricingPageClient client:load />
 </MarketingLayout>

From 21114d2c82d4f8432a7371b7d8dd1bdec0212d04 Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 01:56:42 -0700
Subject: [PATCH 03/13] [SLOP(claude-fable-5)] feat(website): comparison pages
 at /compare with Cloudflare Durable Objects page

---
 website/src/components/Footer.jsx             |    1 +
 .../marketing/compare/ComparePage.tsx         |  407 +++++++
 .../marketing/compare/ComparisonTable.tsx     |   77 ++
 .../marketing/compare/FeatureStatus.tsx       |   52 +
 .../RivetVsCloudflareWorkersPage.tsx          | 1039 -----------------
 .../compare/cloudflare-durable-objects.tsx    |  503 ++++++++
 website/src/data/compare/index.ts             |   11 +
 website/src/data/compare/types.ts             |   62 +
 website/src/pages/compare/[slug].astro        |   60 +
 website/src/pages/compare/index.astro         |   84 ++
 10 files changed, 1257 insertions(+), 1039 deletions(-)
 create mode 100644 website/src/components/marketing/compare/ComparePage.tsx
 create mode 100644 website/src/components/marketing/compare/ComparisonTable.tsx
 create mode 100644 website/src/components/marketing/compare/FeatureStatus.tsx
 delete mode 100644 website/src/components/marketing/comparison/RivetVsCloudflareWorkersPage.tsx
 create mode 100644 website/src/data/compare/cloudflare-durable-objects.tsx
 create mode 100644 website/src/data/compare/index.ts
 create mode 100644 website/src/data/compare/types.ts
 create mode 100644 website/src/pages/compare/[slug].astro
 create mode 100644 website/src/pages/compare/index.astro

diff --git a/website/src/components/Footer.jsx b/website/src/components/Footer.jsx
index b8e639b883..4b9509b6b8 100644
--- a/website/src/components/Footer.jsx
+++ b/website/src/components/Footer.jsx
@@ -37,6 +37,7 @@ const footer = {
 	],
 	resources: [
 		{ name: "Cookbooks", href: "/cookbook" },
+		{ name: "Compare", href: "/compare" },
 		{ name: "Blog", href: "/blog" },
 		{ name: "YC & Speedrun Deal", href: "/startups" },
 		{ name: "Open-Source Friends", href: "/oss-friends" },
diff --git a/website/src/components/marketing/compare/ComparePage.tsx b/website/src/components/marketing/compare/ComparePage.tsx
new file mode 100644
index 0000000000..37063b7fec
--- /dev/null
+++ b/website/src/components/marketing/compare/ComparePage.tsx
@@ -0,0 +1,407 @@
+'use client';
+
+import { Icon, faArrowRight, faRivet, faServer } from '@rivet-gg/icons';
+import { motion } from 'framer-motion';
+import { FaqList } from '@/components/faq/FaqSection';
+import { compareEntries, getCompareEntry } from '@/data/compare';
+import type { CompareEntry } from '@/data/compare/types';
+import { ComparisonTable } from './ComparisonTable';
+
+// The route passes only the slug because CompareEntry contains JSX cell text,
+// which is not serializable across the island boundary. The island looks the
+// entry up from the registry itself.
+interface ComparePageProps {
+	slug: string;
+}
+
+function formatLastUpdated(isoDate: string): string {
+	// Force UTC so the server render and client hydration produce the same
+	// string regardless of local timezone.
+	return new Date(isoDate).toLocaleDateString('en-US', {
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+		timeZone: 'UTC',
+	});
+}
+
+function HeroSection({ entry }: { entry: CompareEntry }) {
+	return (
+		<section className="relative flex min-h-[60vh] flex-col justify-center px-6 pt-32 pb-24">
+			<div className="mx-auto w-full max-w-7xl">
+				<div className="max-w-3xl">
+					<motion.h1
+						initial={{ opacity: 0, y: 20 }}
+						animate={{ opacity: 1, y: 0 }}
+						transition={{ duration: 0.5 }}
+						className="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl"
+					>
+						{entry.rivetProductName} vs <br />
+						{entry.competitorName}
+					</motion.h1>
+					<motion.p
+						initial={{ opacity: 0, y: 20 }}
+						animate={{ opacity: 1, y: 0 }}
+						transition={{ duration: 0.5, delay: 0.1 }}
+						className="text-base leading-relaxed text-zinc-500 md:text-lg"
+					>
+						{entry.heroSubtitle}
+					</motion.p>
+					<motion.p
+						initial={{ opacity: 0, y: 20 }}
+						animate={{ opacity: 1, y: 0 }}
+						transition={{ duration: 0.5, delay: 0.15 }}
+						className="mt-4 text-sm text-zinc-600"
+					>
+						Last updated {formatLastUpdated(entry.lastUpdated)}
+					</motion.p>
+					<motion.div
+						initial={{ opacity: 0, y: 20 }}
+						animate={{ opacity: 1, y: 0 }}
+						transition={{ duration: 0.5, delay: 0.2 }}
+						className="mt-8 flex flex-col gap-3 sm:flex-row"
+					>
+						<a
+							href="/docs/actors/quickstart/backend"
+							className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+						>
+							Get Started with {entry.rivetProductName}
+							<Icon icon={faArrowRight} />
+						</a>
+					</motion.div>
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function OverviewSection({ entry }: { entry: CompareEntry }) {
+	return (
+		<section className="border-t border-white/10 py-24">
+			<div className="mx-auto max-w-7xl px-6">
+				<div className="mb-12">
+					<motion.h2
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5 }}
+						className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl"
+					>
+						Overview
+					</motion.h2>
+					<motion.p
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5, delay: 0.1 }}
+						className="max-w-xl text-base leading-relaxed text-zinc-500"
+					>
+						Compare the two approaches and decide which is right for your project.
+					</motion.p>
+				</div>
+
+				<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+					<motion.div
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5 }}
+						className="flex flex-col border-t border-white/10 pt-6"
+					>
+						<div className="mb-3 text-zinc-500">
+							<Icon icon={faRivet} className="h-4 w-4" />
+						</div>
+						<h3 className="mb-2 text-base font-normal text-white">{entry.rivetProductName}</h3>
+						<p className="mb-6 text-sm leading-relaxed text-zinc-500">{entry.rivetSummary}</p>
+
+						<h4 className="text-sm font-medium uppercase tracking-wider text-zinc-500 mb-4">
+							When to choose {entry.rivetProductName}
+						</h4>
+						<div className="mb-6 space-y-4">
+							{entry.whenToChooseRivet.map((choice) => (
+								<div key={choice.title}>
+									<div className="text-sm text-white">{choice.title}</div>
+									<div className="text-sm text-zinc-500">{choice.description}</div>
+								</div>
+							))}
+						</div>
+						<div className="mt-auto">
+							<a
+								href="/docs/actors/quickstart/backend"
+								className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+							>
+								Get started with {entry.rivetProductName}
+								<Icon icon={faArrowRight} />
+							</a>
+						</div>
+					</motion.div>
+
+					<motion.div
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5, delay: 0.1 }}
+						className="flex flex-col border-t border-white/10 pt-6"
+					>
+						<div className="mb-3 text-zinc-500">
+							<Icon icon={entry.competitorIcon ?? faServer} className="h-4 w-4" />
+						</div>
+						<h3 className="mb-2 text-base font-normal text-white">{entry.competitorName}</h3>
+						<p className="mb-6 text-sm leading-relaxed text-zinc-500">{entry.competitorSummary}</p>
+
+						<h4 className="text-sm font-medium uppercase tracking-wider text-zinc-500 mb-4">
+							When to choose {entry.competitorName}
+						</h4>
+						<div className="space-y-4">
+							{entry.whenToChooseCompetitor.map((choice) => (
+								<div key={choice.title}>
+									<div className="text-sm text-white">{choice.title}</div>
+									<div className="text-sm text-zinc-500">{choice.description}</div>
+								</div>
+							))}
+						</div>
+					</motion.div>
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function ComparisonSection({ entry }: { entry: CompareEntry }) {
+	return (
+		<section className="border-t border-white/10 py-24">
+			<div className="mx-auto max-w-7xl px-6">
+				<div className="mb-12">
+					<motion.h2
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5 }}
+						className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl"
+					>
+						Feature Comparison
+					</motion.h2>
+					<motion.p
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5, delay: 0.1 }}
+						className="max-w-xl text-base leading-relaxed text-zinc-500"
+					>
+						A detailed breakdown of capabilities across both platforms.
+					</motion.p>
+				</div>
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5, delay: 0.2 }}
+				>
+					<ComparisonTable
+						featureGroups={entry.featureGroups}
+						competitorName={entry.competitorName}
+						competitorIcon={entry.competitorIcon}
+						rivetProductName={entry.rivetProductName}
+					/>
+				</motion.div>
+			</div>
+		</section>
+	);
+}
+
+function VerdictSection({ entry }: { entry: CompareEntry }) {
+	return (
+		<section className="border-t border-white/10 py-24 text-center">
+			<div className="mx-auto max-w-3xl px-6">
+				<motion.h2
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5 }}
+					className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl"
+				>
+					Verdict
+				</motion.h2>
+				{entry.verdict.map((paragraph) => (
+					<motion.p
+						key={paragraph}
+						initial={{ opacity: 0, y: 20 }}
+						whileInView={{ opacity: 1, y: 0 }}
+						viewport={{ once: true }}
+						transition={{ duration: 0.5, delay: 0.1 }}
+						className="mb-4 text-base leading-relaxed text-zinc-500 last:mb-0"
+					>
+						{paragraph}
+					</motion.p>
+				))}
+			</div>
+		</section>
+	);
+}
+
+function MigrationSection({ migration }: { migration: NonNullable<CompareEntry['migration']> }) {
+	return (
+		<section className="border-t border-white/10 py-24 text-center">
+			<div className="mx-auto max-w-3xl px-6">
+				<motion.h2
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5 }}
+					className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl"
+				>
+					{migration.heading}
+				</motion.h2>
+				<motion.p
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5, delay: 0.1 }}
+					className="mb-6 text-base leading-relaxed text-zinc-500"
+				>
+					{migration.body}
+				</motion.p>
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5, delay: 0.2 }}
+				>
+					<a
+						href="/talk-to-an-engineer"
+						className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
+					>
+						Talk to an engineer
+					</a>
+				</motion.div>
+			</div>
+		</section>
+	);
+}
+
+function FaqSectionDark({ entry }: { entry: CompareEntry }) {
+	return (
+		<section className="border-t border-white/10 py-24">
+			<div className="mx-auto max-w-3xl px-6">
+				<motion.h2
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5 }}
+					className="mb-12 text-center text-2xl font-normal tracking-tight text-white md:text-4xl"
+				>
+					Frequently asked questions
+				</motion.h2>
+				<FaqList items={entry.faq} theme="dark" />
+			</div>
+		</section>
+	);
+}
+
+function OtherComparisonsSection({ entry }: { entry: CompareEntry }) {
+	const others = compareEntries.filter((other) => other.slug !== entry.slug);
+	if (others.length === 0) {
+		return null;
+	}
+
+	return (
+		<section className="border-t border-white/10 py-24">
+			<div className="mx-auto max-w-7xl px-6">
+				<motion.h2
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5 }}
+					className="mb-8 text-2xl font-normal tracking-tight text-white md:text-4xl"
+				>
+					Other comparisons
+				</motion.h2>
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					{others.map((other) => (
+						<a
+							key={other.slug}
+							href={`/compare/${other.slug}/`}
+							className="group flex flex-col rounded-lg border border-white/10 p-6 transition-colors hover:border-white/20 hover:bg-white/5"
+						>
+							<h3 className="mb-2 text-base font-normal text-white">{other.title}</h3>
+							<p className="text-sm leading-relaxed text-zinc-500">{other.description}</p>
+							<span className="mt-4 inline-flex items-center gap-2 text-sm text-zinc-300 transition-colors group-hover:text-white">
+								Read the comparison
+								<Icon icon={faArrowRight} />
+							</span>
+						</a>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function CTASection() {
+	return (
+		<section className="border-t border-white/10 px-6 py-48 text-center">
+			<div className="mx-auto max-w-3xl">
+				<motion.h2
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5 }}
+					className="mb-6 text-2xl font-normal tracking-tight text-white md:text-4xl"
+				>
+					The primitive for stateful workloads.
+				</motion.h2>
+				<motion.p
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5, delay: 0.1 }}
+					className="mb-8 text-base leading-relaxed text-zinc-500"
+				>
+					The next generation of software needs a new kind of backend. This is it.
+				</motion.p>
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					whileInView={{ opacity: 1, y: 0 }}
+					viewport={{ once: true }}
+					transition={{ duration: 0.5, delay: 0.2 }}
+					className="flex flex-col items-center justify-center gap-3 sm:flex-row"
+				>
+					<a
+						href="/docs"
+						className="selection-dark inline-flex items-center justify-center whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
+					>
+						Start Building
+					</a>
+					<a
+						href="/talk-to-an-engineer"
+						className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
+					>
+						Talk to an Engineer
+					</a>
+				</motion.div>
+			</div>
+		</section>
+	);
+}
+
+export function ComparePage({ slug }: ComparePageProps) {
+	const entry = getCompareEntry(slug);
+	if (!entry) {
+		throw new Error(`Unknown compare entry: ${slug}`);
+	}
+
+	return (
+		<div className="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
+			<main>
+				<HeroSection entry={entry} />
+				<OverviewSection entry={entry} />
+				<ComparisonSection entry={entry} />
+				<VerdictSection entry={entry} />
+				{entry.migration && <MigrationSection migration={entry.migration} />}
+				<FaqSectionDark entry={entry} />
+				<OtherComparisonsSection entry={entry} />
+				<CTASection />
+			</main>
+		</div>
+	);
+}
diff --git a/website/src/components/marketing/compare/ComparisonTable.tsx b/website/src/components/marketing/compare/ComparisonTable.tsx
new file mode 100644
index 0000000000..1a1d0d1a97
--- /dev/null
+++ b/website/src/components/marketing/compare/ComparisonTable.tsx
@@ -0,0 +1,77 @@
+import { Icon, faRivet } from '@rivet-gg/icons';
+import React from 'react';
+import type { IconProp } from '@rivet-gg/icons';
+import type { FeatureGroup } from '@/data/compare/types';
+import { FeatureStatus } from './FeatureStatus';
+
+interface ComparisonTableProps {
+	featureGroups: FeatureGroup[];
+	competitorName: string;
+	competitorIcon?: IconProp;
+	rivetProductName: string;
+}
+
+export function ComparisonTable({
+	featureGroups,
+	competitorName,
+	competitorIcon,
+	rivetProductName,
+}: ComparisonTableProps) {
+	return (
+		<div className="overflow-x-auto border-t border-white/10">
+			<table className="w-full border-collapse [&_a]:underline [&_a]:text-white [&_a]:hover:text-zinc-300">
+				<thead>
+					<tr className="border-b border-white/10">
+						<th className="py-3 px-4 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">
+							Feature
+						</th>
+						<th className="py-3 px-4 text-left text-xs font-medium">
+							<div className="flex items-center gap-2">
+								<Icon icon={faRivet} className="text-zinc-500" />
+								<span className="text-white">{rivetProductName}</span>
+							</div>
+						</th>
+						<th className="py-3 px-4 text-left text-xs font-medium">
+							<div className="flex items-center gap-2">
+								{competitorIcon && <Icon icon={competitorIcon} className="text-zinc-500" />}
+								<span className="text-zinc-500">{competitorName}</span>
+							</div>
+						</th>
+						<th className="py-3 px-4 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">
+							Why it matters
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{featureGroups.map((group) => (
+						<React.Fragment key={group.title}>
+							<tr className="bg-zinc-900/50 border-b border-white/10">
+								<td colSpan={4} className="py-2 px-4 text-sm font-medium text-white">
+									{group.title}
+								</td>
+							</tr>
+							{group.rows.map((row) => (
+								<tr
+									key={row.feature}
+									className="border-b border-white/5 hover:bg-white/5 transition-colors"
+								>
+									<td className="py-3 px-4 text-sm text-white">{row.feature}</td>
+									<td className="py-3 px-4 text-sm text-zinc-400">
+										<FeatureStatus status={row.rivet.status} text={row.rivet.text} />
+									</td>
+									<td className="py-3 px-4 text-sm text-zinc-500">
+										<FeatureStatus
+											status={row.competitor.status}
+											text={row.competitor.text}
+										/>
+									</td>
+									<td className="py-3 px-4 text-sm text-zinc-500">{row.importance}</td>
+								</tr>
+							))}
+						</React.Fragment>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
diff --git a/website/src/components/marketing/compare/FeatureStatus.tsx b/website/src/components/marketing/compare/FeatureStatus.tsx
new file mode 100644
index 0000000000..0f0b2b72f6
--- /dev/null
+++ b/website/src/components/marketing/compare/FeatureStatus.tsx
@@ -0,0 +1,52 @@
+import {
+	Icon,
+	faCheck,
+	faHourglass,
+	faMinus,
+	faXmark,
+} from '@rivet-gg/icons';
+import type { ReactNode } from 'react';
+import type { ComparisonStatus } from '@/data/compare/types';
+
+interface FeatureStatusProps {
+	status: ComparisonStatus;
+	text: ReactNode;
+}
+
+export function FeatureStatus({ status, text }: FeatureStatusProps) {
+	let icon, bgColor, textColor;
+
+	switch (status) {
+		case 'yes':
+			icon = faCheck;
+			bgColor = 'bg-green-500/20';
+			textColor = 'text-green-500';
+			break;
+		case 'no':
+			icon = faXmark;
+			bgColor = 'bg-red-500/20';
+			textColor = 'text-red-500';
+			break;
+		case 'partial':
+			icon = faMinus;
+			bgColor = 'bg-amber-500/20';
+			textColor = 'text-amber-500';
+			break;
+		case 'coming-soon':
+			icon = faHourglass;
+			bgColor = 'bg-purple-500/20';
+			textColor = 'text-purple-500';
+			break;
+	}
+
+	return (
+		<div className="flex items-start">
+			<div
+				className={`flex-shrink-0 w-5 h-5 rounded-full ${bgColor} flex items-center justify-center ${textColor} mr-2 mt-0.5`}
+			>
+				<Icon icon={icon} className="text-xs" />
+			</div>
+			<div>{text}</div>
+		</div>
+	);
+}
diff --git a/website/src/components/marketing/comparison/RivetVsCloudflareWorkersPage.tsx b/website/src/components/marketing/comparison/RivetVsCloudflareWorkersPage.tsx
deleted file mode 100644
index cd76fb671b..0000000000
--- a/website/src/components/marketing/comparison/RivetVsCloudflareWorkersPage.tsx
+++ /dev/null
@@ -1,1039 +0,0 @@
-"use client";
-
-import {
-	Icon,
-	faArrowRight,
-	faCheck,
-	faCloudflare,
-	faHourglass,
-	faMinus,
-	faRivet,
-	faXmark,
-} from "@rivet-gg/icons";
-import { motion } from "framer-motion";
-import React from "react";
-
-// Feature Status Component
-interface FeatureStatusProps {
-	status: "yes" | "no" | "partial" | "coming-soon";
-	text: string;
-}
-
-const FeatureStatus: React.FC<FeatureStatusProps> = ({ status, text }) => {
-	let icon, bgColor, textColor;
-
-	switch (status) {
-		case "yes":
-			icon = faCheck;
-			bgColor = "bg-green-500/20";
-			textColor = "text-green-500";
-			break;
-		case "no":
-			icon = faXmark;
-			bgColor = "bg-red-500/20";
-			textColor = "text-red-500";
-			break;
-		case "partial":
-			icon = faMinus;
-			bgColor = "bg-amber-500/20";
-			textColor = "text-amber-500";
-			break;
-		case "coming-soon":
-			icon = faHourglass;
-			bgColor = "bg-purple-500/20";
-			textColor = "text-purple-500";
-			break;
-		default:
-			icon = faCheck;
-			bgColor = "bg-green-500/20";
-			textColor = "text-green-500";
-	}
-
-	return (
-		<div className="flex items-start">
-			<div
-				className={`flex-shrink-0 w-5 h-5 rounded-full ${bgColor} flex items-center justify-center ${textColor} mr-2 mt-0.5`}
-			>
-				<Icon icon={icon} className="text-xs" />
-			</div>
-			<div>{text}</div>
-		</div>
-	);
-};
-
-// Hero Section
-const HeroSection = () => {
-	return (
-		<section className="relative flex min-h-[60vh] flex-col justify-center px-6 pt-32 pb-24">
-			<div className="mx-auto w-full max-w-7xl">
-				<div className="max-w-3xl">
-					<motion.h1
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5 }}
-						className="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl"
-					>
-						Rivet Actors vs <br />
-						Cloudflare Durable Objects
-					</motion.h1>
-					<motion.p
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5, delay: 0.1 }}
-						className="text-base leading-relaxed text-zinc-500 md:text-lg"
-					>
-						Cloudflare Durable Objects provide stateful serverless computing with vendor lock-in.
-						Rivet Actors gives you the same capabilities as an open-source library that works with your existing infrastructure and technology stack.
-					</motion.p>
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5, delay: 0.2 }}
-						className="mt-8 flex flex-col gap-3 sm:flex-row"
-					>
-						<a
-							href="/docs/actors/quickstart/backend"
-							className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
-						>
-							Get Started with Rivet Actors
-							<Icon icon={faArrowRight} />
-						</a>
-					</motion.div>
-				</div>
-			</div>
-		</section>
-	);
-};
-
-// Combined Overview and Choice Section
-const CombinedOverviewSection = () => {
-	const rivetChoices = [
-		{
-			icon: faCheck,
-			title: "Developer-friendly experience",
-			description:
-				"When you want an intuitive platform with high-quality documentation, mature local development experience, and in-depth observability in to your workloads",
-		},
-		{
-			icon: faCheck,
-			title: "Works with your existing infrastructure",
-			description:
-				"When you want to use actors with your existing deployment process on Kubernetes, AWS, VPS, or any infrastructure",
-		},
-		{
-			icon: faCheck,
-			title: "Technology flexibility",
-			description:
-				"When you want to use your existing frameworks and libraries without platform-specific constraints",
-		},
-		{
-			icon: faCheck,
-			title: "Provides monitoring and observability",
-			description:
-				"When you need built-in monitoring for actors that integrates with your existing observability stack",
-		},
-		{
-			icon: faCheck,
-			title: "Rich ecosystem of integrations",
-			description:
-				"When you want a comprehensive ecosystem with ready-to-use integrations for popular frameworks and tools",
-		},
-	];
-
-	const cloudflareChoices = [
-		{
-			icon: faCheck,
-			title: "Already using Cloudflare ecosystem",
-			description:
-				"When you're already committed to Cloudflare Workers and want stateful capabilities",
-		},
-		{
-			icon: faCheck,
-			title: "JavaScript/TypeScript only",
-			description:
-				"When your team exclusively works with Cloudflare's limited JavaScript/TypeScript runtime and doesn't need access to the broader npm ecosystem",
-		},
-		{
-			icon: faCheck,
-			title: "Don't mind platform constraints",
-			description:
-				"When you're comfortable with Cloudflare's deployment process, monitoring limitations, and vendor lock-in",
-		},
-		{
-			icon: faCheck,
-			title: "Prefer low-level primitives",
-			description:
-				"When you want raw primitives and don't need a rich ecosystem of framework integrations",
-		},
-	];
-
-	return (
-		<section className="border-t border-white/10 py-24">
-			<div className="mx-auto max-w-7xl px-6">
-				<div className="mb-12">
-					<motion.h2
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5 }}
-						className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl"
-					>
-						Overview
-					</motion.h2>
-					<motion.p
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5, delay: 0.1 }}
-						className="max-w-xl text-base leading-relaxed text-zinc-500"
-					>
-						Compare the two approaches and decide which is right for your project.
-					</motion.p>
-				</div>
-
-				<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5 }}
-						className="flex flex-col border-t border-white/10 pt-6"
-					>
-						<div className="mb-3 text-zinc-500">
-							<Icon icon={faRivet} className="h-4 w-4" />
-						</div>
-						<h3 className="mb-2 text-base font-normal text-white">Rivet Actors</h3>
-						<p className="mb-6 text-sm leading-relaxed text-zinc-500">
-							Rivet Actors is an open-source library that brings the actor model
-							to your existing infrastructure. Build stateful, distributed
-							applications with your preferred technology stack, deployed on your
-							own infrastructure.
-						</p>
-
-						<h4 className="text-sm font-medium uppercase tracking-wider text-zinc-500 mb-4">
-							When to choose Rivet Actors
-						</h4>
-						<div className="space-y-4 mb-6">
-							{rivetChoices.map((choice, index) => (
-								<div key={index} className="flex items-start gap-2">
-									<Icon icon={choice.icon} className="h-3 w-3 text-zinc-500 mt-1" />
-									<div>
-										<span className="text-sm text-white">{choice.title}</span>
-										<span className="text-sm text-zinc-500"> — {choice.description}</span>
-									</div>
-								</div>
-							))}
-						</div>
-						<div className="mt-auto">
-							<a href="/docs/actors/quickstart/backend"
-								className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
-							>
-								Get started with Rivet Actors
-								<Icon icon={faArrowRight} />
-							</a>
-						</div>
-					</motion.div>
-
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5, delay: 0.1 }}
-						className="flex flex-col border-t border-white/10 pt-6"
-					>
-						<div className="mb-3 text-zinc-500">
-							<Icon icon={faCloudflare} className="h-4 w-4" />
-						</div>
-						<h3 className="mb-2 text-base font-normal text-white">Cloudflare Durable Objects</h3>
-						<p className="mb-6 text-sm leading-relaxed text-zinc-500">
-							Cloudflare Durable Objects provide stateful serverless computing
-							that runs on Cloudflare's global edge network. Built on Cloudflare's
-							proprietary platform, Durable Objects offer strong consistency and
-							state persistence for JavaScript/TypeScript applications.
-						</p>
-
-						<h4 className="text-sm font-medium uppercase tracking-wider text-zinc-500 mb-4">
-							When to choose Cloudflare Durable Objects
-						</h4>
-						<div className="space-y-4">
-							{cloudflareChoices.map((choice, index) => (
-								<div key={index} className="flex items-start gap-2">
-									<Icon icon={choice.icon} className="h-3 w-3 text-zinc-500 mt-1" />
-									<div>
-										<span className="text-sm text-white">{choice.title}</span>
-										<span className="text-sm text-zinc-500"> — {choice.description}</span>
-									</div>
-								</div>
-							))}
-						</div>
-					</motion.div>
-				</div>
-			</div>
-		</section>
-	);
-};
-
-// Consolidated Feature Comparison Table
-interface FeatureGroup {
-	groupTitle: string;
-	features: {
-		feature: string;
-		rivet: {
-			text: any;
-			status: "yes" | "no" | "partial" | "coming-soon";
-		};
-		cloudflare: {
-			text: string;
-			status: "yes" | "no" | "partial" | "coming-soon";
-		};
-		importance: string;
-	}[];
-}
-
-const ComparisonTable = () => {
-	const featureGroups: FeatureGroup[] = [
-		{
-			groupTitle: "Open Source",
-			features: [
-				{
-					feature: "Open-source",
-					rivet: {
-						status: "yes",
-						text: (
-							<>
-								Yes, Rivet is open-source with the Apache 2.0
-								license.{" "}
-								<a href="https://github.com/rivet-dev/rivet">
-									View on GitHub
-								</a>
-								.
-							</>
-						),
-					},
-					cloudflare: {
-						status: "no",
-						text: "No, Cloudflare is a closed-source, proprietary platform",
-					},
-					importance:
-						"Building your core technology on open-source software is vital to ensure portability and flexibility as your needs change",
-				},
-			],
-		},
-		{
-			groupTitle: "Infrastructure",
-			features: [
-				{
-					feature: "Works with existing infrastructure",
-					rivet: {
-						status: "yes",
-						text: "Deploy actors on Kubernetes, AWS, VPS, or any infrastructure",
-					},
-					cloudflare: {
-						status: "no",
-						text: "Locked to Cloudflare's infrastructure",
-					},
-					importance:
-						"Using your existing infrastructure avoids vendor lock-in and integrates with your current setup",
-				},
-				{
-					feature: "Data sovereignty and VPC isolation",
-					rivet: {
-						status: "yes",
-						text: "Full control over data residency and network isolation within your VPC",
-					},
-					cloudflare: {
-						status: "no",
-						text: "Data processed on Cloudflare's global network with limited control",
-					},
-					importance:
-						"Data sovereignty ensures compliance with data governance requirements and maintains complete network isolation",
-				},
-				{
-					feature: "Works with existing deploy processes",
-					rivet: {
-						status: "yes",
-						text: "Import the library and deploy with your existing CI/CD",
-					},
-					cloudflare: {
-						status: "no",
-						text: "Requires Cloudflare-specific deployment process",
-					},
-					importance:
-						"Keeping your existing deployment process reduces complexity and learning curve",
-				},
-				{
-					feature: "Technology flexibility",
-					rivet: {
-						status: "yes",
-						text: "Works with your existing technology stack and frameworks",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "Limited to Cloudflare's limited JavaScript/TypeScript runtime, not compatible with many npm packages",
-					},
-					importance:
-						"Technology flexibility lets you use your existing skills and codebase",
-				},
-				{
-					feature: "Integrates with existing monitoring",
-					rivet: {
-						status: "yes",
-						text: "Works with your existing observability stack",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "Limited monitoring options, mostly Cloudflare-specific",
-					},
-					importance:
-						"Integration with existing monitoring reduces operational overhead",
-				},
-			],
-		},
-		{
-			groupTitle: "Runtime",
-			features: [
-				{
-					feature: "Actor support",
-					rivet: {
-						status: "yes",
-						text: "First-class actor model with Rivet Actors library",
-					},
-					cloudflare: {
-						status: "yes",
-						text: "Durable Objects for stateful workloads",
-					},
-					importance:
-						"Actor model enables scalable stateful applications with state realtime, persistence, and realtime",
-				},
-				{
-					feature: "KV Persistence",
-					rivet: {
-						status: "yes",
-						text: "Built-in KV storage for actors",
-					},
-					cloudflare: {
-						status: "yes",
-						text: "KV supported for Durable Objects",
-					},
-					importance:
-						"Key-value storage enables persistent state without external dependencies",
-				},
-				{
-					feature: "SQLite Persistence",
-					rivet: {
-						status: "coming-soon",
-						text: "SQLite support in preview",
-					},
-					cloudflare: {
-						status: "yes",
-						text: "SQLite supported for Durable Objects",
-					},
-					importance:
-						"SQLite provides relational database capabilities for complex data models",
-				},
-				{
-					feature: "Memory limits",
-					rivet: {
-						status: "yes",
-						text: "Configurable memory limits based on needs",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "128MB limit for Durable Objects",
-					},
-					importance:
-						"Higher memory limits allow more complex stateful applications",
-				},
-				{
-					feature: "Automatic connection handling",
-					rivet: {
-						status: "yes",
-						text: "Optionally provides abstraction over HTTP, WebSockets, and SSE with intelligent failure and reconnection handling",
-					},
-					cloudflare: {
-						status: "no",
-						text: "Requires low-level implementation of connection management",
-					},
-					importance:
-						"Automatic connection handling reduces development time and improves reliability",
-				},
-				{
-					feature: "Event broadcasting",
-					rivet: {
-						status: "yes",
-						text: "Built-in event broadcasting to specific connections or all actors",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "Requires complex setup or third-party solutions like PartyKit",
-					},
-					importance:
-						"Native event system enables real-time features with minimal setup",
-				},
-				{
-					feature: "Built-in scheduling",
-					rivet: {
-						status: "yes",
-						text: "Powerful built-in scheduling system",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "Requires boilerplate on top of Alarms API",
-					},
-					importance:
-						"Native scheduling reduces complexity and improves reliability for time-based operations",
-				},
-				{
-					feature: "Testing support",
-					rivet: {
-						status: "yes",
-						text: "Full Vitest support with mocking and fake timers",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "Limited Vitest support due to custom runtime constraints",
-					},
-					importance:
-						"Comprehensive testing capabilities ensure code quality and reliability",
-				},
-				{
-					feature: "Customizable actor lifecycle",
-					rivet: {
-						status: "yes",
-						text: "Flexible draining mechanism with configurable lifecycle management",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "60s grace period",
-					},
-					importance:
-						"Customizable lifecycle management allows for graceful state transfers and prevents data loss",
-				},
-				{
-					feature: "Control over actor upgrades",
-					rivet: {
-						status: "yes",
-						text: "Full control based on your existing rollout mechanisms",
-					},
-					cloudflare: {
-						status: "no",
-						text: "Only allows controlling gradual deployment percentages, not specific Durable Object versions",
-					},
-					importance:
-						"Controlled upgrades ensure smooth transitions without service disruption tailored to your application's architecture",
-				},
-				{
-					feature: "Actor creation with input data",
-					rivet: {
-						status: "yes",
-						text: "Pass initialization data when creating actors",
-					},
-					cloudflare: {
-						status: "no",
-						text: "Cannot pass input data during Durable Object creation",
-					},
-					importance:
-						"Ability to initialize actors with data simplifies setup and reduces boilerplate",
-				},
-				{
-					feature: "Actor shutdown control",
-					rivet: {
-						status: "yes",
-						text: "Clean shutdown API for actors",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "Requires deleteAll with custom logic and error-prone boilerplate",
-					},
-					importance:
-						"Proper shutdown control ensures graceful cleanup and prevents resource leaks",
-				},
-				{
-					feature: "Monitoring",
-					rivet: {
-						status: "yes",
-						text: "Built-in monitoring for development and production",
-					},
-					cloudflare: {
-						status: "no",
-						text: "Custom monitoring required",
-					},
-					importance:
-						"Integrated monitoring simplifies operations and debugging",
-				},
-				{
-					feature: "Logging",
-					rivet: {
-						status: "yes",
-						text: "Suports your existing logging infrastructure",
-					},
-					cloudflare: {
-						status: "no",
-						text: "Provides no logging for Durable Objects",
-					},
-					importance:
-						"Built-in logging reduces setup time and operational complexity",
-				},
-				{
-					feature: "Metadata access",
-					rivet: {
-						status: "yes",
-						text: "Built-in metadata API",
-					},
-					cloudflare: {
-						status: "no",
-						text: "Custom implementation required",
-					},
-					importance:
-						"Direct access to metadata such as tags, region, and more simplifies management and deployment",
-				},
-				// {
-				// 	feature: "REST API",
-				// 	rivet: {
-				// 		status: "yes",
-				// 		text: "Full REST API for actor management",
-				// 	},
-				// 	cloudflare: {
-				// 		status: "no",
-				// 		text: "No RESTful API for Durable Objects",
-				// 	},
-				// 	importance:
-				// 		"REST API enables programmatic management and integration with external tools",
-				// },
-				// {
-				// 	feature: "Actor discovery",
-				// 	rivet: {
-				// 		status: "yes",
-				// 		text: "Flexible tagging system for organizing, querying, and monitoring actors",
-				// 	},
-				// 	cloudflare: {
-				// 		status: "partial",
-				// 		text: "String-based lookup",
-				// 	},
-				// 	importance:
-				// 		"Tagging enables more sophisticated service discovery patterns",
-				// },
-			],
-		},
-		// {
-		// 	groupTitle: "Platform",
-		// 	features: [
-		// 		{
-		// 			feature: "Instant rollback to versions",
-		// 			rivet: {
-		// 				status: "yes",
-		// 				text: "One-click rollback to previous versions",
-		// 			},
-		// 			cloudflare: {
-		// 				status: "yes",
-		// 				text: "Version rollback supported",
-		// 			},
-		// 			importance:
-		// 				"Quick rollback capabilities minimize downtime and recover from problematic deployments",
-		// 		},
-		// 		{
-		// 			feature: "Built-in monitoring & logging",
-		// 			rivet: {
-		// 				status: "yes",
-		// 				text: "Comprehensive monitoring and logging for all services",
-		// 			},
-		// 			cloudflare: {
-		// 				status: "partial",
-		// 				text: "Limited for Workers, not supported for Durable Objects",
-		// 			},
-		// 			importance:
-		// 				"Integrated monitoring and logging simplifies troubleshooting and performance optimization",
-		// 		},
-		// 		{
-		// 			feature: "User-uploaded builds",
-		// 			rivet: {
-		// 				status: "yes",
-		// 				text: "Full support for user-uploaded builds and multi-tenancy",
-		// 			},
-		// 			cloudflare: {
-		// 				status: "yes",
-		// 				text: "Cloudflare for Platforms",
-		// 			},
-		// 			importance:
-		// 				"Enables building platforms where your users can upload their own code to run on your infrastructure",
-		// 		},
-		// 		{
-		// 			feature: "Tagging for builds, actors, and containers",
-		// 			rivet: {
-		// 				status: "yes",
-		// 				text: "Comprehensive tagging system for all resources",
-		// 			},
-		// 			cloudflare: {
-		// 				status: "no",
-		// 				text: "No built-in tagging system",
-		// 			},
-		// 			importance:
-		// 				"Tagging is important for organization, cost allocation, and managing user-uploaded builds",
-		// 		},
-		// 	],
-		// },
-		{
-			groupTitle: "Developer Tooling",
-			features: [
-				{
-					feature: "State inspector",
-					rivet: {
-						status: "yes",
-						text: "Built-in tools to inspect and modify actor state",
-					},
-					cloudflare: {
-						status: "no",
-						text: "No built-in state inspection tools",
-					},
-					importance:
-						"Ability to view & edit actor state in real time simplifies debugging and management",
-				},
-				{
-					feature: "RPC debugger",
-					rivet: {
-						status: "yes",
-						text: "Interactive RPC testing tools for actors",
-					},
-					cloudflare: {
-						status: "no",
-						text: "No built-in RPC debugging",
-					},
-					importance:
-						"Ability to test remote procedure calls to actors accelerates development and troubleshooting",
-				},
-				{
-					feature: "Connection inspector",
-					rivet: {
-						status: "yes",
-						text: "Real-time monitoring of actor connections",
-					},
-					cloudflare: {
-						status: "no",
-						text: "No connection visualization tools",
-					},
-					importance:
-						"Visibility into active connections helps diagnose client-side issues and monitor usage patterns",
-				},
-				{
-					feature: "Actor listing and management",
-					rivet: {
-						status: "yes",
-						text: "Browse and manage active actors with full interaction capabilities",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "Can list Durable Objects but cannot interact with them",
-					},
-					importance:
-						"Being able to list and interact with live actors enables debugging and operational management",
-				},
-			],
-		},
-		{
-			groupTitle: "Development Experience",
-			features: [
-				{
-					feature: "Documentation",
-					rivet: {
-						status: "yes",
-						text: "Comprehensive, developer-focused documentation",
-					},
-					cloudflare: {
-						status: "partial",
-						text: "Fragmented and difficult to understand documentation",
-					},
-					importance:
-						"Clear documentation accelerates learning and implementation",
-				},
-				// {
-				// 	feature: "Local development with multiple apps",
-				// 	rivet: {
-				// 		status: "yes",
-				// 		text: "Unified local development experience for managing multiple apps",
-				// 	},
-				// 	cloudflare: {
-				// 		status: "no",
-				// 		text: "Requires tmux or similar for running multiple Wrangler instances in parallel",
-				// 	},
-				// 	importance:
-				// 		"Local development experience for multiple apps (i.e. microservices) reduces developer friction with configuration & improves developer collaboration.",
-				// },
-				{
-					feature: "Compatible with Docker Compose",
-					rivet: {
-						status: "yes",
-						text: "Seamless integration with Docker Compose for local development",
-					},
-					cloudflare: {
-						status: "no",
-						text: "No Docker Compose compatibility",
-					},
-					importance:
-						"Integration with Docker Compose enables use with your existing development workflows and tools",
-				},
-				// {
-				// 	feature: "Observability for debugging",
-				// 	rivet: {
-				// 		status: "yes",
-				// 		text: "Built-in obervability with tools available both localy and in Rivet Cloud",
-				// 	},
-				// 	cloudflare: {
-				// 		status: "no",
-				// 		text: "Requires additional setup",
-				// 	},
-				// 	importance:
-				// 		"Immediate visibility into application behavior speeds debugging",
-				// },
-			],
-		},
-	];
-
-	return (
-		<div className="overflow-x-auto border-t border-white/10">
-			<table className="w-full border-collapse [&_a]:underline [&_a]:text-white [&_a]:hover:text-zinc-300">
-				<thead>
-					<tr className="border-b border-white/10">
-						<th className="py-3 px-4 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">
-							Feature
-						</th>
-						<th className="py-3 px-4 text-left text-xs font-medium">
-							<div className="flex items-center gap-2">
-								<Icon icon={faRivet} className="text-zinc-500" />
-								<span className="text-white">Rivet Actors</span>
-							</div>
-						</th>
-						<th className="py-3 px-4 text-left text-xs font-medium">
-							<div className="flex items-center gap-2">
-								<Icon icon={faCloudflare} className="text-zinc-500" />
-								<span className="text-zinc-500">Cloudflare Durable Objects</span>
-							</div>
-						</th>
-						<th className="py-3 px-4 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">
-							Why it matters
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					{featureGroups.map((group, groupIndex) => (
-						<React.Fragment key={groupIndex}>
-							{/* Group header row */}
-							<tr className="bg-zinc-900/50 border-b border-white/10">
-								<td
-									colSpan={4}
-									className="py-2 px-4 text-sm font-medium text-white"
-								>
-									{group.groupTitle}
-								</td>
-							</tr>
-							{/* Feature rows for this group */}
-							{group.features.map((feature, featureIndex) => (
-								<tr
-									key={`${groupIndex}-${featureIndex}`}
-									className="border-b border-white/5 hover:bg-white/5 transition-colors"
-								>
-									<td className="py-3 px-4 text-sm text-white">
-										{feature.feature}
-									</td>
-									<td className="py-3 px-4 text-sm text-zinc-400">
-										<FeatureStatus
-											status={feature.rivet.status}
-											text={feature.rivet.text}
-										/>
-									</td>
-									<td className="py-3 px-4 text-sm text-zinc-500">
-										<FeatureStatus
-											status={
-												feature.cloudflare.status
-											}
-											text={feature.cloudflare.text}
-										/>
-									</td>
-									<td className="py-3 px-4 text-sm text-zinc-500">
-										{feature.importance}
-									</td>
-								</tr>
-							))}
-						</React.Fragment>
-					))}
-				</tbody>
-			</table>
-		</div>
-	);
-};
-
-// Feature Comparison Section Wrapper
-const ComparisonSection = () => {
-	return (
-		<section className="border-t border-white/10 py-24">
-			<div className="mx-auto max-w-7xl px-6">
-				<div className="mb-12">
-					<motion.h2
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5 }}
-						className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl"
-					>
-						Feature Comparison
-					</motion.h2>
-					<motion.p
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5, delay: 0.1 }}
-						className="max-w-xl text-base leading-relaxed text-zinc-500"
-					>
-						A detailed breakdown of capabilities across both platforms.
-					</motion.p>
-				</div>
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.2 }}
-				>
-					<ComparisonTable />
-				</motion.div>
-			</div>
-		</section>
-	);
-};
-
-// Migration Section
-const MigrationSection = () => {
-	return (
-		<section className="border-t border-white/10 py-24 text-center">
-			<div className="mx-auto max-w-3xl px-6">
-				<motion.h2
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5 }}
-					className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl"
-				>
-					Migrating from Cloudflare Durable Objects?
-				</motion.h2>
-				<motion.p
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.1 }}
-					className="mb-6 text-base leading-relaxed text-zinc-500"
-				>
-					Our team can help make the transition smooth and seamless. We
-					provide migration assistance, technical guidance, and dedicated
-					support.
-				</motion.p>
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.2 }}
-				>
-					<a href="/talk-to-an-engineer"
-						className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
-					>
-						Talk to an engineer
-					</a>
-				</motion.div>
-			</div>
-		</section>
-	);
-};
-
-// Conclusion Section
-const ConclusionSection = () => {
-	return (
-		<section className="border-t border-white/10 py-24 text-center">
-			<div className="mx-auto max-w-3xl px-6">
-				<motion.h2
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5 }}
-					className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl"
-				>
-					Conclusion
-				</motion.h2>
-				<motion.p
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.1 }}
-					className="text-base leading-relaxed text-zinc-500"
-				>
-					While Cloudflare Durable Objects provides stateful serverless
-					computing with vendor lock-in, Rivet Actors offers the same actor
-					model capabilities as an open-source library that works with your
-					existing infrastructure. Choose Rivet Actors when you want the power
-					of actors without changing your deployment process, technology stack,
-					or being locked into a specific platform.
-				</motion.p>
-			</div>
-		</section>
-	);
-};
-
-// CTA Section
-const CTASection = () => {
-	return (
-		<section className="border-t border-white/10 px-6 py-48 text-center">
-			<div className="mx-auto max-w-3xl">
-				<motion.h2
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5 }}
-					className="mb-6 text-2xl font-normal tracking-tight text-white md:text-4xl"
-				>
-					The primitive for stateful workloads.
-				</motion.h2>
-				<motion.p
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.1 }}
-					className="mb-8 text-base leading-relaxed text-zinc-500"
-				>
-					The next generation of software needs a new kind of backend. This is it.
-				</motion.p>
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.2 }}
-					className="flex flex-col items-center justify-center gap-3 sm:flex-row"
-				>
-					<a
-						href="/docs"
-						className="selection-dark inline-flex items-center justify-center whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
-					>
-						Start Building
-					</a>
-					<a
-						href="/talk-to-an-engineer"
-						className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
-					>
-						Talk to an Engineer
-					</a>
-				</motion.div>
-			</div>
-		</section>
-	);
-};
-
-// Main Page Component
-export default function RivetVsCloudflareWorkersPage() {
-	return (
-		<div className="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
-			<main>
-				<HeroSection />
-				<CombinedOverviewSection />
-				<ComparisonSection />
-				<ConclusionSection />
-				<MigrationSection />
-				<CTASection />
-			</main>
-		</div>
-	);
-}
diff --git a/website/src/data/compare/cloudflare-durable-objects.tsx b/website/src/data/compare/cloudflare-durable-objects.tsx
new file mode 100644
index 0000000000..ac1dd29fa0
--- /dev/null
+++ b/website/src/data/compare/cloudflare-durable-objects.tsx
@@ -0,0 +1,503 @@
+import { faCloudflare } from '@rivet-gg/icons';
+import type { CompareEntry } from './types';
+
+export const cloudflareDurableObjects: CompareEntry = {
+	slug: 'rivet-vs-cloudflare-durable-objects',
+	competitorName: 'Cloudflare Durable Objects',
+	rivetProductName: 'Rivet Actors',
+	competitorIcon: faCloudflare,
+	title: 'Rivet vs Cloudflare Durable Objects',
+	description:
+		'Compare Rivet Actors and Cloudflare Durable Objects: open-source stateful actors on your own infrastructure versus stateful compute tied to Cloudflare.',
+	heroSubtitle:
+		'Cloudflare Durable Objects provide stateful serverless computing with vendor lock-in. Rivet Actors give you the same capabilities as an open-source library that works with your existing infrastructure and technology stack.',
+	rivetSummary:
+		'Rivet Actors bring the actor model to your existing infrastructure as an open-source library. Build stateful, distributed applications with your preferred technology stack, deployed on your own infrastructure.',
+	competitorSummary:
+		"Cloudflare Durable Objects provide stateful serverless computing that runs on Cloudflare's global edge network. Built on Cloudflare's proprietary platform, Durable Objects offer strong consistency and state persistence for JavaScript/TypeScript applications.",
+	whenToChooseRivet: [
+		{
+			title: 'Developer-friendly experience',
+			description:
+				'When you want an intuitive platform with high-quality documentation, mature local development experience, and in-depth observability into your workloads',
+		},
+		{
+			title: 'Works with your existing infrastructure',
+			description:
+				'When you want to use actors with your existing deployment process on Kubernetes, AWS, VPS, or any infrastructure',
+		},
+		{
+			title: 'Technology flexibility',
+			description:
+				'When you want to use your existing frameworks and libraries without platform-specific constraints',
+		},
+		{
+			title: 'Provides monitoring and observability',
+			description:
+				'When you need built-in monitoring for actors that integrates with your existing observability stack',
+		},
+		{
+			title: 'Rich ecosystem of integrations',
+			description:
+				'When you want a comprehensive ecosystem with ready-to-use integrations for popular frameworks and tools',
+		},
+	],
+	whenToChooseCompetitor: [
+		{
+			title: 'Already using Cloudflare ecosystem',
+			description:
+				"When you're already committed to Cloudflare Workers and want stateful capabilities",
+		},
+		{
+			title: 'JavaScript/TypeScript only',
+			description:
+				"When your team exclusively works with Cloudflare's limited JavaScript/TypeScript runtime and doesn't need access to the broader npm ecosystem",
+		},
+		{
+			title: "Don't mind platform constraints",
+			description:
+				"When you're comfortable with Cloudflare's deployment process, monitoring limitations, and vendor lock-in",
+		},
+		{
+			title: 'Prefer low-level primitives',
+			description:
+				"When you want raw primitives and don't need a rich ecosystem of framework integrations",
+		},
+	],
+	featureGroups: [
+		{
+			title: 'Open Source',
+			rows: [
+				{
+					feature: 'Open-source',
+					rivet: {
+						status: 'yes',
+						text: (
+							<>
+								Yes, Rivet is open-source with the Apache 2.0 license.{' '}
+								<a href="https://github.com/rivet-dev/rivet">View on GitHub</a>.
+							</>
+						),
+					},
+					competitor: {
+						status: 'no',
+						text: 'No, Cloudflare is a closed-source, proprietary platform',
+					},
+					importance:
+						'Building your core technology on open-source software is vital to ensure portability and flexibility as your needs change',
+				},
+			],
+		},
+		{
+			title: 'Infrastructure',
+			rows: [
+				{
+					feature: 'Works with existing infrastructure',
+					rivet: {
+						status: 'yes',
+						text: 'Deploy actors on Kubernetes, AWS, VPS, or any infrastructure',
+					},
+					competitor: {
+						status: 'no',
+						text: "Locked to Cloudflare's infrastructure",
+					},
+					importance:
+						'Using your existing infrastructure avoids vendor lock-in and integrates with your current setup',
+				},
+				{
+					feature: 'Data sovereignty and VPC isolation',
+					rivet: {
+						status: 'yes',
+						text: 'Full control over data residency and network isolation within your VPC',
+					},
+					competitor: {
+						status: 'no',
+						text: "Data processed on Cloudflare's global network with limited control",
+					},
+					importance:
+						'Data sovereignty ensures compliance with data governance requirements and maintains complete network isolation',
+				},
+				{
+					feature: 'Works with existing deploy processes',
+					rivet: {
+						status: 'yes',
+						text: 'Import the library and deploy with your existing CI/CD',
+					},
+					competitor: {
+						status: 'no',
+						text: 'Requires Cloudflare-specific deployment process',
+					},
+					importance:
+						'Keeping your existing deployment process reduces complexity and learning curve',
+				},
+				{
+					feature: 'Technology flexibility',
+					rivet: {
+						status: 'yes',
+						text: 'Works with your existing technology stack and frameworks',
+					},
+					competitor: {
+						status: 'partial',
+						text: "Limited to Cloudflare's limited JavaScript/TypeScript runtime, not compatible with many npm packages",
+					},
+					importance:
+						'Technology flexibility lets you use your existing skills and codebase',
+				},
+				{
+					feature: 'Integrates with existing monitoring',
+					rivet: {
+						status: 'yes',
+						text: 'Works with your existing observability stack',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Limited monitoring options, mostly Cloudflare-specific',
+					},
+					importance:
+						'Integration with existing monitoring reduces operational overhead',
+				},
+			],
+		},
+		{
+			title: 'Runtime',
+			rows: [
+				{
+					feature: 'Actor support',
+					rivet: {
+						status: 'yes',
+						text: 'First-class actor model with Rivet Actors library',
+					},
+					competitor: {
+						status: 'yes',
+						text: 'Durable Objects for stateful workloads',
+					},
+					importance:
+						'Actor model enables scalable stateful applications with state persistence and realtime communication',
+				},
+				{
+					feature: 'KV Persistence',
+					rivet: {
+						status: 'yes',
+						text: 'Built-in KV storage for actors',
+					},
+					competitor: {
+						status: 'yes',
+						text: 'KV supported for Durable Objects',
+					},
+					importance:
+						'Key-value storage enables persistent state without external dependencies',
+				},
+				{
+					feature: 'SQLite Persistence',
+					rivet: {
+						status: 'yes',
+						text: (
+							<>
+								Built-in SQLite database per actor with raw SQL and Drizzle support.{' '}
+								<a href="https://rivet.dev/docs/actors/sqlite">Learn more</a>.
+							</>
+						),
+					},
+					competitor: {
+						status: 'yes',
+						text: 'SQLite supported for Durable Objects',
+					},
+					importance:
+						'SQLite provides relational database capabilities for complex data models',
+				},
+				{
+					feature: 'Memory limits',
+					rivet: {
+						status: 'yes',
+						text: 'No platform memory cap; memory is bounded by the compute you run actors on',
+					},
+					competitor: {
+						status: 'partial',
+						text: '128MB limit for Durable Objects',
+					},
+					importance:
+						'Higher memory limits allow more complex stateful applications',
+				},
+				{
+					feature: 'Automatic connection handling',
+					rivet: {
+						status: 'yes',
+						text: 'Optionally provides abstraction over HTTP, WebSockets, and SSE with intelligent failure and reconnection handling',
+					},
+					competitor: {
+						status: 'no',
+						text: 'Requires low-level implementation of connection management',
+					},
+					importance:
+						'Automatic connection handling reduces development time and improves reliability',
+				},
+				{
+					feature: 'Event broadcasting',
+					rivet: {
+						status: 'yes',
+						text: 'Built-in event broadcasting to specific connections or all actors',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Requires complex setup or third-party solutions like PartyKit',
+					},
+					importance:
+						'Native event system enables real-time features with minimal setup',
+				},
+				{
+					feature: 'Built-in scheduling',
+					rivet: {
+						status: 'yes',
+						text: 'Powerful built-in scheduling system',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Requires boilerplate on top of Alarms API',
+					},
+					importance:
+						'Native scheduling reduces complexity and improves reliability for time-based operations',
+				},
+				{
+					feature: 'Testing support',
+					rivet: {
+						status: 'yes',
+						text: 'Full Vitest support with mocking and fake timers',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Limited Vitest support due to custom runtime constraints',
+					},
+					importance:
+						'Comprehensive testing capabilities ensure code quality and reliability',
+				},
+				{
+					feature: 'Customizable actor lifecycle',
+					rivet: {
+						status: 'yes',
+						text: 'Flexible draining mechanism with configurable lifecycle management',
+					},
+					competitor: {
+						status: 'partial',
+						text: '60s grace period',
+					},
+					importance:
+						'Customizable lifecycle management allows for graceful state transfers and prevents data loss',
+				},
+				{
+					feature: 'Control over actor upgrades',
+					rivet: {
+						status: 'yes',
+						text: 'Full control based on your existing rollout mechanisms',
+					},
+					competitor: {
+						status: 'no',
+						text: 'Only allows controlling gradual deployment percentages, not specific Durable Object versions',
+					},
+					importance:
+						"Controlled upgrades ensure smooth transitions without service disruption tailored to your application's architecture",
+				},
+				{
+					feature: 'Actor creation with input data',
+					rivet: {
+						status: 'yes',
+						text: 'Pass initialization data when creating actors',
+					},
+					competitor: {
+						status: 'no',
+						text: 'Cannot pass input data during Durable Object creation',
+					},
+					importance:
+						'Ability to initialize actors with data simplifies setup and reduces boilerplate',
+				},
+				{
+					feature: 'Actor shutdown control',
+					rivet: {
+						status: 'yes',
+						text: 'Clean shutdown API for actors',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Requires deleteAll with custom logic and error-prone boilerplate',
+					},
+					importance:
+						'Proper shutdown control ensures graceful cleanup and prevents resource leaks',
+				},
+				{
+					feature: 'Monitoring',
+					rivet: {
+						status: 'yes',
+						text: 'Built-in monitoring for development and production',
+					},
+					competitor: {
+						status: 'no',
+						text: 'Custom monitoring required',
+					},
+					importance:
+						'Integrated monitoring simplifies operations and debugging',
+				},
+				{
+					feature: 'Logging',
+					rivet: {
+						status: 'yes',
+						text: 'Supports your existing logging infrastructure',
+					},
+					competitor: {
+						status: 'no',
+						text: 'Provides no logging for Durable Objects',
+					},
+					importance:
+						'Built-in logging reduces setup time and operational complexity',
+				},
+				{
+					feature: 'Metadata access',
+					rivet: {
+						status: 'yes',
+						text: 'Built-in metadata API',
+					},
+					competitor: {
+						status: 'no',
+						text: 'Custom implementation required',
+					},
+					importance:
+						'Direct access to metadata such as tags, region, and more simplifies management and deployment',
+				},
+			],
+		},
+		{
+			title: 'Developer Tooling',
+			rows: [
+				{
+					feature: 'State inspector',
+					rivet: {
+						status: 'yes',
+						text: 'Built-in tools to inspect and modify actor state',
+					},
+					competitor: {
+						status: 'no',
+						text: 'No built-in state inspection tools',
+					},
+					importance:
+						'Ability to view & edit actor state in real time simplifies debugging and management',
+				},
+				{
+					feature: 'RPC debugger',
+					rivet: {
+						status: 'yes',
+						text: 'Interactive RPC testing tools for actors',
+					},
+					competitor: {
+						status: 'no',
+						text: 'No built-in RPC debugging',
+					},
+					importance:
+						'Ability to test remote procedure calls to actors accelerates development and troubleshooting',
+				},
+				{
+					feature: 'Connection inspector',
+					rivet: {
+						status: 'yes',
+						text: 'Real-time monitoring of actor connections',
+					},
+					competitor: {
+						status: 'no',
+						text: 'No connection visualization tools',
+					},
+					importance:
+						'Visibility into active connections helps diagnose client-side issues and monitor usage patterns',
+				},
+				{
+					feature: 'Actor listing and management',
+					rivet: {
+						status: 'yes',
+						text: 'Browse and manage active actors with full interaction capabilities',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Can list Durable Objects but cannot interact with them',
+					},
+					importance:
+						'Being able to list and interact with live actors enables debugging and operational management',
+				},
+			],
+		},
+		{
+			title: 'Development Experience',
+			rows: [
+				{
+					feature: 'Documentation',
+					rivet: {
+						status: 'yes',
+						text: 'Comprehensive, developer-focused documentation',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Fragmented and difficult to understand documentation',
+					},
+					importance:
+						'Clear documentation accelerates learning and implementation',
+				},
+				{
+					feature: 'Compatible with Docker Compose',
+					rivet: {
+						status: 'yes',
+						text: 'Seamless integration with Docker Compose for local development',
+					},
+					competitor: {
+						status: 'no',
+						text: 'No Docker Compose compatibility',
+					},
+					importance:
+						'Integration with Docker Compose enables use with your existing development workflows and tools',
+				},
+			],
+		},
+	],
+	verdict: [
+		'While Cloudflare Durable Objects provide stateful serverless computing with vendor lock-in, Rivet Actors offer the same actor model capabilities as an open-source library that works with your existing infrastructure. Choose Rivet Actors when you want the power of actors without changing your deployment process, technology stack, or being locked into a specific platform.',
+	],
+	migration: {
+		heading: 'Migrating from Cloudflare Durable Objects?',
+		body: 'Our team can help make the transition smooth and seamless. We provide migration assistance, technical guidance, and dedicated support.',
+	},
+	faq: [
+		{
+			question: 'Is Rivet an alternative to Cloudflare Durable Objects?',
+			answerHtml:
+				'Yes. Rivet Actors provide the same stateful actor model as Durable Objects, including persistent state, WebSockets, and scheduling, as an open-source platform that runs on Rivet Cloud or your own infrastructure. See the <a href="https://rivet.dev/docs/actors">Rivet Actors documentation</a> for details.',
+		},
+		{
+			question: 'Can I run Rivet Actors outside of a single cloud provider?',
+			answerHtml:
+				'Yes. Rivet Actors run on Rivet Cloud or self-hosted on Kubernetes, AWS, a VPS, or any infrastructure that runs containers. Your application code stays the same in either case, so you are not locked to one provider.',
+		},
+		{
+			question: 'Do Rivet Actors support SQLite storage like Durable Objects?',
+			answerHtml:
+				'Yes. Each Rivet Actor can use built-in key-value state or its own embedded SQLite database, with raw SQL or Drizzle ORM. See the <a href="https://rivet.dev/docs/actors/sqlite">SQLite documentation</a>.',
+		},
+		{
+			question: 'Is Rivet open source?',
+			answerHtml:
+				'Yes. Rivet is open source under the Apache 2.0 license. The source code is available at <a href="https://github.com/rivet-dev/rivet">github.com/rivet-dev/rivet</a>.',
+		},
+		{
+			question: 'How hard is it to migrate from Cloudflare Durable Objects to Rivet?',
+			answerHtml:
+				'Durable Objects and Rivet Actors share the same core concepts, so most migrations map each Durable Object class to a Rivet Actor with state, actions, and scheduling. Our team also provides hands-on migration assistance. <a href="https://rivet.dev/talk-to-an-engineer">Talk to an engineer</a> to plan a migration.',
+		},
+		{
+			question: 'Do Rivet Actors support WebSockets and realtime connections?',
+			answerHtml:
+				'Yes. Rivet Actors include built-in connection handling for HTTP, WebSockets, and server-sent events, plus event broadcasting to connected clients with automatic reconnection handling.',
+		},
+	],
+	lastUpdated: '2026-06-11',
+	keywords: [
+		'cloudflare durable objects alternative',
+		'rivet vs cloudflare',
+		'durable objects',
+		'cloudflare workers alternative',
+		'stateful serverless',
+		'actor model',
+	],
+};
diff --git a/website/src/data/compare/index.ts b/website/src/data/compare/index.ts
new file mode 100644
index 0000000000..bc8ad81d2e
--- /dev/null
+++ b/website/src/data/compare/index.ts
@@ -0,0 +1,11 @@
+import type { CompareEntry } from './types';
+import { cloudflareDurableObjects } from './cloudflare-durable-objects';
+
+// Ordered registry of comparison pages. Adding a page means adding one data
+// module in this directory and one line here; the /compare routes and the
+// "Other comparisons" links derive from this list.
+export const compareEntries: CompareEntry[] = [cloudflareDurableObjects];
+
+export function getCompareEntry(slug: string): CompareEntry | undefined {
+	return compareEntries.find((entry) => entry.slug === slug);
+}
diff --git a/website/src/data/compare/types.ts b/website/src/data/compare/types.ts
new file mode 100644
index 0000000000..a9f1a0896e
--- /dev/null
+++ b/website/src/data/compare/types.ts
@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import type { IconProp } from '@rivet-gg/icons';
+import type { FaqItem } from '@/data/faqs/types';
+
+// Shared types for the /compare/* pages. Each competitor gets one data module
+// in this directory plus a line in the registry in index.ts; the dynamic route
+// at src/pages/compare/[slug].astro and the ComparePage island both read from
+// the registry.
+
+export type ComparisonStatus = 'yes' | 'no' | 'partial' | 'coming-soon';
+
+export interface FeatureCell {
+	status: ComparisonStatus;
+	// text may contain JSX, for example links to docs or GitHub. Because of
+	// this the data modules are not serializable across the island boundary;
+	// the route passes only the slug and the island looks the entry up itself.
+	text: ReactNode;
+}
+
+export interface FeatureRow {
+	feature: string;
+	rivet: FeatureCell;
+	competitor: FeatureCell;
+	importance: string;
+}
+
+export interface FeatureGroup {
+	title: string;
+	rows: FeatureRow[];
+}
+
+export interface ChoicePoint {
+	title: string;
+	description: string;
+}
+
+export interface CompareEntry {
+	slug: string;
+	competitorName: string;
+	rivetProductName: string;
+	competitorIcon?: IconProp;
+	// Page title, for example "Rivet vs X". BaseLayout auto-suffixes " - Rivet".
+	title: string;
+	// Meta description, 150 to 160 characters.
+	description: string;
+	heroSubtitle: string;
+	rivetSummary: string;
+	competitorSummary: string;
+	// Both choice lists should be honest; aim for at least 3 points on the
+	// competitor side.
+	whenToChooseRivet: ChoicePoint[];
+	whenToChooseCompetitor: ChoicePoint[];
+	featureGroups: FeatureGroup[];
+	// Verdict paragraphs rendered in order.
+	verdict: string[];
+	migration?: { heading: string; body: string };
+	// Rendered visibly on the page and emitted as FAQPage JSON-LD by the route.
+	faq: FaqItem[];
+	// ISO date, rendered in the hero and used as WebPage dateModified.
+	lastUpdated: string;
+	keywords?: string[];
+}
diff --git a/website/src/pages/compare/[slug].astro b/website/src/pages/compare/[slug].astro
new file mode 100644
index 0000000000..7528287060
--- /dev/null
+++ b/website/src/pages/compare/[slug].astro
@@ -0,0 +1,60 @@
+---
+import MarketingLayout from '@/layouts/MarketingLayout.astro';
+import FaqJsonLd from '@/components/faq/FaqJsonLd.astro';
+import { ComparePage } from '@/components/marketing/compare/ComparePage';
+import { compareEntries, getCompareEntry } from '@/data/compare';
+
+export async function getStaticPaths() {
+	return compareEntries.map((entry) => ({
+		params: { slug: entry.slug },
+	}));
+}
+
+const { slug } = Astro.params;
+// The island receives only the slug because CompareEntry contains JSX cell
+// text that cannot be serialized across the island boundary; both this
+// frontmatter and the island read the same registry.
+const entry = getCompareEntry(slug);
+if (!entry) {
+	throw new Error(`Unknown compare slug: ${slug}`);
+}
+
+const canonicalUrl = `https://rivet.dev/compare/${entry.slug}/`;
+
+const breadcrumbSchema = {
+	'@context': 'https://schema.org',
+	'@type': 'BreadcrumbList',
+	itemListElement: [
+		{ name: 'Home', url: 'https://rivet.dev/' },
+		{ name: 'Compare', url: 'https://rivet.dev/compare/' },
+		{ name: entry.title, url: canonicalUrl },
+	].map((item, index) => ({
+		'@type': 'ListItem',
+		position: index + 1,
+		name: item.name,
+		item: item.url,
+	})),
+};
+
+const webPageSchema = {
+	'@context': 'https://schema.org',
+	'@type': 'WebPage',
+	name: entry.title,
+	description: entry.description,
+	url: canonicalUrl,
+	dateModified: entry.lastUpdated,
+	isPartOf: { '@id': 'https://rivet.dev/#website' },
+};
+---
+
+<MarketingLayout
+	title={entry.title}
+	description={entry.description}
+	canonicalUrl={canonicalUrl}
+	keywords={entry.keywords}
+>
+	<script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
+	<script type="application/ld+json" set:html={JSON.stringify(webPageSchema)} />
+	<FaqJsonLd items={entry.faq} />
+	<ComparePage slug={entry.slug} client:load />
+</MarketingLayout>
diff --git a/website/src/pages/compare/index.astro b/website/src/pages/compare/index.astro
new file mode 100644
index 0000000000..587901610c
--- /dev/null
+++ b/website/src/pages/compare/index.astro
@@ -0,0 +1,84 @@
+---
+import MarketingLayout from '@/layouts/MarketingLayout.astro';
+import { compareEntries } from '@/data/compare';
+
+const title = 'Rivet vs Alternatives';
+const description =
+	'See how Rivet compares with alternative platforms for stateful backends, realtime applications, and durable workflows. Honest feature-by-feature breakdowns.';
+const canonicalUrl = 'https://rivet.dev/compare/';
+
+const breadcrumbSchema = {
+	'@context': 'https://schema.org',
+	'@type': 'BreadcrumbList',
+	itemListElement: [
+		{ name: 'Home', url: 'https://rivet.dev/' },
+		{ name: 'Compare', url: canonicalUrl },
+	].map((item, index) => ({
+		'@type': 'ListItem',
+		position: index + 1,
+		name: item.name,
+		item: item.url,
+	})),
+};
+
+const collectionSchema = {
+	'@context': 'https://schema.org',
+	'@type': 'CollectionPage',
+	name: title,
+	description,
+	url: canonicalUrl,
+	isPartOf: { '@id': 'https://rivet.dev/#website' },
+	mainEntity: {
+		'@type': 'ItemList',
+		itemListElement: compareEntries.map((entry, index) => ({
+			'@type': 'ListItem',
+			position: index + 1,
+			name: entry.title,
+			url: `https://rivet.dev/compare/${entry.slug}/`,
+		})),
+	},
+};
+---
+
+<MarketingLayout title={title} description={description} canonicalUrl={canonicalUrl}>
+	<script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
+	<script type="application/ld+json" set:html={JSON.stringify(collectionSchema)} />
+	<div class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
+		<main>
+			<section class="relative flex flex-col justify-center px-6 pt-32 pb-16">
+				<div class="mx-auto w-full max-w-7xl">
+					<div class="max-w-3xl">
+						<h1 class="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">
+							Rivet vs Alternatives
+						</h1>
+						<p class="text-base leading-relaxed text-zinc-500 md:text-lg">
+							Honest comparisons between Rivet and other platforms for stateful backends,
+							realtime applications, and durable workflows. Each page breaks down features,
+							trade-offs, and when to choose each option.
+						</p>
+					</div>
+				</div>
+			</section>
+			<section class="px-6 pb-32">
+				<div class="mx-auto w-full max-w-7xl">
+					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+						{
+							compareEntries.map((entry) => (
+								<a
+									href={`/compare/${entry.slug}/`}
+									class="group flex flex-col rounded-lg border border-white/10 p-6 transition-colors hover:border-white/20 hover:bg-white/5"
+								>
+									<h2 class="mb-2 text-lg font-normal text-white">{entry.title}</h2>
+									<p class="text-sm leading-relaxed text-zinc-500">{entry.description}</p>
+									<span class="mt-4 text-sm text-zinc-300 transition-colors group-hover:text-white">
+										Read the comparison
+									</span>
+								</a>
+							))
+						}
+					</div>
+				</div>
+			</section>
+		</main>
+	</div>
+</MarketingLayout>

From ef4d7f48c5b432b6b2275ba4d561e1f0672e468b Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 01:57:04 -0700
Subject: [PATCH 04/13] [SLOP(claude-fable-5)] feat(website): add Rivet vs
 Temporal comparison page

---
 website/src/data/compare/index.ts     |   3 +-
 website/src/data/compare/temporal.tsx | 369 ++++++++++++++++++++++++++
 2 files changed, 371 insertions(+), 1 deletion(-)
 create mode 100644 website/src/data/compare/temporal.tsx

diff --git a/website/src/data/compare/index.ts b/website/src/data/compare/index.ts
index bc8ad81d2e..3086b013bf 100644
--- a/website/src/data/compare/index.ts
+++ b/website/src/data/compare/index.ts
@@ -1,10 +1,11 @@
 import type { CompareEntry } from './types';
 import { cloudflareDurableObjects } from './cloudflare-durable-objects';
+import { temporal } from './temporal';
 
 // Ordered registry of comparison pages. Adding a page means adding one data
 // module in this directory and one line here; the /compare routes and the
 // "Other comparisons" links derive from this list.
-export const compareEntries: CompareEntry[] = [cloudflareDurableObjects];
+export const compareEntries: CompareEntry[] = [cloudflareDurableObjects, temporal];
 
 export function getCompareEntry(slug: string): CompareEntry | undefined {
 	return compareEntries.find((entry) => entry.slug === slug);
diff --git a/website/src/data/compare/temporal.tsx b/website/src/data/compare/temporal.tsx
new file mode 100644
index 0000000000..52b8b7d651
--- /dev/null
+++ b/website/src/data/compare/temporal.tsx
@@ -0,0 +1,369 @@
+import type { CompareEntry } from './types';
+
+// Facts about Temporal verified against temporal.io and docs.temporal.io in
+// June 2026: pricing plans and per-action billing, the documented ~100ms
+// minimum end-to-end Cloud latency, worker poll architecture with no ingress,
+// eight first-party SDKs, MIT server license, and self-hosting requirements.
+// Re-verify pricing before major updates since pricing pages churn.
+export const temporal: CompareEntry = {
+	slug: 'rivet-vs-temporal',
+	competitorName: 'Temporal',
+	rivetProductName: 'Rivet',
+	title: 'Rivet vs Temporal',
+	description:
+		'Compare Rivet and Temporal: stateful realtime actors with durable workflows in one runtime versus a dedicated durable execution platform for orchestration.',
+	heroSubtitle:
+		'Temporal is a durable execution platform for orchestrating backend workflows behind your API. Rivet combines stateful actors, realtime connections, and durable workflows in one open-source runtime that serves traffic directly.',
+	rivetSummary:
+		'Rivet is an open-source runtime for stateful backends. Rivet Actors hold persistent state, serve HTTP and WebSocket traffic directly, and include durable workflows with steps, timers, and queue waits, so one runtime covers realtime serving and reliable multi-step execution.',
+	competitorSummary:
+		'Temporal is a durable execution platform built around workflow-as-code. Workflows run on your worker fleet, coordinate through the Temporal Service with full event-history replay, and recover from failures automatically. It is battle-tested at very large scale and orchestrates work behind your API rather than serving user traffic itself.',
+	whenToChooseRivet: [
+		{
+			title: 'Realtime and workflows in one runtime',
+			description:
+				'When your product needs WebSockets, presence, or per-user sessions alongside durable multi-step logic, without running a separate orchestrator next to your serving layer',
+		},
+		{
+			title: 'Low-latency interactive workloads',
+			description:
+				'When user-facing requests need to hit stateful code directly instead of round-tripping through a task queue; Temporal documents a minimum end-to-end latency of around 100ms on Temporal Cloud',
+		},
+		{
+			title: 'Long-lived stateful entities',
+			description:
+				'When you model chatty, long-lived sessions such as agents, documents, or game lobbies that would hit workflow event-history limits and continue-as-new choreography in Temporal',
+		},
+		{
+			title: 'Lightweight self-hosting',
+			description:
+				'When you want a self-contained engine you can run yourself without operating a multi-service cluster with separate persistence and search stores',
+		},
+		{
+			title: 'Per-entity state and storage',
+			description:
+				'When each user, document, or agent should own its own persistent state, with KV and an embedded SQLite database co-located with compute',
+		},
+	],
+	whenToChooseCompetitor: [
+		{
+			title: 'Mature orchestration at massive scale',
+			description:
+				'When you need a durable execution platform proven on millions to billions of workflow executions in production at large enterprises',
+		},
+		{
+			title: 'Polyglot teams',
+			description:
+				'When workflows and activities span Go, Java, Python, TypeScript, .NET, PHP, or Ruby, coordinated across languages through one service',
+		},
+		{
+			title: 'Deep replay debugging and audit trails',
+			description:
+				'When you need a complete event history for every execution, replay-based debugging, and the ability to reset or patch workflows in production',
+		},
+		{
+			title: 'Enterprise reliability requirements',
+			description:
+				'When you need multi-region or multi-cloud failover with a 99.99% SLA and enterprise controls such as SCIM and private networking',
+		},
+	],
+	featureGroups: [
+		{
+			title: 'Open Source & Hosting',
+			rows: [
+				{
+					feature: 'Open-source',
+					rivet: {
+						status: 'yes',
+						text: (
+							<>
+								Yes, Rivet is open-source with the Apache 2.0 license.{' '}
+								<a href="https://github.com/rivet-dev/rivet">View on GitHub</a>.
+							</>
+						),
+					},
+					competitor: {
+						status: 'yes',
+						text: 'Yes, the Temporal server is MIT-licensed and free to self-host',
+					},
+					importance:
+						'Building your core technology on open-source software ensures portability and flexibility as your needs change',
+				},
+				{
+					feature: 'Self-hosting footprint',
+					rivet: {
+						status: 'yes',
+						text: 'Self-contained engine that runs with Docker Compose or Kubernetes',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Four server services plus a database, with Elasticsearch or OpenSearch recommended beyond small workloads',
+					},
+					importance:
+						'A smaller production footprint means less infrastructure to operate, monitor, and upgrade',
+				},
+				{
+					feature: 'Managed cloud',
+					rivet: {
+						status: 'yes',
+						text: (
+							<>
+								Rivet Cloud with a free tier.{' '}
+								<a href="https://rivet.dev/cloud">See pricing</a>.
+							</>
+						),
+					},
+					competitor: {
+						status: 'yes',
+						text: 'Temporal Cloud, consumption-based with plan minimums starting at $100 per month; startup credits but no perpetual free tier',
+					},
+					importance:
+						'A managed option lets you start without operating infrastructure and scale later',
+				},
+			],
+		},
+		{
+			title: 'Serving & Realtime',
+			rows: [
+				{
+					feature: 'Serves user-facing traffic directly',
+					rivet: {
+						status: 'yes',
+						text: 'Actors terminate HTTP, WebSocket, and SSE connections themselves',
+					},
+					competitor: {
+						status: 'no',
+						text: 'Workers poll task queues over outbound connections only; you build a separate API layer that talks to workflows through the Temporal Service',
+					},
+					importance:
+						'Serving traffic from the same runtime that holds state removes an entire tier of gateways and glue code',
+				},
+				{
+					feature: 'WebSockets and realtime events',
+					rivet: {
+						status: 'yes',
+						text: 'Built-in connection handling, event broadcasting, and reconnection logic',
+					},
+					competitor: {
+						status: 'no',
+						text: 'No connection layer; signals, queries, and updates round-trip through the service to a polling worker',
+					},
+					importance:
+						'Realtime products need per-connection state and low-latency fanout that task queues are not designed for',
+				},
+				{
+					feature: 'Interactive request latency',
+					rivet: {
+						status: 'yes',
+						text: 'Requests reach in-memory actor state directly',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Temporal documents a minimum end-to-end latency of around 100ms on Temporal Cloud and recommends keeping it out of the hot path for interactive transactions',
+					},
+					importance:
+						'Latency floors compound across every user interaction in interactive products',
+				},
+				{
+					feature: 'Per-entity state and storage',
+					rivet: {
+						status: 'yes',
+						text: (
+							<>
+								Each actor owns persistent KV state and an embedded{' '}
+								<a href="https://rivet.dev/docs/actors/sqlite">SQLite database</a>
+							</>
+						),
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Workflow state lives in event history; reads go through queries, and hard history limits require continue-as-new for long-lived entities',
+					},
+					importance:
+						'Long-lived entities such as agents and documents accumulate state that needs direct, queryable storage',
+				},
+			],
+		},
+		{
+			title: 'Durable Workflows',
+			rows: [
+				{
+					feature: 'Durable multi-step execution',
+					rivet: {
+						status: 'yes',
+						text: (
+							<>
+								Replay-safe workflows with steps, timers, queue waits, and rollback.{' '}
+								<a href="https://rivet.dev/docs/actors/workflows">Learn more</a>.
+							</>
+						),
+					},
+					competitor: {
+						status: 'yes',
+						text: 'Workflow-as-code with automatic retries, durable timers, and full event-history replay',
+					},
+					importance:
+						'Durable execution lets multi-step operations survive crashes and restarts without manual checkpointing',
+				},
+				{
+					feature: 'Scheduling and cron',
+					rivet: {
+						status: 'yes',
+						text: 'Built-in scheduling for one-shot and recurring work',
+					},
+					competitor: {
+						status: 'yes',
+						text: 'First-class Schedules with backfill, pause, and trigger; each schedule run bills three actions on Temporal Cloud',
+					},
+					importance:
+						'Native scheduling avoids bolting an external cron system onto durable logic',
+				},
+				{
+					feature: 'Code constraints',
+					rivet: {
+						status: 'partial',
+						text: 'Side effects must run inside recorded steps; the rest of the run loop replays automatically',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Workflow code must be fully deterministic; I/O, time, and randomness go through activities or SDK-provided equivalents, and non-determinism errors are a common pitfall',
+					},
+					importance:
+						'Determinism rules shape how much existing code you can reuse and how steep the learning curve is',
+				},
+				{
+					feature: 'AI agent workloads',
+					rivet: {
+						status: 'yes',
+						text: 'Actors hold agent state, stream tokens over WebSockets, and run durable agent loops in one place',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'OpenAI Agents SDK and Google ADK integrations run LLM calls as activities; durable response streaming is in public preview',
+					},
+					importance:
+						'Agents need durability for long-running loops and realtime streaming for user experience at the same time',
+				},
+			],
+		},
+		{
+			title: 'Operations & Ecosystem',
+			rows: [
+				{
+					feature: 'Language support',
+					rivet: {
+						status: 'partial',
+						text: 'TypeScript is the flagship SDK; a Rust SDK is available in preview',
+					},
+					competitor: {
+						status: 'yes',
+						text: 'Eight first-party SDKs: Go, Java, TypeScript, Python, .NET, PHP, and Ruby, with Rust in preview',
+					},
+					importance:
+						'SDK breadth matters when teams orchestrate work across several languages',
+				},
+				{
+					feature: 'Replay debugging and audit trail',
+					rivet: {
+						status: 'partial',
+						text: 'Workflow step progress and actor state are inspectable in the dashboard',
+					},
+					competitor: {
+						status: 'yes',
+						text: 'Complete event history per execution with local replay, resets, and production debugging tools',
+					},
+					importance:
+						'Audit-grade history makes incident forensics and compliance reviews far easier',
+				},
+				{
+					feature: 'State inspector',
+					rivet: {
+						status: 'yes',
+						text: 'Built-in tools to view and edit live actor state, connections, and RPCs',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Web UI shows event history and workflow status; reading state requires queries',
+					},
+					importance:
+						'Direct visibility into live state speeds up debugging and operations',
+				},
+				{
+					feature: 'Local development',
+					rivet: {
+						status: 'yes',
+						text: 'One dev process; the engine runs alongside your application',
+					},
+					competitor: {
+						status: 'yes',
+						text: 'Single-binary dev server via the Temporal CLI with no external dependencies',
+					},
+					importance:
+						'Fast local setup keeps the development loop short for every engineer on the team',
+				},
+				{
+					feature: 'Cost model for chatty workloads',
+					rivet: {
+						status: 'yes',
+						text: 'Rivet Cloud bills primarily on compute (Awake Actor Hours), not per message',
+					},
+					competitor: {
+						status: 'partial',
+						text: 'Every workflow start, activity, retry, signal, query, update, and timer bills as an action, starting at $50 per million',
+					},
+					importance:
+						'Realtime sessions send many small messages; per-message billing makes them structurally expensive',
+				},
+			],
+		},
+	],
+	verdict: [
+		'Temporal is the more mature choice for pure backend orchestration. If your workload is multi-step business processes behind an API, with polyglot teams and strict audit requirements, its durable execution model is battle-tested at enormous scale and its replay debugging is unmatched.',
+		'Rivet covers durable workflows and the serving layer in one runtime. Choose Rivet when your product is interactive: agents, collaborative apps, multiplayer, or per-user sessions where the same entity that holds state must also serve WebSocket and HTTP traffic at low latency. You get steps, timers, and replay-safe workflows without operating a separate orchestrator or paying per message.',
+	],
+	migration: {
+		heading: 'Evaluating Rivet alongside Temporal?',
+		body: 'Our team can help you map workflows to Rivet Actors and decide which workloads belong where. We provide migration assistance, technical guidance, and dedicated support.',
+	},
+	faq: [
+		{
+			question: 'Is Rivet an alternative to Temporal?',
+			answerHtml:
+				'For many workloads, yes. Rivet provides durable, replayable workflows inside Rivet Actors, plus realtime serving that Temporal does not offer. If your workload is pure backend orchestration across many languages, Temporal is a strong choice. If it combines durable logic with stateful realtime serving, Rivet covers both in one runtime. See <a href="https://rivet.dev/docs/actors/workflows">Rivet workflows</a>.',
+		},
+		{
+			question: 'Does Rivet support durable execution like Temporal?',
+			answerHtml:
+				'Yes. Rivet workflows persist progress automatically, replay safely after restarts and crashes, and support steps, durable timers, queue waits, and rollback. They run inside Rivet Actors, so durable logic lives next to the state it operates on. See the <a href="https://rivet.dev/docs/actors/workflows">workflow documentation</a>.',
+		},
+		{
+			question: 'Can Temporal serve WebSockets or user-facing traffic?',
+			answerHtml:
+				'No. Temporal workers poll task queues over outbound connections and do not terminate HTTP or WebSocket traffic; you build a separate API layer that communicates with workflows through the Temporal Service. Rivet Actors serve HTTP, WebSocket, and SSE traffic directly from the runtime that holds state.',
+		},
+		{
+			question: 'How does pricing differ between Rivet Cloud and Temporal Cloud?',
+			answerHtml:
+				'Temporal Cloud bills per action: workflow starts, activities and their retries, signals, queries, updates, and timers all count, with plan minimums starting at $100 per month and no perpetual free tier. Rivet Cloud bills primarily on compute through Awake Actor Hours and includes a free tier, so message-heavy realtime sessions do not multiply costs. See <a href="https://rivet.dev/cloud">Rivet Cloud pricing</a>.',
+		},
+		{
+			question: 'Is Rivet open source like Temporal?',
+			answerHtml:
+				'Yes. Rivet is licensed under Apache 2.0 and the Temporal server is MIT-licensed, and both can be self-hosted. Rivet ships as a self-contained engine, while a production Temporal cluster runs four services plus a database and usually Elasticsearch or OpenSearch. The source is at <a href="https://github.com/rivet-dev/rivet">github.com/rivet-dev/rivet</a>.',
+		},
+		{
+			question: 'Which languages do Rivet and Temporal support?',
+			answerHtml:
+				'Temporal has eight first-party SDKs, including Go, Java, TypeScript, Python, .NET, PHP, and Ruby, with Rust in preview. Rivet is TypeScript-first with a Rust SDK in preview. If your team orchestrates workflows across many languages today, Temporal has the broader SDK surface.',
+		},
+	],
+	lastUpdated: '2026-06-11',
+	keywords: [
+		'temporal alternative',
+		'rivet vs temporal',
+		'durable execution',
+		'durable workflows',
+		'workflow orchestration',
+		'temporal.io alternative',
+	],
+};

From 96410c7e5b3de99081a3d736e25fe82bcdceb5cd Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 02:06:08 -0700
Subject: [PATCH 05/13] [SLOP(claude-fable-5)] docs(website): add six cookbook
 entries with docs cross-links

---
 website/src/content/cookbook/ai-agent.mdx     | 133 ++++++++++++++
 website/src/content/cookbook/chat-room.mdx    | 117 +++++++++++++
 .../cookbook/collaborative-text-editor.mdx    | 163 ++++++++++++++++++
 website/src/content/cookbook/cron-jobs.mdx    | 144 ++++++++++++++++
 website/src/content/cookbook/live-cursors.mdx | 163 ++++++++++++++++++
 .../content/cookbook/per-tenant-database.mdx  | 122 +++++++++++++
 .../src/content/docs/actors/connections.mdx   |   2 +-
 website/src/content/docs/actors/events.mdx    |   2 +
 website/src/content/docs/actors/queues.mdx    |   2 +
 website/src/content/docs/actors/schedule.mdx  |   2 +
 .../content/docs/actors/sqlite-drizzle.mdx    |   2 +-
 website/src/content/docs/actors/sqlite.mdx    |   2 +-
 12 files changed, 851 insertions(+), 3 deletions(-)
 create mode 100644 website/src/content/cookbook/ai-agent.mdx
 create mode 100644 website/src/content/cookbook/chat-room.mdx
 create mode 100644 website/src/content/cookbook/collaborative-text-editor.mdx
 create mode 100644 website/src/content/cookbook/cron-jobs.mdx
 create mode 100644 website/src/content/cookbook/live-cursors.mdx
 create mode 100644 website/src/content/cookbook/per-tenant-database.mdx

diff --git a/website/src/content/cookbook/ai-agent.mdx b/website/src/content/cookbook/ai-agent.mdx
new file mode 100644
index 0000000000..2b39c4af78
--- /dev/null
+++ b/website/src/content/cookbook/ai-agent.mdx
@@ -0,0 +1,133 @@
+---
+title: "AI Agent"
+description: "Patterns for building an AI agent backend with persistent conversation memory: one Rivet Actor per conversation, queue-driven message handling, streaming LLM responses as realtime events, and sandboxed coding agents."
+templates: ["ai-agent"]
+---
+
+Patterns for building AI agent backends with RivetKit, where each conversation is one Rivet Actor that owns its memory, its message queue, and its streaming output.
+
+## Starter Code
+
+Start with one of the working examples on [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent) and adapt it. The sections below describe the flagship `ai-agent` example unless a variant is called out explicitly.
+
+| Variant | Starter Code | Use When |
+| --- | --- | --- |
+| Queue-driven AI SDK agent | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent) | You want a streaming chat agent where each conversation keeps its own persistent memory and processes one message at a time. |
+| Sandbox coding agent | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox-coding-agent) | The agent should run a coding agent (Codex by default) inside an isolated [sandbox](/docs/actors/sandbox) via Docker, Daytona, or E2B. |
+| Durable streams agent (experimental) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/experimental-durable-streams-ai-agent) | You want replayable, restart-safe prompt and response delivery through durable streams instead of actor state and events. |
+
+## Conversation Memory
+
+Use one actor per conversation, keyed by a conversation or agent id (see [Actor Keys](/docs/actors/keys)). The agent actor's persistent [state](/docs/actors/state) is the conversation memory: in the `ai-agent` example, `messages` and `status` live in JSON actor state and survive sleep and restarts with no external database. Every model call rebuilds the prompt from `c.state.messages` plus a system prompt, so memory and inference input are the same data.
+
+| Variant | Where Memory Lives | Persisted State Fields |
+| --- | --- | --- |
+| `ai-agent` | JSON actor state | `messages`, `status` |
+| `sandbox-coding-agent` | JSON actor state plus the sandbox ACP session | `messages`, `status`, `sessionId` |
+| `experimental-durable-streams-ai-agent` | Durable streams; the actor stores only its conversation id and a read cursor | `conversationId`, `promptStreamOffset` |
+
+## Message Handling
+
+In the `ai-agent` example, the client pushes user input onto the agent's `message` [queue](/docs/actors/queues) with `agent.connection.send("message", { text, sender })`. This is a queue push, not an action call. The actor's `run` hook (see [Lifecycle](/docs/actors/lifecycle)) consumes the queue serially with `for await (const queued of c.queue.iter())`.
+
+Serial queue consumption is the per-conversation concurrency guarantee: at most one in-flight model call per actor, with no extra locking. The `status` field (`thinking` while a model call is in flight) is UI signal only; the run loop is the actual lock. The loop also checks `c.aborted` inside the token stream so shutdown exits gracefully.
+
+| Variant | Message Ingress | Serialization Guarantee |
+| --- | --- | --- |
+| `ai-agent` | `message` queue pushed via `connection.send` | `run` hook pops one queued message at a time with `c.queue.iter()`. |
+| `sandbox-coding-agent` | `sendMessage` [action](/docs/actors/actions), no queue | Each call awaits the sandbox round trip before broadcasting the result. |
+| `experimental-durable-streams-ai-agent` | Durable prompt stream long-polled from `onWake` | `promptStreamOffset` is persisted per chunk, so restarts resume without reprocessing prompts. |
+
+## Streaming Responses
+
+The `ai-agent` actor broadcasts a `response` [event](/docs/actors/events) for every model text delta. The payload carries `messageId`, the per-token `delta`, the cumulative `content`, and a `done` flag (plus `error` on failure), so clients can either append deltas or idempotently replace the message by `messageId` using `content`. The example frontend replaces by `messageId`, which tolerates dropped events. The terminal broadcast has an empty `delta`, the full `content`, and `done: true`.
+
+Because the assistant message object lives in `c.state.messages` and is mutated in place during streaming, partial content persists if the actor restarts mid-stream. The example broadcasts once per AI SDK delta with no throttling; batching or throttling deltas is a recommended extension for high-traffic deployments, not something the example implements.
+
+Variant differences: `sandbox-coding-agent` sends a single `response` broadcast with `done: true` after the sandbox finishes (no incremental streaming), and `experimental-durable-streams-ai-agent` appends per-token chunks to a durable response stream, then broadcasts `responseComplete` or `responseError`.
+
+## Architecture
+
+| Topic | Summary |
+| --- | --- |
+| Topology | `agentManager["primary"]` singleton directory plus one `agent[agentId]` actor per conversation. |
+| Ingress | Client pushes `AgentQueueMessage` payloads onto the agent's `message` queue with `connection.send`. |
+| Streaming | One `response` broadcast per model delta, terminal broadcast with `done: true`. |
+| Memory | Full transcript and status in JSON actor state; no external database. |
+
+The manager creates `AgentInfo` records and warms each agent through [actor-to-actor communication](/docs/actors/communicating-between-actors): `createAgent` calls `c.client<typeof registry>()`, then `client.agent.getOrCreate([info.id])` and awaits `getStatus()` so the conversation actor exists before the client connects. The sandbox variant extends this topology with a `codingSandbox` actor that shares the agent's key (`codingSandbox.getOrCreate([c.key[0]])`), so the agent-to-sandbox mapping is implicit in the key space.
+
+**Actors**
+
+<AccordionGroup>
+<Accordion title='agentManager["primary"]'>
+
+- **Key**: `agentManager["primary"]`
+- **Responsibility**: Directory actor. Creates `AgentInfo` records, lists agents, and warms each agent actor via `c.client()`.
+- **Actions**
+  - `createAgent`
+  - `listAgents`
+- **Queues**
+  - None
+- **State**
+  - JSON
+  - `agents`
+
+</Accordion>
+<Accordion title="agent[agentId]">
+
+- **Key**: `agent[agentId]`
+- **Responsibility**: One actor per conversation. Holds the full message history and status, consumes queued user messages in its `run` loop, calls the model via the AI SDK, and broadcasts streaming deltas.
+- **Actions**
+  - `getHistory`
+  - `getStatus`
+- **Queues**
+  - `message`
+- **Events**
+  - `messageAdded`
+  - `status`
+  - `response`
+- **State**
+  - JSON
+  - `messages`
+  - `status`
+
+</Accordion>
+</AccordionGroup>
+
+**Lifecycle**
+
+```mermaid
+sequenceDiagram
+	participant C as Client
+	participant AM as agentManager
+	participant A as agent
+	participant LLM as Model API
+
+	C->>AM: createAgent(name)
+	AM->>A: getOrCreate([info.id]) + getStatus()
+	AM-->>C: AgentInfo
+	C->>A: connection.send("message", {text, sender})
+	Note over A: run loop pops queue via c.queue.iter()
+	A-->>C: messageAdded (user message)
+	A-->>C: messageAdded (assistant placeholder)
+	A-->>C: status (thinking)
+	A->>LLM: streamText(system prompt + history)
+	loop each text delta
+		LLM-->>A: delta
+		A-->>C: response {messageId, delta, content, done: false}
+	end
+	A-->>C: response {delta: "", content, done: true}
+	A-->>C: status (idle)
+```
+
+## Security Checklist
+
+The examples ship without auth so they stay minimal. Apply this baseline before exposing an agent backend.
+
+- **API keys stay server-side**: `OPENAI_API_KEY` (or `ANTHROPIC_API_KEY`) is read by the AI SDK inside the actor process. The key never reaches the browser; clients only talk to the actor over RivetKit. The sandbox variant forwards keys into the sandbox env, never to the client.
+- **Add authentication**: The examples have no auth, so anyone who reaches the server can create agents, list them, and message any agent whose key they can guess. Add `onAuth` and scoped tokens as a recommended extension. See [Authentication](/docs/actors/authentication).
+- **Validate and rate-limit queue payloads**: The example only skips bodies without a string `text`. Enforce payload size limits, schema validation, and per-connection rate limits as a recommended extension.
+- **Derive sender identity server-side**: The example trusts the client-supplied `sender` field verbatim. Bind sender identity to the authenticated connection instead.
+- **Cap or trim message history**: The example sends the full transcript on every model call with no cap. Trim or summarize old messages as a recommended extension so prompts and state stay bounded.
+- **Set cost ceilings per conversation**: Add per-agent token budgets and quotas as a recommended extension. The sandbox variant runs real compute, so also enforce per-user sandbox quotas and restrict sandbox network egress.
diff --git a/website/src/content/cookbook/chat-room.mdx b/website/src/content/cookbook/chat-room.mdx
new file mode 100644
index 0000000000..e109e56938
--- /dev/null
+++ b/website/src/content/cookbook/chat-room.mdx
@@ -0,0 +1,117 @@
+---
+title: "Chat Room"
+description: "Build a realtime chat room backend with Rivet Actors. One actor per room key, SQLite-backed message history, and WebSocket broadcast of new messages to every connected client, plus extension patterns for typing indicators, presence, and per-user inboxes."
+templates: ["chat-room"]
+---
+
+Patterns for building a chat room backend with RivetKit: room-scoped actors, persistent message history, and realtime delivery over WebSocket connections.
+
+## Starter Code
+
+Start with the working example on [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/chat-room) and adapt it. The backend is a single `chatRoom` actor; the frontend is a React app using `@rivetkit/react` (see the [React quickstart](/docs/actors/quickstart/react)).
+
+| Topic | Summary |
+| --- | --- |
+| Room model | One `chatRoom` actor per room key. The frontend defaults the key to `general`; typing a different room name connects to a different actor. |
+| History | SQLite `messages` table created in `db({ onMigrate })`, read back with `ORDER BY id ASC`. |
+| Delivery | `sendMessage` inserts the row, then broadcasts a typed `newMessage` event to every connected client. |
+| Identity | None in the example. `sender` is a plain action argument; production should bind identity to the connection. |
+
+## Room-Per-Actor Model
+
+Each room is one Rivet Actor instance, addressed by [key](/docs/actors/keys). The client calls `useActor({ name: "chatRoom", key: [roomId] })`, which gets-or-creates the actor for that room. This gives you:
+
+- **Isolation**: each room's history and connections are fully scoped to its key. Switching the room input re-keys the hook and connects to a different actor with separate history.
+- **A single serialized writer**: all `sendMessage` calls for one room run through one actor, so message ordering is consistent without locks. The SQLite `AUTOINCREMENT` id is the canonical order, which is why `getHistory` sorts by `id` rather than by timestamp.
+- **Natural scaling**: rooms spread across the cluster independently. A hot room does not slow down other rooms.
+
+## Message History Storage
+
+This example stores history in the actor's SQLite database, not in JSON state. Pick based on history size and query needs:
+
+| Approach | Use When | Implementation Guidance |
+| --- | --- | --- |
+| [SQLite](/docs/actors/sqlite) (what this example uses) | Large or long-lived history that needs ordering, caps, pagination, or search | Create the `messages` table in `db({ onMigrate })`, insert with parameterized queries (`c.db.execute("INSERT ... VALUES (?, ?, ?)", ...)`), and read with `ORDER BY id ASC`. History survives actor sleep and scales past what you want in memory. |
+| [JSON state](/docs/actors/state) | Small recent history, for example the last 50 to 100 messages | Push onto a `messages` array in actor state and trim to a cap on every send. Simplest option, but the whole history lives in memory and there is no query layer, so it only fits bounded recent-history use cases. |
+
+## Broadcast Delivery
+
+New messages reach connected clients through a typed [event](/docs/actors/events):
+
+- The actor declares `events: { newMessage: event<Message>() }`, where `Message` is `{ sender, text, timestamp }`.
+- The `sendMessage` [action](/docs/actors/actions) builds the message with a server-side `Date.now()` timestamp, inserts it into the `messages` table, then calls `c.broadcast("newMessage", message)` and returns the message to the caller.
+- Each client subscribes with `useEvent("newMessage", ...)` and appends to its local list. The sender renders its own message through the same broadcast path as everyone else, so all clients stay on one code path.
+- History load is connection-gated: once the connection is ready, the client calls `getHistory()` once to render the backlog, then relies on events for everything after.
+
+Use `c.broadcast(...)` for room-wide messages. For private or per-recipient payloads (such as DMs inside a room), send on the individual connection instead, which is a recommended extension beyond this example.
+
+## Typing Indicators And Presence (Extension)
+
+The example does not implement typing indicators, presence, or join/leave handling of any kind. There is no `createConnState`, `onConnect`, or `onDisconnect` in the code. If you need them, add them as ephemeral [connection](/docs/actors/connections) behavior:
+
+- **Keep it ephemeral**: store the username and typing flag in per-connection state, never in SQLite or persisted actor state. Presence is derived from live connections and should disappear with them.
+- **Broadcast on change only**: emit a typing event when a user starts or stops typing, and a presence event from `onConnect` / `onDisconnect`, rather than polling or ticking.
+- **Expire on the client**: clear a typing indicator after a short client-side timeout so a dropped connection never leaves a stuck "is typing" row.
+
+## Per-User Inbox (Extension)
+
+For offline delivery, DMs, unread counts, or notification fanout, add a `userInbox[userId]` actor per user. This is an extension beyond the example:
+
+- The room actor forwards each message to the inbox actor of every member via [actor-to-actor calls](/docs/actors/communicating-between-actors), so users who are not connected to the room still accumulate messages.
+- The inbox actor owns per-user unread state and serves it when the user comes online, independent of which rooms they are in.
+- DMs become a degenerate room: either a `chatRoom` keyed by the sorted pair of user ids, or direct inbox-to-inbox delivery if you do not need shared history semantics.
+
+## Actors
+
+<AccordionGroup>
+<Accordion title="chatRoom[roomId]">
+
+- **Key**: `chatRoom[roomId]`
+- **Responsibility**: Owns one chat room. Persists the room's message history in its SQLite database and broadcasts each new message to every connected client.
+- **Actions**
+  - `sendMessage`
+  - `getHistory`
+- **Queues**
+  - None
+- **Events**
+  - `newMessage`
+- **State**
+  - SQLite
+  - `messages` table: `id` (autoincrement primary key), `sender`, `text`, `timestamp`
+
+</Accordion>
+</AccordionGroup>
+
+## Lifecycle
+
+```mermaid
+sequenceDiagram
+	participant A as Client A
+	participant B as Client B
+	participant R as chatRoom
+
+	A->>R: connect with key [roomId]
+	Note over R: first start runs onMigrate (CREATE TABLE messages)
+	A->>R: getHistory()
+	R-->>A: Message[] ordered by id
+	B->>R: connect with key [roomId]
+	B->>R: getHistory()
+	R-->>B: Message[] ordered by id
+	A->>R: sendMessage(sender, text)
+	Note over R: INSERT row with server timestamp
+	R-->>A: newMessage (broadcast)
+	R-->>B: newMessage (broadcast)
+	A->>R: disconnect
+	Note over R: history stays in SQLite for the next connection
+```
+
+## Security Checklist
+
+The example is intentionally minimal and skips all of the following. Add them before production:
+
+- **Auth before join**: any client can join any room by knowing its name, and `sender` is arbitrary client input on every call. Validate a token during [connection auth](/docs/actors/authentication), bind identity to [connection state](/docs/actors/connections), and check room membership before serving history. Never trust a sender name passed as an action argument.
+- **Message length clamps**: the example accepts empty messages and has no length limit. Trim server-side, reject empty text, and clamp to a maximum length.
+- **Per-connection rate limiting**: rate limit `sendMessage` per connection to stop spam and broadcast amplification.
+- **Server-side timestamps and ids**: the example already does this correctly. `timestamp` comes from `Date.now()` inside the action and `id` from SQLite `AUTOINCREMENT`. Keep it that way; never accept client-supplied timestamps or ids.
+- **History caps**: `getHistory` returns every row with no limit. Add a `LIMIT` plus pagination, and prune or archive old rows so a long-lived room cannot grow unbounded.
+- **Parameterized queries**: the example already inserts with `?` placeholders. Keep all user-supplied text out of SQL string interpolation.
diff --git a/website/src/content/cookbook/collaborative-text-editor.mdx b/website/src/content/cookbook/collaborative-text-editor.mdx
new file mode 100644
index 0000000000..1540cdf997
--- /dev/null
+++ b/website/src/content/cookbook/collaborative-text-editor.mdx
@@ -0,0 +1,163 @@
+---
+title: "Collaborative Text Editor"
+description: "Build a collaborative text editor backend with Yjs CRDTs and Rivet Actors: a per-document actor relays CRDT document sync and awareness updates to every collaborator, persists merged Yjs snapshots in actor KV, and a coordinator actor indexes documents per workspace."
+templates: ["collaborative-document"]
+---
+
+Patterns for building a Yjs server on RivetKit: CRDT document sync, presence and cursors, and snapshot persistence, with one Rivet Actor per document acting as a relay.
+
+## Starter Code
+
+Start with the working example on [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document) and adapt it to your editor. It ships a React frontend with a plain textarea, remote cursor overlays, and a workspace document index.
+
+| Use Case | Starter Code | Common Examples |
+| --- | --- | --- |
+| Shared document editing | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document) | Notion-style docs, shared notes, pair-writing tools, form co-editing |
+
+## CRDT vs OT
+
+Two families of algorithms solve concurrent text editing. The choice decides what your server has to do.
+
+| Dimension | CRDT (Yjs) | Operational Transformation |
+| --- | --- | --- |
+| Conflict resolution model | Commutative merges. Updates apply in any order on any peer and converge to the same result. | Server transforms each operation against every concurrent operation. Correctness depends on a central sequencer. |
+| Offline support | Strong. Clients keep editing locally and merge buffered updates on reconnect. | Weak. Long-lived divergence makes transformation chains complex and fragile. |
+| Server role | Relay plus persistence. The server applies opaque updates and rebroadcasts them. It never needs to understand document semantics. | Authoritative transformer. The server must implement transformation logic for every operation type. |
+| Library maturity | Yjs is mature and widely deployed, with bindings for ProseMirror, CodeMirror, Monaco, and others. | Production-grade implementations are mostly proprietary (Google Docs) or aging (ShareDB). |
+
+The example uses Yjs because CRDTs let the server stay a relay-style Rivet Actor. The actor applies each incoming update to a server-side `Y.Doc` so it can persist the merged state and serve late joiners, but it never transforms operations or arbitrates conflicts. Ordering does not matter because Yjs merges are commutative.
+
+## Document Actor Model
+
+| Topic | Summary |
+| --- | --- |
+| Topology | One `document[workspaceId, documentId]` actor per document plus one `documentList[workspaceId]` coordinator per workspace. |
+| Sync model | Each client holds a local `Y.Doc`. The document actor relays incremental Yjs updates as broadcast [events](/docs/actors/events) and keeps a server-side merged copy in vars. |
+| Persistence | Full merged Yjs snapshot overwritten in one binary [actor KV](/docs/actors/kv) key (`yjs:doc`) on every sync update. Document metadata lives in JSON [state](/docs/actors/state). |
+| Queues | None. The example is purely [actions](/docs/actors/actions) plus broadcast events. |
+| Presence | Yjs Awareness relayed through the same `applyUpdate` action. Per-connection `connState` tracks asserted awareness clientIds for disconnect cleanup. |
+
+The two-actor split follows the coordinator pattern from [Design Patterns](/docs/actors/design-patterns): the coordinator owns discovery and creation, and each document actor owns one document's realtime state. Multi-part [keys](/docs/actors/keys) scope both actors to a workspace.
+
+**Actors**
+
+<AccordionGroup>
+<Accordion title="document[workspaceId, documentId]">
+
+- **Key**: `document[workspaceId, documentId]`
+- **Responsibility**: Applies incoming sync and awareness updates to a server-side `Y.Doc` and `Awareness`, persists the merged Yjs snapshot to actor KV, and broadcasts updates to all connected collaborators.
+- **Actions**
+  - `getContent`
+  - `applyUpdate`
+  - `getAwareness`
+- **Queues**
+  - None
+- **State**
+  - JSON metadata only: `title`, `createdAt`, `updatedAt`
+  - Binary KV key `yjs:doc` holding the full merged Yjs snapshot
+  - Ephemeral vars: the live `Y.Doc` and `Awareness`, created in `createVars` and rehydrated from KV on actor start
+  - Per-connection `connState`: `clientIds` of awareness clients asserted by that connection
+
+</Accordion>
+<Accordion title="documentList[workspaceId]">
+
+- **Key**: `documentList[workspaceId]`
+- **Responsibility**: Coordinator for one workspace. Creates document actors through the actor-to-actor client and maintains the index of document summaries.
+- **Actions**
+  - `createDocument`
+  - `listDocuments`
+  - `deleteDocument`
+- **Queues**
+  - None
+- **State**
+  - JSON
+  - `documents` array of `DocumentSummary` entries (`id`, `title`, `createdAt`, `updatedAt`)
+
+</Accordion>
+</AccordionGroup>
+
+The coordinator's `createDocument` generates a UUID, then explicitly creates the document actor with `c.client<typeof registry>()` and passes `{ title, createdAt }` as creation [input](/docs/actors/input), which the document actor's `createState` consumes. See [Communicating Between Actors](/docs/actors/communicating-between-actors) for the actor-to-actor client.
+
+## Update Relay
+
+A single `applyUpdate(update, kind, clientId?)` action handles both update kinds. Updates cross the action boundary as `number[]` byte arrays and are converted back to `Uint8Array` on each side.
+
+| Kind | Server Applies To | Persists | Broadcasts |
+| --- | --- | --- | --- |
+| `"sync"` | `c.vars.doc` via `Y.applyUpdate` with origin `"client"` | Full merged snapshot to KV key `yjs:doc`, then bumps `updatedAt` | `sync` event carrying the incremental update |
+| `"awareness"` | `c.vars.awareness` via `applyAwarenessUpdate` with origin `"client"` | Nothing. Presence is ephemeral. | `awareness` event carrying the update |
+
+Note the asymmetry on the sync branch: the broadcast carries only the small incremental update, while the KV write stores the full merged document re-encoded with `Y.encodeStateAsUpdate`.
+
+Yjs origin tags are the echo guards that keep the relay loop-free:
+
+| Origin Tag | Set Where | Effect |
+| --- | --- | --- |
+| `"local"` | Client edits inside `doc.transact(..., "local")` | The client's update listener fires and sends `applyUpdate` to the actor. |
+| `"client"` | Server applying an incoming update to its `Y.Doc` or `Awareness` | Marks the change as client-originated on the server copy. |
+| `"remote"` | Client applying broadcast events or initial sync data | Update listeners early-return on `"remote"`, so a client never re-sends its own echo. |
+
+On connect or reconnect, the client calls `getContent` and `getAwareness`, then applies both results to its local `Y.Doc` and `Awareness` with origin `"remote"`. After that, every change flows through `applyUpdate` and the broadcast events.
+
+## Awareness And Presence
+
+Presence (user names, colors, cursor positions) rides on the Yjs Awareness protocol instead of actor state:
+
+- Clients set presence with `awareness.setLocalStateField` for the `user` and `cursor` fields. The awareness update listener encodes the change and sends `applyUpdate(update, "awareness", awareness.clientID)`.
+- The actor records each asserted `clientId` in that connection's `connState.clientIds`, applies the update to the server-side `Awareness`, and broadcasts the `awareness` event to all peers. See [Connections](/docs/actors/connections) for per-connection state.
+- `onDisconnect` reads the connection's `clientIds`, calls `removeAwarenessStates` on the server-side `Awareness`, and broadcasts the encoded removal so every remaining client drops the departed user's cursor. See [Lifecycle](/docs/actors/lifecycle) for the hook.
+
+Because the actor tracks which awareness clientIds belong to which connection, presence cleanup is automatic on disconnect with no client cooperation required.
+
+## Persistence And Compaction
+
+The example persists with a full-snapshot overwrite: on every `"sync"` update, the actor re-encodes the entire merged document with `Y.encodeStateAsUpdate` and overwrites the single binary KV key `yjs:doc`. There is no append-only update log and no separate compaction job. Compaction is implicit because `Y.encodeStateAsUpdate` emits one compact merged representation of the document, so Yjs merge semantics keep the stored blob compact on their own.
+
+| Property | Full-Snapshot Overwrite (the example) |
+| --- | --- |
+| Write cost | One full-document KV write per sync update, so every keystroke rewrites the whole blob. |
+| Read cost | One binary KV read in `createVars` rehydrates the document on actor start. |
+| Crash safety | The last completed `applyUpdate` is durable. No log replay needed. |
+| Sweet spot | Small to medium documents where simplicity beats write amplification. |
+
+**Recommended extension (not in the example)**: for large documents or very high edit rates, switch to appending incremental updates to a KV update log and writing a merged snapshot only periodically (for example every N updates). Boot becomes snapshot plus log replay, and the snapshot write becomes the explicit compaction step that truncates the log. Adopt this only when full-snapshot writes become the measured bottleneck or the blob approaches KV value size limits.
+
+## Lifecycle
+
+```mermaid
+sequenceDiagram
+	participant A as Client A
+	participant B as Client B
+	participant DL as documentList
+	participant D as document
+
+	A->>DL: listDocuments()
+	A->>DL: createDocument(title)
+	DL->>D: create([workspaceId, documentId], input)
+	DL-->>A: DocumentSummary
+	A->>D: connect
+	B->>D: connect
+	Note over D: createVars rehydrates Y.Doc from KV "yjs:doc"
+	A->>D: getContent() + getAwareness()
+	D-->>A: encoded doc + awareness state
+	Note over A: local edit with origin "local"
+	A->>D: applyUpdate(update, "sync")
+	Note over D: apply with origin "client", overwrite KV snapshot
+	D-->>B: sync event (incremental update)
+	Note over B: apply with origin "remote", no echo
+	A->>D: applyUpdate(update, "awareness", clientId)
+	D-->>B: awareness event
+	B-->>D: disconnect
+	Note over D: onDisconnect removes B's awareness clientIds
+	D-->>A: awareness event (removal)
+```
+
+## Security Checklist
+
+The example ships with no authentication or authorization. Harden it with this baseline before production. None of these are implemented in the example.
+
+- **Authenticate before connect**: Anyone who knows or guesses a workspace ID can connect, and because `useActor` implicitly getOrCreates, connecting with a nonexistent workspace ID silently creates a blank `documentList` coordinator. Add connection auth so unauthenticated clients never reach an actor. See [Authentication](/docs/actors/authentication).
+- **Per-document access control**: Validate that the authenticated user is allowed to access the specific `[workspaceId, documentId]` key, not just any document.
+- **Cap and rate limit `applyUpdate`**: Update payloads are unvalidated `number[]` arrays with no size limit, and the example client sends one action per keystroke and per cursor move with zero throttling. Enforce payload size caps and per-connection rate limits on the server, and debounce on the client.
+- **Do not trust client-asserted awareness clientIds**: The `clientId` argument to `applyUpdate` is client-supplied and trusted as-is. Derive or verify presence identity from connection-scoped server state instead.
+- **Destroy actors and KV on delete**: `deleteDocument` only filters the entry out of the coordinator's index. The document actor and its KV snapshot are orphaned. On delete, also destroy the document actor and its storage, with a permission check on who may delete.
diff --git a/website/src/content/cookbook/cron-jobs.mdx b/website/src/content/cookbook/cron-jobs.mdx
new file mode 100644
index 0000000000..ba88952fda
--- /dev/null
+++ b/website/src/content/cookbook/cron-jobs.mdx
@@ -0,0 +1,144 @@
+---
+title: "Cron Jobs and Scheduled Tasks"
+description: "Durable cron jobs and scheduled tasks with Rivet Actors. Use c.schedule.after and c.schedule.at for persistent timers that survive restarts, deploys, and crashes, plus recurring jobs that re-arm themselves, idempotent handlers, and singleton job actors."
+templates: ["scheduling"]
+---
+
+Patterns for running durable cron jobs and scheduled tasks on Rivet Actors. Actor schedules are persistent timers owned by the engine, so a job keeps its deadline through actor sleep, restarts, upgrades, deploys, and crashes.
+
+## Starter Code
+
+Start from the working [Scheduling example on GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/scheduling). It implements a reminder service with one-shot timers, a React frontend, and live trigger events.
+
+## The Scheduling API
+
+The full API is documented in [Scheduling](/docs/actors/schedule). There are two methods, both available on the actor context:
+
+| Method | Behavior |
+| --- | --- |
+| `c.schedule.after(duration, actionName, ...args)` | Runs the named action after `duration` milliseconds. |
+| `c.schedule.at(timestamp, actionName, ...args)` | Runs the named action at an exact epoch timestamp in milliseconds. |
+
+Key properties:
+
+- **Durable**: The schedule is persisted by the engine and the timer survives actor sleep, restart, upgrade, and crash. If the actor is asleep at the deadline, the engine wakes it to run the action. See [Lifecycle](/docs/actors/lifecycle).
+- **Plain actions as callbacks**: The scheduled callback is an ordinary [action](/docs/actors/actions) on the same actor, invoked by name. Arguments after the action name are forwarded positionally, for example `c.schedule.after(delayMs, "triggerReminder", reminder.id)`.
+- **No cancellation API**: Rivet does not currently support canceling a scheduled action. The pattern is a tombstone guard: remove the entry from [state](/docs/actors/state) and have the scheduled action no-op when it cannot find its entry. The example's `cancelReminder` and `triggerReminder` actions implement exactly this.
+
+## Recurring Jobs Via Re-Arm
+
+`c.schedule` is one-shot, so recurring jobs are built by having the scheduled action re-arm itself at the end of each run:
+
+```typescript
+import { actor } from "rivetkit";
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+export const dailyReport = actor({
+  state: { lastRunAt: 0 },
+  actions: {
+    runReport: (c) => {
+      // Do the job's work, then record the run.
+      c.state.lastRunAt = Date.now();
+      // Re-arm the next run before returning.
+      c.schedule.after(DAY_MS, "runReport");
+    },
+  },
+});
+```
+
+Arm the first run from `onCreate` or a setup action; after that, the action keeps the chain alive by rescheduling itself.
+
+Re-arming with `after` measures the next run from the end of the current one, so the cadence drifts later by the job's runtime on every cycle. If runs must stay aligned to a fixed cadence, re-arm with `c.schedule.at(c.state.lastRunAt + DAY_MS, "runReport")` instead.
+
+The Scheduling example itself only uses one-shot reminders. A real re-arm implementation lives in the [idle world actor](https://github.com/rivet-dev/rivet/tree/main/examples/multiplayer-game-patterns/src/actors/idle/), where the `collectProduction` action credits production, updates `lastCollectedAt`, and calls a `scheduleCollection` helper that re-arms with `c.schedule.after(delayMs, "collectProduction", { buildingId })`. It also shows catch-up handling: if the action runs late, it computes how many whole intervals elapsed since the last run and credits them in one batch before re-arming.
+
+For multi-step jobs that need retries and progress tracking inside a single run, consider [Workflows](/docs/actors/workflows) instead of chaining schedules.
+
+## Durability Comparison
+
+| Approach | Timer Durability | Horizontal Scaling | Deploys And Restarts |
+| --- | --- | --- | --- |
+| `setTimeout` / `setInterval` | In-process memory only | Every replica arms its own timer, so jobs run once per instance | All pending timers are lost on restart or crash |
+| `node-cron` and similar libraries | In-process memory only | Every instance runs the job unless you add external locking | Schedule resets on deploy; runs missed during downtime are skipped |
+| External cron service | Lives outside your app | Needs a public HTTP endpoint plus its own dedupe and retry state | Survives your deploys but is separate infrastructure to operate |
+| Rivet Actor scheduling | Persisted by the engine as a durable timer | Exactly one actor per key, so the timer is armed once rather than once per replica | Survives actor sleep, restart, upgrade, and crash |
+
+## Idempotency
+
+A scheduled action can fire more than you expect: a crash between doing the work and re-arming can cause the action to run again, and because schedules cannot be cancelled, an action can fire for an entry that was already removed. Design handlers so a duplicate firing is harmless:
+
+- **Store a run marker in state**: Keep a `lastRunAt` timestamp or a sequence number in actor state and update it inside the action. On each firing, compute elapsed time since the marker and skip or batch accordingly. The idle world actor's `collectProduction` does this with `lastCollectedAt` and whole-interval batching.
+- **Tombstone guard for cancelled entries**: The example's `triggerReminder` looks the reminder up in `c.state.reminders` first and returns with a warning if it is gone, so a fire-after-cancel is a safe no-op.
+- **Keep work and marker updates in the same action**: Actor state writes are persisted with the action, so updating the marker in the same handler that does the work keeps the two consistent.
+
+## Topology
+
+| Topology | Use When | Example Key |
+| --- | --- | --- |
+| Singleton job actor | One global job such as a nightly report or cleanup pass | `job["daily-report"]` |
+| Actor per scheduled entity | Per-user or per-resource timers such as reminders, trials, or billing periods | `reminder[userId]` |
+
+The Scheduling example uses a single shared `reminderActor["main"]` key for demo simplicity. For production reminder systems, prefer one actor per user so timers, state, and load are isolated per entity. See [Keys](/docs/actors/keys).
+
+## Reminder Service Example
+
+| Topic | Summary |
+| --- | --- |
+| Scheduling | One-shot timers armed with `c.schedule.after(delayMs, "triggerReminder", reminder.id)` or `c.schedule.at(timestamp, "triggerReminder", reminder.id)`. |
+| State | JSON state holding `reminders` and `completedCount`; the scheduled action mutates state when it fires. |
+| Events | `triggerReminder` broadcasts a `reminderTriggered` event to all connected clients. See [Events](/docs/actors/events). |
+| Cancellation | `cancelReminder` only removes the reminder from state; the scheduled action may still fire and no-ops via a state lookup guard. |
+
+**Actors**
+
+<AccordionGroup>
+<Accordion title='reminderActor["main"]'>
+
+- **Key**: `reminderActor["main"]`
+- **Responsibility**: Stores reminders in persistent state, arms a future self-action per reminder via `c.schedule`, marks reminders completed when the scheduled action fires, and broadcasts `reminderTriggered` to connected clients.
+- **Actions**
+  - `scheduleReminder`
+  - `scheduleReminderAt`
+  - `triggerReminder`
+  - `getReminders`
+  - `cancelReminder`
+  - `getStats`
+- **Queues**
+  - None
+- **State**
+  - JSON
+  - `reminders`
+  - `completedCount`
+
+</Accordion>
+</AccordionGroup>
+
+**Lifecycle**
+
+```mermaid
+sequenceDiagram
+	participant C as Client
+	participant R as reminderActor
+	participant E as Engine
+
+	C->>R: scheduleReminder(message, delayMs)
+	R->>E: schedule.after(delayMs, triggerReminder, id)
+	Note over E: schedule persisted + alarm armed
+	R-->>C: reminder
+	Note over R: actor sleeps
+	E->>R: alarm fires, actor wakes
+	Note over R: triggerReminder(id) runs
+	R-->>C: reminderTriggered event
+	Note over R: recurring jobs re-arm here with schedule.after
+```
+
+## Security Checklist
+
+The example is intentionally open: any client can connect to the shared `["main"]` key and schedule or cancel anything. Treat all of the following as required extensions for production:
+
+- **Validate schedule inputs**: Clamp `delayMs` and `timestamp` from clients. Reject negative delays, timestamps in the past, and absurdly far-future deadlines, and bound message or payload sizes.
+- **Never schedule client-chosen actions**: Expose specific actions like `scheduleReminder` that internally arm a fixed callback. Do not pass a client-supplied action name or unchecked args into `c.schedule`.
+- **Authenticate and scope keys**: Add connection [authentication](/docs/actors/authentication) and use per-user actor keys instead of one global key, so users cannot read or cancel each other's schedules.
+- **Prune completed entries**: The example's `reminders` array grows without bound. Remove or archive completed entries so state stays small.
+- **Use stable IDs**: Generate entry IDs with `crypto.randomUUID()` rather than timestamp-plus-random strings.
diff --git a/website/src/content/cookbook/live-cursors.mdx b/website/src/content/cookbook/live-cursors.mdx
new file mode 100644
index 0000000000..423683eab0
--- /dev/null
+++ b/website/src/content/cookbook/live-cursors.mdx
@@ -0,0 +1,163 @@
+---
+title: "Live Cursors and Presence"
+description: "Patterns for live cursors and multiplayer presence with Rivet Actors: per-connection cursor state, realtime cursor sharing over typed events or raw WebSockets, presence join and leave cleanup, and update throttling guidance."
+templates: ["cursors", "cursors-raw-websocket"]
+---
+
+Patterns for building live cursors, multiplayer presence, and realtime cursor sharing with RivetKit. One room actor fans cursor positions out to every connected client, keyed per room with [actor keys](/docs/actors/keys).
+
+## Starter Code
+
+Start with one of the two working variants on GitHub. Both implement the same collaborative cursor canvas with persistent text labels; they differ only in transport.
+
+| Variant | Starter Code | Transport | Presence Storage |
+| --- | --- | --- | --- |
+| `cursors` | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/cursors) | Typed [actions](/docs/actors/actions) and [events](/docs/actors/events) over the RivetKit connection | `connState` per connection |
+| `cursors-raw-websocket` | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/cursors-raw-websocket) | Raw [`onWebSocket` handler](/docs/actors/websocket-handler) with a custom JSON message protocol | Socket map in `createVars` |
+
+Use `cursors` by default: typed actions, typed events, and automatic connection tracking cover most apps with less code. Use `cursors-raw-websocket` when you need full control of the wire format, for example a custom JSON or binary protocol, or clients that do not use the RivetKit client library.
+
+## Connection State vs Persistent State
+
+Presence is ephemeral by definition. A cursor position is only meaningful while its connection is alive, so it belongs in per-connection storage, not in persistent actor state. Persistent state is reserved for data that must survive disconnects and actor restarts.
+
+| Data | Where It Lives | Why |
+| --- | --- | --- |
+| Cursor position | `connState` (`cursors`) or the `createVars` socket map (`cursors-raw-websocket`) | Scoped to one connection and discarded with it. Stale presence cannot accumulate in storage. |
+| Text labels (`textLabels`) | Persistent actor `state` in both variants | Canvas content must survive disconnects and actor restarts. |
+
+In the `cursors` variant, `updateCursor` writes `c.conn.state.cursor` and `getRoomState` rebuilds the presence snapshot by iterating `c.conns.values()`, so the cursor map is always derived from live connections rather than stored. See [Connections](/docs/actors/connections) for `connState` and [State](/docs/actors/state) for persistence semantics.
+
+## Presence Lifecycle
+
+- **Join**: The `cursors-raw-websocket` variant pushes an `init` message with the current `{ cursors, textLabels }` snapshot as soon as a socket connects. The `cursors` variant has no explicit join broadcast; the client calls the `getRoomState` action once after connecting to seed its local maps, and peers first see a new user on that user's first `cursorMoved` broadcast.
+- **Move**: Every `updateCursor` call writes the connection's presence entry, then broadcasts `cursorMoved` to all connections, including the sender.
+- **Leave**: The `cursors` variant handles leave in `onDisconnect`, broadcasting `cursorRemoved` with the connection's last cursor. The raw variant does the same from the socket `close` listener, then deletes the session from the `vars.websockets` map. Clients delete that user from their local cursor map, so stale cursors disappear the moment a tab closes.
+
+See [Lifecycle](/docs/actors/lifecycle) for `onDisconnect` and `createVars`.
+
+## Update Throttling
+
+Neither example throttles. Both frontends send a cursor update on every raw `mousemove` event with no debounce or interval cap. That is fine for a demo, but a fast mouse on a high-refresh display can emit hundreds of events per second per user. The patterns below are recommended production hardening on top of the starter code, not something the examples implement.
+
+| Layer | Pattern | Guidance |
+| --- | --- | --- |
+| Client (smoothness) | Throttle to 20-30Hz | Sample the latest pointer position every 33-50ms and send only that. Drop intermediate moves, but always flush the final position so cursors settle at the true location. Interpolate between received positions on the rendering side. |
+| Server (enforcement) | Per-connection rate limit | Track the last accepted update timestamp per connection and drop or coalesce updates arriving faster than your cap. Client throttles are cooperative; the actor is the enforcement boundary. |
+
+## Actors
+
+<AccordionGroup>
+<Accordion title="cursorRoom[roomId] (cursors)">
+
+- **Key**: `cursorRoom[roomId]` (the frontend defaults `roomId` to `"general"`)
+- **Responsibility**: Holds per-connection cursor presence in `connState`, persists shared text labels in actor state, and broadcasts cursor and text updates to all connections.
+- **Actions**
+  - `updateCursor`
+  - `updateText`
+  - `removeText`
+  - `getRoomState`
+- **Events**
+  - `cursorMoved`
+  - `cursorRemoved`
+  - `textUpdated`
+  - `textRemoved`
+- **Queues**
+  - None
+- **State**
+  - JSON
+  - `textLabels` (persistent)
+  - `connState.cursor` per connection (ephemeral)
+
+</Accordion>
+<Accordion title="cursorRoom[roomId] (cursors-raw-websocket)">
+
+- **Key**: `cursorRoom[roomId]` (resolved via `client.cursorRoom.getOrCreate(roomId)`)
+- **Responsibility**: Exposes a raw WebSocket endpoint, tracks live sockets and their cursors in a `createVars` map keyed by a `sessionId` query parameter, persists text labels, and manually fans JSON frames out to every socket.
+- **Actions**
+  - `getOrCreate` (stub returning `{ status: "ok" }`, used only so the frontend can resolve the actor ID before dialing the WebSocket)
+  - `getRoomState`
+- **Queues**
+  - None
+- **State**
+  - JSON
+  - `textLabels` (persistent)
+  - `vars.websockets` map of `sessionId` to socket and cursor (in-memory, lost on restart)
+
+</Accordion>
+</AccordionGroup>
+
+The raw variant defines no RivetKit events. Its message names are `type` fields on raw JSON frames:
+
+| Direction | Message `type` | Payload |
+| --- | --- | --- |
+| Client to server | `updateCursor` | `{ userId, x, y }` |
+| Client to server | `updateText` | `{ id, userId, text, x, y }` |
+| Client to server | `removeText` | `{ id }` |
+| Server to client | `init` | `{ cursors, textLabels }` snapshot on connect |
+| Server to client | `cursorMoved`, `textUpdated`, `textRemoved`, `cursorRemoved` | The corresponding cursor, label, or ID payload |
+
+## Lifecycle
+
+<Tabs>
+<Tab title="cursors (Actions + Events)">
+
+```mermaid
+sequenceDiagram
+	participant A as Client A
+	participant R as cursorRoom
+	participant B as Other Clients
+
+	A->>R: connect via useActor (cursorRoom[roomId])
+	A->>R: getRoomState()
+	R-->>A: {cursors, textLabels}
+	loop every mouse move
+		A->>R: updateCursor(userId, x, y)
+		Note over R: write c.conn.state.cursor
+		R-->>B: cursorMoved (broadcast)
+	end
+	A->>R: updateText(id, userId, text, x, y)
+	Note over R: upsert persistent state.textLabels
+	R-->>B: textUpdated (broadcast)
+	Note over A: tab closes
+	Note over R: onDisconnect reads conn.state.cursor
+	R-->>B: cursorRemoved (broadcast)
+```
+
+</Tab>
+<Tab title="cursors-raw-websocket">
+
+```mermaid
+sequenceDiagram
+	participant A as Client A
+	participant R as cursorRoom
+	participant B as Other Clients
+
+	A->>R: getOrCreate(roomId).resolve()
+	R-->>A: actorId
+	A->>R: open WebSocket /gateway/{actorId}/websocket?sessionId=...
+	Note over R: close 1008 if sessionId is missing
+	Note over R: store socket in vars.websockets
+	R-->>A: init {cursors, textLabels}
+	loop every mouse move
+		A->>R: {type: "updateCursor"} frame
+		Note over R: update session cursor in vars
+		R-->>B: cursorMoved frame
+	end
+	Note over A: socket closes
+	R-->>B: cursorRemoved frame
+	Note over R: delete session from vars.websockets
+```
+
+</Tab>
+</Tabs>
+
+## Security Checklist
+
+Both examples ship without authentication so the presence pattern stays readable. Everything below is recommended hardening for production, not behavior the examples implement.
+
+- **Identity**: Bind presence identity to the connection (`c.conn.id` in the actions variant, a server-generated session ID in the raw variant). Never trust a client-supplied `userId`; in the examples it is a random client-generated string, so any client can impersonate or remove any cursor.
+- **Authorization**: Authorize label mutations by owner. In the examples, `updateText` accepts arbitrary `id` and `userId` arguments and `removeText` accepts an arbitrary `id`, so any client can edit or delete any label.
+- **Input validation**: Clamp `x` and `y` to canvas bounds, cap text label length, and cap the total `textLabels` count so persistent state cannot grow unbounded.
+- **Rate limiting**: Enforce a per-connection cap on `updateCursor` (for example 30Hz) and on label writes, as described in [Update Throttling](#update-throttling).
+- **Protocol strictness (raw variant)**: Validate message shape before use and close the socket on malformed JSON instead of logging and continuing. Reject duplicate `sessionId` values rather than silently overwriting another session's socket entry.
diff --git a/website/src/content/cookbook/per-tenant-database.mdx b/website/src/content/cookbook/per-tenant-database.mdx
new file mode 100644
index 0000000000..441893a885
--- /dev/null
+++ b/website/src/content/cookbook/per-tenant-database.mdx
@@ -0,0 +1,122 @@
+---
+title: "Database per Tenant"
+description: "Multi-tenant data isolation with one Rivet Actor per tenant. The actor key is the tenant id, so each tenant gets its own actor and its own isolated dataset with no shared tables. Covers JSON state vs SQLite vs Drizzle, migrations, and deriving the tenant id from auth."
+templates: ["per-tenant-database"]
+---
+
+Patterns for database-per-tenant architectures with RivetKit. Instead of one shared database with a `tenant_id` column on every table, each tenant gets its own Rivet Actor, and that actor owns the tenant's entire dataset.
+
+## Starter Code
+
+Start with the working example on [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/per-tenant-database) and adapt it. The example stores each tenant's dataset in JSON actor state and serves a React dashboard with live event updates.
+
+| Topic | Summary |
+| --- | --- |
+| Isolation | One `companyDatabase` actor per tenant, keyed by company name. Switching tenants swaps the entire dataset. |
+| State | JSON actor state holding `employees` and `projects` arrays plus timestamps. No SQLite, no queues, no scheduling. |
+| Realtime | Every write action mutates state, then broadcasts a typed event (`employeeAdded`, `projectAdded`) to all connected clients of that tenant. |
+| Auth | None. The sign-in screen is cosmetic. Production guidance is in the [security checklist](#security-checklist). |
+
+## The Isolation Model
+
+The actor key is the tenant id. The client connects with `useActor({ name: "companyDatabase", key: [companyName] })` and the actor reads `c.key[0]` in `createState` to seed that tenant's dataset. This gives you:
+
+- **One actor per tenant**: `companyDatabase[tenantId]` addresses exactly one actor instance. Two tenants can never share an actor.
+- **One dataset per tenant**: All reads and writes go through that actor's [state](/docs/actors/state), so there is no shared table with a `tenant_id` column to filter incorrectly. Cross-tenant leaks require constructing the wrong key, not forgetting a `WHERE` clause.
+- **No key injection**: Keys are arrays, not interpolated strings. `key: [tenantId]` cannot be escaped the way `"tenant:" + tenantId` string concatenation can. See [Keys](/docs/actors/keys).
+
+The example's test ([tests/per-tenant-database.test.ts](https://github.com/rivet-dev/rivet/tree/main/examples/per-tenant-database/tests/per-tenant-database.test.ts)) proves the isolation: data written to `companyDatabase["Alpha Co"]` never appears in `companyDatabase["Beta Co"]`.
+
+## Choosing a State Backend
+
+The example uses plain JSON actor state. The same key-equals-tenant model works with any actor state backend.
+
+| Backend | Use When | Docs | Working Code |
+| --- | --- | --- | --- |
+| JSON actor state | Small datasets, simple reads, whole dataset fits comfortably in memory. What the example uses. | [State](/docs/actors/state) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/per-tenant-database) |
+| Actor SQLite (`rivetkit/db`) | Tables, indexes, SQL queries, larger-than-memory data, per-tenant relational schema. | [SQLite](/docs/actors/sqlite) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/kitchen-sink/src/actors/state/sqlite-raw.ts) |
+| SQLite + Drizzle | Typed schema, query builder, and generated migration files on top of actor SQLite. | [SQLite + Drizzle](/docs/actors/sqlite-drizzle) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/kitchen-sink/src/actors/state/sqlite-drizzle/) |
+
+With either SQLite option, every tenant gets its own embedded SQLite database, since the database is scoped to the actor and the actor is scoped to the tenant.
+
+## Migrations
+
+The per-tenant example has no migrations because JSON state has no schema. When you adopt SQLite, migrations run per tenant database:
+
+- **Raw SQL**: `db({ onMigrate })` runs your migration SQL inside a SQLite savepoint before the actor serves traffic. If `onMigrate` throws, all migration SQL rolls back atomically and the actor does not start. See [SQLite](/docs/actors/sqlite).
+- **Drizzle**: `drizzle-kit` generates migration files from your typed schema, and `db({ schema, migrations })` applies them when the actor wakes. See [SQLite + Drizzle](/docs/actors/sqlite-drizzle).
+
+Because each tenant has its own database, migrations roll out per actor as each tenant's actor wakes, rather than as one large migration against a shared database.
+
+## Tenant Id Must Come From Auth
+
+The example's sign-in is cosmetic: the client picks any company string and that string becomes the actor key, so any visitor can read and write any tenant's data. Do not ship this. As a required production extension (not implemented by the example):
+
+- Derive the tenant id from a verified credential, such as a JWT claim, never from user input.
+- Validate the credential against `c.key` in `onBeforeConnect` (pass/fail) or `createConnState` (store the verified user on connection state). See [Authentication](/docs/actors/authentication) and [Connections](/docs/actors/connections).
+- Add per-action permission checks on top of connection-level auth. See [Access Control](/docs/actors/access-control).
+
+## Actors
+
+<AccordionGroup>
+<Accordion title="companyDatabase[companyName]">
+
+- **Key**: `companyDatabase[companyName]` (single-element array key; `c.key[0]` is the company name)
+- **Responsibility**: One actor per tenant. Holds that company's employees and projects in persistent state, serves reads and writes via actions, and broadcasts mutations to connected clients.
+- **Actions**
+  - `addEmployee`
+  - `listEmployees`
+  - `addProject`
+  - `listProjects`
+  - `getStats`
+- **Queues**
+  - None
+- **Events**
+  - `employeeAdded`
+  - `projectAdded`
+- **State**
+  - JSON
+  - `company_name`
+  - `employees`
+  - `projects`
+  - `created_at`
+  - `updated_at`
+
+</Accordion>
+</AccordionGroup>
+
+Every write action follows the same mutate-then-broadcast shape: push the record into `c.state`, bump `updated_at`, broadcast the typed event, return the record. See [Actions](/docs/actors/actions) and [Events](/docs/actors/events).
+
+## Lifecycle
+
+```mermaid
+sequenceDiagram
+	participant A as Tenant A client
+	participant DA as companyDatabase A
+	participant B as Tenant B client
+	participant DB as companyDatabase B
+
+	Note over A: authenticate and derive tenant id
+	A->>DA: connect with key [tenantA]
+	Note over DA: createState seeds company_name, employees, projects
+	A->>DA: listEmployees() + listProjects() + getStats()
+	A->>DA: addEmployee(name, role)
+	DA-->>A: employeeAdded event
+	B->>DB: connect with key [tenantB]
+	Note over DB: separate actor, separate dataset
+	B->>DB: listEmployees()
+	DB-->>B: tenant B data only
+```
+
+In the example, the "authenticate" step is a free-text company picker. The rest of the flow matches the diagram: `createState` seeds the dataset on first creation, the dashboard loads with `listEmployees`, `listProjects`, and `getStats`, and every connected client of the same tenant receives `employeeAdded` and `projectAdded` events.
+
+## Security Checklist
+
+The example ships with none of these. Apply all of them before production.
+
+- **Tenant identity**: Derive the tenant id from a verified JWT claim, never from a client-supplied string.
+- **Connection validation**: In `onBeforeConnect` or `createConnState`, verify the credential's tenant claim matches `c.key` and reject mismatches.
+- **Per-action authorization**: Check the caller's role before mutating actions (`addEmployee`, `addProject`), not just at connect time. See [Access Control](/docs/actors/access-control).
+- **Input validation**: Clamp name and role lengths and validate enums. The example only trims input and substitutes fallback defaults.
+- **Key construction**: Always pass the tenant id as an array element (`key: [tenantId]`). Never interpolate tenant ids into key strings, and never build keys from one tenant's input to address another tenant's actor.
+- **Growth limits**: As a recommended extension, cap or paginate the `employees` and `projects` arrays. The example lets them grow unboundedly in JSON state; move to [SQLite](/docs/actors/sqlite) when the dataset outgrows memory.
diff --git a/website/src/content/docs/actors/connections.mdx b/website/src/content/docs/actors/connections.mdx
index 40149acce6..5aff25a2e7 100644
--- a/website/src/content/docs/actors/connections.mdx
+++ b/website/src/content/docs/actors/connections.mdx
@@ -4,7 +4,7 @@ description: "Connections represent client connections to your actor. They provi
 skill: true
 ---
 
-For documentation on connecting to actors from clients, see the [Clients documentation](/docs/clients).
+For documentation on connecting to actors from clients, see the [Clients documentation](/docs/clients). For worked presence and chat patterns, see the cookbook: [Live Cursors and Presence](/cookbook/live-cursors/) and [Chat Room](/cookbook/chat-room/).
 
 ## Parameters
 
diff --git a/website/src/content/docs/actors/events.mdx b/website/src/content/docs/actors/events.mdx
index 698ea63f72..9e83ae8cfe 100644
--- a/website/src/content/docs/actors/events.mdx
+++ b/website/src/content/docs/actors/events.mdx
@@ -6,6 +6,8 @@ skill: true
 
 Events can be sent to clients connected using `.connect()`. They have no effect on [low-level WebSocket connections](/docs/actors/websocket-handler).
 
+For worked realtime patterns, see the cookbook: [Live Cursors and Presence](/cookbook/live-cursors/) and [Chat Room](/cookbook/chat-room/).
+
 ## Publishing Events from Actors
 
 ### Broadcasting to All Clients
diff --git a/website/src/content/docs/actors/queues.mdx b/website/src/content/docs/actors/queues.mdx
index 8155449ee9..d57437992c 100644
--- a/website/src/content/docs/actors/queues.mdx
+++ b/website/src/content/docs/actors/queues.mdx
@@ -14,6 +14,8 @@ skill: true
 
 Queues are commonly referred to as "mailboxes" in other actor frameworks.
 
+For a worked queue-driven pattern, see the cookbook: [AI Agent](/cookbook/ai-agent/).
+
 ## What are queues good for?
 
 - Great for any task that changes actor state.
diff --git a/website/src/content/docs/actors/schedule.mdx b/website/src/content/docs/actors/schedule.mdx
index 6ed141c9a6..b96fd17989 100644
--- a/website/src/content/docs/actors/schedule.mdx
+++ b/website/src/content/docs/actors/schedule.mdx
@@ -6,6 +6,8 @@ skill: true
 
 Scheduling is used to trigger events in the future. The actor scheduler is like `setTimeout`, except the timeout will persist even if the actor restarts, upgrades, or crashes.
 
+For a pattern guide to durable recurring jobs, see the cookbook: [Cron Jobs and Scheduled Tasks](/cookbook/cron-jobs/).
+
 ## Use Cases
 
 Scheduling is helpful for long-running timeouts like month-long billing periods or account trials.
diff --git a/website/src/content/docs/actors/sqlite-drizzle.mdx b/website/src/content/docs/actors/sqlite-drizzle.mdx
index a594101a03..199150a28b 100644
--- a/website/src/content/docs/actors/sqlite-drizzle.mdx
+++ b/website/src/content/docs/actors/sqlite-drizzle.mdx
@@ -6,7 +6,7 @@ skill: true
 
 Use Drizzle when you want typed schema, typed queries, and generated migrations on top of actor-local SQLite.
 
-For a high-level overview of where to store actor data, see [State & Storage](/docs/actors/state).
+For a high-level overview of where to store actor data, see [State & Storage](/docs/actors/state). For a worked multi-tenant pattern, see the cookbook: [Database per Tenant](/cookbook/per-tenant-database/).
 
 ## What is Drizzle good for?
 
diff --git a/website/src/content/docs/actors/sqlite.mdx b/website/src/content/docs/actors/sqlite.mdx
index 673075148b..bb10c65623 100644
--- a/website/src/content/docs/actors/sqlite.mdx
+++ b/website/src/content/docs/actors/sqlite.mdx
@@ -4,7 +4,7 @@ description: "Use embedded SQLite in Rivet Actors with raw SQL queries."
 skill: true
 ---
 
-For a high-level overview of where to store actor data, including when to use `c.state` versus SQLite, see [State & Storage](/docs/actors/state).
+For a high-level overview of where to store actor data, including when to use `c.state` versus SQLite, see [State & Storage](/docs/actors/state). For a worked multi-tenant pattern, see the cookbook: [Database per Tenant](/cookbook/per-tenant-database/).
 
 ## What is SQLite?
 

From 3aeb128be9c04fd07d645292a8183b691038aca4 Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 10:18:47 -0700
Subject: [PATCH 06/13] [SLOP(claude-fable-5)] fix(website): correct competitor
 facts on compare pages

---
 .../compare/cloudflare-durable-objects.tsx    | 26 +++++++++----------
 website/src/data/compare/temporal.tsx         | 10 +++----
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/website/src/data/compare/cloudflare-durable-objects.tsx b/website/src/data/compare/cloudflare-durable-objects.tsx
index ac1dd29fa0..c4c3ddd3c7 100644
--- a/website/src/data/compare/cloudflare-durable-objects.tsx
+++ b/website/src/data/compare/cloudflare-durable-objects.tsx
@@ -14,7 +14,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 	rivetSummary:
 		'Rivet Actors bring the actor model to your existing infrastructure as an open-source library. Build stateful, distributed applications with your preferred technology stack, deployed on your own infrastructure.',
 	competitorSummary:
-		"Cloudflare Durable Objects provide stateful serverless computing that runs on Cloudflare's global edge network. Built on Cloudflare's proprietary platform, Durable Objects offer strong consistency and state persistence for JavaScript/TypeScript applications.",
+		"Cloudflare Durable Objects provide stateful serverless computing that runs on Cloudflare's global edge network. Built on Cloudflare's platform, Durable Objects offer strong consistency and state persistence for applications built on the Workers runtime.",
 	whenToChooseRivet: [
 		{
 			title: 'Developer-friendly experience',
@@ -49,9 +49,9 @@ export const cloudflareDurableObjects: CompareEntry = {
 				"When you're already committed to Cloudflare Workers and want stateful capabilities",
 		},
 		{
-			title: 'JavaScript/TypeScript only',
+			title: 'Building on the Workers runtime',
 			description:
-				"When your team exclusively works with Cloudflare's limited JavaScript/TypeScript runtime and doesn't need access to the broader npm ecosystem",
+				'When your team is comfortable working within the Workers runtime, with JavaScript/TypeScript, Python in beta, or Rust via workers-rs, and nodejs_compat covers the npm packages you need',
 		},
 		{
 			title: "Don't mind platform constraints",
@@ -80,8 +80,8 @@ export const cloudflareDurableObjects: CompareEntry = {
 						),
 					},
 					competitor: {
-						status: 'no',
-						text: 'No, Cloudflare is a closed-source, proprietary platform',
+						status: 'partial',
+						text: 'The workerd runtime is open source under Apache 2.0, but the Durable Objects platform (control plane, storage, distribution) is proprietary',
 					},
 					importance:
 						'Building your core technology on open-source software is vital to ensure portability and flexibility as your needs change',
@@ -138,7 +138,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 					},
 					competitor: {
 						status: 'partial',
-						text: "Limited to Cloudflare's limited JavaScript/TypeScript runtime, not compatible with many npm packages",
+						text: 'Limited to Workers runtime languages (JavaScript/TypeScript, Python in beta, Rust); nodejs_compat covers many npm packages but not native dependencies',
 					},
 					importance:
 						'Technology flexibility lets you use your existing skills and codebase',
@@ -239,7 +239,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 					},
 					competitor: {
 						status: 'partial',
-						text: 'Requires complex setup or third-party solutions like PartyKit',
+						text: 'Requires hand-rolling fanout over the WebSocket API or adopting a framework like PartyServer',
 					},
 					importance:
 						'Native event system enables real-time features with minimal setup',
@@ -329,8 +329,8 @@ export const cloudflareDurableObjects: CompareEntry = {
 						text: 'Built-in monitoring for development and production',
 					},
 					competitor: {
-						status: 'no',
-						text: 'Custom monitoring required',
+						status: 'partial',
+						text: 'Per-namespace Durable Objects metrics and GraphQL analytics in the Cloudflare dashboard',
 					},
 					importance:
 						'Integrated monitoring simplifies operations and debugging',
@@ -342,8 +342,8 @@ export const cloudflareDurableObjects: CompareEntry = {
 						text: 'Supports your existing logging infrastructure',
 					},
 					competitor: {
-						status: 'no',
-						text: 'Provides no logging for Durable Objects',
+						status: 'yes',
+						text: 'Durable Object logs are available through Workers Logs, wrangler tail, and Logpush',
 					},
 					importance:
 						'Built-in logging reduces setup time and operational complexity',
@@ -373,8 +373,8 @@ export const cloudflareDurableObjects: CompareEntry = {
 						text: 'Built-in tools to inspect and modify actor state',
 					},
 					competitor: {
-						status: 'no',
-						text: 'No built-in state inspection tools',
+						status: 'partial',
+						text: 'Data Studio can view and edit SQLite-backed Durable Object storage from the dashboard; in-memory state is not inspectable',
 					},
 					importance:
 						'Ability to view & edit actor state in real time simplifies debugging and management',
diff --git a/website/src/data/compare/temporal.tsx b/website/src/data/compare/temporal.tsx
index 52b8b7d651..f8e1b643e2 100644
--- a/website/src/data/compare/temporal.tsx
+++ b/website/src/data/compare/temporal.tsx
@@ -3,7 +3,7 @@ import type { CompareEntry } from './types';
 // Facts about Temporal verified against temporal.io and docs.temporal.io in
 // June 2026: pricing plans and per-action billing, the documented ~100ms
 // minimum end-to-end Cloud latency, worker poll architecture with no ingress,
-// eight first-party SDKs, MIT server license, and self-hosting requirements.
+// seven GA SDKs plus a preview Rust SDK, MIT server license, and self-hosting requirements.
 // Re-verify pricing before major updates since pricing pages churn.
 export const temporal: CompareEntry = {
 	slug: 'rivet-vs-temporal',
@@ -27,7 +27,7 @@ export const temporal: CompareEntry = {
 		{
 			title: 'Low-latency interactive workloads',
 			description:
-				'When user-facing requests need to hit stateful code directly instead of round-tripping through a task queue; Temporal documents a minimum end-to-end latency of around 100ms on Temporal Cloud',
+				"When user-facing requests need to hit stateful code directly instead of round-tripping through a task queue; Temporal's own engineering blog puts minimum end-to-end workflow latency on Temporal Cloud at around 100ms",
 		},
 		{
 			title: 'Long-lived stateful entities',
@@ -159,7 +159,7 @@ export const temporal: CompareEntry = {
 					},
 					competitor: {
 						status: 'partial',
-						text: 'Temporal documents a minimum end-to-end latency of around 100ms on Temporal Cloud and recommends keeping it out of the hot path for interactive transactions',
+						text: "Temporal's own engineering blog puts minimum end-to-end workflow latency at around 100ms on Temporal Cloud and describes tuning techniques to reduce it",
 					},
 					importance:
 						'Latency floors compound across every user interaction in interactive products',
@@ -257,7 +257,7 @@ export const temporal: CompareEntry = {
 					},
 					competitor: {
 						status: 'yes',
-						text: 'Eight first-party SDKs: Go, Java, TypeScript, Python, .NET, PHP, and Ruby, with Rust in preview',
+						text: 'Seven GA SDKs: Go, Java, TypeScript, Python, .NET, PHP, and Ruby, plus Rust in preview',
 					},
 					importance:
 						'SDK breadth matters when teams orchestrate work across several languages',
@@ -354,7 +354,7 @@ export const temporal: CompareEntry = {
 		{
 			question: 'Which languages do Rivet and Temporal support?',
 			answerHtml:
-				'Temporal has eight first-party SDKs, including Go, Java, TypeScript, Python, .NET, PHP, and Ruby, with Rust in preview. Rivet is TypeScript-first with a Rust SDK in preview. If your team orchestrates workflows across many languages today, Temporal has the broader SDK surface.',
+				'Temporal has seven GA SDKs (Go, Java, TypeScript, Python, .NET, PHP, and Ruby), with Rust available in preview. Rivet is TypeScript-first with a Rust SDK in preview. If your team orchestrates workflows across many languages today, Temporal has the broader SDK surface.',
 		},
 	],
 	lastUpdated: '2026-06-11',

From 29276b5a0a27bad3afd9a7672b31a7d8652b3ffd Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 10:35:10 -0700
Subject: [PATCH 07/13] [SLOP(claude-fable-5)] docs(website): add AI Agent
 Workspaces cookbook entry for agentOS

---
 .../content/cookbook/ai-agent-workspace.mdx   | 184 ++++++++++++++++++
 website/src/content/cookbook/ai-agent.mdx     |   1 +
 website/src/content/docs/agent-os/index.mdx   |   2 +
 website/src/data/templates/shared.ts          |  10 +
 4 files changed, 197 insertions(+)
 create mode 100644 website/src/content/cookbook/ai-agent-workspace.mdx

diff --git a/website/src/content/cookbook/ai-agent-workspace.mdx b/website/src/content/cookbook/ai-agent-workspace.mdx
new file mode 100644
index 0000000000..f6e60d8768
--- /dev/null
+++ b/website/src/content/cookbook/ai-agent-workspace.mdx
@@ -0,0 +1,184 @@
+---
+title: "AI Agent Workspaces"
+description: "Give every AI agent its own computer: a persistent agent workspace with a filesystem, processes, shells, networking, and coding agent sessions on a lightweight in-process VM. Run AI generated code, persist session transcripts across restarts, and mount a full sandbox when agents need native binaries."
+templates: ["agent-os"]
+---
+
+Patterns for giving every AI agent its own computer with [agentOS](/docs/agent-os): one Rivet Actor per agent that owns a portable, lightweight in-process OS running on Wasm and V8. Use it for code interpreters that keep state between runs, agents that ship artifacts behind shareable preview URLs, per-user dev environments, and scheduled maintenance agents. agentOS is in preview and the API is subject to change.
+
+This entry is about giving an agent a workspace. For conversation memory, message queues, and streaming chat patterns, see [AI Agent](/cookbook/ai-agent/).
+
+## Starter Code
+
+The [agent-os](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os) collection is reference code, one sub-example per capability; treat it as patterns to copy into your project rather than a turnkey app. The [agent-os-e2e](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os-e2e) example is the complete end-to-end walkthrough.
+
+| Example | Starter Code | Use When |
+| --- | --- | --- |
+| Hello World | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/hello-world) | You want the minimal loop: boot a VM lazily on the first action, write a file, read it back. |
+| Filesystem | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/filesystem) | The agent needs the full file surface: recursive listing, stat, move, delete, and custom mounts. |
+| Git | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/git) | The agent works with real git repos inside the workspace: init, commit, branch, and clone via `exec`. |
+| Processes | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/processes) | The agent runs shell commands with pipes and long-lived spawned programs. |
+| Network | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/network) | The agent serves HTTP inside the VM and you need `vmFetch` or signed preview URLs. |
+| Cron | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/cron) | The workspace runs scheduled commands or recurring agent work. |
+| Tools | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/tools) | You want your backend functions exposed as CLI commands inside the workspace. |
+| Agent Session | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/agent-session) | You drive a Pi coding agent session inside the workspace. Requires `ANTHROPIC_API_KEY`. |
+| Sandbox Mounting | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/sandbox) | The agent needs native binaries or a real OS, mounted into the VM from a Docker-backed sandbox. Requires Docker. |
+| End-to-End Walkthrough | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os-e2e) | You want one runnable script covering files, processes, preview URLs, and a streaming Pi agent session. |
+
+## Setup
+
+The whole backend is one registry with one `agentOs()` actor:
+
+```typescript
+import { agentOs } from "rivetkit/agent-os";
+import { setup } from "rivetkit";
+import common from "@rivet-dev/agent-os-common";
+import pi from "@rivet-dev/agent-os-pi";
+
+const vm = agentOs({
+  options: { software: [common, pi] },
+});
+
+export const registry = setup({ use: { vm } });
+registry.start();
+```
+
+See the [Quickstart](/docs/agent-os/quickstart) for the client side and project layout.
+
+## Workspace Model
+
+- **One actor per workspace, key as identity.** `client.vm.getOrCreate(["my-agent"])` gives each agent its own workspace; key by user id for per-user dev environments. Each workspace has its own filesystem, processes, and networking with no shared state and no cross-contamination (see the [overview](/docs/agent-os)).
+- **Software packages choose what is installed.** agentOS starts with no commands installed. The `software` option installs packages such as `@rivet-dev/agent-os-common` (a meta-package of Wasm command-line tools: coreutils, sed, grep, gawk, findutils, diffutils, tar, and gzip), `@rivet-dev/agent-os-git` (git), and `@rivet-dev/agent-os-pi` (the Pi coding agent). See [Software](/docs/agent-os/software).
+- **The VM boots lazily and sleeps when idle.** The first action boots the VM (clients see a `vmBooted` event); when nothing is active, the actor sleeps and broadcasts `vmShutdown`, then wakes on the next action.
+
+What survives a sleep/wake cycle (see [Persistence](/docs/agent-os/persistence)):
+
+| Data | Across sleep/wake |
+| --- | --- |
+| Session transcripts and event history | Persist in actor SQLite as events stream. `listPersistedSessions` and `getSessionEvents` read them back without booting the VM, and `resumeSession` picks a session back up in a rebooted VM. |
+| Signed preview URL tokens | Persist in actor SQLite. Requests are validated against the stored token and the VM reboots lazily to serve them, so preview URLs keep working after sleep. |
+| Files | Persist when the mount is backed by a persistent driver (database-backed, S3, or a sandbox mount). In-memory mounts come back empty on wake. |
+| Processes, shells, and cron jobs | Do not persist. Restart long-running processes and reschedule cron jobs on wake (recommended extension). |
+
+The actor holds itself awake while sessions, processes, shells, or hooks are active, then sleeps after a grace period.
+
+## Capability Tour
+
+| Area | Use It For | Key Actions | Docs | Example |
+| --- | --- | --- | --- | --- |
+| Filesystem | Give the agent a file tree to read and write | `readFile`, `writeFile`, `mkdir`, `readdir`, `move` | [Filesystem](/docs/agent-os/filesystem) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/filesystem) |
+| Processes | Run commands and long-lived programs | `exec`, `spawn`, `waitProcess`, `killProcess` | [Processes](/docs/agent-os/processes) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/processes) |
+| Shells | Interactive terminals with streamed output | `openShell`, `writeShell`, `resizeShell`, `closeShell` | [Processes](/docs/agent-os/processes) | No standalone example |
+| Networking and preview URLs | Reach services inside the VM and share them externally | `vmFetch`, `createSignedPreviewUrl`, `expireSignedPreviewUrl` | [Networking](/docs/agent-os/networking) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/network) |
+| Cron | Scheduled commands and recurring agent sessions | `scheduleCron`, `listCronJobs`, `cancelCronJob` | [Cron](/docs/agent-os/cron) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/cron) |
+| Agent sessions | Drive a coding agent inside the workspace | `createSession`, `sendPrompt`, `resumeSession`, `closeSession` | [Sessions](/docs/agent-os/sessions) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/agent-session) |
+
+Two details worth knowing up front:
+
+- `createSignedPreviewUrl` returns a relative path plus the token and expiry. Build the full URL with the client handle's `getGatewayUrl()` method; it is a client method, not an actor action.
+- Schedule cron jobs through the actor with the `exec` and `session` action types only. Callback cron actions are defined in server code and do not serialize through `listCronJobs`.
+
+## Driving a Coding Agent Session
+
+Only the Pi agent (`@rivet-dev/agent-os-pi`) is currently supported as a session agent; Amp, Claude Code, Codex, and OpenCode are coming soon. See [Sessions](/docs/agent-os/sessions).
+
+1. `createSession("pi", { env: { ANTHROPIC_API_KEY } })` returns a `sessionId`. The VM does not inherit the host `process.env`, so API keys are passed explicitly per session or kept server-side through the [LLM gateway](/docs/agent-os/llm-gateway).
+2. Open a realtime connection and subscribe to `sessionEvent` to stream the agent's output, such as message chunks, as it works.
+3. `sendPrompt(sessionId, ...)` starts a turn; `cancelPrompt` stops one in flight.
+4. When the agent asks to use a tool, clients receive a `permissionRequest` event and answer with `respondPermission`, or the server auto-approves with the `onPermissionRequest` config hook (see [Permissions](/docs/agent-os/permissions)).
+5. Transcripts are persisted automatically in the universal transcript format (Agent Communication Protocol, ACP). After sleep, `resumeSession` continues a session in the rebooted VM, and `listPersistedSessions` plus `getSessionEvents` read history without booting the VM at all.
+
+## Host Tools
+
+Expose your backend functions to the agent as CLI commands inside the workspace. Define a toolkit with `toolKit()` and `hostTool()` (Zod-schema'd JavaScript functions on the host), pass it via `agentOs({ options: { toolKits: [...] } })`, and it is installed as a command such as `agentos-weather forecast --city Paris --days 3` and injected into the agent's system prompt. The agent calls your backend with no HTTP endpoints or MCP servers to stand up, and CLI-shaped tools are code mode compatible for large token savings. See [Tools](/docs/agent-os/tools) and the [tools example](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os/src/tools).
+
+## When to Mount a Full Sandbox
+
+agentOS is not a replacement for sandboxes; it is designed to work alongside them. When a workspace needs native binaries, browsers, compilation, or desktop automation, use sandbox mounting: start a Docker-backed sandbox with `SandboxAgent.start({ sandbox: docker() })`, project its filesystem into the VM as a native directory (for example `/sandbox`) with `createSandboxFs`, and expose sandbox process control as host tools with `createSandboxToolkit`. Filesystem actions like `writeFile` and `readFile` project transparently through the mount while heavy workloads run in the container.
+
+See [Sandbox Mounting](/docs/agent-os/sandbox) for the hybrid model and [agentOS vs Sandboxes](/docs/agent-os/versus-sandbox) for when each side wins: the lightweight VM has a near-zero cold start (~6 ms) and installs with `npm install`, while sandboxes are full Linux environments billed per second of uptime.
+
+## Architecture
+
+| Topic | Summary |
+| --- | --- |
+| Topology | One `vm[workspaceId]` actor per agent or per user; the actor key is the workspace identity. |
+| Ingress | Actor actions for files, processes, networking, cron, and sessions; a realtime connection for streamed events. |
+| Streaming | `sessionEvent` per agent event, `processOutput` and `processExit` for spawned processes, `shellData` for interactive shells. |
+| Persistence | Session transcripts, event history, and preview tokens in actor SQLite; files persist through persistent mounts. |
+
+**Actors**
+
+<AccordionGroup>
+<Accordion title='vm[workspaceId]'>
+
+- **Key**: `vm[workspaceId]`, for example `client.vm.getOrCreate(["my-agent"])`
+- **Responsibility**: Owns one workspace. Boots the VM lazily on the first action, serves all capability actions, proxies signed preview URL requests into the VM's virtual network, and persists sessions and tokens to actor SQLite.
+- **Actions** (grouped; the most load-bearing of each area)
+  - Filesystem: `readFile`, `writeFile`, `mkdir`, `readdir`, `readdirRecursive`, `stat`, `exists`, `move`, `deleteFile`
+  - Processes: `exec`, `spawn`, `writeProcessStdin`, `waitProcess`, `listProcesses`, `killProcess`
+  - Shells: `openShell`, `writeShell`, `resizeShell`, `closeShell`
+  - Network: `vmFetch`, `createSignedPreviewUrl`, `expireSignedPreviewUrl`
+  - Cron: `scheduleCron`, `listCronJobs`, `cancelCronJob`
+  - Sessions: `createSession`, `sendPrompt`, `cancelPrompt`, `respondPermission`, `resumeSession`, `closeSession`, `destroySession`, `listPersistedSessions`, `getSessionEvents`
+- **Queues**
+  - None
+- **Events**
+  - `vmBooted`
+  - `vmShutdown`
+  - `sessionEvent`
+  - `permissionRequest`
+  - `processOutput`
+  - `processExit`
+  - `shellData`
+  - `cronEvent`
+- **State**
+  - SQLite
+  - `agent_os_sessions` and `agent_os_session_events` (session metadata plus seq-ordered transcript events)
+  - `agent_os_preview_tokens` (signed preview URL tokens with expiry)
+  - `agent_os_fs_entries` (file content for database-backed mounts)
+
+</Accordion>
+</AccordionGroup>
+
+**Lifecycle**
+
+```mermaid
+sequenceDiagram
+	participant C as Client
+	participant A as vm actor
+	participant V as agentOS VM
+	participant P as Pi session
+
+	C->>A: getOrCreate(["my-agent"])
+	C->>A: writeFile("/tmp/hello.txt", ...)
+	Note over A,V: first action boots the VM
+	A-->>C: vmBooted
+	C->>A: exec("echo hello | tr a-z A-Z")
+	A->>V: run command
+	V-->>A: {exitCode: 0, stdout}
+	C->>A: spawn("node", ["/tmp/server.mjs"])
+	C->>A: createSignedPreviewUrl(8080, 60)
+	A-->>C: {path, token, expiresAt}
+	C->>A: fetch(gatewayUrl + path)
+	Note over A: token checked in SQLite, request proxied into the VM network
+	C->>A: createSession("pi", {env})
+	A->>P: start session
+	C->>A: sendPrompt(sessionId, ...)
+	loop streamed agent output
+		P-->>A: agent event
+		A-->>C: sessionEvent
+	end
+	Note over A: idle, sleeps after grace period (vmShutdown)
+	C->>A: resumeSession(sessionId)
+	Note over A,V: wake reboots the VM, restoring transcripts, preview tokens, and persistent mounts
+```
+
+## Security Checklist
+
+- **Authenticate connections**: Add the `onBeforeConnect` hook in the `agentOs()` config so only authorized callers reach a workspace. Signed preview URL requests deliberately skip it because the token is the credential; browsers navigating a preview URL cannot supply actor connection params.
+- **Gate agent tool use with permissions**: Session permission requests broadcast as `permissionRequest` events for human-in-the-loop approval via `respondPermission`, or run a server-side `onPermissionRequest` policy for automated pipelines. See [Permissions](/docs/agent-os/permissions).
+- **Treat preview URLs as bearer credentials**: Tokens are randomly generated 32-character values with a default expiry of 1 hour and a maximum of 24; revoke early with `expireSignedPreviewUrl`. Preview responses carry permissive CORS headers, so do not serve private data on a preview port without app-level auth.
+- **Keep LLM credentials off the browser**: Create sessions from trusted server code with the key in `createSession` env, or keep keys entirely server-side with the [LLM gateway](/docs/agent-os/llm-gateway). Session keys are injected into the session environment inside the VM and are never stored in actor config or SQLite.
+- **Treat mounted sandboxes as their own trust boundary**: A mounted sandbox is a full Linux environment outside the workspace's Wasm and V8 isolate. Scope what its network and filesystem can reach before projecting it into an agent's VM.
+- **Set resource and cost limits**: Cap per-workspace memory and CPU (`maxMemoryMb`, `maxCpuPercent`, see [Security](/docs/agent-os/security)). Active sessions, processes, and shells hold the actor awake, so add per-workspace session caps and token budgets as a recommended extension.
diff --git a/website/src/content/cookbook/ai-agent.mdx b/website/src/content/cookbook/ai-agent.mdx
index 2b39c4af78..006c95f8ed 100644
--- a/website/src/content/cookbook/ai-agent.mdx
+++ b/website/src/content/cookbook/ai-agent.mdx
@@ -15,6 +15,7 @@ Start with one of the working examples on [GitHub](https://github.com/rivet-dev/
 | Queue-driven AI SDK agent | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent) | You want a streaming chat agent where each conversation keeps its own persistent memory and processes one message at a time. |
 | Sandbox coding agent | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox-coding-agent) | The agent should run a coding agent (Codex by default) inside an isolated [sandbox](/docs/actors/sandbox) via Docker, Daytona, or E2B. |
 | Durable streams agent (experimental) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/experimental-durable-streams-ai-agent) | You want replayable, restart-safe prompt and response delivery through durable streams instead of actor state and events. |
+| Agent with a workspace (agentOS) | [GitHub](https://github.com/rivet-dev/rivet/tree/main/examples/agent-os) | The agent needs its own persistent computer: a filesystem, processes, shells, and preview URLs. See the cookbook: [AI Agent Workspaces](/cookbook/ai-agent-workspace/). |
 
 ## Conversation Memory
 
diff --git a/website/src/content/docs/agent-os/index.mdx b/website/src/content/docs/agent-os/index.mdx
index 39fa75efdb..d72cbaa6dc 100644
--- a/website/src/content/docs/agent-os/index.mdx
+++ b/website/src/content/docs/agent-os/index.mdx
@@ -10,6 +10,8 @@ import { faRocket } from "@rivet-gg/icons";
 agentOS is in preview and the API is subject to change. If you run into issues, please [report them on GitHub](https://github.com/rivet-dev/rivet/issues) or [join our Discord](https://rivet.dev/discord).
 </Note>
 
+For a worked pattern guide, see the cookbook: [AI Agent Workspaces](/cookbook/ai-agent-workspace/).
+
 ## Quickstart
 
 <CardGroup>
diff --git a/website/src/data/templates/shared.ts b/website/src/data/templates/shared.ts
index 31dba0b69c..f7007b6e5a 100644
--- a/website/src/data/templates/shared.ts
+++ b/website/src/data/templates/shared.ts
@@ -32,6 +32,16 @@ export const templates: Template[] = [
 		technologies: ["react", "ai-sdk"],
 		providers: { vercel: null },
 	},
+	{
+		name: "agent-os",
+		displayName: "agentOS",
+		description:
+			"Runnable agentOS examples covering the workspace filesystem, processes, networking with signed preview URLs, cron, host tools, agent sessions, and sandbox mounting.",
+		tags: ["ai"],
+		technologies: [],
+		providers: { vercel: null },
+		noFrontend: true,
+	},
 	{
 		name: "chat-room",
 		displayName: "Chat Room",

From dbd2709d58d478d16fe23dbc1d0e8fe5c50c3e56 Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 11:59:08 -0700
Subject: [PATCH 08/13] [SLOP(claude-fable-5)] fix(website): correct remaining
 compare and cookbook content inaccuracies

---
 .../content/cookbook/ai-agent-workspace.mdx    |  2 +-
 website/src/content/cookbook/ai-agent.mdx      |  4 ++--
 website/src/content/cookbook/chat-room.mdx     |  4 ++--
 .../cookbook/collaborative-text-editor.mdx     |  2 +-
 website/src/content/cookbook/cron-jobs.mdx     |  2 +-
 website/src/content/cookbook/live-cursors.mdx  |  4 ++--
 .../content/cookbook/per-tenant-database.mdx   |  2 +-
 .../compare/cloudflare-durable-objects.tsx     | 18 +++++++++---------
 website/src/data/compare/temporal.tsx          | 18 +++++++++---------
 9 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/website/src/content/cookbook/ai-agent-workspace.mdx b/website/src/content/cookbook/ai-agent-workspace.mdx
index f6e60d8768..7b43249a9a 100644
--- a/website/src/content/cookbook/ai-agent-workspace.mdx
+++ b/website/src/content/cookbook/ai-agent-workspace.mdx
@@ -1,6 +1,6 @@
 ---
 title: "AI Agent Workspaces"
-description: "Give every AI agent its own computer: a persistent agent workspace with a filesystem, processes, shells, networking, and coding agent sessions on a lightweight in-process VM. Run AI generated code, persist session transcripts across restarts, and mount a full sandbox when agents need native binaries."
+description: "Give every AI agent its own computer: a persistent workspace with a filesystem, processes, shells, networking, and agent sessions on a lightweight in-process OS."
 templates: ["agent-os"]
 ---
 
diff --git a/website/src/content/cookbook/ai-agent.mdx b/website/src/content/cookbook/ai-agent.mdx
index 006c95f8ed..6dc78f404a 100644
--- a/website/src/content/cookbook/ai-agent.mdx
+++ b/website/src/content/cookbook/ai-agent.mdx
@@ -1,6 +1,6 @@
 ---
 title: "AI Agent"
-description: "Patterns for building an AI agent backend with persistent conversation memory: one Rivet Actor per conversation, queue-driven message handling, streaming LLM responses as realtime events, and sandboxed coding agents."
+description: "Build an AI agent backend with persistent memory: one Rivet Actor per conversation, queued message handling, and streaming LLM responses as realtime events."
 templates: ["ai-agent"]
 ---
 
@@ -127,7 +127,7 @@ sequenceDiagram
 The examples ship without auth so they stay minimal. Apply this baseline before exposing an agent backend.
 
 - **API keys stay server-side**: `OPENAI_API_KEY` (or `ANTHROPIC_API_KEY`) is read by the AI SDK inside the actor process. The key never reaches the browser; clients only talk to the actor over RivetKit. The sandbox variant forwards keys into the sandbox env, never to the client.
-- **Add authentication**: The examples have no auth, so anyone who reaches the server can create agents, list them, and message any agent whose key they can guess. Add `onAuth` and scoped tokens as a recommended extension. See [Authentication](/docs/actors/authentication).
+- **Add authentication**: The examples have no auth, so anyone who reaches the server can create agents, list them, and message any agent whose key they can guess. Add `onBeforeConnect` or `createConnState` checks with scoped tokens as a recommended extension. See [Authentication](/docs/actors/authentication).
 - **Validate and rate-limit queue payloads**: The example only skips bodies without a string `text`. Enforce payload size limits, schema validation, and per-connection rate limits as a recommended extension.
 - **Derive sender identity server-side**: The example trusts the client-supplied `sender` field verbatim. Bind sender identity to the authenticated connection instead.
 - **Cap or trim message history**: The example sends the full transcript on every model call with no cap. Trim or summarize old messages as a recommended extension so prompts and state stay bounded.
diff --git a/website/src/content/cookbook/chat-room.mdx b/website/src/content/cookbook/chat-room.mdx
index e109e56938..19dccfe50b 100644
--- a/website/src/content/cookbook/chat-room.mdx
+++ b/website/src/content/cookbook/chat-room.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Chat Room"
-description: "Build a realtime chat room backend with Rivet Actors. One actor per room key, SQLite-backed message history, and WebSocket broadcast of new messages to every connected client, plus extension patterns for typing indicators, presence, and per-user inboxes."
+description: "Build a realtime chat room backend with Rivet Actors: one actor per room, SQLite-backed message history, and WebSocket broadcast to every connected client."
 templates: ["chat-room"]
 ---
 
@@ -91,7 +91,7 @@ sequenceDiagram
 	participant R as chatRoom
 
 	A->>R: connect with key [roomId]
-	Note over R: first start runs onMigrate (CREATE TABLE messages)
+	Note over R: every start runs onMigrate (CREATE TABLE IF NOT EXISTS messages)
 	A->>R: getHistory()
 	R-->>A: Message[] ordered by id
 	B->>R: connect with key [roomId]
diff --git a/website/src/content/cookbook/collaborative-text-editor.mdx b/website/src/content/cookbook/collaborative-text-editor.mdx
index 1540cdf997..a402ed4e20 100644
--- a/website/src/content/cookbook/collaborative-text-editor.mdx
+++ b/website/src/content/cookbook/collaborative-text-editor.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Collaborative Text Editor"
-description: "Build a collaborative text editor backend with Yjs CRDTs and Rivet Actors: a per-document actor relays CRDT document sync and awareness updates to every collaborator, persists merged Yjs snapshots in actor KV, and a coordinator actor indexes documents per workspace."
+description: "Build a collaborative text editor backend with Yjs CRDTs and Rivet Actors: per-document actors relay sync and awareness updates and persist snapshots."
 templates: ["collaborative-document"]
 ---
 
diff --git a/website/src/content/cookbook/cron-jobs.mdx b/website/src/content/cookbook/cron-jobs.mdx
index ba88952fda..14d16f470a 100644
--- a/website/src/content/cookbook/cron-jobs.mdx
+++ b/website/src/content/cookbook/cron-jobs.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Cron Jobs and Scheduled Tasks"
-description: "Durable cron jobs and scheduled tasks with Rivet Actors. Use c.schedule.after and c.schedule.at for persistent timers that survive restarts, deploys, and crashes, plus recurring jobs that re-arm themselves, idempotent handlers, and singleton job actors."
+description: "Durable cron jobs with Rivet Actors: schedule.after and schedule.at timers survive restarts and crashes, plus re-arming recurring jobs and idempotent handlers."
 templates: ["scheduling"]
 ---
 
diff --git a/website/src/content/cookbook/live-cursors.mdx b/website/src/content/cookbook/live-cursors.mdx
index 423683eab0..561b673f97 100644
--- a/website/src/content/cookbook/live-cursors.mdx
+++ b/website/src/content/cookbook/live-cursors.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Live Cursors and Presence"
-description: "Patterns for live cursors and multiplayer presence with Rivet Actors: per-connection cursor state, realtime cursor sharing over typed events or raw WebSockets, presence join and leave cleanup, and update throttling guidance."
+description: "Live cursors and multiplayer presence with Rivet Actors: per-connection cursor state, realtime updates over events or raw WebSockets, and throttling."
 templates: ["cursors", "cursors-raw-websocket"]
 ---
 
@@ -75,7 +75,7 @@ Neither example throttles. Both frontends send a cursor update on every raw `mou
 - **Key**: `cursorRoom[roomId]` (resolved via `client.cursorRoom.getOrCreate(roomId)`)
 - **Responsibility**: Exposes a raw WebSocket endpoint, tracks live sockets and their cursors in a `createVars` map keyed by a `sessionId` query parameter, persists text labels, and manually fans JSON frames out to every socket.
 - **Actions**
-  - `getOrCreate` (stub returning `{ status: "ok" }`, used only so the frontend can resolve the actor ID before dialing the WebSocket)
+  - `getOrCreate` (stub returning `{ status: "ok" }`; the frontend resolves the actor ID with the client handle's `getOrCreate(roomId).resolve()`, which creates the actor without dispatching this action)
   - `getRoomState`
 - **Queues**
   - None
diff --git a/website/src/content/cookbook/per-tenant-database.mdx b/website/src/content/cookbook/per-tenant-database.mdx
index 441893a885..4224037434 100644
--- a/website/src/content/cookbook/per-tenant-database.mdx
+++ b/website/src/content/cookbook/per-tenant-database.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Database per Tenant"
-description: "Multi-tenant data isolation with one Rivet Actor per tenant. The actor key is the tenant id, so each tenant gets its own actor and its own isolated dataset with no shared tables. Covers JSON state vs SQLite vs Drizzle, migrations, and deriving the tenant id from auth."
+description: "Multi-tenant data isolation with one Rivet Actor per tenant: the actor key is the tenant id, so each tenant gets its own isolated dataset and migrations."
 templates: ["per-tenant-database"]
 ---
 
diff --git a/website/src/data/compare/cloudflare-durable-objects.tsx b/website/src/data/compare/cloudflare-durable-objects.tsx
index c4c3ddd3c7..bf94fd9cec 100644
--- a/website/src/data/compare/cloudflare-durable-objects.tsx
+++ b/website/src/data/compare/cloudflare-durable-objects.tsx
@@ -111,8 +111,8 @@ export const cloudflareDurableObjects: CompareEntry = {
 						text: 'Full control over data residency and network isolation within your VPC',
 					},
 					competitor: {
-						status: 'no',
-						text: "Data processed on Cloudflare's global network with limited control",
+						status: 'partial',
+						text: 'Jurisdictions restrict where Durable Objects run and store data (EU, FedRAMP), but there is no VPC or network isolation',
 					},
 					importance:
 						'Data sovereignty ensures compliance with data governance requirements and maintains complete network isolation',
@@ -194,7 +194,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 						text: (
 							<>
 								Built-in SQLite database per actor with raw SQL and Drizzle support.{' '}
-								<a href="https://rivet.dev/docs/actors/sqlite">Learn more</a>.
+								<a href="https://rivet.dev/docs/actors/sqlite/">Learn more</a>.
 							</>
 						),
 					},
@@ -222,7 +222,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 					feature: 'Automatic connection handling',
 					rivet: {
 						status: 'yes',
-						text: 'Optionally provides abstraction over HTTP, WebSockets, and SSE with intelligent failure and reconnection handling',
+						text: 'Optionally provides abstraction over HTTP and WebSockets with intelligent failure and reconnection handling',
 					},
 					competitor: {
 						status: 'no',
@@ -277,8 +277,8 @@ export const cloudflareDurableObjects: CompareEntry = {
 						text: 'Flexible draining mechanism with configurable lifecycle management',
 					},
 					competitor: {
-						status: 'partial',
-						text: '60s grace period',
+						status: 'no',
+						text: 'No shutdown hooks or lifecycle callbacks; in-flight requests get up to 30 seconds during runtime restarts',
 					},
 					importance:
 						'Customizable lifecycle management allows for graceful state transfers and prevents data loss',
@@ -463,7 +463,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 		{
 			question: 'Is Rivet an alternative to Cloudflare Durable Objects?',
 			answerHtml:
-				'Yes. Rivet Actors provide the same stateful actor model as Durable Objects, including persistent state, WebSockets, and scheduling, as an open-source platform that runs on Rivet Cloud or your own infrastructure. See the <a href="https://rivet.dev/docs/actors">Rivet Actors documentation</a> for details.',
+				'Yes. Rivet Actors provide the same stateful actor model as Durable Objects, including persistent state, WebSockets, and scheduling, as an open-source platform that runs on Rivet Cloud or your own infrastructure. See the <a href="https://rivet.dev/docs/actors/">Rivet Actors documentation</a> for details.',
 		},
 		{
 			question: 'Can I run Rivet Actors outside of a single cloud provider?',
@@ -473,7 +473,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 		{
 			question: 'Do Rivet Actors support SQLite storage like Durable Objects?',
 			answerHtml:
-				'Yes. Each Rivet Actor can use built-in key-value state or its own embedded SQLite database, with raw SQL or Drizzle ORM. See the <a href="https://rivet.dev/docs/actors/sqlite">SQLite documentation</a>.',
+				'Yes. Each Rivet Actor can use built-in key-value state or its own embedded SQLite database, with raw SQL or Drizzle ORM. See the <a href="https://rivet.dev/docs/actors/sqlite/">SQLite documentation</a>.',
 		},
 		{
 			question: 'Is Rivet open source?',
@@ -483,7 +483,7 @@ export const cloudflareDurableObjects: CompareEntry = {
 		{
 			question: 'How hard is it to migrate from Cloudflare Durable Objects to Rivet?',
 			answerHtml:
-				'Durable Objects and Rivet Actors share the same core concepts, so most migrations map each Durable Object class to a Rivet Actor with state, actions, and scheduling. Our team also provides hands-on migration assistance. <a href="https://rivet.dev/talk-to-an-engineer">Talk to an engineer</a> to plan a migration.',
+				'Durable Objects and Rivet Actors share the same core concepts, so most migrations map each Durable Object class to a Rivet Actor with state, actions, and scheduling. Our team also provides hands-on migration assistance. <a href="https://rivet.dev/talk-to-an-engineer/">Talk to an engineer</a> to plan a migration.',
 		},
 		{
 			question: 'Do Rivet Actors support WebSockets and realtime connections?',
diff --git a/website/src/data/compare/temporal.tsx b/website/src/data/compare/temporal.tsx
index f8e1b643e2..e22b67cf3e 100644
--- a/website/src/data/compare/temporal.tsx
+++ b/website/src/data/compare/temporal.tsx
@@ -109,7 +109,7 @@ export const temporal: CompareEntry = {
 						text: (
 							<>
 								Rivet Cloud with a free tier.{' '}
-								<a href="https://rivet.dev/cloud">See pricing</a>.
+								<a href="https://rivet.dev/cloud/">See pricing</a>.
 							</>
 						),
 					},
@@ -129,7 +129,7 @@ export const temporal: CompareEntry = {
 					feature: 'Serves user-facing traffic directly',
 					rivet: {
 						status: 'yes',
-						text: 'Actors terminate HTTP, WebSocket, and SSE connections themselves',
+						text: 'Actors terminate HTTP and WebSocket connections themselves',
 					},
 					competitor: {
 						status: 'no',
@@ -171,7 +171,7 @@ export const temporal: CompareEntry = {
 						text: (
 							<>
 								Each actor owns persistent KV state and an embedded{' '}
-								<a href="https://rivet.dev/docs/actors/sqlite">SQLite database</a>
+								<a href="https://rivet.dev/docs/actors/sqlite/">SQLite database</a>
 							</>
 						),
 					},
@@ -194,7 +194,7 @@ export const temporal: CompareEntry = {
 						text: (
 							<>
 								Replay-safe workflows with steps, timers, queue waits, and rollback.{' '}
-								<a href="https://rivet.dev/docs/actors/workflows">Learn more</a>.
+								<a href="https://rivet.dev/docs/actors/workflows/">Learn more</a>.
 							</>
 						),
 					},
@@ -209,7 +209,7 @@ export const temporal: CompareEntry = {
 					feature: 'Scheduling and cron',
 					rivet: {
 						status: 'yes',
-						text: 'Built-in scheduling for one-shot and recurring work',
+						text: 'Durable one-shot timers built in with schedule.after and schedule.at; recurring jobs re-arm themselves',
 					},
 					competitor: {
 						status: 'yes',
@@ -329,22 +329,22 @@ export const temporal: CompareEntry = {
 		{
 			question: 'Is Rivet an alternative to Temporal?',
 			answerHtml:
-				'For many workloads, yes. Rivet provides durable, replayable workflows inside Rivet Actors, plus realtime serving that Temporal does not offer. If your workload is pure backend orchestration across many languages, Temporal is a strong choice. If it combines durable logic with stateful realtime serving, Rivet covers both in one runtime. See <a href="https://rivet.dev/docs/actors/workflows">Rivet workflows</a>.',
+				'For many workloads, yes. Rivet provides durable, replayable workflows inside Rivet Actors, plus realtime serving that Temporal does not offer. If your workload is pure backend orchestration across many languages, Temporal is a strong choice. If it combines durable logic with stateful realtime serving, Rivet covers both in one runtime. See <a href="https://rivet.dev/docs/actors/workflows/">Rivet workflows</a>.',
 		},
 		{
 			question: 'Does Rivet support durable execution like Temporal?',
 			answerHtml:
-				'Yes. Rivet workflows persist progress automatically, replay safely after restarts and crashes, and support steps, durable timers, queue waits, and rollback. They run inside Rivet Actors, so durable logic lives next to the state it operates on. See the <a href="https://rivet.dev/docs/actors/workflows">workflow documentation</a>.',
+				'Yes. Rivet workflows persist progress automatically, replay safely after restarts and crashes, and support steps, durable timers, queue waits, and rollback. They run inside Rivet Actors, so durable logic lives next to the state it operates on. See the <a href="https://rivet.dev/docs/actors/workflows/">workflow documentation</a>.',
 		},
 		{
 			question: 'Can Temporal serve WebSockets or user-facing traffic?',
 			answerHtml:
-				'No. Temporal workers poll task queues over outbound connections and do not terminate HTTP or WebSocket traffic; you build a separate API layer that communicates with workflows through the Temporal Service. Rivet Actors serve HTTP, WebSocket, and SSE traffic directly from the runtime that holds state.',
+				'No. Temporal workers poll task queues over outbound connections and do not terminate HTTP or WebSocket traffic; you build a separate API layer that communicates with workflows through the Temporal Service. Rivet Actors serve HTTP and WebSocket traffic directly from the runtime that holds state.',
 		},
 		{
 			question: 'How does pricing differ between Rivet Cloud and Temporal Cloud?',
 			answerHtml:
-				'Temporal Cloud bills per action: workflow starts, activities and their retries, signals, queries, updates, and timers all count, with plan minimums starting at $100 per month and no perpetual free tier. Rivet Cloud bills primarily on compute through Awake Actor Hours and includes a free tier, so message-heavy realtime sessions do not multiply costs. See <a href="https://rivet.dev/cloud">Rivet Cloud pricing</a>.',
+				'Temporal Cloud bills per action: workflow starts, activities and their retries, signals, queries, updates, and timers all count, with plan minimums starting at $100 per month and no perpetual free tier. Rivet Cloud bills primarily on compute through Awake Actor Hours and includes a free tier, so message-heavy realtime sessions do not multiply costs. See <a href="https://rivet.dev/cloud/">Rivet Cloud pricing</a>.',
 		},
 		{
 			question: 'Is Rivet open source like Temporal?',

From 8663080acabfb8be7180f3e93f9a47dbe8ee9a9e Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 11:59:20 -0700
Subject: [PATCH 09/13] [SLOP(claude-fable-5)] perf(website): render compare
 pages statically and fix FAQ render paths

---
 website/src/components/faq/FaqJsonLd.astro    |   4 +-
 .../marketing/compare/ComparePage.tsx         | 235 ++++--------------
 .../marketing/pricing/PricingPageClient.tsx   |   3 -
 .../solutions/AgentOSPricingPage.tsx          |  11 +-
 website/src/lib/jsonLd.ts                     |   6 +
 website/src/pages/cloud.astro                 |   6 +
 website/src/pages/compare/[slug].astro        |  13 +-
 website/src/pages/compare/index.astro         |   5 +-
 website/src/pages/cookbook/[...slug].astro    |   5 +-
 9 files changed, 80 insertions(+), 208 deletions(-)
 create mode 100644 website/src/lib/jsonLd.ts

diff --git a/website/src/components/faq/FaqJsonLd.astro b/website/src/components/faq/FaqJsonLd.astro
index 30baef9d7c..e4ef1c77e7 100644
--- a/website/src/components/faq/FaqJsonLd.astro
+++ b/website/src/components/faq/FaqJsonLd.astro
@@ -11,6 +11,7 @@
 //   AI-answer extraction; the schema is nearly free since it derives from the
 //   same data module as the visible rendering.
 import { faqPageSchema, type FaqItem } from '@/data/faqs/types';
+import { jsonLdString } from '@/lib/jsonLd';
 
 interface Props {
 	items: FaqItem[];
@@ -18,8 +19,7 @@ interface Props {
 
 const { items } = Astro.props;
 
-// Escape < so HTML in answer text can never terminate the script element.
-const json = JSON.stringify(faqPageSchema(items)).replace(/</g, '\\u003c');
+const json = jsonLdString(faqPageSchema(items));
 ---
 
 <script type="application/ld+json" set:html={json} />
diff --git a/website/src/components/marketing/compare/ComparePage.tsx b/website/src/components/marketing/compare/ComparePage.tsx
index 37063b7fec..60f39bd3b7 100644
--- a/website/src/components/marketing/compare/ComparePage.tsx
+++ b/website/src/components/marketing/compare/ComparePage.tsx
@@ -1,66 +1,33 @@
-'use client';
-
 import { Icon, faArrowRight, faRivet, faServer } from '@rivet-gg/icons';
-import { motion } from 'framer-motion';
 import { FaqList } from '@/components/faq/FaqSection';
+import { formatTimestamp } from '@/lib/formatDate';
 import { compareEntries, getCompareEntry } from '@/data/compare';
 import type { CompareEntry } from '@/data/compare/types';
 import { ComparisonTable } from './ComparisonTable';
 
-// The route passes only the slug because CompareEntry contains JSX cell text,
-// which is not serializable across the island boundary. The island looks the
-// entry up from the registry itself.
+// This component is server-rendered by Astro with no client directive, so it
+// must stay hook-free with no framer-motion. Comparison pages are SEO entry
+// pages and ship zero island JavaScript.
 interface ComparePageProps {
 	slug: string;
 }
 
-function formatLastUpdated(isoDate: string): string {
-	// Force UTC so the server render and client hydration produce the same
-	// string regardless of local timezone.
-	return new Date(isoDate).toLocaleDateString('en-US', {
-		year: 'numeric',
-		month: 'long',
-		day: 'numeric',
-		timeZone: 'UTC',
-	});
-}
-
 function HeroSection({ entry }: { entry: CompareEntry }) {
 	return (
 		<section className="relative flex min-h-[60vh] flex-col justify-center px-6 pt-32 pb-24">
 			<div className="mx-auto w-full max-w-7xl">
 				<div className="max-w-3xl">
-					<motion.h1
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5 }}
-						className="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl"
-					>
+					<h1 className="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">
 						{entry.rivetProductName} vs <br />
 						{entry.competitorName}
-					</motion.h1>
-					<motion.p
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5, delay: 0.1 }}
-						className="text-base leading-relaxed text-zinc-500 md:text-lg"
-					>
+					</h1>
+					<p className="text-base leading-relaxed text-zinc-500 md:text-lg">
 						{entry.heroSubtitle}
-					</motion.p>
-					<motion.p
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5, delay: 0.15 }}
-						className="mt-4 text-sm text-zinc-600"
-					>
-						Last updated {formatLastUpdated(entry.lastUpdated)}
-					</motion.p>
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ duration: 0.5, delay: 0.2 }}
-						className="mt-8 flex flex-col gap-3 sm:flex-row"
-					>
+					</p>
+					<p className="mt-4 text-sm text-zinc-600">
+						Last updated {formatTimestamp(entry.lastUpdated)}
+					</p>
+					<div className="mt-8 flex flex-col gap-3 sm:flex-row">
 						<a
 							href="/docs/actors/quickstart/backend"
 							className="selection-dark inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
@@ -68,7 +35,7 @@ function HeroSection({ entry }: { entry: CompareEntry }) {
 							Get Started with {entry.rivetProductName}
 							<Icon icon={faArrowRight} />
 						</a>
-					</motion.div>
+					</div>
 				</div>
 			</div>
 		</section>
@@ -80,34 +47,16 @@ function OverviewSection({ entry }: { entry: CompareEntry }) {
 		<section className="border-t border-white/10 py-24">
 			<div className="mx-auto max-w-7xl px-6">
 				<div className="mb-12">
-					<motion.h2
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5 }}
-						className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl"
-					>
+					<h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">
 						Overview
-					</motion.h2>
-					<motion.p
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5, delay: 0.1 }}
-						className="max-w-xl text-base leading-relaxed text-zinc-500"
-					>
+					</h2>
+					<p className="max-w-xl text-base leading-relaxed text-zinc-500">
 						Compare the two approaches and decide which is right for your project.
-					</motion.p>
+					</p>
 				</div>
 
 				<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5 }}
-						className="flex flex-col border-t border-white/10 pt-6"
-					>
+					<div className="flex flex-col border-t border-white/10 pt-6">
 						<div className="mb-3 text-zinc-500">
 							<Icon icon={faRivet} className="h-4 w-4" />
 						</div>
@@ -134,15 +83,9 @@ function OverviewSection({ entry }: { entry: CompareEntry }) {
 								<Icon icon={faArrowRight} />
 							</a>
 						</div>
-					</motion.div>
+					</div>
 
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5, delay: 0.1 }}
-						className="flex flex-col border-t border-white/10 pt-6"
-					>
+					<div className="flex flex-col border-t border-white/10 pt-6">
 						<div className="mb-3 text-zinc-500">
 							<Icon icon={entry.competitorIcon ?? faServer} className="h-4 w-4" />
 						</div>
@@ -160,7 +103,7 @@ function OverviewSection({ entry }: { entry: CompareEntry }) {
 								</div>
 							))}
 						</div>
-					</motion.div>
+					</div>
 				</div>
 			</div>
 		</section>
@@ -172,38 +115,19 @@ function ComparisonSection({ entry }: { entry: CompareEntry }) {
 		<section className="border-t border-white/10 py-24">
 			<div className="mx-auto max-w-7xl px-6">
 				<div className="mb-12">
-					<motion.h2
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5 }}
-						className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl"
-					>
+					<h2 className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl">
 						Feature Comparison
-					</motion.h2>
-					<motion.p
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5, delay: 0.1 }}
-						className="max-w-xl text-base leading-relaxed text-zinc-500"
-					>
+					</h2>
+					<p className="max-w-xl text-base leading-relaxed text-zinc-500">
 						A detailed breakdown of capabilities across both platforms.
-					</motion.p>
+					</p>
 				</div>
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.2 }}
-				>
-					<ComparisonTable
-						featureGroups={entry.featureGroups}
-						competitorName={entry.competitorName}
-						competitorIcon={entry.competitorIcon}
-						rivetProductName={entry.rivetProductName}
-					/>
-				</motion.div>
+				<ComparisonTable
+					featureGroups={entry.featureGroups}
+					competitorName={entry.competitorName}
+					competitorIcon={entry.competitorIcon}
+					rivetProductName={entry.rivetProductName}
+				/>
 			</div>
 		</section>
 	);
@@ -213,26 +137,16 @@ function VerdictSection({ entry }: { entry: CompareEntry }) {
 	return (
 		<section className="border-t border-white/10 py-24 text-center">
 			<div className="mx-auto max-w-3xl px-6">
-				<motion.h2
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5 }}
-					className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl"
-				>
+				<h2 className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl">
 					Verdict
-				</motion.h2>
+				</h2>
 				{entry.verdict.map((paragraph) => (
-					<motion.p
+					<p
 						key={paragraph}
-						initial={{ opacity: 0, y: 20 }}
-						whileInView={{ opacity: 1, y: 0 }}
-						viewport={{ once: true }}
-						transition={{ duration: 0.5, delay: 0.1 }}
 						className="mb-4 text-base leading-relaxed text-zinc-500 last:mb-0"
 					>
 						{paragraph}
-					</motion.p>
+					</p>
 				))}
 			</div>
 		</section>
@@ -243,37 +157,18 @@ function MigrationSection({ migration }: { migration: NonNullable<CompareEntry['
 	return (
 		<section className="border-t border-white/10 py-24 text-center">
 			<div className="mx-auto max-w-3xl px-6">
-				<motion.h2
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5 }}
-					className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl"
-				>
+				<h2 className="mb-3 text-2xl font-normal tracking-tight text-white md:text-4xl">
 					{migration.heading}
-				</motion.h2>
-				<motion.p
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.1 }}
-					className="mb-6 text-base leading-relaxed text-zinc-500"
-				>
-					{migration.body}
-				</motion.p>
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.2 }}
-				>
+				</h2>
+				<p className="mb-6 text-base leading-relaxed text-zinc-500">{migration.body}</p>
+				<div>
 					<a
 						href="/talk-to-an-engineer"
 						className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-white/10 px-4 py-2 text-sm text-zinc-300 transition-colors hover:border-white/20 hover:text-white"
 					>
 						Talk to an engineer
 					</a>
-				</motion.div>
+				</div>
 			</div>
 		</section>
 	);
@@ -283,15 +178,9 @@ function FaqSectionDark({ entry }: { entry: CompareEntry }) {
 	return (
 		<section className="border-t border-white/10 py-24">
 			<div className="mx-auto max-w-3xl px-6">
-				<motion.h2
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5 }}
-					className="mb-12 text-center text-2xl font-normal tracking-tight text-white md:text-4xl"
-				>
+				<h2 className="mb-12 text-center text-2xl font-normal tracking-tight text-white md:text-4xl">
 					Frequently asked questions
-				</motion.h2>
+				</h2>
 				<FaqList items={entry.faq} theme="dark" />
 			</div>
 		</section>
@@ -307,15 +196,9 @@ function OtherComparisonsSection({ entry }: { entry: CompareEntry }) {
 	return (
 		<section className="border-t border-white/10 py-24">
 			<div className="mx-auto max-w-7xl px-6">
-				<motion.h2
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5 }}
-					className="mb-8 text-2xl font-normal tracking-tight text-white md:text-4xl"
-				>
+				<h2 className="mb-8 text-2xl font-normal tracking-tight text-white md:text-4xl">
 					Other comparisons
-				</motion.h2>
+				</h2>
 				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 					{others.map((other) => (
 						<a
@@ -341,31 +224,13 @@ function CTASection() {
 	return (
 		<section className="border-t border-white/10 px-6 py-48 text-center">
 			<div className="mx-auto max-w-3xl">
-				<motion.h2
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5 }}
-					className="mb-6 text-2xl font-normal tracking-tight text-white md:text-4xl"
-				>
+				<h2 className="mb-6 text-2xl font-normal tracking-tight text-white md:text-4xl">
 					The primitive for stateful workloads.
-				</motion.h2>
-				<motion.p
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.1 }}
-					className="mb-8 text-base leading-relaxed text-zinc-500"
-				>
+				</h2>
+				<p className="mb-8 text-base leading-relaxed text-zinc-500">
 					The next generation of software needs a new kind of backend. This is it.
-				</motion.p>
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5, delay: 0.2 }}
-					className="flex flex-col items-center justify-center gap-3 sm:flex-row"
-				>
+				</p>
+				<div className="flex flex-col items-center justify-center gap-3 sm:flex-row">
 					<a
 						href="/docs"
 						className="selection-dark inline-flex items-center justify-center whitespace-nowrap rounded-md bg-white px-4 py-2 text-sm font-medium text-black transition-colors hover:bg-zinc-200"
@@ -378,7 +243,7 @@ function CTASection() {
 					>
 						Talk to an Engineer
 					</a>
-				</motion.div>
+				</div>
 			</div>
 		</section>
 	);
diff --git a/website/src/components/marketing/pricing/PricingPageClient.tsx b/website/src/components/marketing/pricing/PricingPageClient.tsx
index 8c5d42ee40..e2c596e217 100644
--- a/website/src/components/marketing/pricing/PricingPageClient.tsx
+++ b/website/src/components/marketing/pricing/PricingPageClient.tsx
@@ -19,8 +19,6 @@ import {
 import rivetLogoWhite from '@/images/rivet-logos/icon-white.svg';
 import imgYC from '@/images/logos/yc.svg';
 import imgA16z from '@/images/logos/a16z.svg';
-import { FaqSection } from '@/components/faq/FaqSection';
-import { cloudFaqs } from '@/data/faqs/cloud';
 
 // --- Page Sections ---
 
@@ -698,7 +696,6 @@ export default function PricingPageClient() {
     <div className="min-h-screen bg-black text-zinc-300 font-sans selection:bg-[#FF4500]/30 selection:text-orange-200">
       <main>
         <Pricing />
-        <FaqSection items={cloudFaqs} />
       </main>
     </div>
   );
diff --git a/website/src/components/marketing/solutions/AgentOSPricingPage.tsx b/website/src/components/marketing/solutions/AgentOSPricingPage.tsx
index c1d7e3ed25..0af32d9711 100644
--- a/website/src/components/marketing/solutions/AgentOSPricingPage.tsx
+++ b/website/src/components/marketing/solutions/AgentOSPricingPage.tsx
@@ -236,14 +236,9 @@ export default function AgentOSPricingPage() {
 					</div>
 				</section>
 
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					whileInView={{ opacity: 1, y: 0 }}
-					viewport={{ once: true }}
-					transition={{ duration: 0.5 }}
-				>
-					<FaqSection items={agentOsPricingFaqs} theme="light" />
-				</motion.div>
+				{/* No motion wrapper here. The FAQ must stay visible without JavaScript
+				    because the page's FaqJsonLd requires the content to be on-page. */}
+				<FaqSection items={agentOsPricingFaqs} theme="light" />
 				<CTASection />
 			</main>
 		</div>
diff --git a/website/src/lib/jsonLd.ts b/website/src/lib/jsonLd.ts
new file mode 100644
index 0000000000..2829117086
--- /dev/null
+++ b/website/src/lib/jsonLd.ts
@@ -0,0 +1,6 @@
+// Serialize a schema object for injection via set:html inside an inline
+// <script type="application/ld+json"> element. Escapes < so content-derived
+// strings can never terminate the script element early.
+export function jsonLdString(schema: unknown): string {
+	return JSON.stringify(schema).replace(/</g, '\\u003c');
+}
diff --git a/website/src/pages/cloud.astro b/website/src/pages/cloud.astro
index 9a0a2cd6b9..c877daeeb7 100644
--- a/website/src/pages/cloud.astro
+++ b/website/src/pages/cloud.astro
@@ -2,6 +2,7 @@
 import MarketingLayout from '@/layouts/MarketingLayout.astro';
 import PricingPageClient from '@/components/marketing/pricing/PricingPageClient';
 import FaqJsonLd from '@/components/faq/FaqJsonLd.astro';
+import { FaqSection } from '@/components/faq/FaqSection';
 import { cloudFaqs } from '@/data/faqs/cloud';
 
 // Product schema with pricing tiers
@@ -68,4 +69,9 @@ const productSchema = {
 	<script type="application/ld+json" set:html={JSON.stringify(productSchema)} />
 	<FaqJsonLd items={cloudFaqs} />
 	<PricingPageClient client:load />
+	{/* Rendered statically outside the island so the FAQ content ships only in
+	    HTML and JSON-LD, not a third time in the island bundle. */}
+	<div class="bg-black font-sans text-zinc-300">
+		<FaqSection items={cloudFaqs} />
+	</div>
 </MarketingLayout>
diff --git a/website/src/pages/compare/[slug].astro b/website/src/pages/compare/[slug].astro
index 7528287060..8cf213b0cd 100644
--- a/website/src/pages/compare/[slug].astro
+++ b/website/src/pages/compare/[slug].astro
@@ -3,6 +3,7 @@ import MarketingLayout from '@/layouts/MarketingLayout.astro';
 import FaqJsonLd from '@/components/faq/FaqJsonLd.astro';
 import { ComparePage } from '@/components/marketing/compare/ComparePage';
 import { compareEntries, getCompareEntry } from '@/data/compare';
+import { jsonLdString } from '@/lib/jsonLd';
 
 export async function getStaticPaths() {
 	return compareEntries.map((entry) => ({
@@ -11,9 +12,9 @@ export async function getStaticPaths() {
 }
 
 const { slug } = Astro.params;
-// The island receives only the slug because CompareEntry contains JSX cell
-// text that cannot be serialized across the island boundary; both this
-// frontmatter and the island read the same registry.
+if (!slug) {
+	throw new Error('Missing compare slug param');
+}
 const entry = getCompareEntry(slug);
 if (!entry) {
 	throw new Error(`Unknown compare slug: ${slug}`);
@@ -53,8 +54,8 @@ const webPageSchema = {
 	canonicalUrl={canonicalUrl}
 	keywords={entry.keywords}
 >
-	<script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
-	<script type="application/ld+json" set:html={JSON.stringify(webPageSchema)} />
+	<script type="application/ld+json" set:html={jsonLdString(breadcrumbSchema)} />
+	<script type="application/ld+json" set:html={jsonLdString(webPageSchema)} />
 	<FaqJsonLd items={entry.faq} />
-	<ComparePage slug={entry.slug} client:load />
+	<ComparePage slug={entry.slug} />
 </MarketingLayout>
diff --git a/website/src/pages/compare/index.astro b/website/src/pages/compare/index.astro
index 587901610c..aba5b3d82a 100644
--- a/website/src/pages/compare/index.astro
+++ b/website/src/pages/compare/index.astro
@@ -1,6 +1,7 @@
 ---
 import MarketingLayout from '@/layouts/MarketingLayout.astro';
 import { compareEntries } from '@/data/compare';
+import { jsonLdString } from '@/lib/jsonLd';
 
 const title = 'Rivet vs Alternatives';
 const description =
@@ -41,8 +42,8 @@ const collectionSchema = {
 ---
 
 <MarketingLayout title={title} description={description} canonicalUrl={canonicalUrl}>
-	<script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
-	<script type="application/ld+json" set:html={JSON.stringify(collectionSchema)} />
+	<script type="application/ld+json" set:html={jsonLdString(breadcrumbSchema)} />
+	<script type="application/ld+json" set:html={jsonLdString(collectionSchema)} />
 	<div class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
 		<main>
 			<section class="relative flex flex-col justify-center px-6 pt-32 pb-16">
diff --git a/website/src/pages/cookbook/[...slug].astro b/website/src/pages/cookbook/[...slug].astro
index 97b7472c17..5816a862ca 100644
--- a/website/src/pages/cookbook/[...slug].astro
+++ b/website/src/pages/cookbook/[...slug].astro
@@ -3,6 +3,7 @@ import MarketingLayout from "@/layouts/MarketingLayout.astro";
 import { getCollection, render } from "astro:content";
 import { templates as allTemplates, type Template } from "@/data/templates/shared";
 import * as mdxComponents from "@/components/mdx";
+import { jsonLdString } from "@/lib/jsonLd";
 
 export async function getStaticPaths() {
 	const cookbook = await getCollection("cookbook");
@@ -106,8 +107,8 @@ const resolvedTemplates = resolveTemplates(templates);
 	canonicalUrl={canonicalUrl}
 	active="cookbook"
 >
-	<script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
-	<script type="application/ld+json" set:html={JSON.stringify(techArticleSchema)} />
+	<script type="application/ld+json" set:html={jsonLdString(breadcrumbSchema)} />
+	<script type="application/ld+json" set:html={jsonLdString(techArticleSchema)} />
 	<main class="min-h-screen bg-black font-sans text-zinc-300 selection:bg-[#FF4500]/30 selection:text-orange-200">
 		<div class="relative overflow-hidden pb-12 pt-32 md:pt-48">
 			<div class="mx-auto max-w-7xl px-6">

From 61833d49064e5c416dee2ffde0b52f6c86b88904 Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 11:59:24 -0700
Subject: [PATCH 10/13] [SLOP(claude-fable-5)] fix(website): cookbook nav on
 mobile and registry entry for multiplayer game

---
 website/src/components/v2/Header.tsx              |  5 +++--
 website/src/content/cookbook/multiplayer-game.mdx |  2 +-
 website/src/data/templates/shared.ts              | 10 ++++++++++
 website/src/layouts/MarketingLayout.astro         |  3 ++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/website/src/components/v2/Header.tsx b/website/src/components/v2/Header.tsx
index c283139335..56dca16763 100644
--- a/website/src/components/v2/Header.tsx
+++ b/website/src/components/v2/Header.tsx
@@ -471,7 +471,7 @@ export function Header({
 										href="/cookbook"
 										ariaCurrent={active === "cookbook" ? "page" : undefined}
 									>
-										Cookbook
+										Cookbooks
 									</TextNavItem>
 								)}
 								{!isLightTheme && (
@@ -555,7 +555,7 @@ export function Header({
 						href="/cookbook"
 						ariaCurrent={active === "cookbook" ? "page" : undefined}
 					>
-						Cookbook
+						Cookbooks
 					</TextNavItem>
 					<TextNavItem
 						href="/cloud"
@@ -607,6 +607,7 @@ function DocsMobileNavigation({
 		]
 		: [
 			{ href: "/docs", label: "Documentation" },
+			{ href: "/cookbook", label: "Cookbooks" },
 			{ href: "/cloud", label: "Pricing" },
 		];
 
diff --git a/website/src/content/cookbook/multiplayer-game.mdx b/website/src/content/cookbook/multiplayer-game.mdx
index a3c33c492a..b04f45b808 100644
--- a/website/src/content/cookbook/multiplayer-game.mdx
+++ b/website/src/content/cookbook/multiplayer-game.mdx
@@ -1,7 +1,7 @@
 ---
 title: "Multiplayer Game"
 description: "Pragmatic patterns for building multiplayer games: matchmaking, tick loops, realtime state, interest management, and validation."
-templates: []
+templates: ["multiplayer-game-patterns"]
 ---
 
 Patterns for building multiplayer games with RivetKit, intended as a practical checklist you can adapt per genre.
diff --git a/website/src/data/templates/shared.ts b/website/src/data/templates/shared.ts
index f7007b6e5a..b253409ddc 100644
--- a/website/src/data/templates/shared.ts
+++ b/website/src/data/templates/shared.ts
@@ -115,6 +115,16 @@ export const templates: Template[] = [
 		technologies: ["react"],
 		providers: { vercel: null },
 	},
+	{
+		name: "multiplayer-game-patterns",
+		displayName: "Multiplayer Game Patterns",
+		description:
+			"Working matchmaking, lobby, and tick-loop actors for battle royale, arena, IO style, open world, party, ranked, turn-based, and idle games.",
+		tags: ["realtime"],
+		technologies: ["websocket"],
+		providers: { vercel: null },
+		noFrontend: true,
+	},
 ];
 
 export const TAGS: Tag[] = [
diff --git a/website/src/layouts/MarketingLayout.astro b/website/src/layouts/MarketingLayout.astro
index b6e98cd99e..5607a61620 100644
--- a/website/src/layouts/MarketingLayout.astro
+++ b/website/src/layouts/MarketingLayout.astro
@@ -1,4 +1,5 @@
 ---
+import type { ComponentProps } from 'react';
 import BaseLayout from './BaseLayout.astro';
 import { Header } from '@/components/v2/Header';
 
@@ -8,7 +9,7 @@ interface Props {
 	canonicalUrl?: string;
 	ogImage?: string;
 	keywords?: string[];
-	active?: "product" | "docs" | "cookbook" | "blog" | "pricing" | "learn";
+	active?: ComponentProps<typeof Header>['active'];
 }
 
 const { title, description, canonicalUrl, ogImage, keywords, active } = Astro.props;

From 66548c5a6a13fa83b8fd6b8a25e42cafd56948ee Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 12:15:54 -0700
Subject: [PATCH 11/13] [SLOP(claude-fable-5)] feat(website): poster-style
 cover art for cookbook index

---
 .../src/components/cookbook/CookbookCard.tsx  |   40 +-
 .../src/components/cookbook/CookbookCover.tsx | 1231 +++++++++++++++++
 .../cookbook/CookbookPageContent.tsx          |   22 +-
 website/src/pages/cookbook/index.astro        |    1 +
 website/src/styles/fonts.css                  |   12 +-
 5 files changed, 1263 insertions(+), 43 deletions(-)
 create mode 100644 website/src/components/cookbook/CookbookCover.tsx

diff --git a/website/src/components/cookbook/CookbookCard.tsx b/website/src/components/cookbook/CookbookCard.tsx
index 4919d12a4f..d4fa2ea264 100644
--- a/website/src/components/cookbook/CookbookCard.tsx
+++ b/website/src/components/cookbook/CookbookCard.tsx
@@ -1,6 +1,7 @@
-import { Icon, faArrowRight } from "@rivet-gg/icons";
+import { CookbookCover } from "./CookbookCover";
 
 export interface CookbookPageCardData {
+	slug: string;
 	title: string;
 	description: string;
 	href: string;
@@ -15,38 +16,13 @@ export interface CookbookPageCardData {
 	}>;
 }
 
-export function CookbookCard({ page }: { page: CookbookPageCardData }) {
+export function CookbookCard({ page, numeral }: { page: CookbookPageCardData; numeral: string }) {
 	return (
-		<a href={page.href} className="group block">
-			<div className="rounded-lg border border-white/10 bg-black p-5 transition-all duration-200 group-hover:border-white/20 group-hover:bg-white/[0.02]">
-				<div className="flex items-start justify-between gap-3 mb-2">
-					<h3 className="text-sm font-medium text-white">{page.title}</h3>
-					<Icon
-						icon={faArrowRight}
-						className="text-zinc-600 group-hover:text-white transition-all duration-200 text-xs flex-shrink-0 mt-0.5"
-					/>
-				</div>
-
-				<p className="text-xs text-zinc-500 line-clamp-2 mb-3">{page.description}</p>
-
-				{page.templates.length > 0 && (
-					<div className="flex flex-wrap gap-1.5">
-						{page.templates.slice(0, 3).map((t) => (
-							<span
-								key={t.name}
-								className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-zinc-400"
-							>
-								{t.displayName}
-							</span>
-						))}
-						{page.templates.length > 3 && (
-							<span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-zinc-400">
-								+{page.templates.length - 3}
-							</span>
-						)}
-					</div>
-				)}
-			</div>
+		<a
+			href={page.href}
+			className="group relative block aspect-[5/7] overflow-hidden rounded-[10px] border border-white/10 bg-black transition-colors duration-[400ms] hover:border-white/25 [container-type:inline-size]"
+		>
+			<CookbookCover slug={page.slug} title={page.title} numeral={numeral} />
 		</a>
 	);
 }
diff --git a/website/src/components/cookbook/CookbookCover.tsx b/website/src/components/cookbook/CookbookCover.tsx
new file mode 100644
index 0000000000..0455f56f30
--- /dev/null
+++ b/website/src/components/cookbook/CookbookCover.tsx
@@ -0,0 +1,1231 @@
+import type { ReactNode, SVGProps } from "react";
+
+// Poster-style cover art for cookbook entries. Every cover shares one surreal
+// dusk-landscape composition: a gradient sky, a haze band, a horizon line over
+// a dark sea, a soft reflection column, film grain, and a vignette. Per-cover
+// identity comes from the palette and from what hangs in the sky, keyed by the
+// entry slug in COVER_ART below. Unknown slugs fall back to a generic floating
+// orb scene with a palette picked deterministically from the slug.
+//
+// `CookbookCoverDefs` must be rendered exactly once on any page that renders
+// covers; it holds the shared grain filter, vignette, glints, and edge mask
+// that every cover SVG references by id.
+
+export const COVER_SERIF = '"Perfectly Nineties", Georgia, serif';
+
+// Horizon y coordinate in the 500x700 viewBox.
+const HZ = 510;
+
+// Deterministic PRNG so server render and hydration always agree.
+function mulberry32(a: number) {
+	return () => {
+		a |= 0;
+		a = (a + 0x6d2b79f5) | 0;
+		let t = Math.imul(a ^ (a >>> 15), 1 | a);
+		t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+	};
+}
+
+const f = (n: number) => Math.round(n * 10) / 10;
+
+function polar(cx: number, cy: number, r: number, deg: number): [number, number] {
+	const a = (deg * Math.PI) / 180;
+	return [f(cx + r * Math.cos(a)), f(cy + r * Math.sin(a))];
+}
+
+export function toRoman(n: number): string {
+	const table: Array<[number, string]> = [
+		[1000, "M"],
+		[900, "CM"],
+		[500, "D"],
+		[400, "CD"],
+		[100, "C"],
+		[90, "XC"],
+		[50, "L"],
+		[40, "XL"],
+		[10, "X"],
+		[9, "IX"],
+		[5, "V"],
+		[4, "IV"],
+		[1, "I"],
+	];
+	let out = "";
+	for (const [value, symbol] of table) {
+		while (n >= value) {
+			out += symbol;
+			n -= value;
+		}
+	}
+	return out;
+}
+
+type Stop = [number, string, number?];
+
+function GradStops({ stops }: { stops: Stop[] }) {
+	return (
+		<>
+			{stops.map(([offset, color, opacity], i) => (
+				<stop key={i} offset={offset} stopColor={color} stopOpacity={opacity} />
+			))}
+		</>
+	);
+}
+
+function LGrad({
+	id,
+	stops,
+	...rest
+}: { id: string; stops: Stop[] } & SVGProps<SVGLinearGradientElement>) {
+	return (
+		<linearGradient id={id} x1="0" y1="0" x2="0" y2="1" {...rest}>
+			<GradStops stops={stops} />
+		</linearGradient>
+	);
+}
+
+function RGrad({
+	id,
+	stops,
+	...rest
+}: { id: string; stops: Stop[] } & SVGProps<SVGRadialGradientElement>) {
+	return (
+		<radialGradient id={id} {...rest}>
+			<GradStops stops={stops} />
+		</radialGradient>
+	);
+}
+
+function HazeDef({ id, color, opacity }: { id: string; color: string; opacity: number }) {
+	return (
+		<LGrad
+			id={id}
+			stops={[
+				[0, color, 0],
+				[0.55, color, opacity],
+				[1, color, 0],
+			]}
+		/>
+	);
+}
+
+const Haze = ({ id }: { id: string }) => (
+	<rect x="0" y="430" width="500" height="80" fill={`url(#${id})`} />
+);
+
+const Sea = ({ id }: { id: string }) => (
+	<rect x="0" y={HZ} width="500" height="190" fill={`url(#${id})`} />
+);
+
+const HorizonLine = ({ color, opacity }: { color: string; opacity: number }) => (
+	<line x1="0" y1={HZ} x2="500" y2={HZ} stroke={color} strokeOpacity={opacity} />
+);
+
+const Glints = ({ color }: { color: string }) => (
+	<g>
+		<use href="#cover-glints" color={color} />
+	</g>
+);
+
+function Figure({ x, h = 14, w = 3 }: { x: number; h?: number; w?: number }) {
+	const y = HZ - h;
+	return (
+		<>
+			<rect x={f(x - w / 2)} y={y} width={w} height={h} rx={w / 2} fill="#020203" />
+			<circle cx={x} cy={f(y - 1.6)} r={f(w * 0.78)} fill="#020203" />
+		</>
+	);
+}
+
+function Stone({ x, h = 12, w = 4 }: { x: number; h?: number; w?: number }) {
+	return (
+		<path
+			d={`M${f(x - w / 2)} ${HZ} L${f(x - w / 2 + 0.6)} ${f(HZ - h)} L${f(x + w / 2 - 0.6)} ${f(HZ - h + 1)} L${f(x + w / 2)} ${HZ} Z`}
+			fill="#020203"
+		/>
+	);
+}
+
+function Stars({
+	seed,
+	color,
+	n,
+	yMin = 36,
+	yMax = 360,
+}: {
+	seed: number;
+	color: string;
+	n: number;
+	yMin?: number;
+	yMax?: number;
+}) {
+	const r = mulberry32(seed);
+	const items: ReactNode[] = [];
+	for (let i = 0; i < n; i++) {
+		const x = f(18 + r() * 464);
+		const y = f(yMin + r() * (yMax - yMin));
+		const rad = f(0.6 + r() * 1.0);
+		const o = f(0.08 + r() * 0.22);
+		items.push(<circle key={i} cx={x} cy={y} r={rad} fill={color} opacity={o} />);
+	}
+	return <>{items}</>;
+}
+
+const GLINT_ROWS: Array<[number, number, number, number]> = [
+	[524, 178, 322, 0.5],
+	[531, 118, 252, 0.42],
+	[540, 258, 402, 0.36],
+	[551, 58, 192, 0.3],
+	[561, 298, 458, 0.27],
+	[574, 148, 332, 0.23],
+	[589, 38, 152, 0.19],
+	[603, 228, 412, 0.16],
+	[621, 88, 222, 0.13],
+	[639, 278, 432, 0.1],
+	[661, 138, 302, 0.08],
+	[680, 230, 360, 0.06],
+];
+
+// Shared defs referenced by every cover SVG. Render once per page.
+export function CookbookCoverDefs() {
+	return (
+		<svg width="0" height="0" className="absolute" aria-hidden="true">
+			<defs>
+				<filter id="cover-grain" x="-5%" y="-5%" width="110%" height="110%">
+					<feTurbulence
+						type="fractalNoise"
+						baseFrequency="0.8"
+						numOctaves="2"
+						stitchTiles="stitch"
+					/>
+					<feColorMatrix type="saturate" values="0" />
+					<feComponentTransfer>
+						<feFuncA type="linear" slope="0" intercept="1" />
+					</feComponentTransfer>
+				</filter>
+				<radialGradient id="cover-vig" cx="0.5" cy="0.44" r="0.72">
+					<stop offset="0.55" stopColor="#000" stopOpacity="0" />
+					<stop offset="1" stopColor="#000" stopOpacity="0.58" />
+				</radialGradient>
+				<g id="cover-glints">
+					{GLINT_ROWS.map(([y, x1, x2, o], i) => (
+						<line
+							key={i}
+							x1={x1}
+							y1={y}
+							x2={x2}
+							y2={y}
+							stroke="currentColor"
+							strokeOpacity={o}
+						/>
+					))}
+				</g>
+				<linearGradient id="cover-softxg" x1="0" y1="0" x2="1" y2="0">
+					<stop offset="0" stopColor="#000" />
+					<stop offset="0.24" stopColor="#fff" />
+					<stop offset="0.76" stopColor="#fff" />
+					<stop offset="1" stopColor="#000" />
+				</linearGradient>
+				<mask id="cover-softx" maskContentUnits="objectBoundingBox">
+					<rect width="1" height="1" fill="url(#cover-softxg)" />
+				</mask>
+			</defs>
+		</svg>
+	);
+}
+
+// A memory orb raining light streams over a violet sea.
+function AiAgentArt() {
+	const r = mulberry32(11);
+	const streams: ReactNode[] = [];
+	for (let i = 0; i < 16; i++) {
+		const x = f(168 + r() * 164);
+		const y1 = f(334 + r() * 24);
+		const y2 = f(y1 + 60 + r() * 120);
+		streams.push(
+			<line
+				key={i}
+				x1={x}
+				y1={y1}
+				x2={x}
+				y2={Math.min(y2, 504)}
+				stroke="url(#c1fall)"
+				strokeOpacity={f(0.35 + r() * 0.5)}
+			/>,
+		);
+	}
+	return (
+		<>
+			<defs>
+				<LGrad
+					id="c1sky"
+					stops={[
+						[0, "#050511"],
+						[0.42, "#120f2c"],
+						[0.74, "#2c2154"],
+						[1, "#4c3a72"],
+					]}
+				/>
+				<RGrad
+					id="c1orb"
+					stops={[
+						[0, "#f4eeff"],
+						[0.5, "#cbb6ef"],
+						[1, "#7f64b5"],
+					]}
+				/>
+				<RGrad
+					id="c1glow"
+					stops={[
+						[0, "#ab8fe8", 0.5],
+						[1, "#ab8fe8", 0],
+					]}
+				/>
+				<LGrad
+					id="c1fall"
+					stops={[
+						[0, "#d4c6f6", 0.55],
+						[1, "#d4c6f6", 0],
+					]}
+					gradientUnits="userSpaceOnUse"
+					x1="0"
+					y1="330"
+					x2="0"
+					y2="505"
+				/>
+				<HazeDef id="c1haze" color="#8d72c4" opacity={0.16} />
+				<LGrad
+					id="c1sea"
+					stops={[
+						[0, "#241a3e"],
+						[0.5, "#0c0918"],
+						[1, "#020204"],
+					]}
+				/>
+				<LGrad
+					id="c1ref"
+					stops={[
+						[0, "#8d72c4", 0.3],
+						[1, "#8d72c4", 0],
+					]}
+				/>
+			</defs>
+			<rect width="500" height="700" fill="url(#c1sky)" />
+			<Stars seed={101} color="#cfc2f0" n={14} />
+			<Haze id="c1haze" />
+			<circle cx="250" cy="268" r="150" fill="url(#c1glow)" />
+			<circle cx="250" cy="268" r="92" fill="none" stroke="#d9cbf8" strokeOpacity="0.22" />
+			<circle cx="250" cy="268" r="118" fill="none" stroke="#d9cbf8" strokeOpacity="0.13" />
+			<circle cx="250" cy="268" r="146" fill="none" stroke="#d9cbf8" strokeOpacity="0.07" />
+			<circle cx="250" cy="268" r="62" fill="url(#c1orb)" />
+			{streams}
+			<Sea id="c1sea" />
+			<rect x="205" y={HZ} width="90" height="150" fill="url(#c1ref)" mask="url(#cover-softx)" />
+			<Glints color="#5d4f86" />
+			<HorizonLine color="#b9a4e6" opacity={0.35} />
+			<Figure x={172} />
+		</>
+	);
+}
+
+// Slabs ascend in an arc from a grounded monolith toward the upper right.
+function WorkspacesArt() {
+	const slabs: Array<[number, number, number, number]> = [
+		[126, 338, 68, 94],
+		[244, 286, 54, 76],
+		[312, 224, 42, 60],
+		[402, 248, 30, 44],
+		[428, 168, 20, 30],
+		[180, 420, 28, 40],
+	];
+	return (
+		<>
+			<defs>
+				<LGrad
+					id="c2sky"
+					stops={[
+						[0, "#030605"],
+						[0.45, "#0e1916"],
+						[0.78, "#233a32"],
+						[1, "#3a5a4a"],
+					]}
+				/>
+				<LGrad
+					id="c2slabglow"
+					stops={[
+						[0, "#bfe6d2", 0],
+						[1, "#bfe6d2", 0.26],
+					]}
+				/>
+				<RGrad
+					id="c2under"
+					stops={[
+						[0, "#9fd6bd", 0.2],
+						[1, "#9fd6bd", 0],
+					]}
+				/>
+				<RGrad
+					id="c2glow"
+					stops={[
+						[0, "#7eae9a", 0.22],
+						[1, "#7eae9a", 0],
+					]}
+				/>
+				<HazeDef id="c2haze" color="#6f9b8c" opacity={0.16} />
+				<LGrad
+					id="c2sea"
+					stops={[
+						[0, "#1d322a"],
+						[0.5, "#0a1410"],
+						[1, "#020403"],
+					]}
+				/>
+				<LGrad
+					id="c2ref"
+					stops={[
+						[0, "#5e8d7c", 0.14],
+						[1, "#5e8d7c", 0],
+					]}
+				/>
+			</defs>
+			<rect width="500" height="700" fill="url(#c2sky)" />
+			<Stars seed={202} color="#bfe0d0" n={10} />
+			<Haze id="c2haze" />
+			<circle cx="260" cy="320" r="210" fill="url(#c2glow)" />
+			{slabs.map(([x, y, w, h], i) => {
+				const cx = f(x + w / 2);
+				return (
+					<g key={i}>
+						<ellipse
+							cx={cx}
+							cy={f(y + h + 9)}
+							rx={f(w * 0.72)}
+							ry="6.5"
+							fill="url(#c2under)"
+						/>
+						<rect
+							x={x}
+							y={y}
+							width={w}
+							height={h}
+							fill="#071009"
+							stroke="#9fc6b4"
+							strokeOpacity="0.34"
+						/>
+						<rect
+							x={x + 1}
+							y={f(y + h - h * 0.4)}
+							width={w - 2}
+							height={f(h * 0.4 - 1)}
+							fill="url(#c2slabglow)"
+						/>
+						<line
+							x1={x}
+							y1={f(y + h - 0.5)}
+							x2={x + w}
+							y2={f(y + h - 0.5)}
+							stroke="#cfeede"
+							strokeOpacity="0.6"
+						/>
+						<circle
+							cx={f(x + w * 0.74)}
+							cy={f(y + h * 0.2)}
+							r={f(Math.max(1.5, w * 0.04))}
+							fill="#d8f2e4"
+							opacity="0.9"
+						/>
+					</g>
+				);
+			})}
+			<rect x="92" y="444" width="16" height="66" fill="#040806" />
+			<line x1="92.5" y1="444" x2="92.5" y2="510" stroke="#a9cfbd" strokeOpacity="0.4" />
+			<line x1="92" y1="444.5" x2="108" y2="444.5" stroke="#cfeede" strokeOpacity="0.5" />
+			<Sea id="c2sea" />
+			<rect x="80" y={HZ} width="340" height="140" fill="url(#c2ref)" mask="url(#cover-softx)" />
+			<Glints color="#3e5f55" />
+			<HorizonLine color="#9fc6b4" opacity={0.3} />
+			<Stone x={440} h={10} w={3.5} />
+		</>
+	);
+}
+
+// Broadcast ripple rings with member dots over a teal sea.
+function ChatRoomArt() {
+	const cx = 250;
+	const cy = 396;
+	const rings: Array<[number, number]> = [
+		[38, 0.5],
+		[76, 0.33],
+		[122, 0.2],
+		[176, 0.12],
+		[240, 0.07],
+	];
+	const dots: Array<[number, number, number]> = [
+		[76, 205, 3.4],
+		[76, 332, 3],
+		[122, 158, 3],
+		[122, 22, 3.6],
+		[122, 262, 2.6],
+		[38, 120, 2.4],
+		[176, 196, 2.6],
+		[176, 348, 2.2],
+	];
+	const ripples: Array<[number, number, number]> = [
+		[46, 7, 0.28],
+		[90, 13, 0.16],
+		[150, 22, 0.09],
+	];
+	return (
+		<>
+			<defs>
+				<LGrad
+					id="c3sky"
+					stops={[
+						[0, "#02070a"],
+						[0.45, "#062028"],
+						[0.78, "#0d4049"],
+						[1, "#136066"],
+					]}
+				/>
+				<RGrad
+					id="c3glow"
+					stops={[
+						[0, "#6fe0d4", 0.5],
+						[1, "#6fe0d4", 0],
+					]}
+				/>
+				<HazeDef id="c3haze" color="#4fb3a8" opacity={0.13} />
+				<LGrad
+					id="c3sea"
+					stops={[
+						[0, "#0b3a40"],
+						[0.45, "#062023"],
+						[1, "#010404"],
+					]}
+				/>
+				<LGrad
+					id="c3ref"
+					stops={[
+						[0, "#4fb3a8", 0.25],
+						[1, "#4fb3a8", 0],
+					]}
+				/>
+			</defs>
+			<rect width="500" height="700" fill="url(#c3sky)" />
+			<Stars seed={303} color="#bdebe4" n={8} />
+			<Haze id="c3haze" />
+			{rings.map(([r, o], i) => (
+				<circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke="#9fe8df" strokeOpacity={o} />
+			))}
+			<circle cx={cx} cy={cy} r="64" fill="url(#c3glow)" />
+			<circle cx={cx} cy={cy} r="5" fill="#d8f5f2" />
+			{dots.map(([rr, a, rad], i) => {
+				const [x, y] = polar(cx, cy, rr, a);
+				return <circle key={i} cx={x} cy={y} r={rad} fill="#cdf2ec" opacity="0.9" />;
+			})}
+			<Sea id="c3sea" />
+			<rect x="218" y={HZ} width="64" height="120" fill="url(#c3ref)" mask="url(#cover-softx)" />
+			{ripples.map(([rx, ry, o], i) => (
+				<ellipse
+					key={i}
+					cx="250"
+					cy="548"
+					rx={rx}
+					ry={ry}
+					fill="none"
+					stroke="#58c4b8"
+					strokeOpacity={o}
+				/>
+			))}
+			<Glints color="#2a6a64" />
+			<HorizonLine color="#7fd8cd" opacity={0.3} />
+			<Stone x={142} h={9} w={3} />
+			<Stone x={150} h={13} w={4} />
+			<Stone x={159} h={10} w={3} />
+		</>
+	);
+}
+
+// Rays from every collaborator converge on a single glowing caret.
+function CollabEditorArt() {
+	const pt: [number, number] = [250, 504];
+	const edges: Array<[number, number]> = [];
+	for (let x = 16; x <= 484; x += 52) edges.push([x, 0]);
+	for (let y = 120; y <= 460; y += 85) {
+		edges.push([0, y]);
+		edges.push([500, y]);
+	}
+	return (
+		<>
+			<defs>
+				<LGrad
+					id="c4sky"
+					stops={[
+						[0, "#060302"],
+						[0.45, "#170a06"],
+						[0.78, "#33110a"],
+						[1, "#531d0b"],
+					]}
+				/>
+				<RGrad
+					id="c4ray"
+					stops={[
+						[0, "#ffd2b3", 0.85],
+						[0.16, "#ff7a3a", 0.3],
+						[0.5, "#ff5a18", 0.08],
+						[1, "#ff5a18", 0],
+					]}
+					gradientUnits="userSpaceOnUse"
+					cx="250"
+					cy="504"
+					r="520"
+				/>
+				<RGrad
+					id="c4glow1"
+					stops={[
+						[0, "#FF4500", 0.5],
+						[1, "#FF4500", 0],
+					]}
+				/>
+				<RGrad
+					id="c4glow2"
+					stops={[
+						[0, "#ff6a22", 0.6],
+						[1, "#ff6a22", 0],
+					]}
+				/>
+				<HazeDef id="c4haze" color="#c9521f" opacity={0.14} />
+				<LGrad
+					id="c4sea"
+					stops={[
+						[0, "#2b1009"],
+						[0.5, "#100604"],
+						[1, "#020101"],
+					]}
+				/>
+				<LGrad
+					id="c4ref"
+					stops={[
+						[0, "#FF4500", 0.32],
+						[1, "#FF4500", 0],
+					]}
+				/>
+			</defs>
+			<rect width="500" height="700" fill="url(#c4sky)" />
+			<Haze id="c4haze" />
+			{edges.map(([x, y], i) => (
+				<line key={i} x1={x} y1={y} x2={pt[0]} y2={pt[1]} stroke="url(#c4ray)" />
+			))}
+			<circle cx="250" cy="504" r="140" fill="url(#c4glow1)" />
+			<circle cx="250" cy="504" r="56" fill="url(#c4glow2)" />
+			<circle cx="250" cy="504" r="5.5" fill="#ffe6d6" />
+			<line x1="250" y1="438" x2="250" y2="500" stroke="#ffe9da" strokeWidth="2" strokeOpacity="0.95" />
+			<line x1="244" y1="438" x2="256" y2="438" stroke="#ffe9da" strokeOpacity="0.7" />
+			<Sea id="c4sea" />
+			<rect x="186" y={HZ} width="128" height="160" fill="url(#c4ref)" mask="url(#cover-softx)" />
+			<line x1="216" y1="523" x2="288" y2="523" stroke="#ff6a2a" strokeOpacity="0.5" />
+			<line x1="196" y1="532" x2="262" y2="532" stroke="#ff6a2a" strokeOpacity="0.32" />
+			<line x1="232" y1="544" x2="312" y2="544" stroke="#ff6a2a" strokeOpacity="0.2" />
+			<Glints color="#4f2517" />
+			<HorizonLine color="#ff9a66" opacity={0.35} />
+			<Figure x={118} h={13} />
+			<Figure x={376} h={12} />
+		</>
+	);
+}
+
+// A half-risen dial sun with tick marks burning on the horizon.
+function CronArt() {
+	const cx = 250;
+	const cy = 512;
+	const ticks: ReactNode[] = [];
+	for (let a = 184; a <= 356; a += 4) {
+		const major = a % 20 === 0;
+		const r1 = major ? 108 : 114;
+		const r2 = major ? 130 : 123;
+		const [x1, y1] = polar(cx, cy, r1, a);
+		const [x2, y2] = polar(cx, cy, r2, a);
+		ticks.push(
+			<line
+				key={a}
+				x1={x1}
+				y1={y1}
+				x2={x2}
+				y2={y2}
+				stroke="#ffb88a"
+				strokeOpacity={major ? 0.8 : 0.42}
+				strokeWidth={major ? 1.6 : 1}
+			/>,
+		);
+	}
+	const [hx1, hy1] = polar(cx, cy, 104, 305);
+	const [hx2, hy2] = polar(cx, cy, 142, 305);
+	const stoneXs = [55, 120, 185, 250, 315, 380, 445];
+	return (
+		<>
+			<defs>
+				<LGrad
+					id="c5sky"
+					stops={[
+						[0, "#090301"],
+						[0.4, "#1f0a03"],
+						[0.72, "#3f1605"],
+						[1, "#6b2708"],
+					]}
+				/>
+				<RGrad
+					id="c5glow"
+					stops={[
+						[0, "#ff5a14", 0.5],
+						[0.5, "#ff5a14", 0.16],
+						[1, "#ff5a14", 0],
+					]}
+				/>
+				<RGrad
+					id="c5sun"
+					stops={[
+						[0, "#ffc089"],
+						[0.35, "#ff7a2e"],
+						[0.7, "#FF4500"],
+						[1, "#d83800"],
+					]}
+				/>
+				<HazeDef id="c5haze" color="#ff7a30" opacity={0.15} />
+				<LGrad
+					id="c5sea"
+					stops={[
+						[0, "#3a1404"],
+						[0.5, "#150703"],
+						[1, "#030101"],
+					]}
+				/>
+				<LGrad
+					id="c5ref"
+					stops={[
+						[0, "#FF4500", 0.38],
+						[1, "#FF4500", 0],
+					]}
+				/>
+			</defs>
+			<rect width="500" height="700" fill="url(#c5sky)" />
+			<Haze id="c5haze" />
+			<circle cx={cx} cy={cy} r="230" fill="url(#c5glow)" />
+			{ticks}
+			<circle cx={cx} cy={cy} r="90" fill="url(#c5sun)" />
+			<line x1={hx1} y1={hy1} x2={hx2} y2={hy2} stroke="#ffe2c8" strokeWidth="2.2" strokeOpacity="0.95" />
+			<Sea id="c5sea" />
+			<rect x="178" y={HZ} width="144" height="170" fill="url(#c5ref)" mask="url(#cover-softx)" />
+			<line x1="206" y1="524" x2="298" y2="524" stroke="#ff7a30" strokeOpacity="0.6" />
+			<line x1="186" y1="534" x2="266" y2="534" stroke="#ff7a30" strokeOpacity="0.42" />
+			<line x1="224" y1="548" x2="316" y2="548" stroke="#ff7a30" strokeOpacity="0.28" />
+			<line x1="204" y1="566" x2="284" y2="566" stroke="#ff7a30" strokeOpacity="0.16" />
+			<Glints color="#6e3413" />
+			<HorizonLine color="#ffb27d" opacity={0.4} />
+			{stoneXs.map((x, i) => (
+				<Stone key={x} x={x} h={9 + (i % 3) * 2.5} w={3.6} />
+			))}
+		</>
+	);
+}
+
+// A constellation of dart cursors with trails in a slate blue sky.
+function CursorsArt() {
+	const darts: Array<[number, number, number, number, number]> = [
+		[140, 252, -32, 1.1, 0.9],
+		[305, 224, 42, 0.9, 0.72],
+		[228, 332, 12, 1.35, 0.95],
+		[352, 318, -16, 0.8, 0.6],
+		[96, 350, 56, 0.7, 0.5],
+		[262, 410, -52, 0.9, 0.7],
+		[180, 434, 26, 0.62, 0.45],
+		[398, 402, 16, 0.62, 0.4],
+		[320, 462, -30, 0.5, 0.35],
+	];
+	const links: Array<[number, number, number, number]> = [
+		[140, 252, 305, 224],
+		[228, 332, 140, 252],
+		[228, 332, 352, 318],
+		[262, 410, 228, 332],
+	];
+	return (
+		<>
+			<defs>
+				<path id="c6d" d="M0 -8 L5 4 L0 8 L-5 4 Z" fill="#dbe6f7" />
+				<LGrad
+					id="c6sky"
+					stops={[
+						[0, "#02060e"],
+						[0.45, "#091324"],
+						[0.78, "#142b46"],
+						[1, "#1d3f63"],
+					]}
+				/>
+				<HazeDef id="c6haze" color="#6f93c4" opacity={0.14} />
+				<LGrad
+					id="c6sea"
+					stops={[
+						[0, "#15293f"],
+						[0.5, "#081220"],
+						[1, "#010204"],
+					]}
+				/>
+				<LGrad
+					id="c6ref"
+					stops={[
+						[0, "#4c7099", 0.12],
+						[1, "#4c7099", 0],
+					]}
+				/>
+			</defs>
+			<rect width="500" height="700" fill="url(#c6sky)" />
+			<Stars seed={606} color="#cddcf2" n={14} />
+			<Haze id="c6haze" />
+			<circle cx="74" cy="272" r="15" fill="#cfdcef" opacity="0.13" />
+			<circle cx="74" cy="272" r="15" fill="none" stroke="#cfdcef" strokeOpacity="0.26" />
+			{links.map(([x1, y1, x2, y2], i) => (
+				<line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#8fb0da" strokeOpacity="0.17" />
+			))}
+			{darts.map(([x, y, rot, s, o], i) => {
+				const a = ((rot + 90) * Math.PI) / 180;
+				const len = 26 + s * 30;
+				const tx1 = f(x + Math.cos(a) * 9 * s);
+				const ty1 = f(y + Math.sin(a) * 9 * s);
+				const tx2 = f(x + Math.cos(a) * (9 * s + len));
+				const ty2 = f(y + Math.sin(a) * (9 * s + len));
+				return (
+					<line
+						key={i}
+						x1={tx1}
+						y1={ty1}
+						x2={tx2}
+						y2={ty2}
+						stroke="#b9cdf0"
+						strokeOpacity={f(o * 0.35)}
+					/>
+				);
+			})}
+			{darts.map(([x, y, rot, s, o], i) => (
+				<use
+					key={i}
+					href="#c6d"
+					transform={`translate(${x} ${y}) rotate(${rot}) scale(${s})`}
+					opacity={o}
+				/>
+			))}
+			<Sea id="c6sea" />
+			<rect x="80" y={HZ} width="340" height="130" fill="url(#c6ref)" mask="url(#cover-softx)" />
+			<Glints color="#31506f" />
+			<HorizonLine color="#9db8dd" opacity={0.3} />
+			<Figure x={296} h={13} />
+		</>
+	);
+}
+
+// A ringed sphere with a moon over a perspective grid plain.
+function GameArt() {
+	const horiz: Array<[number, number]> = [
+		[514, 0.35],
+		[521, 0.3],
+		[531, 0.26],
+		[545, 0.22],
+		[564, 0.18],
+		[590, 0.14],
+		[624, 0.11],
+		[668, 0.08],
+	];
+	const radial = [-140, -40, 40, 120, 200, 250, 300, 380, 460, 540, 640];
+	return (
+		<>
+			<defs>
+				<LGrad
+					id="c7sky"
+					stops={[
+						[0, "#070311"],
+						[0.45, "#150b26"],
+						[0.78, "#2a1542"],
+						[1, "#3d1f58"],
+					]}
+				/>
+				<RGrad
+					id="c7sph"
+					stops={[
+						[0, "#efe6fa"],
+						[0.45, "#b79ddc"],
+						[1, "#6a4d96"],
+					]}
+				/>
+				<RGrad
+					id="c7glow"
+					stops={[
+						[0, "#9b78cf", 0.32],
+						[1, "#9b78cf", 0],
+					]}
+				/>
+				<LGrad
+					id="c7gnd"
+					stops={[
+						[0, "#1c0f2e"],
+						[0.5, "#0d0718"],
+						[1, "#020104"],
+					]}
+				/>
+				<HazeDef id="c7haze" color="#9b78cf" opacity={0.15} />
+			</defs>
+			<rect width="500" height="700" fill="url(#c7sky)" />
+			<Stars seed={707} color="#d8c8ef" n={12} />
+			<Haze id="c7haze" />
+			<circle cx="250" cy="308" r="110" fill="url(#c7glow)" />
+			<circle cx="250" cy="308" r="42" fill="url(#c7sph)" />
+			<g transform="rotate(-16 250 308)">
+				<ellipse
+					cx="250"
+					cy="308"
+					rx="84"
+					ry="22"
+					fill="none"
+					stroke="#d4bff0"
+					strokeOpacity="0.5"
+					strokeWidth="1.2"
+				/>
+				<ellipse cx="250" cy="308" rx="118" ry="32" fill="none" stroke="#d4bff0" strokeOpacity="0.2" />
+				<circle cx="153.4" cy="289.7" r="7" fill="#d4bff0" opacity="0.25" />
+				<circle cx="153.4" cy="289.7" r="3.4" fill="#f0e6fb" opacity="0.95" />
+			</g>
+			<rect x="0" y={HZ} width="500" height="190" fill="url(#c7gnd)" />
+			{horiz.map(([y, o], i) => (
+				<line key={i} x1="0" y1={y} x2="500" y2={y} stroke="#8a63bd" strokeOpacity={o} />
+			))}
+			{radial.map((x, i) => (
+				<line key={i} x1="250" y1={HZ} x2={x} y2="700" stroke="#8a63bd" strokeOpacity="0.12" />
+			))}
+			<HorizonLine color="#b993e0" opacity={0.35} />
+			<Stone x={150} h={20} w={5} />
+			<Stone x={342} h={16} w={4} />
+		</>
+	);
+}
+
+// Five identical sealed vaults, each under its own beam of light.
+function TenantsArt() {
+	const centers = [90, 170, 250, 330, 410];
+	return (
+		<>
+			<defs>
+				<LGrad
+					id="c8sky"
+					stops={[
+						[0, "#020407"],
+						[0.5, "#0a121b"],
+						[0.82, "#16222e"],
+						[1, "#243747"],
+					]}
+				/>
+				<LGrad
+					id="c8band"
+					stops={[
+						[0, "#8fb4d0", 0],
+						[0.7, "#8fb4d0", 0.22],
+						[1, "#8fb4d0", 0.3],
+					]}
+				/>
+				<LGrad
+					id="c8beam"
+					stops={[
+						[0, "#a8c8e0", 0],
+						[1, "#a8c8e0", 0.12],
+					]}
+				/>
+				<HazeDef id="c8haze" color="#7fa2bd" opacity={0.13} />
+				<LGrad
+					id="c8sea"
+					stops={[
+						[0, "#16242f"],
+						[0.5, "#08111a"],
+						[1, "#010203"],
+					]}
+				/>
+				<LGrad
+					id="c8ref"
+					stops={[
+						[0, "#5e7c93", 0.18],
+						[1, "#5e7c93", 0],
+					]}
+				/>
+			</defs>
+			<rect width="500" height="700" fill="url(#c8sky)" />
+			<Stars seed={808} color="#c8d8e8" n={14} />
+			<Haze id="c8haze" />
+			<rect x="0" y="436" width="500" height="74" fill="url(#c8band)" />
+			{centers.map((cx) => (
+				<rect
+					key={cx}
+					x={cx - 13}
+					y="206"
+					width="26"
+					height="184"
+					fill="url(#c8beam)"
+					mask="url(#cover-softx)"
+				/>
+			))}
+			{centers.map((cx) => {
+				const x = cx - 16;
+				return (
+					<g key={cx}>
+						<rect x={x} y="388" width="32" height="122" fill="#03060a" />
+						<line x1={x + 0.5} y1="388" x2={x + 0.5} y2="510" stroke="#b9d2e4" strokeOpacity="0.4" />
+						<line x1={x} y1="388.5" x2={x + 32} y2="388.5" stroke="#b9d2e4" strokeOpacity="0.55" />
+						<line x1={x + 4} y1="428" x2={x + 28} y2="428" stroke="#b9d2e4" strokeOpacity="0.16" />
+					</g>
+				);
+			})}
+			<Sea id="c8sea" />
+			{centers.map((cx) => (
+				<rect
+					key={cx}
+					x={cx - 14}
+					y={HZ}
+					width="28"
+					height="80"
+					fill="url(#c8ref)"
+					mask="url(#cover-softx)"
+				/>
+			))}
+			<Glints color="#2c4254" />
+			<HorizonLine color="#9fbdd4" opacity={0.35} />
+		</>
+	);
+}
+
+const FALLBACK_PALETTES = [
+	{
+		sky: [
+			[0, "#050b11"],
+			[0.45, "#0c1c28"],
+			[0.78, "#173448"],
+			[1, "#22506b"],
+		] as Stop[],
+		body: "#9cc4de",
+		glow: "#7fb2d4",
+		haze: "#6f9cc4",
+		sea: [
+			[0, "#13283a"],
+			[0.5, "#071420"],
+			[1, "#010204"],
+		] as Stop[],
+		glint: "#2e4f6b",
+		horizon: "#9dc1dd",
+	},
+	{
+		sky: [
+			[0, "#0a0508"],
+			[0.45, "#1d0d18"],
+			[0.78, "#3a1a30"],
+			[1, "#5b2a48"],
+		] as Stop[],
+		body: "#e0a8c8",
+		glow: "#c486ab",
+		haze: "#b07697",
+		sea: [
+			[0, "#311527"],
+			[0.5, "#130810"],
+			[1, "#030102"],
+		] as Stop[],
+		glint: "#5e3049",
+		horizon: "#dba4c4",
+	},
+	{
+		sky: [
+			[0, "#0b0903"],
+			[0.45, "#1f1a08"],
+			[0.78, "#3d3411"],
+			[1, "#5e511c"],
+		] as Stop[],
+		body: "#e6d49a",
+		glow: "#cdb878",
+		haze: "#b3a065",
+		sea: [
+			[0, "#2e2810"],
+			[0.5, "#120f06"],
+			[1, "#020201"],
+		] as Stop[],
+		glint: "#5c5126",
+		horizon: "#dccb93",
+	},
+	{
+		sky: [
+			[0, "#040810"],
+			[0.45, "#0d1430"],
+			[0.78, "#1b2756"],
+			[1, "#2c3c7a"],
+		] as Stop[],
+		body: "#aebcf0",
+		glow: "#8d9fdd",
+		haze: "#7c8cc8",
+		sea: [
+			[0, "#18204a"],
+			[0.5, "#0a0d20"],
+			[1, "#020205"],
+		] as Stop[],
+		glint: "#36406e",
+		horizon: "#a9b8ea",
+	},
+];
+
+function hashSlug(slug: string): number {
+	let h = 0;
+	for (let i = 0; i < slug.length; i++) {
+		h = (h * 31 + slug.charCodeAt(i)) | 0;
+	}
+	return Math.abs(h);
+}
+
+// Generic floating orb scene for entries without bespoke artwork.
+function FallbackArt({ slug }: { slug: string }) {
+	const hash = hashSlug(slug);
+	const palette = FALLBACK_PALETTES[hash % FALLBACK_PALETTES.length];
+	const id = (part: string) => `fb-${slug}-${part}`;
+	return (
+		<>
+			<defs>
+				<LGrad id={id("sky")} stops={palette.sky} />
+				<RGrad
+					id={id("orb")}
+					stops={[
+						[0, "#ffffff"],
+						[0.5, palette.body],
+						[1, palette.glow],
+					]}
+				/>
+				<RGrad
+					id={id("glow")}
+					stops={[
+						[0, palette.glow, 0.45],
+						[1, palette.glow, 0],
+					]}
+				/>
+				<HazeDef id={id("haze")} color={palette.haze} opacity={0.15} />
+				<LGrad id={id("sea")} stops={palette.sea} />
+				<LGrad
+					id={id("ref")}
+					stops={[
+						[0, palette.haze, 0.26],
+						[1, palette.haze, 0],
+					]}
+				/>
+			</defs>
+			<rect width="500" height="700" fill={`url(#${id("sky")})`} />
+			<Stars seed={hash % 9973} color={palette.body} n={12} />
+			<Haze id={id("haze")} />
+			<circle cx="250" cy="284" r="140" fill={`url(#${id("glow")})`} />
+			<circle cx="250" cy="284" r="96" fill="none" stroke={palette.body} strokeOpacity="0.2" />
+			<circle cx="250" cy="284" r="128" fill="none" stroke={palette.body} strokeOpacity="0.1" />
+			<circle cx="250" cy="284" r="54" fill={`url(#${id("orb")})`} />
+			<Sea id={id("sea")} />
+			<rect
+				x="200"
+				y={HZ}
+				width="100"
+				height="140"
+				fill={`url(#${id("ref")})`}
+				mask="url(#cover-softx)"
+			/>
+			<Glints color={palette.glint} />
+			<HorizonLine color={palette.horizon} opacity={0.32} />
+			<Figure x={(hash % 280) + 110} h={13} />
+		</>
+	);
+}
+
+const COVER_ART: Record<string, () => ReactNode> = {
+	"ai-agent": AiAgentArt,
+	"ai-agent-workspace": WorkspacesArt,
+	"chat-room": ChatRoomArt,
+	"collaborative-text-editor": CollabEditorArt,
+	"cron-jobs": CronArt,
+	"live-cursors": CursorsArt,
+	"multiplayer-game": GameArt,
+	"per-tenant-database": TenantsArt,
+};
+
+function RivetMark({ className }: { className?: string }) {
+	return (
+		<svg
+			viewBox="0 0 128 128"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+			className={className}
+		>
+			<rect x="18.25" y="18.25" width="91.5" height="91.5" rx="25.75" stroke="#F0F0F0" strokeWidth="8.5" />
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M57.694 43.098c0-.622-.505-1.126-1.127-1.126h-8.444a5.114 5.114 0 0 0-5.112 5.111v33.824a5.114 5.114 0 0 0 5.112 5.112h8.444c.622 0 1.127-.505 1.127-1.127V43.098Zm24.424 27.869c-1.238-2.222-4.047-4.026-6.27-4.026H62.923c-.684 0-.93.555-.549 1.239l7.703 13.822c1.239 2.223 4.048 4.026 6.27 4.026h12.927c.683 0 .93-.555.548-1.239l-7.703-13.822Zm.538-18.718c0-5.672-4.605-10.277-10.277-10.277H63.31a1.21 1.21 0 0 0-1.209 1.209v18.137c0 .667.542 1.209 1.21 1.209h9.068c5.672 0 10.277-4.605 10.277-10.278Z"
+				fill="#F0F0F0"
+			/>
+		</svg>
+	);
+}
+
+export interface CookbookCoverProps {
+	slug: string;
+	title: string;
+	numeral: string;
+}
+
+// Renders the full poster inside a parent that must be `relative`,
+// `overflow-hidden`, sized to aspect 5/7, have `container-type: inline-size`,
+// and carry the `group` class for the hover treatment.
+export function CookbookCover({ slug, title, numeral }: CookbookCoverProps) {
+	const Art = COVER_ART[slug];
+	const longTitle = title.length > 18;
+	return (
+		<>
+			<svg
+				viewBox="0 0 500 700"
+				preserveAspectRatio="xMidYMid slice"
+				aria-hidden="true"
+				className="absolute inset-0 block h-full w-full transition-transform duration-700 group-hover:scale-[1.03]"
+			>
+				{Art ? <Art /> : <FallbackArt slug={slug} />}
+				<rect width="500" height="700" fill="url(#cover-vig)" />
+				<rect
+					width="500"
+					height="700"
+					filter="url(#cover-grain)"
+					style={{ mixBlendMode: "overlay", opacity: 0.38 }}
+				/>
+				<rect
+					width="500"
+					height="700"
+					filter="url(#cover-grain)"
+					style={{ mixBlendMode: "screen", opacity: 0.05 }}
+				/>
+			</svg>
+			<div className="pointer-events-none absolute inset-x-0 top-0 px-[7cqw] pt-[11cqw] text-center">
+				<div aria-hidden="true" className="mb-[3.6cqw] flex items-center justify-center gap-[3cqw]">
+					<span className="h-px w-[7cqw] bg-[#ece9e2]/35" />
+					<span
+						className="text-[3.4cqw] tracking-[0.28em] text-[#ece9e2]/[0.66]"
+						style={{ fontFamily: COVER_SERIF }}
+					>
+						{numeral}
+					</span>
+					<span className="h-px w-[7cqw] bg-[#ece9e2]/35" />
+				</div>
+				<h2
+					className={`${longTitle ? "text-[6.3cqw]" : "text-[7.4cqw]"} font-normal uppercase leading-[1.24] tracking-[0.13em] text-[#EDEAE3] [text-wrap:balance]`}
+					style={{
+						fontFamily: COVER_SERIF,
+						textShadow: "0 2px 22px rgba(0,0,0,0.55), 0 0 6px rgba(0,0,0,0.3)",
+					}}
+				>
+					{title}
+				</h2>
+			</div>
+			<div className="pointer-events-none absolute inset-x-0 bottom-[6cqw] flex justify-center opacity-[0.72]">
+				<RivetMark className="h-auto w-[9cqw]" />
+			</div>
+		</>
+	);
+}
diff --git a/website/src/components/cookbook/CookbookPageContent.tsx b/website/src/components/cookbook/CookbookPageContent.tsx
index 9525128069..0946b54337 100644
--- a/website/src/components/cookbook/CookbookPageContent.tsx
+++ b/website/src/components/cookbook/CookbookPageContent.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { TECHNOLOGIES, TAGS } from "@/data/templates/shared";
 import { CookbookCard, type CookbookPageCardData } from "./CookbookCard";
+import { CookbookCoverDefs, COVER_SERIF, toRoman } from "./CookbookCover";
 
 export interface CookbookPageListItem extends CookbookPageCardData {
 	tags: string[];
@@ -108,15 +109,26 @@ export function CookbookPageContent({ pages, allTags, allTechnologies }: Cookboo
 
 	const hasActiveFilters = selectedTags.length > 0 || selectedTechnologies.length > 0 || searchQuery.trim().length > 0;
 
+	// Numerals come from the full alphabetical list so filtering never renumbers covers.
+	const numerals = useMemo(
+		() => new Map(pages.map((p, i) => [p.slug, toRoman(i + 1)])),
+		[pages],
+	);
+
 	const toggle = (list: string[], setList: (v: string[]) => void, item: string) => {
 		setList(list.includes(item) ? list.filter((x) => x !== item) : [...list, item]);
 	};
 
 	return (
 		<div className="min-h-screen bg-black">
+			<CookbookCoverDefs />
 			<div className="relative overflow-hidden pb-12 pt-32 md:pt-48">
-				<div className="mx-auto max-w-4xl px-6">
-					<h1 className="mb-6 text-4xl font-normal leading-[1.1] tracking-tight text-white md:text-6xl">
+				<div className="mx-auto max-w-7xl px-6">
+					<p className="mb-4 text-[11px] uppercase tracking-[0.32em] text-zinc-500">Rivet</p>
+					<h1
+						className="mb-6 text-5xl font-normal leading-[1.05] tracking-[0.01em] text-[#ece9e2] md:text-6xl"
+						style={{ fontFamily: COVER_SERIF }}
+					>
 						Cookbooks
 					</h1>
 					<p className="mb-8 text-base leading-relaxed text-zinc-500 max-w-xl">
@@ -126,7 +138,7 @@ export function CookbookPageContent({ pages, allTags, allTechnologies }: Cookboo
 			</div>
 
 			<div className="border-t border-white/10 py-12">
-				<div className="mx-auto max-w-4xl px-6">
+				<div className="mx-auto max-w-7xl px-6">
 					<div className="mb-8 space-y-4">
 						<div className="max-w-sm mx-auto">
 							<SearchInput value={searchQuery} onChange={setSearchQuery} />
@@ -169,9 +181,9 @@ export function CookbookPageContent({ pages, allTags, allTechnologies }: Cookboo
 					{filteredPages.length === 0 ? (
 						<div className="text-center py-12 text-zinc-400">No guides found matching your filters</div>
 					) : (
-						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-6">
 							{filteredPages.map((page) => (
-								<CookbookCard key={page.href} page={page} />
+								<CookbookCard key={page.href} page={page} numeral={numerals.get(page.slug) ?? ""} />
 							))}
 						</div>
 					)}
diff --git a/website/src/pages/cookbook/index.astro b/website/src/pages/cookbook/index.astro
index 269f6fee1f..345f376081 100644
--- a/website/src/pages/cookbook/index.astro
+++ b/website/src/pages/cookbook/index.astro
@@ -30,6 +30,7 @@ const pages: CookbookPageListItem[] = cookbook
 		).sort();
 
 		return {
+			slug: cleanId,
 			title: entry.data.title,
 			description: entry.data.description,
 			href,
diff --git a/website/src/styles/fonts.css b/website/src/styles/fonts.css
index 90175707f1..76fdf5247d 100644
--- a/website/src/styles/fonts.css
+++ b/website/src/styles/fonts.css
@@ -89,7 +89,7 @@
 	font-family: "Perfectly Nineties";
 	src: url("/fonts/perfectly-nineties/PerfectlyNineties-Black.otf")
 		format("truetype");
-	font-weight: normal;
+	font-weight: 900;
 	font-style: normal;
 }
 
@@ -97,7 +97,7 @@
 	font-family: "Perfectly Nineties";
 	src: url("/fonts/perfectly-nineties/PerfectlyNineties-BlackItalic.otf")
 		format("truetype");
-	font-weight: normal;
+	font-weight: 900;
 	font-style: italic;
 }
 
@@ -121,7 +121,7 @@
 	font-family: "Perfectly Nineties";
 	src: url("/fonts/perfectly-nineties/PerfectlyNineties-Extrabold.otf")
 		format("truetype");
-	font-weight: normal;
+	font-weight: 800;
 	font-style: normal;
 }
 
@@ -129,7 +129,7 @@
 	font-family: "Perfectly Nineties";
 	src: url("/fonts/perfectly-nineties/PerfectlyNineties-ExtraboldItalic.otf")
 		format("truetype");
-	font-weight: normal;
+	font-weight: 800;
 	font-style: italic;
 }
 
@@ -153,7 +153,7 @@
 	font-family: "Perfectly Nineties";
 	src: url("/fonts/perfectly-nineties/PerfectlyNineties-Semibold.otf")
 		format("truetype");
-	font-weight: normal;
+	font-weight: 600;
 	font-style: normal;
 }
 
@@ -161,7 +161,7 @@
 	font-family: "Perfectly Nineties";
 	src: url("/fonts/perfectly-nineties/PerfectlyNineties-SemiboldItalic.otf")
 		format("truetype");
-	font-weight: normal;
+	font-weight: 600;
 	font-style: italic;
 }
 

From 7710260ba43c6092494f43a9608dc68df9505ad4 Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Thu, 11 Jun 2026 23:57:29 -0700
Subject: [PATCH 12/13] [SLOP(claude-fable-5)] fix(website): correct pool
 configuration SDK snippet and typecheck staging deps

---
 pnpm-lock.yaml                                |  3 +++
 .../scripts/typecheck-staging/package.json    |  1 +
 .../docs/general/pool-configuration.mdx       | 24 +++++++++++--------
 .../src/integrations/typecheck-code-blocks.ts |  7 ++++++
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fcd5151d8c..19d42f2346 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3522,6 +3522,9 @@ importers:
       '@hono/node-server':
         specifier: ^1.14.1
         version: 1.19.9(hono@4.11.9)
+      '@rivetkit/engine-api-full':
+        specifier: workspace:*
+        version: link:../../../engine/sdks/typescript/api-full
       '@rivetkit/react':
         specifier: workspace:*
         version: link:../../../rivetkit-typescript/packages/react
diff --git a/website/scripts/typecheck-staging/package.json b/website/scripts/typecheck-staging/package.json
index cd9515f4de..09f66c0b45 100644
--- a/website/scripts/typecheck-staging/package.json
+++ b/website/scripts/typecheck-staging/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "rivetkit": "workspace:*",
     "@rivetkit/react": "workspace:*",
+    "@rivetkit/engine-api-full": "workspace:*",
     "@ai-sdk/openai": "^3.0.30",
     "ai": "^6.0.92",
     "hono": "^4.7.0",
diff --git a/website/src/content/docs/general/pool-configuration.mdx b/website/src/content/docs/general/pool-configuration.mdx
index 6304f4718c..6a15088d36 100644
--- a/website/src/content/docs/general/pool-configuration.mdx
+++ b/website/src/content/docs/general/pool-configuration.mdx
@@ -18,21 +18,25 @@ Configure a pool via the dashboard, the API directly, or the TypeScript SDK:
 <CodeGroup>
 
 ```typescript SDK
-import { RivetClient } from "rivetkit/client";
+import { RivetClient } from "@rivetkit/engine-api-full";
 
 const rivet = new RivetClient({
-  endpoint: "https://api.rivet.dev",
-  token: process.env.RIVET_TOKEN,
+  environment: "https://api.rivet.dev",
+  token: process.env.RIVET_TOKEN!,
 });
 
-await rivet.runnerConfigs.upsert("default", {
+await rivet.runnerConfigsUpsert("default", {
   namespace: "default",
-  serverless: {
-    url: "https://my-app.example.com/api/rivet",
-    requestLifespan: 60 * 15,
-    actorEvictionDelay: 5,
-    actorEvictionPeriod: 60,
-    actorEvictionRate: 1,
+  datacenters: {
+    "us-east-1": {
+      serverless: {
+        url: "https://my-app.example.com/api/rivet",
+        requestLifespan: 60 * 15,
+        actorEvictionDelay: 5,
+        actorEvictionPeriod: 60,
+        actorEvictionRate: 1,
+      },
+    },
   },
 });
 ```
diff --git a/website/src/integrations/typecheck-code-blocks.ts b/website/src/integrations/typecheck-code-blocks.ts
index 91e9b94b5b..7440f0a483 100644
--- a/website/src/integrations/typecheck-code-blocks.ts
+++ b/website/src/integrations/typecheck-code-blocks.ts
@@ -451,6 +451,13 @@ export function typecheckCodeBlocks(): AstroIntegration {
 							encoding: "utf-8",
 							stdio: ["pipe", "pipe", "pipe"],
 						});
+						// Build the engine API SDK directly with pnpm instead of turbo so it
+						// does not pull its full upstream task graph into the docs typecheck.
+						execSync("pnpm --filter @rivetkit/engine-api-full run build", {
+							cwd: MONOREPO_ROOT,
+							encoding: "utf-8",
+							stdio: ["pipe", "pipe", "pipe"],
+						});
 						rivetKitBuilt = true;
 						logger.info("rivetkit packages built successfully");
 					} catch (buildError: unknown) {

From a2734e65c480cba10161a5267c1d93559ffe83f7 Mon Sep 17 00:00:00 2001
From: Nicholas Kissel <Nicholas.kissel@icloud.com>
Date: Fri, 12 Jun 2026 00:19:08 -0700
Subject: [PATCH 13/13] [SLOP(claude-fable-5)] fix(rivetkit): add missing
 inspector_tabs field to wasm actor config bridge

---
 Cargo.lock                                           |  2 --
 .../packages/rivetkit-wasm/src/lib.rs                |  2 ++
 website/src/content/docs/actors/inspector-tabs.mdx   | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index c5c7a40680..84e63204dd 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -6068,8 +6068,6 @@ dependencies = [
  "async-trait",
  "base64 0.22.1",
  "ciborium",
- "depot-client",
- "depot-client-types",
  "fs_extra",
  "futures",
  "getrandom 0.2.16",
diff --git a/rivetkit-typescript/packages/rivetkit-wasm/src/lib.rs b/rivetkit-typescript/packages/rivetkit-wasm/src/lib.rs
index 36fee1c96b..c3c23f031c 100644
--- a/rivetkit-typescript/packages/rivetkit-wasm/src/lib.rs
+++ b/rivetkit-typescript/packages/rivetkit-wasm/src/lib.rs
@@ -237,6 +237,8 @@ impl From<WasmActorConfig> for ActorConfigInput {
 					.map(|action| rivetkit_core::ActionDefinition { name: action.name })
 					.collect()
 			}),
+			// The wasm runtime does not expose custom inspector tabs yet.
+			inspector_tabs: None,
 		}
 	}
 }
diff --git a/website/src/content/docs/actors/inspector-tabs.mdx b/website/src/content/docs/actors/inspector-tabs.mdx
index 3d21060889..1c31a56533 100644
--- a/website/src/content/docs/actors/inspector-tabs.mdx
+++ b/website/src/content/docs/actors/inspector-tabs.mdx
@@ -105,7 +105,7 @@ Each entry in `inspector.tabs[]` is either a **custom tab** or a
 
 ### Custom tab
 
-```ts
+```ts @nocheck
 {
   id: string,         // URL-safe id: /^[A-Za-z0-9_-]+$/
   label: string,      // Shown in the tab strip
@@ -125,7 +125,7 @@ Each entry in `inspector.tabs[]` is either a **custom tab** or a
 
 ### Hide a built-in tab
 
-```ts
+```ts @nocheck
 {
   id: "workflow" | "database" | "state" | "queue" | "connections" | "console",
   hidden: true,
@@ -154,7 +154,7 @@ The dashboard sends an `init` message on load and again whenever the
 inspector token rotates. Always overwrite the cached token when it
 arrives.
 
-```ts
+```ts @nocheck
 {
   type: "init",
   v: 1,
@@ -168,7 +168,7 @@ arrives.
 For tabs with sub-views, the dashboard also sends `set-active-tab`
 when the user switches:
 
-```ts
+```ts @nocheck
 { type: "set-active-tab", v: 1, tab: string }
 ```
 
@@ -176,7 +176,7 @@ when the user switches:
 
 Send `ready` once your message listener is registered:
 
-```ts
+```ts @nocheck
 { type: "ready", v: 1 }
 ```
 
@@ -184,7 +184,7 @@ If a fetch returns 401, the token has rotated. Ask the dashboard for a
 fresh one and wait for the next `init` — don't retry with the stale
 token:
 
-```ts
+```ts @nocheck
 { type: "token-refresh-needed", v: 1 }
 ```