diff --git a/examples/queue-sandbox-vercel/api/index.ts b/examples/queue-sandbox-vercel/api/index.ts
deleted file mode 100644
index 07a830391f..0000000000
--- a/examples/queue-sandbox-vercel/api/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import app from "../src/server.ts";
-
-export default app;
diff --git a/examples/queue-sandbox-vercel/frontend/App.tsx b/examples/queue-sandbox-vercel/frontend/App.tsx
deleted file mode 100644
index 31d182ff40..0000000000
--- a/examples/queue-sandbox-vercel/frontend/App.tsx
+++ /dev/null
@@ -1,651 +0,0 @@
-import { createRivetKit } from "@rivetkit/react";
-import { useState, useEffect, useCallback } from "react";
-import type { registry } from "../src/actors.ts";
-import type { ReceivedMessage } from "../src/actors/sender.ts";
-import type { QueueMessage } from "../src/actors/multi-queue.ts";
-import type { TimeoutResult } from "../src/actors/timeout.ts";
-import type { WorkerState } from "../src/actors/worker.ts";
-import type { SelfSenderState } from "../src/actors/self-sender.ts";
-import type { KeepAwakeState } from "../src/actors/keep-awake.ts";
-
-const { useActor } = createRivetKit<typeof registry>(
-	`${location.origin}/api/rivet`,
-);
-
-type TabName = "send" | "multi-queue" | "timeout" | "worker" | "self-send" | "keep-awake";
-
-// Generate unique key for actor instances
-const instanceKey = `demo-${Date.now()}`;
-
-export function App() {
-	const [activeTab, setActiveTab] = useState<TabName>("send");
-
-	return (
-		<div className="container">
-			<div className="header">
-				<h1>Queue Sandbox</h1>
-				<p>Explore all the ways to use queues in RivetKit</p>
-			</div>
-
-			<div className="tabs">
-				<button
-					className={activeTab === "send" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("send")}
-				>
-					Send
-				</button>
-				<button
-					className={activeTab === "multi-queue" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("multi-queue")}
-				>
-					Multi-Queue
-				</button>
-				<button
-					className={activeTab === "timeout" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("timeout")}
-				>
-					Timeout
-				</button>
-				<button
-					className={activeTab === "worker" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("worker")}
-				>
-					Worker
-				</button>
-				<button
-					className={activeTab === "self-send" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("self-send")}
-				>
-					Self-Send
-				</button>
-				<button
-					className={activeTab === "keep-awake" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("keep-awake")}
-				>
-					Keep Awake
-				</button>
-			</div>
-
-			<div className="tab-content">
-				{activeTab === "send" && <SendTab />}
-				{activeTab === "multi-queue" && <MultiQueueTab />}
-				{activeTab === "timeout" && <TimeoutTab />}
-				{activeTab === "worker" && <WorkerTab />}
-				{activeTab === "self-send" && <SelfSendTab />}
-				{activeTab === "keep-awake" && <KeepAwakeTab />}
-			</div>
-		</div>
-	);
-}
-
-function SendTab() {
-	const [messageText, setMessageText] = useState("Hello, Queue!");
-	const [messages, setMessages] = useState<ReceivedMessage[]>([]);
-
-	const actor = useActor({ name: "sender", key: [instanceKey] });
-
-	useEffect(() => {
-		if (actor.connection) {
-			actor.connection.getMessages().then(setMessages);
-		}
-	}, [actor.connection]);
-
-	const sendMessage = async () => {
-		if (actor.handle) {
-			await actor.handle.queue.task.send({ text: messageText });
-		}
-	};
-
-	const receiveMessage = async () => {
-		if (actor.connection) {
-			const result = await actor.connection.receiveOne();
-			if (result) {
-				setMessages((prev) => [...prev, result]);
-			}
-		}
-	};
-
-	const clearMessages = async () => {
-		if (actor.connection) {
-			await actor.connection.clearMessages();
-			setMessages([]);
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Send Messages to Queue</h2>
-			<p className="description">
-				Client sends messages to actor queue; actor receives and displays them
-			</p>
-
-			<div className="form-group">
-				<label>Message:</label>
-				<input
-					type="text"
-					value={messageText}
-					onChange={(e) => setMessageText(e.target.value)}
-					placeholder="Enter message text"
-				/>
-			</div>
-
-			<div className="button-group">
-				<button onClick={sendMessage} className="primary" disabled={!actor.handle}>
-					Send to Queue
-				</button>
-				<button onClick={receiveMessage} disabled={!actor.connection}>
-					Receive Next
-				</button>
-				<button onClick={clearMessages} className="secondary" disabled={!actor.connection}>
-					Clear
-				</button>
-			</div>
-
-			<div className="result-area">
-				<h3>Received Messages ({messages.length})</h3>
-				{messages.length === 0 ? (
-					<p className="empty">No messages received yet</p>
-				) : (
-					<ul className="message-list">
-						{messages.map((msg, i) => (
-							<li key={i}>
-								<span className="queue-name">{msg.name}</span>
-								<span className="message-body">
-									{JSON.stringify(msg.body)}
-								</span>
-								<span className="timestamp">
-									{new Date(msg.receivedAt).toLocaleTimeString()}
-								</span>
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function MultiQueueTab() {
-	const [messages, setMessages] = useState<QueueMessage[]>([]);
-
-	const actor = useActor({ name: "multiQueue", key: [instanceKey] });
-
-	useEffect(() => {
-		if (actor.connection) {
-			actor.connection.getMessages().then(setMessages);
-		}
-	}, [actor.connection]);
-
-	const sendToQueue = async (queueName: string) => {
-		if (actor.handle) {
-			await actor.handle.queue[queueName].send({
-				priority: queueName,
-				timestamp: Date.now(),
-			});
-		}
-	};
-
-	const receiveFromQueues = async (queues: string[]) => {
-		if (actor.connection) {
-			const received = await actor.connection.receiveFromQueues(queues, 5);
-			if (received.length > 0) {
-				setMessages((prev) => [
-					...prev,
-					...received.map((r: { name: string; body: unknown }) => ({
-						name: r.name,
-						body: r.body,
-					})),
-				]);
-			}
-		}
-	};
-
-	const clearMessages = async () => {
-		if (actor.connection) {
-			await actor.connection.clearMessages();
-			setMessages([]);
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Multi-Queue</h2>
-			<p className="description">
-				Listen to multiple named queues simultaneously
-			</p>
-
-			<div className="button-group">
-				<button onClick={() => sendToQueue("high")} className="priority-high" disabled={!actor.handle}>
-					Send to HIGH
-				</button>
-				<button onClick={() => sendToQueue("normal")} className="priority-normal" disabled={!actor.handle}>
-					Send to NORMAL
-				</button>
-				<button onClick={() => sendToQueue("low")} className="priority-low" disabled={!actor.handle}>
-					Send to LOW
-				</button>
-			</div>
-
-			<div className="button-group">
-				<button onClick={() => receiveFromQueues(["high", "normal", "low"])} disabled={!actor.connection}>
-					Receive All
-				</button>
-				<button onClick={() => receiveFromQueues(["high", "normal"])} disabled={!actor.connection}>
-					Receive High+Normal
-				</button>
-				<button onClick={() => receiveFromQueues(["high"])} disabled={!actor.connection}>
-					Receive High Only
-				</button>
-				<button onClick={clearMessages} className="secondary" disabled={!actor.connection}>
-					Clear
-				</button>
-			</div>
-
-			<div className="result-area">
-				<h3>Received Messages ({messages.length})</h3>
-				{messages.length === 0 ? (
-					<p className="empty">No messages received yet</p>
-				) : (
-					<ul className="message-list">
-						{messages.map((msg, i) => (
-							<li key={i}>
-								<span className={`queue-name priority-${msg.name}`}>
-									{msg.name.toUpperCase()}
-								</span>
-								<span className="message-body">
-									{JSON.stringify(msg.body)}
-								</span>
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function TimeoutTab() {
-	const [timeoutMs, setTimeoutMs] = useState(3000);
-	const [isWaiting, setIsWaiting] = useState(false);
-	const [lastResult, setLastResult] = useState<TimeoutResult | null>(null);
-	const [waitStartedAt, setWaitStartedAt] = useState<number | null>(null);
-
-	const actor = useActor({ name: "timeout", key: [instanceKey] });
-
-	const waitForMessage = async () => {
-		if (actor.connection) {
-			setIsWaiting(true);
-			setWaitStartedAt(Date.now());
-			const result = await actor.connection.waitForMessage(timeoutMs);
-			setLastResult(result);
-			setIsWaiting(false);
-			setWaitStartedAt(null);
-		}
-	};
-
-	const sendMessage = async () => {
-		if (actor.handle) {
-			await actor.handle.queue.work.send({ text: "Hello!", sentAt: Date.now() });
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Timeout</h2>
-			<p className="description">
-				Demonstrate timeout option when no messages arrive
-			</p>
-
-			<div className="form-group">
-				<label>Timeout: {(timeoutMs / 1000).toFixed(1)} seconds</label>
-				<input
-					type="range"
-					min="1000"
-					max="10000"
-					step="500"
-					value={timeoutMs}
-					onChange={(e) => setTimeoutMs(Number(e.target.value))}
-				/>
-			</div>
-
-			<div className="button-group">
-				<button
-					onClick={waitForMessage}
-					disabled={isWaiting || !actor.connection}
-					className="primary"
-				>
-					{isWaiting ? "Waiting..." : "Wait for Message"}
-				</button>
-				<button onClick={sendMessage} disabled={!isWaiting || !actor.handle}>
-					Send Message
-				</button>
-			</div>
-
-			{isWaiting && waitStartedAt && (
-				<div className="waiting-indicator">
-					<CountdownTimer startedAt={waitStartedAt} timeoutMs={timeoutMs} />
-				</div>
-			)}
-
-			{lastResult && (
-				<div className={`result-box ${lastResult.timedOut ? "timeout" : "success"}`}>
-					<h3>{lastResult.timedOut ? "Timed Out" : "Message Received"}</h3>
-					{lastResult.message !== undefined && (
-						<p>Message: {JSON.stringify(lastResult.message)}</p>
-					)}
-					<p>Waited: {lastResult.waitedMs}ms</p>
-				</div>
-			)}
-		</div>
-	);
-}
-
-function CountdownTimer({ startedAt, timeoutMs }: { startedAt: number; timeoutMs: number }) {
-	const [remaining, setRemaining] = useState(timeoutMs);
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			const elapsed = Date.now() - startedAt;
-			setRemaining(Math.max(0, timeoutMs - elapsed));
-		}, 100);
-		return () => clearInterval(interval);
-	}, [startedAt, timeoutMs]);
-
-	const progress = 1 - remaining / timeoutMs;
-
-	return (
-		<div className="countdown">
-			<div className="progress-bar">
-				<div className="progress-fill" style={{ width: `${progress * 100}%` }} />
-			</div>
-			<span>{(remaining / 1000).toFixed(1)}s remaining</span>
-		</div>
-	);
-}
-
-function WorkerTab() {
-	const [state, setState] = useState<WorkerState>({
-		status: "idle",
-		processed: 0,
-		lastJob: null,
-	});
-	const [jobData, setJobData] = useState("task-1");
-
-	const actor = useActor({ name: "worker", key: [instanceKey] });
-
-	useEffect(() => {
-		if (actor.connection) {
-			const fetchState = async () => {
-				const s = await actor.connection!.getState();
-				setState(s);
-			};
-			fetchState();
-			const interval = setInterval(fetchState, 1000);
-			return () => clearInterval(interval);
-		}
-	}, [actor.connection]);
-
-	const submitJob = async () => {
-		if (actor.handle) {
-			await actor.handle.queue.jobs.send({ id: jobData, submittedAt: Date.now() });
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Worker</h2>
-			<p className="description">
-				Run handler consuming queue messages in a loop
-			</p>
-
-			<div className="status-display">
-				<div className={`status-indicator ${state.status}`}>
-					{state.status === "running" ? "Running" : "Idle"}
-				</div>
-				<div className="stat">
-					<span className="stat-label">Processed:</span>
-					<span className="stat-value">{state.processed}</span>
-				</div>
-			</div>
-
-			<div className="form-group">
-				<label>Job ID:</label>
-				<input
-					type="text"
-					value={jobData}
-					onChange={(e) => setJobData(e.target.value)}
-					placeholder="Enter job identifier"
-				/>
-			</div>
-
-			<div className="button-group">
-				<button onClick={submitJob} className="primary" disabled={!actor.handle}>
-					Submit Job
-				</button>
-			</div>
-
-			{state.lastJob !== null && (
-				<div className="result-box success">
-					<h3>Last Processed Job</h3>
-					<pre>{JSON.stringify(state.lastJob, null, 2)}</pre>
-				</div>
-			)}
-		</div>
-	);
-}
-
-function SelfSendTab() {
-	const [state, setState] = useState<SelfSenderState>({
-		sentCount: 0,
-		receivedCount: 0,
-		messages: [],
-	});
-	const [messageBody, setMessageBody] = useState("self-message");
-
-	const actor = useActor({ name: "selfSender", key: [instanceKey] });
-
-	const refreshState = useCallback(async () => {
-		if (actor.connection) {
-			const s = await actor.connection.getState();
-			setState(s);
-		}
-	}, [actor.connection]);
-
-	useEffect(() => {
-		refreshState();
-	}, [refreshState]);
-
-	const sendToSelf = async () => {
-		if (actor.handle && actor.connection) {
-			await actor.handle.queue.self.send({ content: messageBody, sentAt: Date.now() });
-			await actor.connection.incrementSentCount();
-			await refreshState();
-		}
-	};
-
-	const receiveFromSelf = async () => {
-		if (actor.connection) {
-			await actor.connection.receiveFromSelf();
-			await refreshState();
-		}
-	};
-
-	const clearMessages = async () => {
-		if (actor.connection) {
-			await actor.connection.clearMessages();
-			await refreshState();
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Self-Send</h2>
-			<p className="description">
-				Actor sends messages to its own queue via inline client
-			</p>
-
-			<div className="stats-row">
-				<div className="stat">
-					<span className="stat-label">Sent:</span>
-					<span className="stat-value">{state.sentCount}</span>
-				</div>
-				<div className="stat">
-					<span className="stat-label">Received:</span>
-					<span className="stat-value">{state.receivedCount}</span>
-				</div>
-			</div>
-
-			<div className="form-group">
-				<label>Message Content:</label>
-				<input
-					type="text"
-					value={messageBody}
-					onChange={(e) => setMessageBody(e.target.value)}
-					placeholder="Enter message content"
-				/>
-			</div>
-
-			<div className="button-group">
-				<button onClick={sendToSelf} className="primary" disabled={!actor.handle || !actor.connection}>
-					Send to Self
-				</button>
-				<button onClick={receiveFromSelf} disabled={!actor.connection}>
-					Receive from Self
-				</button>
-				<button onClick={clearMessages} className="secondary" disabled={!actor.connection}>
-					Clear
-				</button>
-			</div>
-
-			<div className="result-area">
-				<h3>Received Messages ({state.messages.length})</h3>
-				{state.messages.length === 0 ? (
-					<p className="empty">No messages received yet</p>
-				) : (
-					<ul className="message-list">
-						{state.messages.map((msg, i) => (
-							<li key={i}>
-								<span className="message-body">{JSON.stringify(msg)}</span>
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function KeepAwakeTab() {
-	const [state, setState] = useState<KeepAwakeState>({
-		currentTask: null,
-		completedTasks: [],
-	});
-	const [durationMs, setDurationMs] = useState(3000);
-
-	const actor = useActor({ name: "keepAwake", key: [instanceKey] });
-
-	useEffect(() => {
-		if (actor.connection) {
-			const fetchState = async () => {
-				const s = await actor.connection!.getState();
-				setState(s);
-			};
-			fetchState();
-			const interval = setInterval(fetchState, 500);
-			return () => clearInterval(interval);
-		}
-	}, [actor.connection]);
-
-	const submitTask = async () => {
-		if (actor.handle) {
-			await actor.handle.queue.tasks.send({ durationMs });
-		}
-	};
-
-	const clearTasks = async () => {
-		if (actor.connection) {
-			await actor.connection.clearTasks();
-			const s = await actor.connection.getState();
-			setState(s);
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Keep Awake</h2>
-			<p className="description">
-				Consume queue message, then do long-running task wrapped in keepAwake()
-			</p>
-
-			<div className="form-group">
-				<label>Task Duration: {(durationMs / 1000).toFixed(1)} seconds</label>
-				<input
-					type="range"
-					min="1000"
-					max="10000"
-					step="500"
-					value={durationMs}
-					onChange={(e) => setDurationMs(Number(e.target.value))}
-				/>
-			</div>
-
-			<div className="button-group">
-				<button onClick={submitTask} className="primary" disabled={!actor.handle}>
-					Submit Task
-				</button>
-				<button onClick={clearTasks} className="secondary" disabled={!actor.connection}>
-					Clear History
-				</button>
-			</div>
-
-			{state.currentTask && (
-				<div className="current-task">
-					<h3>Current Task</h3>
-					<TaskProgress task={state.currentTask} />
-				</div>
-			)}
-
-			<div className="result-area">
-				<h3>Completed Tasks ({state.completedTasks.length})</h3>
-				{state.completedTasks.length === 0 ? (
-					<p className="empty">No tasks completed yet</p>
-				) : (
-					<ul className="task-list">
-						{state.completedTasks.map((task) => (
-							<li key={task.id}>
-								<span className="task-id">{task.id.slice(0, 8)}...</span>
-								<span className="task-time">
-									Completed: {new Date(task.completedAt).toLocaleTimeString()}
-								</span>
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function TaskProgress({ task }: { task: { id: string; startedAt: number; durationMs: number } }) {
-	const [progress, setProgress] = useState(0);
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			const elapsed = Date.now() - task.startedAt;
-			setProgress(Math.min(1, elapsed / task.durationMs));
-		}, 100);
-		return () => clearInterval(interval);
-	}, [task.startedAt, task.durationMs]);
-
-	return (
-		<div className="task-progress">
-			<div className="progress-bar">
-				<div className="progress-fill" style={{ width: `${progress * 100}%` }} />
-			</div>
-			<div className="task-info">
-				<span>Task: {task.id.slice(0, 8)}...</span>
-				<span>{Math.round(progress * 100)}%</span>
-			</div>
-		</div>
-	);
-}
diff --git a/examples/queue-sandbox-vercel/index.html b/examples/queue-sandbox-vercel/index.html
deleted file mode 100644
index 413c852bf1..0000000000
--- a/examples/queue-sandbox-vercel/index.html
+++ /dev/null
@@ -1,312 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Queue Sandbox</title>
-    <style>
-        * {
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            margin: 0;
-            padding: 20px;
-            background-color: #f5f5f5;
-        }
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-        .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 30px;
-            text-align: center;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-        }
-        .header h1 {
-            margin: 0 0 10px 0;
-            font-size: 2em;
-        }
-        .header p {
-            margin: 0;
-            opacity: 0.9;
-        }
-        .tabs {
-            display: flex;
-            gap: 4px;
-            margin-bottom: 20px;
-            flex-wrap: wrap;
-        }
-        .tab {
-            padding: 12px 20px;
-            border: none;
-            background: white;
-            cursor: pointer;
-            border-radius: 8px 8px 0 0;
-            font-size: 14px;
-            font-weight: 500;
-            color: #666;
-            transition: all 0.2s;
-        }
-        .tab:hover {
-            background: #f0f0f0;
-        }
-        .tab.active {
-            background: #667eea;
-            color: white;
-        }
-        .tab-content {
-            background: white;
-            border-radius: 0 8px 8px 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-        .section {
-            padding: 25px;
-        }
-        .section h2 {
-            margin: 0 0 10px 0;
-            color: #333;
-            font-size: 1.5em;
-        }
-        .description {
-            color: #666;
-            margin-bottom: 20px;
-        }
-        .form-group {
-            margin-bottom: 15px;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 5px;
-            font-weight: 500;
-            color: #333;
-        }
-        .form-group input[type="text"],
-        .form-group input[type="email"] {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-        }
-        .form-group input[type="range"] {
-            width: 100%;
-        }
-        .button-group {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 20px;
-            flex-wrap: wrap;
-        }
-        button {
-            padding: 10px 20px;
-            background: #6c757d;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-            transition: background 0.2s;
-        }
-        button:hover:not(:disabled) {
-            opacity: 0.9;
-        }
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        button.primary {
-            background: #667eea;
-        }
-        button.secondary {
-            background: #dc3545;
-        }
-        button.priority-high {
-            background: #dc3545;
-        }
-        button.priority-normal {
-            background: #28a745;
-        }
-        button.priority-low {
-            background: #6c757d;
-        }
-        .result-area {
-            background: #f8f9fa;
-            border-radius: 8px;
-            padding: 20px;
-            margin-top: 20px;
-        }
-        .result-area h3 {
-            margin: 0 0 15px 0;
-            color: #333;
-            font-size: 1.1em;
-        }
-        .empty {
-            color: #999;
-            font-style: italic;
-        }
-        .message-list, .task-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-        .message-list li, .task-list li {
-            padding: 10px;
-            background: white;
-            border-radius: 6px;
-            margin-bottom: 8px;
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-        .queue-name {
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            background: #667eea;
-            color: white;
-        }
-        .queue-name.priority-high {
-            background: #dc3545;
-        }
-        .queue-name.priority-normal {
-            background: #28a745;
-        }
-        .queue-name.priority-low {
-            background: #6c757d;
-        }
-        .message-body {
-            flex: 1;
-            color: #333;
-            font-family: monospace;
-            font-size: 13px;
-        }
-        .timestamp {
-            color: #999;
-            font-size: 12px;
-        }
-        .waiting-indicator {
-            margin: 20px 0;
-        }
-        .countdown {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        .progress-bar {
-            flex: 1;
-            height: 8px;
-            background: #e9ecef;
-            border-radius: 4px;
-            overflow: hidden;
-        }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #667eea, #764ba2);
-            transition: width 0.1s;
-        }
-        .result-box {
-            padding: 20px;
-            border-radius: 8px;
-            margin-top: 20px;
-        }
-        .result-box.success {
-            background: #d4edda;
-            border: 1px solid #c3e6cb;
-        }
-        .result-box.timeout {
-            background: #f8d7da;
-            border: 1px solid #f5c6cb;
-        }
-        .result-box h3 {
-            margin: 0 0 10px 0;
-        }
-        .result-box pre {
-            background: rgba(0,0,0,0.05);
-            padding: 10px;
-            border-radius: 4px;
-            overflow-x: auto;
-        }
-        .status-display {
-            display: flex;
-            gap: 20px;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-        .status-indicator {
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            font-size: 14px;
-        }
-        .status-indicator.running {
-            background: #d4edda;
-            color: #155724;
-        }
-        .status-indicator.idle {
-            background: #e2e3e5;
-            color: #383d41;
-        }
-        .stat, .stats-row .stat {
-            display: flex;
-            gap: 8px;
-            align-items: center;
-        }
-        .stats-row {
-            display: flex;
-            gap: 30px;
-            margin-bottom: 20px;
-        }
-        .stat-label {
-            color: #666;
-        }
-        .stat-value {
-            font-weight: 600;
-            font-size: 1.2em;
-            color: #667eea;
-        }
-        .current-task {
-            background: #fff3cd;
-            border: 1px solid #ffeeba;
-            padding: 20px;
-            border-radius: 8px;
-            margin: 20px 0;
-        }
-        .current-task h3 {
-            margin: 0 0 15px 0;
-            color: #856404;
-        }
-        .task-progress {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-        .task-info {
-            display: flex;
-            justify-content: space-between;
-            font-size: 14px;
-            color: #666;
-        }
-        .task-id {
-            font-family: monospace;
-            color: #667eea;
-        }
-        .task-time {
-            color: #999;
-            font-size: 12px;
-        }
-    </style>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="/frontend/main.tsx"></script>
-</body>
-</html>
diff --git a/examples/queue-sandbox-vercel/package.json b/examples/queue-sandbox-vercel/package.json
deleted file mode 100644
index c90c72960c..0000000000
--- a/examples/queue-sandbox-vercel/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-	"name": "queue-sandbox-vercel",
-	"version": "2.0.21",
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"dev": "vercel dev",
-		"build": "vite build",
-		"check-types": "tsc --noEmit"
-	},
-	"dependencies": {
-		"@hono/node-server": "^1.19.7",
-		"@hono/node-ws": "^1.2.0",
-		"@rivetkit/react": "^2.0.38",
-		"hono": "^4.11.3",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"rivetkit": "^2.0.38"
-	},
-	"devDependencies": {
-		"@types/node": "^22.13.9",
-		"@types/react": "^18.2.0",
-		"@types/react-dom": "^18.2.0",
-		"@vitejs/plugin-react": "^4.2.0",
-		"tsx": "^3.12.7",
-		"typescript": "^5.5.2",
-		"vite": "^5.0.0"
-	},
-	"template": {
-		"technologies": [
-			"typescript",
-			"react"
-		],
-		"tags": [
-			"queues"
-		],
-		"priority": 100,
-		"frontendPort": 5173
-	},
-	"license": "MIT"
-}
diff --git a/examples/queue-sandbox-vercel/src/actors.ts b/examples/queue-sandbox-vercel/src/actors.ts
deleted file mode 100644
index c581fe152e..0000000000
--- a/examples/queue-sandbox-vercel/src/actors.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { setup } from "rivetkit";
-import { sender } from "./actors/sender.ts";
-import { multiQueue } from "./actors/multi-queue.ts";
-import { timeout } from "./actors/timeout.ts";
-import { worker } from "./actors/worker.ts";
-import { selfSender } from "./actors/self-sender.ts";
-import { keepAwake } from "./actors/keep-awake.ts";
-
-export const registry = setup({
-	use: {
-		sender,
-		multiQueue,
-		timeout,
-		worker,
-		selfSender,
-		keepAwake,
-	},
-});
diff --git a/examples/queue-sandbox-vercel/src/server.ts b/examples/queue-sandbox-vercel/src/server.ts
deleted file mode 100644
index 95c8895f94..0000000000
--- a/examples/queue-sandbox-vercel/src/server.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Hono } from "hono";
-import { registry } from "./actors.ts";
-
-const app = new Hono();
-app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
-export default app;
diff --git a/examples/queue-sandbox-vercel/tsconfig.json b/examples/queue-sandbox-vercel/tsconfig.json
deleted file mode 100644
index 91635880bc..0000000000
--- a/examples/queue-sandbox-vercel/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "esnext",
-		"lib": [
-			"esnext",
-			"dom",
-			"dom.iterable"
-		],
-		"jsx": "react-jsx",
-		"module": "esnext",
-		"moduleResolution": "bundler",
-		"types": [
-			"node",
-			"vite/client"
-		],
-		"noEmit": true,
-		"strict": true,
-		"skipLibCheck": true,
-		"allowImportingTsExtensions": true,
-		"rewriteRelativeImportExtensions": true
-	},
-	"include": [
-		"src/**/*",
-		"api/**/*",
-		"frontend/**/*"
-	]
-}
diff --git a/examples/queue-sandbox-vercel/turbo.json b/examples/queue-sandbox-vercel/turbo.json
deleted file mode 100644
index c3d3d3b9bb..0000000000
--- a/examples/queue-sandbox-vercel/turbo.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"$schema": "https://turbo.build/schema.json",
-	"extends": [
-		"//"
-	]
-}
diff --git a/examples/queue-sandbox-vercel/vercel.json b/examples/queue-sandbox-vercel/vercel.json
deleted file mode 100644
index 64a8d9b467..0000000000
--- a/examples/queue-sandbox-vercel/vercel.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-	"framework": "vite",
-	"rewrites": [
-		{
-			"source": "/api/(.*)",
-			"destination": "/api"
-		}
-	]
-}
diff --git a/examples/queue-sandbox-vercel/vite.config.ts b/examples/queue-sandbox-vercel/vite.config.ts
deleted file mode 100644
index f9f0d5ec2f..0000000000
--- a/examples/queue-sandbox-vercel/vite.config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
-	plugins: [react()],
-});
diff --git a/examples/queue-sandbox/frontend/App.tsx b/examples/queue-sandbox/frontend/App.tsx
deleted file mode 100644
index 31d182ff40..0000000000
--- a/examples/queue-sandbox/frontend/App.tsx
+++ /dev/null
@@ -1,651 +0,0 @@
-import { createRivetKit } from "@rivetkit/react";
-import { useState, useEffect, useCallback } from "react";
-import type { registry } from "../src/actors.ts";
-import type { ReceivedMessage } from "../src/actors/sender.ts";
-import type { QueueMessage } from "../src/actors/multi-queue.ts";
-import type { TimeoutResult } from "../src/actors/timeout.ts";
-import type { WorkerState } from "../src/actors/worker.ts";
-import type { SelfSenderState } from "../src/actors/self-sender.ts";
-import type { KeepAwakeState } from "../src/actors/keep-awake.ts";
-
-const { useActor } = createRivetKit<typeof registry>(
-	`${location.origin}/api/rivet`,
-);
-
-type TabName = "send" | "multi-queue" | "timeout" | "worker" | "self-send" | "keep-awake";
-
-// Generate unique key for actor instances
-const instanceKey = `demo-${Date.now()}`;
-
-export function App() {
-	const [activeTab, setActiveTab] = useState<TabName>("send");
-
-	return (
-		<div className="container">
-			<div className="header">
-				<h1>Queue Sandbox</h1>
-				<p>Explore all the ways to use queues in RivetKit</p>
-			</div>
-
-			<div className="tabs">
-				<button
-					className={activeTab === "send" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("send")}
-				>
-					Send
-				</button>
-				<button
-					className={activeTab === "multi-queue" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("multi-queue")}
-				>
-					Multi-Queue
-				</button>
-				<button
-					className={activeTab === "timeout" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("timeout")}
-				>
-					Timeout
-				</button>
-				<button
-					className={activeTab === "worker" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("worker")}
-				>
-					Worker
-				</button>
-				<button
-					className={activeTab === "self-send" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("self-send")}
-				>
-					Self-Send
-				</button>
-				<button
-					className={activeTab === "keep-awake" ? "tab active" : "tab"}
-					onClick={() => setActiveTab("keep-awake")}
-				>
-					Keep Awake
-				</button>
-			</div>
-
-			<div className="tab-content">
-				{activeTab === "send" && <SendTab />}
-				{activeTab === "multi-queue" && <MultiQueueTab />}
-				{activeTab === "timeout" && <TimeoutTab />}
-				{activeTab === "worker" && <WorkerTab />}
-				{activeTab === "self-send" && <SelfSendTab />}
-				{activeTab === "keep-awake" && <KeepAwakeTab />}
-			</div>
-		</div>
-	);
-}
-
-function SendTab() {
-	const [messageText, setMessageText] = useState("Hello, Queue!");
-	const [messages, setMessages] = useState<ReceivedMessage[]>([]);
-
-	const actor = useActor({ name: "sender", key: [instanceKey] });
-
-	useEffect(() => {
-		if (actor.connection) {
-			actor.connection.getMessages().then(setMessages);
-		}
-	}, [actor.connection]);
-
-	const sendMessage = async () => {
-		if (actor.handle) {
-			await actor.handle.queue.task.send({ text: messageText });
-		}
-	};
-
-	const receiveMessage = async () => {
-		if (actor.connection) {
-			const result = await actor.connection.receiveOne();
-			if (result) {
-				setMessages((prev) => [...prev, result]);
-			}
-		}
-	};
-
-	const clearMessages = async () => {
-		if (actor.connection) {
-			await actor.connection.clearMessages();
-			setMessages([]);
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Send Messages to Queue</h2>
-			<p className="description">
-				Client sends messages to actor queue; actor receives and displays them
-			</p>
-
-			<div className="form-group">
-				<label>Message:</label>
-				<input
-					type="text"
-					value={messageText}
-					onChange={(e) => setMessageText(e.target.value)}
-					placeholder="Enter message text"
-				/>
-			</div>
-
-			<div className="button-group">
-				<button onClick={sendMessage} className="primary" disabled={!actor.handle}>
-					Send to Queue
-				</button>
-				<button onClick={receiveMessage} disabled={!actor.connection}>
-					Receive Next
-				</button>
-				<button onClick={clearMessages} className="secondary" disabled={!actor.connection}>
-					Clear
-				</button>
-			</div>
-
-			<div className="result-area">
-				<h3>Received Messages ({messages.length})</h3>
-				{messages.length === 0 ? (
-					<p className="empty">No messages received yet</p>
-				) : (
-					<ul className="message-list">
-						{messages.map((msg, i) => (
-							<li key={i}>
-								<span className="queue-name">{msg.name}</span>
-								<span className="message-body">
-									{JSON.stringify(msg.body)}
-								</span>
-								<span className="timestamp">
-									{new Date(msg.receivedAt).toLocaleTimeString()}
-								</span>
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function MultiQueueTab() {
-	const [messages, setMessages] = useState<QueueMessage[]>([]);
-
-	const actor = useActor({ name: "multiQueue", key: [instanceKey] });
-
-	useEffect(() => {
-		if (actor.connection) {
-			actor.connection.getMessages().then(setMessages);
-		}
-	}, [actor.connection]);
-
-	const sendToQueue = async (queueName: string) => {
-		if (actor.handle) {
-			await actor.handle.queue[queueName].send({
-				priority: queueName,
-				timestamp: Date.now(),
-			});
-		}
-	};
-
-	const receiveFromQueues = async (queues: string[]) => {
-		if (actor.connection) {
-			const received = await actor.connection.receiveFromQueues(queues, 5);
-			if (received.length > 0) {
-				setMessages((prev) => [
-					...prev,
-					...received.map((r: { name: string; body: unknown }) => ({
-						name: r.name,
-						body: r.body,
-					})),
-				]);
-			}
-		}
-	};
-
-	const clearMessages = async () => {
-		if (actor.connection) {
-			await actor.connection.clearMessages();
-			setMessages([]);
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Multi-Queue</h2>
-			<p className="description">
-				Listen to multiple named queues simultaneously
-			</p>
-
-			<div className="button-group">
-				<button onClick={() => sendToQueue("high")} className="priority-high" disabled={!actor.handle}>
-					Send to HIGH
-				</button>
-				<button onClick={() => sendToQueue("normal")} className="priority-normal" disabled={!actor.handle}>
-					Send to NORMAL
-				</button>
-				<button onClick={() => sendToQueue("low")} className="priority-low" disabled={!actor.handle}>
-					Send to LOW
-				</button>
-			</div>
-
-			<div className="button-group">
-				<button onClick={() => receiveFromQueues(["high", "normal", "low"])} disabled={!actor.connection}>
-					Receive All
-				</button>
-				<button onClick={() => receiveFromQueues(["high", "normal"])} disabled={!actor.connection}>
-					Receive High+Normal
-				</button>
-				<button onClick={() => receiveFromQueues(["high"])} disabled={!actor.connection}>
-					Receive High Only
-				</button>
-				<button onClick={clearMessages} className="secondary" disabled={!actor.connection}>
-					Clear
-				</button>
-			</div>
-
-			<div className="result-area">
-				<h3>Received Messages ({messages.length})</h3>
-				{messages.length === 0 ? (
-					<p className="empty">No messages received yet</p>
-				) : (
-					<ul className="message-list">
-						{messages.map((msg, i) => (
-							<li key={i}>
-								<span className={`queue-name priority-${msg.name}`}>
-									{msg.name.toUpperCase()}
-								</span>
-								<span className="message-body">
-									{JSON.stringify(msg.body)}
-								</span>
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function TimeoutTab() {
-	const [timeoutMs, setTimeoutMs] = useState(3000);
-	const [isWaiting, setIsWaiting] = useState(false);
-	const [lastResult, setLastResult] = useState<TimeoutResult | null>(null);
-	const [waitStartedAt, setWaitStartedAt] = useState<number | null>(null);
-
-	const actor = useActor({ name: "timeout", key: [instanceKey] });
-
-	const waitForMessage = async () => {
-		if (actor.connection) {
-			setIsWaiting(true);
-			setWaitStartedAt(Date.now());
-			const result = await actor.connection.waitForMessage(timeoutMs);
-			setLastResult(result);
-			setIsWaiting(false);
-			setWaitStartedAt(null);
-		}
-	};
-
-	const sendMessage = async () => {
-		if (actor.handle) {
-			await actor.handle.queue.work.send({ text: "Hello!", sentAt: Date.now() });
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Timeout</h2>
-			<p className="description">
-				Demonstrate timeout option when no messages arrive
-			</p>
-
-			<div className="form-group">
-				<label>Timeout: {(timeoutMs / 1000).toFixed(1)} seconds</label>
-				<input
-					type="range"
-					min="1000"
-					max="10000"
-					step="500"
-					value={timeoutMs}
-					onChange={(e) => setTimeoutMs(Number(e.target.value))}
-				/>
-			</div>
-
-			<div className="button-group">
-				<button
-					onClick={waitForMessage}
-					disabled={isWaiting || !actor.connection}
-					className="primary"
-				>
-					{isWaiting ? "Waiting..." : "Wait for Message"}
-				</button>
-				<button onClick={sendMessage} disabled={!isWaiting || !actor.handle}>
-					Send Message
-				</button>
-			</div>
-
-			{isWaiting && waitStartedAt && (
-				<div className="waiting-indicator">
-					<CountdownTimer startedAt={waitStartedAt} timeoutMs={timeoutMs} />
-				</div>
-			)}
-
-			{lastResult && (
-				<div className={`result-box ${lastResult.timedOut ? "timeout" : "success"}`}>
-					<h3>{lastResult.timedOut ? "Timed Out" : "Message Received"}</h3>
-					{lastResult.message !== undefined && (
-						<p>Message: {JSON.stringify(lastResult.message)}</p>
-					)}
-					<p>Waited: {lastResult.waitedMs}ms</p>
-				</div>
-			)}
-		</div>
-	);
-}
-
-function CountdownTimer({ startedAt, timeoutMs }: { startedAt: number; timeoutMs: number }) {
-	const [remaining, setRemaining] = useState(timeoutMs);
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			const elapsed = Date.now() - startedAt;
-			setRemaining(Math.max(0, timeoutMs - elapsed));
-		}, 100);
-		return () => clearInterval(interval);
-	}, [startedAt, timeoutMs]);
-
-	const progress = 1 - remaining / timeoutMs;
-
-	return (
-		<div className="countdown">
-			<div className="progress-bar">
-				<div className="progress-fill" style={{ width: `${progress * 100}%` }} />
-			</div>
-			<span>{(remaining / 1000).toFixed(1)}s remaining</span>
-		</div>
-	);
-}
-
-function WorkerTab() {
-	const [state, setState] = useState<WorkerState>({
-		status: "idle",
-		processed: 0,
-		lastJob: null,
-	});
-	const [jobData, setJobData] = useState("task-1");
-
-	const actor = useActor({ name: "worker", key: [instanceKey] });
-
-	useEffect(() => {
-		if (actor.connection) {
-			const fetchState = async () => {
-				const s = await actor.connection!.getState();
-				setState(s);
-			};
-			fetchState();
-			const interval = setInterval(fetchState, 1000);
-			return () => clearInterval(interval);
-		}
-	}, [actor.connection]);
-
-	const submitJob = async () => {
-		if (actor.handle) {
-			await actor.handle.queue.jobs.send({ id: jobData, submittedAt: Date.now() });
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Worker</h2>
-			<p className="description">
-				Run handler consuming queue messages in a loop
-			</p>
-
-			<div className="status-display">
-				<div className={`status-indicator ${state.status}`}>
-					{state.status === "running" ? "Running" : "Idle"}
-				</div>
-				<div className="stat">
-					<span className="stat-label">Processed:</span>
-					<span className="stat-value">{state.processed}</span>
-				</div>
-			</div>
-
-			<div className="form-group">
-				<label>Job ID:</label>
-				<input
-					type="text"
-					value={jobData}
-					onChange={(e) => setJobData(e.target.value)}
-					placeholder="Enter job identifier"
-				/>
-			</div>
-
-			<div className="button-group">
-				<button onClick={submitJob} className="primary" disabled={!actor.handle}>
-					Submit Job
-				</button>
-			</div>
-
-			{state.lastJob !== null && (
-				<div className="result-box success">
-					<h3>Last Processed Job</h3>
-					<pre>{JSON.stringify(state.lastJob, null, 2)}</pre>
-				</div>
-			)}
-		</div>
-	);
-}
-
-function SelfSendTab() {
-	const [state, setState] = useState<SelfSenderState>({
-		sentCount: 0,
-		receivedCount: 0,
-		messages: [],
-	});
-	const [messageBody, setMessageBody] = useState("self-message");
-
-	const actor = useActor({ name: "selfSender", key: [instanceKey] });
-
-	const refreshState = useCallback(async () => {
-		if (actor.connection) {
-			const s = await actor.connection.getState();
-			setState(s);
-		}
-	}, [actor.connection]);
-
-	useEffect(() => {
-		refreshState();
-	}, [refreshState]);
-
-	const sendToSelf = async () => {
-		if (actor.handle && actor.connection) {
-			await actor.handle.queue.self.send({ content: messageBody, sentAt: Date.now() });
-			await actor.connection.incrementSentCount();
-			await refreshState();
-		}
-	};
-
-	const receiveFromSelf = async () => {
-		if (actor.connection) {
-			await actor.connection.receiveFromSelf();
-			await refreshState();
-		}
-	};
-
-	const clearMessages = async () => {
-		if (actor.connection) {
-			await actor.connection.clearMessages();
-			await refreshState();
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Self-Send</h2>
-			<p className="description">
-				Actor sends messages to its own queue via inline client
-			</p>
-
-			<div className="stats-row">
-				<div className="stat">
-					<span className="stat-label">Sent:</span>
-					<span className="stat-value">{state.sentCount}</span>
-				</div>
-				<div className="stat">
-					<span className="stat-label">Received:</span>
-					<span className="stat-value">{state.receivedCount}</span>
-				</div>
-			</div>
-
-			<div className="form-group">
-				<label>Message Content:</label>
-				<input
-					type="text"
-					value={messageBody}
-					onChange={(e) => setMessageBody(e.target.value)}
-					placeholder="Enter message content"
-				/>
-			</div>
-
-			<div className="button-group">
-				<button onClick={sendToSelf} className="primary" disabled={!actor.handle || !actor.connection}>
-					Send to Self
-				</button>
-				<button onClick={receiveFromSelf} disabled={!actor.connection}>
-					Receive from Self
-				</button>
-				<button onClick={clearMessages} className="secondary" disabled={!actor.connection}>
-					Clear
-				</button>
-			</div>
-
-			<div className="result-area">
-				<h3>Received Messages ({state.messages.length})</h3>
-				{state.messages.length === 0 ? (
-					<p className="empty">No messages received yet</p>
-				) : (
-					<ul className="message-list">
-						{state.messages.map((msg, i) => (
-							<li key={i}>
-								<span className="message-body">{JSON.stringify(msg)}</span>
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function KeepAwakeTab() {
-	const [state, setState] = useState<KeepAwakeState>({
-		currentTask: null,
-		completedTasks: [],
-	});
-	const [durationMs, setDurationMs] = useState(3000);
-
-	const actor = useActor({ name: "keepAwake", key: [instanceKey] });
-
-	useEffect(() => {
-		if (actor.connection) {
-			const fetchState = async () => {
-				const s = await actor.connection!.getState();
-				setState(s);
-			};
-			fetchState();
-			const interval = setInterval(fetchState, 500);
-			return () => clearInterval(interval);
-		}
-	}, [actor.connection]);
-
-	const submitTask = async () => {
-		if (actor.handle) {
-			await actor.handle.queue.tasks.send({ durationMs });
-		}
-	};
-
-	const clearTasks = async () => {
-		if (actor.connection) {
-			await actor.connection.clearTasks();
-			const s = await actor.connection.getState();
-			setState(s);
-		}
-	};
-
-	return (
-		<div className="section">
-			<h2>Keep Awake</h2>
-			<p className="description">
-				Consume queue message, then do long-running task wrapped in keepAwake()
-			</p>
-
-			<div className="form-group">
-				<label>Task Duration: {(durationMs / 1000).toFixed(1)} seconds</label>
-				<input
-					type="range"
-					min="1000"
-					max="10000"
-					step="500"
-					value={durationMs}
-					onChange={(e) => setDurationMs(Number(e.target.value))}
-				/>
-			</div>
-
-			<div className="button-group">
-				<button onClick={submitTask} className="primary" disabled={!actor.handle}>
-					Submit Task
-				</button>
-				<button onClick={clearTasks} className="secondary" disabled={!actor.connection}>
-					Clear History
-				</button>
-			</div>
-
-			{state.currentTask && (
-				<div className="current-task">
-					<h3>Current Task</h3>
-					<TaskProgress task={state.currentTask} />
-				</div>
-			)}
-
-			<div className="result-area">
-				<h3>Completed Tasks ({state.completedTasks.length})</h3>
-				{state.completedTasks.length === 0 ? (
-					<p className="empty">No tasks completed yet</p>
-				) : (
-					<ul className="task-list">
-						{state.completedTasks.map((task) => (
-							<li key={task.id}>
-								<span className="task-id">{task.id.slice(0, 8)}...</span>
-								<span className="task-time">
-									Completed: {new Date(task.completedAt).toLocaleTimeString()}
-								</span>
-							</li>
-						))}
-					</ul>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function TaskProgress({ task }: { task: { id: string; startedAt: number; durationMs: number } }) {
-	const [progress, setProgress] = useState(0);
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			const elapsed = Date.now() - task.startedAt;
-			setProgress(Math.min(1, elapsed / task.durationMs));
-		}, 100);
-		return () => clearInterval(interval);
-	}, [task.startedAt, task.durationMs]);
-
-	return (
-		<div className="task-progress">
-			<div className="progress-bar">
-				<div className="progress-fill" style={{ width: `${progress * 100}%` }} />
-			</div>
-			<div className="task-info">
-				<span>Task: {task.id.slice(0, 8)}...</span>
-				<span>{Math.round(progress * 100)}%</span>
-			</div>
-		</div>
-	);
-}
diff --git a/examples/queue-sandbox/frontend/main.tsx b/examples/queue-sandbox/frontend/main.tsx
deleted file mode 100644
index 2efcb334fc..0000000000
--- a/examples/queue-sandbox/frontend/main.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./App.tsx";
-
-const root = document.getElementById("root");
-if (!root) throw new Error("Root element not found");
-
-createRoot(root).render(
-	<StrictMode>
-		<App />
-	</StrictMode>,
-);
diff --git a/examples/queue-sandbox/index.html b/examples/queue-sandbox/index.html
deleted file mode 100644
index 413c852bf1..0000000000
--- a/examples/queue-sandbox/index.html
+++ /dev/null
@@ -1,312 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Queue Sandbox</title>
-    <style>
-        * {
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            margin: 0;
-            padding: 20px;
-            background-color: #f5f5f5;
-        }
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-        .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 30px;
-            text-align: center;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-        }
-        .header h1 {
-            margin: 0 0 10px 0;
-            font-size: 2em;
-        }
-        .header p {
-            margin: 0;
-            opacity: 0.9;
-        }
-        .tabs {
-            display: flex;
-            gap: 4px;
-            margin-bottom: 20px;
-            flex-wrap: wrap;
-        }
-        .tab {
-            padding: 12px 20px;
-            border: none;
-            background: white;
-            cursor: pointer;
-            border-radius: 8px 8px 0 0;
-            font-size: 14px;
-            font-weight: 500;
-            color: #666;
-            transition: all 0.2s;
-        }
-        .tab:hover {
-            background: #f0f0f0;
-        }
-        .tab.active {
-            background: #667eea;
-            color: white;
-        }
-        .tab-content {
-            background: white;
-            border-radius: 0 8px 8px 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        }
-        .section {
-            padding: 25px;
-        }
-        .section h2 {
-            margin: 0 0 10px 0;
-            color: #333;
-            font-size: 1.5em;
-        }
-        .description {
-            color: #666;
-            margin-bottom: 20px;
-        }
-        .form-group {
-            margin-bottom: 15px;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 5px;
-            font-weight: 500;
-            color: #333;
-        }
-        .form-group input[type="text"],
-        .form-group input[type="email"] {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-        }
-        .form-group input[type="range"] {
-            width: 100%;
-        }
-        .button-group {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 20px;
-            flex-wrap: wrap;
-        }
-        button {
-            padding: 10px 20px;
-            background: #6c757d;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-            transition: background 0.2s;
-        }
-        button:hover:not(:disabled) {
-            opacity: 0.9;
-        }
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        button.primary {
-            background: #667eea;
-        }
-        button.secondary {
-            background: #dc3545;
-        }
-        button.priority-high {
-            background: #dc3545;
-        }
-        button.priority-normal {
-            background: #28a745;
-        }
-        button.priority-low {
-            background: #6c757d;
-        }
-        .result-area {
-            background: #f8f9fa;
-            border-radius: 8px;
-            padding: 20px;
-            margin-top: 20px;
-        }
-        .result-area h3 {
-            margin: 0 0 15px 0;
-            color: #333;
-            font-size: 1.1em;
-        }
-        .empty {
-            color: #999;
-            font-style: italic;
-        }
-        .message-list, .task-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-        .message-list li, .task-list li {
-            padding: 10px;
-            background: white;
-            border-radius: 6px;
-            margin-bottom: 8px;
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-        .queue-name {
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            background: #667eea;
-            color: white;
-        }
-        .queue-name.priority-high {
-            background: #dc3545;
-        }
-        .queue-name.priority-normal {
-            background: #28a745;
-        }
-        .queue-name.priority-low {
-            background: #6c757d;
-        }
-        .message-body {
-            flex: 1;
-            color: #333;
-            font-family: monospace;
-            font-size: 13px;
-        }
-        .timestamp {
-            color: #999;
-            font-size: 12px;
-        }
-        .waiting-indicator {
-            margin: 20px 0;
-        }
-        .countdown {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        .progress-bar {
-            flex: 1;
-            height: 8px;
-            background: #e9ecef;
-            border-radius: 4px;
-            overflow: hidden;
-        }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #667eea, #764ba2);
-            transition: width 0.1s;
-        }
-        .result-box {
-            padding: 20px;
-            border-radius: 8px;
-            margin-top: 20px;
-        }
-        .result-box.success {
-            background: #d4edda;
-            border: 1px solid #c3e6cb;
-        }
-        .result-box.timeout {
-            background: #f8d7da;
-            border: 1px solid #f5c6cb;
-        }
-        .result-box h3 {
-            margin: 0 0 10px 0;
-        }
-        .result-box pre {
-            background: rgba(0,0,0,0.05);
-            padding: 10px;
-            border-radius: 4px;
-            overflow-x: auto;
-        }
-        .status-display {
-            display: flex;
-            gap: 20px;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-        .status-indicator {
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            font-size: 14px;
-        }
-        .status-indicator.running {
-            background: #d4edda;
-            color: #155724;
-        }
-        .status-indicator.idle {
-            background: #e2e3e5;
-            color: #383d41;
-        }
-        .stat, .stats-row .stat {
-            display: flex;
-            gap: 8px;
-            align-items: center;
-        }
-        .stats-row {
-            display: flex;
-            gap: 30px;
-            margin-bottom: 20px;
-        }
-        .stat-label {
-            color: #666;
-        }
-        .stat-value {
-            font-weight: 600;
-            font-size: 1.2em;
-            color: #667eea;
-        }
-        .current-task {
-            background: #fff3cd;
-            border: 1px solid #ffeeba;
-            padding: 20px;
-            border-radius: 8px;
-            margin: 20px 0;
-        }
-        .current-task h3 {
-            margin: 0 0 15px 0;
-            color: #856404;
-        }
-        .task-progress {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-        .task-info {
-            display: flex;
-            justify-content: space-between;
-            font-size: 14px;
-            color: #666;
-        }
-        .task-id {
-            font-family: monospace;
-            color: #667eea;
-        }
-        .task-time {
-            color: #999;
-            font-size: 12px;
-        }
-    </style>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="/frontend/main.tsx"></script>
-</body>
-</html>
diff --git a/examples/queue-sandbox/src/actors.ts b/examples/queue-sandbox/src/actors.ts
deleted file mode 100644
index c581fe152e..0000000000
--- a/examples/queue-sandbox/src/actors.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { setup } from "rivetkit";
-import { sender } from "./actors/sender.ts";
-import { multiQueue } from "./actors/multi-queue.ts";
-import { timeout } from "./actors/timeout.ts";
-import { worker } from "./actors/worker.ts";
-import { selfSender } from "./actors/self-sender.ts";
-import { keepAwake } from "./actors/keep-awake.ts";
-
-export const registry = setup({
-	use: {
-		sender,
-		multiQueue,
-		timeout,
-		worker,
-		selfSender,
-		keepAwake,
-	},
-});
diff --git a/examples/queue-sandbox/src/actors/keep-awake.ts b/examples/queue-sandbox/src/actors/keep-awake.ts
deleted file mode 100644
index dcf9a0a28e..0000000000
--- a/examples/queue-sandbox/src/actors/keep-awake.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { actor } from "rivetkit";
-
-export interface CurrentTask {
-	id: string;
-	startedAt: number;
-	durationMs: number;
-}
-
-export interface CompletedTask {
-	id: string;
-	completedAt: number;
-}
-
-export interface KeepAwakeState {
-	currentTask: CurrentTask | null;
-	completedTasks: CompletedTask[];
-}
-
-export const keepAwake = actor({
-	state: {
-		currentTask: null as CurrentTask | null,
-		completedTasks: [] as CompletedTask[],
-	},
-	async run(c) {
-		while (!c.abortSignal.aborted) {
-			const job = await c.queue.next("tasks", { timeout: 1000 });
-			if (job) {
-				const taskId = crypto.randomUUID();
-				const { durationMs } = job.body as { durationMs: number };
-
-				c.state.currentTask = {
-					id: taskId,
-					startedAt: Date.now(),
-					durationMs,
-				};
-				c.broadcast("taskStarted", c.state.currentTask);
-
-				// Wrap long-running work in keepAwake so actor doesn't sleep
-				await c.keepAwake(
-					new Promise((resolve) => setTimeout(resolve, durationMs)),
-				);
-
-				c.state.completedTasks.push({ id: taskId, completedAt: Date.now() });
-				c.state.currentTask = null;
-				c.broadcast("taskCompleted", {
-					taskId,
-					completedTasks: c.state.completedTasks,
-				});
-			}
-		}
-	},
-	actions: {
-		getState(c): KeepAwakeState {
-			return {
-				currentTask: c.state.currentTask,
-				completedTasks: c.state.completedTasks,
-			};
-		},
-		clearTasks(c) {
-			c.state.completedTasks = [];
-			c.broadcast("taskCompleted", {
-				taskId: null,
-				completedTasks: [],
-			});
-		},
-	},
-	options: {
-		sleepTimeout: 2000,
-	},
-});
diff --git a/examples/queue-sandbox/src/actors/multi-queue.ts b/examples/queue-sandbox/src/actors/multi-queue.ts
deleted file mode 100644
index 57d57e7ad8..0000000000
--- a/examples/queue-sandbox/src/actors/multi-queue.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { actor } from "rivetkit";
-
-export interface QueueMessage {
-	name: string;
-	body: unknown;
-}
-
-export const multiQueue = actor({
-	state: {
-		messages: [] as QueueMessage[],
-	},
-	actions: {
-		async receiveFromQueues(c, names: string[], count: number) {
-			const msgs = await c.queue.next(names, { count, timeout: 100 });
-			if (msgs && msgs.length > 0) {
-				for (const msg of msgs) {
-					c.state.messages.push({ name: msg.name, body: msg.body });
-				}
-				c.broadcast("messagesReceived", c.state.messages);
-			}
-			return msgs ?? [];
-		},
-		getMessages(c): QueueMessage[] {
-			return c.state.messages;
-		},
-		clearMessages(c) {
-			c.state.messages = [];
-			c.broadcast("messagesReceived", c.state.messages);
-		},
-	},
-});
diff --git a/examples/queue-sandbox/src/actors/self-sender.ts b/examples/queue-sandbox/src/actors/self-sender.ts
deleted file mode 100644
index bfd1b3cd1a..0000000000
--- a/examples/queue-sandbox/src/actors/self-sender.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { actor } from "rivetkit";
-
-export interface SelfSenderState {
-	sentCount: number;
-	receivedCount: number;
-	messages: unknown[];
-}
-
-export const selfSender = actor({
-	state: {
-		sentCount: 0,
-		receivedCount: 0,
-		messages: [] as unknown[],
-	},
-	actions: {
-		async receiveFromSelf(c) {
-			const msg = await c.queue.next("self", { timeout: 100 });
-			if (msg) {
-				c.state.receivedCount += 1;
-				c.state.messages.push(msg.body);
-				c.broadcast("received", {
-					receivedCount: c.state.receivedCount,
-					message: msg.body,
-				});
-				return msg.body;
-			}
-			return null;
-		},
-		getState(c): SelfSenderState {
-			return {
-				sentCount: c.state.sentCount,
-				receivedCount: c.state.receivedCount,
-				messages: c.state.messages,
-			};
-		},
-		clearMessages(c) {
-			c.state.sentCount = 0;
-			c.state.receivedCount = 0;
-			c.state.messages = [];
-			c.broadcast("sent", { sentCount: 0 });
-			c.broadcast("received", { receivedCount: 0, message: null });
-		},
-		incrementSentCount(c) {
-			c.state.sentCount += 1;
-			c.broadcast("sent", { sentCount: c.state.sentCount });
-		},
-	},
-});
diff --git a/examples/queue-sandbox/src/actors/sender.ts b/examples/queue-sandbox/src/actors/sender.ts
deleted file mode 100644
index 0db2c49a0b..0000000000
--- a/examples/queue-sandbox/src/actors/sender.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { actor } from "rivetkit";
-
-export interface ReceivedMessage {
-	name: string;
-	body: unknown;
-	receivedAt: number;
-}
-
-export const sender = actor({
-	state: {
-		messages: [] as ReceivedMessage[],
-	},
-	actions: {
-		getMessages(c): ReceivedMessage[] {
-			return c.state.messages;
-		},
-		async receiveOne(c) {
-			const msg = await c.queue.next("task", { timeout: 100 });
-			if (msg) {
-				const received: ReceivedMessage = {
-					name: msg.name,
-					body: msg.body,
-					receivedAt: Date.now(),
-				};
-				c.state.messages.push(received);
-				c.broadcast("messageReceived", c.state.messages);
-				return received;
-			}
-			return null;
-		},
-		clearMessages(c) {
-			c.state.messages = [];
-			c.broadcast("messageReceived", c.state.messages);
-		},
-	},
-});
diff --git a/examples/queue-sandbox/src/actors/timeout.ts b/examples/queue-sandbox/src/actors/timeout.ts
deleted file mode 100644
index be0ff8fea7..0000000000
--- a/examples/queue-sandbox/src/actors/timeout.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { actor } from "rivetkit";
-
-export interface TimeoutResult {
-	timedOut: boolean;
-	message?: unknown;
-	waitedMs: number;
-}
-
-export interface TimeoutState {
-	lastResult: TimeoutResult | null;
-	waitStartedAt: number | null;
-}
-
-export const timeout = actor({
-	state: {
-		lastResult: null as TimeoutResult | null,
-		waitStartedAt: null as number | null,
-	},
-	actions: {
-		async waitForMessage(c, timeoutMs: number): Promise<TimeoutResult> {
-			const startedAt = Date.now();
-			c.state.waitStartedAt = startedAt;
-			c.broadcast("waitStarted", { startedAt, timeoutMs });
-
-			const msg = await c.queue.next("work", { timeout: timeoutMs });
-
-			const waitedMs = Date.now() - startedAt;
-			const result: TimeoutResult = msg
-				? { timedOut: false, message: msg.body, waitedMs }
-				: { timedOut: true, waitedMs };
-
-			c.state.lastResult = result;
-			c.state.waitStartedAt = null;
-			c.broadcast("waitCompleted", result);
-			return result;
-		},
-		getState(c): TimeoutState {
-			return {
-				lastResult: c.state.lastResult,
-				waitStartedAt: c.state.waitStartedAt,
-			};
-		},
-	},
-});
diff --git a/examples/queue-sandbox/src/actors/worker.ts b/examples/queue-sandbox/src/actors/worker.ts
deleted file mode 100644
index e7b710f5dc..0000000000
--- a/examples/queue-sandbox/src/actors/worker.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { actor } from "rivetkit";
-
-export interface WorkerState {
-	status: "idle" | "running";
-	processed: number;
-	lastJob: unknown;
-}
-
-export const worker = actor({
-	state: {
-		status: "idle" as "idle" | "running",
-		processed: 0,
-		lastJob: null as unknown,
-	},
-	async run(c) {
-		c.state.status = "running";
-		c.broadcast("statusChanged", {
-			status: c.state.status,
-			processed: c.state.processed,
-		});
-
-		while (!c.abortSignal.aborted) {
-			const job = await c.queue.next("jobs", { timeout: 1000 });
-			if (job) {
-				c.state.processed += 1;
-				c.state.lastJob = job.body;
-				c.broadcast("jobProcessed", {
-					processed: c.state.processed,
-					job: job.body,
-				});
-			}
-		}
-
-		c.state.status = "idle";
-	},
-	actions: {
-		getState(c): WorkerState {
-			return {
-				status: c.state.status,
-				processed: c.state.processed,
-				lastJob: c.state.lastJob,
-			};
-		},
-	},
-});
diff --git a/examples/queue-sandbox/src/server.ts b/examples/queue-sandbox/src/server.ts
deleted file mode 100644
index 95c8895f94..0000000000
--- a/examples/queue-sandbox/src/server.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Hono } from "hono";
-import { registry } from "./actors.ts";
-
-const app = new Hono();
-app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
-export default app;
diff --git a/examples/queue-sandbox/tsconfig.json b/examples/queue-sandbox/tsconfig.json
deleted file mode 100644
index 081970ac06..0000000000
--- a/examples/queue-sandbox/tsconfig.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "esnext",
-		"lib": ["esnext", "dom"],
-		"jsx": "react-jsx",
-		"module": "esnext",
-		"moduleResolution": "bundler",
-		"types": ["node", "vite/client"],
-		"resolveJsonModule": true,
-		"allowJs": true,
-		"checkJs": false,
-		"noEmit": true,
-		"isolatedModules": true,
-		"allowSyntheticDefaultImports": true,
-		"forceConsistentCasingInFileNames": true,
-		"strict": true,
-		"noImplicitAny": false,
-		"skipLibCheck": true,
-		"allowImportingTsExtensions": true,
-		"rewriteRelativeImportExtensions": true
-	},
-	"include": ["src/**/*", "frontend/**/*"]
-}
diff --git a/examples/queue-sandbox/turbo.json b/examples/queue-sandbox/turbo.json
deleted file mode 100644
index c5e71016d3..0000000000
--- a/examples/queue-sandbox/turbo.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-	"$schema": "https://turbo.build/schema.json",
-	"extends": ["//"],
-	"tasks": {
-		"build": {
-			"dependsOn": ["@rivetkit/react#build", "rivetkit#build"]
-		}
-	}
-}
diff --git a/examples/queue-sandbox/vite.config.ts b/examples/queue-sandbox/vite.config.ts
deleted file mode 100644
index 06dae893f5..0000000000
--- a/examples/queue-sandbox/vite.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import srvx from "vite-plugin-srvx";
-
-export default defineConfig({
-	plugins: [react(), ...srvx({ entry: "src/server.ts" })],
-});
diff --git a/examples/queue-sandbox-vercel/.gitignore b/examples/sandbox/.gitignore
similarity index 64%
rename from examples/queue-sandbox-vercel/.gitignore
rename to examples/sandbox/.gitignore
index e28f3d79db..dc6f607390 100644
--- a/examples/queue-sandbox-vercel/.gitignore
+++ b/examples/sandbox/.gitignore
@@ -1,4 +1,2 @@
 .actorcore
 node_modules
-dist
-.vercel
diff --git a/examples/sandbox/README.md b/examples/sandbox/README.md
new file mode 100644
index 0000000000..202910d159
--- /dev/null
+++ b/examples/sandbox/README.md
@@ -0,0 +1,39 @@
+# Sandbox
+
+Unified sandbox showcasing Rivet Actor features with a single registry, grouped navigation, and interactive demos.
+
+## Getting Started
+
+```bash
+cd examples/sandbox
+pnpm install
+pnpm dev
+```
+
+## Features
+
+- Unified registry that aggregates actor fixtures and example actors
+- Sidebar navigation grouped by core actor feature areas
+- Action runner and event listener for quick experimentation
+- Raw HTTP and WebSocket demos for handler-based actors
+- Workflow and queue pattern coverage in a single sandbox
+
+## Prerequisites
+
+- OpenAI API key (set `OPENAI_API_KEY`) for the AI actor demo
+
+## Implementation
+
+The sandbox registry imports fixtures and example actors into one setup so each page can expose a curated subset.
+
+See the registry in [`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox/src/actors.ts) and the UI in [`frontend/App.tsx`](https://github.com/rivet-dev/rivet/tree/main/examples/sandbox/frontend/App.tsx).
+
+## Resources
+
+Read more about [Rivet Actors](https://rivet.dev/docs/actors),
+[actions](https://rivet.dev/docs/actors/actions), and
+[connections](https://rivet.dev/docs/actors/connections).
+
+## License
+
+MIT
diff --git a/examples/sandbox/frontend/App.tsx b/examples/sandbox/frontend/App.tsx
new file mode 100644
index 0000000000..4b358e18eb
--- /dev/null
+++ b/examples/sandbox/frontend/App.tsx
@@ -0,0 +1,810 @@
+import { createRivetKit } from "@rivetkit/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { registry } from "../src/actors.ts";
+import {
+	ACTION_TEMPLATES,
+	type ActionTemplate,
+	PAGE_GROUPS,
+	PAGE_INDEX,
+	type PageConfig,
+} from "./page-data.ts";
+
+const { useActor } = createRivetKit<typeof registry>(
+	`${location.origin}/api/rivet`,
+);
+
+type JsonResult<T> = { ok: true; value: T } | { ok: false; error: string };
+
+function parseJson<T>(value: string): JsonResult<T> {
+	try {
+		const parsed = JSON.parse(value) as T;
+		return { ok: true, value: parsed };
+	} catch (error) {
+		return {
+			ok: false,
+			error: error instanceof Error ? error.message : "Invalid JSON",
+		};
+	}
+}
+
+function parseKey(value: string): JsonResult<string | string[]> {
+	const trimmed = value.trim();
+	if (trimmed.startsWith("[")) {
+		return parseJson<string[]>(trimmed);
+	}
+	return { ok: true, value: trimmed || "demo" };
+}
+
+function formatJson(value: unknown) {
+	return JSON.stringify(value, null, 2);
+}
+
+function usePersistedState<T>(key: string, initial: T) {
+	const [state, setState] = useState<T>(() => {
+		const stored = localStorage.getItem(key);
+		return stored ? (JSON.parse(stored) as T) : initial;
+	});
+
+	useEffect(() => {
+		localStorage.setItem(key, JSON.stringify(state));
+	}, [key, state]);
+
+	return [state, setState] as const;
+}
+
+function resolvePage(pageId: string) {
+	return PAGE_INDEX.find((page) => page.id === pageId) ?? PAGE_INDEX[0];
+}
+
+function formatActorName(name: string) {
+	return name
+		.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+		.replace(/-/g, " ")
+		.replace(/_/g, " ")
+		.replace(/^\w/, (char) => char.toUpperCase());
+}
+
+export function App() {
+	const [activePageId, setActivePageId] = usePersistedState(
+		"sandbox:page",
+		PAGE_GROUPS[0].pages[0].id,
+	);
+	const activePage = resolvePage(activePageId);
+
+	return (
+		<div className="app">
+			<aside className="sidebar">
+				<div>
+					<h1>Actor Sandbox</h1>
+					<p className="subtitle">
+						Explore every Rivet Actor feature
+					</p>
+				</div>
+
+				<div className="mobile-select">
+					<label htmlFor="page-select">Page</label>
+					<select
+						id="page-select"
+						value={activePage.id}
+						onChange={(event) =>
+							setActivePageId(event.target.value)
+						}
+					>
+						{PAGE_GROUPS.map((group) => (
+							<optgroup key={group.id} label={group.title}>
+								{group.pages.map((page) => (
+									<option key={page.id} value={page.id}>
+										{page.title}
+									</option>
+								))}
+							</optgroup>
+						))}
+					</select>
+				</div>
+
+				{PAGE_GROUPS.map((group) => (
+					<div className="nav-group" key={group.id}>
+						<div className="nav-group-title">{group.title}</div>
+						{group.pages.map((page) => (
+							<button
+								key={page.id}
+								className={`nav-button ${page.id === activePage.id ? "active" : ""}`}
+								onClick={() => setActivePageId(page.id)}
+								type="button"
+							>
+								{page.title}
+							</button>
+						))}
+					</div>
+				))}
+			</aside>
+
+			<main className="content">
+				<header className="page-header">
+					<h2 className="page-title">{activePage.title}</h2>
+					<p className="page-description">{activePage.description}</p>
+					{activePage.docs.length > 0 && (
+						<div className="doc-links">
+							{activePage.docs.map((doc) => (
+								<a
+									key={doc.href}
+									className="doc-link"
+									href={doc.href}
+									target="_blank"
+									rel="noreferrer"
+								>
+									{doc.label}
+								</a>
+							))}
+						</div>
+					)}
+				</header>
+
+				<InteractivePanel page={activePage} />
+
+				<section className="card">
+					<div>
+						<h3 className="card-title">Code Snippet</h3>
+						<p className="card-subtitle">
+							Use this snippet as a starting point for the actor
+							features in this page.
+						</p>
+					</div>
+					<pre className="code-block">{activePage.snippet}</pre>
+				</section>
+			</main>
+		</div>
+	);
+}
+
+function InteractivePanel({ page }: { page: PageConfig }) {
+	if (page.actors.length === 0) {
+		return <ConfigPlayground />;
+	}
+
+	if (page.demo === "raw-http") {
+		return <RawHttpPanel page={page} />;
+	}
+
+	if (page.demo === "raw-websocket") {
+		return <RawWebSocketPanel page={page} />;
+	}
+
+	return <ActionPanel page={page} />;
+}
+
+function ConfigPlayground() {
+	const [jsonInput, setJsonInput] = useState(
+		'{\n  "key": ["demo"],\n  "params": {\n    "region": "local"\n  }\n}',
+	);
+	const parsed = parseJson<Record<string, unknown>>(jsonInput);
+
+	return (
+		<section className="card">
+			<div>
+				<h3 className="card-title">Configuration Playground</h3>
+				<p className="card-subtitle">
+					Edit JSON to explore how actor configuration payloads are
+					shaped.
+				</p>
+			</div>
+			<div className="demo-grid">
+				<div className="form-row">
+					<label htmlFor="config-json">Configuration JSON</label>
+					<textarea
+						id="config-json"
+						value={jsonInput}
+						onChange={(event) => setJsonInput(event.target.value)}
+					/>
+				</div>
+				<div className="form-row">
+					<div className="card-subtitle">Parsed Output</div>
+					<div className="code-block">
+						{parsed.ok ? formatJson(parsed.value) : parsed.error}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function ActionPanel({ page }: { page: PageConfig }) {
+	const [selectedActor, setSelectedActor] = useState(page.actors[0] ?? "");
+
+	useEffect(() => {
+		setSelectedActor(page.actors[0] ?? "");
+	}, [page.id, page.actors]);
+
+	const [keyInput, setKeyInput] = usePersistedState(
+		`sandbox:${page.id}:key`,
+		`demo-${page.id}`,
+	);
+	const [paramsInput, setParamsInput] = usePersistedState(
+		`sandbox:${page.id}:params`,
+		"{}",
+	);
+	const [createInput, setCreateInput] = usePersistedState(
+		`sandbox:${page.id}:input`,
+		"{}",
+	);
+
+	const parsedKey = useMemo(() => parseKey(keyInput), [keyInput]);
+	const parsedParams = useMemo(
+		() => parseJson<Record<string, string>>(paramsInput),
+		[paramsInput],
+	);
+	const parsedInput = useMemo(
+		() => parseJson<unknown>(createInput),
+		[createInput],
+	);
+
+	const resolvedParams =
+		parsedParams.ok && paramsInput.trim() !== "{}"
+			? parsedParams.value
+			: undefined;
+	const resolvedInput =
+		parsedInput.ok && createInput.trim() !== "{}"
+			? parsedInput.value
+			: undefined;
+
+	const actor = useActor({
+		name: selectedActor as keyof typeof registry,
+		key: parsedKey.ok ? parsedKey.value : "demo",
+		params: resolvedParams,
+		createWithInput: resolvedInput,
+	});
+
+	const templates = ACTION_TEMPLATES[selectedActor] ?? [];
+
+	return (
+		<section className="card">
+			<div>
+				<h3 className="card-title">Interactive Demo</h3>
+				<p className="card-subtitle">
+					Connect to an actor and invoke actions with custom payloads.
+				</p>
+			</div>
+			<div className="demo-grid">
+				<div className="form-row">
+					<label htmlFor="actor-select">Actor</label>
+					<select
+						id="actor-select"
+						value={selectedActor}
+						onChange={(event) =>
+							setSelectedActor(event.target.value)
+						}
+					>
+						{page.actors.map((actorName) => (
+							<option key={actorName} value={actorName}>
+								{formatActorName(actorName)}
+							</option>
+						))}
+					</select>
+				</div>
+				<div className="form-row">
+					<label htmlFor="actor-key">Actor Key</label>
+					<input
+						id="actor-key"
+						value={keyInput}
+						onChange={(event) => setKeyInput(event.target.value)}
+						placeholder='"demo" or ["team", "alpha"]'
+					/>
+					{!parsedKey.ok && (
+						<div className="notice">
+							Key JSON error: {parsedKey.error}
+						</div>
+					)}
+				</div>
+				<div className="form-row">
+					<label htmlFor="actor-params">
+						Connection Params (JSON)
+					</label>
+					<textarea
+						id="actor-params"
+						value={paramsInput}
+						onChange={(event) => setParamsInput(event.target.value)}
+					/>
+					{!parsedParams.ok && (
+						<div className="notice">
+							Params JSON error: {parsedParams.error}
+						</div>
+					)}
+				</div>
+				<div className="form-row">
+					<label htmlFor="actor-input">Create Input (JSON)</label>
+					<textarea
+						id="actor-input"
+						value={createInput}
+						onChange={(event) => setCreateInput(event.target.value)}
+					/>
+					{!parsedInput.ok && (
+						<div className="notice">
+							Input JSON error: {parsedInput.error}
+						</div>
+					)}
+				</div>
+			</div>
+
+			<div className="status-pill">
+				<span
+					className={`status-dot ${
+						actor.connStatus === "connected"
+							? "connected"
+							: actor.error
+								? "error"
+								: ""
+					}`}
+				/>
+				<span>{actor.connStatus ?? "idle"}</span>
+			</div>
+
+			<ActionRunner actor={actor} templates={templates} />
+			<EventListener actor={actor} />
+		</section>
+	);
+}
+
+function ActionRunner({
+	actor,
+	templates,
+}: {
+	actor: ReturnType<typeof useActor>;
+	templates: ActionTemplate[];
+}) {
+	const initialTemplate = templates[0];
+	const [actionName, setActionName] = useState(initialTemplate?.action ?? "");
+	const [argsInput, setArgsInput] = useState(
+		initialTemplate ? formatJson(initialTemplate.args) : "[]",
+	);
+	const [result, setResult] = useState<string>("");
+	const [error, setError] = useState<string>("");
+	const [isRunning, setIsRunning] = useState(false);
+
+	useEffect(() => {
+		if (!initialTemplate) {
+			setActionName("");
+			setArgsInput("[]");
+			return;
+		}
+		setActionName(initialTemplate.action);
+		setArgsInput(formatJson(initialTemplate.args));
+	}, [initialTemplate]);
+
+	const parsedArgs = useMemo(
+		() => parseJson<unknown[]>(argsInput),
+		[argsInput],
+	);
+
+	const runAction = async () => {
+		setError("");
+		setResult("");
+		if (!actor.handle) {
+			setError("Actor handle is not ready.");
+			return;
+		}
+		if (!actionName.trim()) {
+			setError("Enter an action name to run.");
+			return;
+		}
+		if (!parsedArgs.ok) {
+			setError(parsedArgs.error);
+			return;
+		}
+
+		setIsRunning(true);
+		try {
+			const response = await actor.handle.action({
+				name: actionName,
+				args: parsedArgs.value,
+			});
+			setResult(formatJson(response));
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setIsRunning(false);
+		}
+	};
+
+	const applyTemplate = (template: ActionTemplate) => {
+		setActionName(template.action);
+		setArgsInput(formatJson(template.args));
+	};
+
+	return (
+		<div className="card">
+			<div>
+				<h4 className="card-title">Actions</h4>
+				<p className="card-subtitle">
+					Call an action by name and pass JSON arguments.
+				</p>
+			</div>
+			{templates.length > 0 && (
+				<div className="button-row">
+					{templates.map((template) => (
+						<button
+							key={template.label}
+							onClick={() => applyTemplate(template)}
+							className="secondary"
+							type="button"
+						>
+							{template.label}
+						</button>
+					))}
+				</div>
+			)}
+			<div className="demo-grid">
+				<div className="form-row">
+					<label htmlFor="action-name">Action Name</label>
+					<input
+						id="action-name"
+						value={actionName}
+						onChange={(event) => setActionName(event.target.value)}
+						placeholder="increment"
+					/>
+				</div>
+				<div className="form-row">
+					<label htmlFor="action-args">Args (JSON array)</label>
+					<textarea
+						id="action-args"
+						value={argsInput}
+						onChange={(event) => setArgsInput(event.target.value)}
+					/>
+					{!parsedArgs.ok && (
+						<div className="notice">
+							Args JSON error: {parsedArgs.error}
+						</div>
+					)}
+				</div>
+			</div>
+			<div className="button-row">
+				<button
+					className="primary"
+					onClick={runAction}
+					disabled={!actor.handle || isRunning}
+					type="button"
+				>
+					{isRunning ? "Running..." : "Run Action"}
+				</button>
+				<button
+					className="secondary"
+					onClick={() => {
+						setResult("");
+						setError("");
+					}}
+					type="button"
+				>
+					Clear Output
+				</button>
+			</div>
+			{error && <div className="notice">Error: {error}</div>}
+			{result && <div className="code-block">{result}</div>}
+		</div>
+	);
+}
+
+function EventListener({ actor }: { actor: ReturnType<typeof useActor> }) {
+	const [eventName, setEventName] = useState("newCount");
+	const [isListening, setIsListening] = useState(false);
+	const [events, setEvents] = useState<string[]>([]);
+
+	useEffect(() => {
+		if (!isListening || !eventName.trim() || !actor.connection) return;
+
+		const stop = actor.connection.on(eventName, (...args: unknown[]) => {
+			setEvents((prev) => [
+				`${eventName}: ${formatJson(args.length === 1 ? args[0] : args)}`,
+				...prev,
+			]);
+		});
+
+		return () => {
+			stop();
+		};
+	}, [actor.connection, eventName, isListening]);
+
+	return (
+		<div className="card">
+			<div>
+				<h4 className="card-title">Events</h4>
+				<p className="card-subtitle">
+					Listen for broadcast events while the connection is active.
+				</p>
+			</div>
+			<div className="demo-grid">
+				<div className="form-row">
+					<label htmlFor="event-name">Event Name</label>
+					<input
+						id="event-name"
+						value={eventName}
+						onChange={(event) => setEventName(event.target.value)}
+						placeholder="newCount"
+					/>
+				</div>
+				<div className="form-row">
+					<div className="card-subtitle">Listening</div>
+					<div className="button-row">
+						<button
+							className={isListening ? "primary" : "secondary"}
+							onClick={() => setIsListening((prev) => !prev)}
+							type="button"
+						>
+							{isListening ? "Stop" : "Start"}
+						</button>
+						<button
+							className="secondary"
+							onClick={() => setEvents([])}
+							type="button"
+						>
+							Clear
+						</button>
+					</div>
+				</div>
+			</div>
+			<div className="event-log">
+				{events.length === 0
+					? "No events yet."
+					: events.map((entry, index) => (
+							<div
+								className="event-entry"
+								key={`${entry}-${index}`}
+							>
+								{entry}
+							</div>
+						))}
+			</div>
+		</div>
+	);
+}
+
+function RawHttpPanel({ page }: { page: PageConfig }) {
+	const [selectedActor, setSelectedActor] = useState(page.actors[0] ?? "");
+	const [path, setPath] = useState(
+		page.rawHttpDefaults?.path ?? "/api/hello",
+	);
+	const [method, setMethod] = useState(page.rawHttpDefaults?.method ?? "GET");
+	const [body, setBody] = useState(page.rawHttpDefaults?.body ?? "");
+	const [response, setResponse] = useState("");
+	const [error, setError] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	useEffect(() => {
+		setSelectedActor(page.actors[0] ?? "");
+		setPath(page.rawHttpDefaults?.path ?? "/api/hello");
+		setMethod(page.rawHttpDefaults?.method ?? "GET");
+		setBody(page.rawHttpDefaults?.body ?? "");
+	}, [page.id, page.actors, page.rawHttpDefaults]);
+
+	const actor = useActor({
+		name: selectedActor as keyof typeof registry,
+		key: ["demo"],
+	});
+
+	const sendRequest = async () => {
+		setError("");
+		setResponse("");
+		if (!actor.handle) {
+			setError("Actor handle is not ready.");
+			return;
+		}
+		setIsLoading(true);
+		try {
+			const response = await actor.handle.fetch(path, {
+				method,
+				body: method === "GET" ? undefined : body || undefined,
+				headers:
+					method === "GET"
+						? undefined
+						: { "Content-Type": "application/json" },
+			});
+			const text = await response.text();
+			setResponse(`Status ${response.status}\n${text}`);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<section className="card">
+			<div>
+				<h3 className="card-title">Raw HTTP Demo</h3>
+				<p className="card-subtitle">
+					Send raw HTTP requests to actor request handlers.
+				</p>
+			</div>
+			<div className="demo-grid">
+				<div className="form-row">
+					<label htmlFor="raw-http-actor">Actor</label>
+					<select
+						id="raw-http-actor"
+						value={selectedActor}
+						onChange={(event) =>
+							setSelectedActor(event.target.value)
+						}
+					>
+						{page.actors.map((actorName) => (
+							<option key={actorName} value={actorName}>
+								{formatActorName(actorName)}
+							</option>
+						))}
+					</select>
+				</div>
+				<div className="form-row">
+					<label htmlFor="raw-http-method">Method</label>
+					<select
+						id="raw-http-method"
+						value={method}
+						onChange={(event) => setMethod(event.target.value)}
+					>
+						{["GET", "POST", "PUT", "DELETE"].map((option) => (
+							<option key={option} value={option}>
+								{option}
+							</option>
+						))}
+					</select>
+				</div>
+				<div className="form-row">
+					<label htmlFor="raw-http-path">Path</label>
+					<input
+						id="raw-http-path"
+						value={path}
+						onChange={(event) => setPath(event.target.value)}
+					/>
+				</div>
+				<div className="form-row">
+					<label htmlFor="raw-http-body">Body</label>
+					<textarea
+						id="raw-http-body"
+						value={body}
+						onChange={(event) => setBody(event.target.value)}
+						placeholder='{"count": 1}'
+					/>
+				</div>
+			</div>
+			<div className="button-row">
+				<button
+					className="primary"
+					onClick={sendRequest}
+					disabled={!actor.handle || isLoading}
+					type="button"
+				>
+					{isLoading ? "Sending..." : "Send Request"}
+				</button>
+			</div>
+			{error && <div className="notice">Error: {error}</div>}
+			{response && <div className="code-block">{response}</div>}
+		</section>
+	);
+}
+
+function RawWebSocketPanel({ page }: { page: PageConfig }) {
+	const [selectedActor, setSelectedActor] = useState(page.actors[0] ?? "");
+	const [message, setMessage] = useState('{"type": "ping"}');
+	const [log, setLog] = useState<string[]>([]);
+	const socketRef = useRef<WebSocket | null>(null);
+
+	useEffect(() => {
+		setSelectedActor(page.actors[0] ?? "");
+	}, [page.id, page.actors]);
+
+	const actor = useActor({
+		name: selectedActor as keyof typeof registry,
+		key: ["demo"],
+	});
+
+	const connect = async () => {
+		if (!actor.handle) return;
+		if (socketRef.current) return;
+		const socket = await actor.handle.webSocket();
+		socketRef.current = socket;
+		setLog((prev) => ["connected", ...prev]);
+		socket.addEventListener("message", (event: MessageEvent) => {
+			setLog((prev) => [`message: ${event.data}`, ...prev]);
+		});
+		socket.addEventListener("close", () => {
+			setLog((prev) => ["disconnected", ...prev]);
+			socketRef.current = null;
+		});
+	};
+
+	const disconnect = () => {
+		socketRef.current?.close();
+		socketRef.current = null;
+	};
+
+	const sendMessage = () => {
+		if (!socketRef.current) return;
+		socketRef.current.send(message);
+		setLog((prev) => [`sent: ${message}`, ...prev]);
+	};
+
+	const sendBinary = () => {
+		if (!socketRef.current) return;
+		socketRef.current.send(new Uint8Array([1, 2, 3, 4]));
+		setLog((prev) => ["sent: <binary 1,2,3,4>", ...prev]);
+	};
+
+	return (
+		<section className="card">
+			<div>
+				<h3 className="card-title">Raw WebSocket Demo</h3>
+				<p className="card-subtitle">
+					Connect to a raw WebSocket handler and send messages.
+				</p>
+			</div>
+			<div className="demo-grid">
+				<div className="form-row">
+					<label htmlFor="raw-ws-actor">Actor</label>
+					<select
+						id="raw-ws-actor"
+						value={selectedActor}
+						onChange={(event) =>
+							setSelectedActor(event.target.value)
+						}
+					>
+						{page.actors.map((actorName) => (
+							<option key={actorName} value={actorName}>
+								{formatActorName(actorName)}
+							</option>
+						))}
+					</select>
+				</div>
+				<div className="form-row">
+					<label htmlFor="raw-ws-message">Message</label>
+					<textarea
+						id="raw-ws-message"
+						value={message}
+						onChange={(event) => setMessage(event.target.value)}
+					/>
+				</div>
+			</div>
+			<div className="button-row">
+				<button
+					className="primary"
+					onClick={connect}
+					disabled={!actor.handle || Boolean(socketRef.current)}
+					type="button"
+				>
+					Connect
+				</button>
+				<button
+					className="secondary"
+					onClick={disconnect}
+					disabled={!socketRef.current}
+					type="button"
+				>
+					Disconnect
+				</button>
+				<button
+					className="secondary"
+					onClick={sendMessage}
+					disabled={!socketRef.current}
+					type="button"
+				>
+					Send Message
+				</button>
+				<button
+					className="ghost"
+					onClick={sendBinary}
+					disabled={!socketRef.current}
+					type="button"
+				>
+					Send Binary
+				</button>
+			</div>
+			<div className="event-log">
+				{log.length === 0
+					? "No WebSocket activity yet."
+					: log.map((entry, index) => (
+							<div
+								className="event-entry"
+								key={`${entry}-${index}`}
+							>
+								{entry}
+							</div>
+						))}
+			</div>
+		</section>
+	);
+}
diff --git a/examples/queue-sandbox-vercel/frontend/main.tsx b/examples/sandbox/frontend/main.tsx
similarity index 100%
rename from examples/queue-sandbox-vercel/frontend/main.tsx
rename to examples/sandbox/frontend/main.tsx
diff --git a/examples/sandbox/frontend/page-data.ts b/examples/sandbox/frontend/page-data.ts
new file mode 100644
index 0000000000..672172bcfd
--- /dev/null
+++ b/examples/sandbox/frontend/page-data.ts
@@ -0,0 +1,1054 @@
+export type DocLink = {
+	label: string;
+	href: string;
+};
+
+export type ActionTemplate = {
+	label: string;
+	action: string;
+	args: unknown[];
+	description?: string;
+};
+
+export type DemoType = "actions" | "config" | "raw-http" | "raw-websocket";
+
+export type PageConfig = {
+	id: string;
+	title: string;
+	description: string;
+	docs: DocLink[];
+	actors: string[];
+	snippet: string;
+	demo?: DemoType;
+	rawHttpDefaults?: {
+		path: string;
+		method: string;
+		body?: string;
+	};
+};
+
+export type PageGroup = {
+	id: string;
+	title: string;
+	pages: PageConfig[];
+};
+
+const SNIPPETS = {
+	registry: `import { setup } from "rivetkit";
+
+export const registry = setup({
+	use: { counter, counterConn },
+});`,
+	actions: `const actor = client.counter.getOrCreate(["demo"]);
+await actor.increment(1);
+const value = await actor.getCount();`,
+	state: `export const counter = actor({
+	state: { count: 0 },
+	actions: {
+		increment: (c) => ++c.state.count,
+	},
+});`,
+	events: `c.broadcast("newCount", c.state.count);
+actor.useEvent("newCount", setCount);`,
+	params: `const actor = useActor({
+	name: "counterWithParams",
+	key: ["demo"],
+	params: { region: "us-east" },
+});`,
+	metadata: `const metadata = await actor.getMetadata();
+console.log(metadata.tags, metadata.region);`,
+	vars: `export const dynamicVarActor = actor({
+	createVars: () => ({ random: Math.random() }),
+	actions: { getVars: (c) => c.vars },
+});`,
+	kv: `await actor.putText("greeting", "hello");
+const value = await actor.getText("greeting");`,
+	queue: `await actor.queue.work.send({ id: "task-1" });
+const message = await actor.receiveOne("work");`,
+	workflow: `const workflow = client.order.getOrCreate([orderId]);
+await workflow.getOrder();`,
+	rawHttp: `const response = await actor.fetch("/api/hello");
+const data = await response.json();`,
+	rawWebSocket: `const socket = actor.webSocket("/chat");
+socket.send(JSON.stringify({ type: "ping" }));`,
+	connections: `actor.useEvent("userConnected", (event) => {
+	console.log(event.id);
+});`,
+	lifecycle: `export const counterWithLifecycle = actor({
+	onConnect: (c) => c.state.events.push("onConnect"),
+	actions: { getEvents: (c) => c.state.events },
+});`,
+	destroy: `await client.destroyActor.getOrCreate(["demo"]).destroy();`,
+	testing: `const { client } = await setupTest(ctx, registry);
+const actor = client.counter.getOrCreate(["demo"]);`,
+	ai: `const reply = await actor.sendMessage("Hello AI");
+actor.useEvent("messageReceived", console.log);`,
+};
+
+export const ACTION_TEMPLATES: Record<string, ActionTemplate[]> = {
+	counter: [
+		{ label: "Increment", action: "increment", args: [1] },
+		{ label: "Set Count", action: "setCount", args: [10] },
+		{ label: "Get Count", action: "getCount", args: [] },
+	],
+	counterConn: [
+		{ label: "Increment", action: "increment", args: [1] },
+		{ label: "Get Count", action: "getCount", args: [] },
+		{ label: "Connections", action: "getConnectionCount", args: [] },
+	],
+	inputActor: [{ label: "Get Inputs", action: "getInputs", args: [] }],
+	syncActionActor: [
+		{ label: "Increment", action: "increment", args: [1] },
+		{ label: "Get Info", action: "getInfo", args: [] },
+	],
+	asyncActionActor: [
+		{ label: "Delayed", action: "delayedIncrement", args: [1] },
+		{ label: "Fetch Data", action: "fetchData", args: ["demo"] },
+	],
+	promiseActor: [
+		{ label: "Resolved", action: "resolvedPromise", args: [] },
+		{ label: "Delayed", action: "delayedPromise", args: [] },
+	],
+	shortTimeoutActor: [
+		{ label: "Quick", action: "quickAction", args: [] },
+		{ label: "Slow", action: "slowAction", args: [] },
+	],
+	longTimeoutActor: [{ label: "Delayed", action: "delayedAction", args: [] }],
+	defaultTimeoutActor: [
+		{ label: "Normal", action: "normalAction", args: [] },
+	],
+	syncTimeoutActor: [
+		{ label: "Sync Action", action: "syncAction", args: [] },
+	],
+	customTimeoutActor: [
+		{ label: "Quick", action: "quickAction", args: [] },
+		{ label: "Slow", action: "slowAction", args: [] },
+	],
+	errorHandlingActor: [
+		{ label: "Throw Simple", action: "throwSimpleError", args: [] },
+		{ label: "Throw Detailed", action: "throwDetailedError", args: [] },
+		{ label: "Success", action: "successfulAction", args: [] },
+	],
+	onStateChangeActor: [
+		{ label: "Set Value", action: "setValue", args: [5] },
+		{ label: "Get Value", action: "getValue", args: [] },
+		{ label: "Change Count", action: "getChangeCount", args: [] },
+	],
+	metadataActor: [
+		{ label: "Set Tags", action: "setupTestTags", args: [{ env: "demo" }] },
+		{ label: "Get Metadata", action: "getMetadata", args: [] },
+	],
+	staticVarActor: [{ label: "Get Vars", action: "getVars", args: [] }],
+	nestedVarActor: [
+		{ label: "Modify Nested", action: "modifyNested", args: [] },
+		{ label: "Get Vars", action: "getVars", args: [] },
+	],
+	dynamicVarActor: [{ label: "Get Vars", action: "getVars", args: [] }],
+	uniqueVarActor: [{ label: "Get Vars", action: "getVars", args: [] }],
+	driverCtxActor: [{ label: "Get Vars", action: "getVars", args: [] }],
+	kvActor: [
+		{ label: "Put Text", action: "putText", args: ["greeting", "hello"] },
+		{ label: "Get Text", action: "getText", args: ["greeting"] },
+	],
+	largePayloadActor: [
+		{
+			label: "Large Response",
+			action: "getLargeResponse",
+			args: [50],
+		},
+	],
+	largePayloadConnActor: [
+		{
+			label: "Large Request",
+			action: "processLargeRequest",
+			args: [{ items: ["a", "b", "c"] }],
+		},
+		{ label: "Last Size", action: "getLastRequestSize", args: [] },
+	],
+	connStateActor: [
+		{ label: "Conn State", action: "getConnectionState", args: [] },
+		{ label: "Shared +1", action: "incrementSharedCounter", args: [1] },
+	],
+	counterWithParams: [
+		{ label: "Increment", action: "increment", args: [1] },
+		{ label: "Initializers", action: "getInitializers", args: [] },
+	],
+	rejectConnectionActor: [{ label: "Ping", action: "ping", args: [] }],
+	requestAccessActor: [
+		{ label: "Get Request", action: "getRequestInfo", args: [] },
+	],
+	counterWithLifecycle: [
+		{ label: "Get Events", action: "getEvents", args: [] },
+		{ label: "Increment", action: "increment", args: [1] },
+	],
+	runWithTicks: [{ label: "Get State", action: "getState", args: [] }],
+	runWithQueueConsumer: [
+		{ label: "Get State", action: "getState", args: [] },
+	],
+	runWithEarlyExit: [{ label: "Get State", action: "getState", args: [] }],
+	runWithError: [{ label: "Get State", action: "getState", args: [] }],
+	runWithoutHandler: [{ label: "Get State", action: "getState", args: [] }],
+	sleep: [
+		{ label: "Get Counts", action: "getCounts", args: [] },
+		{ label: "Trigger Sleep", action: "triggerSleep", args: [] },
+	],
+	sleepWithLongRpc: [{ label: "Get Counts", action: "getCounts", args: [] }],
+	sleepWithNoSleepOption: [
+		{ label: "Get Counts", action: "getCounts", args: [] },
+	],
+	scheduled: [
+		{ label: "Schedule +5s", action: "scheduleTaskAfter", args: [5000] },
+		{ label: "Last Run", action: "getLastRun", args: [] },
+	],
+	destroyActor: [{ label: "Destroy", action: "destroy", args: [] }],
+	destroyObserver: [
+		{ label: "Was Destroyed", action: "wasDestroyed", args: ["demo"] },
+		{ label: "Reset", action: "reset", args: [] },
+	],
+	hibernationActor: [
+		{ label: "Ping", action: "ping", args: [] },
+		{ label: "Actor Counts", action: "getActorCounts", args: [] },
+	],
+	queueActor: [
+		{ label: "Receive One", action: "receiveOne", args: ["work"] },
+	],
+	sender: [{ label: "Get Messages", action: "getMessages", args: [] }],
+	multiQueue: [{ label: "Get Messages", action: "getMessages", args: [] }],
+	timeout: [{ label: "Wait", action: "waitForMessage", args: [2000] }],
+	worker: [{ label: "Get State", action: "getState", args: [] }],
+	selfSender: [{ label: "Get State", action: "getState", args: [] }],
+	keepAwake: [{ label: "Get State", action: "getState", args: [] }],
+	order: [{ label: "Get Order", action: "getOrder", args: [] }],
+	timer: [{ label: "Get Timer", action: "getTimer", args: [] }],
+	batch: [{ label: "Get Job", action: "getJob", args: [] }],
+	approval: [
+		{ label: "Get Request", action: "getRequest", args: [] },
+		{ label: "Approve", action: "approve", args: ["Casey"] },
+	],
+	dashboard: [
+		{ label: "Get State", action: "getState", args: [] },
+		{ label: "Refresh", action: "refresh", args: [] },
+	],
+	race: [{ label: "Get Task", action: "getTask", args: [] }],
+	payment: [{ label: "Get Transaction", action: "getTransaction", args: [] }],
+	inventory: [{ label: "Get Stock", action: "getStock", args: [] }],
+	checkout: [
+		{ label: "Get Summary", action: "getSummary", args: [] },
+		{ label: "Complete", action: "completeCheckout", args: [] },
+	],
+	aiAgent: [
+		{ label: "Get Messages", action: "getMessages", args: [] },
+		{ label: "Send Message", action: "sendMessage", args: ["Hello AI"] },
+	],
+};
+
+export const PAGE_GROUPS: PageGroup[] = [
+	{
+		id: "overview",
+		title: "Overview",
+		pages: [
+			{
+				id: "welcome",
+				title: "Welcome",
+				description:
+					"Get oriented with the Actor Sandbox and how each page maps to the Rivet Actor API.",
+				docs: [],
+				actors: [],
+				snippet: SNIPPETS.registry,
+				demo: "config",
+			},
+			{
+				id: "registry-keys",
+				title: "Registry and Keys",
+				description:
+					"See how registry setup and actor keys control identity and instance reuse.",
+				docs: [
+					{
+						label: "Actor Keys",
+						href: "https://rivet.dev/docs/actors/keys",
+					},
+					{
+						label: "Registry Configuration",
+						href: "https://rivet.dev/docs/general/registry-configuration",
+					},
+				],
+				actors: ["counter", "counterConn"],
+				snippet: SNIPPETS.registry,
+			},
+		],
+	},
+	{
+		id: "core-api",
+		title: "Core API",
+		pages: [
+			{
+				id: "actor-configuration",
+				title: "Actor Configuration",
+				description:
+					"Explore config fields like timeouts, memory, and runtime options.",
+				docs: [
+					{
+						label: "Actor Configuration",
+						href: "https://rivet.dev/docs/general/actor-configuration",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.lifecycle,
+				demo: "config",
+			},
+			{
+				id: "actions",
+				title: "Actions",
+				description:
+					"Invoke sync, async, and promise-based actions with input payloads.",
+				docs: [
+					{
+						label: "Actions",
+						href: "https://rivet.dev/docs/actors/actions",
+					},
+					{
+						label: "Input",
+						href: "https://rivet.dev/docs/actors/input",
+					},
+				],
+				actors: [
+					"inputActor",
+					"syncActionActor",
+					"asyncActionActor",
+					"promiseActor",
+				],
+				snippet: SNIPPETS.actions,
+			},
+			{
+				id: "types-helper-types",
+				title: "Types and Helper Types",
+				description:
+					"Reference type helpers to keep actor interfaces end-to-end typed.",
+				docs: [
+					{
+						label: "Types",
+						href: "https://rivet.dev/docs/actors/types",
+					},
+					{
+						label: "Helper Types",
+						href: "https://rivet.dev/docs/actors/helper-types",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.actions,
+				demo: "config",
+			},
+			{
+				id: "action-timeouts",
+				title: "Action Timeouts",
+				description:
+					"Compare per-actor timeouts for fast and slow action execution.",
+				docs: [
+					{
+						label: "Errors",
+						href: "https://rivet.dev/docs/actors/errors",
+					},
+				],
+				actors: [
+					"shortTimeoutActor",
+					"longTimeoutActor",
+					"defaultTimeoutActor",
+					"syncTimeoutActor",
+					"customTimeoutActor",
+				],
+				snippet: SNIPPETS.actions,
+			},
+			{
+				id: "errors",
+				title: "Errors",
+				description:
+					"Trigger user errors and timeouts to see standardized error payloads.",
+				docs: [
+					{
+						label: "Errors",
+						href: "https://rivet.dev/docs/actors/errors",
+					},
+				],
+				actors: ["errorHandlingActor"],
+				snippet: SNIPPETS.actions,
+			},
+			{
+				id: "appearance",
+				title: "Appearance",
+				description:
+					"Review actor appearance controls for dashboards and tooling.",
+				docs: [
+					{
+						label: "Appearance",
+						href: "https://rivet.dev/docs/actors/appearance",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.registry,
+				demo: "config",
+			},
+		],
+	},
+	{
+		id: "state-storage",
+		title: "State and Storage",
+		pages: [
+			{
+				id: "state-basics",
+				title: "State Basics",
+				description:
+					"Read and mutate actor state while broadcasting updates.",
+				docs: [
+					{
+						label: "State",
+						href: "https://rivet.dev/docs/actors/state",
+					},
+				],
+				actors: ["counter"],
+				snippet: SNIPPETS.state,
+			},
+			{
+				id: "on-state-change",
+				title: "On State Change",
+				description:
+					"Track how often state changes fire with onStateChange hooks.",
+				docs: [
+					{
+						label: "Events",
+						href: "https://rivet.dev/docs/actors/events",
+					},
+				],
+				actors: ["onStateChangeActor"],
+				snippet: SNIPPETS.state,
+			},
+			{
+				id: "sharing-joining",
+				title: "Sharing and Joining State",
+				description:
+					"Coordinate shared state across actors and listeners.",
+				docs: [
+					{
+						label: "Sharing and Joining State",
+						href: "https://rivet.dev/docs/actors/sharing-and-joining-state",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.connections,
+				demo: "config",
+			},
+			{
+				id: "metadata",
+				title: "Metadata",
+				description:
+					"Inspect actor metadata like tags, regions, and names.",
+				docs: [
+					{
+						label: "Metadata",
+						href: "https://rivet.dev/docs/actors/metadata",
+					},
+				],
+				actors: ["metadataActor"],
+				snippet: SNIPPETS.metadata,
+			},
+			{
+				id: "ephemeral-variables",
+				title: "Ephemeral Variables",
+				description:
+					"Compare static, nested, and dynamic vars with driver context.",
+				docs: [
+					{
+						label: "Ephemeral Variables",
+						href: "https://rivet.dev/docs/actors/ephemeral-variables",
+					},
+				],
+				actors: [
+					"staticVarActor",
+					"nestedVarActor",
+					"dynamicVarActor",
+					"uniqueVarActor",
+					"driverCtxActor",
+				],
+				snippet: SNIPPETS.vars,
+			},
+			{
+				id: "kv-storage",
+				title: "KV Storage",
+				description:
+					"Write and read structured values from actor KV storage.",
+				docs: [
+					{ label: "KV", href: "https://rivet.dev/docs/actors/kv" },
+				],
+				actors: ["kvActor"],
+				snippet: SNIPPETS.kv,
+			},
+			{
+				id: "external-sql",
+				title: "External SQL",
+				description:
+					"Reference external SQL integration patterns for data access.",
+				docs: [
+					{
+						label: "External SQL",
+						href: "https://rivet.dev/docs/actors/external-sql",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.kv,
+				demo: "config",
+			},
+			{
+				id: "large-payloads",
+				title: "Large Payloads",
+				description: "Handle large request and response bodies safely.",
+				docs: [],
+				actors: ["largePayloadActor", "largePayloadConnActor"],
+				snippet: SNIPPETS.actions,
+			},
+		],
+	},
+	{
+		id: "realtime",
+		title: "Realtime and Connections",
+		pages: [
+			{
+				id: "connections-presence",
+				title: "Connections and Presence",
+				description:
+					"Track connection state and shared counters across clients.",
+				docs: [
+					{
+						label: "Connections",
+						href: "https://rivet.dev/docs/actors/connections",
+					},
+				],
+				actors: ["connStateActor", "counterWithParams", "counterConn"],
+				snippet: SNIPPETS.connections,
+			},
+			{
+				id: "events-broadcasts",
+				title: "Events and Broadcasts",
+				description:
+					"Listen to event broadcasts from actors in realtime.",
+				docs: [
+					{
+						label: "Events",
+						href: "https://rivet.dev/docs/actors/events",
+					},
+				],
+				actors: ["connStateActor", "counter"],
+				snippet: SNIPPETS.events,
+			},
+			{
+				id: "direct-connection",
+				title: "Direct Connection Messaging",
+				description: "Send direct messages to specific connection IDs.",
+				docs: [
+					{
+						label: "Connections",
+						href: "https://rivet.dev/docs/actors/connections",
+					},
+				],
+				actors: ["connStateActor"],
+				snippet: SNIPPETS.connections,
+			},
+			{
+				id: "connection-gating",
+				title: "Connection Gating",
+				description: "Control which clients can connect to an actor.",
+				docs: [
+					{
+						label: "Authentication",
+						href: "https://rivet.dev/docs/actors/authentication",
+					},
+				],
+				actors: ["rejectConnectionActor"],
+				snippet: SNIPPETS.connections,
+			},
+			{
+				id: "request-access",
+				title: "Request Object Access",
+				description: "Inspect raw request details inside handlers.",
+				docs: [
+					{
+						label: "Request Handler",
+						href: "https://rivet.dev/docs/actors/request-handler",
+					},
+					{
+						label: "WebSocket Handler",
+						href: "https://rivet.dev/docs/actors/websocket-handler",
+					},
+				],
+				actors: ["requestAccessActor"],
+				snippet: SNIPPETS.rawHttp,
+			},
+		],
+	},
+	{
+		id: "http-ws",
+		title: "HTTP and WebSocket",
+		pages: [
+			{
+				id: "http-api",
+				title: "HTTP API",
+				description:
+					"Route standard HTTP requests through actor handlers.",
+				docs: [
+					{
+						label: "HTTP API",
+						href: "https://rivet.dev/docs/actors/http-api",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.rawHttp,
+				demo: "config",
+			},
+			{
+				id: "request-handler",
+				title: "Request Handler",
+				description:
+					"Use onRequest to serve REST endpoints from an actor.",
+				docs: [
+					{
+						label: "Request Handler",
+						href: "https://rivet.dev/docs/actors/request-handler",
+					},
+				],
+				actors: ["rawFetchCounter"],
+				snippet: SNIPPETS.rawHttp,
+				demo: "raw-http",
+				rawHttpDefaults: { path: "/count", method: "GET" },
+			},
+			{
+				id: "websocket-handler",
+				title: "WebSocket Handler",
+				description: "Handle raw WebSocket connections in an actor.",
+				docs: [
+					{
+						label: "WebSocket Handler",
+						href: "https://rivet.dev/docs/actors/websocket-handler",
+					},
+				],
+				actors: ["rawWebSocketChatRoom"],
+				snippet: SNIPPETS.rawWebSocket,
+				demo: "raw-websocket",
+			},
+			{
+				id: "fetch-websocket-handler",
+				title: "Fetch and WebSocket Handler",
+				description:
+					"Combine fetch and WebSocket handlers on the same actor.",
+				docs: [
+					{
+						label: "Fetch and WebSocket Handler",
+						href: "https://rivet.dev/docs/actors/fetch-and-websocket-handler",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.rawWebSocket,
+				demo: "config",
+			},
+			{
+				id: "raw-http",
+				title: "Raw HTTP",
+				description:
+					"Call raw HTTP endpoints on actors without actions.",
+				docs: [],
+				actors: [
+					"rawHttpActor",
+					"rawHttpNoHandlerActor",
+					"rawHttpVoidReturnActor",
+					"rawHttpHonoActor",
+					"rawHttpRequestPropertiesActor",
+				],
+				snippet: SNIPPETS.rawHttp,
+				demo: "raw-http",
+				rawHttpDefaults: { path: "/api/hello", method: "GET" },
+			},
+			{
+				id: "raw-websocket",
+				title: "Raw WebSocket",
+				description:
+					"Open raw WebSocket connections and exchange messages.",
+				docs: [],
+				actors: ["rawWebSocketActor", "rawWebSocketBinaryActor"],
+				snippet: SNIPPETS.rawWebSocket,
+				demo: "raw-websocket",
+			},
+		],
+	},
+	{
+		id: "lifecycle",
+		title: "Lifecycle and Scheduling",
+		pages: [
+			{
+				id: "lifecycle-hooks",
+				title: "Lifecycle Hooks",
+				description: "Track connect, disconnect, and wake events.",
+				docs: [
+					{
+						label: "Lifecycle",
+						href: "https://rivet.dev/docs/actors/lifecycle",
+					},
+				],
+				actors: ["counterWithLifecycle"],
+				snippet: SNIPPETS.lifecycle,
+			},
+			{
+				id: "run-handler",
+				title: "Run Handler",
+				description: "Observe run loops, ticks, and queue consumers.",
+				docs: [
+					{
+						label: "Lifecycle",
+						href: "https://rivet.dev/docs/actors/lifecycle",
+					},
+				],
+				actors: [
+					"runWithTicks",
+					"runWithEarlyExit",
+					"runWithError",
+					"runWithoutHandler",
+					"runWithQueueConsumer",
+				],
+				snippet: SNIPPETS.lifecycle,
+			},
+			{
+				id: "sleep-wake",
+				title: "Sleep and Wake",
+				description: "Manage sleep cycles and long-running RPCs.",
+				docs: [
+					{
+						label: "Lifecycle",
+						href: "https://rivet.dev/docs/actors/lifecycle",
+					},
+				],
+				actors: ["sleep", "sleepWithLongRpc", "sleepWithNoSleepOption"],
+				snippet: SNIPPETS.lifecycle,
+			},
+			{
+				id: "schedule",
+				title: "Schedule",
+				description: "Schedule alarms and recurring work for actors.",
+				docs: [
+					{
+						label: "Schedule",
+						href: "https://rivet.dev/docs/actors/schedule",
+					},
+				],
+				actors: ["scheduled", "sleep"],
+				snippet: SNIPPETS.lifecycle,
+			},
+			{
+				id: "destroy",
+				title: "Destroy",
+				description:
+					"Terminate actors and observe destruction callbacks.",
+				docs: [
+					{
+						label: "Destroy",
+						href: "https://rivet.dev/docs/actors/destroy",
+					},
+				],
+				actors: ["destroyActor", "destroyObserver"],
+				snippet: SNIPPETS.destroy,
+			},
+			{
+				id: "hibernation",
+				title: "Hibernation",
+				description:
+					"Trigger hibernation and inspect state restoration.",
+				docs: [],
+				actors: ["hibernationActor"],
+				snippet: SNIPPETS.lifecycle,
+			},
+			{
+				id: "versions",
+				title: "Versions",
+				description: "Understand actor versioning for safe rollouts.",
+				docs: [
+					{
+						label: "Versions",
+						href: "https://rivet.dev/docs/actors/versions",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.registry,
+				demo: "config",
+			},
+			{
+				id: "scaling",
+				title: "Scaling",
+				description:
+					"Review scaling options for actor capacity and concurrency.",
+				docs: [
+					{
+						label: "Scaling",
+						href: "https://rivet.dev/docs/actors/scaling",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.registry,
+				demo: "config",
+			},
+		],
+	},
+	{
+		id: "queues",
+		title: "Queues",
+		pages: [
+			{
+				id: "queue-basics",
+				title: "Queue Basics",
+				description: "Send and receive queue messages from actors.",
+				docs: [
+					{
+						label: "Queue",
+						href: "https://rivet.dev/docs/actors/queue",
+					},
+				],
+				actors: ["queueActor", "queueLimitedActor"],
+				snippet: SNIPPETS.queue,
+			},
+			{
+				id: "queue-patterns",
+				title: "Queue Patterns",
+				description:
+					"Explore sending, timeouts, workers, and keep-awake patterns.",
+				docs: [
+					{
+						label: "Queue",
+						href: "https://rivet.dev/docs/actors/queue",
+					},
+				],
+				actors: [
+					"sender",
+					"multiQueue",
+					"timeout",
+					"worker",
+					"selfSender",
+					"keepAwake",
+				],
+				snippet: SNIPPETS.queue,
+			},
+			{
+				id: "queue-run-loop",
+				title: "Queue in Run Loop",
+				description: "Consume queue messages inside run handlers.",
+				docs: [
+					{
+						label: "Queue",
+						href: "https://rivet.dev/docs/actors/queue",
+					},
+				],
+				actors: ["runWithQueueConsumer"],
+				snippet: SNIPPETS.queue,
+			},
+		],
+	},
+	{
+		id: "workflows",
+		title: "Workflows",
+		pages: [
+			{
+				id: "workflow-overview",
+				title: "Workflow Overview",
+				description:
+					"Traverse core workflow patterns built on Rivet Actors.",
+				docs: [
+					{
+						label: "Workflows",
+						href: "https://rivet.dev/docs/workflows",
+					},
+				],
+				actors: [
+					"timer",
+					"order",
+					"batch",
+					"approval",
+					"dashboard",
+					"race",
+					"payment",
+				],
+				snippet: SNIPPETS.workflow,
+			},
+			{
+				id: "workflow-steps",
+				title: "Steps",
+				description: "Chain sequential steps with automatic retries.",
+				docs: [
+					{
+						label: "Workflows",
+						href: "https://rivet.dev/docs/workflows",
+					},
+				],
+				actors: ["order"],
+				snippet: SNIPPETS.workflow,
+			},
+			{
+				id: "workflow-sleep",
+				title: "Sleep",
+				description: "Suspend workflows with durable timers.",
+				docs: [
+					{
+						label: "Workflows",
+						href: "https://rivet.dev/docs/workflows",
+					},
+				],
+				actors: ["timer"],
+				snippet: SNIPPETS.workflow,
+			},
+			{
+				id: "workflow-loops",
+				title: "Loops",
+				description: "Batch tasks with cursor-based loops.",
+				docs: [
+					{
+						label: "Workflows",
+						href: "https://rivet.dev/docs/workflows",
+					},
+				],
+				actors: ["batch"],
+				snippet: SNIPPETS.workflow,
+			},
+			{
+				id: "workflow-listen",
+				title: "Listen",
+				description: "Wait for approvals and events in workflows.",
+				docs: [
+					{
+						label: "Workflows",
+						href: "https://rivet.dev/docs/workflows",
+					},
+				],
+				actors: ["approval"],
+				snippet: SNIPPETS.workflow,
+			},
+			{
+				id: "workflow-join",
+				title: "Join",
+				description:
+					"Aggregate results across concurrent workflow branches.",
+				docs: [
+					{
+						label: "Workflows",
+						href: "https://rivet.dev/docs/workflows",
+					},
+				],
+				actors: ["dashboard"],
+				snippet: SNIPPETS.workflow,
+			},
+			{
+				id: "workflow-race",
+				title: "Race",
+				description:
+					"Race work against timeouts or alternate branches.",
+				docs: [
+					{
+						label: "Workflows",
+						href: "https://rivet.dev/docs/workflows",
+					},
+				],
+				actors: ["race"],
+				snippet: SNIPPETS.workflow,
+			},
+			{
+				id: "workflow-rollback",
+				title: "Rollback",
+				description:
+					"Model compensating transactions and rollback logic.",
+				docs: [
+					{
+						label: "Workflows",
+						href: "https://rivet.dev/docs/workflows",
+					},
+				],
+				actors: ["payment"],
+				snippet: SNIPPETS.workflow,
+			},
+		],
+	},
+	{
+		id: "inter-actor",
+		title: "Inter-Actor and Patterns",
+		pages: [
+			{
+				id: "communicating-between-actors",
+				title: "Communicating Between Actors",
+				description: "Chain actors together using server-side clients.",
+				docs: [
+					{
+						label: "Communicating Between Actors",
+						href: "https://rivet.dev/docs/actors/communicating-between-actors",
+					},
+				],
+				actors: ["inventory", "checkout"],
+				snippet: SNIPPETS.actions,
+			},
+			{
+				id: "design-patterns",
+				title: "Design Patterns",
+				description:
+					"Review proven actor design patterns and tradeoffs.",
+				docs: [
+					{
+						label: "Design Patterns",
+						href: "https://rivet.dev/docs/actors/design-patterns",
+					},
+				],
+				actors: [],
+				snippet: SNIPPETS.registry,
+				demo: "config",
+			},
+		],
+	},
+	{
+		id: "testing",
+		title: "Testing and Debugging",
+		pages: [
+			{
+				id: "testing",
+				title: "Testing",
+				description:
+					"Use the driver test suite actors to validate behavior.",
+				docs: [
+					{
+						label: "Testing",
+						href: "https://rivet.dev/docs/actors/testing",
+					},
+				],
+				actors: [
+					"counter",
+					"counterConn",
+					"queueActor",
+					"rawHttpActor",
+					"rawWebSocketActor",
+				],
+				snippet: SNIPPETS.testing,
+			},
+		],
+	},
+	{
+		id: "ai-ugc",
+		title: "AI and UGC",
+		pages: [
+			{
+				id: "ai-ugc",
+				title: "AI and User-Generated Actors",
+				description:
+					"Combine AI-driven actors with user-generated templates.",
+				docs: [
+					{
+						label: "AI and User-Generated Actors",
+						href: "https://rivet.dev/docs/actors/ai-and-user-generated-actors",
+					},
+				],
+				actors: ["aiAgent"],
+				snippet: SNIPPETS.ai,
+			},
+		],
+	},
+];
+
+export const PAGE_INDEX = PAGE_GROUPS.flatMap((group) =>
+	group.pages.map((page) => ({ ...page, group })),
+);
diff --git a/examples/sandbox/index.html b/examples/sandbox/index.html
new file mode 100644
index 0000000000..b78a98770d
--- /dev/null
+++ b/examples/sandbox/index.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Sandbox</title>
+		<style>
+			:root {
+				color-scheme: dark;
+				--bg: #000000;
+				--panel: #1c1c1e;
+				--panel-2: #2c2c2e;
+				--panel-3: #111114;
+				--border: #2c2c2e;
+				--border-strong: #3a3a3c;
+				--text: #ffffff;
+				--muted: #8e8e93;
+				--muted-2: #6e6e73;
+				--accent: #ff4f00;
+				--accent-soft: rgba(255, 79, 0, 0.2);
+				--success: #30d158;
+				--danger: #ff3b30;
+				--warning: #ff9f0a;
+				--radius: 8px;
+				--shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+			}
+
+			* {
+				box-sizing: border-box;
+			}
+
+			body {
+				margin: 0;
+				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+				background: radial-gradient(circle at top, #111114 0%, #000000 60%);
+				color: var(--text);
+			}
+
+			#root {
+				min-height: 100vh;
+			}
+
+			.app {
+				display: grid;
+				grid-template-columns: 280px 1fr;
+				min-height: 100vh;
+			}
+
+			.sidebar {
+				background: var(--panel-3);
+				border-right: 1px solid var(--border);
+				padding: 24px 16px;
+				display: flex;
+				flex-direction: column;
+				gap: 20px;
+			}
+
+			.sidebar h1 {
+				font-size: 18px;
+				margin: 0;
+				letter-spacing: 0.02em;
+			}
+
+			.sidebar .subtitle {
+				color: var(--muted);
+				font-size: 13px;
+				margin-top: 6px;
+			}
+
+			.nav-group {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
+
+			.nav-group-title {
+				font-size: 12px;
+				text-transform: uppercase;
+				letter-spacing: 0.08em;
+				color: var(--muted-2);
+				margin-top: 8px;
+			}
+
+			.nav-button {
+				background: transparent;
+				border: 1px solid transparent;
+				color: var(--muted);
+				text-align: left;
+				padding: 10px 12px;
+				border-radius: 6px;
+				cursor: pointer;
+				font-size: 13px;
+				transition: border 0.2s ease, color 0.2s ease, background 0.2s ease;
+			}
+
+			.nav-button:hover {
+				border-color: var(--border-strong);
+				background: var(--panel-2);
+				color: var(--text);
+			}
+
+			.nav-button.active {
+				background: var(--accent-soft);
+				border-color: var(--accent);
+				color: var(--text);
+			}
+
+			.content {
+				padding: 32px;
+				display: flex;
+				flex-direction: column;
+				gap: 24px;
+			}
+
+			.page-header {
+				display: flex;
+				flex-direction: column;
+				gap: 12px;
+			}
+
+			.page-title {
+				font-size: 28px;
+				margin: 0;
+			}
+
+			.page-description {
+				color: var(--muted);
+				font-size: 15px;
+				margin: 0;
+				max-width: 720px;
+			}
+
+			.doc-links {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 8px;
+			}
+
+			.doc-link {
+				padding: 6px 10px;
+				border-radius: 999px;
+				border: 1px solid var(--border-strong);
+				font-size: 12px;
+				color: var(--text);
+				text-decoration: none;
+				transition: border 0.2s ease, color 0.2s ease;
+			}
+
+			.doc-link:hover {
+				border-color: var(--accent);
+				color: var(--accent);
+			}
+
+			.card {
+				background: var(--panel);
+				border: 1px solid var(--border);
+				border-radius: var(--radius);
+				padding: 20px;
+				box-shadow: var(--shadow);
+				display: flex;
+				flex-direction: column;
+				gap: 16px;
+			}
+
+			.card-title {
+				font-size: 18px;
+				margin: 0;
+			}
+
+			.card-subtitle {
+				color: var(--muted);
+				margin: 0;
+				font-size: 13px;
+			}
+
+			.demo-grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+				gap: 16px;
+			}
+
+			.form-row {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
+
+			label {
+				font-size: 12px;
+				color: var(--muted);
+			}
+
+			input,
+			select,
+			textarea {
+				background: var(--panel-2);
+				border: 1px solid var(--border-strong);
+				color: var(--text);
+				padding: 10px 12px;
+				border-radius: 8px;
+				font-size: 13px;
+			}
+
+			input:focus,
+			select:focus,
+			textarea:focus {
+				outline: none;
+				border-color: var(--accent);
+				box-shadow: 0 0 0 3px var(--accent-soft);
+			}
+
+			textarea {
+				min-height: 120px;
+				resize: vertical;
+				font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
+			}
+
+			.button-row {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 8px;
+			}
+
+			button {
+				padding: 10px 16px;
+				border-radius: 8px;
+				border: none;
+				cursor: pointer;
+				font-size: 13px;
+				font-weight: 600;
+				transition: opacity 0.2s ease;
+			}
+
+			button.primary {
+				background: var(--accent);
+				color: #ffffff;
+			}
+
+			button.secondary {
+				background: var(--panel-2);
+				color: var(--text);
+			}
+
+			button.ghost {
+				background: transparent;
+				color: var(--accent);
+				border: 1px solid var(--accent);
+			}
+
+			button:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
+			.status-pill {
+				display: inline-flex;
+				align-items: center;
+				gap: 6px;
+				padding: 4px 10px;
+				border-radius: 999px;
+				font-size: 12px;
+				border: 1px solid var(--border-strong);
+			}
+
+			.status-dot {
+				width: 8px;
+				height: 8px;
+				border-radius: 999px;
+				background: var(--muted);
+			}
+
+			.status-dot.connected {
+				background: var(--success);
+			}
+
+			.status-dot.error {
+				background: var(--danger);
+			}
+
+			.code-block {
+				background: #111114;
+				border: 1px solid var(--border);
+				border-radius: 8px;
+				padding: 16px;
+				font-size: 12px;
+				line-height: 1.5;
+				font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
+				white-space: pre-wrap;
+			}
+
+			.event-log {
+				background: var(--panel-2);
+				border: 1px solid var(--border-strong);
+				border-radius: 8px;
+				padding: 12px;
+				max-height: 220px;
+				overflow-y: auto;
+				font-size: 12px;
+				font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
+			}
+
+			.event-entry {
+				padding: 8px;
+				border-bottom: 1px solid var(--border);
+			}
+
+			.event-entry:last-child {
+				border-bottom: none;
+			}
+
+			.template-chip {
+				background: var(--panel-2);
+				border: 1px solid var(--border-strong);
+				color: var(--text);
+				padding: 6px 10px;
+				border-radius: 999px;
+				font-size: 12px;
+			}
+
+			.notice {
+				background: rgba(255, 159, 10, 0.12);
+				border-left: 3px solid var(--warning);
+				padding: 12px 16px;
+				border-radius: 8px;
+				font-size: 12px;
+				color: var(--muted);
+			}
+
+			.mobile-select {
+				display: none;
+			}
+
+			@media (max-width: 900px) {
+				.app {
+					grid-template-columns: 1fr;
+				}
+				.sidebar {
+					position: sticky;
+					top: 0;
+					z-index: 10;
+					border-right: none;
+					border-bottom: 1px solid var(--border);
+				}
+				.nav-group {
+					display: none;
+				}
+				.mobile-select {
+					display: flex;
+					flex-direction: column;
+					gap: 8px;
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/frontend/main.tsx"></script>
+	</body>
+</html>
diff --git a/examples/queue-sandbox/package.json b/examples/sandbox/package.json
similarity index 71%
rename from examples/queue-sandbox/package.json
rename to examples/sandbox/package.json
index 30af6e6a6d..91eb26d2d5 100644
--- a/examples/queue-sandbox/package.json
+++ b/examples/sandbox/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "queue-sandbox",
+  "name": "sandbox",
   "version": "2.0.21",
   "private": true,
   "type": "module",
@@ -20,22 +20,28 @@
     "vite-plugin-srvx": "^1.0.0"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^0.0.66",
     "@hono/node-server": "^1.19.7",
-    "@hono/node-ws": "^1.2.0",
-    "@rivetkit/react": "^2.0.38",
+    "@hono/node-ws": "^1.3.0",
+    "@rivetkit/react": "*",
+    "ai": "^4.0.38",
+    "fdb-tuple": "^1.0.0",
     "hono": "^4.11.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rivetkit": "^2.0.38",
-    "srvx": "^0.10.0"
+    "rivetkit": "*",
+    "srvx": "^0.10.0",
+    "zod": "^3.25.69"
   },
+  "stableVersion": "0.8.0",
   "template": {
     "technologies": [
-      "typescript",
-      "react"
+      "react",
+      "typescript"
     ],
     "tags": [
-      "queues"
+      "actors",
+      "sandbox"
     ],
     "priority": 100,
     "frontendPort": 5173
diff --git a/examples/sandbox/src/actors.ts b/examples/sandbox/src/actors.ts
new file mode 100644
index 0000000000..027abc6438
--- /dev/null
+++ b/examples/sandbox/src/actors.ts
@@ -0,0 +1,195 @@
+import { setup } from "rivetkit";
+// Counter
+import { counter } from "./actors/counter/counter.ts";
+import { counterConn } from "./actors/counter/counter-conn.ts";
+import { counterWithParams } from "./actors/counter/conn-params.ts";
+import { counterWithLifecycle } from "./actors/counter/lifecycle.ts";
+// Actions
+import { inputActor } from "./actors/actions/action-inputs.ts";
+import {
+	syncActionActor,
+	asyncActionActor,
+	promiseActor,
+} from "./actors/actions/action-types.ts";
+import {
+	shortTimeoutActor,
+	longTimeoutActor,
+	defaultTimeoutActor,
+	syncTimeoutActor,
+} from "./actors/actions/action-timeout.ts";
+import {
+	errorHandlingActor,
+	customTimeoutActor,
+} from "./actors/actions/error-handling.ts";
+// State
+import { onStateChangeActor } from "./actors/state/actor-onstatechange.ts";
+import { metadataActor } from "./actors/state/metadata.ts";
+import {
+	staticVarActor,
+	nestedVarActor,
+	dynamicVarActor,
+	uniqueVarActor,
+	driverCtxActor,
+} from "./actors/state/vars.ts";
+import { kvActor } from "./actors/state/kv.ts";
+import {
+	largePayloadActor,
+	largePayloadConnActor,
+} from "./actors/state/large-payloads.ts";
+// Connections
+import { connStateActor } from "./actors/connections/conn-state.ts";
+import { rejectConnectionActor } from "./actors/connections/reject-connection.ts";
+import { requestAccessActor } from "./actors/connections/request-access.ts";
+// HTTP
+import {
+	rawHttpActor,
+	rawHttpNoHandlerActor,
+	rawHttpVoidReturnActor,
+	rawHttpHonoActor,
+} from "./actors/http/raw-http.ts";
+import { rawHttpRequestPropertiesActor } from "./actors/http/raw-http-request-properties.ts";
+import {
+	rawWebSocketActor,
+	rawWebSocketBinaryActor,
+} from "./actors/http/raw-websocket.ts";
+import { rawFetchCounter } from "./actors/http/raw-fetch-counter.ts";
+import { rawWebSocketChatRoom } from "./actors/http/raw-websocket-chat-room.ts";
+// Lifecycle
+import {
+	runWithTicks,
+	runWithQueueConsumer,
+	runWithEarlyExit,
+	runWithError,
+	runWithoutHandler,
+} from "./actors/lifecycle/run.ts";
+import {
+	sleep,
+	sleepWithLongRpc,
+	sleepWithNoSleepOption,
+	sleepWithRawHttp,
+	sleepWithRawWebSocket,
+} from "./actors/lifecycle/sleep.ts";
+import { scheduled } from "./actors/lifecycle/scheduled.ts";
+import {
+	destroyActor,
+	destroyObserver,
+} from "./actors/lifecycle/destroy.ts";
+import { hibernationActor } from "./actors/lifecycle/hibernation.ts";
+// Queues
+import { queueActor, queueLimitedActor } from "./actors/queue/queue.ts";
+import { sender } from "./actors/queue/sender.ts";
+import { multiQueue } from "./actors/queue/multi-queue.ts";
+import { timeout } from "./actors/queue/timeout.ts";
+import { worker } from "./actors/queue/worker.ts";
+import { selfSender } from "./actors/queue/self-sender.ts";
+import { keepAwake } from "./actors/queue/keep-awake.ts";
+// Workflows
+import {
+	workflowCounterActor,
+	workflowQueueActor,
+	workflowSleepActor,
+} from "./actors/workflow/workflow-fixtures.ts";
+import { timer } from "./actors/workflow/timer.ts";
+import { order } from "./actors/workflow/order.ts";
+import { batch } from "./actors/workflow/batch.ts";
+import { approval } from "./actors/workflow/approval.ts";
+import { dashboard } from "./actors/workflow/dashboard.ts";
+import { race } from "./actors/workflow/race.ts";
+import { payment } from "./actors/workflow/payment.ts";
+// Inter-actor
+import {
+	inventory,
+	checkout,
+} from "./actors/inter-actor/cross-actor-actions.ts";
+// Testing
+import { inlineClientActor } from "./actors/testing/inline-client.ts";
+// AI
+import { aiAgent } from "./actors/ai/ai-agent.ts";
+
+export const registry = setup({
+	use: {
+		// Overview + state basics
+		counter,
+		counterConn,
+		counterWithParams,
+		counterWithLifecycle,
+		// Core API
+		inputActor,
+		syncActionActor,
+		asyncActionActor,
+		promiseActor,
+		shortTimeoutActor,
+		longTimeoutActor,
+		defaultTimeoutActor,
+		syncTimeoutActor,
+		customTimeoutActor,
+		errorHandlingActor,
+		// State and storage
+		onStateChangeActor,
+		metadataActor,
+		staticVarActor,
+		nestedVarActor,
+		dynamicVarActor,
+		uniqueVarActor,
+		driverCtxActor,
+		kvActor,
+		largePayloadActor,
+		largePayloadConnActor,
+		// Realtime and connections
+		connStateActor,
+		rejectConnectionActor,
+		requestAccessActor,
+		// HTTP and WebSocket
+		rawHttpActor,
+		rawHttpNoHandlerActor,
+		rawHttpVoidReturnActor,
+		rawHttpHonoActor,
+		rawHttpRequestPropertiesActor,
+		rawWebSocketActor,
+		rawWebSocketBinaryActor,
+		rawFetchCounter,
+		rawWebSocketChatRoom,
+		// Lifecycle and scheduling
+		runWithTicks,
+		runWithQueueConsumer,
+		runWithEarlyExit,
+		runWithError,
+		runWithoutHandler,
+		sleep,
+		sleepWithLongRpc,
+		sleepWithNoSleepOption,
+		sleepWithRawHttp,
+		sleepWithRawWebSocket,
+		scheduled,
+		destroyActor,
+		destroyObserver,
+		hibernationActor,
+		// Queues
+		queueActor,
+		queueLimitedActor,
+		sender,
+		multiQueue,
+		timeout,
+		worker,
+		selfSender,
+		keepAwake,
+		// Workflows
+		timer,
+		order,
+		batch,
+		approval,
+		dashboard,
+		race,
+		payment,
+		workflowCounterActor,
+		workflowQueueActor,
+		workflowSleepActor,
+		// Inter-actor
+		inventory,
+		checkout,
+		// Testing fixtures
+		inlineClientActor,
+		// AI
+		aiAgent,
+	},
+});
diff --git a/examples/sandbox/src/actors/actions/action-inputs.ts b/examples/sandbox/src/actors/actions/action-inputs.ts
new file mode 100644
index 0000000000..42e5664574
--- /dev/null
+++ b/examples/sandbox/src/actors/actions/action-inputs.ts
@@ -0,0 +1,29 @@
+import { actor } from "rivetkit";
+
+export interface State {
+	initialInput?: unknown;
+	onCreateInput?: unknown;
+}
+
+// Test actor that can capture input during creation
+export const inputActor = actor({
+	createState: (c, input): State => {
+		return {
+			initialInput: input,
+			onCreateInput: undefined,
+		};
+	},
+
+	onCreate: (c, input) => {
+		c.state.onCreateInput = input;
+	},
+
+	actions: {
+		getInputs: (c) => {
+			return {
+				initialInput: c.state.initialInput,
+				onCreateInput: c.state.onCreateInput,
+			};
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/actions/action-timeout.ts b/examples/sandbox/src/actors/actions/action-timeout.ts
new file mode 100644
index 0000000000..b1ee4b3cd0
--- /dev/null
+++ b/examples/sandbox/src/actors/actions/action-timeout.ts
@@ -0,0 +1,58 @@
+import { actor } from "rivetkit";
+
+// Short timeout actor
+export const shortTimeoutActor = actor({
+	state: { value: 0 },
+	options: {
+		actionTimeout: 50, // 50ms timeout
+	},
+	actions: {
+		quickAction: async (c) => {
+			return "quick response";
+		},
+		slowAction: async (c) => {
+			// This action should timeout
+			await new Promise((resolve) => setTimeout(resolve, 100));
+			return "slow response";
+		},
+	},
+});
+
+// Long timeout actor
+export const longTimeoutActor = actor({
+	state: { value: 0 },
+	options: {
+		actionTimeout: 200, // 200ms timeout
+	},
+	actions: {
+		delayedAction: async (c) => {
+			// This action should complete within timeout
+			await new Promise((resolve) => setTimeout(resolve, 100));
+			return "delayed response";
+		},
+	},
+});
+
+// Default timeout actor
+export const defaultTimeoutActor = actor({
+	state: { value: 0 },
+	actions: {
+		normalAction: async (c) => {
+			await new Promise((resolve) => setTimeout(resolve, 50));
+			return "normal response";
+		},
+	},
+});
+
+// Sync actor (timeout shouldn't apply)
+export const syncTimeoutActor = actor({
+	state: { value: 0 },
+	options: {
+		actionTimeout: 50, // 50ms timeout
+	},
+	actions: {
+		syncAction: (c) => {
+			return "sync response";
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/actions/action-types.ts b/examples/sandbox/src/actors/actions/action-types.ts
new file mode 100644
index 0000000000..ad0707971e
--- /dev/null
+++ b/examples/sandbox/src/actors/actions/action-types.ts
@@ -0,0 +1,82 @@
+import { actor, UserError } from "rivetkit";
+
+// Actor with synchronous actions
+export const syncActionActor = actor({
+	state: { value: 0 },
+	actions: {
+		// Simple synchronous action that returns a value directly
+		increment: (c, amount = 1) => {
+			c.state.value += amount;
+			return c.state.value;
+		},
+		// Synchronous action that returns an object
+		getInfo: (c) => {
+			return {
+				currentValue: c.state.value,
+				timestamp: Date.now(),
+			};
+		},
+		// Synchronous action with no return value (void)
+		reset: (c) => {
+			c.state.value = 0;
+		},
+	},
+});
+
+// Actor with asynchronous actions
+export const asyncActionActor = actor({
+	state: { value: 0, data: null as any },
+	actions: {
+		// Async action with a delay
+		delayedIncrement: async (c, amount = 1) => {
+			await Promise.resolve();
+			c.state.value += amount;
+			return c.state.value;
+		},
+		// Async action that simulates an API call
+		fetchData: async (c, id: string) => {
+			await Promise.resolve();
+
+			// Simulate response data
+			const data = { id, timestamp: Date.now() };
+			c.state.data = data;
+			return data;
+		},
+		// Async action with error handling
+		asyncWithError: async (c, shouldError: boolean) => {
+			await Promise.resolve();
+
+			if (shouldError) {
+				throw new UserError("Intentional error");
+			}
+
+			return "Success";
+		},
+	},
+});
+
+// Actor with promise actions
+export const promiseActor = actor({
+	state: { results: [] as string[] },
+	actions: {
+		// Action that returns a resolved promise
+		resolvedPromise: (c) => {
+			return Promise.resolve("resolved value");
+		},
+		// Action that returns a promise that resolves after a delay
+		delayedPromise: (c): Promise<string> => {
+			return new Promise<string>((resolve) => {
+				c.state.results.push("delayed");
+				resolve("delayed value");
+			});
+		},
+		// Action that returns a rejected promise
+		rejectedPromise: (c) => {
+			return Promise.reject(new UserError("promised rejection"));
+		},
+		// Action to check the collected results
+		getResults: (c) => {
+			return c.state.results;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/actions/error-handling.ts b/examples/sandbox/src/actors/actions/error-handling.ts
new file mode 100644
index 0000000000..e1501a0a0c
--- /dev/null
+++ b/examples/sandbox/src/actors/actions/error-handling.ts
@@ -0,0 +1,91 @@
+import { actor, UserError } from "rivetkit";
+
+export const errorHandlingActor = actor({
+	state: {
+		errorLog: [] as string[],
+	},
+	actions: {
+		// Action that throws a UserError with just a message
+		throwSimpleError: () => {
+			throw new UserError("Simple error message");
+		},
+
+		// Action that throws a UserError with code and metadata
+		throwDetailedError: () => {
+			throw new UserError("Detailed error message", {
+				code: "detailed_error",
+				metadata: {
+					reason: "test",
+					timestamp: Date.now(),
+				},
+			});
+		},
+
+		// Action that throws an internal error
+		throwInternalError: () => {
+			throw new Error("This is an internal error");
+		},
+
+		// Action that returns successfully
+		successfulAction: () => {
+			return "success";
+		},
+
+		// Action that times out (simulated with a long delay)
+		timeoutAction: async (c) => {
+			// This action should time out if the timeout is configured
+			return new Promise((resolve) => {
+				setTimeout(() => {
+					resolve("This should not be reached if timeout works");
+				}, 10000); // 10 seconds
+			});
+		},
+
+		// Action with configurable delay to test timeout edge cases
+		delayedAction: async (c, delayMs: number) => {
+			return new Promise((resolve) => {
+				setTimeout(() => {
+					resolve(`Completed after ${delayMs}ms`);
+				}, delayMs);
+			});
+		},
+
+		// Log an error for inspection
+		logError: (c, error: string) => {
+			c.state.errorLog.push(error);
+			return c.state.errorLog;
+		},
+
+		// Get the error log
+		getErrorLog: (c) => {
+			return c.state.errorLog;
+		},
+
+		// Clear the error log
+		clearErrorLog: (c) => {
+			c.state.errorLog = [];
+			return true;
+		},
+	},
+	options: {
+		actionTimeout: 500, // 500ms timeout for actions
+	},
+});
+
+// Actor with custom timeout
+export const customTimeoutActor = actor({
+	state: {},
+	actions: {
+		quickAction: async () => {
+			await new Promise((resolve) => setTimeout(resolve, 50));
+			return "Quick action completed";
+		},
+		slowAction: async () => {
+			await new Promise((resolve) => setTimeout(resolve, 300));
+			return "Slow action completed";
+		},
+	},
+	options: {
+		actionTimeout: 200, // 200ms timeout
+	},
+});
diff --git a/examples/sandbox/src/actors/ai/ai-agent.ts b/examples/sandbox/src/actors/ai/ai-agent.ts
new file mode 100644
index 0000000000..94c957119b
--- /dev/null
+++ b/examples/sandbox/src/actors/ai/ai-agent.ts
@@ -0,0 +1,61 @@
+import { openai } from "@ai-sdk/openai";
+import { generateText, tool } from "ai";
+import { actor } from "rivetkit";
+import { z } from "zod";
+import { getWeather } from "./my-tools.ts";
+import type { Message } from "./types.ts";
+
+export const aiAgent = actor({
+	// Persistent state that survives restarts: https://rivet.dev/docs/actors/state
+	state: {
+		messages: [] as Message[],
+	},
+
+	actions: {
+		// Callable functions from clients: https://rivet.dev/docs/actors/actions
+		getMessages: (c) => c.state.messages,
+
+		sendMessage: async (c, userMessage: string) => {
+			const userMsg: Message = {
+				role: "user",
+				content: userMessage,
+				timestamp: Date.now(),
+			};
+			// State changes are automatically persisted
+			c.state.messages.push(userMsg);
+
+			const { text } = await generateText({
+				model: openai("gpt-4o-mini"),
+				prompt: userMessage,
+				messages: c.state.messages,
+				tools: {
+					weather: tool({
+						description: "Get the weather in a location",
+						parameters: z.object({
+							location: z
+								.string()
+								.describe(
+									"The location to get the weather for",
+								),
+						}),
+						execute: async ({ location }) => {
+							return await getWeather(location);
+						},
+					}),
+				},
+			});
+
+			const assistantMsg: Message = {
+				role: "assistant",
+				content: text,
+				timestamp: Date.now(),
+			};
+			c.state.messages.push(assistantMsg);
+
+			// Send events to all connected clients: https://rivet.dev/docs/actors/events
+			c.broadcast("messageReceived", assistantMsg);
+
+			return assistantMsg;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/ai/my-tools.ts b/examples/sandbox/src/actors/ai/my-tools.ts
new file mode 100644
index 0000000000..a0ef451bea
--- /dev/null
+++ b/examples/sandbox/src/actors/ai/my-tools.ts
@@ -0,0 +1,11 @@
+export async function getWeather(location: string) {
+	// Mock weather API response
+	return {
+		location,
+		temperature: Math.floor(Math.random() * 30) + 10,
+		condition: ["sunny", "cloudy", "rainy", "snowy"][
+			Math.floor(Math.random() * 4)
+		],
+		humidity: Math.floor(Math.random() * 50) + 30,
+	};
+}
diff --git a/examples/sandbox/src/actors/ai/types.ts b/examples/sandbox/src/actors/ai/types.ts
new file mode 100644
index 0000000000..010dfec6d7
--- /dev/null
+++ b/examples/sandbox/src/actors/ai/types.ts
@@ -0,0 +1,5 @@
+export type Message = {
+	role: "user" | "assistant";
+	content: string;
+	timestamp: number;
+};
diff --git a/examples/sandbox/src/actors/connections/conn-state.ts b/examples/sandbox/src/actors/connections/conn-state.ts
new file mode 100644
index 0000000000..8312f5aa3e
--- /dev/null
+++ b/examples/sandbox/src/actors/connections/conn-state.ts
@@ -0,0 +1,112 @@
+import { actor } from "rivetkit";
+
+export type ConnState = {
+	username: string;
+	role: string;
+	counter: number;
+	createdAt: number;
+	noCount: boolean;
+};
+
+export const connStateActor = actor({
+	state: {
+		sharedCounter: 0,
+		disconnectionCount: 0,
+	},
+	// Define connection state
+	createConnState: (
+		c,
+		params: { username?: string; role?: string; noCount?: boolean },
+	): ConnState => {
+		return {
+			username: params?.username || "anonymous",
+			role: params?.role || "user",
+			counter: 0,
+			createdAt: Date.now(),
+			noCount: params?.noCount ?? false,
+		};
+	},
+	// Lifecycle hook when a connection is established
+	onConnect: (c, conn) => {
+		// Broadcast event about the new connection
+		c.broadcast("userConnected", {
+			id: conn.id,
+			username: "anonymous",
+			role: "user",
+		});
+	},
+	// Lifecycle hook when a connection is closed
+	onDisconnect: (c, conn) => {
+		if (!conn.state?.noCount) {
+			c.state.disconnectionCount += 1;
+			c.broadcast("userDisconnected", {
+				id: conn.id,
+			});
+		}
+	},
+	actions: {
+		// Action to increment the connection's counter
+		incrementConnCounter: (c, amount = 1) => {
+			c.conn.state.counter += amount;
+		},
+
+		// Action to increment the shared counter
+		incrementSharedCounter: (c, amount = 1) => {
+			c.state.sharedCounter += amount;
+			return c.state.sharedCounter;
+		},
+
+		// Get the connection state
+		getConnectionState: (c) => {
+			return { id: c.conn.id, ...c.conn.state };
+		},
+
+		// Check all active connections
+		getConnectionIds: (c) => {
+			return c.conns
+				.entries()
+				.filter((c) => !c[1].state?.noCount)
+				.map((x) => x[0])
+				.toArray();
+		},
+
+		// Get disconnection count
+		getDisconnectionCount: (c) => {
+			return c.state.disconnectionCount;
+		},
+
+		// Get all active connection states
+		getAllConnectionStates: (c) => {
+			return c.conns
+				.entries()
+				.map(([id, conn]) => ({ id, ...conn.state }))
+				.toArray();
+		},
+
+		// Send message to a specific connection with matching ID
+		sendToConnection: (c, targetId: string, message: string) => {
+			if (c.conns.has(targetId)) {
+				c.conns
+					.get(targetId)!
+					.send("directMessage", { from: c.conn.id, message });
+				return true;
+			} else {
+				return false;
+			}
+		},
+
+		// Update connection state (simulated for tests)
+		updateConnection: (
+			c,
+			updates: Partial<{ username: string; role: string }>,
+		) => {
+			if (updates.username) c.conn.state.username = updates.username;
+			if (updates.role) c.conn.state.role = updates.role;
+			return c.conn.state;
+		},
+		disconnectSelf: (c, reason?: string) => {
+			c.conn.disconnect(reason ?? "test.disconnect");
+			return true;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/connections/reject-connection.ts b/examples/sandbox/src/actors/connections/reject-connection.ts
new file mode 100644
index 0000000000..dc082448dd
--- /dev/null
+++ b/examples/sandbox/src/actors/connections/reject-connection.ts
@@ -0,0 +1,15 @@
+import { actor, UserError } from "rivetkit";
+
+export const rejectConnectionActor = actor({
+	onBeforeConnect: async (_c, params: { reject?: boolean }) => {
+		if (params?.reject) {
+			await new Promise((resolve) => setTimeout(resolve, 500));
+			throw new UserError("Rejected connection", {
+				code: "rejected",
+			});
+		}
+	},
+	actions: {
+		ping: () => "pong",
+	},
+});
diff --git a/examples/sandbox/src/actors/connections/request-access.ts b/examples/sandbox/src/actors/connections/request-access.ts
new file mode 100644
index 0000000000..f5f6731ba3
--- /dev/null
+++ b/examples/sandbox/src/actors/connections/request-access.ts
@@ -0,0 +1,153 @@
+import { actor, type RivetMessageEvent } from "rivetkit";
+
+/**
+ * Test fixture to verify request object access in all lifecycle hooks
+ */
+export const requestAccessActor = actor({
+	state: {
+		// Track request info from different hooks
+		onBeforeConnectRequest: {
+			hasRequest: false,
+			requestUrl: null as string | null,
+			requestMethod: null as string | null,
+			requestHeaders: {} as Record<string, string>,
+		},
+		createConnStateRequest: {
+			hasRequest: false,
+			requestUrl: null as string | null,
+			requestMethod: null as string | null,
+			requestHeaders: {} as Record<string, string>,
+		},
+		onRequestRequest: {
+			hasRequest: false,
+			requestUrl: null as string | null,
+			requestMethod: null as string | null,
+			requestHeaders: {} as Record<string, string>,
+		},
+		onWebSocketRequest: {
+			hasRequest: false,
+			requestUrl: null as string | null,
+			requestMethod: null as string | null,
+			requestHeaders: {} as Record<string, string>,
+		},
+	},
+	createConnState: (c, params: { trackRequest?: boolean }) => {
+		// In createConnState, the state isn't available yet.
+
+		let requestInfo: {
+			hasRequest: boolean;
+			requestUrl: string;
+			requestMethod: string;
+			requestHeaders: Record<string, string>;
+		} | null = null;
+
+		if (params?.trackRequest && c.request) {
+			const headers: Record<string, string> = {};
+			c.request.headers.forEach((value, key) => {
+				headers[key] = value;
+			});
+			requestInfo = {
+				hasRequest: true,
+				requestUrl: c.request.url,
+				requestMethod: c.request.method,
+				requestHeaders: headers,
+			};
+		}
+
+		return {
+			trackRequest: params?.trackRequest || false,
+			requestInfo,
+		};
+	},
+	onConnect: (c, conn) => {
+		// Copy request info from connection state if it was tracked
+		if (conn.state.requestInfo) {
+			c.state.createConnStateRequest = conn.state.requestInfo;
+		}
+	},
+	onBeforeConnect: (c, params) => {
+		if (params?.trackRequest) {
+			if (c.request) {
+				c.state.onBeforeConnectRequest.hasRequest = true;
+				c.state.onBeforeConnectRequest.requestUrl = c.request.url;
+				c.state.onBeforeConnectRequest.requestMethod = c.request.method;
+
+				// Store select headers
+				const headers: Record<string, string> = {};
+				c.request.headers.forEach((value, key) => {
+					headers[key] = value;
+				});
+				c.state.onBeforeConnectRequest.requestHeaders = headers;
+			} else {
+				// Track that we tried but request was not available
+				c.state.onBeforeConnectRequest.hasRequest = false;
+			}
+		}
+	},
+	onRequest: (c, request) => {
+		// Store request info
+		c.state.onRequestRequest.hasRequest = true;
+		c.state.onRequestRequest.requestUrl = request.url;
+		c.state.onRequestRequest.requestMethod = request.method;
+
+		// Store select headers
+		const headers: Record<string, string> = {};
+		request.headers.forEach((value, key) => {
+			headers[key] = value;
+		});
+		c.state.onRequestRequest.requestHeaders = headers;
+
+		// Return response with request info
+		return new Response(
+			JSON.stringify({
+				hasRequest: true,
+				requestUrl: request.url,
+				requestMethod: request.method,
+				requestHeaders: headers,
+			}),
+			{
+				status: 200,
+				headers: { "Content-Type": "application/json" },
+			},
+		);
+	},
+	onWebSocket: (c, websocket) => {
+		if (!c.request) throw "Missing request";
+		// Store request info
+		c.state.onWebSocketRequest.hasRequest = true;
+		c.state.onWebSocketRequest.requestUrl = c.request.url;
+		c.state.onWebSocketRequest.requestMethod = c.request.method;
+
+		// Store select headers
+		const headers: Record<string, string> = {};
+		c.request.headers.forEach((value, key) => {
+			headers[key] = value;
+		});
+		c.state.onWebSocketRequest.requestHeaders = headers;
+
+		// Send request info on connection
+		websocket.send(
+			JSON.stringify({
+				hasRequest: true,
+				requestUrl: c.request.url,
+				requestMethod: c.request.method,
+				requestHeaders: headers,
+			}),
+		);
+
+		// Echo messages back
+		websocket.addEventListener("message", (event: RivetMessageEvent) => {
+			websocket.send(event.data);
+		});
+	},
+	actions: {
+		getRequestInfo: (c) => {
+			return {
+				onBeforeConnect: c.state.onBeforeConnectRequest,
+				createConnState: c.state.createConnStateRequest,
+				onRequest: c.state.onRequestRequest,
+				onWebSocket: c.state.onWebSocketRequest,
+			};
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/counter/conn-params.ts b/examples/sandbox/src/actors/counter/conn-params.ts
new file mode 100644
index 0000000000..4116a4432c
--- /dev/null
+++ b/examples/sandbox/src/actors/counter/conn-params.ts
@@ -0,0 +1,27 @@
+import { actor } from "rivetkit";
+
+export const counterWithParams = actor({
+	state: { count: 0, initializers: [] as string[] },
+	createConnState: (c, params: { name?: string }) => {
+		return {
+			name: params.name || "anonymous",
+		};
+	},
+	onConnect: (c, conn) => {
+		// Record connection name
+		c.state.initializers.push(conn.state.name);
+	},
+	actions: {
+		increment: (c, x: number) => {
+			c.state.count += x;
+			c.broadcast("newCount", {
+				count: c.state.count,
+				by: c.conn.state.name,
+			});
+			return c.state.count;
+		},
+		getInitializers: (c) => {
+			return c.state.initializers;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/counter/counter-conn.ts b/examples/sandbox/src/actors/counter/counter-conn.ts
new file mode 100644
index 0000000000..93d4a6c0af
--- /dev/null
+++ b/examples/sandbox/src/actors/counter/counter-conn.ts
@@ -0,0 +1,33 @@
+import { actor } from "rivetkit";
+
+export const counterConn = actor({
+	state: {
+		connectionCount: 0,
+	},
+	connState: { count: 0 },
+	onConnect: (c, conn) => {
+		c.state.connectionCount += 1;
+	},
+	onDisconnect: (c, conn) => {
+		// Note: We can't determine if disconnect was graceful from here
+		// For testing purposes, we'll decrement on all disconnects
+		// In real scenarios, you'd use connection tracking with timeouts
+		c.state.connectionCount -= 1;
+	},
+	actions: {
+		increment: (c, x: number) => {
+			c.conn.state.count += x;
+			c.broadcast("newCount", c.conn.state.count);
+		},
+		setCount: (c, x: number) => {
+			c.conn.state.count = x;
+			c.broadcast("newCount", x);
+		},
+		getCount: (c) => {
+			return c.conn.state.count;
+		},
+		getConnectionCount: (c) => {
+			return c.state.connectionCount;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/counter/counter.ts b/examples/sandbox/src/actors/counter/counter.ts
new file mode 100644
index 0000000000..8f14bea1c2
--- /dev/null
+++ b/examples/sandbox/src/actors/counter/counter.ts
@@ -0,0 +1,20 @@
+import { actor } from "rivetkit";
+
+export const counter = actor({
+	state: { count: 0 },
+	actions: {
+		increment: (c, x: number) => {
+			c.state.count += x;
+			c.broadcast("newCount", c.state.count);
+			return c.state.count;
+		},
+		setCount: (c, x: number) => {
+			c.state.count = x;
+			c.broadcast("newCount", x);
+			return c.state.count;
+		},
+		getCount: (c) => {
+			return c.state.count;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/counter/lifecycle.ts b/examples/sandbox/src/actors/counter/lifecycle.ts
new file mode 100644
index 0000000000..2fb790e734
--- /dev/null
+++ b/examples/sandbox/src/actors/counter/lifecycle.ts
@@ -0,0 +1,34 @@
+import { actor } from "rivetkit";
+
+type ConnParams = { trackLifecycle?: boolean } | undefined;
+
+export const counterWithLifecycle = actor({
+	state: {
+		count: 0,
+		events: [] as string[],
+	},
+	createConnState: (c, params: ConnParams) => ({
+		joinTime: Date.now(),
+	}),
+	onWake: (c) => {
+		c.state.events.push("onWake");
+	},
+	onBeforeConnect: (c, params: ConnParams) => {
+		if (params?.trackLifecycle) c.state.events.push("onBeforeConnect");
+	},
+	onConnect: (c, conn) => {
+		if (conn.params?.trackLifecycle) c.state.events.push("onConnect");
+	},
+	onDisconnect: (c, conn) => {
+		if (conn.params?.trackLifecycle) c.state.events.push("onDisconnect");
+	},
+	actions: {
+		getEvents: (c) => {
+			return c.state.events;
+		},
+		increment: (c, x: number) => {
+			c.state.count += x;
+			return c.state.count;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/http/raw-fetch-counter.ts b/examples/sandbox/src/actors/http/raw-fetch-counter.ts
new file mode 100644
index 0000000000..811eb6485d
--- /dev/null
+++ b/examples/sandbox/src/actors/http/raw-fetch-counter.ts
@@ -0,0 +1,43 @@
+import { Hono } from "hono";
+import { type ActorContextOf, actor } from "rivetkit";
+
+export const rawFetchCounter = actor({
+	state: {
+		count: 0,
+	},
+	createVars: () => {
+		// Setup router
+		return { router: createCounterRouter() };
+	},
+	onRequest: (c, request) => {
+		return c.vars.router.fetch(request, { actor: c });
+	},
+	actions: {
+		// ...actions...
+	},
+});
+
+function createCounterRouter(): Hono<any> {
+	const app = new Hono<{
+		Bindings: { actor: ActorContextOf<typeof rawFetchCounter> };
+	}>();
+
+	app.get("/count", (c) => {
+		const { actor } = c.env;
+
+		return c.json({
+			count: actor.state.count,
+		});
+	});
+
+	app.post("/increment", (c) => {
+		const { actor } = c.env;
+
+		actor.state.count++;
+		return c.json({
+			count: actor.state.count,
+		});
+	});
+
+	return app;
+}
diff --git a/examples/sandbox/src/actors/http/raw-http-request-properties.ts b/examples/sandbox/src/actors/http/raw-http-request-properties.ts
new file mode 100644
index 0000000000..ef5d2c411e
--- /dev/null
+++ b/examples/sandbox/src/actors/http/raw-http-request-properties.ts
@@ -0,0 +1,95 @@
+import { actor, type RequestContext } from "rivetkit";
+
+export const rawHttpRequestPropertiesActor = actor({
+	actions: {},
+	onRequest(
+		ctx: RequestContext<any, any, any, any, any, any>,
+		request: Request,
+	) {
+		// Extract all relevant Request properties
+		const url = new URL(request.url);
+		const method = request.method;
+
+		// Get all headers
+		const headers: Record<string, string> = {};
+		request.headers.forEach((value, key) => {
+			headers[key] = value;
+		});
+
+		// Handle body based on content type
+		const handleBody = async () => {
+			if (!request.body) {
+				return null;
+			}
+
+			const contentType = request.headers.get("content-type") || "";
+
+			try {
+				if (contentType.includes("application/json")) {
+					const text = await request.text();
+					return text ? JSON.parse(text) : null;
+				} else {
+					// For non-JSON, return as text
+					const text = await request.text();
+					return text || null; // Return null for empty bodies
+				}
+			} catch (error) {
+				// If body parsing fails, return null
+				return null;
+			}
+		};
+
+		// Special handling for HEAD and OPTIONS requests
+		if (method === "HEAD") {
+			return new Response(null, {
+				status: 200,
+			});
+		}
+
+		if (method === "OPTIONS") {
+			return new Response(null, {
+				status: 204,
+			});
+		}
+
+		// Return all request properties as JSON
+		return handleBody().then((body) => {
+			const responseData = {
+				// URL properties
+				url: request.url,
+				pathname: url.pathname,
+				search: url.search,
+				searchParams: Object.fromEntries(url.searchParams.entries()),
+				hash: url.hash,
+
+				// Method
+				method: request.method,
+
+				// Headers
+				headers: headers,
+
+				// Body
+				body,
+				bodyText:
+					typeof body === "string"
+						? body
+						: body === null && request.body !== null
+							? ""
+							: null,
+
+				// Additional properties that might be available
+				// Note: Some properties like cache, credentials, mode, etc.
+				// might not be available in all environments
+				cache: request.cache || null,
+				credentials: request.credentials || null,
+				mode: request.mode || null,
+				redirect: request.redirect || null,
+				referrer: request.referrer || null,
+			};
+
+			return new Response(JSON.stringify(responseData), {
+				headers: { "Content-Type": "application/json" },
+			});
+		});
+	},
+});
diff --git a/examples/sandbox/src/actors/http/raw-http.ts b/examples/sandbox/src/actors/http/raw-http.ts
new file mode 100644
index 0000000000..48cbf7121b
--- /dev/null
+++ b/examples/sandbox/src/actors/http/raw-http.ts
@@ -0,0 +1,124 @@
+import { Hono } from "hono";
+import { actor, type RequestContext } from "rivetkit";
+
+export const rawHttpActor = actor({
+	state: {
+		requestCount: 0,
+	},
+	onRequest(
+		ctx: RequestContext<any, any, any, any, any, any>,
+		request: Request,
+	) {
+		const url = new URL(request.url);
+		const method = request.method;
+
+		// Track request count
+		ctx.state.requestCount++;
+
+		// Handle different endpoints
+		if (url.pathname === "/api/hello") {
+			return new Response(
+				JSON.stringify({ message: "Hello from actor!" }),
+				{
+					headers: { "Content-Type": "application/json" },
+				},
+			);
+		}
+
+		if (url.pathname === "/api/echo" && method === "POST") {
+			return new Response(request.body, {
+				headers: request.headers,
+			});
+		}
+
+		if (url.pathname === "/api/state") {
+			return new Response(
+				JSON.stringify({
+					requestCount: ctx.state.requestCount,
+				}),
+				{
+					headers: { "Content-Type": "application/json" },
+				},
+			);
+		}
+
+		if (url.pathname === "/api/headers") {
+			const headers: Record<string, string> = {};
+			request.headers.forEach((value, key) => {
+				headers[key] = value;
+			});
+			return new Response(JSON.stringify(headers), {
+				headers: { "Content-Type": "application/json" },
+			});
+		}
+
+		// Return 404 for unhandled paths
+		return new Response("Not Found", { status: 404 });
+	},
+	actions: {},
+});
+
+export const rawHttpNoHandlerActor = actor({
+	actions: {},
+});
+
+export const rawHttpVoidReturnActor = actor({
+	onRequest(ctx, request) {
+		// Intentionally return void to test error handling
+		return undefined as any;
+	},
+	actions: {},
+});
+
+export const rawHttpHonoActor = actor({
+	createVars() {
+		const router = new Hono();
+
+		// Set up routes
+		router.get("/", (c: any) =>
+			c.json({ message: "Welcome to Hono actor!" }),
+		);
+
+		router.get("/users", (c: any) =>
+			c.json([
+				{ id: 1, name: "Alice" },
+				{ id: 2, name: "Bob" },
+			]),
+		);
+
+		router.get("/users/:id", (c: any) => {
+			const id = c.req.param("id");
+			return c.json({
+				id: parseInt(id),
+				name: id === "1" ? "Alice" : "Bob",
+			});
+		});
+
+		router.post("/users", async (c: any) => {
+			const body = await c.req.json();
+			return c.json({ id: 3, ...body }, 201);
+		});
+
+		router.put("/users/:id", async (c: any) => {
+			const id = c.req.param("id");
+			const body = await c.req.json();
+			return c.json({ id: parseInt(id), ...body });
+		});
+
+		router.delete("/users/:id", (c: any) => {
+			const id = c.req.param("id");
+			return c.json({ message: `User ${id} deleted` });
+		});
+
+		// Return the router as a var
+		return { router };
+	},
+	onRequest(
+		ctx: RequestContext<any, any, any, any, any, any>,
+		request: Request,
+	) {
+		// Use the Hono router from vars
+		return ctx.vars.router.fetch(request);
+	},
+	actions: {},
+});
diff --git a/examples/sandbox/src/actors/http/raw-websocket-chat-room.ts b/examples/sandbox/src/actors/http/raw-websocket-chat-room.ts
new file mode 100644
index 0000000000..aff27b5788
--- /dev/null
+++ b/examples/sandbox/src/actors/http/raw-websocket-chat-room.ts
@@ -0,0 +1,73 @@
+import { actor } from "rivetkit";
+
+export const rawWebSocketChatRoom = actor({
+	state: {
+		messages: [] as Array<{
+			id: string;
+			text: string;
+			timestamp: number;
+		}>,
+	},
+	createVars: () => {
+		return {
+			sockets: new Set<any>(),
+		};
+	},
+	onWebSocket(ctx, socket) {
+		// Add socket to the set
+		ctx.vars.sockets.add(socket);
+
+		// Send recent messages to new connection
+		socket.send(
+			JSON.stringify({
+				type: "init",
+				messages: ctx.state.messages,
+			}),
+		);
+
+		// Handle incoming messages
+		socket.addEventListener("message", (event: any) => {
+			try {
+				const data = JSON.parse(event.data);
+
+				if (data.type === "message" && data.text) {
+					const message = {
+						id: crypto.randomUUID(),
+						text: data.text,
+						timestamp: Date.now(),
+					};
+
+					// Add to state
+					ctx.state.messages.push(message);
+					ctx.saveState({});
+
+					// Keep only last 50 messages
+					if (ctx.state.messages.length > 50) {
+						ctx.state.messages.shift();
+					}
+
+					// Broadcast to all connected clients
+					const broadcast = JSON.stringify({
+						type: "message",
+						...message,
+					});
+
+					for (const ws of ctx.vars.sockets) {
+						if (ws.readyState === 1) {
+							// OPEN
+							ws.send(broadcast);
+						}
+					}
+				}
+			} catch (e) {
+				console.error("Failed to process message:", e);
+			}
+		});
+
+		// Remove socket on close
+		socket.addEventListener("close", () => {
+			ctx.vars.sockets.delete(socket);
+		});
+	},
+	actions: {},
+});
diff --git a/examples/sandbox/src/actors/http/raw-websocket.ts b/examples/sandbox/src/actors/http/raw-websocket.ts
new file mode 100644
index 0000000000..0c8e181987
--- /dev/null
+++ b/examples/sandbox/src/actors/http/raw-websocket.ts
@@ -0,0 +1,114 @@
+import { type ActorContext, actor, type UniversalWebSocket } from "rivetkit";
+
+export const rawWebSocketActor = actor({
+	state: {
+		connectionCount: 0,
+		messageCount: 0,
+	},
+	onWebSocket(ctx, websocket) {
+		ctx.state.connectionCount = ctx.state.connectionCount + 1;
+		console.log(
+			`[ACTOR] New connection, count: ${ctx.state.connectionCount}`,
+		);
+
+		// Send welcome message
+		websocket.send(
+			JSON.stringify({
+				type: "welcome",
+				connectionCount: ctx.state.connectionCount,
+			}),
+		);
+		console.log("[ACTOR] Sent welcome message");
+
+		// Echo messages back
+		websocket.addEventListener("message", (event: any) => {
+			ctx.state.messageCount = ctx.state.messageCount + 1;
+			console.log(
+				`[ACTOR] Message received, total count: ${ctx.state.messageCount}, data:`,
+				event.data,
+			);
+
+			const data = event.data;
+			if (typeof data === "string") {
+				try {
+					const parsed = JSON.parse(data);
+					if (parsed.type === "ping") {
+						websocket.send(
+							JSON.stringify({
+								type: "pong",
+								timestamp: Date.now(),
+							}),
+						);
+					} else if (parsed.type === "getStats") {
+						console.log(
+							`[ACTOR] Sending stats - connections: ${ctx.state.connectionCount}, messages: ${ctx.state.messageCount}`,
+						);
+						websocket.send(
+							JSON.stringify({
+								type: "stats",
+								connectionCount: ctx.state.connectionCount,
+								messageCount: ctx.state.messageCount,
+							}),
+						);
+					} else if (parsed.type === "getRequestInfo") {
+						// Send back the request URL info if available
+						const url = ctx.request?.url || "ws://actor/websocket";
+						const urlObj = new URL(url);
+						websocket.send(
+							JSON.stringify({
+								type: "requestInfo",
+								url: url,
+								pathname: urlObj.pathname,
+								search: urlObj.search,
+							}),
+						);
+					} else {
+						// Echo back
+						websocket.send(data);
+					}
+				} catch {
+					// If not JSON, just echo it back
+					websocket.send(data);
+				}
+			} else {
+				// Echo binary data
+				websocket.send(data);
+			}
+		});
+
+		// Handle close
+		websocket.addEventListener("close", () => {
+			ctx.state.connectionCount = ctx.state.connectionCount - 1;
+			console.log(
+				`[ACTOR] Connection closed, count: ${ctx.state.connectionCount}`,
+			);
+		});
+	},
+	actions: {
+		getStats(ctx: any) {
+			return {
+				connectionCount: ctx.state.connectionCount,
+				messageCount: ctx.state.messageCount,
+			};
+		},
+	},
+});
+
+export const rawWebSocketBinaryActor = actor({
+	onWebSocket(ctx, websocket) {
+		// Handle binary data
+		websocket.addEventListener("message", (event: any) => {
+			const data = event.data;
+			if (data instanceof ArrayBuffer || data instanceof Uint8Array) {
+				// Reverse the bytes and send back
+				const bytes = new Uint8Array(data);
+				const reversed = new Uint8Array(bytes.length);
+				for (let i = 0; i < bytes.length; i++) {
+					reversed[i] = bytes[bytes.length - 1 - i];
+				}
+				websocket.send(reversed);
+			}
+		});
+	},
+	actions: {},
+});
diff --git a/examples/sandbox/src/actors/inter-actor/cross-actor-actions.ts b/examples/sandbox/src/actors/inter-actor/cross-actor-actions.ts
new file mode 100644
index 0000000000..e1b75b3847
--- /dev/null
+++ b/examples/sandbox/src/actors/inter-actor/cross-actor-actions.ts
@@ -0,0 +1,176 @@
+import { actor } from "rivetkit";
+
+export interface InventoryInput {
+	initialStock: number;
+	itemName: string;
+}
+
+export interface InventoryState {
+	itemName: string;
+	stock: number;
+	reservations: string[]; // Track which checkouts have reserved items
+}
+
+export interface CheckoutInput {
+	customerName: string;
+}
+
+export interface CheckoutItem {
+	itemId: string;
+	itemName: string;
+	quantity: number;
+}
+
+export interface CheckoutResult {
+	success: boolean;
+	message: string;
+	remainingStock?: number;
+}
+
+export interface CheckoutState {
+	customerName: string;
+	items: CheckoutItem[];
+	completed: boolean;
+}
+
+// Inventory actor manages stock for a specific item
+export const inventory = actor({
+	// Each item has its own inventory actor instance
+	createState: (_c, input?: InventoryInput): InventoryState => ({
+		itemName: input?.itemName ?? "Widget",
+		stock: input?.initialStock ?? 100,
+		reservations: [],
+	}),
+
+	actions: {
+		// Check current stock
+		getStock: (c) => ({
+			itemName: c.state.itemName,
+			stock: c.state.stock,
+		}),
+
+		// Reserve items for checkout (called by checkout actor)
+		reserveItems: (c, checkoutId: string, quantity: number) => {
+			if (c.state.stock < quantity) {
+				return {
+					success: false,
+					message: `Insufficient stock. Available: ${c.state.stock}, Requested: ${quantity}`,
+					availableStock: c.state.stock,
+				};
+			}
+
+			// Reserve the items
+			c.state.stock -= quantity;
+			c.state.reservations.push(checkoutId);
+
+			return {
+				success: true,
+				message: `Reserved ${quantity} items for checkout ${checkoutId}`,
+				remainingStock: c.state.stock,
+			};
+		},
+
+		// Release reserved items if checkout is cancelled
+		releaseItems: (c, checkoutId: string, quantity: number) => {
+			const index = c.state.reservations.indexOf(checkoutId);
+			if (index > -1) {
+				c.state.reservations.splice(index, 1);
+				c.state.stock += quantity;
+			}
+			return {
+				success: true,
+				remainingStock: c.state.stock,
+			};
+		},
+	},
+});
+
+// Checkout actor manages the checkout process and communicates with inventory
+export const checkout = actor({
+	createState: (_c, input?: CheckoutInput): CheckoutState => ({
+		customerName: input?.customerName ?? "Guest",
+		items: [],
+		completed: false,
+	}),
+
+	actions: {
+		// Add item to checkout and reserve from inventory
+		addItem: async (
+			c,
+			itemId: string,
+			quantity: number,
+		): Promise<CheckoutResult> => {
+			// Use server-side client to communicate with inventory actor
+			// https://rivet.dev/docs/actors/communicating-between-actors
+			const inventoryActor = c.client().inventory.getOrCreate([itemId]);
+
+			// Get item details
+			const itemInfo = await inventoryActor.getStock();
+
+			// Try to reserve items from inventory
+			const reservation = await inventoryActor.reserveItems(
+				c.actorId, // Use checkout ID as reservation ID
+				quantity,
+			);
+
+			if (!reservation.success) {
+				return {
+					success: false,
+					message: reservation.message,
+				};
+			}
+
+			// Add item to checkout
+			c.state.items.push({
+				itemId,
+				itemName: itemInfo.itemName,
+				quantity,
+			});
+
+			return {
+				success: true,
+				message: `Added ${quantity} ${itemInfo.itemName} to checkout`,
+				remainingStock: reservation.remainingStock,
+			};
+		},
+
+		// Get checkout summary
+		getSummary: (c) => ({
+			customerName: c.state.customerName,
+			items: c.state.items,
+			completed: c.state.completed,
+			totalItems: c.state.items.reduce(
+				(sum, item) => sum + item.quantity,
+				0,
+			),
+		}),
+
+		// Complete the checkout
+		completeCheckout: (c) => {
+			c.state.completed = true;
+			return {
+				success: true,
+				message: "Checkout completed successfully",
+			};
+		},
+
+		// Cancel checkout and release all reservations
+		cancelCheckout: async (c) => {
+			// Release all reserved items
+			for (const item of c.state.items) {
+				const inventoryActor = c
+					.client()
+					.inventory.getOrCreate([item.itemId]);
+				await inventoryActor.releaseItems(c.actorId, item.quantity);
+			}
+
+			// Clear the cart
+			c.state.items = [];
+
+			return {
+				success: true,
+				message: "Checkout cancelled, items returned to inventory",
+			};
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/lifecycle/destroy.ts b/examples/sandbox/src/actors/lifecycle/destroy.ts
new file mode 100644
index 0000000000..46723dce49
--- /dev/null
+++ b/examples/sandbox/src/actors/lifecycle/destroy.ts
@@ -0,0 +1,43 @@
+import { actor } from "rivetkit";
+import type { registry } from "../../actors.ts";
+
+export const destroyObserver = actor({
+	state: { destroyedActors: [] as string[] },
+	actions: {
+		notifyDestroyed: (c, actorKey: string) => {
+			c.state.destroyedActors.push(actorKey);
+		},
+		wasDestroyed: (c, actorKey: string) => {
+			return c.state.destroyedActors.includes(actorKey);
+		},
+		reset: (c) => {
+			c.state.destroyedActors = [];
+		},
+	},
+});
+
+export const destroyActor = actor({
+	state: { value: 0, key: "" },
+	onWake: (c) => {
+		// Store the actor key so we can reference it in onDestroy
+		c.state.key = c.key.join("/");
+	},
+	onDestroy: async (c) => {
+		const client = c.client<typeof registry>();
+		const observer = client.destroyObserver.getOrCreate(["observer"]);
+		await observer.notifyDestroyed(c.state.key);
+	},
+	actions: {
+		setValue: async (c, newValue: number) => {
+			c.state.value = newValue;
+			await c.saveState({ immediate: true });
+			return c.state.value;
+		},
+		getValue: (c) => {
+			return c.state.value;
+		},
+		destroy: (c) => {
+			c.destroy();
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/lifecycle/hibernation.ts b/examples/sandbox/src/actors/lifecycle/hibernation.ts
new file mode 100644
index 0000000000..d1c2dd3d38
--- /dev/null
+++ b/examples/sandbox/src/actors/lifecycle/hibernation.ts
@@ -0,0 +1,78 @@
+import { actor } from "rivetkit";
+
+export const HIBERNATION_SLEEP_TIMEOUT = 500;
+
+export type HibernationConnState = {
+	count: number;
+	connectCount: number;
+	disconnectCount: number;
+};
+
+export const hibernationActor = actor({
+	state: {
+		sleepCount: 0,
+		wakeCount: 0,
+	},
+	createConnState: (c): HibernationConnState => {
+		return {
+			count: 0,
+			connectCount: 0,
+			disconnectCount: 0,
+		};
+	},
+	onWake: (c) => {
+		c.state.wakeCount += 1;
+	},
+	onSleep: (c) => {
+		c.state.sleepCount += 1;
+	},
+	onConnect: (c, conn) => {
+		conn.state.connectCount += 1;
+	},
+	onDisconnect: (c, conn) => {
+		conn.state.disconnectCount += 1;
+	},
+	actions: {
+		// Basic RPC that returns a simple value
+		ping: (c) => {
+			return "pong";
+		},
+		// Increment the connection's count
+		connIncrement: (c) => {
+			c.conn.state.count += 1;
+			return c.conn.state.count;
+		},
+		// Get the connection's count
+		getConnCount: (c) => {
+			return c.conn.state.count;
+		},
+		// Get the connection's lifecycle counts
+		getConnLifecycleCounts: (c) => {
+			return {
+				connectCount: c.conn.state.connectCount,
+				disconnectCount: c.conn.state.disconnectCount,
+			};
+		},
+		// Get all connection IDs
+		getConnectionIds: (c) => {
+			return c.conns
+				.entries()
+				.map((x) => x[0])
+				.toArray();
+		},
+		// Get actor sleep/wake counts
+		getActorCounts: (c) => {
+			return {
+				sleepCount: c.state.sleepCount,
+				wakeCount: c.state.wakeCount,
+			};
+		},
+		// Trigger sleep
+		triggerSleep: (c) => {
+			c.sleep();
+		},
+	},
+	options: {
+		sleepTimeout: HIBERNATION_SLEEP_TIMEOUT,
+	},
+});
diff --git a/examples/sandbox/src/actors/lifecycle/run.ts b/examples/sandbox/src/actors/lifecycle/run.ts
new file mode 100644
index 0000000000..42dce0de96
--- /dev/null
+++ b/examples/sandbox/src/actors/lifecycle/run.ts
@@ -0,0 +1,165 @@
+import { actor } from "rivetkit";
+import type { registry } from "../../actors.ts";
+
+export const RUN_SLEEP_TIMEOUT = 500;
+
+// Actor that tracks tick counts and respects abort signal
+export const runWithTicks = actor({
+	state: {
+		tickCount: 0,
+		lastTickAt: 0,
+		runStarted: false,
+		runExited: false,
+	},
+	run: async (c) => {
+		c.state.runStarted = true;
+		c.log.info("run handler started");
+
+		while (!c.abortSignal.aborted) {
+			c.state.tickCount += 1;
+			c.state.lastTickAt = Date.now();
+			c.log.info({ msg: "tick", tickCount: c.state.tickCount });
+
+			// Wait 50ms between ticks, or exit early if aborted
+			await new Promise<void>((resolve) => {
+				const timeout = setTimeout(resolve, 50);
+				c.abortSignal.addEventListener(
+					"abort",
+					() => {
+						clearTimeout(timeout);
+						resolve();
+					},
+					{ once: true },
+				);
+			});
+		}
+
+		c.state.runExited = true;
+		c.log.info("run handler exiting gracefully");
+	},
+	actions: {
+		getState: (c) => ({
+			tickCount: c.state.tickCount,
+			lastTickAt: c.state.lastTickAt,
+			runStarted: c.state.runStarted,
+			runExited: c.state.runExited,
+		}),
+	},
+	options: {
+		sleepTimeout: RUN_SLEEP_TIMEOUT,
+		runStopTimeout: 1000,
+	},
+});
+
+// Actor that consumes from a queue in the run handler
+export const runWithQueueConsumer = actor({
+	state: {
+		messagesReceived: [] as Array<{ name: string; body: unknown }>,
+		runStarted: false,
+	},
+	run: async (c) => {
+		c.state.runStarted = true;
+		c.log.info("run handler started, waiting for messages");
+
+		while (!c.abortSignal.aborted) {
+			const message = await c.queue.next("messages", { timeout: 100 });
+			if (message) {
+				c.log.info({ msg: "received message", body: message.body });
+				c.state.messagesReceived.push({
+					name: message.name,
+					body: message.body,
+				});
+			}
+		}
+
+		c.log.info("run handler exiting gracefully");
+	},
+	actions: {
+		getState: (c) => ({
+			messagesReceived: c.state.messagesReceived,
+			runStarted: c.state.runStarted,
+		}),
+		sendMessage: async (c, body: unknown) => {
+			const client = c.client<typeof registry>();
+			const handle = client.runWithQueueConsumer.getForId(c.actorId);
+			await handle.queue.messages.send(body);
+			return true;
+		},
+	},
+	options: {
+		sleepTimeout: RUN_SLEEP_TIMEOUT,
+		runStopTimeout: 1000,
+	},
+});
+
+// Actor that exits the run handler after a short delay to test crash behavior
+export const runWithEarlyExit = actor({
+	state: {
+		runStarted: false,
+		destroyCalled: false,
+	},
+	run: async (c) => {
+		c.state.runStarted = true;
+		c.log.info("run handler started, will exit after delay");
+		// Wait a bit so we can observe the runStarted state before exit
+		await new Promise((resolve) => setTimeout(resolve, 200));
+		c.log.info("run handler exiting early");
+		// Exit without respecting abort signal
+	},
+	onDestroy: (c) => {
+		c.state.destroyCalled = true;
+	},
+	actions: {
+		getState: (c) => ({
+			runStarted: c.state.runStarted,
+			destroyCalled: c.state.destroyCalled,
+		}),
+	},
+	options: {
+		sleepTimeout: RUN_SLEEP_TIMEOUT,
+	},
+});
+
+// Actor that throws an error in the run handler to test crash behavior
+export const runWithError = actor({
+	state: {
+		runStarted: false,
+		destroyCalled: false,
+	},
+	run: async (c) => {
+		c.state.runStarted = true;
+		c.log.info("run handler started, will throw error");
+		await new Promise((resolve) => setTimeout(resolve, 50));
+		throw new Error("intentional error in run handler");
+	},
+	onDestroy: (c) => {
+		c.state.destroyCalled = true;
+	},
+	actions: {
+		getState: (c) => ({
+			runStarted: c.state.runStarted,
+			destroyCalled: c.state.destroyCalled,
+		}),
+	},
+	options: {
+		sleepTimeout: RUN_SLEEP_TIMEOUT,
+	},
+});
+
+// Actor without a run handler for comparison
+export const runWithoutHandler = actor({
+	state: {
+		wakeCount: 0,
+	},
+	onWake: (c) => {
+		c.state.wakeCount += 1;
+	},
+	actions: {
+		getState: (c) => ({
+			wakeCount: c.state.wakeCount,
+		}),
+	},
+	options: {
+		sleepTimeout: RUN_SLEEP_TIMEOUT,
+	},
+});
diff --git a/examples/sandbox/src/actors/lifecycle/scheduled.ts b/examples/sandbox/src/actors/lifecycle/scheduled.ts
new file mode 100644
index 0000000000..7bac35bac8
--- /dev/null
+++ b/examples/sandbox/src/actors/lifecycle/scheduled.ts
@@ -0,0 +1,76 @@
+import { actor } from "rivetkit";
+
+export const scheduled = actor({
+	state: {
+		lastRun: 0,
+		scheduledCount: 0,
+		taskHistory: [] as string[],
+	},
+	actions: {
+		// Schedule using 'at' with specific timestamp
+		scheduleTaskAt: (c, timestamp: number) => {
+			c.schedule.at(timestamp, "onScheduledTask");
+			return timestamp;
+		},
+
+		// Schedule using 'after' with delay
+		scheduleTaskAfter: (c, delayMs: number) => {
+			c.schedule.after(delayMs, "onScheduledTask");
+			return Date.now() + delayMs;
+		},
+
+		// Schedule with a task ID for ordering tests
+		scheduleTaskAfterWithId: (c, taskId: string, delayMs: number) => {
+			c.schedule.after(delayMs, "onScheduledTaskWithId", taskId);
+			return { taskId, scheduledFor: Date.now() + delayMs };
+		},
+
+		// Original method for backward compatibility
+		scheduleTask: (c, delayMs: number) => {
+			const timestamp = Date.now() + delayMs;
+			c.schedule.at(timestamp, "onScheduledTask");
+			return timestamp;
+		},
+
+		// Getters for state
+		getLastRun: (c) => {
+			return c.state.lastRun;
+		},
+
+		getScheduledCount: (c) => {
+			return c.state.scheduledCount;
+		},
+
+		getTaskHistory: (c) => {
+			return c.state.taskHistory;
+		},
+
+		clearHistory: (c) => {
+			c.state.taskHistory = [];
+			c.state.scheduledCount = 0;
+			c.state.lastRun = 0;
+			return true;
+		},
+
+		// Scheduled task handlers
+		onScheduledTask: (c) => {
+			c.state.lastRun = Date.now();
+			c.state.scheduledCount++;
+			c.broadcast("scheduled", {
+				time: c.state.lastRun,
+				count: c.state.scheduledCount,
+			});
+		},
+
+		onScheduledTaskWithId: (c, taskId: string) => {
+			c.state.lastRun = Date.now();
+			c.state.scheduledCount++;
+			c.state.taskHistory.push(taskId);
+			c.broadcast("scheduledWithId", {
+				taskId,
+				time: c.state.lastRun,
+				count: c.state.scheduledCount,
+			});
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/lifecycle/sleep.ts b/examples/sandbox/src/actors/lifecycle/sleep.ts
new file mode 100644
index 0000000000..49d963786b
--- /dev/null
+++ b/examples/sandbox/src/actors/lifecycle/sleep.ts
@@ -0,0 +1,196 @@
+import { actor, type UniversalWebSocket } from "rivetkit";
+import { promiseWithResolvers } from "rivetkit/utils";
+
+export const SLEEP_TIMEOUT = 1000;
+
+export const sleep = actor({
+	state: { startCount: 0, sleepCount: 0 },
+	onWake: (c) => {
+		c.state.startCount += 1;
+	},
+	onSleep: (c) => {
+		c.state.sleepCount += 1;
+	},
+	actions: {
+		triggerSleep: (c) => {
+			c.sleep();
+		},
+		getCounts: (c) => {
+			return {
+				startCount: c.state.startCount,
+				sleepCount: c.state.sleepCount,
+			};
+		},
+		setAlarm: async (c, duration: number) => {
+			await c.schedule.after(duration, "onAlarm");
+		},
+		onAlarm: (c) => {
+			c.log.info("alarm called");
+		},
+	},
+	options: {
+		sleepTimeout: SLEEP_TIMEOUT,
+	},
+});
+
+export const sleepWithLongRpc = actor({
+	state: { startCount: 0, sleepCount: 0 },
+	createVars: () =>
+		({}) as { longRunningResolve: PromiseWithResolvers<void> },
+	onWake: (c) => {
+		c.state.startCount += 1;
+	},
+	onSleep: (c) => {
+		c.state.sleepCount += 1;
+	},
+	actions: {
+		getCounts: (c) => {
+			return {
+				startCount: c.state.startCount,
+				sleepCount: c.state.sleepCount,
+			};
+		},
+		longRunningRpc: async (c) => {
+			c.log.info("starting long running rpc");
+			c.vars.longRunningResolve = promiseWithResolvers();
+			c.broadcast("waiting");
+			await c.vars.longRunningResolve.promise;
+			c.log.info("finished long running rpc");
+		},
+		finishLongRunningRpc: (c) => c.vars.longRunningResolve?.resolve(),
+	},
+	options: {
+		sleepTimeout: SLEEP_TIMEOUT,
+	},
+});
+
+export const sleepWithRawHttp = actor({
+	state: { startCount: 0, sleepCount: 0, requestCount: 0 },
+	onWake: (c) => {
+		c.state.startCount += 1;
+	},
+	onSleep: (c) => {
+		c.state.sleepCount += 1;
+	},
+	onRequest: async (c, request) => {
+		c.state.requestCount += 1;
+		const url = new URL(request.url);
+
+		if (url.pathname === "/long-request") {
+			const duration = parseInt(
+				url.searchParams.get("duration") || "1000",
+			);
+			c.log.info({ msg: "starting long fetch request", duration });
+			await new Promise((resolve) => setTimeout(resolve, duration));
+			c.log.info("finished long fetch request");
+			return new Response(JSON.stringify({ completed: true }), {
+				headers: { "Content-Type": "application/json" },
+			});
+		}
+
+		return new Response("Not Found", { status: 404 });
+	},
+	actions: {
+		getCounts: (c) => {
+			return {
+				startCount: c.state.startCount,
+				sleepCount: c.state.sleepCount,
+				requestCount: c.state.requestCount,
+			};
+		},
+	},
+	options: {
+		sleepTimeout: SLEEP_TIMEOUT,
+	},
+});
+
+export const sleepWithRawWebSocket = actor({
+	state: { startCount: 0, sleepCount: 0, connectionCount: 0 },
+	onWake: (c) => {
+		c.state.startCount += 1;
+	},
+	onSleep: (c) => {
+		c.state.sleepCount += 1;
+	},
+	onWebSocket: (c, websocket: UniversalWebSocket) => {
+		c.state.connectionCount += 1;
+		c.log.info({
+			msg: "websocket connected",
+			connectionCount: c.state.connectionCount,
+		});
+
+		websocket.send(
+			JSON.stringify({
+				type: "connected",
+				connectionCount: c.state.connectionCount,
+			}),
+		);
+
+		websocket.addEventListener("message", (event: any) => {
+			const data = event.data;
+			if (typeof data === "string") {
+				try {
+					const parsed = JSON.parse(data);
+					if (parsed.type === "getCounts") {
+						websocket.send(
+							JSON.stringify({
+								type: "counts",
+								startCount: c.state.startCount,
+								sleepCount: c.state.sleepCount,
+								connectionCount: c.state.connectionCount,
+							}),
+						);
+					} else if (parsed.type === "keepAlive") {
+						// Just acknowledge to keep connection alive
+						websocket.send(JSON.stringify({ type: "ack" }));
+					}
+				} catch {
+					// Echo non-JSON messages
+					websocket.send(data);
+				}
+			}
+		});
+
+		websocket.addEventListener("close", () => {
+			c.state.connectionCount -= 1;
+			c.log.info({
+				msg: "websocket disconnected",
+				connectionCount: c.state.connectionCount,
+			});
+		});
+	},
+	actions: {
+		getCounts: (c) => {
+			return {
+				startCount: c.state.startCount,
+				sleepCount: c.state.sleepCount,
+				connectionCount: c.state.connectionCount,
+			};
+		},
+	},
+	options: {
+		sleepTimeout: SLEEP_TIMEOUT,
+	},
+});
+
+export const sleepWithNoSleepOption = actor({
+	state: { startCount: 0, sleepCount: 0 },
+	onWake: (c) => {
+		c.state.startCount += 1;
+	},
+	onSleep: (c) => {
+		c.state.sleepCount += 1;
+	},
+	actions: {
+		getCounts: (c) => {
+			return {
+				startCount: c.state.startCount,
+				sleepCount: c.state.sleepCount,
+			};
+		},
+	},
+	options: {
+		sleepTimeout: SLEEP_TIMEOUT,
+		noSleep: true,
+	},
+});
diff --git a/examples/queue-sandbox-vercel/src/actors/keep-awake.ts b/examples/sandbox/src/actors/queue/keep-awake.ts
similarity index 100%
rename from examples/queue-sandbox-vercel/src/actors/keep-awake.ts
rename to examples/sandbox/src/actors/queue/keep-awake.ts
diff --git a/examples/queue-sandbox-vercel/src/actors/multi-queue.ts b/examples/sandbox/src/actors/queue/multi-queue.ts
similarity index 100%
rename from examples/queue-sandbox-vercel/src/actors/multi-queue.ts
rename to examples/sandbox/src/actors/queue/multi-queue.ts
diff --git a/examples/sandbox/src/actors/queue/queue.ts b/examples/sandbox/src/actors/queue/queue.ts
new file mode 100644
index 0000000000..d77e9a77ff
--- /dev/null
+++ b/examples/sandbox/src/actors/queue/queue.ts
@@ -0,0 +1,123 @@
+import { actor } from "rivetkit";
+import type { registry } from "../../actors.ts";
+
+export const queueActor = actor({
+	state: {},
+	actions: {
+		receiveOne: async (
+			c,
+			name: string,
+			opts?: { count?: number; timeout?: number },
+		) => {
+			const message = await c.queue.next(name, opts);
+			if (!message) {
+				return null;
+			}
+			return { name: message.name, body: message.body };
+		},
+		receiveMany: async (
+			c,
+			names: string[],
+			opts?: { count?: number; timeout?: number },
+		) => {
+			const messages = await c.queue.next(names, opts);
+			return (messages ?? []).map(
+				(message: { name: string; body: unknown }) => ({
+					name: message.name,
+					body: message.body,
+				}),
+			);
+		},
+		receiveRequest: async (
+			c,
+			request: {
+				name: string | string[];
+				count?: number;
+				timeout?: number;
+			},
+		) => {
+			const messages = await c.queue.next(request);
+			return (messages ?? []).map(
+				(message: { name: string; body: unknown }) => ({
+					name: message.name,
+					body: message.body,
+				}),
+			);
+		},
+		sendToSelf: async (c, name: string, body: unknown) => {
+			const client = c.client<typeof registry>();
+			const handle = client.queueActor.getForId(c.actorId);
+			await handle.queue[name].send(body);
+			return true;
+		},
+		waitForAbort: async (c) => {
+			setTimeout(() => {
+				c.destroy();
+			}, 10);
+			await c.queue.next("abort", { timeout: 10_000 });
+			return true;
+		},
+		receiveAndComplete: async (c, name: string) => {
+			const message = await c.queue.next(name, { wait: true });
+			if (!message) {
+				return null;
+			}
+			await message.complete({ echo: message.body });
+			return { name: message.name, body: message.body };
+		},
+		receiveAndCompleteTwice: async (c, name: string) => {
+			const message = await c.queue.next(name, { wait: true });
+			if (!message) {
+				return null;
+			}
+			await message.complete({ ok: true });
+			try {
+				await message.complete({ ok: false });
+				return { ok: false };
+			} catch (error) {
+				const actorError = error as { group?: string; code?: string };
+				return { group: actorError.group, code: actorError.code };
+			}
+		},
+		receiveWithoutWaitComplete: async (c, name: string) => {
+			const message = await c.queue.next(name);
+			if (!message) {
+				return null;
+			}
+			try {
+				await message.complete();
+				return { ok: false };
+			} catch (error) {
+				const actorError = error as { group?: string; code?: string };
+				return { group: actorError.group, code: actorError.code };
+			}
+		},
+		receiveWhilePending: async (c, name: string) => {
+			const message = await c.queue.next(name, { wait: true });
+			if (!message) {
+				return null;
+			}
+			let errorPayload: { group?: string; code?: string } | undefined;
+			try {
+				await c.queue.next(name);
+			} catch (error) {
+				const actorError = error as { group?: string; code?: string };
+				errorPayload = {
+					group: actorError.group,
+					code: actorError.code,
+				};
+			}
+			await message.complete({ ok: true });
+			return errorPayload ?? { ok: false };
+		},
+	},
+});
+
+export const queueLimitedActor = actor({
+	state: {},
+	actions: {},
+	options: {
+		maxQueueSize: 1,
+		maxQueueMessageSize: 64,
+	},
+});
diff --git a/examples/queue-sandbox-vercel/src/actors/self-sender.ts b/examples/sandbox/src/actors/queue/self-sender.ts
similarity index 100%
rename from examples/queue-sandbox-vercel/src/actors/self-sender.ts
rename to examples/sandbox/src/actors/queue/self-sender.ts
diff --git a/examples/queue-sandbox-vercel/src/actors/sender.ts b/examples/sandbox/src/actors/queue/sender.ts
similarity index 100%
rename from examples/queue-sandbox-vercel/src/actors/sender.ts
rename to examples/sandbox/src/actors/queue/sender.ts
diff --git a/examples/queue-sandbox-vercel/src/actors/timeout.ts b/examples/sandbox/src/actors/queue/timeout.ts
similarity index 100%
rename from examples/queue-sandbox-vercel/src/actors/timeout.ts
rename to examples/sandbox/src/actors/queue/timeout.ts
diff --git a/examples/queue-sandbox-vercel/src/actors/worker.ts b/examples/sandbox/src/actors/queue/worker.ts
similarity index 100%
rename from examples/queue-sandbox-vercel/src/actors/worker.ts
rename to examples/sandbox/src/actors/queue/worker.ts
diff --git a/examples/sandbox/src/actors/state/actor-onstatechange.ts b/examples/sandbox/src/actors/state/actor-onstatechange.ts
new file mode 100644
index 0000000000..1a51841a33
--- /dev/null
+++ b/examples/sandbox/src/actors/state/actor-onstatechange.ts
@@ -0,0 +1,43 @@
+import { actor } from "rivetkit";
+
+export const onStateChangeActor = actor({
+	state: {
+		value: 0,
+		changeCount: 0,
+	},
+	actions: {
+		// Action that modifies state - should trigger onStateChange
+		setValue: (c, newValue: number) => {
+			c.state.value = newValue;
+			return c.state.value;
+		},
+		// Action that modifies state multiple times - should trigger onStateChange for each change
+		incrementMultiple: (c, times: number) => {
+			for (let i = 0; i < times; i++) {
+				c.state.value++;
+			}
+			return c.state.value;
+		},
+		// Action that doesn't modify state - should NOT trigger onStateChange
+		getValue: (c) => {
+			return c.state.value;
+		},
+		// Action that reads and returns without modifying - should NOT trigger onStateChange
+		getDoubled: (c) => {
+			const doubled = c.state.value * 2;
+			return doubled;
+		},
+		// Get the count of how many times onStateChange was called
+		getChangeCount: (c) => {
+			return c.state.changeCount;
+		},
+		// Reset change counter for testing
+		resetChangeCount: (c) => {
+			c.state.changeCount = 0;
+		},
+	},
+	// Track onStateChange calls
+	onStateChange: (c) => {
+		c.state.changeCount++;
+	},
+});
diff --git a/examples/sandbox/src/actors/state/kv.ts b/examples/sandbox/src/actors/state/kv.ts
new file mode 100644
index 0000000000..60ae2cd3e1
--- /dev/null
+++ b/examples/sandbox/src/actors/state/kv.ts
@@ -0,0 +1,43 @@
+import { actor, type ActorContext } from "rivetkit";
+
+export const kvActor = actor({
+	actions: {
+		putText: async (
+			c: ActorContext<any, any, any, any, any, any>,
+			key: string,
+			value: string,
+		) => {
+			await c.kv.put(key, value);
+			return true;
+		},
+		getText: async (
+			c: ActorContext<any, any, any, any, any, any>,
+			key: string,
+		) => {
+			return await c.kv.get(key);
+		},
+		listText: async (
+			c: ActorContext<any, any, any, any, any, any>,
+			prefix: string,
+		) => {
+			const results = await c.kv.list(prefix, { keyType: "text" });
+			return results.map(([key, value]) => ({
+				key,
+				value,
+			}));
+		},
+		roundtripArrayBuffer: async (
+			c: ActorContext<any, any, any, any, any, any>,
+			key: string,
+			values: number[],
+		) => {
+			const buffer = new Uint8Array(values).buffer;
+			await c.kv.put(key, buffer, { type: "arrayBuffer" });
+			const result = await c.kv.get(key, { type: "arrayBuffer" });
+			if (!result) {
+				return null;
+			}
+			return Array.from(new Uint8Array(result));
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/state/large-payloads.ts b/examples/sandbox/src/actors/state/large-payloads.ts
new file mode 100644
index 0000000000..9783243043
--- /dev/null
+++ b/examples/sandbox/src/actors/state/large-payloads.ts
@@ -0,0 +1,86 @@
+import { actor } from "rivetkit";
+
+/**
+ * Actor for testing large payloads without connections
+ */
+export const largePayloadActor = actor({
+	state: {},
+	actions: {
+		/**
+		 * Accepts a large request payload and returns its size
+		 */
+		processLargeRequest: (c, data: { items: string[] }) => {
+			return {
+				itemCount: data.items.length,
+				firstItem: data.items[0],
+				lastItem: data.items[data.items.length - 1],
+			};
+		},
+
+		/**
+		 * Returns a large response payload
+		 */
+		getLargeResponse: (c, itemCount: number) => {
+			const items: string[] = [];
+			for (let i = 0; i < itemCount; i++) {
+				items.push(`Item ${i} with some additional text to increase size`);
+			}
+			return { items };
+		},
+
+		/**
+		 * Echo back the request data
+		 */
+		echo: (c, data: unknown) => {
+			return data;
+		},
+	},
+});
+
+/**
+ * Actor for testing large payloads with connections
+ */
+export const largePayloadConnActor = actor({
+	state: {},
+	connState: {
+		lastRequestSize: 0,
+	},
+	actions: {
+		/**
+		 * Accepts a large request payload and returns its size
+		 */
+		processLargeRequest: (c, data: { items: string[] }) => {
+			c.conn.state.lastRequestSize = data.items.length;
+			return {
+				itemCount: data.items.length,
+				firstItem: data.items[0],
+				lastItem: data.items[data.items.length - 1],
+			};
+		},
+
+		/**
+		 * Returns a large response payload
+		 */
+		getLargeResponse: (c, itemCount: number) => {
+			const items: string[] = [];
+			for (let i = 0; i < itemCount; i++) {
+				items.push(`Item ${i} with some additional text to increase size`);
+			}
+			return { items };
+		},
+
+		/**
+		 * Echo back the request data
+		 */
+		echo: (c, data: unknown) => {
+			return data;
+		},
+
+		/**
+		 * Get the last request size
+		 */
+		getLastRequestSize: (c) => {
+			return c.conn.state.lastRequestSize;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/state/metadata.ts b/examples/sandbox/src/actors/state/metadata.ts
new file mode 100644
index 0000000000..7d8641d817
--- /dev/null
+++ b/examples/sandbox/src/actors/state/metadata.ts
@@ -0,0 +1,75 @@
+import { actor } from "rivetkit";
+
+// Note: For testing only - metadata API will need to be mocked
+// in tests since this is implementation-specific
+export const metadataActor = actor({
+	state: {
+		lastMetadata: null as any,
+		actorName: "",
+		// Store tags and region in state for testing since they may not be
+		// available in the context in all environments
+		storedTags: {} as Record<string, string>,
+		storedRegion: null as string | null,
+	},
+	onWake: (c) => {
+		// Store the actor name during initialization
+		c.state.actorName = c.name;
+	},
+	actions: {
+		// Set up test tags - this will be called by tests to simulate tags
+		setupTestTags: (c, tags: Record<string, string>) => {
+			c.state.storedTags = tags;
+			return tags;
+		},
+
+		// Set up test region - this will be called by tests to simulate region
+		setupTestRegion: (c, region: string) => {
+			c.state.storedRegion = region;
+			return region;
+		},
+
+		// Get all available metadata
+		getMetadata: (c) => {
+			// Create metadata object from stored values
+			const metadata = {
+				name: c.name,
+				tags: c.state.storedTags,
+				region: c.state.storedRegion,
+			};
+
+			// Store for later inspection
+			c.state.lastMetadata = metadata;
+			return metadata;
+		},
+
+		// Get the actor name
+		getActorName: (c) => {
+			return c.name;
+		},
+
+		// Get a specific tag by key
+		getTag: (c, key: string) => {
+			return c.state.storedTags[key] || null;
+		},
+
+		// Get all tags
+		getTags: (c) => {
+			return c.state.storedTags;
+		},
+
+		// Get the region
+		getRegion: (c) => {
+			return c.state.storedRegion;
+		},
+
+		// Get the stored actor name (from onWake)
+		getStoredActorName: (c) => {
+			return c.state.actorName;
+		},
+
+		// Get last retrieved metadata
+		getLastMetadata: (c) => {
+			return c.state.lastMetadata;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/state/vars.ts b/examples/sandbox/src/actors/state/vars.ts
new file mode 100644
index 0000000000..7a62319824
--- /dev/null
+++ b/examples/sandbox/src/actors/state/vars.ts
@@ -0,0 +1,91 @@
+import { actor } from "rivetkit";
+
+// Actor with static vars
+export const staticVarActor = actor({
+	state: { value: 0 },
+	connState: { hello: "world" },
+	vars: { counter: 42, name: "test-actor" },
+	actions: {
+		getVars: (c) => {
+			return c.vars;
+		},
+		getName: (c) => {
+			return c.vars.name;
+		},
+	},
+});
+
+// Actor with nested vars
+export const nestedVarActor = actor({
+	state: { value: 0 },
+	connState: { hello: "world" },
+	vars: {
+		counter: 42,
+		nested: {
+			value: "original",
+			array: [1, 2, 3],
+			obj: { key: "value" },
+		},
+	},
+	actions: {
+		getVars: (c) => {
+			return c.vars;
+		},
+		modifyNested: (c) => {
+			// Attempt to modify the nested object
+			c.vars.nested.value = "modified";
+			c.vars.nested.array.push(4);
+			c.vars.nested.obj.key = "new-value";
+			return c.vars;
+		},
+	},
+});
+
+// Actor with dynamic vars
+export const dynamicVarActor = actor({
+	state: { value: 0 },
+	connState: { hello: "world" },
+	createVars: () => {
+		return {
+			random: Math.random(),
+			computed: `Actor-${Math.floor(Math.random() * 1000)}`,
+		};
+	},
+	actions: {
+		getVars: (c) => {
+			return c.vars;
+		},
+	},
+});
+
+// Actor with unique vars per instance
+export const uniqueVarActor = actor({
+	state: { value: 0 },
+	connState: { hello: "world" },
+	createVars: () => {
+		return {
+			id: Math.floor(Math.random() * 1000000),
+		};
+	},
+	actions: {
+		getVars: (c) => {
+			return c.vars;
+		},
+	},
+});
+
+// Actor that uses driver context
+export const driverCtxActor = actor({
+	state: { value: 0 },
+	connState: { hello: "world" },
+	createVars: (c, driverCtx: any) => {
+		return {
+			hasDriverCtx: Boolean(driverCtx?.isTest),
+		};
+	},
+	actions: {
+		getVars: (c) => {
+			return c.vars;
+		},
+	},
+});
diff --git a/examples/sandbox/src/actors/testing/inline-client.ts b/examples/sandbox/src/actors/testing/inline-client.ts
new file mode 100644
index 0000000000..703b47557e
--- /dev/null
+++ b/examples/sandbox/src/actors/testing/inline-client.ts
@@ -0,0 +1,64 @@
+import { actor } from "rivetkit";
+import type { registry } from "../../actors.ts";
+
+export const inlineClientActor = actor({
+	state: { messages: [] as string[] },
+	actions: {
+		// Action that uses client to call another actor (stateless)
+		callCounterIncrement: async (c, amount: number) => {
+			const client = c.client<typeof registry>();
+			const result = await client.counter
+				.getOrCreate(["inline-test"])
+				.increment(amount);
+			c.state.messages.push(
+				`Called counter.increment(${amount}), result: ${result}`,
+			);
+			return result;
+		},
+
+		// Action that uses client to get counter state (stateless)
+		getCounterState: async (c) => {
+			const client = c.client();
+			const count = await client.counter
+				.getOrCreate(["inline-test"])
+				.getCount();
+			c.state.messages.push(`Got counter state: ${count}`);
+			return count;
+		},
+
+		// Action that uses client with .connect() for stateful communication
+		connectToCounterAndIncrement: async (c, amount: number) => {
+			const client = c.client();
+			const handle = client.counter.getOrCreate(["inline-test-stateful"]);
+			const connection = handle.connect();
+
+			// Set up event listener
+			const events: number[] = [];
+			connection.on("newCount", (count: number) => {
+				events.push(count);
+			});
+
+			// Perform increments
+			const result1 = await connection.increment(amount);
+			const result2 = await connection.increment(amount * 2);
+
+			await connection.dispose();
+
+			c.state.messages.push(
+				`Connected to counter, incremented by ${amount} and ${amount * 2}, results: ${result1}, ${result2}, events: ${JSON.stringify(events)}`,
+			);
+
+			return { result1, result2, events };
+		},
+
+		// Get all messages from this actor's state
+		getMessages: (c) => {
+			return c.state.messages;
+		},
+
+		// Clear messages
+		clearMessages: (c) => {
+			c.state.messages = [];
+		},
+	},
+});
diff --git a/examples/workflow-sandbox-vercel/src/actors/_helpers.ts b/examples/sandbox/src/actors/workflow/_helpers.ts
similarity index 100%
rename from examples/workflow-sandbox-vercel/src/actors/_helpers.ts
rename to examples/sandbox/src/actors/workflow/_helpers.ts
diff --git a/examples/workflow-sandbox/src/actors/approval.ts b/examples/sandbox/src/actors/workflow/approval.ts
similarity index 97%
rename from examples/workflow-sandbox/src/actors/approval.ts
rename to examples/sandbox/src/actors/workflow/approval.ts
index d6d5225c72..e39af4cf5e 100644
--- a/examples/workflow-sandbox/src/actors/approval.ts
+++ b/examples/sandbox/src/actors/workflow/approval.ts
@@ -31,7 +31,7 @@ export type ApprovalRequestInput = {
 };
 
 export const approval = actor({
-	createState: (c, input: ApprovalRequestInput): ApprovalRequest => ({
+	createState: (c, input?: ApprovalRequestInput): ApprovalRequest => ({
 		id: c.key[0] as string,
 		title: input?.title ?? "Untitled Request",
 		description: input?.description ?? "",
diff --git a/examples/workflow-sandbox/src/actors/batch.ts b/examples/sandbox/src/actors/workflow/batch.ts
similarity index 98%
rename from examples/workflow-sandbox/src/actors/batch.ts
rename to examples/sandbox/src/actors/workflow/batch.ts
index 921c055a72..006e894e11 100644
--- a/examples/workflow-sandbox/src/actors/batch.ts
+++ b/examples/sandbox/src/actors/workflow/batch.ts
@@ -49,7 +49,7 @@ export type BatchJobInput = {
 };
 
 export const batch = actor({
-	createState: (c, input: BatchJobInput): BatchJob => ({
+	createState: (c, input?: BatchJobInput): BatchJob => ({
 		id: c.key[0] as string,
 		totalItems: input?.totalItems ?? 50,
 		batchSize: input?.batchSize ?? 5,
diff --git a/examples/workflow-sandbox-vercel/src/actors/dashboard.ts b/examples/sandbox/src/actors/workflow/dashboard.ts
similarity index 100%
rename from examples/workflow-sandbox-vercel/src/actors/dashboard.ts
rename to examples/sandbox/src/actors/workflow/dashboard.ts
diff --git a/examples/workflow-sandbox-vercel/src/actors/order.ts b/examples/sandbox/src/actors/workflow/order.ts
similarity index 100%
rename from examples/workflow-sandbox-vercel/src/actors/order.ts
rename to examples/sandbox/src/actors/workflow/order.ts
diff --git a/examples/workflow-sandbox/src/actors/payment.ts b/examples/sandbox/src/actors/workflow/payment.ts
similarity index 98%
rename from examples/workflow-sandbox/src/actors/payment.ts
rename to examples/sandbox/src/actors/workflow/payment.ts
index c9ad701a82..f227b6945d 100644
--- a/examples/workflow-sandbox/src/actors/payment.ts
+++ b/examples/sandbox/src/actors/workflow/payment.ts
@@ -39,7 +39,7 @@ export type TransactionInput = {
 };
 
 export const payment = actor({
-	createState: (c, input: TransactionInput): Transaction => ({
+	createState: (c, input?: TransactionInput): Transaction => ({
 		id: c.key[0] as string,
 		amount: input?.amount ?? 100,
 		shouldFail: input?.shouldFail ?? false,
diff --git a/examples/workflow-sandbox-vercel/src/actors/race.ts b/examples/sandbox/src/actors/workflow/race.ts
similarity index 97%
rename from examples/workflow-sandbox-vercel/src/actors/race.ts
rename to examples/sandbox/src/actors/workflow/race.ts
index 173055591c..0e7ad1ed3c 100644
--- a/examples/workflow-sandbox-vercel/src/actors/race.ts
+++ b/examples/sandbox/src/actors/workflow/race.ts
@@ -25,7 +25,7 @@ export type RaceTaskInput = {
 };
 
 export const race = actor({
-	createState: (c, input: RaceTaskInput): RaceTask => ({
+	createState: (c, input?: RaceTaskInput): RaceTask => ({
 		id: c.key[0] as string,
 		workDurationMs: input?.workDurationMs ?? 2000,
 		timeoutMs: input?.timeoutMs ?? 3000,
diff --git a/examples/workflow-sandbox-vercel/src/actors/timer.ts b/examples/sandbox/src/actors/workflow/timer.ts
similarity index 96%
rename from examples/workflow-sandbox-vercel/src/actors/timer.ts
rename to examples/sandbox/src/actors/workflow/timer.ts
index d642dfa740..dec43ffbec 100644
--- a/examples/workflow-sandbox-vercel/src/actors/timer.ts
+++ b/examples/sandbox/src/actors/workflow/timer.ts
@@ -22,7 +22,7 @@ export type TimerInput = {
 };
 
 export const timer = actor({
-	createState: (c, input: TimerInput): Timer => ({
+	createState: (c, input?: TimerInput): Timer => ({
 		id: c.key[0] as string,
 		name: input?.name ?? "Timer",
 		durationMs: input?.durationMs ?? 10000,
diff --git a/examples/sandbox/src/actors/workflow/workflow-fixtures.ts b/examples/sandbox/src/actors/workflow/workflow-fixtures.ts
new file mode 100644
index 0000000000..1ce30c369c
--- /dev/null
+++ b/examples/sandbox/src/actors/workflow/workflow-fixtures.ts
@@ -0,0 +1,99 @@
+import { actor } from "rivetkit";
+import { Loop, workflow, workflowQueueName } from "rivetkit/workflow";
+
+const WORKFLOW_GUARD_KV_KEY = "__rivet_actor_workflow_guard_triggered";
+
+const WORKFLOW_QUEUE_NAME = "workflow-default";
+
+export const workflowCounterActor = actor({
+	state: {
+		runCount: 0,
+		guardTriggered: false,
+		history: [] as number[],
+	},
+	run: workflow(async (ctx) => {
+		await ctx.loop({
+			name: "counter",
+			run: async (loopCtx) => {
+				const actorLoopCtx = loopCtx as any;
+				try {
+					// Accessing state outside a step should throw.
+					// biome-ignore lint/style/noUnusedExpressions: intentionally checking accessor.
+					actorLoopCtx.state;
+				} catch {}
+
+				await loopCtx.step("increment", async () => {
+					actorLoopCtx.state.runCount += 1;
+					actorLoopCtx.state.history.push(actorLoopCtx.state.runCount);
+				});
+
+				await loopCtx.sleep("idle", 25);
+				return Loop.continue(undefined);
+			},
+		});
+	}),
+	actions: {
+		getState: async (c) => {
+			const guardFlag = await c.kv.get(WORKFLOW_GUARD_KV_KEY);
+			if (guardFlag === "true") {
+				c.state.guardTriggered = true;
+			}
+			return c.state;
+		},
+	},
+	options: {
+		sleepTimeout: 50,
+	},
+});
+
+export const workflowQueueActor = actor({
+	state: {
+		received: [] as unknown[],
+	},
+	run: workflow(async (ctx) => {
+		await ctx.loop({
+			name: "queue",
+			run: async (loopCtx) => {
+				const actorLoopCtx = loopCtx as any;
+				const payload = await loopCtx.listen(
+					"queue-wait",
+					WORKFLOW_QUEUE_NAME,
+				);
+				await loopCtx.step("store-message", async () => {
+					actorLoopCtx.state.received.push(payload);
+				});
+				return Loop.continue(undefined);
+			},
+		});
+	}),
+	actions: {
+		getMessages: (c) => c.state.received,
+	},
+});
+
+export const workflowSleepActor = actor({
+	state: {
+		ticks: 0,
+	},
+	run: workflow(async (ctx) => {
+		await ctx.loop({
+			name: "sleep",
+			run: async (loopCtx) => {
+				const actorLoopCtx = loopCtx as any;
+				await loopCtx.step("tick", async () => {
+					actorLoopCtx.state.ticks += 1;
+				});
+				await loopCtx.sleep("delay", 40);
+				return Loop.continue(undefined);
+			},
+		});
+	}),
+	actions: {
+		getState: (c) => c.state,
+	},
+	options: {
+		sleepTimeout: 50,
+	},
+});
+
+export { WORKFLOW_QUEUE_NAME, workflowQueueName };
diff --git a/examples/sandbox/src/fdb-tuple-shim.mjs b/examples/sandbox/src/fdb-tuple-shim.mjs
new file mode 100644
index 0000000000..bc05d17a98
--- /dev/null
+++ b/examples/sandbox/src/fdb-tuple-shim.mjs
@@ -0,0 +1,5 @@
+import { createRequire } from "node:module";
+const require = createRequire(import.meta.url);
+const fdbTuple = require("fdb-tuple");
+export const { concat2, unboundVersionstamp, rawRange, pack, packUnboundVersionstamp, name, unpack, range, bakeVersionstamp } = fdbTuple;
+export default fdbTuple;
diff --git a/examples/workflow-sandbox-vercel/src/server.ts b/examples/sandbox/src/server.ts
similarity index 100%
rename from examples/workflow-sandbox-vercel/src/server.ts
rename to examples/sandbox/src/server.ts
diff --git a/examples/sandbox/todo.md b/examples/sandbox/todo.md
new file mode 100644
index 0000000000..d64ab16944
--- /dev/null
+++ b/examples/sandbox/todo.md
@@ -0,0 +1,85 @@
+# Sandbox Migration Progress
+
+## Phase 1: Copy all actors locally
+- [x] counter/ group (counter, counter-conn, conn-params, lifecycle)
+- [x] actions/ group (action-inputs, action-types, action-timeout, error-handling)
+- [x] state/ group (actor-onstatechange, metadata, vars, kv, large-payloads)
+- [x] connections/ group (conn-state, reject-connection, request-access)
+- [x] http/ group (raw-http, raw-http-request-properties, raw-websocket, raw-fetch-counter, raw-websocket-chat-room)
+- [x] lifecycle/ group (run, sleep, scheduled, destroy, hibernation)
+- [x] queue/ additions (queue.ts from fixtures)
+- [x] workflow/ additions (workflow-fixtures.ts from fixtures with import transforms)
+- [x] inter-actor/ group (inventory, checkout from cross-actor-actions)
+- [x] testing/ group (inline-client)
+- [x] ai/ group (ai-agent)
+
+## Phase 2: Update imports
+- [x] Rewrite actors.ts to use only local imports
+- [x] Remove ugcCounter from actors.ts
+- [x] Remove ugcCounter from page-data.ts
+- [x] Delete src/actors/ugc-counter.ts
+- [x] Update vite.config.ts (remove @/ alias)
+- [x] Copy ai-agent supporting files (my-tools.ts, types.ts)
+
+## Phase 3: Verify dev server starts
+- [x] Run pnpm dev and verify no errors (72 actors loaded)
+- [x] Fix any import/build issues
+
+## Phase 4: Test every screen with agent-browser
+- [x] Overview > Welcome
+- [x] Overview > Registry and Keys
+- [x] Core API > Actor Configuration
+- [x] Core API > Actions
+- [x] Core API > Types and Helper Types
+- [x] Core API > Action Timeouts
+- [x] Core API > Errors
+- [x] Core API > Appearance
+- [x] State and Storage > State Basics
+- [x] State and Storage > On State Change
+- [x] State and Storage > Sharing and Joining State
+- [x] State and Storage > Metadata
+- [x] State and Storage > Ephemeral Variables
+- [x] State and Storage > KV Storage
+- [x] State and Storage > External SQL
+- [x] State and Storage > Large Payloads
+- [x] Realtime and Connections > Connections and Presence
+- [x] Realtime and Connections > Events and Broadcasts
+- [x] Realtime and Connections > Direct Connection Messaging
+- [x] Realtime and Connections > Connection Gating
+- [x] Realtime and Connections > Request Object Access
+- [x] HTTP and WebSocket > HTTP API
+- [x] HTTP and WebSocket > Request Handler
+- [x] HTTP and WebSocket > WebSocket Handler
+- [x] HTTP and WebSocket > Fetch and WebSocket Handler
+- [x] HTTP and WebSocket > Raw HTTP
+- [x] HTTP and WebSocket > Raw WebSocket
+- [x] Lifecycle and Scheduling > Lifecycle Hooks
+- [x] Lifecycle and Scheduling > Run Handler
+- [x] Lifecycle and Scheduling > Sleep and Wake
+- [x] Lifecycle and Scheduling > Schedule
+- [x] Lifecycle and Scheduling > Destroy
+- [x] Lifecycle and Scheduling > Hibernation
+- [x] Lifecycle and Scheduling > Versions
+- [x] Lifecycle and Scheduling > Scaling
+- [x] Queues > Queue Basics
+- [x] Queues > Queue Patterns
+- [x] Queues > Queue in Run Loop
+- [x] Workflows > Workflow Overview
+- [x] Workflows > Steps
+- [x] Workflows > Sleep
+- [x] Workflows > Loops
+- [x] Workflows > Listen
+- [x] Workflows > Join
+- [x] Workflows > Race
+- [x] Workflows > Rollback
+- [x] Inter-Actor and Patterns > Communicating Between Actors
+- [x] Inter-Actor and Patterns > Design Patterns
+- [x] Testing and Debugging > Testing
+- [x] AI > AI and User-Generated Actors
+
+## Bugs Fixed During Testing
+- [x] React crash: `setLog is not defined` in ActionPanel (referenced vars from RawWebSocketPanel)
+- [x] RivetKit crash: ActorInspector class field initializer ran before constructor set #config
+- [x] Server crash: `inventory` and `checkout` actors required createState input but sandbox creates without it
+- [x] Raw WebSocket: `actor.handle.webSocket()` returns a Promise, needed `await`
+- [x] Made all workflow actor createState inputs optional with defaults
diff --git a/examples/sandbox/tsconfig.json b/examples/sandbox/tsconfig.json
new file mode 100644
index 0000000000..82e8cc4d83
--- /dev/null
+++ b/examples/sandbox/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "types": ["node", "vite/client"],
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "rewriteRelativeImportExtensions": true
+  },
+  "include": ["src/**/*", "frontend/**/*"]
+}
diff --git a/examples/sandbox/turbo.json b/examples/sandbox/turbo.json
new file mode 100644
index 0000000000..95960709b1
--- /dev/null
+++ b/examples/sandbox/turbo.json
@@ -0,0 +1,4 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"]
+}
diff --git a/examples/workflow-sandbox/vite.config.ts b/examples/sandbox/vite.config.ts
similarity index 59%
rename from examples/workflow-sandbox/vite.config.ts
rename to examples/sandbox/vite.config.ts
index 06dae893f5..c87e296970 100644
--- a/examples/workflow-sandbox/vite.config.ts
+++ b/examples/sandbox/vite.config.ts
@@ -1,7 +1,13 @@
-import { defineConfig } from "vite";
+import { resolve } from "node:path";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 import srvx from "vite-plugin-srvx";
 
 export default defineConfig({
 	plugins: [react(), ...srvx({ entry: "src/server.ts" })],
+	resolve: {
+		alias: {
+			"fdb-tuple": resolve(import.meta.dirname, "src/fdb-tuple-shim.mjs"),
+		},
+	},
 });
diff --git a/examples/workflow-sandbox-vercel/.gitignore b/examples/workflow-sandbox-vercel/.gitignore
deleted file mode 100644
index e28f3d79db..0000000000
--- a/examples/workflow-sandbox-vercel/.gitignore
+++ /dev/null
@@ -1,4 +0,0 @@
-.actorcore
-node_modules
-dist
-.vercel
diff --git a/examples/workflow-sandbox-vercel/README.md b/examples/workflow-sandbox-vercel/README.md
deleted file mode 100644
index c8314f8872..0000000000
--- a/examples/workflow-sandbox-vercel/README.md
+++ /dev/null
@@ -1,104 +0,0 @@
-> **Note:** This is the Vercel-optimized version of the [workflow-sandbox](../workflow-sandbox) example.
-> It uses the `hono/vercel` adapter and is configured for Vercel deployment.
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Frivet-gg%2Frivet%2Ftree%2Fmain%2Fexamples%2Fworkflow-sandbox-vercel&project-name=workflow-sandbox-vercel)
-
-# Workflow Sandbox
-
-Interactive sandbox for testing all RivetKit workflow patterns.
-
-## Getting Started
-
-```sh
-git clone https://github.com/rivet-dev/rivet.git
-cd rivet/examples/workflow-sandbox
-npm install
-npm run dev
-```
-
-
-## Features
-
-This example demonstrates all workflow features through a tabbed interface:
-
-- **Steps** - Multi-step order processing with automatic retries
-- **Sleep** - Durable countdown timers that survive restarts
-- **Loops** - Batch processing with persistent cursor state
-- **Listen** - Approval queue with timeout-based decisions
-- **Join** - Parallel data fetching (wait-all pattern)
-- **Race** - Work vs timeout (first-wins pattern)
-- **Rollback** - Compensating transactions with rollback handlers
-
-## Implementation
-
-Each workflow pattern is implemented as a separate actor with its own state and workflow loop. The key patterns demonstrated:
-
-### Steps
-```typescript
-await loopCtx.step("validate", async () => { /* ... */ });
-await loopCtx.step("charge", async () => { /* ... */ });
-await loopCtx.step("fulfill", async () => { /* ... */ });
-```
-
-### Sleep
-```typescript
-await loopCtx.sleep("countdown", durationMs);
-```
-
-### Loops
-```typescript
-await ctx.loop({
-  name: "batch-loop",
-  state: { cursor: 0 },
-  run: async (loopCtx, state) => {
-    // Process batch
-    return Loop.continue({ cursor: state.cursor + 1 });
-  },
-});
-```
-
-### Listen
-```typescript
-const decision = await loopCtx.listenWithTimeout<Decision>(
-  "wait-decision",
-  "decision-queue",
-  30000 // 30 second timeout
-);
-```
-
-### Join
-```typescript
-const results = await loopCtx.join("fetch-all", {
-  users: { run: async (ctx) => fetchUsers() },
-  orders: { run: async (ctx) => fetchOrders() },
-});
-```
-
-### Race
-```typescript
-const { winner, value } = await loopCtx.race("work-vs-timeout", [
-  { name: "work", run: async (ctx) => doWork() },
-  { name: "timeout", run: async (ctx) => ctx.sleep("wait", timeout) },
-]);
-```
-
-### Rollback
-```typescript
-await loopCtx.rollbackCheckpoint("payment-checkpoint");
-
-await loopCtx.step({
-  name: "charge-card",
-  run: async () => chargeCard(),
-  rollback: async () => refundCard(),
-});
-```
-
-See the implementation in [`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/workflow-sandbox/src/actors.ts).
-
-## Resources
-
-Read more about [workflows](/docs/workflows).
-
-## License
-
-MIT
diff --git a/examples/workflow-sandbox-vercel/api/index.ts b/examples/workflow-sandbox-vercel/api/index.ts
deleted file mode 100644
index 07a830391f..0000000000
--- a/examples/workflow-sandbox-vercel/api/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import app from "../src/server.ts";
-
-export default app;
diff --git a/examples/workflow-sandbox-vercel/frontend/App.tsx b/examples/workflow-sandbox-vercel/frontend/App.tsx
deleted file mode 100644
index 18c16da037..0000000000
--- a/examples/workflow-sandbox-vercel/frontend/App.tsx
+++ /dev/null
@@ -1,956 +0,0 @@
-import { useState, useEffect } from "react";
-import { createRivetKit } from "@rivetkit/react";
-import type {
-	registry,
-	Order,
-	Timer,
-	BatchJob,
-	ApprovalRequest,
-	DashboardState,
-	RaceTask,
-	Transaction,
-} from "../src/actors.ts";
-
-const { useActor } = createRivetKit<typeof registry>(
-	`${location.origin}/api/rivet`
-);
-
-// localStorage helpers for persisting actor keys across page refreshes
-function usePersistedState<T>(key: string, initial: T): [T, React.Dispatch<React.SetStateAction<T>>] {
-	const [state, setState] = useState<T>(() => {
-		const stored = localStorage.getItem(key);
-		return stored ? JSON.parse(stored) : initial;
-	});
-
-	useEffect(() => {
-		localStorage.setItem(key, JSON.stringify(state));
-	}, [key, state]);
-
-	return [state, setState];
-}
-
-type Tab =
-	| "steps"
-	| "sleep"
-	| "loops"
-	| "listen"
-	| "join"
-	| "race"
-	| "rollback";
-
-const TABS: { id: Tab; label: string; description: string }[] = [
-	{ id: "steps", label: "Steps", description: "Multi-step order processing" },
-	{ id: "sleep", label: "Sleep", description: "Durable countdown timers" },
-	{ id: "loops", label: "Loops", description: "Batch processing with cursor" },
-	{ id: "listen", label: "Listen", description: "Approval queue with timeout" },
-	{ id: "join", label: "Join", description: "Parallel data aggregation" },
-	{ id: "race", label: "Race", description: "Work vs timeout pattern" },
-	{
-		id: "rollback",
-		label: "Rollback",
-		description: "Compensating transactions",
-	},
-];
-
-export function App() {
-	const [activeTab, setActiveTab] = useState<Tab>("steps");
-
-	return (
-		<div className="app">
-			<header>
-				<h1>Workflow Sandbox</h1>
-				<p>Test different RivetKit workflow patterns</p>
-			</header>
-
-			<nav className="tabs">
-				{TABS.map((tab) => (
-					<button
-						key={tab.id}
-						className={`tab ${activeTab === tab.id ? "active" : ""}`}
-						onClick={() => setActiveTab(tab.id)}
-					>
-						<span className="tab-label">{tab.label}</span>
-						<span className="tab-desc">{tab.description}</span>
-					</button>
-				))}
-			</nav>
-
-			<main>
-				{activeTab === "steps" && <StepsDemo />}
-				{activeTab === "sleep" && <SleepDemo />}
-				{activeTab === "loops" && <LoopsDemo />}
-				{activeTab === "listen" && <ListenDemo />}
-				{activeTab === "join" && <JoinDemo />}
-				{activeTab === "race" && <RaceDemo />}
-				{activeTab === "rollback" && <RollbackDemo />}
-			</main>
-		</div>
-	);
-}
-
-// ============================================================================
-// STEPS DEMO - One actor per order
-// ============================================================================
-
-function StepsDemo() {
-	const [orderKeys, setOrderKeys] = usePersistedState<string[]>("workflow-sandbox:orders", []);
-
-	const createOrder = () => {
-		const orderId = `ORD-${Date.now().toString(36).toUpperCase()}`;
-		setOrderKeys((prev) => [orderId, ...prev]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Steps Demo</h2>
-				<p>
-					Sequential workflow steps with automatic retries. Each order goes
-					through validate, charge, and fulfill steps.
-				</p>
-				<button className="primary" onClick={createOrder}>
-					Create Order
-				</button>
-			</div>
-
-			<div className="demo-content">
-				<div className="orders-list">
-					{orderKeys.length === 0 && (
-						<p className="empty">No orders yet. Create one to see the workflow!</p>
-					)}
-					{orderKeys.map((orderId) => (
-						<OrderCard key={orderId} orderId={orderId} />
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function OrderCard({ orderId }: { orderId: string }) {
-	const actor = useActor({ name: "order", key: [orderId] });
-	const [order, setOrder] = useState<Order | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getOrder().then(setOrder);
-	}, [actor.connection]);
-
-	actor.useEvent("orderUpdated", setOrder);
-
-	const getStatusColor = (status: Order["status"]) => {
-		switch (status) {
-			case "pending":
-				return "#8e8e93";
-			case "validating":
-			case "charging":
-			case "fulfilling":
-				return "#ff9f0a";
-			case "completed":
-				return "#30d158";
-			case "failed":
-				return "#ff3b30";
-			default:
-				return "#8e8e93";
-		}
-	};
-
-	if (!order) return <div className="order-card loading">Loading...</div>;
-
-	return (
-		<div className="order-card">
-			<div className="order-header">
-				<span className="order-id">{order.id}</span>
-				<span
-					className="status-badge"
-					style={{ backgroundColor: getStatusColor(order.status) }}
-				>
-					{order.status}
-				</span>
-			</div>
-			<div className="order-progress">
-				{["Validate", "Charge", "Fulfill", "Complete"].map((step, idx) => (
-					<div
-						key={step}
-						className={`step ${order.step > idx ? "done" : ""} ${order.step === idx + 1 ? "active" : ""}`}
-					>
-						<div className="step-indicator">
-							{order.step > idx ? "✓" : idx + 1}
-						</div>
-						<span>{step}</span>
-					</div>
-				))}
-			</div>
-			{order.error && <div className="error">{order.error}</div>}
-		</div>
-	);
-}
-
-// ============================================================================
-// SLEEP DEMO - One actor per timer
-// ============================================================================
-
-function SleepDemo() {
-	const [timerKeys, setTimerKeys] = usePersistedState<
-		{ id: string; name: string; durationMs: number }[]
-	>("workflow-sandbox:timers", []);
-	const [duration, setDuration] = useState(10);
-
-	const createTimer = () => {
-		const timerId = crypto.randomUUID();
-		const name = `Timer ${timerKeys.length + 1}`;
-		setTimerKeys((prev) => [{ id: timerId, name, durationMs: duration * 1000 }, ...prev]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Sleep Demo</h2>
-				<p>
-					Durable sleep that survives restarts. Set a timer and watch it
-					countdown - even if you refresh the page!
-				</p>
-				<div className="controls">
-					<input
-						type="number"
-						min="1"
-						max="60"
-						value={duration}
-						onChange={(e) => setDuration(parseInt(e.target.value) || 1)}
-					/>
-					<span>seconds</span>
-					<button className="primary" onClick={createTimer}>
-						Create Timer
-					</button>
-				</div>
-			</div>
-
-			<div className="demo-content">
-				<div className="timers-list">
-					{timerKeys.length === 0 && (
-						<p className="empty">No timers yet. Create one to test durable sleep!</p>
-					)}
-					{timerKeys.map((t) => (
-						<TimerCard key={t.id} timerId={t.id} name={t.name} durationMs={t.durationMs} />
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function TimerCard({
-	timerId,
-	name,
-	durationMs,
-}: {
-	timerId: string;
-	name: string;
-	durationMs: number;
-}) {
-	const actor = useActor({
-		name: "timer",
-		key: [timerId],
-		createWithInput: { name, durationMs },
-	});
-	const [timer, setTimer] = useState<Timer | null>(null);
-	const [remaining, setRemaining] = useState<number | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getTimer().then(setTimer);
-	}, [actor.connection]);
-
-	actor.useEvent("timerStarted", setTimer);
-	actor.useEvent("timerCompleted", setTimer);
-
-	useEffect(() => {
-		if (!timer) return;
-		if (timer.completedAt) {
-			setRemaining(0);
-			return;
-		}
-
-		const update = () => {
-			const elapsed = Date.now() - timer.startedAt;
-			const left = Math.max(0, timer.durationMs - elapsed);
-			setRemaining(left);
-		};
-
-		update();
-		const interval = setInterval(update, 100);
-		return () => clearInterval(interval);
-	}, [timer]);
-
-	if (!timer || remaining === null) return <div className="timer-card loading">Loading...</div>;
-
-	const isComplete = !!timer.completedAt;
-	const progress = isComplete
-		? 100
-		: ((timer.durationMs - remaining) / timer.durationMs) * 100;
-
-	return (
-		<div className={`timer-card ${isComplete ? "complete" : ""}`}>
-			<div className="timer-header">
-				<span className="timer-name">{timer.name}</span>
-				<span className={`timer-status ${isComplete ? "done" : "running"}`}>
-					{isComplete ? "Completed" : `${Math.ceil(remaining / 1000)}s`}
-				</span>
-			</div>
-			<div className="progress-bar">
-				<div className="progress-fill" style={{ width: `${progress}%` }} />
-			</div>
-		</div>
-	);
-}
-
-// ============================================================================
-// LOOPS DEMO - One actor per batch job
-// ============================================================================
-
-function LoopsDemo() {
-	const [jobKeys, setJobKeys] = usePersistedState<string[]>("workflow-sandbox:jobs", []);
-
-	const startJob = () => {
-		const jobId = `JOB-${Date.now().toString(36).toUpperCase()}`;
-		setJobKeys((prev) => [jobId, ...prev]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Loops Demo</h2>
-				<p>
-					Batch processing with persistent cursor state. Process 50 items in
-					batches of 5 - state persists across restarts.
-				</p>
-				<button className="primary" onClick={startJob}>
-					Start New Batch Job
-				</button>
-			</div>
-
-			<div className="demo-content">
-				<div className="jobs-list">
-					{jobKeys.length === 0 && (
-						<p className="empty">No batch jobs yet. Start one to see loop processing!</p>
-					)}
-					{jobKeys.map((jobId) => (
-						<BatchJobCard key={jobId} jobId={jobId} />
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function BatchJobCard({ jobId }: { jobId: string }) {
-	const actor = useActor({
-		name: "batch",
-		key: [jobId],
-		createWithInput: { totalItems: 50, batchSize: 5 },
-	});
-	const [job, setJob] = useState<BatchJob | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getJob().then(setJob);
-	}, [actor.connection]);
-
-	actor.useEvent("stateChanged", setJob);
-
-	if (!job) return <div className="job-card loading">Loading...</div>;
-
-	return (
-		<div className={`job-card ${job.status}`}>
-			<div className="job-header">
-				<span className="job-id">{job.id}</span>
-				<span className={`job-status ${job.status}`}>{job.status}</span>
-			</div>
-			<div className="batch-stats">
-				<div className="stat">
-					<span className="stat-value">{job.processedTotal}</span>
-					<span className="stat-label">Items</span>
-				</div>
-				<div className="stat">
-					<span className="stat-value">{job.batches.length}</span>
-					<span className="stat-label">Batches</span>
-				</div>
-			</div>
-			<div className="progress-bar large">
-				<div
-					className="progress-fill"
-					style={{ width: `${(job.processedTotal / job.totalItems) * 100}%` }}
-				/>
-			</div>
-		</div>
-	);
-}
-
-// ============================================================================
-// LISTEN DEMO - One actor per approval request
-// ============================================================================
-
-function ListenDemo() {
-	const [requestKeys, setRequestKeys] = usePersistedState<
-		{ id: string; title: string; description: string }[]
-	>("workflow-sandbox:requests", []);
-
-	const submitRequest = () => {
-		const requestId = crypto.randomUUID();
-		const title = `Request ${requestKeys.length + 1}`;
-		setRequestKeys((prev) => [
-			{ id: requestId, title, description: "Please approve this request" },
-			...prev,
-		]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Listen Demo</h2>
-				<p>
-					Approval workflow with 30-second timeout. Submit a request and
-					approve/reject it before it times out.
-				</p>
-				<button className="primary" onClick={submitRequest}>
-					Submit Request
-				</button>
-			</div>
-
-			<div className="demo-content">
-				<div className="requests-list">
-					{requestKeys.length === 0 && (
-						<p className="empty">No requests yet. Submit one to test listen!</p>
-					)}
-					{requestKeys.map((r) => (
-						<ApprovalRequestCard
-							key={r.id}
-							requestId={r.id}
-							title={r.title}
-							description={r.description}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function ApprovalRequestCard({
-	requestId,
-	title,
-	description,
-}: {
-	requestId: string;
-	title: string;
-	description: string;
-}) {
-	const actor = useActor({
-		name: "approval",
-		key: [requestId],
-		createWithInput: { title, description },
-	});
-	const [request, setRequest] = useState<ApprovalRequest | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getRequest().then(setRequest);
-	}, [actor.connection]);
-
-	actor.useEvent("requestCreated", setRequest);
-	actor.useEvent("requestUpdated", setRequest);
-
-	const getStatusColor = (status: ApprovalRequest["status"]) => {
-		switch (status) {
-			case "pending":
-				return "#ff9f0a";
-			case "approved":
-				return "#30d158";
-			case "rejected":
-				return "#ff3b30";
-			case "timeout":
-				return "#8e8e93";
-			default:
-				return "#8e8e93";
-		}
-	};
-
-	if (!request) return <div className="request-card loading">Loading...</div>;
-
-	const isPending = request.status === "pending" && !request.deciding;
-	const isDeciding = request.status === "pending" && request.deciding;
-
-	return (
-		<div className="request-card">
-			<div className="request-header">
-				<span className="request-title">{request.title}</span>
-				<span
-					className="status-badge"
-					style={{ backgroundColor: isDeciding ? "#007aff" : getStatusColor(request.status) }}
-				>
-					{isDeciding ? "processing..." : request.status}
-				</span>
-			</div>
-			{isPending && (
-				<RequestCountdown
-					request={request}
-					onApprove={(approver) => actor.connection?.approve(approver)}
-					onReject={(approver) => actor.connection?.reject(approver)}
-				/>
-			)}
-			{request.decidedBy && (
-				<div className="decided-by">Decided by: {request.decidedBy}</div>
-			)}
-		</div>
-	);
-}
-
-function RequestCountdown({
-	request,
-	onApprove,
-	onReject,
-}: {
-	request: ApprovalRequest;
-	onApprove: (approver: string) => void;
-	onReject: (approver: string) => void;
-}) {
-	const [remaining, setRemaining] = useState(30);
-
-	useEffect(() => {
-		const update = () => {
-			const elapsed = Date.now() - request.createdAt;
-			const left = Math.max(0, 30000 - elapsed);
-			setRemaining(Math.ceil(left / 1000));
-		};
-
-		update();
-		const interval = setInterval(update, 1000);
-		return () => clearInterval(interval);
-	}, [request.createdAt]);
-
-	return (
-		<div className="request-actions">
-			<span className="countdown">{remaining}s remaining</span>
-			<button className="approve" onClick={() => onApprove("Admin")}>
-				Approve
-			</button>
-			<button className="reject" onClick={() => onReject("Admin")}>
-				Reject
-			</button>
-		</div>
-	);
-}
-
-// ============================================================================
-// JOIN DEMO - Single dashboard actor
-// ============================================================================
-
-function JoinDemo() {
-	const actor = useActor({ name: "dashboard", key: ["main"] });
-	const [state, setState] = useState<DashboardState>({
-		data: null,
-		loading: false,
-		branches: { users: "pending", orders: "pending", metrics: "pending" },
-		lastRefresh: null,
-	});
-
-	useEffect(() => {
-		actor.connection?.getState().then(setState);
-	}, [actor.connection]);
-
-	actor.useEvent("stateChanged", setState);
-
-	const getBranchColor = (status: string) => {
-		switch (status) {
-			case "pending":
-				return "#8e8e93";
-			case "running":
-				return "#ff9f0a";
-			case "completed":
-				return "#30d158";
-			case "failed":
-				return "#ff3b30";
-			default:
-				return "#8e8e93";
-		}
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Join Demo</h2>
-				<p>
-					Parallel data fetching with join (wait-all). Fetch users, orders, and
-					metrics simultaneously.
-				</p>
-				<button
-					className="primary"
-					onClick={() => actor.connection?.refresh()}
-					disabled={state.loading}
-				>
-					{state.loading ? "Loading..." : "Refresh Dashboard"}
-				</button>
-			</div>
-
-			<div className="demo-content">
-				<div className="branches">
-					{(["users", "orders", "metrics"] as const).map((branch) => (
-						<div key={branch} className="branch">
-							<span
-								className="branch-dot"
-								style={{ backgroundColor: getBranchColor(state.branches[branch]) }}
-							/>
-							<span className="branch-name">{branch}</span>
-							<span className="branch-status">{state.branches[branch]}</span>
-						</div>
-					))}
-				</div>
-
-				{state.data && (
-					<div className="dashboard-data">
-						<div className="data-card">
-							<h3>Users</h3>
-							<div className="data-stat">{state.data.users.count}</div>
-							<div className="data-sub">
-								{state.data.users.activeToday} active today
-							</div>
-						</div>
-						<div className="data-card">
-							<h3>Orders</h3>
-							<div className="data-stat">{state.data.orders.count}</div>
-							<div className="data-sub">
-								${state.data.orders.revenue.toLocaleString()} revenue
-							</div>
-						</div>
-						<div className="data-card">
-							<h3>Metrics</h3>
-							<div className="data-stat">
-								{state.data.metrics.pageViews.toLocaleString()}
-							</div>
-							<div className="data-sub">page views</div>
-						</div>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
-
-// ============================================================================
-// RACE DEMO - One actor per race task
-// ============================================================================
-
-function RaceDemo() {
-	const [taskKeys, setTaskKeys] = usePersistedState<
-		{ id: string; workDurationMs: number; timeoutMs: number }[]
-	>("workflow-sandbox:raceTasks", []);
-	const [workDuration, setWorkDuration] = useState(3000);
-	const [timeout, setTimeoutVal] = useState(5000);
-
-	const runTask = () => {
-		const taskId = crypto.randomUUID();
-		setTaskKeys((prev) => [
-			{ id: taskId, workDurationMs: workDuration, timeoutMs: timeout },
-			...prev,
-		]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Race Demo</h2>
-				<p>
-					Race pattern - work vs timeout. If work completes before timeout, it
-					wins. Otherwise timeout wins.
-				</p>
-				<div className="controls race-controls">
-					<div className="control-group">
-						<label>Work Duration (ms)</label>
-						<input
-							type="number"
-							value={workDuration}
-							onChange={(e) => setWorkDuration(parseInt(e.target.value) || 0)}
-						/>
-					</div>
-					<div className="control-group">
-						<label>Timeout (ms)</label>
-						<input
-							type="number"
-							value={timeout}
-							onChange={(e) => setTimeoutVal(parseInt(e.target.value) || 0)}
-						/>
-					</div>
-					<button className="primary" onClick={runTask}>
-						Run Race
-					</button>
-				</div>
-			</div>
-
-			<div className="demo-content">
-				<div className="results-list">
-					{taskKeys.map((t) => (
-						<RaceTaskCard
-							key={t.id}
-							taskId={t.id}
-							workDurationMs={t.workDurationMs}
-							timeoutMs={t.timeoutMs}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function RaceTaskCard({
-	taskId,
-	workDurationMs,
-	timeoutMs,
-}: {
-	taskId: string;
-	workDurationMs: number;
-	timeoutMs: number;
-}) {
-	const actor = useActor({
-		name: "race",
-		key: [taskId],
-		createWithInput: { workDurationMs, timeoutMs },
-	});
-	const [task, setTask] = useState<RaceTask | null>(null);
-	const [elapsed, setElapsed] = useState(0);
-	const [showAnimation, setShowAnimation] = useState(true);
-
-	useEffect(() => {
-		actor.connection?.getTask().then(setTask);
-	}, [actor.connection]);
-
-	actor.useEvent("raceStarted", setTask);
-	actor.useEvent("raceCompleted", setTask);
-
-	// Update elapsed time for animation
-	useEffect(() => {
-		if (!task) return;
-
-		const updateElapsed = () => {
-			const now = task.completedAt ?? Date.now();
-			const newElapsed = now - task.startedAt;
-			setElapsed(newElapsed);
-
-			// Hide animation once both bars have completed
-			const maxDuration = Math.max(task.workDurationMs, task.timeoutMs);
-			if (newElapsed > maxDuration + 500) {
-				setShowAnimation(false);
-			}
-		};
-
-		updateElapsed();
-		const interval = setInterval(updateElapsed, 50);
-		return () => clearInterval(interval);
-	}, [task]);
-
-	if (!task) return <div className="result-card loading">Loading...</div>;
-
-	const workProgress = Math.min(100, (elapsed / task.workDurationMs) * 100);
-	const timeoutProgress = Math.min(100, (elapsed / task.timeoutMs) * 100);
-	const isCompleted = task.status !== "running";
-
-	// Show animation if still running or if recently completed
-	if (showAnimation) {
-		return (
-			<div className="active-race">
-				<div className="race-track">
-					<div className={`racer work ${isCompleted && task.status === "work_won" ? "winner" : ""}`}>
-						<span>Work ({task.workDurationMs}ms)</span>
-						<div className="racer-progress">
-							<div
-								className="racer-bar-fill"
-								style={{ width: `${workProgress}%` }}
-							/>
-						</div>
-						{isCompleted && task.status === "work_won" && <span className="winner-badge">Winner!</span>}
-					</div>
-					<div className={`racer timeout ${isCompleted && task.status === "timeout_won" ? "winner" : ""}`}>
-						<span>Timeout ({task.timeoutMs}ms)</span>
-						<div className="racer-progress">
-							<div
-								className="racer-bar-fill timeout-fill"
-								style={{ width: `${timeoutProgress}%` }}
-							/>
-						</div>
-						{isCompleted && task.status === "timeout_won" && <span className="winner-badge">Winner!</span>}
-					</div>
-				</div>
-				{isCompleted && (
-					<div className="race-result">
-						{task.status === "work_won" ? "Work completed first!" : "Timeout triggered!"}
-						<span className="actual-duration">{task.actualDurationMs}ms</span>
-					</div>
-				)}
-			</div>
-		);
-	}
-
-	return (
-		<div className={`result-card ${task.status === "work_won" ? "work" : "timeout"}`}>
-			<div className="result-winner">
-				{task.status === "work_won" ? "Work Won!" : "Timeout!"}
-			</div>
-			<div className="result-details">
-				Work: {task.workDurationMs}ms | Timeout: {task.timeoutMs}ms | Actual:{" "}
-				{task.actualDurationMs}ms
-			</div>
-		</div>
-	);
-}
-
-// ============================================================================
-// ROLLBACK DEMO - One actor per transaction
-// ============================================================================
-
-function RollbackDemo() {
-	const [txKeys, setTxKeys] = usePersistedState<
-		{ id: string; amount: number; shouldFail: boolean }[]
-	>("workflow-sandbox:transactions", []);
-
-	const processPayment = (shouldFail: boolean) => {
-		const txId = crypto.randomUUID();
-		const amount = Math.floor(50 + Math.random() * 200);
-		setTxKeys((prev) => [{ id: txId, amount, shouldFail }, ...prev]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Rollback Demo</h2>
-				<p>
-					Compensating transactions with rollback. Process payments with
-					automatic rollback on failure.
-				</p>
-				<div className="controls">
-					<button className="primary" onClick={() => processPayment(false)}>
-						Process Payment
-					</button>
-					<button className="danger" onClick={() => processPayment(true)}>
-						Process (Will Fail)
-					</button>
-				</div>
-			</div>
-
-			<div className="demo-content">
-				<div className="transactions-list">
-					{txKeys.length === 0 && (
-						<p className="empty">
-							No transactions yet. Process a payment to see rollback!
-						</p>
-					)}
-					{txKeys.map((t) => (
-						<TransactionCard
-							key={t.id}
-							txId={t.id}
-							amount={t.amount}
-							shouldFail={t.shouldFail}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function TransactionCard({
-	txId,
-	amount,
-	shouldFail,
-}: {
-	txId: string;
-	amount: number;
-	shouldFail: boolean;
-}) {
-	const actor = useActor({
-		name: "payment",
-		key: [txId],
-		createWithInput: { amount, shouldFail },
-	});
-	const [tx, setTx] = useState<Transaction | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getTransaction().then(setTx);
-	}, [actor.connection]);
-
-	actor.useEvent("transactionStarted", setTx);
-	actor.useEvent("transactionUpdated", setTx);
-	actor.useEvent("transactionCompleted", setTx);
-	actor.useEvent("transactionFailed", setTx);
-
-	const getStepColor = (status: string) => {
-		switch (status) {
-			case "pending":
-				return "#8e8e93";
-			case "running":
-				return "#ff9f0a";
-			case "completed":
-				return "#30d158";
-			case "rolling_back":
-				return "#bf5af2";
-			case "rolled_back":
-				return "#bf5af2";
-			case "failed":
-				return "#ff3b30";
-			default:
-				return "#8e8e93";
-		}
-	};
-
-	const getStepIcon = (status: string) => {
-		switch (status) {
-			case "pending":
-				return "○";
-			case "completed":
-				return "✓";
-			case "rolled_back":
-				return "↩";
-			default:
-				return "○";
-		}
-	};
-
-	if (!tx) return <div className="transaction-card loading">Loading...</div>;
-
-	const isRollingBack = tx.status === "rolling_back";
-	const hasRollback = tx.steps.some((s) => s.status === "rolled_back");
-
-	return (
-		<div className={`transaction-card ${tx.status}`}>
-			<div className="tx-header">
-				<span className="tx-amount">${tx.amount}</span>
-				<span className={`tx-status ${tx.status}`}>
-					{tx.status === "rolling_back" ? "↩ rolling back" : tx.status}
-				</span>
-			</div>
-			{isRollingBack && (
-				<div className="rollback-banner">
-					Compensating actions in progress...
-				</div>
-			)}
-			<div className="tx-steps">
-				{tx.steps.map((step) => (
-					<div key={step.name} className={`tx-step ${step.status}`}>
-						<span
-							className={`step-icon ${step.status}`}
-							style={{ color: getStepColor(step.status) }}
-						>
-							{getStepIcon(step.status)}
-						</span>
-						<span className="step-name">{step.name}</span>
-						<span className={`step-status ${step.status}`}>
-							{step.status}
-							{step.status === "rolled_back" && " ↩"}
-						</span>
-					</div>
-				))}
-			</div>
-			{hasRollback && tx.status === "failed" && (
-				<div className="rollback-summary">
-					All completed steps have been rolled back
-				</div>
-			)}
-			{tx.error && <div className="error">{tx.error}</div>}
-		</div>
-	);
-}
diff --git a/examples/workflow-sandbox-vercel/frontend/main.tsx b/examples/workflow-sandbox-vercel/frontend/main.tsx
deleted file mode 100644
index 372f49c622..0000000000
--- a/examples/workflow-sandbox-vercel/frontend/main.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./App.tsx";
-
-const root = document.getElementById("root");
-if (!root) throw new Error("Root element not found");
-
-createRoot(root).render(
-	<StrictMode>
-		<App />
-	</StrictMode>
-);
diff --git a/examples/workflow-sandbox-vercel/index.html b/examples/workflow-sandbox-vercel/index.html
deleted file mode 100644
index 662a01901b..0000000000
--- a/examples/workflow-sandbox-vercel/index.html
+++ /dev/null
@@ -1,878 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Workflow Sandbox</title>
-    <style>
-        /* Reset */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        /* Base */
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
-            background: #000000;
-            min-height: 100vh;
-            color: #ffffff;
-            font-size: 16px;
-            line-height: 1.5;
-            padding: 24px;
-        }
-
-        /* Layout */
-        .app {
-            width: 100%;
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        header {
-            text-align: center;
-            padding: 24px;
-            margin-bottom: 24px;
-        }
-
-        header h1 {
-            font-size: 24px;
-            font-weight: 600;
-            color: #ffffff;
-            margin-bottom: 8px;
-        }
-
-        header p {
-            font-size: 14px;
-            color: #8e8e93;
-            font-weight: 500;
-        }
-
-        /* Tabs */
-        .tabs {
-            display: flex;
-            flex-wrap: wrap;
-            margin-bottom: 24px;
-            border-bottom: 1px solid #2c2c2e;
-        }
-
-        .tab {
-            padding: 12px 16px;
-            background: transparent;
-            border: none;
-            border-radius: 0;
-            border-bottom: 2px solid transparent;
-            margin-bottom: -1px;
-            cursor: pointer;
-            transition: color 200ms ease, border-color 200ms ease;
-            color: #8e8e93;
-            white-space: nowrap;
-        }
-
-        .tab.active {
-            color: #ffffff;
-            border-bottom-color: #ff4f00;
-        }
-
-        .tab-label {
-            font-weight: 600;
-            font-size: 14px;
-        }
-
-        .tab-desc {
-            display: none;
-        }
-
-        /* Main Container */
-        main {
-            background: #1c1c1e;
-            border-radius: 16px;
-            border: 1px solid #2c2c2e;
-            overflow: hidden;
-        }
-
-        /* Demo Sections */
-        .demo-header {
-            padding: 24px;
-            border-bottom: 1px solid #2c2c2e;
-        }
-
-        .demo-header h2 {
-            font-size: 24px;
-            font-weight: 600;
-            color: #ffffff;
-            margin-bottom: 8px;
-        }
-
-        .demo-header p {
-            font-size: 14px;
-            color: #8e8e93;
-            line-height: 1.6;
-            margin-bottom: 16px;
-        }
-
-        .demo-content {
-            padding: 24px;
-            background: #000000;
-        }
-
-        /* Buttons */
-        button {
-            padding: 12px 20px;
-            border: none;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            color: #ffffff;
-            background: #ff4f00;
-        }
-
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        button.primary {
-            background: #ff4f00;
-        }
-
-        button.secondary {
-            background: #2c2c2e;
-        }
-
-        button.danger {
-            background: #ff3b30;
-        }
-
-        button.approve {
-            background: #30d158;
-        }
-
-        button.reject {
-            background: #ff3b30;
-        }
-
-        /* Controls */
-        .controls {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        .controls input {
-            padding: 12px 16px;
-            border: 1px solid #3a3a3c;
-            border-radius: 8px;
-            font-size: 14px;
-            transition: all 200ms ease;
-            background: #2c2c2e;
-            color: #ffffff;
-            width: 80px;
-        }
-
-        .controls input:focus {
-            outline: none;
-            border-color: #ff4f00;
-            box-shadow: 0 0 0 3px rgba(255, 79, 0, 0.2);
-        }
-
-        .controls input::placeholder {
-            color: #6e6e73;
-        }
-
-        .controls span {
-            font-size: 14px;
-            color: #8e8e93;
-        }
-
-        .control-group {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .control-group label {
-            font-size: 12px;
-            font-weight: 500;
-            color: #8e8e93;
-        }
-
-        .control-group input {
-            width: 120px;
-        }
-
-        /* Lists */
-        .orders-list,
-        .timers-list,
-        .jobs-list,
-        .requests-list,
-        .transactions-list,
-        .results-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        /* Cards */
-        .order-card,
-        .timer-card,
-        .job-card,
-        .request-card,
-        .transaction-card,
-        .result-card {
-            background: #1c1c1e;
-            border: 1px solid #2c2c2e;
-            border-radius: 16px;
-            padding: 24px;
-        }
-
-        .order-header,
-        .timer-header,
-        .request-header,
-        .tx-header,
-        .job-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 16px;
-        }
-
-        .order-id,
-        .timer-name,
-        .request-title,
-        .job-id {
-            font-weight: 600;
-            font-size: 16px;
-            color: #ffffff;
-        }
-
-        /* Status Badges */
-        .status-badge {
-            padding: 4px 8px;
-            border-radius: 6px;
-            font-size: 12px;
-            text-transform: uppercase;
-            font-weight: 500;
-            letter-spacing: 0.5px;
-        }
-
-        /* Empty State */
-        .empty {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            color: #6e6e73;
-            padding: 48px 24px;
-            font-size: 14px;
-            line-height: 1.6;
-        }
-
-        /* Loading State */
-        .loading {
-            color: #8e8e93;
-            padding: 16px;
-            text-align: center;
-            font-size: 14px;
-        }
-
-        /* Order Progress */
-        .order-progress {
-            display: flex;
-            gap: 24px;
-        }
-
-        .step {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-            font-size: 14px;
-            color: #8e8e93;
-            font-weight: 500;
-        }
-
-        .step.done {
-            color: #30d158;
-        }
-
-        .step.active {
-            color: #ff4f00;
-        }
-
-        .step-indicator {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #2c2c2e;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .step.done .step-indicator {
-            background: #30d158;
-            color: #ffffff;
-        }
-
-        .step.active .step-indicator {
-            background: #ff4f00;
-            color: #ffffff;
-        }
-
-        /* Error */
-        .error {
-            margin-top: 16px;
-            padding: 12px 16px;
-            background: rgba(255, 59, 48, 0.1);
-            border-left: 4px solid #ff3b30;
-            border-radius: 8px;
-            color: #ff3b30;
-            font-size: 12px;
-        }
-
-        /* Progress Bars */
-        .progress-bar {
-            height: 8px;
-            background: #2c2c2e;
-            border-radius: 4px;
-            overflow: hidden;
-        }
-
-        .progress-bar.large {
-            height: 12px;
-            border-radius: 6px;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: #ff4f00;
-            border-radius: inherit;
-            transition: width 300ms ease;
-        }
-
-        /* Timer Card */
-        .timer-card.complete {
-            opacity: 0.5;
-        }
-
-        .timer-status {
-            font-size: 16px;
-            font-weight: 600;
-        }
-
-        .timer-status.done {
-            color: #30d158;
-        }
-
-        .timer-status.running {
-            color: #ff4f00;
-        }
-
-        /* Job Status */
-        .job-status {
-            padding: 4px 8px;
-            border-radius: 6px;
-            font-size: 12px;
-            text-transform: uppercase;
-            font-weight: 500;
-        }
-
-        .job-status.running {
-            background: rgba(255, 79, 0, 0.2);
-            color: #ff4f00;
-        }
-
-        .job-status.completed {
-            background: rgba(48, 209, 88, 0.2);
-            color: #30d158;
-        }
-
-        /* Batch Stats */
-        .batch-stats {
-            display: flex;
-            gap: 48px;
-            margin-bottom: 24px;
-        }
-
-        .stat {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .stat-value {
-            font-size: 72px;
-            font-weight: 700;
-            color: #ff4f00;
-            line-height: 1;
-            font-variant-numeric: tabular-nums;
-        }
-
-        .stat-label {
-            font-size: 14px;
-            color: #8e8e93;
-            font-weight: 500;
-            margin-top: 8px;
-        }
-
-        /* Request Actions */
-        .request-actions {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-            margin-top: 16px;
-        }
-
-        .countdown {
-            font-size: 16px;
-            font-weight: 600;
-            color: #ff4f00;
-            margin-right: auto;
-        }
-
-        .decided-by {
-            font-size: 14px;
-            color: #8e8e93;
-            margin-top: 12px;
-        }
-
-        /* Dashboard Branches */
-        .branches {
-            display: flex;
-            gap: 24px;
-            margin-bottom: 24px;
-        }
-
-        .branch {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .branch-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            transition: background-color 200ms ease;
-        }
-
-        .branch-name {
-            font-weight: 600;
-            text-transform: capitalize;
-            font-size: 14px;
-        }
-
-        .branch-status {
-            font-size: 14px;
-            color: #8e8e93;
-        }
-
-        /* Dashboard Data */
-        .dashboard-data {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 12px;
-        }
-
-        .data-card {
-            background: #1c1c1e;
-            border: 1px solid #2c2c2e;
-            border-radius: 16px;
-            padding: 24px;
-        }
-
-        .data-card h3 {
-            font-size: 12px;
-            color: #8e8e93;
-            font-weight: 500;
-            margin-bottom: 12px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .data-stat {
-            font-size: 48px;
-            font-weight: 700;
-            color: #ff4f00;
-            line-height: 1;
-            font-variant-numeric: tabular-nums;
-        }
-
-        .data-sub {
-            font-size: 14px;
-            color: #8e8e93;
-            margin-top: 8px;
-        }
-
-        /* Race Controls */
-        .race-controls {
-            align-items: flex-end;
-        }
-
-        .race-controls input {
-            width: 100px;
-        }
-
-        /* Active Race */
-        .active-race {
-            margin-bottom: 12px;
-            padding: 24px;
-            background: #1c1c1e;
-            border: 1px solid #2c2c2e;
-            border-radius: 16px;
-        }
-
-        .race-track {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .racer {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-        }
-
-        .racer span {
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .racer span:first-child {
-            width: 140px;
-            flex-shrink: 0;
-        }
-
-        .racer.winner span:first-child {
-            color: #30d158;
-        }
-
-        .racer.timeout.winner span:first-child {
-            color: #ff3b30;
-        }
-
-        .racer-progress {
-            flex: 1;
-            height: 24px;
-            background: #2c2c2e;
-            border-radius: 8px;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .racer-bar-fill {
-            height: 100%;
-            background: #30d158;
-            border-radius: 8px;
-            transition: width 50ms linear;
-        }
-
-        .racer-bar-fill.timeout-fill {
-            background: #ff3b30;
-        }
-
-        .winner-badge {
-            color: #30d158;
-            font-weight: 600;
-            margin-left: 12px;
-        }
-
-        .racer.timeout .winner-badge {
-            color: #ff3b30;
-        }
-
-        .race-result {
-            margin-top: 16px;
-            padding-top: 16px;
-            border-top: 1px solid #2c2c2e;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-weight: 600;
-            font-size: 16px;
-        }
-
-        .actual-duration {
-            font-size: 14px;
-            color: #8e8e93;
-            font-weight: 500;
-        }
-
-        /* Result Cards */
-        .result-card {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .result-card.work {
-            border-left: 4px solid #30d158;
-        }
-
-        .result-card.timeout {
-            border-left: 4px solid #ff3b30;
-        }
-
-        .result-winner {
-            font-weight: 600;
-            font-size: 16px;
-        }
-
-        .result-card.work .result-winner {
-            color: #30d158;
-        }
-
-        .result-card.timeout .result-winner {
-            color: #ff3b30;
-        }
-
-        .result-details {
-            font-size: 14px;
-            color: #8e8e93;
-        }
-
-        /* Transaction Cards */
-        .transaction-card.rolling_back,
-        .transaction-card.rolled_back {
-            border-left: 4px solid #bf5af2;
-        }
-
-        .transaction-card.completed {
-            border-left: 4px solid #30d158;
-        }
-
-        .transaction-card.failed {
-            border-left: 4px solid #ff3b30;
-        }
-
-        .tx-amount {
-            font-size: 24px;
-            font-weight: 700;
-        }
-
-        .tx-status {
-            padding: 4px 8px;
-            border-radius: 6px;
-            font-size: 12px;
-            text-transform: uppercase;
-            font-weight: 500;
-        }
-
-        .tx-status.pending {
-            background: #2c2c2e;
-            color: #8e8e93;
-        }
-
-        .tx-status.reserving,
-        .tx-status.charging,
-        .tx-status.completing {
-            background: rgba(255, 79, 0, 0.2);
-            color: #ff4f00;
-        }
-
-        .tx-status.completed {
-            background: rgba(48, 209, 88, 0.2);
-            color: #30d158;
-        }
-
-        .tx-status.rolling_back {
-            background: rgba(191, 90, 242, 0.2);
-            color: #bf5af2;
-        }
-
-        .tx-status.failed {
-            background: rgba(255, 59, 48, 0.2);
-            color: #ff3b30;
-        }
-
-        .tx-steps {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            margin-top: 16px;
-        }
-
-        .tx-step {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            font-size: 14px;
-        }
-
-        .step-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            flex-shrink: 0;
-        }
-
-        .step-icon {
-            width: 20px;
-            height: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            font-weight: 600;
-            flex-shrink: 0;
-        }
-
-        .step-icon.rolled_back {
-            animation: pulse-purple 1s ease-in-out;
-        }
-
-        @keyframes pulse-purple {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-
-        .step-name {
-            flex: 1;
-            font-weight: 500;
-        }
-
-        .step-status {
-            font-size: 12px;
-            color: #8e8e93;
-            text-transform: uppercase;
-        }
-
-        .step-status.rolled_back {
-            color: #bf5af2;
-        }
-
-        .tx-step.rolled_back {
-            opacity: 0.7;
-        }
-
-        .rollback-banner {
-            background: rgba(191, 90, 242, 0.15);
-            border: 1px solid rgba(191, 90, 242, 0.3);
-            border-radius: 8px;
-            padding: 12px 16px;
-            margin-bottom: 16px;
-            color: #bf5af2;
-            font-size: 14px;
-            font-weight: 500;
-            text-align: center;
-            animation: pulse-bg 1.5s ease-in-out infinite;
-        }
-
-        @keyframes pulse-bg {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
-        }
-
-        .rollback-summary {
-            margin-top: 12px;
-            padding: 12px 16px;
-            background: rgba(191, 90, 242, 0.1);
-            border-radius: 8px;
-            color: #bf5af2;
-            font-size: 13px;
-            text-align: center;
-        }
-
-        /* Info Box */
-        .info-box {
-            padding: 24px;
-            background: #2c2c2e;
-            border-radius: 12px;
-        }
-
-        .info-box p {
-            font-size: 14px;
-            color: #8e8e93;
-            line-height: 1.6;
-            margin-bottom: 8px;
-        }
-
-        .info-box p:last-child {
-            margin-bottom: 0;
-        }
-
-        /* Responsive */
-        @media (max-width: 640px) {
-            body {
-                padding: 16px;
-            }
-
-            header {
-                padding: 16px;
-            }
-
-            header h1 {
-                font-size: 20px;
-            }
-
-            .tabs {
-                gap: 8px;
-            }
-
-            .tab {
-                min-width: 100px;
-                padding: 12px;
-            }
-
-            .demo-header,
-            .demo-content {
-                padding: 16px;
-            }
-
-            .order-progress {
-                flex-wrap: wrap;
-                gap: 16px;
-            }
-
-            .batch-stats {
-                gap: 24px;
-            }
-
-            .stat-value {
-                font-size: 48px;
-            }
-
-            .branches {
-                flex-wrap: wrap;
-                gap: 16px;
-            }
-
-            .controls {
-                flex-direction: column;
-                align-items: stretch;
-            }
-
-            .control-group {
-                width: 100%;
-            }
-
-            .control-group input {
-                width: 100%;
-            }
-
-            button {
-                width: 100%;
-            }
-
-            .request-actions {
-                flex-direction: column;
-            }
-
-            .countdown {
-                margin-right: 0;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="/frontend/main.tsx"></script>
-</body>
-</html>
diff --git a/examples/workflow-sandbox-vercel/package.json b/examples/workflow-sandbox-vercel/package.json
deleted file mode 100644
index 3db28d371f..0000000000
--- a/examples/workflow-sandbox-vercel/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-	"name": "workflow-sandbox-vercel",
-	"version": "2.0.21",
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"dev": "vercel dev",
-		"build": "vite build",
-		"check-types": "tsc --noEmit"
-	},
-	"dependencies": {
-		"@hono/node-server": "^1.19.7",
-		"@hono/node-ws": "^1.3.0",
-		"@rivetkit/react": "*",
-		"hono": "^4.11.3",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"rivetkit": "*"
-	},
-	"devDependencies": {
-		"@types/node": "^22.13.9",
-		"@types/react": "^18.2.0",
-		"@types/react-dom": "^18.2.0",
-		"@vitejs/plugin-react": "^4.2.0",
-		"tsx": "^3.12.7",
-		"typescript": "^5.5.2",
-		"vite": "^5.0.0"
-	},
-	"template": {
-		"technologies": [
-			"react",
-			"typescript"
-		],
-		"tags": [
-			"experimental"
-		],
-		"frontendPort": 5173
-	},
-	"stableVersion": "0.8.0",
-	"license": "MIT"
-}
diff --git a/examples/workflow-sandbox-vercel/src/actors.ts b/examples/workflow-sandbox-vercel/src/actors.ts
deleted file mode 100644
index 24d87fdad9..0000000000
--- a/examples/workflow-sandbox-vercel/src/actors.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-// Workflow Sandbox - Actor Registry
-// Each actor demonstrates a different workflow feature using actor-per-workflow pattern
-
-import { setup } from "rivetkit";
-
-// Import actors from individual files
-export { timer } from "./actors/timer.ts";
-export type { Timer, TimerInput } from "./actors/timer.ts";
-
-export { order } from "./actors/order.ts";
-export type { Order, OrderStatus } from "./actors/order.ts";
-
-export { batch } from "./actors/batch.ts";
-export type { BatchInfo, BatchJob, BatchJobInput } from "./actors/batch.ts";
-
-export { approval } from "./actors/approval.ts";
-export type {
-	ApprovalRequest,
-	ApprovalRequestInput,
-	RequestStatus,
-} from "./actors/approval.ts";
-
-export { dashboard } from "./actors/dashboard.ts";
-export type {
-	DashboardData,
-	DashboardState,
-	UserStats,
-	OrderStats,
-	MetricsStats,
-	BranchStatus,
-} from "./actors/dashboard.ts";
-
-export { race } from "./actors/race.ts";
-export type { RaceTask, RaceTaskInput } from "./actors/race.ts";
-
-export { payment } from "./actors/payment.ts";
-export type {
-	Transaction,
-	TransactionStep,
-	TransactionInput,
-} from "./actors/payment.ts";
-
-// Import for registry setup
-import { timer } from "./actors/timer.ts";
-import { order } from "./actors/order.ts";
-import { batch } from "./actors/batch.ts";
-import { approval } from "./actors/approval.ts";
-import { dashboard } from "./actors/dashboard.ts";
-import { race } from "./actors/race.ts";
-import { payment } from "./actors/payment.ts";
-
-// Registry setup
-export const registry = setup({
-	use: {
-		timer,
-		order,
-		batch,
-		approval,
-		dashboard,
-		race,
-		payment,
-	},
-});
diff --git a/examples/workflow-sandbox-vercel/src/actors/approval.ts b/examples/workflow-sandbox-vercel/src/actors/approval.ts
deleted file mode 100644
index d6d5225c72..0000000000
--- a/examples/workflow-sandbox-vercel/src/actors/approval.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-// APPROVAL REQUEST (Listen Demo)
-// Demonstrates: Message listening with timeout for approval workflows
-// One actor per approval request - actor key is the request ID
-
-import { actor } from "rivetkit";
-import { Loop, workflow, workflowQueueName } from "rivetkit/workflow";
-import { actorCtx } from "./_helpers.ts";
-
-export type RequestStatus = "pending" | "approved" | "rejected" | "timeout";
-
-export type ApprovalRequest = {
-	id: string;
-	title: string;
-	description: string;
-	status: RequestStatus;
-	createdAt: number;
-	decidedAt?: number;
-	decidedBy?: string;
-	deciding?: boolean; // True when a decision is being processed
-};
-
-type State = ApprovalRequest;
-
-const QUEUE_DECISION = workflowQueueName("decision");
-
-const APPROVAL_TIMEOUT_MS = 30000;
-
-export type ApprovalRequestInput = {
-	title?: string;
-	description?: string;
-};
-
-export const approval = actor({
-	createState: (c, input: ApprovalRequestInput): ApprovalRequest => ({
-		id: c.key[0] as string,
-		title: input?.title ?? "Untitled Request",
-		description: input?.description ?? "",
-		status: "pending",
-		createdAt: Date.now(),
-	}),
-
-	actions: {
-		getRequest: (c): ApprovalRequest => c.state,
-
-		approve: async (c, approver: string) => {
-			if (c.state.status !== "pending") return;
-			c.state.deciding = true;
-			c.broadcast("requestUpdated", c.state);
-			await c.queue.send(QUEUE_DECISION, { approved: true, approver });
-		},
-
-		reject: async (c, approver: string) => {
-			if (c.state.status !== "pending") return;
-			c.state.deciding = true;
-			c.broadcast("requestUpdated", c.state);
-			await c.queue.send(QUEUE_DECISION, { approved: false, approver });
-		},
-	},
-
-	run: workflow(async (ctx) => {
-		await ctx.loop({
-			name: "approval-loop",
-			run: async (loopCtx) => {
-				const c = actorCtx<State>(loopCtx);
-
-				await loopCtx.step("init-request", async () => {
-					ctx.log.info({
-						msg: "waiting for approval decision",
-						requestId: c.state.id,
-						title: c.state.title,
-					});
-					c.broadcast("requestCreated", c.state);
-				});
-
-				const decision = await loopCtx.listenWithTimeout<{
-					approved: boolean;
-					approver: string;
-				}>("wait-decision", "decision", APPROVAL_TIMEOUT_MS);
-
-				await loopCtx.step("update-status", async () => {
-					c.state.deciding = false;
-					if (decision === null) {
-						c.state.status = "timeout";
-						ctx.log.info({ msg: "request timed out", requestId: c.state.id });
-					} else if (decision.approved) {
-						c.state.status = "approved";
-						c.state.decidedBy = decision.approver;
-						ctx.log.info({
-							msg: "request approved",
-							requestId: c.state.id,
-							approver: decision.approver,
-						});
-					} else {
-						c.state.status = "rejected";
-						c.state.decidedBy = decision.approver;
-						ctx.log.info({
-							msg: "request rejected",
-							requestId: c.state.id,
-							approver: decision.approver,
-						});
-					}
-					c.state.decidedAt = Date.now();
-					c.broadcast("requestUpdated", c.state);
-				});
-
-				return Loop.break(undefined);
-			},
-		});
-	}),
-});
diff --git a/examples/workflow-sandbox-vercel/src/actors/batch.ts b/examples/workflow-sandbox-vercel/src/actors/batch.ts
deleted file mode 100644
index 921c055a72..0000000000
--- a/examples/workflow-sandbox-vercel/src/actors/batch.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-// BATCH PROCESSOR (Loops Demo)
-// Demonstrates: Loop with persistent state (cursor) for batch processing
-// One actor per batch job - actor key is the job ID
-
-import { actor } from "rivetkit";
-import { Loop, workflow } from "rivetkit/workflow";
-import { actorCtx } from "./_helpers.ts";
-
-export type BatchInfo = {
-	id: number;
-	count: number;
-	processedAt: number;
-};
-
-export type BatchJob = {
-	id: string;
-	totalItems: number;
-	batchSize: number;
-	status: "running" | "stopped" | "completed";
-	processedTotal: number;
-	currentBatch: number;
-	batches: BatchInfo[];
-	startedAt: number;
-	completedAt?: number;
-};
-
-type State = BatchJob;
-
-function fetchBatch(
-	cursor: number,
-	batchSize: number,
-	totalItems: number
-): { items: number[]; hasMore: boolean } {
-	const start = cursor * batchSize;
-	const end = Math.min(start + batchSize, totalItems);
-	const items = [];
-	for (let i = start; i < end; i++) {
-		items.push(i);
-	}
-	return {
-		items,
-		hasMore: end < totalItems,
-	};
-}
-
-export type BatchJobInput = {
-	totalItems?: number;
-	batchSize?: number;
-};
-
-export const batch = actor({
-	createState: (c, input: BatchJobInput): BatchJob => ({
-		id: c.key[0] as string,
-		totalItems: input?.totalItems ?? 50,
-		batchSize: input?.batchSize ?? 5,
-		status: "running",
-		processedTotal: 0,
-		currentBatch: 0,
-		batches: [],
-		startedAt: Date.now(),
-	}),
-
-	actions: {
-		getJob: (c): BatchJob => c.state,
-	},
-
-	run: workflow(async (ctx) => {
-		await ctx.loop({
-			name: "batch-loop",
-			state: { cursor: 0 },
-			run: async (batchCtx, loopState: { cursor: number }) => {
-				const c = actorCtx<State>(batchCtx);
-
-				const batch = await batchCtx.step("fetch-batch", async () => {
-					ctx.log.info({
-						msg: "processing batch",
-						jobId: c.state.id,
-						cursor: loopState.cursor,
-					});
-					await new Promise((r) => setTimeout(r, 200 + Math.random() * 300));
-					return fetchBatch(loopState.cursor, c.state.batchSize, c.state.totalItems);
-				});
-
-				await batchCtx.step("process-batch", async () => {
-					await new Promise((r) => setTimeout(r, 300 + Math.random() * 500));
-
-					const batchInfo: BatchInfo = {
-						id: loopState.cursor,
-						count: batch.items.length,
-						processedAt: Date.now(),
-					};
-
-					c.state.currentBatch = loopState.cursor;
-					c.state.processedTotal += batch.items.length;
-					c.state.batches.push(batchInfo);
-
-					c.broadcast("batchProcessed", batchInfo);
-					c.broadcast("stateChanged", c.state);
-
-					ctx.log.info({
-						msg: "batch processed",
-						jobId: c.state.id,
-						cursor: loopState.cursor,
-						count: batch.items.length,
-					});
-				});
-
-				if (!batch.hasMore) {
-					await batchCtx.step("mark-complete", async () => {
-						c.state.status = "completed";
-						c.state.completedAt = Date.now();
-						c.broadcast("stateChanged", c.state);
-						c.broadcast("processingComplete", {
-							totalBatches: loopState.cursor + 1,
-							totalItems: c.state.processedTotal,
-						});
-					});
-					return Loop.break(loopState.cursor + 1);
-				}
-
-				return Loop.continue({ cursor: loopState.cursor + 1 });
-			},
-		});
-	}),
-});
diff --git a/examples/workflow-sandbox-vercel/src/actors/payment.ts b/examples/workflow-sandbox-vercel/src/actors/payment.ts
deleted file mode 100644
index c9ad701a82..0000000000
--- a/examples/workflow-sandbox-vercel/src/actors/payment.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-// PAYMENT PROCESSOR (Rollback Demo)
-// Demonstrates: Rollback checkpoints with compensating actions
-// One actor per transaction - actor key is the transaction ID
-
-import { actor } from "rivetkit";
-import { Loop, workflow } from "rivetkit/workflow";
-import { actorCtx } from "./_helpers.ts";
-
-export type TransactionStep = {
-	name: string;
-	status: "pending" | "completed" | "rolled_back";
-	completedAt?: number;
-	rolledBackAt?: number;
-};
-
-export type Transaction = {
-	id: string;
-	amount: number;
-	shouldFail: boolean;
-	status:
-		| "pending"
-		| "reserving"
-		| "charging"
-		| "completing"
-		| "completed"
-		| "rolling_back"
-		| "failed";
-	steps: TransactionStep[];
-	error?: string;
-	startedAt: number;
-	completedAt?: number;
-};
-
-type State = Transaction;
-
-export type TransactionInput = {
-	amount?: number;
-	shouldFail?: boolean;
-};
-
-export const payment = actor({
-	createState: (c, input: TransactionInput): Transaction => ({
-		id: c.key[0] as string,
-		amount: input?.amount ?? 100,
-		shouldFail: input?.shouldFail ?? false,
-		status: "pending",
-		steps: [
-			{ name: "reserve-inventory", status: "pending" },
-			{ name: "charge-card", status: "pending" },
-			{ name: "complete-order", status: "pending" },
-		],
-		startedAt: Date.now(),
-	}),
-
-	actions: {
-		getTransaction: (c): Transaction => c.state,
-	},
-
-	run: workflow(async (ctx) => {
-		await ctx.loop({
-			name: "payment-loop",
-			run: async (loopCtx) => {
-				const c = actorCtx<State>(loopCtx);
-
-				await loopCtx.step("init-payment", async () => {
-					ctx.log.info({
-						msg: "starting payment processing",
-						txId: c.state.id,
-						amount: c.state.amount,
-						shouldFail: c.state.shouldFail,
-					});
-					c.broadcast("transactionStarted", c.state);
-				});
-
-				await loopCtx.rollbackCheckpoint("payment-checkpoint");
-
-				// Step 1: Reserve inventory
-				await loopCtx.step({
-					name: "reserve-inventory",
-					run: async () => {
-						c.state.status = "reserving";
-						const step = c.state.steps.find(
-							(s) => s.name === "reserve-inventory"
-						);
-						if (step) {
-							step.status = "completed";
-							step.completedAt = Date.now();
-						}
-						c.broadcast("transactionUpdated", c.state);
-
-						await new Promise((r) =>
-							setTimeout(r, 500 + Math.random() * 500)
-						);
-						ctx.log.info({ msg: "inventory reserved", txId: c.state.id });
-						return { reserved: true };
-					},
-					rollback: async () => {
-						// Set rolling_back status on first rollback
-						c.state.status = "rolling_back";
-						const step = c.state.steps.find(
-							(s) => s.name === "reserve-inventory"
-						);
-						if (step) {
-							step.status = "rolled_back";
-							step.rolledBackAt = Date.now();
-						}
-						ctx.log.info({ msg: "inventory released", txId: c.state.id });
-						c.broadcast("transactionUpdated", c.state);
-						// Small delay so UI can show the rollback
-						await new Promise((r) => setTimeout(r, 400));
-					},
-				});
-
-				// Step 2: Charge card
-				await loopCtx.step({
-					name: "charge-card",
-					run: async () => {
-						c.state.status = "charging";
-						const step = c.state.steps.find((s) => s.name === "charge-card");
-						if (step) {
-							step.status = "completed";
-							step.completedAt = Date.now();
-						}
-						c.broadcast("transactionUpdated", c.state);
-
-						await new Promise((r) =>
-							setTimeout(r, 500 + Math.random() * 500)
-						);
-
-						if (c.state.shouldFail) {
-							throw new Error("Payment declined (simulated)");
-						}
-
-						ctx.log.info({ msg: "card charged", txId: c.state.id });
-						return { chargeId: `ch_${c.state.id}` };
-					},
-					rollback: async () => {
-						c.state.status = "rolling_back";
-						const step = c.state.steps.find((s) => s.name === "charge-card");
-						if (step) {
-							step.status = "rolled_back";
-							step.rolledBackAt = Date.now();
-						}
-						ctx.log.info({ msg: "charge refunded", txId: c.state.id });
-						c.broadcast("transactionUpdated", c.state);
-						// Small delay so UI can show the rollback
-						await new Promise((r) => setTimeout(r, 400));
-					},
-				});
-
-				// Step 3: Complete order
-				await loopCtx.step({
-					name: "complete-order",
-					run: async () => {
-						c.state.status = "completing";
-						const step = c.state.steps.find((s) => s.name === "complete-order");
-						if (step) step.status = "completed";
-						c.broadcast("transactionUpdated", c.state);
-
-						await new Promise((r) =>
-							setTimeout(r, 300 + Math.random() * 300)
-						);
-
-						c.state.status = "completed";
-						c.state.completedAt = Date.now();
-						ctx.log.info({ msg: "order completed", txId: c.state.id });
-						c.broadcast("transactionCompleted", c.state);
-					},
-				});
-
-				return Loop.break(undefined);
-			},
-		});
-	}),
-});
diff --git a/examples/workflow-sandbox-vercel/tsconfig.json b/examples/workflow-sandbox-vercel/tsconfig.json
deleted file mode 100644
index 2a870bab03..0000000000
--- a/examples/workflow-sandbox-vercel/tsconfig.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "esnext",
-		"lib": [
-			"esnext",
-			"dom"
-		],
-		"jsx": "react-jsx",
-		"module": "esnext",
-		"moduleResolution": "bundler",
-		"types": [
-			"node",
-			"vite/client"
-		],
-		"noEmit": true,
-		"strict": true,
-		"skipLibCheck": true,
-		"allowImportingTsExtensions": true,
-		"rewriteRelativeImportExtensions": true
-	},
-	"include": [
-		"src/**/*",
-		"api/**/*",
-		"frontend/**/*"
-	]
-}
diff --git a/examples/workflow-sandbox-vercel/turbo.json b/examples/workflow-sandbox-vercel/turbo.json
deleted file mode 100644
index c3d3d3b9bb..0000000000
--- a/examples/workflow-sandbox-vercel/turbo.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"$schema": "https://turbo.build/schema.json",
-	"extends": [
-		"//"
-	]
-}
diff --git a/examples/workflow-sandbox-vercel/vercel.json b/examples/workflow-sandbox-vercel/vercel.json
deleted file mode 100644
index 64a8d9b467..0000000000
--- a/examples/workflow-sandbox-vercel/vercel.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-	"framework": "vite",
-	"rewrites": [
-		{
-			"source": "/api/(.*)",
-			"destination": "/api"
-		}
-	]
-}
diff --git a/examples/workflow-sandbox-vercel/vite.config.ts b/examples/workflow-sandbox-vercel/vite.config.ts
deleted file mode 100644
index f9f0d5ec2f..0000000000
--- a/examples/workflow-sandbox-vercel/vite.config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-export default defineConfig({
-	plugins: [react()],
-});
diff --git a/examples/workflow-sandbox/README.md b/examples/workflow-sandbox/README.md
deleted file mode 100644
index 46eec1d50d..0000000000
--- a/examples/workflow-sandbox/README.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# Workflow Sandbox
-
-Interactive sandbox for testing all RivetKit workflow patterns.
-
-## Getting Started
-
-```sh
-git clone https://github.com/rivet-dev/rivet.git
-cd rivet/examples/workflow-sandbox
-npm install
-npm run dev
-```
-
-
-## Features
-
-This example demonstrates all workflow features through a tabbed interface:
-
-- **Steps** - Multi-step order processing with automatic retries
-- **Sleep** - Durable countdown timers that survive restarts
-- **Loops** - Batch processing with persistent cursor state
-- **Listen** - Approval queue with timeout-based decisions
-- **Join** - Parallel data fetching (wait-all pattern)
-- **Race** - Work vs timeout (first-wins pattern)
-- **Rollback** - Compensating transactions with rollback handlers
-
-## Implementation
-
-Each workflow pattern is implemented as a separate actor with its own state and workflow loop. The key patterns demonstrated:
-
-### Steps
-```typescript
-await loopCtx.step("validate", async () => { /* ... */ });
-await loopCtx.step("charge", async () => { /* ... */ });
-await loopCtx.step("fulfill", async () => { /* ... */ });
-```
-
-### Sleep
-```typescript
-await loopCtx.sleep("countdown", durationMs);
-```
-
-### Loops
-```typescript
-await ctx.loop({
-  name: "batch-loop",
-  state: { cursor: 0 },
-  run: async (loopCtx, state) => {
-    // Process batch
-    return Loop.continue({ cursor: state.cursor + 1 });
-  },
-});
-```
-
-### Listen
-```typescript
-const decision = await loopCtx.listenWithTimeout<Decision>(
-  "wait-decision",
-  "decision-queue",
-  30000 // 30 second timeout
-);
-```
-
-### Join
-```typescript
-const results = await loopCtx.join("fetch-all", {
-  users: { run: async (ctx) => fetchUsers() },
-  orders: { run: async (ctx) => fetchOrders() },
-});
-```
-
-### Race
-```typescript
-const { winner, value } = await loopCtx.race("work-vs-timeout", [
-  { name: "work", run: async (ctx) => doWork() },
-  { name: "timeout", run: async (ctx) => ctx.sleep("wait", timeout) },
-]);
-```
-
-### Rollback
-```typescript
-await loopCtx.rollbackCheckpoint("payment-checkpoint");
-
-await loopCtx.step({
-  name: "charge-card",
-  run: async () => chargeCard(),
-  rollback: async () => refundCard(),
-});
-```
-
-See the implementation in [`src/actors.ts`](https://github.com/rivet-dev/rivet/tree/main/examples/workflow-sandbox/src/actors.ts).
-
-## Resources
-
-Read more about [workflows](/docs/workflows).
-
-## License
-
-MIT
diff --git a/examples/workflow-sandbox/frontend/App.tsx b/examples/workflow-sandbox/frontend/App.tsx
deleted file mode 100644
index 18c16da037..0000000000
--- a/examples/workflow-sandbox/frontend/App.tsx
+++ /dev/null
@@ -1,956 +0,0 @@
-import { useState, useEffect } from "react";
-import { createRivetKit } from "@rivetkit/react";
-import type {
-	registry,
-	Order,
-	Timer,
-	BatchJob,
-	ApprovalRequest,
-	DashboardState,
-	RaceTask,
-	Transaction,
-} from "../src/actors.ts";
-
-const { useActor } = createRivetKit<typeof registry>(
-	`${location.origin}/api/rivet`
-);
-
-// localStorage helpers for persisting actor keys across page refreshes
-function usePersistedState<T>(key: string, initial: T): [T, React.Dispatch<React.SetStateAction<T>>] {
-	const [state, setState] = useState<T>(() => {
-		const stored = localStorage.getItem(key);
-		return stored ? JSON.parse(stored) : initial;
-	});
-
-	useEffect(() => {
-		localStorage.setItem(key, JSON.stringify(state));
-	}, [key, state]);
-
-	return [state, setState];
-}
-
-type Tab =
-	| "steps"
-	| "sleep"
-	| "loops"
-	| "listen"
-	| "join"
-	| "race"
-	| "rollback";
-
-const TABS: { id: Tab; label: string; description: string }[] = [
-	{ id: "steps", label: "Steps", description: "Multi-step order processing" },
-	{ id: "sleep", label: "Sleep", description: "Durable countdown timers" },
-	{ id: "loops", label: "Loops", description: "Batch processing with cursor" },
-	{ id: "listen", label: "Listen", description: "Approval queue with timeout" },
-	{ id: "join", label: "Join", description: "Parallel data aggregation" },
-	{ id: "race", label: "Race", description: "Work vs timeout pattern" },
-	{
-		id: "rollback",
-		label: "Rollback",
-		description: "Compensating transactions",
-	},
-];
-
-export function App() {
-	const [activeTab, setActiveTab] = useState<Tab>("steps");
-
-	return (
-		<div className="app">
-			<header>
-				<h1>Workflow Sandbox</h1>
-				<p>Test different RivetKit workflow patterns</p>
-			</header>
-
-			<nav className="tabs">
-				{TABS.map((tab) => (
-					<button
-						key={tab.id}
-						className={`tab ${activeTab === tab.id ? "active" : ""}`}
-						onClick={() => setActiveTab(tab.id)}
-					>
-						<span className="tab-label">{tab.label}</span>
-						<span className="tab-desc">{tab.description}</span>
-					</button>
-				))}
-			</nav>
-
-			<main>
-				{activeTab === "steps" && <StepsDemo />}
-				{activeTab === "sleep" && <SleepDemo />}
-				{activeTab === "loops" && <LoopsDemo />}
-				{activeTab === "listen" && <ListenDemo />}
-				{activeTab === "join" && <JoinDemo />}
-				{activeTab === "race" && <RaceDemo />}
-				{activeTab === "rollback" && <RollbackDemo />}
-			</main>
-		</div>
-	);
-}
-
-// ============================================================================
-// STEPS DEMO - One actor per order
-// ============================================================================
-
-function StepsDemo() {
-	const [orderKeys, setOrderKeys] = usePersistedState<string[]>("workflow-sandbox:orders", []);
-
-	const createOrder = () => {
-		const orderId = `ORD-${Date.now().toString(36).toUpperCase()}`;
-		setOrderKeys((prev) => [orderId, ...prev]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Steps Demo</h2>
-				<p>
-					Sequential workflow steps with automatic retries. Each order goes
-					through validate, charge, and fulfill steps.
-				</p>
-				<button className="primary" onClick={createOrder}>
-					Create Order
-				</button>
-			</div>
-
-			<div className="demo-content">
-				<div className="orders-list">
-					{orderKeys.length === 0 && (
-						<p className="empty">No orders yet. Create one to see the workflow!</p>
-					)}
-					{orderKeys.map((orderId) => (
-						<OrderCard key={orderId} orderId={orderId} />
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function OrderCard({ orderId }: { orderId: string }) {
-	const actor = useActor({ name: "order", key: [orderId] });
-	const [order, setOrder] = useState<Order | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getOrder().then(setOrder);
-	}, [actor.connection]);
-
-	actor.useEvent("orderUpdated", setOrder);
-
-	const getStatusColor = (status: Order["status"]) => {
-		switch (status) {
-			case "pending":
-				return "#8e8e93";
-			case "validating":
-			case "charging":
-			case "fulfilling":
-				return "#ff9f0a";
-			case "completed":
-				return "#30d158";
-			case "failed":
-				return "#ff3b30";
-			default:
-				return "#8e8e93";
-		}
-	};
-
-	if (!order) return <div className="order-card loading">Loading...</div>;
-
-	return (
-		<div className="order-card">
-			<div className="order-header">
-				<span className="order-id">{order.id}</span>
-				<span
-					className="status-badge"
-					style={{ backgroundColor: getStatusColor(order.status) }}
-				>
-					{order.status}
-				</span>
-			</div>
-			<div className="order-progress">
-				{["Validate", "Charge", "Fulfill", "Complete"].map((step, idx) => (
-					<div
-						key={step}
-						className={`step ${order.step > idx ? "done" : ""} ${order.step === idx + 1 ? "active" : ""}`}
-					>
-						<div className="step-indicator">
-							{order.step > idx ? "✓" : idx + 1}
-						</div>
-						<span>{step}</span>
-					</div>
-				))}
-			</div>
-			{order.error && <div className="error">{order.error}</div>}
-		</div>
-	);
-}
-
-// ============================================================================
-// SLEEP DEMO - One actor per timer
-// ============================================================================
-
-function SleepDemo() {
-	const [timerKeys, setTimerKeys] = usePersistedState<
-		{ id: string; name: string; durationMs: number }[]
-	>("workflow-sandbox:timers", []);
-	const [duration, setDuration] = useState(10);
-
-	const createTimer = () => {
-		const timerId = crypto.randomUUID();
-		const name = `Timer ${timerKeys.length + 1}`;
-		setTimerKeys((prev) => [{ id: timerId, name, durationMs: duration * 1000 }, ...prev]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Sleep Demo</h2>
-				<p>
-					Durable sleep that survives restarts. Set a timer and watch it
-					countdown - even if you refresh the page!
-				</p>
-				<div className="controls">
-					<input
-						type="number"
-						min="1"
-						max="60"
-						value={duration}
-						onChange={(e) => setDuration(parseInt(e.target.value) || 1)}
-					/>
-					<span>seconds</span>
-					<button className="primary" onClick={createTimer}>
-						Create Timer
-					</button>
-				</div>
-			</div>
-
-			<div className="demo-content">
-				<div className="timers-list">
-					{timerKeys.length === 0 && (
-						<p className="empty">No timers yet. Create one to test durable sleep!</p>
-					)}
-					{timerKeys.map((t) => (
-						<TimerCard key={t.id} timerId={t.id} name={t.name} durationMs={t.durationMs} />
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function TimerCard({
-	timerId,
-	name,
-	durationMs,
-}: {
-	timerId: string;
-	name: string;
-	durationMs: number;
-}) {
-	const actor = useActor({
-		name: "timer",
-		key: [timerId],
-		createWithInput: { name, durationMs },
-	});
-	const [timer, setTimer] = useState<Timer | null>(null);
-	const [remaining, setRemaining] = useState<number | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getTimer().then(setTimer);
-	}, [actor.connection]);
-
-	actor.useEvent("timerStarted", setTimer);
-	actor.useEvent("timerCompleted", setTimer);
-
-	useEffect(() => {
-		if (!timer) return;
-		if (timer.completedAt) {
-			setRemaining(0);
-			return;
-		}
-
-		const update = () => {
-			const elapsed = Date.now() - timer.startedAt;
-			const left = Math.max(0, timer.durationMs - elapsed);
-			setRemaining(left);
-		};
-
-		update();
-		const interval = setInterval(update, 100);
-		return () => clearInterval(interval);
-	}, [timer]);
-
-	if (!timer || remaining === null) return <div className="timer-card loading">Loading...</div>;
-
-	const isComplete = !!timer.completedAt;
-	const progress = isComplete
-		? 100
-		: ((timer.durationMs - remaining) / timer.durationMs) * 100;
-
-	return (
-		<div className={`timer-card ${isComplete ? "complete" : ""}`}>
-			<div className="timer-header">
-				<span className="timer-name">{timer.name}</span>
-				<span className={`timer-status ${isComplete ? "done" : "running"}`}>
-					{isComplete ? "Completed" : `${Math.ceil(remaining / 1000)}s`}
-				</span>
-			</div>
-			<div className="progress-bar">
-				<div className="progress-fill" style={{ width: `${progress}%` }} />
-			</div>
-		</div>
-	);
-}
-
-// ============================================================================
-// LOOPS DEMO - One actor per batch job
-// ============================================================================
-
-function LoopsDemo() {
-	const [jobKeys, setJobKeys] = usePersistedState<string[]>("workflow-sandbox:jobs", []);
-
-	const startJob = () => {
-		const jobId = `JOB-${Date.now().toString(36).toUpperCase()}`;
-		setJobKeys((prev) => [jobId, ...prev]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Loops Demo</h2>
-				<p>
-					Batch processing with persistent cursor state. Process 50 items in
-					batches of 5 - state persists across restarts.
-				</p>
-				<button className="primary" onClick={startJob}>
-					Start New Batch Job
-				</button>
-			</div>
-
-			<div className="demo-content">
-				<div className="jobs-list">
-					{jobKeys.length === 0 && (
-						<p className="empty">No batch jobs yet. Start one to see loop processing!</p>
-					)}
-					{jobKeys.map((jobId) => (
-						<BatchJobCard key={jobId} jobId={jobId} />
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function BatchJobCard({ jobId }: { jobId: string }) {
-	const actor = useActor({
-		name: "batch",
-		key: [jobId],
-		createWithInput: { totalItems: 50, batchSize: 5 },
-	});
-	const [job, setJob] = useState<BatchJob | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getJob().then(setJob);
-	}, [actor.connection]);
-
-	actor.useEvent("stateChanged", setJob);
-
-	if (!job) return <div className="job-card loading">Loading...</div>;
-
-	return (
-		<div className={`job-card ${job.status}`}>
-			<div className="job-header">
-				<span className="job-id">{job.id}</span>
-				<span className={`job-status ${job.status}`}>{job.status}</span>
-			</div>
-			<div className="batch-stats">
-				<div className="stat">
-					<span className="stat-value">{job.processedTotal}</span>
-					<span className="stat-label">Items</span>
-				</div>
-				<div className="stat">
-					<span className="stat-value">{job.batches.length}</span>
-					<span className="stat-label">Batches</span>
-				</div>
-			</div>
-			<div className="progress-bar large">
-				<div
-					className="progress-fill"
-					style={{ width: `${(job.processedTotal / job.totalItems) * 100}%` }}
-				/>
-			</div>
-		</div>
-	);
-}
-
-// ============================================================================
-// LISTEN DEMO - One actor per approval request
-// ============================================================================
-
-function ListenDemo() {
-	const [requestKeys, setRequestKeys] = usePersistedState<
-		{ id: string; title: string; description: string }[]
-	>("workflow-sandbox:requests", []);
-
-	const submitRequest = () => {
-		const requestId = crypto.randomUUID();
-		const title = `Request ${requestKeys.length + 1}`;
-		setRequestKeys((prev) => [
-			{ id: requestId, title, description: "Please approve this request" },
-			...prev,
-		]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Listen Demo</h2>
-				<p>
-					Approval workflow with 30-second timeout. Submit a request and
-					approve/reject it before it times out.
-				</p>
-				<button className="primary" onClick={submitRequest}>
-					Submit Request
-				</button>
-			</div>
-
-			<div className="demo-content">
-				<div className="requests-list">
-					{requestKeys.length === 0 && (
-						<p className="empty">No requests yet. Submit one to test listen!</p>
-					)}
-					{requestKeys.map((r) => (
-						<ApprovalRequestCard
-							key={r.id}
-							requestId={r.id}
-							title={r.title}
-							description={r.description}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function ApprovalRequestCard({
-	requestId,
-	title,
-	description,
-}: {
-	requestId: string;
-	title: string;
-	description: string;
-}) {
-	const actor = useActor({
-		name: "approval",
-		key: [requestId],
-		createWithInput: { title, description },
-	});
-	const [request, setRequest] = useState<ApprovalRequest | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getRequest().then(setRequest);
-	}, [actor.connection]);
-
-	actor.useEvent("requestCreated", setRequest);
-	actor.useEvent("requestUpdated", setRequest);
-
-	const getStatusColor = (status: ApprovalRequest["status"]) => {
-		switch (status) {
-			case "pending":
-				return "#ff9f0a";
-			case "approved":
-				return "#30d158";
-			case "rejected":
-				return "#ff3b30";
-			case "timeout":
-				return "#8e8e93";
-			default:
-				return "#8e8e93";
-		}
-	};
-
-	if (!request) return <div className="request-card loading">Loading...</div>;
-
-	const isPending = request.status === "pending" && !request.deciding;
-	const isDeciding = request.status === "pending" && request.deciding;
-
-	return (
-		<div className="request-card">
-			<div className="request-header">
-				<span className="request-title">{request.title}</span>
-				<span
-					className="status-badge"
-					style={{ backgroundColor: isDeciding ? "#007aff" : getStatusColor(request.status) }}
-				>
-					{isDeciding ? "processing..." : request.status}
-				</span>
-			</div>
-			{isPending && (
-				<RequestCountdown
-					request={request}
-					onApprove={(approver) => actor.connection?.approve(approver)}
-					onReject={(approver) => actor.connection?.reject(approver)}
-				/>
-			)}
-			{request.decidedBy && (
-				<div className="decided-by">Decided by: {request.decidedBy}</div>
-			)}
-		</div>
-	);
-}
-
-function RequestCountdown({
-	request,
-	onApprove,
-	onReject,
-}: {
-	request: ApprovalRequest;
-	onApprove: (approver: string) => void;
-	onReject: (approver: string) => void;
-}) {
-	const [remaining, setRemaining] = useState(30);
-
-	useEffect(() => {
-		const update = () => {
-			const elapsed = Date.now() - request.createdAt;
-			const left = Math.max(0, 30000 - elapsed);
-			setRemaining(Math.ceil(left / 1000));
-		};
-
-		update();
-		const interval = setInterval(update, 1000);
-		return () => clearInterval(interval);
-	}, [request.createdAt]);
-
-	return (
-		<div className="request-actions">
-			<span className="countdown">{remaining}s remaining</span>
-			<button className="approve" onClick={() => onApprove("Admin")}>
-				Approve
-			</button>
-			<button className="reject" onClick={() => onReject("Admin")}>
-				Reject
-			</button>
-		</div>
-	);
-}
-
-// ============================================================================
-// JOIN DEMO - Single dashboard actor
-// ============================================================================
-
-function JoinDemo() {
-	const actor = useActor({ name: "dashboard", key: ["main"] });
-	const [state, setState] = useState<DashboardState>({
-		data: null,
-		loading: false,
-		branches: { users: "pending", orders: "pending", metrics: "pending" },
-		lastRefresh: null,
-	});
-
-	useEffect(() => {
-		actor.connection?.getState().then(setState);
-	}, [actor.connection]);
-
-	actor.useEvent("stateChanged", setState);
-
-	const getBranchColor = (status: string) => {
-		switch (status) {
-			case "pending":
-				return "#8e8e93";
-			case "running":
-				return "#ff9f0a";
-			case "completed":
-				return "#30d158";
-			case "failed":
-				return "#ff3b30";
-			default:
-				return "#8e8e93";
-		}
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Join Demo</h2>
-				<p>
-					Parallel data fetching with join (wait-all). Fetch users, orders, and
-					metrics simultaneously.
-				</p>
-				<button
-					className="primary"
-					onClick={() => actor.connection?.refresh()}
-					disabled={state.loading}
-				>
-					{state.loading ? "Loading..." : "Refresh Dashboard"}
-				</button>
-			</div>
-
-			<div className="demo-content">
-				<div className="branches">
-					{(["users", "orders", "metrics"] as const).map((branch) => (
-						<div key={branch} className="branch">
-							<span
-								className="branch-dot"
-								style={{ backgroundColor: getBranchColor(state.branches[branch]) }}
-							/>
-							<span className="branch-name">{branch}</span>
-							<span className="branch-status">{state.branches[branch]}</span>
-						</div>
-					))}
-				</div>
-
-				{state.data && (
-					<div className="dashboard-data">
-						<div className="data-card">
-							<h3>Users</h3>
-							<div className="data-stat">{state.data.users.count}</div>
-							<div className="data-sub">
-								{state.data.users.activeToday} active today
-							</div>
-						</div>
-						<div className="data-card">
-							<h3>Orders</h3>
-							<div className="data-stat">{state.data.orders.count}</div>
-							<div className="data-sub">
-								${state.data.orders.revenue.toLocaleString()} revenue
-							</div>
-						</div>
-						<div className="data-card">
-							<h3>Metrics</h3>
-							<div className="data-stat">
-								{state.data.metrics.pageViews.toLocaleString()}
-							</div>
-							<div className="data-sub">page views</div>
-						</div>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
-
-// ============================================================================
-// RACE DEMO - One actor per race task
-// ============================================================================
-
-function RaceDemo() {
-	const [taskKeys, setTaskKeys] = usePersistedState<
-		{ id: string; workDurationMs: number; timeoutMs: number }[]
-	>("workflow-sandbox:raceTasks", []);
-	const [workDuration, setWorkDuration] = useState(3000);
-	const [timeout, setTimeoutVal] = useState(5000);
-
-	const runTask = () => {
-		const taskId = crypto.randomUUID();
-		setTaskKeys((prev) => [
-			{ id: taskId, workDurationMs: workDuration, timeoutMs: timeout },
-			...prev,
-		]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Race Demo</h2>
-				<p>
-					Race pattern - work vs timeout. If work completes before timeout, it
-					wins. Otherwise timeout wins.
-				</p>
-				<div className="controls race-controls">
-					<div className="control-group">
-						<label>Work Duration (ms)</label>
-						<input
-							type="number"
-							value={workDuration}
-							onChange={(e) => setWorkDuration(parseInt(e.target.value) || 0)}
-						/>
-					</div>
-					<div className="control-group">
-						<label>Timeout (ms)</label>
-						<input
-							type="number"
-							value={timeout}
-							onChange={(e) => setTimeoutVal(parseInt(e.target.value) || 0)}
-						/>
-					</div>
-					<button className="primary" onClick={runTask}>
-						Run Race
-					</button>
-				</div>
-			</div>
-
-			<div className="demo-content">
-				<div className="results-list">
-					{taskKeys.map((t) => (
-						<RaceTaskCard
-							key={t.id}
-							taskId={t.id}
-							workDurationMs={t.workDurationMs}
-							timeoutMs={t.timeoutMs}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function RaceTaskCard({
-	taskId,
-	workDurationMs,
-	timeoutMs,
-}: {
-	taskId: string;
-	workDurationMs: number;
-	timeoutMs: number;
-}) {
-	const actor = useActor({
-		name: "race",
-		key: [taskId],
-		createWithInput: { workDurationMs, timeoutMs },
-	});
-	const [task, setTask] = useState<RaceTask | null>(null);
-	const [elapsed, setElapsed] = useState(0);
-	const [showAnimation, setShowAnimation] = useState(true);
-
-	useEffect(() => {
-		actor.connection?.getTask().then(setTask);
-	}, [actor.connection]);
-
-	actor.useEvent("raceStarted", setTask);
-	actor.useEvent("raceCompleted", setTask);
-
-	// Update elapsed time for animation
-	useEffect(() => {
-		if (!task) return;
-
-		const updateElapsed = () => {
-			const now = task.completedAt ?? Date.now();
-			const newElapsed = now - task.startedAt;
-			setElapsed(newElapsed);
-
-			// Hide animation once both bars have completed
-			const maxDuration = Math.max(task.workDurationMs, task.timeoutMs);
-			if (newElapsed > maxDuration + 500) {
-				setShowAnimation(false);
-			}
-		};
-
-		updateElapsed();
-		const interval = setInterval(updateElapsed, 50);
-		return () => clearInterval(interval);
-	}, [task]);
-
-	if (!task) return <div className="result-card loading">Loading...</div>;
-
-	const workProgress = Math.min(100, (elapsed / task.workDurationMs) * 100);
-	const timeoutProgress = Math.min(100, (elapsed / task.timeoutMs) * 100);
-	const isCompleted = task.status !== "running";
-
-	// Show animation if still running or if recently completed
-	if (showAnimation) {
-		return (
-			<div className="active-race">
-				<div className="race-track">
-					<div className={`racer work ${isCompleted && task.status === "work_won" ? "winner" : ""}`}>
-						<span>Work ({task.workDurationMs}ms)</span>
-						<div className="racer-progress">
-							<div
-								className="racer-bar-fill"
-								style={{ width: `${workProgress}%` }}
-							/>
-						</div>
-						{isCompleted && task.status === "work_won" && <span className="winner-badge">Winner!</span>}
-					</div>
-					<div className={`racer timeout ${isCompleted && task.status === "timeout_won" ? "winner" : ""}`}>
-						<span>Timeout ({task.timeoutMs}ms)</span>
-						<div className="racer-progress">
-							<div
-								className="racer-bar-fill timeout-fill"
-								style={{ width: `${timeoutProgress}%` }}
-							/>
-						</div>
-						{isCompleted && task.status === "timeout_won" && <span className="winner-badge">Winner!</span>}
-					</div>
-				</div>
-				{isCompleted && (
-					<div className="race-result">
-						{task.status === "work_won" ? "Work completed first!" : "Timeout triggered!"}
-						<span className="actual-duration">{task.actualDurationMs}ms</span>
-					</div>
-				)}
-			</div>
-		);
-	}
-
-	return (
-		<div className={`result-card ${task.status === "work_won" ? "work" : "timeout"}`}>
-			<div className="result-winner">
-				{task.status === "work_won" ? "Work Won!" : "Timeout!"}
-			</div>
-			<div className="result-details">
-				Work: {task.workDurationMs}ms | Timeout: {task.timeoutMs}ms | Actual:{" "}
-				{task.actualDurationMs}ms
-			</div>
-		</div>
-	);
-}
-
-// ============================================================================
-// ROLLBACK DEMO - One actor per transaction
-// ============================================================================
-
-function RollbackDemo() {
-	const [txKeys, setTxKeys] = usePersistedState<
-		{ id: string; amount: number; shouldFail: boolean }[]
-	>("workflow-sandbox:transactions", []);
-
-	const processPayment = (shouldFail: boolean) => {
-		const txId = crypto.randomUUID();
-		const amount = Math.floor(50 + Math.random() * 200);
-		setTxKeys((prev) => [{ id: txId, amount, shouldFail }, ...prev]);
-	};
-
-	return (
-		<div className="demo">
-			<div className="demo-header">
-				<h2>Rollback Demo</h2>
-				<p>
-					Compensating transactions with rollback. Process payments with
-					automatic rollback on failure.
-				</p>
-				<div className="controls">
-					<button className="primary" onClick={() => processPayment(false)}>
-						Process Payment
-					</button>
-					<button className="danger" onClick={() => processPayment(true)}>
-						Process (Will Fail)
-					</button>
-				</div>
-			</div>
-
-			<div className="demo-content">
-				<div className="transactions-list">
-					{txKeys.length === 0 && (
-						<p className="empty">
-							No transactions yet. Process a payment to see rollback!
-						</p>
-					)}
-					{txKeys.map((t) => (
-						<TransactionCard
-							key={t.id}
-							txId={t.id}
-							amount={t.amount}
-							shouldFail={t.shouldFail}
-						/>
-					))}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function TransactionCard({
-	txId,
-	amount,
-	shouldFail,
-}: {
-	txId: string;
-	amount: number;
-	shouldFail: boolean;
-}) {
-	const actor = useActor({
-		name: "payment",
-		key: [txId],
-		createWithInput: { amount, shouldFail },
-	});
-	const [tx, setTx] = useState<Transaction | null>(null);
-
-	useEffect(() => {
-		actor.connection?.getTransaction().then(setTx);
-	}, [actor.connection]);
-
-	actor.useEvent("transactionStarted", setTx);
-	actor.useEvent("transactionUpdated", setTx);
-	actor.useEvent("transactionCompleted", setTx);
-	actor.useEvent("transactionFailed", setTx);
-
-	const getStepColor = (status: string) => {
-		switch (status) {
-			case "pending":
-				return "#8e8e93";
-			case "running":
-				return "#ff9f0a";
-			case "completed":
-				return "#30d158";
-			case "rolling_back":
-				return "#bf5af2";
-			case "rolled_back":
-				return "#bf5af2";
-			case "failed":
-				return "#ff3b30";
-			default:
-				return "#8e8e93";
-		}
-	};
-
-	const getStepIcon = (status: string) => {
-		switch (status) {
-			case "pending":
-				return "○";
-			case "completed":
-				return "✓";
-			case "rolled_back":
-				return "↩";
-			default:
-				return "○";
-		}
-	};
-
-	if (!tx) return <div className="transaction-card loading">Loading...</div>;
-
-	const isRollingBack = tx.status === "rolling_back";
-	const hasRollback = tx.steps.some((s) => s.status === "rolled_back");
-
-	return (
-		<div className={`transaction-card ${tx.status}`}>
-			<div className="tx-header">
-				<span className="tx-amount">${tx.amount}</span>
-				<span className={`tx-status ${tx.status}`}>
-					{tx.status === "rolling_back" ? "↩ rolling back" : tx.status}
-				</span>
-			</div>
-			{isRollingBack && (
-				<div className="rollback-banner">
-					Compensating actions in progress...
-				</div>
-			)}
-			<div className="tx-steps">
-				{tx.steps.map((step) => (
-					<div key={step.name} className={`tx-step ${step.status}`}>
-						<span
-							className={`step-icon ${step.status}`}
-							style={{ color: getStepColor(step.status) }}
-						>
-							{getStepIcon(step.status)}
-						</span>
-						<span className="step-name">{step.name}</span>
-						<span className={`step-status ${step.status}`}>
-							{step.status}
-							{step.status === "rolled_back" && " ↩"}
-						</span>
-					</div>
-				))}
-			</div>
-			{hasRollback && tx.status === "failed" && (
-				<div className="rollback-summary">
-					All completed steps have been rolled back
-				</div>
-			)}
-			{tx.error && <div className="error">{tx.error}</div>}
-		</div>
-	);
-}
diff --git a/examples/workflow-sandbox/frontend/main.tsx b/examples/workflow-sandbox/frontend/main.tsx
deleted file mode 100644
index 372f49c622..0000000000
--- a/examples/workflow-sandbox/frontend/main.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./App.tsx";
-
-const root = document.getElementById("root");
-if (!root) throw new Error("Root element not found");
-
-createRoot(root).render(
-	<StrictMode>
-		<App />
-	</StrictMode>
-);
diff --git a/examples/workflow-sandbox/index.html b/examples/workflow-sandbox/index.html
deleted file mode 100644
index 662a01901b..0000000000
--- a/examples/workflow-sandbox/index.html
+++ /dev/null
@@ -1,878 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Workflow Sandbox</title>
-    <style>
-        /* Reset */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        /* Base */
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
-            background: #000000;
-            min-height: 100vh;
-            color: #ffffff;
-            font-size: 16px;
-            line-height: 1.5;
-            padding: 24px;
-        }
-
-        /* Layout */
-        .app {
-            width: 100%;
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        header {
-            text-align: center;
-            padding: 24px;
-            margin-bottom: 24px;
-        }
-
-        header h1 {
-            font-size: 24px;
-            font-weight: 600;
-            color: #ffffff;
-            margin-bottom: 8px;
-        }
-
-        header p {
-            font-size: 14px;
-            color: #8e8e93;
-            font-weight: 500;
-        }
-
-        /* Tabs */
-        .tabs {
-            display: flex;
-            flex-wrap: wrap;
-            margin-bottom: 24px;
-            border-bottom: 1px solid #2c2c2e;
-        }
-
-        .tab {
-            padding: 12px 16px;
-            background: transparent;
-            border: none;
-            border-radius: 0;
-            border-bottom: 2px solid transparent;
-            margin-bottom: -1px;
-            cursor: pointer;
-            transition: color 200ms ease, border-color 200ms ease;
-            color: #8e8e93;
-            white-space: nowrap;
-        }
-
-        .tab.active {
-            color: #ffffff;
-            border-bottom-color: #ff4f00;
-        }
-
-        .tab-label {
-            font-weight: 600;
-            font-size: 14px;
-        }
-
-        .tab-desc {
-            display: none;
-        }
-
-        /* Main Container */
-        main {
-            background: #1c1c1e;
-            border-radius: 16px;
-            border: 1px solid #2c2c2e;
-            overflow: hidden;
-        }
-
-        /* Demo Sections */
-        .demo-header {
-            padding: 24px;
-            border-bottom: 1px solid #2c2c2e;
-        }
-
-        .demo-header h2 {
-            font-size: 24px;
-            font-weight: 600;
-            color: #ffffff;
-            margin-bottom: 8px;
-        }
-
-        .demo-header p {
-            font-size: 14px;
-            color: #8e8e93;
-            line-height: 1.6;
-            margin-bottom: 16px;
-        }
-
-        .demo-content {
-            padding: 24px;
-            background: #000000;
-        }
-
-        /* Buttons */
-        button {
-            padding: 12px 20px;
-            border: none;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            color: #ffffff;
-            background: #ff4f00;
-        }
-
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        button.primary {
-            background: #ff4f00;
-        }
-
-        button.secondary {
-            background: #2c2c2e;
-        }
-
-        button.danger {
-            background: #ff3b30;
-        }
-
-        button.approve {
-            background: #30d158;
-        }
-
-        button.reject {
-            background: #ff3b30;
-        }
-
-        /* Controls */
-        .controls {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        .controls input {
-            padding: 12px 16px;
-            border: 1px solid #3a3a3c;
-            border-radius: 8px;
-            font-size: 14px;
-            transition: all 200ms ease;
-            background: #2c2c2e;
-            color: #ffffff;
-            width: 80px;
-        }
-
-        .controls input:focus {
-            outline: none;
-            border-color: #ff4f00;
-            box-shadow: 0 0 0 3px rgba(255, 79, 0, 0.2);
-        }
-
-        .controls input::placeholder {
-            color: #6e6e73;
-        }
-
-        .controls span {
-            font-size: 14px;
-            color: #8e8e93;
-        }
-
-        .control-group {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-
-        .control-group label {
-            font-size: 12px;
-            font-weight: 500;
-            color: #8e8e93;
-        }
-
-        .control-group input {
-            width: 120px;
-        }
-
-        /* Lists */
-        .orders-list,
-        .timers-list,
-        .jobs-list,
-        .requests-list,
-        .transactions-list,
-        .results-list {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        /* Cards */
-        .order-card,
-        .timer-card,
-        .job-card,
-        .request-card,
-        .transaction-card,
-        .result-card {
-            background: #1c1c1e;
-            border: 1px solid #2c2c2e;
-            border-radius: 16px;
-            padding: 24px;
-        }
-
-        .order-header,
-        .timer-header,
-        .request-header,
-        .tx-header,
-        .job-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 16px;
-        }
-
-        .order-id,
-        .timer-name,
-        .request-title,
-        .job-id {
-            font-weight: 600;
-            font-size: 16px;
-            color: #ffffff;
-        }
-
-        /* Status Badges */
-        .status-badge {
-            padding: 4px 8px;
-            border-radius: 6px;
-            font-size: 12px;
-            text-transform: uppercase;
-            font-weight: 500;
-            letter-spacing: 0.5px;
-        }
-
-        /* Empty State */
-        .empty {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            color: #6e6e73;
-            padding: 48px 24px;
-            font-size: 14px;
-            line-height: 1.6;
-        }
-
-        /* Loading State */
-        .loading {
-            color: #8e8e93;
-            padding: 16px;
-            text-align: center;
-            font-size: 14px;
-        }
-
-        /* Order Progress */
-        .order-progress {
-            display: flex;
-            gap: 24px;
-        }
-
-        .step {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-            font-size: 14px;
-            color: #8e8e93;
-            font-weight: 500;
-        }
-
-        .step.done {
-            color: #30d158;
-        }
-
-        .step.active {
-            color: #ff4f00;
-        }
-
-        .step-indicator {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: #2c2c2e;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .step.done .step-indicator {
-            background: #30d158;
-            color: #ffffff;
-        }
-
-        .step.active .step-indicator {
-            background: #ff4f00;
-            color: #ffffff;
-        }
-
-        /* Error */
-        .error {
-            margin-top: 16px;
-            padding: 12px 16px;
-            background: rgba(255, 59, 48, 0.1);
-            border-left: 4px solid #ff3b30;
-            border-radius: 8px;
-            color: #ff3b30;
-            font-size: 12px;
-        }
-
-        /* Progress Bars */
-        .progress-bar {
-            height: 8px;
-            background: #2c2c2e;
-            border-radius: 4px;
-            overflow: hidden;
-        }
-
-        .progress-bar.large {
-            height: 12px;
-            border-radius: 6px;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: #ff4f00;
-            border-radius: inherit;
-            transition: width 300ms ease;
-        }
-
-        /* Timer Card */
-        .timer-card.complete {
-            opacity: 0.5;
-        }
-
-        .timer-status {
-            font-size: 16px;
-            font-weight: 600;
-        }
-
-        .timer-status.done {
-            color: #30d158;
-        }
-
-        .timer-status.running {
-            color: #ff4f00;
-        }
-
-        /* Job Status */
-        .job-status {
-            padding: 4px 8px;
-            border-radius: 6px;
-            font-size: 12px;
-            text-transform: uppercase;
-            font-weight: 500;
-        }
-
-        .job-status.running {
-            background: rgba(255, 79, 0, 0.2);
-            color: #ff4f00;
-        }
-
-        .job-status.completed {
-            background: rgba(48, 209, 88, 0.2);
-            color: #30d158;
-        }
-
-        /* Batch Stats */
-        .batch-stats {
-            display: flex;
-            gap: 48px;
-            margin-bottom: 24px;
-        }
-
-        .stat {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .stat-value {
-            font-size: 72px;
-            font-weight: 700;
-            color: #ff4f00;
-            line-height: 1;
-            font-variant-numeric: tabular-nums;
-        }
-
-        .stat-label {
-            font-size: 14px;
-            color: #8e8e93;
-            font-weight: 500;
-            margin-top: 8px;
-        }
-
-        /* Request Actions */
-        .request-actions {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-            margin-top: 16px;
-        }
-
-        .countdown {
-            font-size: 16px;
-            font-weight: 600;
-            color: #ff4f00;
-            margin-right: auto;
-        }
-
-        .decided-by {
-            font-size: 14px;
-            color: #8e8e93;
-            margin-top: 12px;
-        }
-
-        /* Dashboard Branches */
-        .branches {
-            display: flex;
-            gap: 24px;
-            margin-bottom: 24px;
-        }
-
-        .branch {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .branch-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            transition: background-color 200ms ease;
-        }
-
-        .branch-name {
-            font-weight: 600;
-            text-transform: capitalize;
-            font-size: 14px;
-        }
-
-        .branch-status {
-            font-size: 14px;
-            color: #8e8e93;
-        }
-
-        /* Dashboard Data */
-        .dashboard-data {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 12px;
-        }
-
-        .data-card {
-            background: #1c1c1e;
-            border: 1px solid #2c2c2e;
-            border-radius: 16px;
-            padding: 24px;
-        }
-
-        .data-card h3 {
-            font-size: 12px;
-            color: #8e8e93;
-            font-weight: 500;
-            margin-bottom: 12px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .data-stat {
-            font-size: 48px;
-            font-weight: 700;
-            color: #ff4f00;
-            line-height: 1;
-            font-variant-numeric: tabular-nums;
-        }
-
-        .data-sub {
-            font-size: 14px;
-            color: #8e8e93;
-            margin-top: 8px;
-        }
-
-        /* Race Controls */
-        .race-controls {
-            align-items: flex-end;
-        }
-
-        .race-controls input {
-            width: 100px;
-        }
-
-        /* Active Race */
-        .active-race {
-            margin-bottom: 12px;
-            padding: 24px;
-            background: #1c1c1e;
-            border: 1px solid #2c2c2e;
-            border-radius: 16px;
-        }
-
-        .race-track {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        .racer {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-        }
-
-        .racer span {
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .racer span:first-child {
-            width: 140px;
-            flex-shrink: 0;
-        }
-
-        .racer.winner span:first-child {
-            color: #30d158;
-        }
-
-        .racer.timeout.winner span:first-child {
-            color: #ff3b30;
-        }
-
-        .racer-progress {
-            flex: 1;
-            height: 24px;
-            background: #2c2c2e;
-            border-radius: 8px;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .racer-bar-fill {
-            height: 100%;
-            background: #30d158;
-            border-radius: 8px;
-            transition: width 50ms linear;
-        }
-
-        .racer-bar-fill.timeout-fill {
-            background: #ff3b30;
-        }
-
-        .winner-badge {
-            color: #30d158;
-            font-weight: 600;
-            margin-left: 12px;
-        }
-
-        .racer.timeout .winner-badge {
-            color: #ff3b30;
-        }
-
-        .race-result {
-            margin-top: 16px;
-            padding-top: 16px;
-            border-top: 1px solid #2c2c2e;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-weight: 600;
-            font-size: 16px;
-        }
-
-        .actual-duration {
-            font-size: 14px;
-            color: #8e8e93;
-            font-weight: 500;
-        }
-
-        /* Result Cards */
-        .result-card {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .result-card.work {
-            border-left: 4px solid #30d158;
-        }
-
-        .result-card.timeout {
-            border-left: 4px solid #ff3b30;
-        }
-
-        .result-winner {
-            font-weight: 600;
-            font-size: 16px;
-        }
-
-        .result-card.work .result-winner {
-            color: #30d158;
-        }
-
-        .result-card.timeout .result-winner {
-            color: #ff3b30;
-        }
-
-        .result-details {
-            font-size: 14px;
-            color: #8e8e93;
-        }
-
-        /* Transaction Cards */
-        .transaction-card.rolling_back,
-        .transaction-card.rolled_back {
-            border-left: 4px solid #bf5af2;
-        }
-
-        .transaction-card.completed {
-            border-left: 4px solid #30d158;
-        }
-
-        .transaction-card.failed {
-            border-left: 4px solid #ff3b30;
-        }
-
-        .tx-amount {
-            font-size: 24px;
-            font-weight: 700;
-        }
-
-        .tx-status {
-            padding: 4px 8px;
-            border-radius: 6px;
-            font-size: 12px;
-            text-transform: uppercase;
-            font-weight: 500;
-        }
-
-        .tx-status.pending {
-            background: #2c2c2e;
-            color: #8e8e93;
-        }
-
-        .tx-status.reserving,
-        .tx-status.charging,
-        .tx-status.completing {
-            background: rgba(255, 79, 0, 0.2);
-            color: #ff4f00;
-        }
-
-        .tx-status.completed {
-            background: rgba(48, 209, 88, 0.2);
-            color: #30d158;
-        }
-
-        .tx-status.rolling_back {
-            background: rgba(191, 90, 242, 0.2);
-            color: #bf5af2;
-        }
-
-        .tx-status.failed {
-            background: rgba(255, 59, 48, 0.2);
-            color: #ff3b30;
-        }
-
-        .tx-steps {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            margin-top: 16px;
-        }
-
-        .tx-step {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            font-size: 14px;
-        }
-
-        .step-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            flex-shrink: 0;
-        }
-
-        .step-icon {
-            width: 20px;
-            height: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            font-weight: 600;
-            flex-shrink: 0;
-        }
-
-        .step-icon.rolled_back {
-            animation: pulse-purple 1s ease-in-out;
-        }
-
-        @keyframes pulse-purple {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-
-        .step-name {
-            flex: 1;
-            font-weight: 500;
-        }
-
-        .step-status {
-            font-size: 12px;
-            color: #8e8e93;
-            text-transform: uppercase;
-        }
-
-        .step-status.rolled_back {
-            color: #bf5af2;
-        }
-
-        .tx-step.rolled_back {
-            opacity: 0.7;
-        }
-
-        .rollback-banner {
-            background: rgba(191, 90, 242, 0.15);
-            border: 1px solid rgba(191, 90, 242, 0.3);
-            border-radius: 8px;
-            padding: 12px 16px;
-            margin-bottom: 16px;
-            color: #bf5af2;
-            font-size: 14px;
-            font-weight: 500;
-            text-align: center;
-            animation: pulse-bg 1.5s ease-in-out infinite;
-        }
-
-        @keyframes pulse-bg {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
-        }
-
-        .rollback-summary {
-            margin-top: 12px;
-            padding: 12px 16px;
-            background: rgba(191, 90, 242, 0.1);
-            border-radius: 8px;
-            color: #bf5af2;
-            font-size: 13px;
-            text-align: center;
-        }
-
-        /* Info Box */
-        .info-box {
-            padding: 24px;
-            background: #2c2c2e;
-            border-radius: 12px;
-        }
-
-        .info-box p {
-            font-size: 14px;
-            color: #8e8e93;
-            line-height: 1.6;
-            margin-bottom: 8px;
-        }
-
-        .info-box p:last-child {
-            margin-bottom: 0;
-        }
-
-        /* Responsive */
-        @media (max-width: 640px) {
-            body {
-                padding: 16px;
-            }
-
-            header {
-                padding: 16px;
-            }
-
-            header h1 {
-                font-size: 20px;
-            }
-
-            .tabs {
-                gap: 8px;
-            }
-
-            .tab {
-                min-width: 100px;
-                padding: 12px;
-            }
-
-            .demo-header,
-            .demo-content {
-                padding: 16px;
-            }
-
-            .order-progress {
-                flex-wrap: wrap;
-                gap: 16px;
-            }
-
-            .batch-stats {
-                gap: 24px;
-            }
-
-            .stat-value {
-                font-size: 48px;
-            }
-
-            .branches {
-                flex-wrap: wrap;
-                gap: 16px;
-            }
-
-            .controls {
-                flex-direction: column;
-                align-items: stretch;
-            }
-
-            .control-group {
-                width: 100%;
-            }
-
-            .control-group input {
-                width: 100%;
-            }
-
-            button {
-                width: 100%;
-            }
-
-            .request-actions {
-                flex-direction: column;
-            }
-
-            .countdown {
-                margin-right: 0;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="/frontend/main.tsx"></script>
-</body>
-</html>
diff --git a/examples/workflow-sandbox/package.json b/examples/workflow-sandbox/package.json
deleted file mode 100644
index 032a106076..0000000000
--- a/examples/workflow-sandbox/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-	"name": "workflow-sandbox",
-	"version": "2.0.21",
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"check-types": "tsc --noEmit",
-		"build": "vite build && vite build --mode server",
-		"start": "srvx --static=public/ dist/server.js"
-	},
-	"dependencies": {
-		"@hono/node-server": "^1.19.7",
-		"@hono/node-ws": "^1.3.0",
-		"@rivetkit/react": "*",
-		"hono": "^4.11.3",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"rivetkit": "*",
-		"srvx": "^0.10.0"
-	},
-	"devDependencies": {
-		"@types/node": "^22.13.9",
-		"@types/react": "^18.2.0",
-		"@types/react-dom": "^18.2.0",
-		"@vitejs/plugin-react": "^4.2.0",
-		"tsx": "^3.12.7",
-		"typescript": "^5.5.2",
-		"vite": "^5.0.0",
-		"vite-plugin-srvx": "^1.0.0"
-	},
-	"stableVersion": "0.8.0",
-	"template": {
-		"technologies": ["react", "typescript"],
-		"tags": ["experimental"],
-		"frontendPort": 5173
-	},
-	"license": "MIT"
-}
diff --git a/examples/workflow-sandbox/src/actors.ts b/examples/workflow-sandbox/src/actors.ts
deleted file mode 100644
index 24d87fdad9..0000000000
--- a/examples/workflow-sandbox/src/actors.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-// Workflow Sandbox - Actor Registry
-// Each actor demonstrates a different workflow feature using actor-per-workflow pattern
-
-import { setup } from "rivetkit";
-
-// Import actors from individual files
-export { timer } from "./actors/timer.ts";
-export type { Timer, TimerInput } from "./actors/timer.ts";
-
-export { order } from "./actors/order.ts";
-export type { Order, OrderStatus } from "./actors/order.ts";
-
-export { batch } from "./actors/batch.ts";
-export type { BatchInfo, BatchJob, BatchJobInput } from "./actors/batch.ts";
-
-export { approval } from "./actors/approval.ts";
-export type {
-	ApprovalRequest,
-	ApprovalRequestInput,
-	RequestStatus,
-} from "./actors/approval.ts";
-
-export { dashboard } from "./actors/dashboard.ts";
-export type {
-	DashboardData,
-	DashboardState,
-	UserStats,
-	OrderStats,
-	MetricsStats,
-	BranchStatus,
-} from "./actors/dashboard.ts";
-
-export { race } from "./actors/race.ts";
-export type { RaceTask, RaceTaskInput } from "./actors/race.ts";
-
-export { payment } from "./actors/payment.ts";
-export type {
-	Transaction,
-	TransactionStep,
-	TransactionInput,
-} from "./actors/payment.ts";
-
-// Import for registry setup
-import { timer } from "./actors/timer.ts";
-import { order } from "./actors/order.ts";
-import { batch } from "./actors/batch.ts";
-import { approval } from "./actors/approval.ts";
-import { dashboard } from "./actors/dashboard.ts";
-import { race } from "./actors/race.ts";
-import { payment } from "./actors/payment.ts";
-
-// Registry setup
-export const registry = setup({
-	use: {
-		timer,
-		order,
-		batch,
-		approval,
-		dashboard,
-		race,
-		payment,
-	},
-});
diff --git a/examples/workflow-sandbox/src/actors/_helpers.ts b/examples/workflow-sandbox/src/actors/_helpers.ts
deleted file mode 100644
index 3c6eed304c..0000000000
--- a/examples/workflow-sandbox/src/actors/_helpers.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Type helper - cast loop context to access actor-specific properties
-// Only call these helpers INSIDE a step callback where state access is allowed
-// biome-ignore lint/suspicious/noExplicitAny: Workflow context typing workaround
-export type ActorLoopContext<S> = {
-	state: S;
-	broadcast: (name: string, ...args: unknown[]) => void;
-};
-
-// biome-ignore lint/suspicious/noExplicitAny: Workflow context typing workaround
-export function actorCtx<S>(ctx: unknown): ActorLoopContext<S> {
-	return ctx as any;
-}
diff --git a/examples/workflow-sandbox/src/actors/dashboard.ts b/examples/workflow-sandbox/src/actors/dashboard.ts
deleted file mode 100644
index 86887d466e..0000000000
--- a/examples/workflow-sandbox/src/actors/dashboard.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-// DASHBOARD (Join Demo)
-// Demonstrates: Parallel data fetching with join (wait-all)
-
-import { actor } from "rivetkit";
-import { Loop, workflow, workflowQueueName } from "rivetkit/workflow";
-import { actorCtx } from "./_helpers.ts";
-
-export type UserStats = {
-	count: number;
-	activeToday: number;
-	newThisWeek: number;
-};
-
-export type OrderStats = {
-	count: number;
-	revenue: number;
-	avgOrderValue: number;
-};
-
-export type MetricsStats = {
-	pageViews: number;
-	sessions: number;
-	bounceRate: number;
-};
-
-export type DashboardData = {
-	users: UserStats;
-	orders: OrderStats;
-	metrics: MetricsStats;
-	fetchedAt: number;
-};
-
-export type BranchStatus = "pending" | "running" | "completed" | "failed";
-
-export type DashboardState = {
-	data: DashboardData | null;
-	loading: boolean;
-	branches: {
-		users: BranchStatus;
-		orders: BranchStatus;
-		metrics: BranchStatus;
-	};
-	lastRefresh: number | null;
-};
-
-type State = DashboardState;
-
-const QUEUE_REFRESH = workflowQueueName("refresh");
-
-async function fetchUserStats(): Promise<UserStats> {
-	await new Promise((r) => setTimeout(r, 800 + Math.random() * 1200));
-	return {
-		count: Math.floor(1000 + Math.random() * 500),
-		activeToday: Math.floor(100 + Math.random() * 200),
-		newThisWeek: Math.floor(20 + Math.random() * 80),
-	};
-}
-
-async function fetchOrderStats(): Promise<OrderStats> {
-	await new Promise((r) => setTimeout(r, 600 + Math.random() * 1000));
-	const count = Math.floor(50 + Math.random() * 150);
-	const revenue = Math.floor(5000 + Math.random() * 15000);
-	return {
-		count,
-		revenue,
-		avgOrderValue: Math.round(revenue / count),
-	};
-}
-
-async function fetchMetricsStats(): Promise<MetricsStats> {
-	await new Promise((r) => setTimeout(r, 400 + Math.random() * 800));
-	return {
-		pageViews: Math.floor(10000 + Math.random() * 50000),
-		sessions: Math.floor(2000 + Math.random() * 8000),
-		bounceRate: Math.round(30 + Math.random() * 40),
-	};
-}
-
-export const dashboard = actor({
-	state: {
-		data: null as DashboardData | null,
-		loading: false,
-		branches: {
-			users: "pending" as BranchStatus,
-			orders: "pending" as BranchStatus,
-			metrics: "pending" as BranchStatus,
-		},
-		lastRefresh: null as number | null,
-	},
-
-	actions: {
-		refresh: async (c) => {
-			if (!c.state.loading) {
-				c.state.loading = true;
-				c.state.branches = {
-					users: "pending",
-					orders: "pending",
-					metrics: "pending",
-				};
-				c.broadcast("stateChanged", c.state);
-				await c.queue.send(QUEUE_REFRESH, {});
-			}
-		},
-
-		getState: (c): DashboardState => c.state,
-	},
-
-	run: workflow(async (ctx) => {
-		await ctx.loop({
-			name: "refresh-loop",
-			run: async (loopCtx) => {
-				const c = actorCtx<State>(loopCtx);
-
-				await loopCtx.listen("wait-refresh", "refresh");
-
-				ctx.log.info({ msg: "starting dashboard refresh" });
-
-				const results = await loopCtx.join("fetch-all", {
-					users: {
-						run: async (branchCtx) => {
-							const bc = actorCtx<State>(branchCtx);
-
-							await branchCtx.step("mark-running", async () => {
-								bc.state.branches.users = "running";
-								bc.broadcast("stateChanged", bc.state);
-							});
-
-							const data = await branchCtx.step("fetch-users", async () => {
-								return await fetchUserStats();
-							});
-
-							await branchCtx.step("mark-complete", async () => {
-								bc.state.branches.users = "completed";
-								bc.broadcast("stateChanged", bc.state);
-							});
-
-							return data;
-						},
-					},
-					orders: {
-						run: async (branchCtx) => {
-							const bc = actorCtx<State>(branchCtx);
-
-							await branchCtx.step("mark-running", async () => {
-								bc.state.branches.orders = "running";
-								bc.broadcast("stateChanged", bc.state);
-							});
-
-							const data = await branchCtx.step("fetch-orders", async () => {
-								return await fetchOrderStats();
-							});
-
-							await branchCtx.step("mark-complete", async () => {
-								bc.state.branches.orders = "completed";
-								bc.broadcast("stateChanged", bc.state);
-							});
-
-							return data;
-						},
-					},
-					metrics: {
-						run: async (branchCtx) => {
-							const bc = actorCtx<State>(branchCtx);
-
-							await branchCtx.step("mark-running", async () => {
-								bc.state.branches.metrics = "running";
-								bc.broadcast("stateChanged", bc.state);
-							});
-
-							const data = await branchCtx.step("fetch-metrics", async () => {
-								return await fetchMetricsStats();
-							});
-
-							await branchCtx.step("mark-complete", async () => {
-								bc.state.branches.metrics = "completed";
-								bc.broadcast("stateChanged", bc.state);
-							});
-
-							return data;
-						},
-					},
-				});
-
-				await loopCtx.step("save-data", async () => {
-					c.state.data = {
-						users: results.users,
-						orders: results.orders,
-						metrics: results.metrics,
-						fetchedAt: Date.now(),
-					};
-					c.state.loading = false;
-					c.state.lastRefresh = Date.now();
-					c.broadcast("stateChanged", c.state);
-					c.broadcast("refreshComplete", c.state.data);
-				});
-
-				ctx.log.info({ msg: "dashboard refresh complete" });
-
-				return Loop.continue(undefined);
-			},
-		});
-	}),
-});
diff --git a/examples/workflow-sandbox/src/actors/order.ts b/examples/workflow-sandbox/src/actors/order.ts
deleted file mode 100644
index 12b5344744..0000000000
--- a/examples/workflow-sandbox/src/actors/order.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-// ORDER PROCESSOR (Steps Demo)
-// Demonstrates: Sequential workflow steps with automatic retries
-// One actor per order - actor key is the order ID
-
-import { actor } from "rivetkit";
-import { Loop, workflow } from "rivetkit/workflow";
-import { actorCtx } from "./_helpers.ts";
-
-export type OrderStatus =
-	| "pending"
-	| "validating"
-	| "charging"
-	| "fulfilling"
-	| "completed"
-	| "failed";
-
-export type Order = {
-	id: string;
-	status: OrderStatus;
-	step: number;
-	error?: string;
-	createdAt: number;
-	completedAt?: number;
-};
-
-type State = Order;
-
-async function simulateWork(name: string, failChance = 0.1): Promise<void> {
-	await new Promise((resolve) =>
-		setTimeout(resolve, 500 + Math.random() * 1000)
-	);
-	if (Math.random() < failChance) {
-		throw new Error(`${name} failed (simulated)`);
-	}
-}
-
-export const order = actor({
-	createState: (c): Order => ({
-		id: c.key[0] as string,
-		status: "pending",
-		step: 0,
-		createdAt: Date.now(),
-	}),
-
-	actions: {
-		getOrder: (c): Order => c.state,
-	},
-
-	run: workflow(async (ctx) => {
-		await ctx.loop({
-			name: "process-order",
-			run: async (loopCtx) => {
-				const c = actorCtx<State>(loopCtx);
-
-				await loopCtx.step("validate", async () => {
-					ctx.log.info({ msg: "processing order", orderId: c.state.id });
-					c.state.status = "validating";
-					c.state.step = 1;
-					c.broadcast("orderUpdated", c.state);
-					await simulateWork("validation", 0.05);
-				});
-
-				await loopCtx.step("charge", async () => {
-					c.state.status = "charging";
-					c.state.step = 2;
-					c.broadcast("orderUpdated", c.state);
-					await simulateWork("payment", 0.1);
-				});
-
-				await loopCtx.step("fulfill", async () => {
-					c.state.status = "fulfilling";
-					c.state.step = 3;
-					c.broadcast("orderUpdated", c.state);
-					await simulateWork("fulfillment", 0.05);
-				});
-
-				await loopCtx.step("complete", async () => {
-					c.state.status = "completed";
-					c.state.step = 4;
-					c.state.completedAt = Date.now();
-					c.broadcast("orderUpdated", c.state);
-					ctx.log.info({ msg: "order completed", orderId: c.state.id });
-				});
-
-				return Loop.break(undefined);
-			},
-		});
-	}),
-});
diff --git a/examples/workflow-sandbox/src/actors/race.ts b/examples/workflow-sandbox/src/actors/race.ts
deleted file mode 100644
index 173055591c..0000000000
--- a/examples/workflow-sandbox/src/actors/race.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-// RACE RUNNER (Race Demo)
-// Demonstrates: Race (parallel first-wins) for timeout patterns
-// One actor per race task - actor key is the task ID
-
-import { actor } from "rivetkit";
-import { Loop, workflow } from "rivetkit/workflow";
-import { actorCtx } from "./_helpers.ts";
-
-export type RaceTask = {
-	id: string;
-	workDurationMs: number;
-	timeoutMs: number;
-	status: "running" | "work_won" | "timeout_won";
-	result?: string;
-	startedAt: number;
-	completedAt?: number;
-	actualDurationMs?: number;
-};
-
-type State = RaceTask;
-
-export type RaceTaskInput = {
-	workDurationMs?: number;
-	timeoutMs?: number;
-};
-
-export const race = actor({
-	createState: (c, input: RaceTaskInput): RaceTask => ({
-		id: c.key[0] as string,
-		workDurationMs: input?.workDurationMs ?? 2000,
-		timeoutMs: input?.timeoutMs ?? 3000,
-		status: "running",
-		startedAt: Date.now(),
-	}),
-
-	actions: {
-		getTask: (c): RaceTask => c.state,
-	},
-
-	run: workflow(async (ctx) => {
-		await ctx.loop({
-			name: "race-loop",
-			run: async (loopCtx) => {
-				const c = actorCtx<State>(loopCtx);
-
-				// Get durations inside a step since state is only available in steps
-				const { workDurationMs, timeoutMs, taskId } = await loopCtx.step(
-					"start-race",
-					async () => {
-						ctx.log.info({
-							msg: "starting race",
-							taskId: c.state.id,
-							workDurationMs: c.state.workDurationMs,
-							timeoutMs: c.state.timeoutMs,
-						});
-						c.broadcast("raceStarted", c.state);
-						return {
-							workDurationMs: c.state.workDurationMs,
-							timeoutMs: c.state.timeoutMs,
-							taskId: c.state.id,
-						};
-					}
-				);
-
-				const { winner, value } = await loopCtx.race("work-vs-timeout", [
-					{
-						name: "work",
-						run: async (branchCtx) => {
-							await branchCtx.sleep("simulate-work", workDurationMs);
-							return await branchCtx.step("complete-work", async () => {
-								return `Result for task ${taskId}`;
-							});
-						},
-					},
-					{
-						name: "timeout",
-						run: async (branchCtx) => {
-							await branchCtx.sleep("timeout-wait", timeoutMs);
-							return null;
-						},
-					},
-				]);
-
-				await loopCtx.step("save-result", async () => {
-					c.state.completedAt = Date.now();
-					c.state.actualDurationMs = c.state.completedAt - c.state.startedAt;
-
-					if (winner === "work") {
-						c.state.status = "work_won";
-						c.state.result = value as string;
-						ctx.log.info({
-							msg: "work completed before timeout",
-							taskId: c.state.id,
-							durationMs: c.state.actualDurationMs,
-						});
-					} else {
-						c.state.status = "timeout_won";
-						ctx.log.info({
-							msg: "timeout won the race",
-							taskId: c.state.id,
-							durationMs: c.state.actualDurationMs,
-						});
-					}
-
-					c.broadcast("raceCompleted", c.state);
-				});
-
-				return Loop.break(undefined);
-			},
-		});
-	}),
-});
diff --git a/examples/workflow-sandbox/src/actors/timer.ts b/examples/workflow-sandbox/src/actors/timer.ts
deleted file mode 100644
index d642dfa740..0000000000
--- a/examples/workflow-sandbox/src/actors/timer.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// TIMER (Sleep Demo)
-// Demonstrates: Durable sleep that survives restarts
-// One actor per timer - actor key is the timer ID
-
-import { actor } from "rivetkit";
-import { Loop, workflow } from "rivetkit/workflow";
-import { actorCtx } from "./_helpers.ts";
-
-export type Timer = {
-	id: string;
-	name: string;
-	durationMs: number;
-	startedAt: number;
-	completedAt?: number;
-};
-
-type State = Timer;
-
-export type TimerInput = {
-	name?: string;
-	durationMs?: number;
-};
-
-export const timer = actor({
-	createState: (c, input: TimerInput): Timer => ({
-		id: c.key[0] as string,
-		name: input?.name ?? "Timer",
-		durationMs: input?.durationMs ?? 10000,
-		startedAt: Date.now(),
-	}),
-
-	actions: {
-		getTimer: (c): Timer => c.state,
-	},
-
-	run: workflow(async (ctx) => {
-		await ctx.loop({
-			name: "timer-loop",
-			run: async (loopCtx) => {
-				const c = actorCtx<State>(loopCtx);
-
-				// Get duration inside a step since state is only available in steps
-				const durationMs = await loopCtx.step("start-timer", async () => {
-					ctx.log.info({
-						msg: "starting timer",
-						timerId: c.state.id,
-						durationMs: c.state.durationMs,
-					});
-					c.broadcast("timerStarted", c.state);
-					return c.state.durationMs;
-				});
-
-				await loopCtx.sleep("countdown", durationMs);
-
-				await loopCtx.step("complete-timer", async () => {
-					c.state.completedAt = Date.now();
-					c.broadcast("timerCompleted", c.state);
-					ctx.log.info({ msg: "timer completed", timerId: c.state.id });
-				});
-
-				return Loop.break(undefined);
-			},
-		});
-	}),
-
-	options: {
-		sleepTimeout: 1000,
-	},
-});
diff --git a/examples/workflow-sandbox/src/server.ts b/examples/workflow-sandbox/src/server.ts
deleted file mode 100644
index 8c065a6b5e..0000000000
--- a/examples/workflow-sandbox/src/server.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Hono } from "hono";
-import { registry } from "./actors.ts";
-
-const app = new Hono();
-
-app.all("/api/rivet/*", (c) => registry.handler(c.req.raw));
-
-export default app;
diff --git a/examples/workflow-sandbox/tsconfig.json b/examples/workflow-sandbox/tsconfig.json
deleted file mode 100644
index 6daa5df3fd..0000000000
--- a/examples/workflow-sandbox/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "esnext",
-		"lib": ["esnext", "dom"],
-		"jsx": "react-jsx",
-		"module": "esnext",
-		"moduleResolution": "bundler",
-		"types": ["node", "vite/client"],
-		"noEmit": true,
-		"strict": true,
-		"skipLibCheck": true,
-		"allowImportingTsExtensions": true,
-		"rewriteRelativeImportExtensions": true
-	},
-	"include": ["src/**/*", "frontend/**/*"]
-}
diff --git a/examples/workflow-sandbox/turbo.json b/examples/workflow-sandbox/turbo.json
deleted file mode 100644
index c5e71016d3..0000000000
--- a/examples/workflow-sandbox/turbo.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-	"$schema": "https://turbo.build/schema.json",
-	"extends": ["//"],
-	"tasks": {
-		"build": {
-			"dependsOn": ["@rivetkit/react#build", "rivetkit#build"]
-		}
-	}
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 76894e0b7c..a720dd5578 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2182,104 +2182,6 @@ importers:
         specifier: ^3.1.1
         version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
 
-  examples/queue-sandbox:
-    dependencies:
-      '@hono/node-server':
-        specifier: ^1.19.7
-        version: 1.19.9(hono@4.11.3)
-      '@hono/node-ws':
-        specifier: ^1.2.0
-        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
-      '@rivetkit/react':
-        specifier: workspace:*
-        version: link:../../rivetkit-typescript/packages/react
-      hono:
-        specifier: ^4.11.3
-        version: 4.11.3
-      react:
-        specifier: 19.1.0
-        version: 19.1.0
-      react-dom:
-        specifier: 19.1.0
-        version: 19.1.0(react@19.1.0)
-      rivetkit:
-        specifier: workspace:*
-        version: link:../../rivetkit-typescript/packages/rivetkit
-      srvx:
-        specifier: ^0.10.0
-        version: 0.10.0
-    devDependencies:
-      '@types/node':
-        specifier: ^22.13.9
-        version: 22.19.5
-      '@types/react':
-        specifier: ^19
-        version: 19.2.2
-      '@types/react-dom':
-        specifier: ^19
-        version: 19.2.2(@types/react@19.2.2)
-      '@vitejs/plugin-react':
-        specifier: ^4.2.0
-        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
-      tsx:
-        specifier: ^3.12.7
-        version: 3.14.0
-      typescript:
-        specifier: ^5.5.2
-        version: 5.9.3
-      vite:
-        specifier: ^5.0.0
-        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
-      vite-plugin-srvx:
-        specifier: ^1.0.0
-        version: 1.0.0(srvx@0.10.0)(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
-
-  examples/queue-sandbox-vercel:
-    dependencies:
-      '@hono/node-server':
-        specifier: ^1.19.7
-        version: 1.19.9(hono@4.11.3)
-      '@hono/node-ws':
-        specifier: ^1.2.0
-        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
-      '@rivetkit/react':
-        specifier: workspace:*
-        version: link:../../rivetkit-typescript/packages/react
-      hono:
-        specifier: ^4.11.3
-        version: 4.11.3
-      react:
-        specifier: 19.1.0
-        version: 19.1.0
-      react-dom:
-        specifier: 19.1.0
-        version: 19.1.0(react@19.1.0)
-      rivetkit:
-        specifier: workspace:*
-        version: link:../../rivetkit-typescript/packages/rivetkit
-    devDependencies:
-      '@types/node':
-        specifier: ^22.13.9
-        version: 22.19.5
-      '@types/react':
-        specifier: ^19
-        version: 19.2.2
-      '@types/react-dom':
-        specifier: ^19
-        version: 19.2.2(@types/react@19.2.2)
-      '@vitejs/plugin-react':
-        specifier: ^4.2.0
-        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
-      tsx:
-        specifier: ^3.12.7
-        version: 3.14.0
-      typescript:
-        specifier: ^5.5.2
-        version: 5.9.3
-      vite:
-        specifier: ^5.0.0
-        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
-
   examples/raw-fetch-handler:
     dependencies:
       '@hono/node-server':
@@ -2708,6 +2610,70 @@ importers:
         specifier: ^3.1.1
         version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
 
+  examples/sandbox:
+    dependencies:
+      '@ai-sdk/openai':
+        specifier: ^0.0.66
+        version: 0.0.66(zod@3.25.76)
+      '@hono/node-server':
+        specifier: ^1.19.7
+        version: 1.19.9(hono@4.11.3)
+      '@hono/node-ws':
+        specifier: ^1.3.0
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
+      '@rivetkit/react':
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/react
+      ai:
+        specifier: ^4.0.38
+        version: 4.3.19(react@19.1.0)(zod@3.25.76)
+      fdb-tuple:
+        specifier: ^1.0.0
+        version: 1.0.0
+      hono:
+        specifier: ^4.11.3
+        version: 4.11.3
+      react:
+        specifier: 19.1.0
+        version: 19.1.0
+      react-dom:
+        specifier: 19.1.0
+        version: 19.1.0(react@19.1.0)
+      rivetkit:
+        specifier: workspace:*
+        version: link:../../rivetkit-typescript/packages/rivetkit
+      srvx:
+        specifier: ^0.10.0
+        version: 0.10.0
+      zod:
+        specifier: ^3.25.69
+        version: 3.25.76
+    devDependencies:
+      '@types/node':
+        specifier: ^22.13.9
+        version: 22.19.5
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+      tsx:
+        specifier: ^3.12.7
+        version: 3.14.0
+      typescript:
+        specifier: ^5.5.2
+        version: 5.9.3
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
+      vite-plugin-srvx:
+        specifier: ^1.0.0
+        version: 1.0.0(srvx@0.10.0)(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
+
   examples/sandbox-coding-agent:
     dependencies:
       '@hono/node-server':
@@ -2733,7 +2699,7 @@ importers:
         version: link:../../rivetkit-typescript/packages/rivetkit
       sandbox-agent:
         specifier: ^0.1.5
-        version: 0.1.5
+        version: 0.1.6
       srvx:
         specifier: ^0.10.0
         version: 0.10.0
@@ -2791,7 +2757,7 @@ importers:
         version: link:../../rivetkit-typescript/packages/rivetkit
       sandbox-agent:
         specifier: ^0.1.5
-        version: 0.1.5
+        version: 0.1.6
     devDependencies:
       '@types/node':
         specifier: ^22.13.9
@@ -2926,10 +2892,10 @@ importers:
     dependencies:
       '@hono/node-server':
         specifier: ^1.18.2
-        version: 1.19.1(hono@4.11.3)
+        version: 1.19.9(hono@4.11.3)
       '@hono/node-ws':
         specifier: ^1.1.1
-        version: 1.2.0(@hono/node-server@1.19.1(hono@4.11.3))(hono@4.11.3)
+        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
       drizzle-kit:
         specifier: ^0.31.2
         version: 0.31.5
@@ -2939,7 +2905,7 @@ importers:
     devDependencies:
       '@types/node':
         specifier: ^22.13.9
-        version: 22.19.1
+        version: 22.19.5
       rivetkit:
         specifier: workspace:*
         version: link:../../rivetkit-typescript/packages/rivetkit
@@ -2954,7 +2920,7 @@ importers:
     devDependencies:
       '@types/node':
         specifier: ^22.13.9
-        version: 22.19.1
+        version: 22.19.5
       rivetkit:
         specifier: workspace:*
         version: link:../../rivetkit-typescript/packages/rivetkit
@@ -3256,104 +3222,6 @@ importers:
         specifier: ^5.5.2
         version: 5.9.3
 
-  examples/workflow-sandbox:
-    dependencies:
-      '@hono/node-server':
-        specifier: ^1.19.7
-        version: 1.19.9(hono@4.11.3)
-      '@hono/node-ws':
-        specifier: ^1.3.0
-        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
-      '@rivetkit/react':
-        specifier: workspace:*
-        version: link:../../rivetkit-typescript/packages/react
-      hono:
-        specifier: ^4.11.3
-        version: 4.11.3
-      react:
-        specifier: 19.1.0
-        version: 19.1.0
-      react-dom:
-        specifier: 19.1.0
-        version: 19.1.0(react@19.1.0)
-      rivetkit:
-        specifier: workspace:*
-        version: link:../../rivetkit-typescript/packages/rivetkit
-      srvx:
-        specifier: ^0.10.0
-        version: 0.10.0
-    devDependencies:
-      '@types/node':
-        specifier: ^22.13.9
-        version: 22.19.5
-      '@types/react':
-        specifier: ^19
-        version: 19.2.2
-      '@types/react-dom':
-        specifier: ^19
-        version: 19.2.2(@types/react@19.2.2)
-      '@vitejs/plugin-react':
-        specifier: ^4.2.0
-        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
-      tsx:
-        specifier: ^3.12.7
-        version: 3.14.0
-      typescript:
-        specifier: ^5.5.2
-        version: 5.9.3
-      vite:
-        specifier: ^5.0.0
-        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
-      vite-plugin-srvx:
-        specifier: ^1.0.0
-        version: 1.0.0(srvx@0.10.0)(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
-
-  examples/workflow-sandbox-vercel:
-    dependencies:
-      '@hono/node-server':
-        specifier: ^1.19.7
-        version: 1.19.9(hono@4.11.3)
-      '@hono/node-ws':
-        specifier: ^1.3.0
-        version: 1.3.0(@hono/node-server@1.19.9(hono@4.11.3))(hono@4.11.3)
-      '@rivetkit/react':
-        specifier: workspace:*
-        version: link:../../rivetkit-typescript/packages/react
-      hono:
-        specifier: ^4.11.3
-        version: 4.11.3
-      react:
-        specifier: 19.1.0
-        version: 19.1.0
-      react-dom:
-        specifier: 19.1.0
-        version: 19.1.0(react@19.1.0)
-      rivetkit:
-        specifier: workspace:*
-        version: link:../../rivetkit-typescript/packages/rivetkit
-    devDependencies:
-      '@types/node':
-        specifier: ^22.13.9
-        version: 22.19.5
-      '@types/react':
-        specifier: ^19
-        version: 19.2.2
-      '@types/react-dom':
-        specifier: ^19
-        version: 19.2.2(@types/react@19.2.2)
-      '@vitejs/plugin-react':
-        specifier: ^4.2.0
-        version: 4.7.0(vite@5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1))
-      tsx:
-        specifier: ^3.12.7
-        version: 3.14.0
-      typescript:
-        specifier: ^5.5.2
-        version: 5.9.3
-      vite:
-        specifier: ^5.0.0
-        version: 5.4.20(@types/node@22.19.5)(less@4.4.1)(lightningcss@1.30.2)(sass@1.93.2)(stylus@0.62.0)(terser@5.44.1)
-
   frontend:
     dependencies:
       '@clerk/clerk-js':
@@ -9257,6 +9125,9 @@ packages:
   '@rushstack/ts-command-line@5.1.2':
     resolution: {integrity: sha512-jn0EnSefYrkZDrBGd6KGuecL84LI06DgzL4hVQ46AUijNBt2nRU/ST4HhrfII/w91siCd1J/Okvxq/BS75Me/A==}
 
+  '@sandbox-agent/cli-shared@0.1.6':
+    resolution: {integrity: sha512-csBpzJHBOhUYD1SE7VA13bJsZ5sJuE+cJvQHQuF1mhw9KJIlgKnmAJ3fIzbtspFdO3qorSYyYB6j6y1Z43Yy/g==}
+
   '@scure/base@1.2.6':
     resolution: {integrity: sha512-g/nm5FgUa//MCj1gV09zTJTaM6KBAHqLN907YVQqf7zC49+DcO4B1so4ZX07Ef10Twr6nuqYEH9GEggFXA4Fmg==}
 
@@ -15573,8 +15444,8 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sandbox-agent@0.1.5:
-    resolution: {integrity: sha512-iBEC+sSDsvg52y97c+RJEZ4aC/ZR2bduBJHJd4mFS0KQ8OOjNLylU08QnXRg7f4W/XXRnJN/THt6nBt8th0RSQ==}
+  sandbox-agent@0.1.6:
+    resolution: {integrity: sha512-eoGqE5GCk1vHMf7yhtTVS2DxWsBh+Xk1E4fbi9GTo0zn5Rl9mxrU/fcHD6OLG+35/ObmqXowuXkHcLuGIz5SvA==}
 
   sass@1.93.2:
     resolution: {integrity: sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==}
@@ -17492,12 +17363,27 @@ snapshots:
       '@ai-sdk/provider-utils': 2.2.8(zod@4.1.13)
       zod: 4.1.13
 
+  '@ai-sdk/openai@0.0.66(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 0.0.24
+      '@ai-sdk/provider-utils': 1.0.20(zod@3.25.76)
+      zod: 3.25.76
+
   '@ai-sdk/openai@0.0.66(zod@4.1.13)':
     dependencies:
       '@ai-sdk/provider': 0.0.24
       '@ai-sdk/provider-utils': 1.0.20(zod@4.1.13)
       zod: 4.1.13
 
+  '@ai-sdk/provider-utils@1.0.20(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 0.0.24
+      eventsource-parser: 1.1.2
+      nanoid: 3.3.6
+      secure-json-parse: 2.7.0
+    optionalDependencies:
+      zod: 3.25.76
+
   '@ai-sdk/provider-utils@1.0.20(zod@4.1.13)':
     dependencies:
       '@ai-sdk/provider': 0.0.24
@@ -17507,6 +17393,13 @@ snapshots:
     optionalDependencies:
       zod: 4.1.13
 
+  '@ai-sdk/provider-utils@2.2.8(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      nanoid: 3.3.11
+      secure-json-parse: 2.7.0
+      zod: 3.25.76
+
   '@ai-sdk/provider-utils@2.2.8(zod@4.1.13)':
     dependencies:
       '@ai-sdk/provider': 1.1.3
@@ -17522,6 +17415,16 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
+  '@ai-sdk/react@1.2.12(react@19.1.0)(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
+      react: 19.1.0
+      swr: 2.3.4(react@19.1.0)
+      throttleit: 2.1.0
+    optionalDependencies:
+      zod: 3.25.76
+
   '@ai-sdk/react@1.2.12(react@19.1.0)(zod@4.1.13)':
     dependencies:
       '@ai-sdk/provider-utils': 2.2.8(zod@4.1.13)
@@ -17532,6 +17435,13 @@ snapshots:
     optionalDependencies:
       zod: 4.1.13
 
+  '@ai-sdk/ui-utils@1.2.11(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.1(zod@3.25.76)
+
   '@ai-sdk/ui-utils@1.2.11(zod@4.1.13)':
     dependencies:
       '@ai-sdk/provider': 1.1.3
@@ -19986,10 +19896,6 @@ snapshots:
     dependencies:
       hono: 4.11.3
 
-  '@hono/node-server@1.19.1(hono@4.11.3)':
-    dependencies:
-      hono: 4.11.3
-
   '@hono/node-server@1.19.1(hono@4.9.8)':
     dependencies:
       hono: 4.9.8
@@ -20011,15 +19917,6 @@ snapshots:
       hono: 4.9.8
     optional: true
 
-  '@hono/node-ws@1.2.0(@hono/node-server@1.19.1(hono@4.11.3))(hono@4.11.3)':
-    dependencies:
-      '@hono/node-server': 1.19.1(hono@4.11.3)
-      hono: 4.11.3
-      ws: 8.18.3
-    transitivePeerDependencies:
-      - bufferutil
-      - utf-8-validate
-
   '@hono/node-ws@1.2.0(@hono/node-server@1.19.1(hono@4.9.8))(hono@4.9.8)':
     dependencies:
       '@hono/node-server': 1.19.1(hono@4.9.8)
@@ -22418,6 +22315,8 @@ snapshots:
       - '@types/node'
     optional: true
 
+  '@sandbox-agent/cli-shared@0.1.6': {}
+
   '@scure/base@1.2.6': {}
 
   '@scure/bip32@1.7.0':
@@ -23855,6 +23754,18 @@ snapshots:
     dependencies:
       humanize-ms: 1.2.1
 
+  ai@4.3.19(react@19.1.0)(zod@3.25.76):
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
+      '@ai-sdk/react': 1.2.12(react@19.1.0)(zod@3.25.76)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
+      '@opentelemetry/api': 1.9.0
+      jsondiffpatch: 0.6.0
+      zod: 3.25.76
+    optionalDependencies:
+      react: 19.1.0
+
   ai@4.3.19(react@19.1.0)(zod@4.1.13):
     dependencies:
       '@ai-sdk/provider': 1.1.3
@@ -28574,7 +28485,7 @@ snapshots:
   needle@3.3.1:
     dependencies:
       iconv-lite: 0.6.3
-      sax: 1.4.4
+      sax: 1.4.3
     optional: true
 
   negotiator@0.6.3: {}
@@ -30213,7 +30124,9 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sandbox-agent@0.1.5: {}
+  sandbox-agent@0.1.6:
+    dependencies:
+      '@sandbox-agent/cli-shared': 0.1.6
 
   sass@1.93.2:
     dependencies:
diff --git a/rivetkit-typescript/packages/rivetkit/src/actor/instance/mod.ts b/rivetkit-typescript/packages/rivetkit/src/actor/instance/mod.ts
index df74cce10c..9013c9f489 100644
--- a/rivetkit-typescript/packages/rivetkit/src/actor/instance/mod.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/actor/instance/mod.ts
@@ -163,6 +163,7 @@ export class ActorInstance<S, CP, CS, V, I, DB extends AnyDatabaseProvider> {
 	// MARK: - Constructor
 	constructor(config: ActorConfig<S, CP, CS, V, I, DB>) {
 		this.#config = config;
+		this.#inspector = new ActorInspector(this);
 		this.actorContext = new ActorContext(this);
 		this.#inspector = new ActorInspector(this);
 	}