fix: add region names

frontend/src/app/data-providers/engine-data-provider.tsx

@@ -527,7 +527,7 @@ export const createNamespaceContext = ({
 				},
 			});
 		},
-		createRunnerConfigMutationOptions(
+		upsertRunnerConfigMutationOptions(
 			opts: {
 				onSuccess?: (data: Rivet.RunnerConfigsUpsertResponse) => void;
 			} = {},
@@ -554,6 +554,21 @@ export const createNamespaceContext = ({
 				},
 			};
 		},
+		deleteRunnerConfigMutationOptions(
+			opts: { onSuccess?: (data: void) => void } = {},
+		) {
+			return {
+				...opts,
+				mutationKey: ["runner-config", "delete"],
+				mutationFn: async (name: string) => {
+					await client.runnerConfigs.delete(name, { namespace });
+				},
+				retry: shouldRetryAllExpect403,
+				meta: {
+					mightRequireAuth,
+				},
+			};
+		},
 		runnerConfigsQueryOptions() {
 			return infiniteQueryOptions({
 				queryKey: [{ namespace }, "runners", "configs"],
@@ -592,6 +607,7 @@ export const createNamespaceContext = ({
 				},
 			});
 		},
+
 		runnerConfigQueryOptions(runnerName: string) {
 			return queryOptions({
 				queryKey: [{ namespace }, "runners", "config", runnerName],

frontend/src/app/dialogs/confirm-delete-config-frame.tsx

@@ -0,0 +1,53 @@
+import { useMutation } from "@tanstack/react-query";
+import { Button, type DialogContentProps, Frame } from "@/components";
+import { useEngineCompatDataProvider } from "@/components/actors";
+import { queryClient } from "@/queries/global";
+
+interface ConfirmDeleteConfigContentProps extends DialogContentProps {
+	name: string;
+}
+
+export default function ConfirmDeleteConfigContent({
+	onClose,
+	name,
+}: ConfirmDeleteConfigContentProps) {
+	const provider = useEngineCompatDataProvider();
+	const { mutate, isPending } = useMutation(
+		provider.deleteRunnerConfigMutationOptions({
+			onSuccess: async () => {
+				await queryClient.invalidateQueries(
+					provider.runnerConfigsQueryOptions(),
+				);
+				onClose?.();
+			},
+		}),
+	);
+
+	return (
+		<>
+			<Frame.Header>
+				<Frame.Title className="gap-2 flex items-center">
+					<div>Confirm deletion of {name}</div>
+				</Frame.Title>
+				<Frame.Description>
+					This action cannot be undone. Are you sure you want to
+					delete this configuration?
+				</Frame.Description>
+			</Frame.Header>
+			<Frame.Footer>
+				<Button
+					variant="destructive"
+					isLoading={isPending}
+					onClick={() => {
+						mutate(name);
+					}}
+				>
+					Delete
+				</Button>
+				<Button variant="secondary" onClick={onClose}>
+					Cancel
+				</Button>
+			</Frame.Footer>
+		</>
+	);
+}

frontend/src/app/dialogs/connect-aws-frame.tsx

@@ -39,6 +39,7 @@ const stepper = defineStepper(
 			headers: z.array(z.tuple([z.string(), z.string()])).default([]),
 			slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
 			maxRunners: z.coerce.number().min(1, "Must be at least 1"),
+			minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
 			runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
 		}),
 	},
@@ -99,9 +100,10 @@ function FormStepper({
 	onClose?: () => void;
 	datacenters: Region[];
 }) {
+	const provider = useEngineCompatDataProvider();
 	const { mutateAsync } = useMutation({
-		...useEngineCompatDataProvider().createRunnerConfigMutationOptions(),
-		onSuccess: () => {
+		...provider.upsertRunnerConfigMutationOptions(),
+		onSuccess: async () => {
 			confetti({
 				angle: 60,
 				spread: 55,
@@ -112,6 +114,10 @@ function FormStepper({
 				spread: 55,
 				origin: { x: 1 },
 			});
+
+			await queryClient.invalidateQueries(
+				provider.runnerConfigsQueryOptions(),
+			);
 			onClose?.();
 		},
 	});
@@ -166,6 +172,7 @@ function Step1() {
 			<ConnectVercelForm.Headers />
 			<ConnectVercelForm.SlotsPerRunner />
 			<ConnectVercelForm.MaxRunners />
+			<ConnectVercelForm.MinRunners />
 			<ConnectVercelForm.RunnerMargin />
 		</div>
 	);

frontend/src/app/dialogs/connect-gcp-frame.tsx

@@ -13,6 +13,7 @@ import * as ConnectVercelForm from "@/app/forms/connect-vercel-form";
 import { cn, type DialogContentProps, Frame } from "@/components";
 import { type Region, useEngineCompatDataProvider } from "@/components/actors";
 import { defineStepper } from "@/components/ui/stepper";
+import { queryClient } from "@/queries/global";
 import { StepperForm } from "../forms/stepper-form";
 import { EnvVariablesStep } from "./connect-railway-frame";
 
@@ -33,6 +34,7 @@ const stepper = defineStepper(
 			headers: z.array(z.tuple([z.string(), z.string()])).default([]),
 			slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
 			maxRunners: z.coerce.number().min(1, "Must be at least 1"),
+			minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
 			runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
 		}),
 	},
@@ -94,9 +96,10 @@ function FormStepper({
 	onClose?: () => void;
 	datacenters: Region[];
 }) {
+	const provider = useEngineCompatDataProvider();
 	const { mutateAsync } = useMutation({
-		...useEngineCompatDataProvider().createRunnerConfigMutationOptions(),
-		onSuccess: () => {
+		...provider.upsertRunnerConfigMutationOptions(),
+		onSuccess: async () => {
 			confetti({
 				angle: 60,
 				spread: 55,
@@ -107,6 +110,10 @@ function FormStepper({
 				spread: 55,
 				origin: { x: 1 },
 			});
+
+			await queryClient.invalidateQueries(
+				provider.runnerConfigsQueryOptions(),
+			);
 			onClose?.();
 		},
 	});
@@ -161,6 +168,7 @@ function Step1() {
 			<ConnectVercelForm.Headers />
 			<ConnectVercelForm.SlotsPerRunner />
 			<ConnectVercelForm.MaxRunners />
+			<ConnectVercelForm.MinRunners />
 			<ConnectVercelForm.RunnerMargin />
 		</div>
 	);

frontend/src/app/dialogs/connect-hetzner-frame.tsx

@@ -19,6 +19,7 @@ import * as ConnectVercelForm from "@/app/forms/connect-vercel-form";
 import { cn, type DialogContentProps, Frame } from "@/components";
 import { type Region, useEngineCompatDataProvider } from "@/components/actors";
 import { defineStepper } from "@/components/ui/stepper";
+import { queryClient } from "@/queries/global";
 import { StepperForm } from "../forms/stepper-form";
 import { EnvVariablesStep } from "./connect-railway-frame";
 
@@ -39,6 +40,7 @@ const stepper = defineStepper(
 			headers: z.array(z.tuple([z.string(), z.string()])).default([]),
 			slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
 			maxRunners: z.coerce.number().min(1, "Must be at least 1"),
+			minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
 			runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
 		}),
 	},
@@ -99,9 +101,10 @@ function FormStepper({
 	onClose?: () => void;
 	datacenters: Region[];
 }) {
+	const provider = useEngineCompatDataProvider();
 	const { mutateAsync } = useMutation({
-		...useEngineCompatDataProvider().createRunnerConfigMutationOptions(),
-		onSuccess: () => {
+		...provider.upsertRunnerConfigMutationOptions(),
+		onSuccess: async () => {
 			confetti({
 				angle: 60,
 				spread: 55,
@@ -112,6 +115,10 @@ function FormStepper({
 				spread: 55,
 				origin: { x: 1 },
 			});
+
+			await queryClient.invalidateQueries(
+				provider.runnerConfigsQueryOptions(),
+			);
 			onClose?.();
 		},
 	});
@@ -143,6 +150,7 @@ function FormStepper({
 				slotsPerRunner: 25,
 				maxRunners: 1000,
 				runnerMargin: 0,
+				minRunners: 1,
 				headers: [],
 				success: false,
 				datacenters: Object.fromEntries(
@@ -166,6 +174,7 @@ function Step1() {
 			<ConnectVercelForm.Headers />
 			<ConnectVercelForm.SlotsPerRunner />
 			<ConnectVercelForm.MaxRunners />
+			<ConnectVercelForm.MinRunners />
 			<ConnectVercelForm.RunnerMargin />
 		</div>
 	);

frontend/src/app/dialogs/connect-manual-frame.tsx

@@ -13,6 +13,7 @@ import * as ConnectVercelForm from "@/app/forms/connect-vercel-form";
 import { cn, type DialogContentProps, Frame } from "@/components";
 import { type Region, useEngineCompatDataProvider } from "@/components/actors";
 import { defineStepper } from "@/components/ui/stepper";
+import { queryClient } from "@/queries/global";
 import { StepperForm } from "../forms/stepper-form";
 import { EnvVariablesStep } from "./connect-railway-frame";
 
@@ -33,6 +34,7 @@ const stepper = defineStepper(
 			headers: z.array(z.tuple([z.string(), z.string()])).default([]),
 			slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
 			maxRunners: z.coerce.number().min(1, "Must be at least 1"),
+			minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
 			runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
 		}),
 	},
@@ -93,9 +95,10 @@ function FormStepper({
 	onClose?: () => void;
 	datacenters: Region[];
 }) {
+	const provider = useEngineCompatDataProvider();
 	const { mutateAsync } = useMutation({
-		...useEngineCompatDataProvider().createRunnerConfigMutationOptions(),
-		onSuccess: () => {
+		...provider.upsertRunnerConfigMutationOptions(),
+		onSuccess: async () => {
 			confetti({
 				angle: 60,
 				spread: 55,
@@ -106,6 +109,10 @@ function FormStepper({
 				spread: 55,
 				origin: { x: 1 },
 			});
+
+			await queryClient.invalidateQueries(
+				provider.runnerConfigsQueryOptions(),
+			);
 			onClose?.();
 		},
 	});
@@ -136,6 +143,7 @@ function FormStepper({
 				runnerName: "default",
 				slotsPerRunner: 25,
 				maxRunners: 1000,
+				minRunners: 1,
 				runnerMargin: 0,
 				headers: [],
 				success: false,
@@ -160,6 +168,7 @@ function Step1() {
 			<ConnectVercelForm.Headers />
 			<ConnectVercelForm.SlotsPerRunner />
 			<ConnectVercelForm.MaxRunners />
+			<ConnectVercelForm.MinRunners />
 			<ConnectVercelForm.RunnerMargin />
 		</div>
 	);

frontend/src/app/dialogs/connect-railway-frame.tsx

@@ -48,7 +48,7 @@ const stepper = defineStepper(
 	{
 		id: "step-3",
 		title: "Wait for the Runner to connect",
-		assist: false,
+		assist: true,
 		schema: z.object({
 			success: z.boolean().refine((v) => v === true, {
 				message: "Runner must be connected to proceed",
@@ -74,6 +74,8 @@ export default function ConnectRailwayFrameContent({
 	const prefferedRegionForRailway =
 		data.find((region) => region.name.toLowerCase().includes("us-west"))
 			?.id ||
+		data.find((region) => region.name.toLowerCase().includes("us-east"))
+			?.id ||
 		data.find((region) => region.name.toLowerCase().includes("ore"))?.id ||
 		"auto";
 
@@ -103,9 +105,10 @@ function FormStepper({
 	onClose?: () => void;
 	defaultDatacenter: string;
 }) {
+	const provider = useEngineCompatDataProvider();
 	const { mutateAsync } = useMutation({
-		...useEngineCompatDataProvider().createRunnerConfigMutationOptions(),
-		onSuccess: () => {
+		...provider.upsertRunnerConfigMutationOptions(),
+		onSuccess: async () => {
 			confetti({
 				angle: 60,
 				spread: 55,
@@ -116,6 +119,8 @@ function FormStepper({
 				spread: 55,
 				origin: { x: 1 },
 			});
+
+						await queryClient.invalidateQueries(provider.runnerConfigsQueryOptions());
 			onClose?.();
 		},
 	});

frontend/src/app/dialogs/connect-vercel-frame.tsx

@@ -20,6 +20,7 @@ import {
 } from "@/components";
 import { type Region, useEngineCompatDataProvider } from "@/components/actors";
 import { type JoinStepSchemas, StepperForm } from "../forms/stepper-form";
+import { queryClient } from "@/queries/global";
 
 const { stepper } = ConnectVercelForm;
 
@@ -47,11 +48,6 @@ export default function CreateProjectFrameContent({
 						Add <Icon icon={faVercel} className="ml-0.5" />
 						Vercel
 					</div>
-					<HelpDropdown>
-						<Button variant="ghost" size="icon">
-							<Icon icon={faQuestionCircle} />
-						</Button>
-					</HelpDropdown>
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>
@@ -68,9 +64,10 @@ function FormStepper({
 	onClose?: () => void;
 	datacenters: Region[];
 }) {
+	const provider = useEngineCompatDataProvider();
 	const { mutateAsync } = useMutation({
-		...useEngineCompatDataProvider().createRunnerConfigMutationOptions(),
-		onSuccess: () => {
+		...provider.upsertRunnerConfigMutationOptions(),
+		onSuccess: async () => {
 			confetti({
 				angle: 60,
 				spread: 55,
@@ -81,6 +78,7 @@ function FormStepper({
 				spread: 55,
 				origin: { x: 1 },
 			});
+			await queryClient.invalidateQueries(provider.runnerConfigsQueryOptions());
 			onClose?.();
 		},
 	});
@@ -127,6 +125,7 @@ function FormStepper({
 				plan: "hobby",
 				runnerName: "default",
 				slotsPerRunner: 25,
+				minRunners: 1,
 				maxRunners: 1000,
 				runnerMargin: 0,
 				headers: [],
@@ -153,6 +152,7 @@ function Step1() {
 						<ConnectVercelForm.Datacenters />
 						<ConnectVercelForm.Headers />
 						<ConnectVercelForm.SlotsPerRunner />
+						<ConnectVercelForm.MinRunners />
 						<ConnectVercelForm.MaxRunners />
 						<ConnectVercelForm.RunnerMargin />
 					</AccordionContent>