diff --git a/examples/ai-agent/src/frontend/App.tsx b/examples/ai-agent/src/frontend/App.tsx
index 3633f38f22..f2ed2ef4e5 100644
--- a/examples/ai-agent/src/frontend/App.tsx
+++ b/examples/ai-agent/src/frontend/App.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { registry } from "../backend/registry";
 import type { Message } from "../backend/types";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 export function App() {
 	const aiAgent = useActor({
diff --git a/examples/better-auth-external-db/README.md b/examples/better-auth-external-db/README.md
index 9e8aff5b92..72f96bb6b6 100644
--- a/examples/better-auth-external-db/README.md
+++ b/examples/better-auth-external-db/README.md
@@ -27,7 +27,7 @@ npm install
 npm run dev
 ```
 
-The database migrations will run automatically on startup. Open your browser to `http://localhost:5173` to see the frontend and the backend will be running on `http://localhost:8080`.
+The database migrations will run automatically on startup. Open your browser to `http://localhost:5173` to see the frontend and the backend will be running on `http://localhost:6420`.
 
 ## Features
 
diff --git a/examples/better-auth-external-db/src/frontend/auth-client.ts b/examples/better-auth-external-db/src/frontend/auth-client.ts
index 64c8a7b5a5..dab0b8fd8d 100644
--- a/examples/better-auth-external-db/src/frontend/auth-client.ts
+++ b/examples/better-auth-external-db/src/frontend/auth-client.ts
@@ -1,5 +1,5 @@
 import { createAuthClient } from "better-auth/react";
 
 export const authClient = createAuthClient({
-	baseURL: "http://localhost:8080",
+	baseURL: "http://localhost:6420",
 });
diff --git a/examples/better-auth-external-db/src/frontend/components/ChatRoom.tsx b/examples/better-auth-external-db/src/frontend/components/ChatRoom.tsx
index bba4c8c398..83c3836887 100644
--- a/examples/better-auth-external-db/src/frontend/components/ChatRoom.tsx
+++ b/examples/better-auth-external-db/src/frontend/components/ChatRoom.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import type { registry } from "../../backend/registry";
 import { authClient } from "../auth-client";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 interface ChatRoomProps {
 	user: { id: string; email: string };
diff --git a/examples/counter-serverless/src/server.ts b/examples/counter-serverless/src/server.ts
index 9dc17c0304..79472a223b 100644
--- a/examples/counter-serverless/src/server.ts
+++ b/examples/counter-serverless/src/server.ts
@@ -2,5 +2,5 @@ import { registry } from "./registry";
 
 registry.start({
 	runnerKind: "serverless",
-	autoConfigureServerless: { url: "http://localhost:8080" },
+	autoConfigureServerless: { url: "http://localhost:6420" },
 });
diff --git a/examples/crdt/src/frontend/App.tsx b/examples/crdt/src/frontend/App.tsx
index 26e4942a61..506202babe 100644
--- a/examples/crdt/src/frontend/App.tsx
+++ b/examples/crdt/src/frontend/App.tsx
@@ -4,7 +4,7 @@ import * as Y from "yjs";
 import { applyUpdate, encodeStateAsUpdate } from "yjs";
 import type { registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 function YjsEditor({ documentId }: { documentId: string }) {
 	const yjsDocument = useActor({
diff --git a/examples/database/src/frontend/App.tsx b/examples/database/src/frontend/App.tsx
index 754bc2673d..23930c26d6 100644
--- a/examples/database/src/frontend/App.tsx
+++ b/examples/database/src/frontend/App.tsx
@@ -2,7 +2,7 @@ import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { Note, registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 function NotesApp({ userId }: { userId: string }) {
 	const [notes, setNotes] = useState<Note[]>([]);
diff --git a/examples/deno/scripts/connect.ts b/examples/deno/scripts/connect.ts
index ca63be72e3..f6e6f3f5d6 100644
--- a/examples/deno/scripts/connect.ts
+++ b/examples/deno/scripts/connect.ts
@@ -2,7 +2,7 @@ import { createClient } from "rivetkit/client";
 import type { Registry } from "../src/registry.ts";
 
 async function main() {
-	const client = createClient<Registry>("http://localhost:8080");
+	const client = createClient<Registry>("http://localhost:6420");
 
 	const counter = client.counter.getOrCreate().connect();
 
diff --git a/examples/deno/src/server.ts b/examples/deno/src/server.ts
index 40f8a5440c..b4c18e457c 100644
--- a/examples/deno/src/server.ts
+++ b/examples/deno/src/server.ts
@@ -4,7 +4,7 @@ import { registry } from "./registry.ts";
 const { fetch } = registry.start({
 	// Deno requires using Deno.serve
 	disableDefaultServer: true,
-	overrideServerAddress: "http://localhost:8080",
+	overrideServerAddress: "http://localhost:6420",
 	// Specify Deno-specific upgradeWebSocket
 	getUpgradeWebSocket: () => upgradeWebSocket,
 });
diff --git a/examples/elysia/src/server.ts b/examples/elysia/src/server.ts
index a8a48b60d8..17c57dc6e3 100644
--- a/examples/elysia/src/server.ts
+++ b/examples/elysia/src/server.ts
@@ -16,4 +16,4 @@ new Elysia()
 	})
 	.listen(8080);
 
-console.log("Listening at http://localhost:8080");
+console.log("Listening at http://localhost:6420");
diff --git a/examples/express/src/server.ts b/examples/express/src/server.ts
index a53eccbefb..3ad4600907 100644
--- a/examples/express/src/server.ts
+++ b/examples/express/src/server.ts
@@ -18,7 +18,7 @@ app.post("/increment/:name", async (req, res) => {
 });
 
 app.listen(8080, () => {
-	console.log("Listening at http://localhost:8080");
+	console.log("Listening at http://localhost:6420");
 });
 
 export default app;
diff --git a/examples/freestyle/src/backend/server.ts b/examples/freestyle/src/backend/server.ts
index 1d69ebef6f..ef7804eda0 100644
--- a/examples/freestyle/src/backend/server.ts
+++ b/examples/freestyle/src/backend/server.ts
@@ -9,7 +9,7 @@ const serverOutput = registry.start({
 	disableDefaultServer: true,
 	basePath: "/api",
 	getUpgradeWebSocket: () => upgradeWebSocket,
-	overrideServerAddress: `${process.env.FREESTYLE_ENDPOINT ?? "http://localhost:8080"}/api`,
+	overrideServerAddress: `${process.env.FREESTYLE_ENDPOINT ?? "http://localhost:6420"}/api`,
 	cors: {
 		origin: process.env.FREESTYLE_ENDPOINT ?? "http://localhost:5173",
 		credentials: true,
diff --git a/examples/freestyle/src/frontend/App.tsx b/examples/freestyle/src/frontend/App.tsx
index f8d8e17b6a..354ebb8116 100644
--- a/examples/freestyle/src/frontend/App.tsx
+++ b/examples/freestyle/src/frontend/App.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import type { Message, registry } from "../backend/registry";
 
 const { useActor } = createRivetKit<typeof registry>({
-	endpoint: import.meta.env.VITE_RIVET_ENDPOINT ?? "http://localhost:8080/api",
+	endpoint: import.meta.env.VITE_RIVET_ENDPOINT ?? "http://localhost:6420/api",
 	namespace: import.meta.env.VITE_RIVET_NAMESPACE,
 	runnerName: import.meta.env.VITE_RIVET_RUNNER_NAME ?? "freestyle-runner",
 });
diff --git a/examples/game/src/frontend/App.tsx b/examples/game/src/frontend/App.tsx
index 8eff9abad6..6a080c8920 100644
--- a/examples/game/src/frontend/App.tsx
+++ b/examples/game/src/frontend/App.tsx
@@ -2,7 +2,7 @@ import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useRef, useState } from "react";
 import type { Player, registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 export function App() {
 	const [players, setPlayers] = useState<Player[]>([]);
diff --git a/examples/hono-bun/README.md b/examples/hono-bun/README.md
index 9638b7bde1..0616b05911 100644
--- a/examples/hono-bun/README.md
+++ b/examples/hono-bun/README.md
@@ -33,7 +33,7 @@ Open your browser to [http://localhost:5173](http://localhost:5173) to see the c
 You can also test the server directly by running:
 
 ```sh
-curl -X POST http://localhost:8080/increment/test
+curl -X POST http://localhost:6420/increment/test
 ```
 
 ## License
diff --git a/examples/hono-bun/scripts/connect.ts b/examples/hono-bun/scripts/connect.ts
index 8ce6b7516f..b272e72002 100644
--- a/examples/hono-bun/scripts/connect.ts
+++ b/examples/hono-bun/scripts/connect.ts
@@ -2,7 +2,7 @@ import { createClient } from "rivetkit/client";
 import type { Registry } from "../src/registry";
 
 async function main() {
-	const client = createClient<Registry>("http://localhost:8080/rivet");
+	const client = createClient<Registry>("http://localhost:6420/rivet");
 
 	const counter = client.counter.getOrCreate().connect();
 
diff --git a/examples/hono-bun/src/backend/server.ts b/examples/hono-bun/src/backend/server.ts
index b2d846ba43..068be1b634 100644
--- a/examples/hono-bun/src/backend/server.ts
+++ b/examples/hono-bun/src/backend/server.ts
@@ -8,7 +8,7 @@ const { client, fetch } = registry.start({
 	// Hono requires using Hono.serve
 	disableDefaultServer: true,
 	// Override endpoint
-	overrideServerAddress: "http://localhost:8080/rivet",
+	overrideServerAddress: "http://localhost:6420/rivet",
 	// Specify Hono-specific upgradeWebSocket
 	getUpgradeWebSocket: () => upgradeWebSocket,
 	cors: {
@@ -48,4 +48,4 @@ Bun.serve({
 	websocket,
 });
 
-console.log("Listening at http://localhost:8080");
+console.log("Listening at http://localhost:6420");
diff --git a/examples/hono-bun/src/frontend/App.tsx b/examples/hono-bun/src/frontend/App.tsx
index d53ca6a0e3..81d8b548cc 100644
--- a/examples/hono-bun/src/frontend/App.tsx
+++ b/examples/hono-bun/src/frontend/App.tsx
@@ -2,7 +2,7 @@ import { createRivetKit } from "@rivetkit/react";
 import { useState } from "react";
 import type { registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080/rivet");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420/rivet");
 
 function App() {
 	const [count, setCount] = useState(0);
diff --git a/examples/hono-react/src/frontend/App.tsx b/examples/hono-react/src/frontend/App.tsx
index 0fbc28b278..73494dbfca 100644
--- a/examples/hono-react/src/frontend/App.tsx
+++ b/examples/hono-react/src/frontend/App.tsx
@@ -2,7 +2,7 @@ import { createRivetKit } from "@rivetkit/react";
 import { useState } from "react";
 import type { registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 function App() {
 	const [count, setCount] = useState(0);
diff --git a/examples/hono/scripts/client.ts b/examples/hono/scripts/client.ts
index 1c194f5f92..b040ab6591 100644
--- a/examples/hono/scripts/client.ts
+++ b/examples/hono/scripts/client.ts
@@ -1,5 +1,5 @@
 async function main() {
-	const endpoint = process.env.RIVETKIT_ENDPOINT || "http://localhost:8080";
+	const endpoint = process.env.RIVETKIT_ENDPOINT || "http://localhost:6420";
 	const res = await fetch(`${endpoint}/increment/foo`, {
 		method: "POST",
 	});
diff --git a/examples/kitchen-sink/src/frontend/components/tabs/RawHttpTab.tsx b/examples/kitchen-sink/src/frontend/components/tabs/RawHttpTab.tsx
index cd77f9706d..e692cce8bf 100644
--- a/examples/kitchen-sink/src/frontend/components/tabs/RawHttpTab.tsx
+++ b/examples/kitchen-sink/src/frontend/components/tabs/RawHttpTab.tsx
@@ -25,7 +25,7 @@ export default function RawHttpTab({ state }: TabProps) {
   };
 
   const getActorUrl = () => {
-    const baseUrl = "http://localhost:8080";
+    const baseUrl = "http://localhost:6420";
     const actorPath = state.actorKey ?
       `/actors/${state.actorName}/${encodeURIComponent(state.actorKey)}` :
       `/actors/${state.actorName}`;
diff --git a/examples/kitchen-sink/src/frontend/components/tabs/RawWebSocketTab.tsx b/examples/kitchen-sink/src/frontend/components/tabs/RawWebSocketTab.tsx
index fb7a7bdce6..aca7ea8099 100644
--- a/examples/kitchen-sink/src/frontend/components/tabs/RawWebSocketTab.tsx
+++ b/examples/kitchen-sink/src/frontend/components/tabs/RawWebSocketTab.tsx
@@ -32,7 +32,7 @@ export default function RawWebSocketTab({ state }: TabProps) {
     const actorPath = state.actorKey ?
       `/actors/${state.actorName}/${encodeURIComponent(state.actorKey)}/ws` :
       `/actors/${state.actorName}/ws`;
-    return `${wsProtocol}//localhost:8080${actorPath}`;
+    return `${wsProtocol}//localhost:6420${actorPath}`;
   };
 
   const addMessage = (type: "sent" | "received", data: string, isBinary = false) => {
diff --git a/examples/rate/src/frontend/App.tsx b/examples/rate/src/frontend/App.tsx
index d31a76e357..33ced1c7fa 100644
--- a/examples/rate/src/frontend/App.tsx
+++ b/examples/rate/src/frontend/App.tsx
@@ -2,7 +2,7 @@ import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { RateLimitResult, registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 function RateLimiterDemo({ userId }: { userId: string }) {
 	const [result, setResult] = useState<RateLimitResult | null>(null);
diff --git a/examples/raw-fetch-handler/src/frontend/App.tsx b/examples/raw-fetch-handler/src/frontend/App.tsx
index fef7c1bcd4..0563c225d3 100644
--- a/examples/raw-fetch-handler/src/frontend/App.tsx
+++ b/examples/raw-fetch-handler/src/frontend/App.tsx
@@ -3,7 +3,7 @@ import { createClient } from "@rivetkit/react";
 import type { registry } from "../backend/registry";
 
 // Create a client that connects to the running server
-const client = createClient<typeof registry>("http://localhost:8080");
+const client = createClient<typeof registry>("http://localhost:6420");
 
 function Counter({ name }: { name: string }) {
 	const [count, setCount] = useState<number | null>(null);
@@ -33,7 +33,7 @@ function Counter({ name }: { name: string }) {
 		setLoading(true);
 		try {
 			// Method 2: Using the forward endpoint
-			const response = await fetch(`http://localhost:8080/forward/${name}/increment`, {
+			const response = await fetch(`http://localhost:6420/forward/${name}/increment`, {
 				method: "POST",
 			});
 			const data = await response.json();
diff --git a/examples/raw-websocket-handler-proxy/src/frontend/App.tsx b/examples/raw-websocket-handler-proxy/src/frontend/App.tsx
index ba25e4d295..b57474f840 100644
--- a/examples/raw-websocket-handler-proxy/src/frontend/App.tsx
+++ b/examples/raw-websocket-handler-proxy/src/frontend/App.tsx
@@ -16,7 +16,7 @@ export default function App() {
 			`conn_params.${encodeURIComponent(JSON.stringify({ apiKey: "your-api-key" }))}`
 		];
 
-		const ws = new WebSocket("ws://localhost:8080/registry/actors/chatRoom/ws/", protocols);
+		const ws = new WebSocket("ws://localhost:6420/registry/actors/chatRoom/ws/", protocols);
 		
 		ws.onopen = () => {
 			setIsConnected(true);
diff --git a/examples/raw-websocket-handler/src/frontend/App.tsx b/examples/raw-websocket-handler/src/frontend/App.tsx
index 167bef54ef..dbe7c5edc5 100644
--- a/examples/raw-websocket-handler/src/frontend/App.tsx
+++ b/examples/raw-websocket-handler/src/frontend/App.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { createRivetKit } from "@rivetkit/react";
 import type { registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 export default function App() {
 	const [messages, setMessages] = useState<Array<{ id: string; text: string; timestamp: number }>>([]);
diff --git a/examples/react/src/frontend/App.tsx b/examples/react/src/frontend/App.tsx
index 0fbc28b278..73494dbfca 100644
--- a/examples/react/src/frontend/App.tsx
+++ b/examples/react/src/frontend/App.tsx
@@ -2,7 +2,7 @@ import { createRivetKit } from "@rivetkit/react";
 import { useState } from "react";
 import type { registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 function App() {
 	const [count, setCount] = useState(0);
diff --git a/examples/starter/README.md b/examples/starter/README.md
index 2bd2133c3c..c0c779619b 100644
--- a/examples/starter/README.md
+++ b/examples/starter/README.md
@@ -39,7 +39,7 @@ export RIVET_ENVIRONMENT=your_environment
 npm run dev
 ```
 
-This will start the RivetKit server locally at http://localhost:8080.
+This will start the RivetKit server locally at http://localhost:6420.
 
 ### Testing the Client
 
diff --git a/examples/starter/scripts/client.ts b/examples/starter/scripts/client.ts
index 4c9b58a275..8de7c4f7e5 100644
--- a/examples/starter/scripts/client.ts
+++ b/examples/starter/scripts/client.ts
@@ -2,7 +2,7 @@ import { createClient } from "rivetkit/client";
 import type { registry } from "../src/registry.js";
 
 // Get endpoint from environment variable or default to localhost
-const endpoint = process.env.RIVETKIT_ENDPOINT ?? "http://localhost:8080";
+const endpoint = process.env.RIVETKIT_ENDPOINT ?? "http://localhost:6420";
 console.log("🔗 Using endpoint:", endpoint);
 
 // Create RivetKit client
diff --git a/examples/stream/src/frontend/App.tsx b/examples/stream/src/frontend/App.tsx
index 7dc73e6ea6..3a3f6a98d2 100644
--- a/examples/stream/src/frontend/App.tsx
+++ b/examples/stream/src/frontend/App.tsx
@@ -2,7 +2,7 @@ import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 export function App() {
 	const [topValues, setTopValues] = useState<number[]>([]);
diff --git a/examples/sync/src/frontend/App.tsx b/examples/sync/src/frontend/App.tsx
index da9fa829f8..b1405b4dbc 100644
--- a/examples/sync/src/frontend/App.tsx
+++ b/examples/sync/src/frontend/App.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import type { Contact } from "../backend/types";
 import type { registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 export function App() {
 	const [contacts, setContacts] = useState<Contact[]>([]);
diff --git a/examples/tenant/src/frontend/App.tsx b/examples/tenant/src/frontend/App.tsx
index 0e7c2c1f56..be3da2f40a 100644
--- a/examples/tenant/src/frontend/App.tsx
+++ b/examples/tenant/src/frontend/App.tsx
@@ -2,7 +2,7 @@ import { createRivetKit } from "@rivetkit/react";
 import { useEffect, useState } from "react";
 import type { Member, registry } from "../backend/registry";
 
-const { useActor } = createRivetKit<typeof registry>("http://localhost:8080");
+const { useActor } = createRivetKit<typeof registry>("http://localhost:6420");
 
 const ORG_ID = "org-1";
 
diff --git a/frontend/src/app/changelog.tsx b/frontend/src/app/changelog.tsx
index bdb61547ff..fd2119222c 100644
--- a/frontend/src/app/changelog.tsx
+++ b/frontend/src/app/changelog.tsx
@@ -1,5 +1,5 @@
 import { faSparkle, Icon } from "@rivet-gg/icons";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useLocalStorage } from "usehooks-ts";
 import {
 	Avatar,
@@ -113,13 +113,27 @@ interface ChangelogProps {
 }
 
 export function Changelog({ className, children, ...props }: ChangelogProps) {
-	const { data } = useSuspenseQuery(changelogQueryOptions());
+	const { data, isLoading, isError } = useQuery(changelogQueryOptions());
 
 	const [lastChangelog, setLast] = useLocalStorage<string | null>(
 		"rivet-lastchangelog",
 		null,
 	);
 
+	if (isLoading || isError || !data || data.length === 0) {
+		return (
+			<Slot
+				{...props}
+				className={cn(
+					"relative [&_[data-changelog-ping]]:hidden",
+					className,
+				)}
+			>
+				{children}
+			</Slot>
+		);
+	}
+
 	const hasNewChangelog = !lastChangelog
 		? data.length > 0
 		: data.some(
diff --git a/frontend/src/components/actors/actor-status-label.tsx b/frontend/src/components/actors/actor-status-label.tsx
index 0182cad7ca..bb1f27fb9b 100644
--- a/frontend/src/components/actors/actor-status-label.tsx
+++ b/frontend/src/components/actors/actor-status-label.tsx
@@ -13,7 +13,11 @@ export const ACTOR_STATUS_LABEL_MAP = {
 } satisfies Record<ActorStatus, string>;
 
 export const ActorStatusLabel = ({ status }: { status?: ActorStatus }) => {
-	return <span>{status ? ACTOR_STATUS_LABEL_MAP[status] : "Unknown"}</span>;
+	return (
+		<span data-slot="status-label">
+			{status ? ACTOR_STATUS_LABEL_MAP[status] : "Unknown"}
+		</span>
+	);
 };
 
 export const QueriedActorStatusLabel = ({ actorId }: { actorId: ActorId }) => {
diff --git a/frontend/src/components/actors/actors-actor-details.tsx b/frontend/src/components/actors/actors-actor-details.tsx
index 4b782e3dd5..a862c43277 100644
--- a/frontend/src/components/actors/actors-actor-details.tsx
+++ b/frontend/src/components/actors/actors-actor-details.tsx
@@ -4,6 +4,7 @@ import { memo, type ReactNode, Suspense } from "react";
 import {
 	cn,
 	Flex,
+	ScrollArea,
 	Tabs,
 	TabsContent,
 	TabsList,
@@ -52,7 +53,7 @@ export const ActorsActorDetails = memo(
 		return (
 			<GuardConnectableInspector actorId={actorId}>
 				<ActorDetailsSettingsProvider>
-					<div className="flex flex-col h-full flex-1">
+					<div className="flex flex-col h-full flex-1 @container/actor">
 						<ActorTabs
 							features={features}
 							actorId={actorId}
@@ -133,90 +134,98 @@ export function ActorTabs({
 			value={value}
 			onValueChange={onTabChange}
 			defaultValue={value}
-			className={cn(className, "flex-1 min-h-0 min-w-0 flex flex-col ")}
+			className={cn(className, "flex-1 min-h-0 min-w-0 flex flex-col")}
 		>
 			<div className="flex justify-between items-center border-b h-[45px]">
-				<div className="flex flex-1 items-center h-full w-full ">
-					<TabsList className="overflow-auto border-none h-full items-end">
-						{supportsState ? (
-							<TabsTrigger
-								disabled={disabled}
-								value="state"
-								className="text-xs px-3 py-1 pb-2"
+				<ScrollArea
+					className="h-full items-end"
+					viewportProps={{
+						className: "h-full [&>div]:h-full",
+					}}
+				>
+					<div className="flex flex-1 items-center h-full w-full relative">
+						<TabsList className="border-none h-full items-safe-end w-full flex-nowrap mr-2.5">
+							{supportsState ? (
+								<TabsTrigger
+									disabled={disabled}
+									value="state"
+									className="text-xs px-3 py-1 pb-3"
+								>
+									State
+								</TabsTrigger>
+							) : null}
+							{supportsConnections ? (
+								<TabsTrigger
+									disabled={disabled}
+									value="connections"
+									className="text-xs px-3 py-1 pb-3"
+								>
+									Connections
+								</TabsTrigger>
+							) : null}
+							{supportsEvents ? (
+								<TabsTrigger
+									disabled={disabled}
+									value="events"
+									className="text-xs px-3 py-1 pb-3"
+								>
+									Events
+								</TabsTrigger>
+							) : null}
+							{supportsDatabase ? (
+								<TabsTrigger
+									disabled={disabled}
+									value="database"
+									className="text-xs px-3 py-1 pb-3"
+								>
+									Database
+								</TabsTrigger>
+							) : null}
+							{supportsLogs ? (
+								<TabsTrigger
+									disabled={disabled}
+									value="logs"
+									className="text-xs px-3 py-1 pb-3"
+								>
+									Logs
+								</TabsTrigger>
+							) : null}
+							{supportsMetadata ? (
+								<TabsTrigger
+									disabled={disabled}
+									value="metadata"
+									className="text-xs px-3 py-1 pb-3"
+								>
+									Metadata
+								</TabsTrigger>
+							) : null}
+							{supportsMetrics ? (
+								<TabsTrigger
+									disabled={disabled}
+									value="metrics"
+									className="text-xs px-3 py-1 pb-3"
+								>
+									Metrics
+								</TabsTrigger>
+							) : null}
+						</TabsList>
+						{actorId ? (
+							<Flex
+								gap="2"
+								justify="between"
+								items="center"
+								className="h-full pb-3 pt-2 pr-4 sticky right-0 bg-card"
 							>
-								State
-							</TabsTrigger>
+								<div className="w-4 bg-gradient-to-r from-transparent to-card absolute inset-y-0 left-0 -translate-x-full" />
+								<QueriedActorStatus
+									className="min-h-7 text-sm h-auto [&_[data-slot=status-label]]:hidden @lg:[&_[data-slot=status-label]]:inline-block"
+									actorId={actorId}
+								/>
+								<ActorStopButton actorId={actorId} />
+							</Flex>
 						) : null}
-						{supportsConnections ? (
-							<TabsTrigger
-								disabled={disabled}
-								value="connections"
-								className="text-xs px-3 py-1 pb-2"
-							>
-								Connections
-							</TabsTrigger>
-						) : null}
-						{supportsEvents ? (
-							<TabsTrigger
-								disabled={disabled}
-								value="events"
-								className="text-xs px-3 py-1 pb-2"
-							>
-								Events
-							</TabsTrigger>
-						) : null}
-						{supportsDatabase ? (
-							<TabsTrigger
-								disabled={disabled}
-								value="database"
-								className="text-xs px-3 py-1 pb-2"
-							>
-								Database
-							</TabsTrigger>
-						) : null}
-						{supportsLogs ? (
-							<TabsTrigger
-								disabled={disabled}
-								value="logs"
-								className="text-xs px-3 py-1 pb-2"
-							>
-								Logs
-							</TabsTrigger>
-						) : null}
-						{supportsMetadata ? (
-							<TabsTrigger
-								disabled={disabled}
-								value="metadata"
-								className="text-xs px-3 py-1 pb-2"
-							>
-								Metadata
-							</TabsTrigger>
-						) : null}
-						{supportsMetrics ? (
-							<TabsTrigger
-								disabled={disabled}
-								value="metrics"
-								className="text-xs px-3 py-1 pb-2"
-							>
-								Metrics
-							</TabsTrigger>
-						) : null}
-					</TabsList>
-					{actorId ? (
-						<Flex
-							gap="2"
-							justify="between"
-							items="center"
-							className="h-[36px] pb-3 pt-2 pr-4"
-						>
-							<QueriedActorStatus
-								className="text-sm h-auto"
-								actorId={actorId}
-							/>
-							<ActorStopButton actorId={actorId} />
-						</Flex>
-					) : null}
-				</div>
+					</div>
+				</ScrollArea>
 			</div>
 			{actorId ? (
 				<>
diff --git a/frontend/src/components/tailwind-base.ts b/frontend/src/components/tailwind-base.ts
index a11d21957c..dfd80ba584 100644
--- a/frontend/src/components/tailwind-base.ts
+++ b/frontend/src/components/tailwind-base.ts
@@ -183,6 +183,12 @@ const config = {
 				".justify-safe-center": {
 					"justify-content": "safe center",
 				},
+				".items-safe-start": {
+					"align-items": "safe start",
+				},
+				".items-safe-end": {
+					"align-items": "safe end",
+				},
 			});
 		}),
 	],
diff --git a/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx b/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx
index 8959b70b12..21eac7b39c 100644
--- a/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx
+++ b/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/connect.tsx
@@ -116,7 +116,7 @@ export function RouteComponent() {
 			<div className="h-full border my-2 mr-2 px-4 py-4 rounded-lg flex flex-col items-center justify-safe-center overflow-auto @container">
 				<div className="grid grid-cols-1 @7xl:grid-cols-2 gap-8 justify-safe-center">
 					<div className="max-w-3xl border rounded-lg w-full bg-card">
-						<div className="mt-2 flex justify-between items-center px-6 py-4 sticky top-0">
+						<div className="mt-2 flex justify-between items-center px-6 py-4">
 							<H2>Create New Project</H2>
 						</div>
 						<p className="max-w-5xl mb-6 px-6 text-muted-foreground">
diff --git a/rivetkit-typescript/packages/rivetkit/src/drivers/engine/actor-driver.ts b/rivetkit-typescript/packages/rivetkit/src/drivers/engine/actor-driver.ts
index 230f60c616..bf133ab6aa 100644
--- a/rivetkit-typescript/packages/rivetkit/src/drivers/engine/actor-driver.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/drivers/engine/actor-driver.ts
@@ -107,6 +107,12 @@ export class EngineActorDriver implements ActorDriver {
 			metadata: {
 				inspectorToken: this.#runConfig.inspector.token(),
 			},
+			getActorHibernationConfig(actorId, requestId) {
+				return {
+					enabled: false,
+					lastMsgIndex: 0,
+				};
+			},
 			prepopulateActorNames: buildActorNames(registryConfig),
 			onConnected: () => {
 				if (hasDisconnected) {
diff --git a/website/src/data/examples/examples.ts b/website/src/data/examples/examples.ts
index 9de4d2931e..9beba0d926 100644
--- a/website/src/data/examples/examples.ts
+++ b/website/src/data/examples/examples.ts
@@ -30,7 +30,7 @@ export const examples: ExampleData[] = [
       "tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"esnext\",\n    \"lib\": [\"esnext\", \"dom\"],\n    \"jsx\": \"react-jsx\",\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"types\": [\"node\", \"vite/client\"],\n    \"resolveJsonModule\": true,\n    \"allowJs\": true,\n    \"checkJs\": false,\n    \"noEmit\": true,\n    \"isolatedModules\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true\n  },\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n",
       "vite.config.ts": "import react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [react()],\n\troot: \"src/frontend\",\n\tserver: {\n\t\tport: 3000,\n\t},\n});\n",
       "vitest.config.ts": "import { defineConfig } from \"vitest/config\";\n\nexport default defineConfig({\n\ttest: {\n\t\tinclude: [\"tests/**/*.test.ts\"],\n\t\ttestTimeout: 30000,\n\t},\n});\n",
-      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useState } from \"react\";\nimport { registry } from \"../backend/registry\";\nimport type { Message } from \"../backend/types\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:8080\");\n\nexport function App() {\n\tconst aiAgent = useActor({\n\t\tname: \"aiAgent\",\n\t\tkey: [\"default\"],\n\t});\n\tconst [messages, setMessages] = useState<Message[]>([]);\n\tconst [input, setInput] = useState(\"\");\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (aiAgent.connection) {\n\t\t\taiAgent.connection.getMessages().then(setMessages);\n\t\t}\n\t}, [aiAgent.connection]);\n\n\taiAgent.useEvent(\"messageReceived\", (message: Message) => {\n\t\tsetMessages((prev) => [...prev, message]);\n\t\tsetIsLoading(false);\n\t});\n\n\tconst handleSendMessage = async () => {\n\t\tif (aiAgent.connection && input.trim()) {\n\t\t\tsetIsLoading(true);\n\n\t\t\tconst userMessage = { role: \"user\", content: input, timestamp: Date.now() } as Message;\n\t\t\tsetMessages((prev) => [...prev, userMessage]);\n\n\t\t\tawait aiAgent.connection.sendMessage(input);\n\t\t\tsetInput(\"\");\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"ai-chat\">\n\t\t\t<div className=\"messages\">\n\t\t\t\t{messages.length === 0 ? (\n\t\t\t\t\t<div className=\"empty-message\">\n\t\t\t\t\t\tAsk the AI assistant a question to get started\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\tmessages.map((msg, i) => (\n\t\t\t\t\t\t<div key={i} className={`message ${msg.role}`}>\n\t\t\t\t\t\t\t<div className=\"avatar\">{msg.role === \"user\" ? \"👤\" : \"🤖\"}</div>\n\t\t\t\t\t\t\t<div className=\"content\">{msg.content}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))\n\t\t\t\t)}\n\t\t\t\t{isLoading && (\n\t\t\t\t\t<div className=\"message assistant loading\">\n\t\t\t\t\t\t<div className=\"avatar\">🤖</div>\n\t\t\t\t\t\t<div className=\"content\">Thinking...</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div className=\"input-area\">\n\t\t\t\t<input\n\t\t\t\t\tvalue={input}\n\t\t\t\t\tonChange={(e) => setInput(e.target.value)}\n\t\t\t\t\tonKeyPress={(e) => e.key === \"Enter\" && handleSendMessage()}\n\t\t\t\t\tplaceholder=\"Ask the AI assistant...\"\n\t\t\t\t\tdisabled={isLoading}\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\tonClick={handleSendMessage}\n\t\t\t\t\tdisabled={isLoading || !input.trim()}\n\t\t\t\t>\n\t\t\t\t\tSend\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
+      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useState } from \"react\";\nimport { registry } from \"../backend/registry\";\nimport type { Message } from \"../backend/types\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:6420\");\n\nexport function App() {\n\tconst aiAgent = useActor({\n\t\tname: \"aiAgent\",\n\t\tkey: [\"default\"],\n\t});\n\tconst [messages, setMessages] = useState<Message[]>([]);\n\tconst [input, setInput] = useState(\"\");\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (aiAgent.connection) {\n\t\t\taiAgent.connection.getMessages().then(setMessages);\n\t\t}\n\t}, [aiAgent.connection]);\n\n\taiAgent.useEvent(\"messageReceived\", (message: Message) => {\n\t\tsetMessages((prev) => [...prev, message]);\n\t\tsetIsLoading(false);\n\t});\n\n\tconst handleSendMessage = async () => {\n\t\tif (aiAgent.connection && input.trim()) {\n\t\t\tsetIsLoading(true);\n\n\t\t\tconst userMessage = { role: \"user\", content: input, timestamp: Date.now() } as Message;\n\t\t\tsetMessages((prev) => [...prev, userMessage]);\n\n\t\t\tawait aiAgent.connection.sendMessage(input);\n\t\t\tsetInput(\"\");\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"ai-chat\">\n\t\t\t<div className=\"messages\">\n\t\t\t\t{messages.length === 0 ? (\n\t\t\t\t\t<div className=\"empty-message\">\n\t\t\t\t\t\tAsk the AI assistant a question to get started\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\tmessages.map((msg, i) => (\n\t\t\t\t\t\t<div key={i} className={`message ${msg.role}`}>\n\t\t\t\t\t\t\t<div className=\"avatar\">{msg.role === \"user\" ? \"👤\" : \"🤖\"}</div>\n\t\t\t\t\t\t\t<div className=\"content\">{msg.content}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))\n\t\t\t\t)}\n\t\t\t\t{isLoading && (\n\t\t\t\t\t<div className=\"message assistant loading\">\n\t\t\t\t\t\t<div className=\"avatar\">🤖</div>\n\t\t\t\t\t\t<div className=\"content\">Thinking...</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div className=\"input-area\">\n\t\t\t\t<input\n\t\t\t\t\tvalue={input}\n\t\t\t\t\tonChange={(e) => setInput(e.target.value)}\n\t\t\t\t\tonKeyPress={(e) => e.key === \"Enter\" && handleSendMessage()}\n\t\t\t\t\tplaceholder=\"Ask the AI assistant...\"\n\t\t\t\t\tdisabled={isLoading}\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\tonClick={handleSendMessage}\n\t\t\t\t\tdisabled={isLoading || !input.trim()}\n\t\t\t\t>\n\t\t\t\t\tSend\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
       "src/frontend/main.tsx": "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { App } from \"./App\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"Root element not found\");\n\ncreateRoot(root).render(\n\t<StrictMode>\n\t\t<App />\n\t</StrictMode>\n);",
       "src/frontend/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>AI Agent Example</title>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f5f5f5;\n        }\n        .ai-chat {\n            max-width: 800px;\n            margin: 0 auto;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            overflow: hidden;\n        }\n        .messages {\n            height: 400px;\n            overflow-y: auto;\n            padding: 20px;\n            border-bottom: 1px solid #eee;\n        }\n        .message {\n            display: flex;\n            margin-bottom: 16px;\n            align-items: flex-start;\n        }\n        .message.user {\n            justify-content: flex-end;\n        }\n        .message.assistant {\n            justify-content: flex-start;\n        }\n        .avatar {\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: #007bff;\n            color: white;\n            font-size: 18px;\n            flex-shrink: 0;\n        }\n        .message.user .avatar {\n            background: #28a745;\n            margin-left: 10px;\n        }\n        .message.assistant .avatar {\n            background: #007bff;\n            margin-right: 10px;\n        }\n        .content {\n            max-width: 60%;\n            padding: 12px 16px;\n            border-radius: 18px;\n            background: #f1f1f1;\n            word-wrap: break-word;\n        }\n        .message.user .content {\n            background: #007bff;\n            color: white;\n        }\n        .message.assistant .content {\n            background: #f1f1f1;\n        }\n        .message.loading .content {\n            background: #e9ecef;\n            font-style: italic;\n        }\n        .empty-message {\n            text-align: center;\n            color: #666;\n            padding: 40px;\n        }\n        .input-area {\n            display: flex;\n            padding: 20px;\n            gap: 10px;\n        }\n        .input-area input {\n            flex: 1;\n            padding: 12px;\n            border: 1px solid #ddd;\n            border-radius: 6px;\n            font-size: 16px;\n        }\n        .input-area button {\n            padding: 12px 24px;\n            background: #007bff;\n            color: white;\n            border: none;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 16px;\n        }\n        .input-area button:disabled {\n            background: #ccc;\n            cursor: not-allowed;\n        }\n        .input-area button:hover:not(:disabled) {\n            background: #0056b3;\n        }\n    </style>\n</head>\n<body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/main.tsx\"></script>\n</body>\n</html>",
       "src/backend/my-tools.ts": "export async function getWeather(location: string) {\n\t// Mock weather API response\n\treturn {\n\t\tlocation,\n\t\ttemperature: Math.floor(Math.random() * 30) + 10,\n\t\tcondition: [\"sunny\", \"cloudy\", \"rainy\", \"snowy\"][\n\t\t\tMath.floor(Math.random() * 4)\n\t\t],\n\t\thumidity: Math.floor(Math.random() * 50) + 30,\n\t};\n}\n",
@@ -56,7 +56,7 @@ export const examples: ExampleData[] = [
       "tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"esnext\",\n    \"lib\": [\"esnext\", \"dom\"],\n    \"jsx\": \"react-jsx\",\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"types\": [\"node\", \"vite/client\"],\n    \"resolveJsonModule\": true,\n    \"allowJs\": true,\n    \"checkJs\": false,\n    \"noEmit\": true,\n    \"isolatedModules\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true\n  },\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n",
       "vite.config.ts": "import react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [react()],\n\troot: \"src/frontend\",\n\tserver: {\n\t\tport: 3000,\n\t},\n});\n",
       "vitest.config.ts": "import { defineConfig } from \"vitest/config\";\n\nexport default defineConfig({\n\ttest: {\n\t\tinclude: [\"tests/**/*.test.ts\"],\n\t},\n});\n",
-      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport * as Y from \"yjs\";\nimport { applyUpdate, encodeStateAsUpdate } from \"yjs\";\nimport type { registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:8080\");\n\nfunction YjsEditor({ documentId }: { documentId: string }) {\n\tconst yjsDocument = useActor({\n\t\tname: \"yjsDocument\",\n\t\tkey: [documentId],\n\t});\n\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [text, setText] = useState(\"\");\n\n\tconst yDocRef = useRef<Y.Doc | null>(null);\n\tconst updatingFromServer = useRef(false);\n\tconst updatingFromLocal = useRef(false);\n\tconst observationInitialized = useRef(false);\n\n\tuseEffect(() => {\n\t\tconst yDoc = new Y.Doc();\n\t\tyDocRef.current = yDoc;\n\t\tsetIsLoading(false);\n\n\t\treturn () => {\n\t\t\tyDoc.destroy();\n\t\t};\n\t}, [yjsDocument.connection]);\n\n\tuseEffect(() => {\n\t\tconst yDoc = yDocRef.current;\n\t\tif (!yDoc || observationInitialized.current) return;\n\n\t\tconst yText = yDoc.getText(\"content\");\n\n\t\tyText.observe(() => {\n\t\t\tif (!updatingFromServer.current) {\n\t\t\t\tsetText(yText.toString());\n\n\t\t\t\tif (yjsDocument.connection && !updatingFromLocal.current) {\n\t\t\t\t\tupdatingFromLocal.current = true;\n\n\t\t\t\t\tconst update = encodeStateAsUpdate(yDoc);\n\t\t\t\t\tyjsDocument.connection.applyUpdate(update).finally(() => {\n\t\t\t\t\t\tupdatingFromLocal.current = false;\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tobservationInitialized.current = true;\n\t}, [yjsDocument.connection]);\n\n\tyjsDocument.useEvent(\"initialState\", ({ update }: { update: Uint8Array }) => {\n\t\tconst yDoc = yDocRef.current;\n\t\tif (!yDoc) return;\n\n\t\tupdatingFromServer.current = true;\n\n\t\ttry {\n\t\t\tapplyUpdate(yDoc, update);\n\n\t\t\tconst yText = yDoc.getText(\"content\");\n\t\t\tsetText(yText.toString());\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error applying initial update:\", error);\n\t\t} finally {\n\t\t\tupdatingFromServer.current = false;\n\t\t}\n\t});\n\n\tyjsDocument.useEvent(\"update\", ({ update }: { update: Uint8Array }) => {\n\t\tconst yDoc = yDocRef.current;\n\t\tif (!yDoc) return;\n\n\t\tupdatingFromServer.current = true;\n\n\t\ttry {\n\t\t\tapplyUpdate(yDoc, update);\n\n\t\t\tconst yText = yDoc.getText(\"content\");\n\t\t\tsetText(yText.toString());\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error applying update:\", error);\n\t\t} finally {\n\t\t\tupdatingFromServer.current = false;\n\t\t}\n\t});\n\n\tconst handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\tif (!yDocRef.current) return;\n\n\t\tconst newText = e.target.value;\n\t\tconst yText = yDocRef.current.getText(\"content\");\n\n\t\tif (newText !== yText.toString()) {\n\t\t\tupdatingFromLocal.current = true;\n\n\t\t\tyDocRef.current.transact(() => {\n\t\t\t\tyText.delete(0, yText.length);\n\t\t\t\tyText.insert(0, newText);\n\t\t\t});\n\n\t\t\tupdatingFromLocal.current = false;\n\t\t}\n\t};\n\n\tif (isLoading) {\n\t\treturn <div className=\"loading\">Loading collaborative document...</div>;\n\t}\n\n\treturn (\n\t\t<div className=\"editor-container\">\n\t\t\t<div className=\"editor-header\">\n\t\t\t\t<h3>Document: {documentId}</h3>\n\t\t\t\t<div className={`connection-status ${yjsDocument.connection ? 'connected' : 'disconnected'}`}>\n\t\t\t\t\t{yjsDocument.connection ? 'Connected' : 'Disconnected'}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<textarea\n\t\t\t\tvalue={text}\n\t\t\t\tonChange={handleTextChange}\n\t\t\t\tplaceholder=\"Start typing... All changes are synchronized in real-time with other users!\"\n\t\t\t\tclassName=\"collaborative-textarea\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport function App() {\n\tconst [documentId, setDocumentId] = useState(\"shared-doc\");\n\tconst [inputDocId, setInputDocId] = useState(\"shared-doc\");\n\n\tconst switchDocument = () => {\n\t\tsetDocumentId(inputDocId);\n\t};\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>CRDT Collaborative Editor</h1>\n\t\t\t\t<p>Real-time collaborative text editing powered by Yjs and RivetKit</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"info-box\">\n\t\t\t\t<h4>How it works</h4>\n\t\t\t\t<p>\n\t\t\t\t\tThis editor uses Conflict-free Replicated Data Types (CRDTs) with Yjs to enable\n\t\t\t\t\treal-time collaborative editing. Open multiple browser tabs or share the URL\n\t\t\t\t\twith others to see live collaboration in action!\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"document-controls\">\n\t\t\t\t<label>Document ID:</label>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputDocId}\n\t\t\t\t\tonChange={(e) => setInputDocId(e.target.value)}\n\t\t\t\t\tplaceholder=\"Enter document ID\"\n\t\t\t\t/>\n\t\t\t\t<button onClick={switchDocument}>\n\t\t\t\t\tSwitch Document\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<YjsEditor key={documentId} documentId={documentId} />\n\t\t</div>\n\t);\n}\n",
+      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport * as Y from \"yjs\";\nimport { applyUpdate, encodeStateAsUpdate } from \"yjs\";\nimport type { registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:6420\");\n\nfunction YjsEditor({ documentId }: { documentId: string }) {\n\tconst yjsDocument = useActor({\n\t\tname: \"yjsDocument\",\n\t\tkey: [documentId],\n\t});\n\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [text, setText] = useState(\"\");\n\n\tconst yDocRef = useRef<Y.Doc | null>(null);\n\tconst updatingFromServer = useRef(false);\n\tconst updatingFromLocal = useRef(false);\n\tconst observationInitialized = useRef(false);\n\n\tuseEffect(() => {\n\t\tconst yDoc = new Y.Doc();\n\t\tyDocRef.current = yDoc;\n\t\tsetIsLoading(false);\n\n\t\treturn () => {\n\t\t\tyDoc.destroy();\n\t\t};\n\t}, [yjsDocument.connection]);\n\n\tuseEffect(() => {\n\t\tconst yDoc = yDocRef.current;\n\t\tif (!yDoc || observationInitialized.current) return;\n\n\t\tconst yText = yDoc.getText(\"content\");\n\n\t\tyText.observe(() => {\n\t\t\tif (!updatingFromServer.current) {\n\t\t\t\tsetText(yText.toString());\n\n\t\t\t\tif (yjsDocument.connection && !updatingFromLocal.current) {\n\t\t\t\t\tupdatingFromLocal.current = true;\n\n\t\t\t\t\tconst update = encodeStateAsUpdate(yDoc);\n\t\t\t\t\tyjsDocument.connection.applyUpdate(update).finally(() => {\n\t\t\t\t\t\tupdatingFromLocal.current = false;\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tobservationInitialized.current = true;\n\t}, [yjsDocument.connection]);\n\n\tyjsDocument.useEvent(\"initialState\", ({ update }: { update: Uint8Array }) => {\n\t\tconst yDoc = yDocRef.current;\n\t\tif (!yDoc) return;\n\n\t\tupdatingFromServer.current = true;\n\n\t\ttry {\n\t\t\tapplyUpdate(yDoc, update);\n\n\t\t\tconst yText = yDoc.getText(\"content\");\n\t\t\tsetText(yText.toString());\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error applying initial update:\", error);\n\t\t} finally {\n\t\t\tupdatingFromServer.current = false;\n\t\t}\n\t});\n\n\tyjsDocument.useEvent(\"update\", ({ update }: { update: Uint8Array }) => {\n\t\tconst yDoc = yDocRef.current;\n\t\tif (!yDoc) return;\n\n\t\tupdatingFromServer.current = true;\n\n\t\ttry {\n\t\t\tapplyUpdate(yDoc, update);\n\n\t\t\tconst yText = yDoc.getText(\"content\");\n\t\t\tsetText(yText.toString());\n\t\t} catch (error) {\n\t\t\tconsole.error(\"Error applying update:\", error);\n\t\t} finally {\n\t\t\tupdatingFromServer.current = false;\n\t\t}\n\t});\n\n\tconst handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\tif (!yDocRef.current) return;\n\n\t\tconst newText = e.target.value;\n\t\tconst yText = yDocRef.current.getText(\"content\");\n\n\t\tif (newText !== yText.toString()) {\n\t\t\tupdatingFromLocal.current = true;\n\n\t\t\tyDocRef.current.transact(() => {\n\t\t\t\tyText.delete(0, yText.length);\n\t\t\t\tyText.insert(0, newText);\n\t\t\t});\n\n\t\t\tupdatingFromLocal.current = false;\n\t\t}\n\t};\n\n\tif (isLoading) {\n\t\treturn <div className=\"loading\">Loading collaborative document...</div>;\n\t}\n\n\treturn (\n\t\t<div className=\"editor-container\">\n\t\t\t<div className=\"editor-header\">\n\t\t\t\t<h3>Document: {documentId}</h3>\n\t\t\t\t<div className={`connection-status ${yjsDocument.connection ? 'connected' : 'disconnected'}`}>\n\t\t\t\t\t{yjsDocument.connection ? 'Connected' : 'Disconnected'}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<textarea\n\t\t\t\tvalue={text}\n\t\t\t\tonChange={handleTextChange}\n\t\t\t\tplaceholder=\"Start typing... All changes are synchronized in real-time with other users!\"\n\t\t\t\tclassName=\"collaborative-textarea\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport function App() {\n\tconst [documentId, setDocumentId] = useState(\"shared-doc\");\n\tconst [inputDocId, setInputDocId] = useState(\"shared-doc\");\n\n\tconst switchDocument = () => {\n\t\tsetDocumentId(inputDocId);\n\t};\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>CRDT Collaborative Editor</h1>\n\t\t\t\t<p>Real-time collaborative text editing powered by Yjs and RivetKit</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"info-box\">\n\t\t\t\t<h4>How it works</h4>\n\t\t\t\t<p>\n\t\t\t\t\tThis editor uses Conflict-free Replicated Data Types (CRDTs) with Yjs to enable\n\t\t\t\t\treal-time collaborative editing. Open multiple browser tabs or share the URL\n\t\t\t\t\twith others to see live collaboration in action!\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"document-controls\">\n\t\t\t\t<label>Document ID:</label>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputDocId}\n\t\t\t\t\tonChange={(e) => setInputDocId(e.target.value)}\n\t\t\t\t\tplaceholder=\"Enter document ID\"\n\t\t\t\t/>\n\t\t\t\t<button onClick={switchDocument}>\n\t\t\t\t\tSwitch Document\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<YjsEditor key={documentId} documentId={documentId} />\n\t\t</div>\n\t);\n}\n",
       "src/frontend/main.tsx": "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { App } from \"./App\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"Root element not found\");\n\ncreateRoot(root).render(\n\t<StrictMode>\n\t\t<App />\n\t</StrictMode>\n);",
       "src/frontend/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>CRDT Collaborative Editor</title>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f5f5f5;\n        }\n        .app-container {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n        .header {\n            text-align: center;\n            margin-bottom: 30px;\n        }\n        .header h1 {\n            color: #333;\n            margin-bottom: 10px;\n        }\n        .header p {\n            color: #666;\n            font-size: 1.1em;\n        }\n        .document-controls {\n            background: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            margin-bottom: 20px;\n            display: flex;\n            gap: 15px;\n            align-items: center;\n        }\n        .document-controls label {\n            font-weight: 500;\n        }\n        .document-controls input {\n            padding: 8px 12px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            font-size: 16px;\n        }\n        .document-controls button {\n            padding: 8px 16px;\n            background: #007bff;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 16px;\n        }\n        .document-controls button:hover {\n            background: #0056b3;\n        }\n        .editor-container {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            overflow: hidden;\n        }\n        .editor-header {\n            background: #f8f9fa;\n            padding: 15px 20px;\n            border-bottom: 1px solid #eee;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        .editor-header h3 {\n            margin: 0;\n            color: #333;\n        }\n        .connection-status {\n            padding: 4px 8px;\n            border-radius: 4px;\n            font-size: 0.9em;\n            font-weight: 500;\n        }\n        .connection-status.connected {\n            background: #d4edda;\n            color: #155724;\n        }\n        .connection-status.disconnected {\n            background: #f8d7da;\n            color: #721c24;\n        }\n        .collaborative-textarea {\n            width: 100%;\n            min-height: 400px;\n            padding: 20px;\n            border: none;\n            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n            font-size: 14px;\n            line-height: 1.5;\n            resize: vertical;\n            outline: none;\n        }\n        .loading {\n            text-align: center;\n            padding: 40px;\n            color: #666;\n            font-style: italic;\n        }\n        .info-box {\n            background: #e3f2fd;\n            border: 1px solid #2196f3;\n            border-radius: 8px;\n            padding: 15px;\n            margin-bottom: 20px;\n        }\n        .info-box h4 {\n            margin: 0 0 10px 0;\n            color: #1976d2;\n        }\n        .info-box p {\n            margin: 0;\n            color: #333;\n        }\n    </style>\n</head>\n<body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/main.tsx\"></script>\n</body>\n</html>",
       "src/backend/registry.ts": "import { actor, setup } from \"rivetkit\";\nimport * as Y from \"yjs\";\nimport { applyUpdate, encodeStateAsUpdate } from \"yjs\";\n\nexport const yjsDocument = actor({\n\t// Persistent state that survives restarts.\n\tstate: {\n\t\tdocData: new Uint8Array(), // Raw Yjs document snapshot\n\t\tlastModified: 0,\n\t},\n\n\tcreateVars: () => ({\n\t\tdoc: new Y.Doc(),\n\t}),\n\n\tonStart: (c) => {\n\t\tif (c.state.docData.length > 0) {\n\t\t\tapplyUpdate(c.vars.doc, c.state.docData);\n\t\t}\n\t},\n\n\t// Handle client connections.\n\tonConnect: (c, conn) => {\n\t\tconst update = encodeStateAsUpdate(c.vars.doc);\n\t\tconn.send(\"initialState\", { update });\n\t},\n\n\tactions: {\n\t\t// Callable functions from clients.\n\t\tapplyUpdate: (c, update: Uint8Array) => {\n\t\t\tapplyUpdate(c.vars.doc, update);\n\n\t\t\tconst fullState = encodeStateAsUpdate(\n\t\t\t\tc.vars.doc,\n\t\t\t) as Uint8Array<ArrayBuffer>;\n\t\t\t// State changes are automatically persisted\n\t\t\tc.state.docData = fullState;\n\t\t\tc.state.lastModified = Date.now();\n\n\t\t\t// Send events to all connected clients.\n\t\t\tc.broadcast(\"update\", { update });\n\t\t},\n\n\t\tgetState: (c) => ({\n\t\t\tdocData: c.state.docData,\n\t\t\tlastModified: c.state.lastModified,\n\t\t}),\n\t},\n});\n\n// Register actors for use.\nexport const registry = setup({\n\tuse: { yjsDocument },\n});\n",
@@ -100,7 +100,7 @@ export const examples: ExampleData[] = [
       "tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"ESNext\",\n    \"skipLibCheck\": true,\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react-jsx\",\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noFallthroughCasesInSwitch\": true\n  },\n  \"include\": [\"src\", \"tests\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n",
       "vite.config.ts": "import react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [react()],\n\troot: \"src/frontend\",\n\tserver: {\n\t\tport: 3000,\n\t},\n\tbuild: {\n\t\toutDir: \"../../dist\",\n\t\temptyOutDir: true,\n\t},\n});\n",
       "vitest.config.ts": "import { defineConfig } from \"vitest/config\";\n\nexport default defineConfig({\n\ttest: {\n\t\tenvironment: \"node\",\n\t},\n});\n",
-      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { Contact } from \"../backend/types\";\nimport type { registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:8080\");\n\nexport function App() {\n\tconst [contacts, setContacts] = useState<Contact[]>([]);\n\tconst [name, setName] = useState(\"\");\n\tconst [email, setEmail] = useState(\"\");\n\tconst [phone, setPhone] = useState(\"\");\n\tconst [syncStatus, setSyncStatus] = useState<\"Idle\" | \"Syncing\" | \"Synced\" | \"Offline\">(\"Idle\");\n\tconst [stats, setStats] = useState({ totalContacts: 0, lastSyncTime: 0, deletedContacts: 0 });\n\n\tconst lastSyncTime = useRef(0);\n\tconst syncIntervalRef = useRef<NodeJS.Timeout | null>(null);\n\n\tconst contactsActor = useActor({\n\t\tname: \"contacts\",\n\t\tkey: [\"global\"],\n\t});\n\n\t// Load initial contacts and stats\n\tuseEffect(() => {\n\t\tif (!contactsActor.connection) return;\n\n\t\tconst loadInitialData = async () => {\n\t\t\ttry {\n\t\t\t\tconst data = await contactsActor.connection!.getChanges(0);\n\t\t\t\tsetContacts(data.changes);\n\t\t\t\tlastSyncTime.current = data.timestamp;\n\t\t\t\tsetSyncStatus(\"Synced\");\n\n\t\t\t\tconst statsData = await contactsActor.connection!.getSyncStats();\n\t\t\t\tsetStats(statsData);\n\t\t\t} catch (error) {\n\t\t\t\tsetSyncStatus(\"Offline\");\n\t\t\t}\n\t\t};\n\n\t\tloadInitialData();\n\t}, [contactsActor.connection]);\n\n\t// Handle contact events from other clients\n\tcontactsActor.useEvent(\"contactsChanged\", ({ contacts: updatedContacts }: { contacts: Contact[] }) => {\n\t\tsetContacts((prev) => {\n\t\t\tconst contactMap = new Map(prev.map((c) => [c.id, c]));\n\n\t\t\tupdatedContacts.forEach((contact) => {\n\t\t\t\tconst existing = contactMap.get(contact.id);\n\t\t\t\tif (!existing || existing.updatedAt < contact.updatedAt) {\n\t\t\t\t\tcontactMap.set(contact.id, contact);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn Array.from(contactMap.values()).filter(c => c.name !== \"\");\n\t\t});\n\n\t\t// Update stats when contacts change\n\t\tif (contactsActor.connection) {\n\t\t\tcontactsActor.connection.getSyncStats().then(setStats);\n\t\t}\n\t});\n\n\t// Periodic sync - every 5 seconds\n\tuseEffect(() => {\n\t\tif (!contactsActor.connection) return;\n\n\t\tconst sync = async () => {\n\t\t\tsetSyncStatus(\"Syncing\");\n\n\t\t\ttry {\n\t\t\t\t// Get remote changes\n\t\t\t\tconst changes = await contactsActor.connection!.getChanges(lastSyncTime.current);\n\n\t\t\t\t// Apply remote changes\n\t\t\t\tif (changes.changes.length > 0) {\n\t\t\t\t\tsetContacts((prev) => {\n\t\t\t\t\t\tconst contactMap = new Map(prev.map((c) => [c.id, c]));\n\n\t\t\t\t\t\tchanges.changes.forEach((contact) => {\n\t\t\t\t\t\t\tconst existing = contactMap.get(contact.id);\n\t\t\t\t\t\t\tif (!existing || existing.updatedAt < contact.updatedAt) {\n\t\t\t\t\t\t\t\tcontactMap.set(contact.id, contact);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn Array.from(contactMap.values()).filter(c => c.name !== \"\");\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\t// Push local changes\n\t\t\t\tconst localChanges = contacts.filter(\n\t\t\t\t\t(c) => c.updatedAt > lastSyncTime.current,\n\t\t\t\t);\n\t\t\t\tif (localChanges.length > 0) {\n\t\t\t\t\tawait contactsActor.connection!.pushChanges(localChanges);\n\t\t\t\t}\n\n\t\t\t\tlastSyncTime.current = changes.timestamp;\n\t\t\t\tsetSyncStatus(\"Synced\");\n\n\t\t\t\t// Update stats\n\t\t\t\tconst statsData = await contactsActor.connection!.getSyncStats();\n\t\t\t\tsetStats(statsData);\n\t\t\t} catch (error) {\n\t\t\t\tsetSyncStatus(\"Offline\");\n\t\t\t}\n\t\t};\n\n\t\tsyncIntervalRef.current = setInterval(sync, 5000);\n\n\t\treturn () => {\n\t\t\tif (syncIntervalRef.current) {\n\t\t\t\tclearInterval(syncIntervalRef.current);\n\t\t\t\tsyncIntervalRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [contactsActor.connection, contacts]);\n\n\t// Add new contact (local first)\n\tconst addContact = async () => {\n\t\tif (!name.trim()) return;\n\n\t\tconst newContact: Contact = {\n\t\t\tid: Date.now().toString(),\n\t\t\tname,\n\t\t\temail,\n\t\t\tphone,\n\t\t\tupdatedAt: Date.now(),\n\t\t};\n\n\t\t// Add locally first for immediate UI feedback\n\t\tsetContacts((prev) => [...prev, newContact]);\n\n\t\t// Then sync to server\n\t\tif (contactsActor.connection) {\n\t\t\ttry {\n\t\t\t\tawait contactsActor.connection.pushChanges([newContact]);\n\t\t\t\tconst statsData = await contactsActor.connection.getSyncStats();\n\t\t\t\tsetStats(statsData);\n\t\t\t} catch (error) {\n\t\t\t\tsetSyncStatus(\"Offline\");\n\t\t\t}\n\t\t}\n\n\t\tsetName(\"\");\n\t\tsetEmail(\"\");\n\t\tsetPhone(\"\");\n\t};\n\n\t// Delete contact (implemented as update with empty name)\n\tconst deleteContact = async (id: string) => {\n\t\tconst deletedContact = contacts.find(c => c.id === id);\n\t\tif (!deletedContact) return;\n\n\t\tconst updatedContact: Contact = {\n\t\t\t...deletedContact,\n\t\t\tname: \"\", // Mark as deleted\n\t\t\tupdatedAt: Date.now()\n\t\t};\n\n\t\t// Remove locally first for immediate UI feedback\n\t\tsetContacts((prev) => prev.filter((c) => c.id !== id));\n\n\t\t// Then sync to server\n\t\tif (contactsActor.connection) {\n\t\t\ttry {\n\t\t\t\tawait contactsActor.connection.pushChanges([updatedContact]);\n\t\t\t\tconst statsData = await contactsActor.connection.getSyncStats();\n\t\t\t\tsetStats(statsData);\n\t\t\t} catch (error) {\n\t\t\t\tsetSyncStatus(\"Offline\");\n\t\t\t}\n\t\t}\n\t};\n\n\t// Manual sync\n\tconst handleSync = async () => {\n\t\tif (!contactsActor.connection) return;\n\n\t\tsetSyncStatus(\"Syncing\");\n\n\t\ttry {\n\t\t\t// Push all contacts\n\t\t\tawait contactsActor.connection.pushChanges(contacts);\n\n\t\t\t// Get all changes\n\t\t\tconst changes = await contactsActor.connection.getChanges(0);\n\n\t\t\tsetContacts(changes.changes.filter(c => c.name !== \"\"));\n\t\t\tlastSyncTime.current = changes.timestamp;\n\t\t\tsetSyncStatus(\"Synced\");\n\n\t\t\t// Update stats\n\t\t\tconst statsData = await contactsActor.connection.getSyncStats();\n\t\t\tsetStats(statsData);\n\t\t} catch (error) {\n\t\t\tsetSyncStatus(\"Offline\");\n\t\t}\n\t};\n\n\t// Reset all data\n\tconst handleReset = async () => {\n\t\tif (!contactsActor.connection) return;\n\n\t\ttry {\n\t\t\tawait contactsActor.connection.reset();\n\t\t\tsetContacts([]);\n\t\t\tlastSyncTime.current = Date.now();\n\t\t\tsetSyncStatus(\"Synced\");\n\t\t\tsetStats({ totalContacts: 0, lastSyncTime: Date.now(), deletedContacts: 0 });\n\t\t} catch (error) {\n\t\t\tsetSyncStatus(\"Offline\");\n\t\t}\n\t};\n\n\t// Handle form submission\n\tconst handleSubmit = (e: React.FormEvent) => {\n\t\te.preventDefault();\n\t\taddContact();\n\t};\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>Sync Contacts</h1>\n\t\t\t\t<div className=\"sync-status\">\n\t\t\t\t\t<span className={`status-indicator status-${syncStatus.toLowerCase()}`}>\n\t\t\t\t\t\t{syncStatus}\n\t\t\t\t\t</span>\n\t\t\t\t\t<button \n\t\t\t\t\t\tclassName=\"sync-button\" \n\t\t\t\t\t\tonClick={handleSync}\n\t\t\t\t\t\tdisabled={!contactsActor.connection || syncStatus === \"Syncing\"}\n\t\t\t\t\t>\n\t\t\t\t\t\tSync Now\n\t\t\t\t\t</button>\n\t\t\t\t\t<button \n\t\t\t\t\t\tclassName=\"sync-button\" \n\t\t\t\t\t\tonClick={handleReset}\n\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t\tstyle={{ backgroundColor: \"#dc3545\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\tReset\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"info-box\">\n\t\t\t\t<h3>How it works</h3>\n\t\t\t\t<p>\n\t\t\t\t\tThis contact sync system demonstrates offline-first synchronization with conflict resolution. \n\t\t\t\t\tAdd contacts and they'll sync across all connected clients. The system handles conflicts using \n\t\t\t\t\t\"last write wins\" based on timestamps, and supports offline operation with automatic sync when reconnected.\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"add-contact-section\">\n\t\t\t\t<h3>Add New Contact</h3>\n\t\t\t\t<form onSubmit={handleSubmit} className=\"contact-form\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tplaceholder=\"Name *\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tonChange={(e) => setName(e.target.value)}\n\t\t\t\t\t\trequired\n\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t/>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\tplaceholder=\"Email\"\n\t\t\t\t\t\tvalue={email}\n\t\t\t\t\t\tonChange={(e) => setEmail(e.target.value)}\n\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t/>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\t\tplaceholder=\"Phone\"\n\t\t\t\t\t\tvalue={phone}\n\t\t\t\t\t\tonChange={(e) => setPhone(e.target.value)}\n\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t/>\n\t\t\t\t\t<button \n\t\t\t\t\t\ttype=\"submit\" \n\t\t\t\t\t\tclassName=\"add-button\"\n\t\t\t\t\t\tdisabled={!contactsActor.connection || !name.trim()}\n\t\t\t\t\t>\n\t\t\t\t\t\tAdd Contact\n\t\t\t\t\t</button>\n\t\t\t\t</form>\n\t\t\t</div>\n\n\t\t\t<div className=\"contacts-list\">\n\t\t\t\t<h3>Contacts ({contacts.length})</h3>\n\t\t\t\t{contacts.length === 0 ? (\n\t\t\t\t\t<div className=\"empty-state\">\n\t\t\t\t\t\tNo contacts yet. Add some contacts to get started!\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\tcontacts.map((contact) => (\n\t\t\t\t\t\t<div key={contact.id} className=\"contact-item\">\n\t\t\t\t\t\t\t<div className=\"contact-info\">\n\t\t\t\t\t\t\t\t<div className=\"contact-name\">{contact.name}</div>\n\t\t\t\t\t\t\t\t<div className=\"contact-details\">\n\t\t\t\t\t\t\t\t\t{contact.email && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"contact-email\">📧 {contact.email}</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{contact.phone && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"contact-phone\">📞 {contact.phone}</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"delete-button\"\n\t\t\t\t\t\t\t\tonClick={() => deleteContact(contact.id)}\n\t\t\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div className=\"stats\">\n\t\t\t\t<div className=\"stat-item\">\n\t\t\t\t\t<div className=\"stat-value\">{stats.totalContacts}</div>\n\t\t\t\t\t<div className=\"stat-label\">Total Contacts</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"stat-item\">\n\t\t\t\t\t<div className=\"stat-value\">{stats.deletedContacts}</div>\n\t\t\t\t\t<div className=\"stat-label\">Deleted Items</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"stat-item\">\n\t\t\t\t\t<div className=\"stat-value\">\n\t\t\t\t\t\t{stats.lastSyncTime ? new Date(stats.lastSyncTime).toLocaleTimeString() : \"—\"}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"stat-label\">Last Sync</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
+      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { Contact } from \"../backend/types\";\nimport type { registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:6420\");\n\nexport function App() {\n\tconst [contacts, setContacts] = useState<Contact[]>([]);\n\tconst [name, setName] = useState(\"\");\n\tconst [email, setEmail] = useState(\"\");\n\tconst [phone, setPhone] = useState(\"\");\n\tconst [syncStatus, setSyncStatus] = useState<\"Idle\" | \"Syncing\" | \"Synced\" | \"Offline\">(\"Idle\");\n\tconst [stats, setStats] = useState({ totalContacts: 0, lastSyncTime: 0, deletedContacts: 0 });\n\n\tconst lastSyncTime = useRef(0);\n\tconst syncIntervalRef = useRef<NodeJS.Timeout | null>(null);\n\n\tconst contactsActor = useActor({\n\t\tname: \"contacts\",\n\t\tkey: [\"global\"],\n\t});\n\n\t// Load initial contacts and stats\n\tuseEffect(() => {\n\t\tif (!contactsActor.connection) return;\n\n\t\tconst loadInitialData = async () => {\n\t\t\ttry {\n\t\t\t\tconst data = await contactsActor.connection!.getChanges(0);\n\t\t\t\tsetContacts(data.changes);\n\t\t\t\tlastSyncTime.current = data.timestamp;\n\t\t\t\tsetSyncStatus(\"Synced\");\n\n\t\t\t\tconst statsData = await contactsActor.connection!.getSyncStats();\n\t\t\t\tsetStats(statsData);\n\t\t\t} catch (error) {\n\t\t\t\tsetSyncStatus(\"Offline\");\n\t\t\t}\n\t\t};\n\n\t\tloadInitialData();\n\t}, [contactsActor.connection]);\n\n\t// Handle contact events from other clients\n\tcontactsActor.useEvent(\"contactsChanged\", ({ contacts: updatedContacts }: { contacts: Contact[] }) => {\n\t\tsetContacts((prev) => {\n\t\t\tconst contactMap = new Map(prev.map((c) => [c.id, c]));\n\n\t\t\tupdatedContacts.forEach((contact) => {\n\t\t\t\tconst existing = contactMap.get(contact.id);\n\t\t\t\tif (!existing || existing.updatedAt < contact.updatedAt) {\n\t\t\t\t\tcontactMap.set(contact.id, contact);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn Array.from(contactMap.values()).filter(c => c.name !== \"\");\n\t\t});\n\n\t\t// Update stats when contacts change\n\t\tif (contactsActor.connection) {\n\t\t\tcontactsActor.connection.getSyncStats().then(setStats);\n\t\t}\n\t});\n\n\t// Periodic sync - every 5 seconds\n\tuseEffect(() => {\n\t\tif (!contactsActor.connection) return;\n\n\t\tconst sync = async () => {\n\t\t\tsetSyncStatus(\"Syncing\");\n\n\t\t\ttry {\n\t\t\t\t// Get remote changes\n\t\t\t\tconst changes = await contactsActor.connection!.getChanges(lastSyncTime.current);\n\n\t\t\t\t// Apply remote changes\n\t\t\t\tif (changes.changes.length > 0) {\n\t\t\t\t\tsetContacts((prev) => {\n\t\t\t\t\t\tconst contactMap = new Map(prev.map((c) => [c.id, c]));\n\n\t\t\t\t\t\tchanges.changes.forEach((contact) => {\n\t\t\t\t\t\t\tconst existing = contactMap.get(contact.id);\n\t\t\t\t\t\t\tif (!existing || existing.updatedAt < contact.updatedAt) {\n\t\t\t\t\t\t\t\tcontactMap.set(contact.id, contact);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn Array.from(contactMap.values()).filter(c => c.name !== \"\");\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\t// Push local changes\n\t\t\t\tconst localChanges = contacts.filter(\n\t\t\t\t\t(c) => c.updatedAt > lastSyncTime.current,\n\t\t\t\t);\n\t\t\t\tif (localChanges.length > 0) {\n\t\t\t\t\tawait contactsActor.connection!.pushChanges(localChanges);\n\t\t\t\t}\n\n\t\t\t\tlastSyncTime.current = changes.timestamp;\n\t\t\t\tsetSyncStatus(\"Synced\");\n\n\t\t\t\t// Update stats\n\t\t\t\tconst statsData = await contactsActor.connection!.getSyncStats();\n\t\t\t\tsetStats(statsData);\n\t\t\t} catch (error) {\n\t\t\t\tsetSyncStatus(\"Offline\");\n\t\t\t}\n\t\t};\n\n\t\tsyncIntervalRef.current = setInterval(sync, 5000);\n\n\t\treturn () => {\n\t\t\tif (syncIntervalRef.current) {\n\t\t\t\tclearInterval(syncIntervalRef.current);\n\t\t\t\tsyncIntervalRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [contactsActor.connection, contacts]);\n\n\t// Add new contact (local first)\n\tconst addContact = async () => {\n\t\tif (!name.trim()) return;\n\n\t\tconst newContact: Contact = {\n\t\t\tid: Date.now().toString(),\n\t\t\tname,\n\t\t\temail,\n\t\t\tphone,\n\t\t\tupdatedAt: Date.now(),\n\t\t};\n\n\t\t// Add locally first for immediate UI feedback\n\t\tsetContacts((prev) => [...prev, newContact]);\n\n\t\t// Then sync to server\n\t\tif (contactsActor.connection) {\n\t\t\ttry {\n\t\t\t\tawait contactsActor.connection.pushChanges([newContact]);\n\t\t\t\tconst statsData = await contactsActor.connection.getSyncStats();\n\t\t\t\tsetStats(statsData);\n\t\t\t} catch (error) {\n\t\t\t\tsetSyncStatus(\"Offline\");\n\t\t\t}\n\t\t}\n\n\t\tsetName(\"\");\n\t\tsetEmail(\"\");\n\t\tsetPhone(\"\");\n\t};\n\n\t// Delete contact (implemented as update with empty name)\n\tconst deleteContact = async (id: string) => {\n\t\tconst deletedContact = contacts.find(c => c.id === id);\n\t\tif (!deletedContact) return;\n\n\t\tconst updatedContact: Contact = {\n\t\t\t...deletedContact,\n\t\t\tname: \"\", // Mark as deleted\n\t\t\tupdatedAt: Date.now()\n\t\t};\n\n\t\t// Remove locally first for immediate UI feedback\n\t\tsetContacts((prev) => prev.filter((c) => c.id !== id));\n\n\t\t// Then sync to server\n\t\tif (contactsActor.connection) {\n\t\t\ttry {\n\t\t\t\tawait contactsActor.connection.pushChanges([updatedContact]);\n\t\t\t\tconst statsData = await contactsActor.connection.getSyncStats();\n\t\t\t\tsetStats(statsData);\n\t\t\t} catch (error) {\n\t\t\t\tsetSyncStatus(\"Offline\");\n\t\t\t}\n\t\t}\n\t};\n\n\t// Manual sync\n\tconst handleSync = async () => {\n\t\tif (!contactsActor.connection) return;\n\n\t\tsetSyncStatus(\"Syncing\");\n\n\t\ttry {\n\t\t\t// Push all contacts\n\t\t\tawait contactsActor.connection.pushChanges(contacts);\n\n\t\t\t// Get all changes\n\t\t\tconst changes = await contactsActor.connection.getChanges(0);\n\n\t\t\tsetContacts(changes.changes.filter(c => c.name !== \"\"));\n\t\t\tlastSyncTime.current = changes.timestamp;\n\t\t\tsetSyncStatus(\"Synced\");\n\n\t\t\t// Update stats\n\t\t\tconst statsData = await contactsActor.connection.getSyncStats();\n\t\t\tsetStats(statsData);\n\t\t} catch (error) {\n\t\t\tsetSyncStatus(\"Offline\");\n\t\t}\n\t};\n\n\t// Reset all data\n\tconst handleReset = async () => {\n\t\tif (!contactsActor.connection) return;\n\n\t\ttry {\n\t\t\tawait contactsActor.connection.reset();\n\t\t\tsetContacts([]);\n\t\t\tlastSyncTime.current = Date.now();\n\t\t\tsetSyncStatus(\"Synced\");\n\t\t\tsetStats({ totalContacts: 0, lastSyncTime: Date.now(), deletedContacts: 0 });\n\t\t} catch (error) {\n\t\t\tsetSyncStatus(\"Offline\");\n\t\t}\n\t};\n\n\t// Handle form submission\n\tconst handleSubmit = (e: React.FormEvent) => {\n\t\te.preventDefault();\n\t\taddContact();\n\t};\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>Sync Contacts</h1>\n\t\t\t\t<div className=\"sync-status\">\n\t\t\t\t\t<span className={`status-indicator status-${syncStatus.toLowerCase()}`}>\n\t\t\t\t\t\t{syncStatus}\n\t\t\t\t\t</span>\n\t\t\t\t\t<button \n\t\t\t\t\t\tclassName=\"sync-button\" \n\t\t\t\t\t\tonClick={handleSync}\n\t\t\t\t\t\tdisabled={!contactsActor.connection || syncStatus === \"Syncing\"}\n\t\t\t\t\t>\n\t\t\t\t\t\tSync Now\n\t\t\t\t\t</button>\n\t\t\t\t\t<button \n\t\t\t\t\t\tclassName=\"sync-button\" \n\t\t\t\t\t\tonClick={handleReset}\n\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t\tstyle={{ backgroundColor: \"#dc3545\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\tReset\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"info-box\">\n\t\t\t\t<h3>How it works</h3>\n\t\t\t\t<p>\n\t\t\t\t\tThis contact sync system demonstrates offline-first synchronization with conflict resolution. \n\t\t\t\t\tAdd contacts and they'll sync across all connected clients. The system handles conflicts using \n\t\t\t\t\t\"last write wins\" based on timestamps, and supports offline operation with automatic sync when reconnected.\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"add-contact-section\">\n\t\t\t\t<h3>Add New Contact</h3>\n\t\t\t\t<form onSubmit={handleSubmit} className=\"contact-form\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tplaceholder=\"Name *\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tonChange={(e) => setName(e.target.value)}\n\t\t\t\t\t\trequired\n\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t/>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\tplaceholder=\"Email\"\n\t\t\t\t\t\tvalue={email}\n\t\t\t\t\t\tonChange={(e) => setEmail(e.target.value)}\n\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t/>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\t\tplaceholder=\"Phone\"\n\t\t\t\t\t\tvalue={phone}\n\t\t\t\t\t\tonChange={(e) => setPhone(e.target.value)}\n\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t/>\n\t\t\t\t\t<button \n\t\t\t\t\t\ttype=\"submit\" \n\t\t\t\t\t\tclassName=\"add-button\"\n\t\t\t\t\t\tdisabled={!contactsActor.connection || !name.trim()}\n\t\t\t\t\t>\n\t\t\t\t\t\tAdd Contact\n\t\t\t\t\t</button>\n\t\t\t\t</form>\n\t\t\t</div>\n\n\t\t\t<div className=\"contacts-list\">\n\t\t\t\t<h3>Contacts ({contacts.length})</h3>\n\t\t\t\t{contacts.length === 0 ? (\n\t\t\t\t\t<div className=\"empty-state\">\n\t\t\t\t\t\tNo contacts yet. Add some contacts to get started!\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\tcontacts.map((contact) => (\n\t\t\t\t\t\t<div key={contact.id} className=\"contact-item\">\n\t\t\t\t\t\t\t<div className=\"contact-info\">\n\t\t\t\t\t\t\t\t<div className=\"contact-name\">{contact.name}</div>\n\t\t\t\t\t\t\t\t<div className=\"contact-details\">\n\t\t\t\t\t\t\t\t\t{contact.email && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"contact-email\">📧 {contact.email}</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{contact.phone && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"contact-phone\">📞 {contact.phone}</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"delete-button\"\n\t\t\t\t\t\t\t\tonClick={() => deleteContact(contact.id)}\n\t\t\t\t\t\t\t\tdisabled={!contactsActor.connection}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div className=\"stats\">\n\t\t\t\t<div className=\"stat-item\">\n\t\t\t\t\t<div className=\"stat-value\">{stats.totalContacts}</div>\n\t\t\t\t\t<div className=\"stat-label\">Total Contacts</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"stat-item\">\n\t\t\t\t\t<div className=\"stat-value\">{stats.deletedContacts}</div>\n\t\t\t\t\t<div className=\"stat-label\">Deleted Items</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"stat-item\">\n\t\t\t\t\t<div className=\"stat-value\">\n\t\t\t\t\t\t{stats.lastSyncTime ? new Date(stats.lastSyncTime).toLocaleTimeString() : \"—\"}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"stat-label\">Last Sync</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
       "src/frontend/main.tsx": "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { App } from \"./App\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"Root element not found\");\n\ncreateRoot(root).render(\n\t<StrictMode>\n\t\t<App />\n\t</StrictMode>\n);",
       "src/frontend/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Sync Contacts - RivetKit</title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f0f0f0;\n        }\n        .app-container {\n            max-width: 800px;\n            margin: 0 auto;\n            background-color: white;\n            padding: 30px;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        }\n        .header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 30px;\n            padding-bottom: 20px;\n            border-bottom: 2px solid #e9ecef;\n        }\n        .header h1 {\n            color: #333;\n            margin: 0;\n        }\n        .sync-status {\n            display: flex;\n            align-items: center;\n            gap: 15px;\n        }\n        .status-indicator {\n            padding: 8px 12px;\n            border-radius: 4px;\n            font-weight: bold;\n            font-size: 14px;\n        }\n        .status-synced {\n            background-color: #d4edda;\n            color: #155724;\n        }\n        .status-syncing {\n            background-color: #d1ecf1;\n            color: #0c5460;\n        }\n        .status-offline {\n            background-color: #f8d7da;\n            color: #721c24;\n        }\n        .sync-button {\n            padding: 8px 16px;\n            background-color: #007bff;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 14px;\n        }\n        .sync-button:hover {\n            background-color: #0056b3;\n        }\n        .sync-button:disabled {\n            background-color: #6c757d;\n            cursor: not-allowed;\n        }\n        .add-contact-section {\n            background-color: #f8f9fa;\n            border: 1px solid #dee2e6;\n            border-radius: 8px;\n            padding: 20px;\n            margin-bottom: 30px;\n        }\n        .add-contact-section h3 {\n            margin: 0 0 15px 0;\n            color: #495057;\n        }\n        .contact-form {\n            display: grid;\n            grid-template-columns: 1fr 1fr 1fr auto;\n            gap: 10px;\n            align-items: center;\n        }\n        .contact-form input {\n            padding: 10px;\n            border: 1px solid #ced4da;\n            border-radius: 4px;\n            font-size: 14px;\n        }\n        .contact-form input:focus {\n            outline: none;\n            border-color: #80bdff;\n            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);\n        }\n        .add-button {\n            padding: 10px 20px;\n            background-color: #28a745;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 14px;\n            white-space: nowrap;\n        }\n        .add-button:hover {\n            background-color: #218838;\n        }\n        .add-button:disabled {\n            background-color: #6c757d;\n            cursor: not-allowed;\n        }\n        .contacts-list {\n            display: flex;\n            flex-direction: column;\n            gap: 15px;\n        }\n        .contacts-list h3 {\n            margin: 0 0 15px 0;\n            color: #495057;\n        }\n        .contact-item {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 15px;\n            background-color: #f8f9fa;\n            border: 1px solid #dee2e6;\n            border-radius: 6px;\n        }\n        .contact-info {\n            flex: 1;\n        }\n        .contact-name {\n            font-size: 18px;\n            font-weight: bold;\n            color: #333;\n            margin-bottom: 5px;\n        }\n        .contact-details {\n            display: flex;\n            gap: 20px;\n            color: #6c757d;\n            font-size: 14px;\n        }\n        .contact-email, .contact-phone {\n            display: flex;\n            align-items: center;\n            gap: 5px;\n        }\n        .delete-button {\n            padding: 8px 16px;\n            background-color: #dc3545;\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 14px;\n        }\n        .delete-button:hover {\n            background-color: #c82333;\n        }\n        .empty-state {\n            text-align: center;\n            padding: 40px 20px;\n            color: #6c757d;\n            font-style: italic;\n        }\n        .info-box {\n            background-color: #e8f4f8;\n            border: 1px solid #b8d4da;\n            border-radius: 6px;\n            padding: 15px;\n            margin-bottom: 20px;\n        }\n        .info-box h3 {\n            margin: 0 0 10px 0;\n            color: #2c5aa0;\n        }\n        .info-box p {\n            margin: 0;\n            color: #555;\n            line-height: 1.5;\n        }\n        .stats {\n            display: flex;\n            justify-content: space-around;\n            margin-top: 20px;\n            padding: 15px;\n            background-color: #f8f9fa;\n            border-radius: 6px;\n        }\n        .stat-item {\n            text-align: center;\n        }\n        .stat-value {\n            font-size: 24px;\n            font-weight: bold;\n            color: #007bff;\n        }\n        .stat-label {\n            color: #6c757d;\n            font-size: 14px;\n        }\n        @media (max-width: 768px) {\n            .contact-form {\n                grid-template-columns: 1fr;\n                gap: 15px;\n            }\n            .contact-item {\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 15px;\n            }\n            .contact-details {\n                flex-direction: column;\n                gap: 5px;\n            }\n        }\n    </style>\n</head>\n<body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/main.tsx\"></script>\n</body>\n</html>",
       "src/backend/types.ts": "export type Contact = {\n\tid: string;\n\tname: string;\n\temail: string;\n\tphone: string;\n\tupdatedAt: number;\n};\n",
@@ -125,7 +125,7 @@ export const examples: ExampleData[] = [
       "tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"esnext\",\n    \"lib\": [\"esnext\", \"dom\"],\n    \"jsx\": \"react-jsx\",\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"types\": [\"node\", \"vite/client\"],\n    \"resolveJsonModule\": true,\n    \"allowJs\": true,\n    \"checkJs\": false,\n    \"noEmit\": true,\n    \"isolatedModules\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true\n  },\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n",
       "vite.config.ts": "import react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [react()],\n\troot: \"src/frontend\",\n\tserver: {\n\t\tport: 3000,\n\t},\n});\n",
       "vitest.config.ts": "import { defineConfig } from \"vitest/config\";\n\nexport default defineConfig({\n\ttest: {\n\t\tinclude: [\"tests/**/*.test.ts\"],\n\t},\n});\n",
-      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useState } from \"react\";\nimport type { Note, registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:8080\");\n\nfunction NotesApp({ userId }: { userId: string }) {\n\tconst [notes, setNotes] = useState<Note[]>([]);\n\tconst [newNote, setNewNote] = useState(\"\");\n\tconst [editingNote, setEditingNote] = useState<string | null>(null);\n\tconst [editContent, setEditContent] = useState(\"\");\n\n\tconst notesActor = useActor({\n\t\tname: \"notes\",\n\t\tkey: [userId],\n\t\tparams: { userId, token: \"demo-token\" },\n\t});\n\n\tuseEffect(() => {\n\t\tif (notesActor.connection) {\n\t\t\tnotesActor.connection.getNotes().then(setNotes);\n\t\t}\n\t}, [notesActor.connection]);\n\n\tnotesActor.useEvent(\"noteAdded\", (note: Note) => {\n\t\tsetNotes((prev) => [...prev, note]);\n\t});\n\n\tnotesActor.useEvent(\"noteUpdated\", (updatedNote: Note) => {\n\t\tsetNotes((prev) =>\n\t\t\tprev.map((note) => (note.id === updatedNote.id ? updatedNote : note))\n\t\t);\n\t\tsetEditingNote(null);\n\t});\n\n\tnotesActor.useEvent(\"noteDeleted\", ({ id }: { id: string }) => {\n\t\tsetNotes((prev) => prev.filter((note) => note.id !== id));\n\t});\n\n\tconst addNote = async () => {\n\t\tif (notesActor.connection && newNote.trim()) {\n\t\t\tawait notesActor.connection.updateNote({ \n\t\t\t\tid: `note-${Date.now()}`, \n\t\t\t\tcontent: newNote \n\t\t\t});\n\t\t\tsetNewNote(\"\");\n\t\t}\n\t};\n\n\tconst startEdit = (note: Note) => {\n\t\tsetEditingNote(note.id);\n\t\tsetEditContent(note.content);\n\t};\n\n\tconst saveEdit = async () => {\n\t\tif (notesActor.connection && editingNote) {\n\t\t\tawait notesActor.connection.updateNote({ \n\t\t\t\tid: editingNote, \n\t\t\t\tcontent: editContent \n\t\t\t});\n\t\t}\n\t};\n\n\tconst cancelEdit = () => {\n\t\tsetEditingNote(null);\n\t\tsetEditContent(\"\");\n\t};\n\n\tconst deleteNote = async (id: string) => {\n\t\tif (notesActor.connection && confirm(\"Are you sure you want to delete this note?\")) {\n\t\t\tawait notesActor.connection.deleteNote({ id });\n\t\t}\n\t};\n\n\tconst handleKeyPress = (e: React.KeyboardEvent, action: () => void) => {\n\t\tif (e.key === \"Enter\") {\n\t\t\taction();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"notes-section\">\n\t\t\t<div className={`connection-status ${notesActor.connection ? 'connected' : 'disconnected'}`}>\n\t\t\t\t{notesActor.connection ? '✓ Connected' : '⚠ Disconnected'}\n\t\t\t</div>\n\n\t\t\t<div className=\"add-note\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={newNote}\n\t\t\t\t\tonChange={(e) => setNewNote(e.target.value)}\n\t\t\t\t\tonKeyPress={(e) => handleKeyPress(e, addNote)}\n\t\t\t\t\tplaceholder=\"Enter a new note...\"\n\t\t\t\t\tdisabled={!notesActor.connection}\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\tonClick={addNote}\n\t\t\t\t\tdisabled={!notesActor.connection || !newNote.trim()}\n\t\t\t\t>\n\t\t\t\t\tAdd Note\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t{notes.length === 0 ? (\n\t\t\t\t<div className=\"empty-state\">\n\t\t\t\t\tNo notes yet. Add your first note above!\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<ul className=\"notes-list\">\n\t\t\t\t\t{notes\n\t\t\t\t\t\t.sort((a, b) => b.updatedAt - a.updatedAt)\n\t\t\t\t\t\t.map((note) => (\n\t\t\t\t\t\t<li \n\t\t\t\t\t\t\tkey={note.id} \n\t\t\t\t\t\t\tclassName={`note-item ${editingNote === note.id ? 'edit-mode' : ''}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{editingNote === note.id ? (\n\t\t\t\t\t\t\t\t<div style={{ width: \"100%\" }}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tvalue={editContent}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => setEditContent(e.target.value)}\n\t\t\t\t\t\t\t\t\t\tonKeyPress={(e) => handleKeyPress(e, saveEdit)}\n\t\t\t\t\t\t\t\t\t\tclassName=\"edit-input\"\n\t\t\t\t\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div className=\"edit-actions\">\n\t\t\t\t\t\t\t\t\t\t<button onClick={saveEdit} className=\"save-btn\">\n\t\t\t\t\t\t\t\t\t\t\tSave\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t<button onClick={cancelEdit} className=\"cancel-btn\">\n\t\t\t\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<div className=\"note-content\">\n\t\t\t\t\t\t\t\t\t\t<div>{note.content}</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"note-meta\">\n\t\t\t\t\t\t\t\t\t\t\tLast updated: {new Date(note.updatedAt).toLocaleString()}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"note-actions\">\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => startEdit(note)}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"edit-btn\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => deleteNote(note.id)}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"delete-btn\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport function App() {\n\tconst [selectedUser, setSelectedUser] = useState(\"user1\");\n\n\tconst users = [\n\t\t{ id: \"user1\", name: \"Alice\" },\n\t\t{ id: \"user2\", name: \"Bob\" },\n\t\t{ id: \"user3\", name: \"Charlie\" },\n\t];\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>Database Notes</h1>\n\t\t\t\t<p>Persistent note-taking with real-time updates</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"user-selector\">\n\t\t\t\t<label>Select User:</label>\n\t\t\t\t<select\n\t\t\t\t\tvalue={selectedUser}\n\t\t\t\t\tonChange={(e) => setSelectedUser(e.target.value)}\n\t\t\t\t>\n\t\t\t\t\t{users.map((user) => (\n\t\t\t\t\t\t<option key={user.id} value={user.id}>\n\t\t\t\t\t\t\t{user.name} ({user.id})\n\t\t\t\t\t\t</option>\n\t\t\t\t\t))}\n\t\t\t\t</select>\n\t\t\t</div>\n\n\t\t\t<NotesApp key={selectedUser} userId={selectedUser} />\n\t\t</div>\n\t);\n}\n",
+      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useState } from \"react\";\nimport type { Note, registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:6420\");\n\nfunction NotesApp({ userId }: { userId: string }) {\n\tconst [notes, setNotes] = useState<Note[]>([]);\n\tconst [newNote, setNewNote] = useState(\"\");\n\tconst [editingNote, setEditingNote] = useState<string | null>(null);\n\tconst [editContent, setEditContent] = useState(\"\");\n\n\tconst notesActor = useActor({\n\t\tname: \"notes\",\n\t\tkey: [userId],\n\t\tparams: { userId, token: \"demo-token\" },\n\t});\n\n\tuseEffect(() => {\n\t\tif (notesActor.connection) {\n\t\t\tnotesActor.connection.getNotes().then(setNotes);\n\t\t}\n\t}, [notesActor.connection]);\n\n\tnotesActor.useEvent(\"noteAdded\", (note: Note) => {\n\t\tsetNotes((prev) => [...prev, note]);\n\t});\n\n\tnotesActor.useEvent(\"noteUpdated\", (updatedNote: Note) => {\n\t\tsetNotes((prev) =>\n\t\t\tprev.map((note) => (note.id === updatedNote.id ? updatedNote : note))\n\t\t);\n\t\tsetEditingNote(null);\n\t});\n\n\tnotesActor.useEvent(\"noteDeleted\", ({ id }: { id: string }) => {\n\t\tsetNotes((prev) => prev.filter((note) => note.id !== id));\n\t});\n\n\tconst addNote = async () => {\n\t\tif (notesActor.connection && newNote.trim()) {\n\t\t\tawait notesActor.connection.updateNote({ \n\t\t\t\tid: `note-${Date.now()}`, \n\t\t\t\tcontent: newNote \n\t\t\t});\n\t\t\tsetNewNote(\"\");\n\t\t}\n\t};\n\n\tconst startEdit = (note: Note) => {\n\t\tsetEditingNote(note.id);\n\t\tsetEditContent(note.content);\n\t};\n\n\tconst saveEdit = async () => {\n\t\tif (notesActor.connection && editingNote) {\n\t\t\tawait notesActor.connection.updateNote({ \n\t\t\t\tid: editingNote, \n\t\t\t\tcontent: editContent \n\t\t\t});\n\t\t}\n\t};\n\n\tconst cancelEdit = () => {\n\t\tsetEditingNote(null);\n\t\tsetEditContent(\"\");\n\t};\n\n\tconst deleteNote = async (id: string) => {\n\t\tif (notesActor.connection && confirm(\"Are you sure you want to delete this note?\")) {\n\t\t\tawait notesActor.connection.deleteNote({ id });\n\t\t}\n\t};\n\n\tconst handleKeyPress = (e: React.KeyboardEvent, action: () => void) => {\n\t\tif (e.key === \"Enter\") {\n\t\t\taction();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"notes-section\">\n\t\t\t<div className={`connection-status ${notesActor.connection ? 'connected' : 'disconnected'}`}>\n\t\t\t\t{notesActor.connection ? '✓ Connected' : '⚠ Disconnected'}\n\t\t\t</div>\n\n\t\t\t<div className=\"add-note\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={newNote}\n\t\t\t\t\tonChange={(e) => setNewNote(e.target.value)}\n\t\t\t\t\tonKeyPress={(e) => handleKeyPress(e, addNote)}\n\t\t\t\t\tplaceholder=\"Enter a new note...\"\n\t\t\t\t\tdisabled={!notesActor.connection}\n\t\t\t\t/>\n\t\t\t\t<button\n\t\t\t\t\tonClick={addNote}\n\t\t\t\t\tdisabled={!notesActor.connection || !newNote.trim()}\n\t\t\t\t>\n\t\t\t\t\tAdd Note\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t{notes.length === 0 ? (\n\t\t\t\t<div className=\"empty-state\">\n\t\t\t\t\tNo notes yet. Add your first note above!\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<ul className=\"notes-list\">\n\t\t\t\t\t{notes\n\t\t\t\t\t\t.sort((a, b) => b.updatedAt - a.updatedAt)\n\t\t\t\t\t\t.map((note) => (\n\t\t\t\t\t\t<li \n\t\t\t\t\t\t\tkey={note.id} \n\t\t\t\t\t\t\tclassName={`note-item ${editingNote === note.id ? 'edit-mode' : ''}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{editingNote === note.id ? (\n\t\t\t\t\t\t\t\t<div style={{ width: \"100%\" }}>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tvalue={editContent}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => setEditContent(e.target.value)}\n\t\t\t\t\t\t\t\t\t\tonKeyPress={(e) => handleKeyPress(e, saveEdit)}\n\t\t\t\t\t\t\t\t\t\tclassName=\"edit-input\"\n\t\t\t\t\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div className=\"edit-actions\">\n\t\t\t\t\t\t\t\t\t\t<button onClick={saveEdit} className=\"save-btn\">\n\t\t\t\t\t\t\t\t\t\t\tSave\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t<button onClick={cancelEdit} className=\"cancel-btn\">\n\t\t\t\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<div className=\"note-content\">\n\t\t\t\t\t\t\t\t\t\t<div>{note.content}</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"note-meta\">\n\t\t\t\t\t\t\t\t\t\t\tLast updated: {new Date(note.updatedAt).toLocaleString()}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"note-actions\">\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => startEdit(note)}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"edit-btn\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => deleteNote(note.id)}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"delete-btn\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport function App() {\n\tconst [selectedUser, setSelectedUser] = useState(\"user1\");\n\n\tconst users = [\n\t\t{ id: \"user1\", name: \"Alice\" },\n\t\t{ id: \"user2\", name: \"Bob\" },\n\t\t{ id: \"user3\", name: \"Charlie\" },\n\t];\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>Database Notes</h1>\n\t\t\t\t<p>Persistent note-taking with real-time updates</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"user-selector\">\n\t\t\t\t<label>Select User:</label>\n\t\t\t\t<select\n\t\t\t\t\tvalue={selectedUser}\n\t\t\t\t\tonChange={(e) => setSelectedUser(e.target.value)}\n\t\t\t\t>\n\t\t\t\t\t{users.map((user) => (\n\t\t\t\t\t\t<option key={user.id} value={user.id}>\n\t\t\t\t\t\t\t{user.name} ({user.id})\n\t\t\t\t\t\t</option>\n\t\t\t\t\t))}\n\t\t\t\t</select>\n\t\t\t</div>\n\n\t\t\t<NotesApp key={selectedUser} userId={selectedUser} />\n\t\t</div>\n\t);\n}\n",
       "src/frontend/main.tsx": "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { App } from \"./App\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"Root element not found\");\n\ncreateRoot(root).render(\n\t<StrictMode>\n\t\t<App />\n\t</StrictMode>\n);",
       "src/frontend/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Database Notes Example</title>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f5f5f5;\n        }\n        .app-container {\n            max-width: 800px;\n            margin: 0 auto;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            overflow: hidden;\n        }\n        .header {\n            background: #007bff;\n            color: white;\n            padding: 20px;\n            text-align: center;\n        }\n        .header h1 {\n            margin: 0;\n            font-size: 2em;\n        }\n        .header p {\n            margin: 10px 0 0 0;\n            opacity: 0.9;\n        }\n        .user-selector {\n            padding: 20px;\n            border-bottom: 1px solid #eee;\n            background: #f8f9fa;\n        }\n        .user-selector label {\n            display: block;\n            margin-bottom: 8px;\n            font-weight: 500;\n        }\n        .user-selector select {\n            width: 100%;\n            padding: 8px 12px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            font-size: 16px;\n        }\n        .notes-section {\n            padding: 20px;\n        }\n        .add-note {\n            display: flex;\n            gap: 10px;\n            margin-bottom: 20px;\n        }\n        .add-note input {\n            flex: 1;\n            padding: 12px;\n            border: 1px solid #ddd;\n            border-radius: 6px;\n            font-size: 16px;\n        }\n        .add-note button {\n            padding: 12px 24px;\n            background: #28a745;\n            color: white;\n            border: none;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 16px;\n        }\n        .add-note button:disabled {\n            background: #ccc;\n            cursor: not-allowed;\n        }\n        .add-note button:hover:not(:disabled) {\n            background: #218838;\n        }\n        .notes-list {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n        .note-item {\n            background: #f8f9fa;\n            border: 1px solid #dee2e6;\n            border-radius: 6px;\n            padding: 15px;\n            margin-bottom: 10px;\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-start;\n        }\n        .note-content {\n            flex: 1;\n            margin-right: 10px;\n            word-wrap: break-word;\n        }\n        .note-meta {\n            font-size: 0.85em;\n            color: #666;\n            margin-top: 5px;\n        }\n        .note-actions {\n            display: flex;\n            gap: 5px;\n        }\n        .note-actions button {\n            padding: 6px 12px;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 14px;\n        }\n        .edit-btn {\n            background: #ffc107;\n            color: #212529;\n        }\n        .edit-btn:hover {\n            background: #e0a800;\n        }\n        .delete-btn {\n            background: #dc3545;\n            color: white;\n        }\n        .delete-btn:hover {\n            background: #c82333;\n        }\n        .empty-state {\n            text-align: center;\n            color: #666;\n            padding: 40px;\n            font-style: italic;\n        }\n        .connection-status {\n            padding: 10px 20px;\n            font-size: 0.9em;\n            font-weight: 500;\n        }\n        .connection-status.connected {\n            background: #d4edda;\n            color: #155724;\n        }\n        .connection-status.disconnected {\n            background: #f8d7da;\n            color: #721c24;\n        }\n        .edit-mode {\n            background: #fff3cd !important;\n            border-color: #ffc107 !important;\n        }\n        .edit-input {\n            width: 100%;\n            padding: 8px;\n            border: 1px solid #ffc107;\n            border-radius: 4px;\n            font-size: 16px;\n            margin-bottom: 10px;\n        }\n        .edit-actions {\n            display: flex;\n            gap: 5px;\n        }\n        .save-btn {\n            background: #28a745;\n            color: white;\n        }\n        .save-btn:hover {\n            background: #218838;\n        }\n        .cancel-btn {\n            background: #6c757d;\n            color: white;\n        }\n        .cancel-btn:hover {\n            background: #5a6268;\n        }\n    </style>\n</head>\n<body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/main.tsx\"></script>\n</body>\n</html>",
       "src/backend/registry.ts": "import { actor, setup } from \"rivetkit\";\nimport { authenticate } from \"./my-utils\";\n\nexport type Note = { id: string; content: string; updatedAt: number };\n\nexport const notes = actor({\n\t// Persistent state that survives restarts: https://rivet.dev/docs/actors/state\n\tstate: {\n\t\tnotes: [] as Note[],\n\t},\n\n\tactions: {\n\t\t// Callable functions from clients: https://rivet.dev/docs/actors/actions\n\t\tgetNotes: (c) => c.state.notes,\n\n\t\tupdateNote: (c, { id, content }: { id?: string; content: string }) => {\n\t\t\tconst noteIndex = c.state.notes.findIndex((note) => note.id === id);\n\t\t\tlet note: Note;\n\n\t\t\tif (noteIndex >= 0) {\n\t\t\t\t// Update existing note\n\t\t\t\tnote = c.state.notes[noteIndex];\n\t\t\t\tnote.content = content;\n\t\t\t\tnote.updatedAt = Date.now();\n\t\t\t\t// Send events to all connected clients: https://rivet.dev/docs/actors/events\n\t\t\t\tc.broadcast(\"noteUpdated\", note);\n\t\t\t} else {\n\t\t\t\t// Create new note\n\t\t\t\tnote = {\n\t\t\t\t\tid: id || `note-${Date.now()}`,\n\t\t\t\t\tcontent,\n\t\t\t\t\tupdatedAt: Date.now(),\n\t\t\t\t};\n\t\t\t\t// State changes are automatically persisted\n\t\t\t\tc.state.notes.push(note);\n\t\t\t\tc.broadcast(\"noteAdded\", note);\n\t\t\t}\n\n\t\t\treturn note;\n\t\t},\n\n\t\tdeleteNote: (c, { id }: { id: string }) => {\n\t\t\tconst noteIndex = c.state.notes.findIndex((note) => note.id === id);\n\t\t\tif (noteIndex >= 0) {\n\t\t\t\tc.state.notes.splice(noteIndex, 1);\n\t\t\t\tc.broadcast(\"noteDeleted\", { id });\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\treturn false;\n\t\t},\n\t},\n});\n\n// Register actors for use: https://rivet.dev/docs/setup\nexport const registry = setup({\n\tuse: { notes },\n});\n",
@@ -170,7 +170,7 @@ export const examples: ExampleData[] = [
       "tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"esnext\",\n    \"lib\": [\"esnext\", \"dom\"],\n    \"jsx\": \"react-jsx\",\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"types\": [\"node\", \"vite/client\"],\n    \"resolveJsonModule\": true,\n    \"allowJs\": true,\n    \"checkJs\": false,\n    \"noEmit\": true,\n    \"isolatedModules\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"skipLibCheck\": true\n  },\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n",
       "vite.config.ts": "import react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [react()],\n\troot: \"src/frontend\",\n\tserver: {\n\t\tport: 3000,\n\t},\n});\n",
       "vitest.config.ts": "import { defineConfig } from \"vitest/config\";\n\nexport default defineConfig({\n\ttest: {\n\t\tinclude: [\"tests/**/*.test.ts\"],\n\t},\n});\n",
-      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useState } from \"react\";\nimport type { RateLimitResult, registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:8080\");\n\nfunction RateLimiterDemo({ userId }: { userId: string }) {\n\tconst [result, setResult] = useState<RateLimitResult | null>(null);\n\tconst [loading, setLoading] = useState(false);\n\n\tconst rateLimiter = useActor({\n\t\tname: \"rateLimiter\",\n\t\tkey: [userId],\n\t});\n\n\tuseEffect(() => {\n\t\tif (rateLimiter.connection) {\n\t\t\t// Get initial status\n\t\t\trateLimiter.connection.getStatus().then((status) => {\n\t\t\t\tsetResult({\n\t\t\t\t\tallowed: status.remaining > 0,\n\t\t\t\t\tremaining: status.remaining,\n\t\t\t\t\tresetsIn: status.resetsIn,\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}, [rateLimiter.connection]);\n\n\tconst makeRequest = async () => {\n\t\tif (!rateLimiter.connection || loading) return;\n\n\t\tsetLoading(true);\n\t\ttry {\n\t\t\tconst response = await rateLimiter.connection.checkLimit();\n\t\t\tsetResult(response);\n\t\t} finally {\n\t\t\tsetLoading(false);\n\t\t}\n\t};\n\n\tconst resetLimiter = async () => {\n\t\tif (!rateLimiter.connection) return;\n\n\t\tawait rateLimiter.connection.reset();\n\t\t// Get updated status\n\t\tconst status = await rateLimiter.connection.getStatus();\n\t\tsetResult({\n\t\t\tallowed: status.remaining > 0,\n\t\t\tremaining: status.remaining,\n\t\t\tresetsIn: status.resetsIn,\n\t\t});\n\t};\n\n\tconst usagePercentage = result ? ((5 - result.remaining) / 5) * 100 : 0;\n\n\treturn (\n\t\t<div className=\"rate-limiter-demo\">\n\t\t\t<button\n\t\t\t\tclassName=\"request-button\"\n\t\t\t\tonClick={makeRequest}\n\t\t\t\tdisabled={!rateLimiter.connection || loading}\n\t\t\t>\n\t\t\t\t{loading ? \"Making Request...\" : \"Make API Request\"}\n\t\t\t</button>\n\n\t\t\t{result && (\n\t\t\t\t<div className=\"status-display\">\n\t\t\t\t\t<div className=\"status-item\">\n\t\t\t\t\t\t<span className=\"status-label\">Status:</span>\n\t\t\t\t\t\t<span className={`status-value ${result.allowed ? 'allowed' : 'blocked'}`}>\n\t\t\t\t\t\t\t{result.allowed ? \"✓ Request Allowed\" : \"✖ Request Blocked\"}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"status-item\">\n\t\t\t\t\t\t<span className=\"status-label\">Remaining Requests:</span>\n\t\t\t\t\t\t<span className=\"status-value\">{result.remaining} / 5</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"status-item\">\n\t\t\t\t\t\t<span className=\"status-label\">Rate Limit Usage:</span>\n\t\t\t\t\t\t<div style={{ flex: 1, marginLeft: \"20px\" }}>\n\t\t\t\t\t\t\t<div className=\"progress-bar\">\n\t\t\t\t\t\t\t\t<div \n\t\t\t\t\t\t\t\t\tclassName=\"progress-fill\" \n\t\t\t\t\t\t\t\t\tstyle={{ width: `${usagePercentage}%` }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"status-item\">\n\t\t\t\t\t\t<span className=\"status-label\">Resets In:</span>\n\t\t\t\t\t\t<span className=\"status-value\">{result.resetsIn} seconds</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<button className=\"reset-button\" onClick={resetLimiter}>\n\t\t\t\tReset Rate Limiter (Admin)\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n\nexport function App() {\n\tconst [selectedUser, setSelectedUser] = useState(\"user-1\");\n\n\tconst users = [\n\t\t{ id: \"user-1\", name: \"User 1\" },\n\t\t{ id: \"user-2\", name: \"User 2\" },\n\t\t{ id: \"user-3\", name: \"User 3\" },\n\t\t{ id: \"api-client-1\", name: \"API Client 1\" },\n\t\t{ id: \"api-client-2\", name: \"API Client 2\" },\n\t];\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>Rate Limiter Demo</h1>\n\t\t\t\t<p>5 requests per minute per user/client</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"content\">\n\t\t\t\t<div className=\"info-box\">\n\t\t\t\t\t<h3>How it works</h3>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThis rate limiter allows 5 requests per minute per user. Each user gets their own \n\t\t\t\t\t\tindependent rate limit counter. When the limit is exceeded, further requests are \n\t\t\t\t\t\tblocked until the window resets. Switch between users to see isolated rate limiting.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"user-selector\">\n\t\t\t\t\t<label>Select User/Client:</label>\n\t\t\t\t\t<select\n\t\t\t\t\t\tvalue={selectedUser}\n\t\t\t\t\t\tonChange={(e) => setSelectedUser(e.target.value)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{users.map((user) => (\n\t\t\t\t\t\t\t<option key={user.id} value={user.id}>\n\t\t\t\t\t\t\t\t{user.name}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</select>\n\t\t\t\t</div>\n\n\t\t\t\t<RateLimiterDemo key={selectedUser} userId={selectedUser} />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
+      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useState } from \"react\";\nimport type { RateLimitResult, registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:6420\");\n\nfunction RateLimiterDemo({ userId }: { userId: string }) {\n\tconst [result, setResult] = useState<RateLimitResult | null>(null);\n\tconst [loading, setLoading] = useState(false);\n\n\tconst rateLimiter = useActor({\n\t\tname: \"rateLimiter\",\n\t\tkey: [userId],\n\t});\n\n\tuseEffect(() => {\n\t\tif (rateLimiter.connection) {\n\t\t\t// Get initial status\n\t\t\trateLimiter.connection.getStatus().then((status) => {\n\t\t\t\tsetResult({\n\t\t\t\t\tallowed: status.remaining > 0,\n\t\t\t\t\tremaining: status.remaining,\n\t\t\t\t\tresetsIn: status.resetsIn,\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t}, [rateLimiter.connection]);\n\n\tconst makeRequest = async () => {\n\t\tif (!rateLimiter.connection || loading) return;\n\n\t\tsetLoading(true);\n\t\ttry {\n\t\t\tconst response = await rateLimiter.connection.checkLimit();\n\t\t\tsetResult(response);\n\t\t} finally {\n\t\t\tsetLoading(false);\n\t\t}\n\t};\n\n\tconst resetLimiter = async () => {\n\t\tif (!rateLimiter.connection) return;\n\n\t\tawait rateLimiter.connection.reset();\n\t\t// Get updated status\n\t\tconst status = await rateLimiter.connection.getStatus();\n\t\tsetResult({\n\t\t\tallowed: status.remaining > 0,\n\t\t\tremaining: status.remaining,\n\t\t\tresetsIn: status.resetsIn,\n\t\t});\n\t};\n\n\tconst usagePercentage = result ? ((5 - result.remaining) / 5) * 100 : 0;\n\n\treturn (\n\t\t<div className=\"rate-limiter-demo\">\n\t\t\t<button\n\t\t\t\tclassName=\"request-button\"\n\t\t\t\tonClick={makeRequest}\n\t\t\t\tdisabled={!rateLimiter.connection || loading}\n\t\t\t>\n\t\t\t\t{loading ? \"Making Request...\" : \"Make API Request\"}\n\t\t\t</button>\n\n\t\t\t{result && (\n\t\t\t\t<div className=\"status-display\">\n\t\t\t\t\t<div className=\"status-item\">\n\t\t\t\t\t\t<span className=\"status-label\">Status:</span>\n\t\t\t\t\t\t<span className={`status-value ${result.allowed ? 'allowed' : 'blocked'}`}>\n\t\t\t\t\t\t\t{result.allowed ? \"✓ Request Allowed\" : \"✖ Request Blocked\"}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"status-item\">\n\t\t\t\t\t\t<span className=\"status-label\">Remaining Requests:</span>\n\t\t\t\t\t\t<span className=\"status-value\">{result.remaining} / 5</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"status-item\">\n\t\t\t\t\t\t<span className=\"status-label\">Rate Limit Usage:</span>\n\t\t\t\t\t\t<div style={{ flex: 1, marginLeft: \"20px\" }}>\n\t\t\t\t\t\t\t<div className=\"progress-bar\">\n\t\t\t\t\t\t\t\t<div \n\t\t\t\t\t\t\t\t\tclassName=\"progress-fill\" \n\t\t\t\t\t\t\t\t\tstyle={{ width: `${usagePercentage}%` }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"status-item\">\n\t\t\t\t\t\t<span className=\"status-label\">Resets In:</span>\n\t\t\t\t\t\t<span className=\"status-value\">{result.resetsIn} seconds</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<button className=\"reset-button\" onClick={resetLimiter}>\n\t\t\t\tReset Rate Limiter (Admin)\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n\nexport function App() {\n\tconst [selectedUser, setSelectedUser] = useState(\"user-1\");\n\n\tconst users = [\n\t\t{ id: \"user-1\", name: \"User 1\" },\n\t\t{ id: \"user-2\", name: \"User 2\" },\n\t\t{ id: \"user-3\", name: \"User 3\" },\n\t\t{ id: \"api-client-1\", name: \"API Client 1\" },\n\t\t{ id: \"api-client-2\", name: \"API Client 2\" },\n\t];\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>Rate Limiter Demo</h1>\n\t\t\t\t<p>5 requests per minute per user/client</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"content\">\n\t\t\t\t<div className=\"info-box\">\n\t\t\t\t\t<h3>How it works</h3>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThis rate limiter allows 5 requests per minute per user. Each user gets their own \n\t\t\t\t\t\tindependent rate limit counter. When the limit is exceeded, further requests are \n\t\t\t\t\t\tblocked until the window resets. Switch between users to see isolated rate limiting.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"user-selector\">\n\t\t\t\t\t<label>Select User/Client:</label>\n\t\t\t\t\t<select\n\t\t\t\t\t\tvalue={selectedUser}\n\t\t\t\t\t\tonChange={(e) => setSelectedUser(e.target.value)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{users.map((user) => (\n\t\t\t\t\t\t\t<option key={user.id} value={user.id}>\n\t\t\t\t\t\t\t\t{user.name}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</select>\n\t\t\t\t</div>\n\n\t\t\t\t<RateLimiterDemo key={selectedUser} userId={selectedUser} />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
       "src/frontend/main.tsx": "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { App } from \"./App\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"Root element not found\");\n\ncreateRoot(root).render(\n\t<StrictMode>\n\t\t<App />\n\t</StrictMode>\n);",
       "src/frontend/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Rate Limiter Example</title>\n    <style>\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f5f5f5;\n        }\n        .app-container {\n            max-width: 800px;\n            margin: 0 auto;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            overflow: hidden;\n        }\n        .header {\n            background: #dc3545;\n            color: white;\n            padding: 20px;\n            text-align: center;\n        }\n        .header h1 {\n            margin: 0;\n            font-size: 2em;\n        }\n        .header p {\n            margin: 10px 0 0 0;\n            opacity: 0.9;\n        }\n        .content {\n            padding: 30px;\n        }\n        .rate-limiter-demo {\n            text-align: center;\n        }\n        .user-selector {\n            margin-bottom: 30px;\n            padding: 20px;\n            background: #f8f9fa;\n            border-radius: 8px;\n        }\n        .user-selector label {\n            display: block;\n            margin-bottom: 10px;\n            font-weight: 500;\n        }\n        .user-selector select {\n            width: 100%;\n            padding: 10px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            font-size: 16px;\n        }\n        .request-button {\n            background: #007bff;\n            color: white;\n            border: none;\n            padding: 15px 30px;\n            font-size: 18px;\n            border-radius: 8px;\n            cursor: pointer;\n            margin-bottom: 30px;\n            transition: background-color 0.2s;\n        }\n        .request-button:hover:not(:disabled) {\n            background: #0056b3;\n        }\n        .request-button:disabled {\n            background: #ccc;\n            cursor: not-allowed;\n        }\n        .status-display {\n            background: #f8f9fa;\n            border-radius: 8px;\n            padding: 20px;\n            margin-bottom: 20px;\n        }\n        .status-item {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 10px 0;\n            border-bottom: 1px solid #dee2e6;\n        }\n        .status-item:last-child {\n            border-bottom: none;\n        }\n        .status-label {\n            font-weight: 500;\n            color: #495057;\n        }\n        .status-value {\n            font-size: 1.1em;\n            font-weight: bold;\n        }\n        .status-value.allowed {\n            color: #28a745;\n        }\n        .status-value.blocked {\n            color: #dc3545;\n        }\n        .info-box {\n            background: #e3f2fd;\n            border: 1px solid #2196f3;\n            border-radius: 8px;\n            padding: 20px;\n            margin-bottom: 20px;\n        }\n        .info-box h3 {\n            margin: 0 0 10px 0;\n            color: #1976d2;\n        }\n        .info-box p {\n            margin: 0;\n            color: #333;\n            line-height: 1.5;\n        }\n        .reset-button {\n            background: #6c757d;\n            color: white;\n            border: none;\n            padding: 10px 20px;\n            font-size: 14px;\n            border-radius: 6px;\n            cursor: pointer;\n            margin-top: 15px;\n        }\n        .reset-button:hover {\n            background: #5a6268;\n        }\n        .progress-bar {\n            width: 100%;\n            height: 20px;\n            background: #e9ecef;\n            border-radius: 10px;\n            overflow: hidden;\n            margin: 10px 0;\n        }\n        .progress-fill {\n            height: 100%;\n            background: linear-gradient(90deg, #28a745, #ffc107, #dc3545);\n            transition: width 0.3s ease;\n        }\n    </style>\n</head>\n<body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/main.tsx\"></script>\n</body>\n</html>",
       "src/backend/registry.ts": "import { actor, setup } from \"rivetkit\";\n\nexport type RateLimitResult = {\n\tallowed: boolean;\n\tremaining: number;\n\tresetsIn: number;\n};\n\nexport const rateLimiter = actor({\n\t// Persistent state that survives restarts: https://rivet.dev/docs/actors/state\n\tstate: {\n\t\tcount: 0,\n\t\tresetAt: 0,\n\t},\n\n\tactions: {\n\t\t// Callable functions from clients: https://rivet.dev/docs/actors/actions\n\t\tcheckLimit: (c): RateLimitResult => {\n\t\t\tconst now = Date.now();\n\n\t\t\t// Reset if expired\n\t\t\tif (now > c.state.resetAt) {\n\t\t\t\t// State changes are automatically persisted\n\t\t\t\tc.state.count = 0;\n\t\t\t\tc.state.resetAt = now + 60000; // 1 minute window\n\t\t\t}\n\n\t\t\tconst allowed = c.state.count < 5;\n\n\t\t\t// Increment if allowed\n\t\t\tif (allowed) {\n\t\t\t\tc.state.count++;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tallowed,\n\t\t\t\tremaining: Math.max(0, 5 - c.state.count),\n\t\t\t\tresetsIn: Math.max(0, Math.round((c.state.resetAt - now) / 1000)),\n\t\t\t};\n\t\t},\n\n\t\tgetStatus: (c) => ({\n\t\t\tcount: c.state.count,\n\t\t\tresetAt: c.state.resetAt,\n\t\t\tremaining: Math.max(0, 5 - c.state.count),\n\t\t\tresetsIn: Math.max(0, Math.round((c.state.resetAt - Date.now()) / 1000)),\n\t\t}),\n\n\t\treset: (c) => {\n\t\t\tc.state.count = 0;\n\t\t\tc.state.resetAt = 0;\n\t\t\treturn { success: true };\n\t\t},\n\t},\n});\n\n// Register actors for use: https://rivet.dev/docs/setup\nexport const registry = setup({\n\tuse: { rateLimiter },\n});\n",
@@ -194,7 +194,7 @@ export const examples: ExampleData[] = [
       "tsconfig.json": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"ESNext\",\n    \"skipLibCheck\": true,\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react-jsx\",\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noFallthroughCasesInSwitch\": true\n  },\n  \"include\": [\"src\", \"tests\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n",
       "vite.config.ts": "import react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n\tplugins: [react()],\n\troot: \"src/frontend\",\n\tserver: {\n\t\tport: 3000,\n\t},\n\tbuild: {\n\t\toutDir: \"../../dist\",\n\t\temptyOutDir: true,\n\t},\n});\n",
       "vitest.config.ts": "import { defineConfig } from \"vitest/config\";\n\nexport default defineConfig({\n\ttest: {\n\t\tenvironment: \"node\",\n\t},\n});\n",
-      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { Player, registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:8080\");\n\nexport function App() {\n\tconst [players, setPlayers] = useState<Player[]>([]);\n\tconst [isConnected, setIsConnected] = useState(false);\n\tconst [currentPlayerId, setCurrentPlayerId] = useState<string | null>(null);\n\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\tconst keysPressed = useRef<Record<string, boolean>>({});\n\tconst inputIntervalRef = useRef<NodeJS.Timeout | null>(null);\n\tconst animationRef = useRef<number | null>(null);\n\n\tconst gameRoom = useActor({\n\t\tname: \"gameRoom\",\n\t\tkey: [\"global\"],\n\t});\n\n\t// Track connection status\n\tuseEffect(() => {\n\t\tsetIsConnected(!!gameRoom.connection);\n\t}, [gameRoom.connection]);\n\n\t// Set up game controls and rendering\n\tuseEffect(() => {\n\t\tif (!gameRoom.connection) return;\n\n\t\t// Set up keyboard handlers\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tkeysPressed.current[e.key.toLowerCase()] = true;\n\t\t};\n\n\t\tconst handleKeyUp = (e: KeyboardEvent) => {\n\t\t\tkeysPressed.current[e.key.toLowerCase()] = false;\n\t\t};\n\n\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\t\twindow.addEventListener(\"keyup\", handleKeyUp);\n\n\t\t// Input update loop\n\t\tinputIntervalRef.current = setInterval(() => {\n\t\t\tconst input = { x: 0, y: 0 };\n\n\t\t\tif (keysPressed.current[\"w\"] || keysPressed.current[\"arrowup\"])\n\t\t\t\tinput.y = -1;\n\t\t\tif (keysPressed.current[\"s\"] || keysPressed.current[\"arrowdown\"])\n\t\t\t\tinput.y = 1;\n\t\t\tif (keysPressed.current[\"a\"] || keysPressed.current[\"arrowleft\"])\n\t\t\t\tinput.x = -1;\n\t\t\tif (keysPressed.current[\"d\"] || keysPressed.current[\"arrowright\"])\n\t\t\t\tinput.x = 1;\n\n\t\t\tgameRoom.connection?.setInput(input);\n\t\t}, 50);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\twindow.removeEventListener(\"keyup\", handleKeyUp);\n\t\t\t\n\t\t\tif (inputIntervalRef.current) {\n\t\t\t\tclearInterval(inputIntervalRef.current);\n\t\t\t\tinputIntervalRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [gameRoom.connection]);\n\n\t// Rendering loop\n\tuseEffect(() => {\n\t\tconst renderLoop = () => {\n\t\t\tconst canvas = canvasRef.current;\n\t\t\tif (!canvas) return;\n\n\t\t\tconst ctx = canvas.getContext(\"2d\");\n\t\t\tif (!ctx) return;\n\n\t\t\t// Clear canvas\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height);\n\n\t\t\t// Draw grid\n\t\t\tctx.strokeStyle = \"#e0e0e0\";\n\t\t\tctx.lineWidth = 1;\n\t\t\tfor (let i = 0; i <= canvas.width; i += 50) {\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.moveTo(i, 0);\n\t\t\t\tctx.lineTo(i, canvas.height);\n\t\t\t\tctx.stroke();\n\t\t\t}\n\t\t\tfor (let i = 0; i <= canvas.height; i += 50) {\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.moveTo(0, i);\n\t\t\t\tctx.lineTo(canvas.width, i);\n\t\t\t\tctx.stroke();\n\t\t\t}\n\n\t\t\t// Draw players\n\t\t\tfor (const player of players) {\n\t\t\t\tconst isCurrentPlayer = currentPlayerId && player.id === currentPlayerId;\n\t\t\t\t\n\t\t\t\t// Draw player shadow\n\t\t\t\tctx.fillStyle = \"rgba(0, 0, 0, 0.2)\";\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.arc(player.position.x + 2, player.position.y + 2, 12, 0, Math.PI * 2);\n\t\t\t\tctx.fill();\n\n\t\t\t\t// Draw player\n\t\t\t\tctx.fillStyle = isCurrentPlayer ? \"#4287f5\" : \"#888\";\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.arc(player.position.x, player.position.y, 10, 0, Math.PI * 2);\n\t\t\t\tctx.fill();\n\n\t\t\t\t// Draw player border\n\t\t\t\tctx.strokeStyle = \"#333\";\n\t\t\t\tctx.lineWidth = 2;\n\t\t\t\tctx.stroke();\n\n\t\t\t\t// Draw player ID\n\t\t\t\tctx.fillStyle = \"#333\";\n\t\t\t\tctx.font = \"12px Arial\";\n\t\t\t\tctx.textAlign = \"center\";\n\t\t\t\tctx.fillText(\n\t\t\t\t\tisCurrentPlayer ? \"YOU\" : player.id.substring(0, 8),\n\t\t\t\t\tplayer.position.x,\n\t\t\t\t\tplayer.position.y - 15\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tanimationRef.current = requestAnimationFrame(renderLoop);\n\t\t};\n\n\t\tanimationRef.current = requestAnimationFrame(renderLoop);\n\n\t\treturn () => {\n\t\t\tif (animationRef.current) {\n\t\t\t\tcancelAnimationFrame(animationRef.current);\n\t\t\t\tanimationRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [players, gameRoom.connection]);\n\n\t// Listen for world updates\n\tgameRoom.useEvent(\"worldUpdate\", ({ playerList }: { playerList: Player[] }) => {\n\t\tsetPlayers(playerList);\n\t\t\n\t\t// Try to identify current player - this is a simple approach\n\t\t// In a real implementation, we'd get the connection ID from the server\n\t\tif (currentPlayerId === null && playerList.length > 0) {\n\t\t\tsetCurrentPlayerId(playerList[playerList.length - 1].id);\n\t\t}\n\t});\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"connection-status\" style={{ position: \"relative\" }}>\n\t\t\t\t<div className={`connection-status ${isConnected ? \"connected\" : \"disconnected\"}`}>\n\t\t\t\t\t{isConnected ? \"Connected\" : \"Disconnected\"}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>Multiplayer Game</h1>\n\t\t\t\t<p>Real-time multiplayer movement with RivetKit</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"info-box\">\n\t\t\t\t<h3>How to Play</h3>\n\t\t\t\t<p>\n\t\t\t\t\tUse WASD or arrow keys to move your character around the game world. \n\t\t\t\t\tYour character is shown in blue, while other players appear in gray. \n\t\t\t\t\tThe game updates in real-time, so you'll see other players moving as they play.\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"game-area\">\n\t\t\t\t<canvas\n\t\t\t\t\tref={canvasRef}\n\t\t\t\t\twidth={800}\n\t\t\t\t\theight={600}\n\t\t\t\t\tclassName=\"game-canvas\"\n\t\t\t\t/>\n\t\t\t\t\n\t\t\t\t<div className=\"player-legend\">\n\t\t\t\t\t<div className=\"legend-item\">\n\t\t\t\t\t\t<div className=\"legend-color you\" />\n\t\t\t\t\t\t<span>You</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"legend-item\">\n\t\t\t\t\t\t<div className=\"legend-color other\" />\n\t\t\t\t\t\t<span>Other Players</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"controls\">\n\t\t\t\t<p><strong>Controls:</strong></p>\n\t\t\t\t<p>Move: WASD or Arrow Keys</p>\n\t\t\t\t<p>Players online: {players.length}</p>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
+      "src/frontend/App.tsx": "import { createRivetKit } from \"@rivetkit/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { Player, registry } from \"../backend/registry\";\n\nconst { useActor } = createRivetKit<typeof registry>(\"http://localhost:6420\");\n\nexport function App() {\n\tconst [players, setPlayers] = useState<Player[]>([]);\n\tconst [isConnected, setIsConnected] = useState(false);\n\tconst [currentPlayerId, setCurrentPlayerId] = useState<string | null>(null);\n\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\tconst keysPressed = useRef<Record<string, boolean>>({});\n\tconst inputIntervalRef = useRef<NodeJS.Timeout | null>(null);\n\tconst animationRef = useRef<number | null>(null);\n\n\tconst gameRoom = useActor({\n\t\tname: \"gameRoom\",\n\t\tkey: [\"global\"],\n\t});\n\n\t// Track connection status\n\tuseEffect(() => {\n\t\tsetIsConnected(!!gameRoom.connection);\n\t}, [gameRoom.connection]);\n\n\t// Set up game controls and rendering\n\tuseEffect(() => {\n\t\tif (!gameRoom.connection) return;\n\n\t\t// Set up keyboard handlers\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tkeysPressed.current[e.key.toLowerCase()] = true;\n\t\t};\n\n\t\tconst handleKeyUp = (e: KeyboardEvent) => {\n\t\t\tkeysPressed.current[e.key.toLowerCase()] = false;\n\t\t};\n\n\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\t\twindow.addEventListener(\"keyup\", handleKeyUp);\n\n\t\t// Input update loop\n\t\tinputIntervalRef.current = setInterval(() => {\n\t\t\tconst input = { x: 0, y: 0 };\n\n\t\t\tif (keysPressed.current[\"w\"] || keysPressed.current[\"arrowup\"])\n\t\t\t\tinput.y = -1;\n\t\t\tif (keysPressed.current[\"s\"] || keysPressed.current[\"arrowdown\"])\n\t\t\t\tinput.y = 1;\n\t\t\tif (keysPressed.current[\"a\"] || keysPressed.current[\"arrowleft\"])\n\t\t\t\tinput.x = -1;\n\t\t\tif (keysPressed.current[\"d\"] || keysPressed.current[\"arrowright\"])\n\t\t\t\tinput.x = 1;\n\n\t\t\tgameRoom.connection?.setInput(input);\n\t\t}, 50);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\twindow.removeEventListener(\"keyup\", handleKeyUp);\n\t\t\t\n\t\t\tif (inputIntervalRef.current) {\n\t\t\t\tclearInterval(inputIntervalRef.current);\n\t\t\t\tinputIntervalRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [gameRoom.connection]);\n\n\t// Rendering loop\n\tuseEffect(() => {\n\t\tconst renderLoop = () => {\n\t\t\tconst canvas = canvasRef.current;\n\t\t\tif (!canvas) return;\n\n\t\t\tconst ctx = canvas.getContext(\"2d\");\n\t\t\tif (!ctx) return;\n\n\t\t\t// Clear canvas\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height);\n\n\t\t\t// Draw grid\n\t\t\tctx.strokeStyle = \"#e0e0e0\";\n\t\t\tctx.lineWidth = 1;\n\t\t\tfor (let i = 0; i <= canvas.width; i += 50) {\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.moveTo(i, 0);\n\t\t\t\tctx.lineTo(i, canvas.height);\n\t\t\t\tctx.stroke();\n\t\t\t}\n\t\t\tfor (let i = 0; i <= canvas.height; i += 50) {\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.moveTo(0, i);\n\t\t\t\tctx.lineTo(canvas.width, i);\n\t\t\t\tctx.stroke();\n\t\t\t}\n\n\t\t\t// Draw players\n\t\t\tfor (const player of players) {\n\t\t\t\tconst isCurrentPlayer = currentPlayerId && player.id === currentPlayerId;\n\t\t\t\t\n\t\t\t\t// Draw player shadow\n\t\t\t\tctx.fillStyle = \"rgba(0, 0, 0, 0.2)\";\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.arc(player.position.x + 2, player.position.y + 2, 12, 0, Math.PI * 2);\n\t\t\t\tctx.fill();\n\n\t\t\t\t// Draw player\n\t\t\t\tctx.fillStyle = isCurrentPlayer ? \"#4287f5\" : \"#888\";\n\t\t\t\tctx.beginPath();\n\t\t\t\tctx.arc(player.position.x, player.position.y, 10, 0, Math.PI * 2);\n\t\t\t\tctx.fill();\n\n\t\t\t\t// Draw player border\n\t\t\t\tctx.strokeStyle = \"#333\";\n\t\t\t\tctx.lineWidth = 2;\n\t\t\t\tctx.stroke();\n\n\t\t\t\t// Draw player ID\n\t\t\t\tctx.fillStyle = \"#333\";\n\t\t\t\tctx.font = \"12px Arial\";\n\t\t\t\tctx.textAlign = \"center\";\n\t\t\t\tctx.fillText(\n\t\t\t\t\tisCurrentPlayer ? \"YOU\" : player.id.substring(0, 8),\n\t\t\t\t\tplayer.position.x,\n\t\t\t\t\tplayer.position.y - 15\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tanimationRef.current = requestAnimationFrame(renderLoop);\n\t\t};\n\n\t\tanimationRef.current = requestAnimationFrame(renderLoop);\n\n\t\treturn () => {\n\t\t\tif (animationRef.current) {\n\t\t\t\tcancelAnimationFrame(animationRef.current);\n\t\t\t\tanimationRef.current = null;\n\t\t\t}\n\t\t};\n\t}, [players, gameRoom.connection]);\n\n\t// Listen for world updates\n\tgameRoom.useEvent(\"worldUpdate\", ({ playerList }: { playerList: Player[] }) => {\n\t\tsetPlayers(playerList);\n\t\t\n\t\t// Try to identify current player - this is a simple approach\n\t\t// In a real implementation, we'd get the connection ID from the server\n\t\tif (currentPlayerId === null && playerList.length > 0) {\n\t\t\tsetCurrentPlayerId(playerList[playerList.length - 1].id);\n\t\t}\n\t});\n\n\treturn (\n\t\t<div className=\"app-container\">\n\t\t\t<div className=\"connection-status\" style={{ position: \"relative\" }}>\n\t\t\t\t<div className={`connection-status ${isConnected ? \"connected\" : \"disconnected\"}`}>\n\t\t\t\t\t{isConnected ? \"Connected\" : \"Disconnected\"}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"header\">\n\t\t\t\t<h1>Multiplayer Game</h1>\n\t\t\t\t<p>Real-time multiplayer movement with RivetKit</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"info-box\">\n\t\t\t\t<h3>How to Play</h3>\n\t\t\t\t<p>\n\t\t\t\t\tUse WASD or arrow keys to move your character around the game world. \n\t\t\t\t\tYour character is shown in blue, while other players appear in gray. \n\t\t\t\t\tThe game updates in real-time, so you'll see other players moving as they play.\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"game-area\">\n\t\t\t\t<canvas\n\t\t\t\t\tref={canvasRef}\n\t\t\t\t\twidth={800}\n\t\t\t\t\theight={600}\n\t\t\t\t\tclassName=\"game-canvas\"\n\t\t\t\t/>\n\t\t\t\t\n\t\t\t\t<div className=\"player-legend\">\n\t\t\t\t\t<div className=\"legend-item\">\n\t\t\t\t\t\t<div className=\"legend-color you\" />\n\t\t\t\t\t\t<span>You</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"legend-item\">\n\t\t\t\t\t\t<div className=\"legend-color other\" />\n\t\t\t\t\t\t<span>Other Players</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className=\"controls\">\n\t\t\t\t<p><strong>Controls:</strong></p>\n\t\t\t\t<p>Move: WASD or Arrow Keys</p>\n\t\t\t\t<p>Players online: {players.length}</p>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
       "src/frontend/main.tsx": "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { App } from \"./App\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"Root element not found\");\n\ncreateRoot(root).render(\n\t<StrictMode>\n\t\t<App />\n\t</StrictMode>\n);",
       "src/frontend/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Multiplayer Game - RivetKit</title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 20px;\n            background-color: #f0f0f0;\n        }\n        .app-container {\n            max-width: 1000px;\n            margin: 0 auto;\n            background-color: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        }\n        .header {\n            text-align: center;\n            margin-bottom: 30px;\n        }\n        .header h1 {\n            color: #333;\n            margin: 0;\n        }\n        .header p {\n            color: #666;\n            margin: 10px 0;\n        }\n        .game-area {\n            text-align: center;\n            margin-bottom: 20px;\n        }\n        .game-canvas {\n            border: 3px solid #333;\n            border-radius: 8px;\n            background-color: #f9f9f9;\n        }\n        .controls {\n            margin-top: 20px;\n            text-align: center;\n        }\n        .controls p {\n            margin: 5px 0;\n            font-size: 16px;\n            color: #555;\n        }\n        .info-box {\n            background-color: #e8f4f8;\n            border: 1px solid #b8d4da;\n            border-radius: 6px;\n            padding: 15px;\n            margin-bottom: 20px;\n        }\n        .info-box h3 {\n            margin: 0 0 10px 0;\n            color: #2c5aa0;\n        }\n        .info-box p {\n            margin: 0;\n            color: #555;\n            line-height: 1.5;\n        }\n        .player-legend {\n            display: flex;\n            justify-content: center;\n            gap: 30px;\n            margin-top: 15px;\n        }\n        .legend-item {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .legend-color {\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            border: 2px solid #333;\n        }\n        .legend-color.you {\n            background-color: #4287f5;\n        }\n        .legend-color.other {\n            background-color: #888;\n        }\n        .connection-status {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            padding: 8px 12px;\n            border-radius: 4px;\n            font-size: 14px;\n            font-weight: bold;\n        }\n        .connection-status.connected {\n            background-color: #d4edda;\n            color: #155724;\n        }\n        .connection-status.disconnected {\n            background-color: #f8d7da;\n            color: #721c24;\n        }\n    </style>\n</head>\n<body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/main.tsx\"></script>\n</body>\n</html>",
       "src/backend/types.ts": "export type Position = { x: number; y: number };\nexport type Input = { x: number; y: number };\nexport type Player = { id: string; position: Position; input: Input };\n\nexport type GameVars = {\n\tgameLoopInterval?: ReturnType<typeof setInterval>;\n};\n",