From dc716753684a422e8b930487c4e366a704e37471 Mon Sep 17 00:00:00 2001
From: Kacper Wojciechowski <39823706+jog1t@users.noreply.github.com>
Date: Sat, 25 Oct 2025 00:36:40 +0200
Subject: [PATCH] fix(fe): invalid types

---
 .github/workflows/fe-pull-request.yml         | 12 ++---
 frontend/src/app/billing/plan-card.tsx        |  2 +-
 .../data-providers/cloud-data-provider.tsx    | 14 +++---
 .../data-providers/engine-data-provider.tsx   | 46 ++++++++++++++-----
 .../src/app/dialogs/connect-manual-frame.tsx  |  4 +-
 .../src/app/dialogs/connect-vercel-frame.tsx  | 12 ++---
 .../app/dialogs/create-namespace-frame.tsx    |  1 -
 .../src/app/forms/edit-runner-config-form.tsx | 10 ++--
 frontend/src/app/layout.tsx                   |  2 +-
 frontend/src/app/runner-config-table.tsx      |  5 +-
 .../components/actors/actor-events-list.tsx   |  2 +-
 .../src/components/actors/actor-events.tsx    |  3 +-
 .../src/components/actors/actor-region.tsx    |  7 +--
 .../actors/actors-layout-context.tsx          |  2 +-
 .../components/actors/actors-list-preview.tsx |  2 +-
 .../src/components/actors/actors-list-row.tsx |  2 +-
 .../src/components/actors/data-provider.tsx   | 12 +++++
 .../src/components/actors/region-select.tsx   |  2 +-
 .../components/actors/root-layout-context.tsx |  2 +-
 .../actors/worker/actor-repl.worker.ts        | 17 +++----
 .../actors/worker/actor-worker-context.tsx    |  2 +-
 frontend/src/components/code.tsx              |  2 +-
 .../components/matchmaker/lobby-region.tsx    |  4 ++
 frontend/src/components/safe-hover.tsx        |  2 +-
 frontend/src/components/ui/combobox.tsx       |  4 +-
 .../ns.$namespace/connect.tsx                 | 30 ++----------
 frontend/src/vite-env.d.ts                    |  6 +++
 frontend/tsconfig.json                        |  2 +-
 frontend/vite-env.d.ts                        | 14 ------
 .../src/drivers/engine/actor-driver.ts        |  2 -
 30 files changed, 117 insertions(+), 110 deletions(-)
 delete mode 100644 frontend/vite-env.d.ts

diff --git a/.github/workflows/fe-pull-request.yml b/.github/workflows/fe-pull-request.yml
index cc482007df..f5c324d6ae 100644
--- a/.github/workflows/fe-pull-request.yml
+++ b/.github/workflows/fe-pull-request.yml
@@ -17,19 +17,13 @@ jobs:
           version: latest
       - name: Run Biome
         run: biome check . --reporter=github
-        working-directory: ./frontend
   tsc:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '20'
-          cache: 'pnpm'
-      - name: Install Dependencies
-        run: pnpm install 
-        working-directory: ./frontend
+      - uses: pnpm/action-setup@v4
+      - run: pnpm install
+      - run: pnpm turbo build:engine
       - name: Run TypeScript Compiler
         run: pnpm ts-check
         working-directory: ./frontend
\ No newline at end of file
diff --git a/frontend/src/app/billing/plan-card.tsx b/frontend/src/app/billing/plan-card.tsx
index 6c5a2db5bc..f8ece96544 100644
--- a/frontend/src/app/billing/plan-card.tsx
+++ b/frontend/src/app/billing/plan-card.tsx
@@ -51,7 +51,7 @@ function PlanCard({
 				<p>Includes:</p>
 				<ul className="text-muted-foreground mt-2 space-y-1">
 					{features?.map((feature, index) => (
-						<li key={feature.label}>
+						<li key={index}>
 							<Icon icon={feature.icon} /> {feature.label}
 						</li>
 					))}
diff --git a/frontend/src/app/data-providers/cloud-data-provider.tsx b/frontend/src/app/data-providers/cloud-data-provider.tsx
index 0f554e3905..49e68a3666 100644
--- a/frontend/src/app/data-providers/cloud-data-provider.tsx
+++ b/frontend/src/app/data-providers/cloud-data-provider.tsx
@@ -1,7 +1,7 @@
 import type { Clerk } from "@clerk/clerk-js";
 import { type Rivet, RivetClient } from "@rivet-gg/cloud";
 import { fetcher } from "@rivetkit/engine-api-full/core";
-import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
+import { infiniteQueryOptions, QueryKey, queryOptions, UseQueryOptions } from "@tanstack/react-query";
 import { cloudEnv } from "@/lib/env";
 import { queryClient } from "@/queries/global";
 import { RECORDS_PER_PAGE } from "./default-data-provider";
@@ -19,13 +19,17 @@ function createClient({ clerk }: { clerk: Clerk }) {
 		token: async () => {
 			return (await clerk.session?.getToken()) || "";
 		},
+		// @ts-expect-error
 		fetcher: async (args) => {
-			Object.keys(args.headers).forEach((key) => {
+			Object.keys(args.headers || {}).forEach((key) => {
 				if (key.toLowerCase().startsWith("x-fern-")) {
-					delete args.headers[key];
+					delete args.headers?.[key];
 				}
 			});
-			return await fetcher(args);
+			return await fetcher(
+				// @ts-expect-error
+				args
+			);
 		},
 	});
 }
@@ -207,7 +211,6 @@ export const createOrganizationContext = ({
 				mutationKey: ["projects"],
 				mutationFn: async (data: {
 					displayName: string;
-					nameId: string;
 				}) => {
 					const response = await client.projects.create({
 						displayName: data.displayName,
@@ -350,7 +353,6 @@ export const createNamespaceContext = ({
 		...createEngineNamespaceContext({
 			...parent,
 			namespace: engineNamespaceName,
-			namespaceId: engineNamespaceId,
 			engineToken: token,
 			client: createEngineClient(cloudEnv().VITE_APP_API_URL, {
 				token,
diff --git a/frontend/src/app/data-providers/engine-data-provider.tsx b/frontend/src/app/data-providers/engine-data-provider.tsx
index e5893038db..5b1f75deba 100644
--- a/frontend/src/app/data-providers/engine-data-provider.tsx
+++ b/frontend/src/app/data-providers/engine-data-provider.tsx
@@ -1,10 +1,9 @@
 import { type Rivet, RivetClient } from "@rivetkit/engine-api-full";
-import { type FetchFunction, fetcher } from "@rivetkit/engine-api-full/core";
+import { fetcher } from "@rivetkit/engine-api-full/core";
 import {
 	infiniteQueryOptions,
 	mutationOptions,
 	QueryKey,
-	QueryOptions,
 	queryOptions,
 	UseQueryOptions,
 } from "@tanstack/react-query";
@@ -17,15 +16,14 @@ import {
 } from "@/components/actors";
 import { engineEnv } from "@/lib/env";
 import { convertStringToId } from "@/lib/utils";
-import { queryClient } from "@/queries/global";
 import { noThrow, shouldRetryAllExpect403 } from "@/queries/utils";
 import {
 	ActorQueryOptions,
 	ActorQueryOptionsSchema,
 	createDefaultGlobalContext,
-	type DefaultDataProvider,
 	RECORDS_PER_PAGE,
 } from "./default-data-provider";
+import z from "zod";
 
 const mightRequireAuth = __APP_TYPE__ === "engine";
 
@@ -133,6 +131,7 @@ export const createGlobalContext = (opts: {
 export const createNamespaceContext = ({
 	namespace,
 	client,
+	...parent
 }: { namespace: string; } & ReturnType<
 	typeof createGlobalContext
 >) => {
@@ -407,7 +406,7 @@ export const createNamespaceContext = ({
 				enabled: !!opts.runnerUrl,
 				queryFn: async ({ signal: abortSignal }) => {
 					const res =
-						await client.runnerConfigs.serverlessHealthCheck(
+						await client.runnerConfigsServerlessHealthCheck(
 							{
 								url: opts.runnerUrl,
 								headers: opts.headers,
@@ -553,7 +552,7 @@ export const createNamespaceContext = ({
 					name: string;
 					config: Record<string, Rivet.RunnerConfig>;
 				}) => {
-					const response = await client.runnerConfigs.upsert(name, {
+					const response = await client.runnerConfigsUpsert(name, {
 						namespace,
 						datacenters: config,
 					});
@@ -572,7 +571,7 @@ export const createNamespaceContext = ({
 				...opts,
 				mutationKey: ["runner-config", "delete"] as QueryKey,
 				mutationFn: async (name: string) => {
-					await client.runnerConfigs.delete(name, { namespace });
+					await client.runnerConfigsDelete(name, { namespace });
 				},
 				retry: shouldRetryAllExpect403,
 				meta: {
@@ -587,7 +586,7 @@ export const createNamespaceContext = ({
 				queryKey: [{ namespace }, "runners", "configs", opts] as QueryKey,
 				initialPageParam: undefined as string | undefined,
 				queryFn: async ({ signal: abortSignal, pageParam }) => {
-					const response = await client.runnerConfigs.list(
+					const response = await client.runnerConfigsList(
 						{
 							namespace,
 							cursor: pageParam ?? undefined,
@@ -630,7 +629,7 @@ export const createNamespaceContext = ({
 				queryKey: [{ namespace }, "runners", "config", opts] as QueryKey,
 				enabled: !!opts.name,
 				queryFn: async ({ signal: abortSignal }) => {
-					const response = await client.runnerConfigs.list(
+					const response = await client.runnerConfigsList(
 						{
 							namespace,
 							runnerNames: opts.name,
@@ -653,13 +652,13 @@ export const createNamespaceContext = ({
 				},
 			});
 		},
-		engineAdminTokenQueryOptions(): UseQueryOptions<string> {
+		engineAdminTokenQueryOptions() {
 			return queryOptions({
 				staleTime: 1000,
 				gcTime: 1000,
 				queryKey: [{ namespace }, "tokens", "engine-admin"] as QueryKey,
 				queryFn: async () => {
-					return ls.engineCredentials.get(getConfig().apiUrl) || "";
+					return (ls.engineCredentials.get(getConfig().apiUrl) || "") as string;
 				},
 				meta: {
 					mightRequireAuth,
@@ -699,3 +698,28 @@ function transformActor(a: Rivet.Actor): Actor {
 		],
 	};
 }
+
+type RunnerConfig = [
+	string,
+	{
+		datacenters: Record<string, { metadata?: { provider?: string } }>;
+	},
+];
+
+export function hasMetadataProvider(metadata: unknown): metadata is { provider?: string } {
+	return z.object({ provider: z.string().optional() }).safeParse(metadata).success;
+}
+
+export function hasProvider(
+	configs: [string, Rivet.RunnerConfigsListResponseRunnerConfigsValue][] | undefined,
+	providers: string[],
+): boolean {
+	if (!configs) return false;
+	return configs.some(([, config]) =>
+		Object.values(config.datacenters).some(
+			(datacenter) =>
+				datacenter.metadata && hasMetadataProvider(datacenter.metadata) && datacenter.metadata.provider &&
+				providers.includes(datacenter.metadata.provider),
+		),
+	);
+}
\ No newline at end of file
diff --git a/frontend/src/app/dialogs/connect-manual-frame.tsx b/frontend/src/app/dialogs/connect-manual-frame.tsx
index 9232bada2c..33993fd59f 100644
--- a/frontend/src/app/dialogs/connect-manual-frame.tsx
+++ b/frontend/src/app/dialogs/connect-manual-frame.tsx
@@ -33,7 +33,9 @@ export default function CreateProjectFrameContent({
 						type="single"
 						className="border rounded-md gap-0"
 						value={mode}
-						onValueChange={setMode}
+						onValueChange={(mode) => {
+							setMode(mode === "serverfull" ? "serverless" : "serverfull");
+						}}
 					>
 						<ToggleGroupItem
 							value="serverless"
diff --git a/frontend/src/app/dialogs/connect-vercel-frame.tsx b/frontend/src/app/dialogs/connect-vercel-frame.tsx
index 8a84fd3706..e017016da8 100644
--- a/frontend/src/app/dialogs/connect-vercel-frame.tsx
+++ b/frontend/src/app/dialogs/connect-vercel-frame.tsx
@@ -20,7 +20,7 @@ import {
 	Frame,
 	getConfig,
 } from "@/components";
-import { type Region, useEngineCompatDataProvider } from "@/components/actors";
+import { type Region, useCloudNamespaceDataProvider, useEngineCompatDataProvider, useEngineNamespaceDataProvider } from "@/components/actors";
 import { cloudEnv } from "@/lib/env";
 import { queryClient } from "@/queries/global";
 import { type JoinStepSchemas, StepperForm } from "../forms/stepper-form";
@@ -36,17 +36,13 @@ interface CreateProjectFrameContentProps extends DialogContentProps { }
 function usePublishableToken() {
 	return match(__APP_TYPE__)
 		.with("cloud", () => {
-			const routeContext = useRouteContext({
-				from: "/_context/_cloud/orgs/$organization/projects/$project/ns/$namespace/connect",
-				select: (ctx) => ctx.dataProvider,
-			});
 			return useSuspenseQuery(
-				routeContext.publishableTokenQueryOptions(),
+				useCloudNamespaceDataProvider().publishableTokenQueryOptions(),
 			).data;
 		})
 		.with("engine", () => {
 			return useSuspenseQuery(
-				useEngineCompatDataProvider().engineAdminTokenQueryOptions(),
+				useEngineNamespaceDataProvider().engineAdminTokenQueryOptions(),
 			).data;
 		})
 		.otherwise(() => {
@@ -225,7 +221,7 @@ function FormStepper({
 // }
 
 function StepApiRoute() {
-	const plan = useWatch<FormValues>({ name: "plan" as const });
+	const plan = useWatch({ name: "plan" });
 	return <ConnectVercelForm.IntegrationCode plan={plan || "hobby"} />;
 }
 
diff --git a/frontend/src/app/dialogs/create-namespace-frame.tsx b/frontend/src/app/dialogs/create-namespace-frame.tsx
index 1b09491cf0..24f195fefa 100644
--- a/frontend/src/app/dialogs/create-namespace-frame.tsx
+++ b/frontend/src/app/dialogs/create-namespace-frame.tsx
@@ -84,7 +84,6 @@ export default function CreateNamespacesFrameContent() {
 			onSubmit={async (values) => {
 				await mutateAsync({
 					displayName: values.name,
-					name: values.slug || convertStringToId(values.name),
 				});
 			}}
 			defaultValues={{ name: "", slug: "" }}
diff --git a/frontend/src/app/forms/edit-runner-config-form.tsx b/frontend/src/app/forms/edit-runner-config-form.tsx
index c1bb71f0e1..e7fdba064a 100644
--- a/frontend/src/app/forms/edit-runner-config-form.tsx
+++ b/frontend/src/app/forms/edit-runner-config-form.tsx
@@ -26,7 +26,7 @@ export const formSchema = z.object({
 	requestLifespan: z.coerce.number().positive(),
 	runnersMargin: z.coerce.number().min(0),
 	slotsPerRunner: z.coerce.number().positive(),
-	headers: z.array(z.string()).default([]),
+	headers: z.array(z.array(z.string())).default([]),
 });
 
 export type FormValues = z.infer<typeof formSchema>;
@@ -179,8 +179,8 @@ export const SlotsPerRunner = ({ className }: { className?: string }) => {
 };
 
 export const Headers = function Headers() {
-	const { control, setValue } = useFormContext();
-	const { fields, append, remove } = useFieldArray<FormValues>({
+	const { control, setValue, watch } = useFormContext();
+	const { fields, append, remove } = useFieldArray({
 		name: "headers",
 		control,
 	});
@@ -226,7 +226,7 @@ col-span-full flex-1"
 									<Input
 										placeholder="Enter a value"
 										className="w-full"
-										value={field[0]}
+										value={watch(`headers.${index}.0`)}
 										onChange={(e) => {
 											setValue(
 												`headers.${index}.0`,
@@ -258,7 +258,7 @@ col-span-full flex-1"
 									<Input
 										placeholder="Enter a value"
 										className="w-full"
-										value={field[1]}
+										value={watch(`headers.${index}.1`)}
 										onChange={(e) => {
 											setValue(
 												`headers.${index}.1`,
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 1e54377467..3f409cdb95 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -139,7 +139,7 @@ const Sidebar = ({
 	ref,
 	...props
 }: {
-	ref?: RefObject<ImperativePanelHandle>;
+	ref?: RefObject<ImperativePanelHandle | null>;
 } & ComponentProps<typeof ResizablePanel>) => {
 	const sidebarMinWidth = useContext(SidebarDimensionsContext);
 	return (
diff --git a/frontend/src/app/runner-config-table.tsx b/frontend/src/app/runner-config-table.tsx
index 22ce42c45d..62a6fcd118 100644
--- a/frontend/src/app/runner-config-table.tsx
+++ b/frontend/src/app/runner-config-table.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/components";
 import { ActorRegion } from "@/components/actors";
 import { REGION_LABEL } from "@/components/matchmaker/lobby-region";
+import { hasMetadataProvider } from "./data-providers/engine-data-provider";
 
 interface RunnerConfigsTableProps {
 	isLoading?: boolean;
@@ -142,7 +143,7 @@ function Row({
 				<WithTooltip
 					content={config.serverless?.url || "-"}
 					trigger={
-						<DiscreteCopyButton value={config.serverless?.url}>
+						<DiscreteCopyButton value={config.serverless?.url || ""}>
 							<span>
 								{config.serverless?.url &&
 								config.serverless.url.length > 32
@@ -159,7 +160,7 @@ function Row({
 
 			<TableCell>
 				<div className="flex gap-2 justify-end">
-					{config.serverless ? (
+					{config.serverless && hasMetadataProvider(config.metadata) ? (
 						<WithTooltip
 							content="Edit provider settings"
 							trigger={
diff --git a/frontend/src/components/actors/actor-events-list.tsx b/frontend/src/components/actors/actor-events-list.tsx
index 83ddf4bd21..519a869e88 100644
--- a/frontend/src/components/actors/actor-events-list.tsx
+++ b/frontend/src/components/actors/actor-events-list.tsx
@@ -213,7 +213,7 @@ function EventContainer({
 	ref,
 	children,
 }: {
-	ref: React.RefObject<HTMLDivElement>;
+	ref: React.RefObject<HTMLDivElement | null>;
 	children: React.ReactNode;
 }) {
 	return (
diff --git a/frontend/src/components/actors/actor-events.tsx b/frontend/src/components/actors/actor-events.tsx
index 4825f76f66..225e809061 100644
--- a/frontend/src/components/actors/actor-events.tsx
+++ b/frontend/src/components/actors/actor-events.tsx
@@ -166,13 +166,14 @@ ActorEvents.Skeleton = () => {
 };
 
 function useScrollToBottom(
-	ref: React.RefObject<HTMLDivElement>,
+	ref: React.RefObject<HTMLDivElement | null>,
 	deps: unknown[],
 ) {
 	const [settings] = useActorDetailsSettings();
 	const follow = useRef(true);
 	const shouldFollow = () => settings.autoFollowLogs && follow.current;
 	useResizeObserver({
+		// @ts-expect-error -- TS2322 -- Type 'HTMLDivElement' is not assignable to type 'Element | null'.
 		ref,
 		onResize: () => {
 			if (shouldFollow()) {
diff --git a/frontend/src/components/actors/actor-region.tsx b/frontend/src/components/actors/actor-region.tsx
index e4a4efe334..9a5f0b9a1c 100644
--- a/frontend/src/components/actors/actor-region.tsx
+++ b/frontend/src/components/actors/actor-region.tsx
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Flex, WithTooltip } from "@/components";
 import {
 	getRegionKey,
+	getRegionLabel,
 	REGION_LABEL,
 	RegionIcon,
 } from "../matchmaker/lobby-region";
@@ -34,8 +35,8 @@ export function ActorRegion({
 				<RegionIcon region={regionKey} className="w-4 min-w-4" />
 				<span data-slot="label">
 					{showLabel === "abbreviated"
-						? regionKey.toUpperCase()
-						: (REGION_LABEL[regionKey] ?? REGION_LABEL.unknown)}
+						? regionKey?.toUpperCase()
+						: getRegionLabel(regionKey)}
 				</span>
 			</Flex>
 		);
@@ -43,7 +44,7 @@ export function ActorRegion({
 
 	return (
 		<WithTooltip
-			content={REGION_LABEL[regionKey] ?? REGION_LABEL.unknown}
+			content={getRegionLabel(regionKey)}
 			trigger={
 				<Flex
 					gap="2"
diff --git a/frontend/src/components/actors/actors-layout-context.tsx b/frontend/src/components/actors/actors-layout-context.tsx
index bcc67a9e1f..bd202d00c6 100644
--- a/frontend/src/components/actors/actors-layout-context.tsx
+++ b/frontend/src/components/actors/actors-layout-context.tsx
@@ -4,7 +4,7 @@ import { assertNonNullable } from "../lib/utils";
 import type { ImperativePanelHandle } from "../ui/resizable";
 
 export interface ActorsLayoutContextValue {
-	detailsRef: RefObject<ImperativePanelHandle>;
+	detailsRef: RefObject<ImperativePanelHandle | null>;
 	isDetailsColCollapsed: boolean;
 }
 
diff --git a/frontend/src/components/actors/actors-list-preview.tsx b/frontend/src/components/actors/actors-list-preview.tsx
index 5b7d191b4e..fd20fc5916 100644
--- a/frontend/src/components/actors/actors-list-preview.tsx
+++ b/frontend/src/components/actors/actors-list-preview.tsx
@@ -17,7 +17,7 @@ interface ActorsListPreviewProps {
 
 export const ActorsListPreview = memo(
 	({ children, showDetails }: ActorsListPreviewProps) => {
-		const detailsColRef = useRef<ImperativePanelHandle>(null);
+		const detailsColRef = useRef<ImperativePanelHandle | null>(null);
 
 		const { isSidebarCollapsed } = useRootLayout();
 		const [isDetailsColCollapsed, setIsDetailsColCollapsed] =
diff --git a/frontend/src/components/actors/actors-list-row.tsx b/frontend/src/components/actors/actors-list-row.tsx
index 293495d3cf..f2a99f5aa4 100644
--- a/frontend/src/components/actors/actors-list-row.tsx
+++ b/frontend/src/components/actors/actors-list-row.tsx
@@ -120,7 +120,7 @@ function Datacenter({ actorId }: { actorId: ActorId }) {
 	const showDatacenter = useSearch({
 		strict: false,
 		select: (search) =>
-			(pick(search).showDatacenter as FilterValue)?.value?.includes("1"),
+			(pick(search || {}).showDatacenter as FilterValue)?.value?.includes("1"),
 	});
 
 	if (!showDatacenter) {
diff --git a/frontend/src/components/actors/data-provider.tsx b/frontend/src/components/actors/data-provider.tsx
index 8e04ccc176..654e3112cb 100644
--- a/frontend/src/components/actors/data-provider.tsx
+++ b/frontend/src/components/actors/data-provider.tsx
@@ -64,6 +64,12 @@ export const useEngineDataProvider = () => {
 	}).dataProvider;
 };
 
+export const useEngineNamespaceDataProvider = () => {
+	return useRouteContext({
+		from: "/_context/_engine/ns/$namespace",
+	}).dataProvider;
+}
+
 export const useInspectorDataProvider = () => {
 	const context = useRouteContext({
 		from: "/_context",
@@ -91,6 +97,12 @@ export const useCloudDataProvider = ({
 	}).dataProvider;
 };
 
+export const useCloudNamespaceDataProvider = () => {
+	return useRouteContext({
+		from: "/_context/_cloud/orgs/$organization/projects/$project/ns/$namespace",
+	}).dataProvider;
+}
+
 export const useEngineCompatDataProvider = () => {
 	return useRouteContext({
 		from: match(__APP_TYPE__)
diff --git a/frontend/src/components/actors/region-select.tsx b/frontend/src/components/actors/region-select.tsx
index 605cfc5796..bb8dee1831 100644
--- a/frontend/src/components/actors/region-select.tsx
+++ b/frontend/src/components/actors/region-select.tsx
@@ -5,7 +5,7 @@ import { useDataProvider } from "./data-provider";
 
 interface RegionSelectProps {
 	onValueChange: (value: string) => void;
-	value: string;
+	value: string | undefined;
 	showAuto?: boolean;
 }
 
diff --git a/frontend/src/components/actors/root-layout-context.tsx b/frontend/src/components/actors/root-layout-context.tsx
index 3c2e64424a..101bcefcd7 100644
--- a/frontend/src/components/actors/root-layout-context.tsx
+++ b/frontend/src/components/actors/root-layout-context.tsx
@@ -3,7 +3,7 @@ import { createContext, useContext, useMemo } from "react";
 import { assertNonNullable, type ImperativePanelHandle } from "@/components";
 
 export interface RootLayoutContextValue {
-	sidebarRef: RefObject<ImperativePanelHandle>;
+	sidebarRef: RefObject<ImperativePanelHandle | null>;
 	isSidebarCollapsed: boolean;
 }
 
diff --git a/frontend/src/components/actors/worker/actor-repl.worker.ts b/frontend/src/components/actors/worker/actor-repl.worker.ts
index 28bbbed62b..e241d82788 100644
--- a/frontend/src/components/actors/worker/actor-repl.worker.ts
+++ b/frontend/src/components/actors/worker/actor-repl.worker.ts
@@ -179,6 +179,14 @@ async function callAction({ name, args }: { name: string; args: unknown[] }) {
 
 	const url = new URL(`inspect`, init.endpoint).href;
 
+	const additionalHeaders = match(__APP_TYPE__)
+				.with("engine", () => {
+					return init?.engineToken
+						? { "X-Rivet-Token": init.engineToken || "" }
+						: {} as Record<string, string>
+				})
+				.otherwise(() => ({}));
+
 	// we need to build this from scratch because we don't have access to
 	// createInspectorActorContext in the worker
 	// and we want to avoid bundling the entire RivetKit here, issues with @react-refresh
@@ -192,14 +200,7 @@ async function callAction({ name, args }: { name: string; args: unknown[] }) {
 			"X-RivetKit-Query": JSON.stringify({
 				getForId: { actorId: init.id },
 			}),
-
-			...match(__APP_TYPE__)
-				.with("engine", () => {
-					return init?.engineToken
-						? { "X-Rivet-Token": init.engineToken }
-						: {};
-				})
-				.otherwise(() => ({})),
+			...additionalHeaders,
 		},
 	});
 
diff --git a/frontend/src/components/actors/worker/actor-worker-context.tsx b/frontend/src/components/actors/worker/actor-worker-context.tsx
index ca426e9664..8848d94916 100644
--- a/frontend/src/components/actors/worker/actor-worker-context.tsx
+++ b/frontend/src/components/actors/worker/actor-worker-context.tsx
@@ -51,7 +51,7 @@ export const ActorWorkerContextProvider = ({
 	children,
 	actorId,
 }: ActorWorkerContextProviderProps) => {
-	const dataProvider = useDataProvider();
+	const dataProvider = useEngineCompatDataProvider();
 	const engineToken = dataProvider.engineToken;
 	const namespace = dataProvider.engineNamespace;
 	const {
diff --git a/frontend/src/components/code.tsx b/frontend/src/components/code.tsx
index fd19344e3e..66b5ce64b7 100644
--- a/frontend/src/components/code.tsx
+++ b/frontend/src/components/code.tsx
@@ -116,7 +116,7 @@ interface CodeFrameProps {
 	isInGroup?: boolean;
 	code?: () => string | string;
 	footer?: ReactNode;
-	children?: ReactElement;
+	children?: ReactElement<any>;
 }
 export const CodeFrame = ({
 	children,
diff --git a/frontend/src/components/matchmaker/lobby-region.tsx b/frontend/src/components/matchmaker/lobby-region.tsx
index c49672db91..e887c1a57d 100644
--- a/frontend/src/components/matchmaker/lobby-region.tsx
+++ b/frontend/src/components/matchmaker/lobby-region.tsx
@@ -106,6 +106,10 @@ export const REGION_LABEL: Record<string, string> = {
 	"ap-southeast-1": "Singapore",
 };
 
+export function getRegionLabel(regionId: string | undefined) {
+	return regionId ? REGION_LABEL[regionId] ?? REGION_LABEL.unknown : REGION_LABEL.unknown;
+}
+
 export function getRegionKey(regionNameId: string | undefined) {
 	return regionNameId;
 }
diff --git a/frontend/src/components/safe-hover.tsx b/frontend/src/components/safe-hover.tsx
index 6c7a87071f..6dd8a4baae 100644
--- a/frontend/src/components/safe-hover.tsx
+++ b/frontend/src/components/safe-hover.tsx
@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot";
 import { type MouseEventHandler, useCallback } from "react";
-import * as styles from "./styles/safe-hover.module.css";
+import styles from "./styles/safe-hover.module.css";
 
 export function SafeHover({
 	children,
diff --git a/frontend/src/components/ui/combobox.tsx b/frontend/src/components/ui/combobox.tsx
index f6ca7e3c56..fcec46b6f5 100644
--- a/frontend/src/components/ui/combobox.tsx
+++ b/frontend/src/components/ui/combobox.tsx
@@ -31,13 +31,13 @@ interface ComboboxDefaultProps {
 
 interface ComboboxSingleProps {
 	multiple?: false;
-	value: string;
+	value: string | undefined;
 	onValueChange: (value: string) => void;
 }
 
 interface ComboboxMultipleProps {
 	multiple: true;
-	value: string[];
+	value: string[] | undefined;
 	onValueChange: (value: string[]) => void;
 }
 
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 54398ab366..8278b83e82 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
@@ -45,9 +45,11 @@ import {
 	H3,
 	Skeleton,
 } from "@/components";
-import { useEngineCompatDataProvider } from "@/components/actors";
+import { useCloudDataProvider, useCloudNamespaceDataProvider, useEngineCompatDataProvider, useEngineDataProvider, useEngineNamespaceDataProvider } from "@/components/actors";
 import { cloudEnv, engineEnv } from "@/lib/env";
 import { useRailwayTemplateLink } from "@/utils/use-railway-template-link";
+import z from "zod";
+import { hasProvider } from "@/app/data-providers/engine-data-provider";
 
 export const Route = createFileRoute(
 	"/_context/_cloud/orgs/$organization/projects/$project/ns/$namespace/connect",
@@ -435,14 +437,13 @@ function Runners() {
 }
 
 function usePublishableToken() {
-	const dataProvider = useEngineCompatDataProvider();
 	return match(__APP_TYPE__)
 		.with("cloud", () => {
-			return useSuspenseQuery(dataProvider.publishableTokenQueryOptions())
+			return useSuspenseQuery(useCloudNamespaceDataProvider().publishableTokenQueryOptions())
 				.data;
 		})
 		.with("engine", () => {
-			return useSuspenseQuery(dataProvider.engineAdminTokenQueryOptions())
+			return useSuspenseQuery(useEngineNamespaceDataProvider().engineAdminTokenQueryOptions())
 				.data;
 		})
 		.otherwise(() => {
@@ -572,27 +573,6 @@ function ConnectYourFrontend() {
 	);
 }
 
-type RunnerConfig = [
-	string,
-	{
-		datacenters: Record<string, { metadata?: { provider?: string } }>;
-	},
-];
-
-function hasProvider(
-	configs: RunnerConfig[] | undefined,
-	providers: string[],
-): boolean {
-	if (!configs) return false;
-	return configs.some(([, config]) =>
-		Object.values(config.datacenters).some(
-			(datacenter) =>
-				datacenter.metadata?.provider &&
-				providers.includes(datacenter.metadata.provider),
-		),
-	);
-}
-
 const javascriptCode = ({
 	token,
 	endpoint,
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index 58707f9bf3..f8580e2d01 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -28,3 +28,9 @@ declare const Plain: {
 	// This will redact sensitive information such as customer details
 	exportDebugLogs(): any[];
 };
+
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index d38c4ab055..ba501acfec 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -15,5 +15,5 @@
 		},
 		"plugins": [{ "name": "typescript-plugin-css-modules" }]
 	},
-	"include": ["src", "vite.inspector.config.ts", "vite.engine.config.ts"]
+	"include": ["src", "./vite-env.d.ts", "./vite.inspector.config.ts", "./vite.engine.config.ts"]
 }
diff --git a/frontend/vite-env.d.ts b/frontend/vite-env.d.ts
deleted file mode 100644
index 3343779381..0000000000
--- a/frontend/vite-env.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/// <reference types="vite/client" />
-
-declare const __APP_BUILD_ID__: string;
-declare const __APP_TYPE__: "engine" | "inspector";
-
-declare module "vite-plugin-favicons-inject" {
-	import type { Plugin } from "vite";
-
-	export default function vitePluginFaviconsInject(
-		iconPath: string,
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-		options: Record<string, any>,
-	): Plugin;
-}
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 58b6cfdbee..06b84689ff 100644
--- a/rivetkit-typescript/packages/rivetkit/src/drivers/engine/actor-driver.ts
+++ b/rivetkit-typescript/packages/rivetkit/src/drivers/engine/actor-driver.ts
@@ -132,9 +132,7 @@ export class EngineActorDriver implements ActorDriver {
 			onShutdown: () => {
 				this.#runnerStopped.resolve(undefined);
 			},
-			// @ts-expect-error
 			fetch: this.#runnerFetch.bind(this),
-			// @ts-expect-error
 			websocket: this.#runnerWebSocket.bind(this),
 			onActorStart: this.#runnerOnActorStart.bind(this),
 			onActorStop: this.#runnerOnActorStop.bind(this),