fix: polishing

frontend/src/app/changelog.tsx

@@ -37,7 +37,7 @@ export function ChangelogEntry({
 					<div className="bg-white text-background size-8 rounded-full flex items-center justify-center">
 						<Icon icon={faSparkle} className="m-0" />
 					</div>
-					<h4 className="font-bold text-lg text-foreground">
+					<h4 className=" text-lg text-foreground">
 						{isNew ? (
 							<span>New Update</span>
 						) : (

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

@@ -357,7 +357,7 @@ export const createNamespaceContext = ({
 		namespaceQueryOptions() {
 			return parent.currentProjectNamespaceQueryOptions({ namespace });
 		},
-		connectRunnerTokenQueryOptions() {
+		engineAdminTokenQueryOptions() {
 			return queryOptions({
 				staleTime: 5 * 60 * 1000, // 5 minutes
 				gcTime: 5 * 60 * 1000, // 5 minutes
@@ -367,11 +367,11 @@ export const createNamespaceContext = ({
 						project: parent.project,
 						organization: parent.organization,
 					},
-					"runners",
-					"connect",
+					"tokens",
+					"engine-admin",
 				],
 				queryFn: async () => {
-					const f = parent.client.namespaces.createPublishableToken(
+					const f = parent.client.namespaces.createSecretToken(
 						parent.project,
 						namespace,
 						{ org: parent.organization },

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

@@ -585,11 +585,11 @@ export const createNamespaceContext = ({
 				},
 			});
 		},
-		connectRunnerTokenQueryOptions() {
+		engineAdminTokenQueryOptions() {
 			return queryOptions({
 				staleTime: 1000,
 				gcTime: 1000,
-				queryKey: [{ namespace }, "runners", "connect"],
+				queryKey: [{ namespace }, "tokens", "engine-admin"],
 				queryFn: async () => {
 					return ls.engineCredentials.get(getConfig().apiUrl) || "";
 				},

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

@@ -24,7 +24,7 @@ const { Stepper } = defineStepper(
 	},
 	{
 		id: "step-3",
-		title: "Confirm Connection",
+		title: "Wait for a Runner to connect",
 	},
 );
 
@@ -39,7 +39,7 @@ export default function ConnectRailwayFrameContent({
 			defaultValues={{ endpoint: "" }}
 		>
 			<Frame.Header>
-				<Frame.Title className="justify-between flex items-center">
+				<Frame.Title className="gap-2 flex items-center">
 					<div>
 						Add <Icon icon={faRailway} className="ml-0.5" /> Railway
 					</div>
@@ -60,7 +60,7 @@ export default function ConnectRailwayFrameContent({
 function FormStepper({ onClose }: { onClose?: () => void }) {
 	const dataProvider = useEngineCompatDataProvider();
 
-	const { data } = useQuery(dataProvider.connectRunnerTokenQueryOptions());
+	const { data } = useQuery(dataProvider.engineAdminTokenQueryOptions());
 
 	return (
 		<Stepper.Provider variant="vertical">
@@ -90,7 +90,7 @@ function FormStepper({ onClose }: { onClose?: () => void }) {
 														quickly.
 													</p>
 													<a
-														href={`https://railway.com/new/template/rivet-cloud-starter?referralCode=RC7bza&utm_medium=integration&utm_source=template&utm_campaign=generic&RIVET_TOKEN=${data}&RIVET_ENGINE=${
+														href={`https://railway.com/new/template/rivet-cloud-starter?referralCode=RC7bza&utm_medium=integration&utm_source=template&utm_campaign=generic&RIVET_TOKEN=${data}&RIVET_ENDPOINT=${
 															__APP_TYPE__ ===
 															"engine"
 																? engineEnv()
@@ -123,10 +123,6 @@ function FormStepper({ onClose }: { onClose?: () => void }) {
 											)}
 											{step.id === "step-3" && (
 												<div>
-													<ConnectRailwayForm.Endpoint
-														placeholder="https://your-application.up.railway.app/"
-														className="mb-2"
-													/>
 													<ConnectRailwayForm.ConnectionCheck />
 												</div>
 											)}
@@ -167,7 +163,7 @@ function EnvVariablesStep() {
 	const dataProvider = useEngineCompatDataProvider();
 
 	const { data, isLoading } = useQuery(
-		dataProvider.connectRunnerTokenQueryOptions(),
+		dataProvider.engineAdminTokenQueryOptions(),
 	);
 
 	return (
@@ -179,7 +175,7 @@ function EnvVariablesStep() {
 			<div className="gap-1 items-center grid grid-cols-2">
 				{__APP_TYPE__ === "engine" ? (
 					<>
-						<DiscreteInput value="RIVET_ENGINE" show />
+						<DiscreteInput value="RIVET_ENDPOINT" show />
 						<DiscreteInput value={engineEnv().VITE_APP_API_URL} />
 					</>
 				) : null}

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

@@ -1,11 +1,7 @@
 import { faQuestionCircle, faVercel, Icon } from "@rivet-gg/icons";
 import * as ConnectVercelForm from "@/app/forms/connect-vercel-form";
 import { HelpDropdown } from "@/app/help-dropdown";
-import {
-	Button,
-	type DialogContentProps,
-	Frame,
-} from "@/components";
+import { Button, type DialogContentProps, Frame } from "@/components";
 import { defineStepper } from "@/components/ui/stepper";
 
 const { Stepper } = defineStepper(
@@ -40,7 +36,7 @@ export default function CreateProjectFrameContent({
 			defaultValues={{ plan: "hobby", endpoint: "" }}
 		>
 			<Frame.Header>
-				<Frame.Title className="justify-between flex items-center">
+				<Frame.Title className="gap-2 flex items-center">
 					<div>
 						Add <Icon icon={faVercel} className="ml-0.5" />
 						Vercel

frontend/src/app/forms/connect-railway-form.tsx

@@ -1,11 +1,14 @@
+import { faCheck, faSpinnerThird, Icon } from "@rivet-gg/icons";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import { useEffect, useRef } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import z from "zod";
-import * as ConnectVercelForm from "@/app/forms/connect-vercel-form";
-import { createSchemaForm } from "@/components";
+import { cn, createSchemaForm } from "@/components";
+import { useEngineCompatDataProvider } from "@/components/actors";
+import { NeedHelp } from "./connect-vercel-form";
 
-export const formSchema = z.object({
-	endpoint: z.string().url(),
-});
+export const formSchema = z.object({});
 
 export type FormValues = z.infer<typeof formSchema>;
 export type SubmitHandler = (
@@ -16,5 +19,51 @@ export type SubmitHandler = (
 const { Form, Submit, SetValue } = createSchemaForm(formSchema);
 export { Form, Submit, SetValue };
 
-export const ConnectionCheck = ConnectVercelForm.ConnectionCheck;
-export const Endpoint = ConnectVercelForm.Endpoint;
+export const ConnectionCheck = function ConnectionCheck() {
+	const { data } = useInfiniteQuery({
+		...useEngineCompatDataProvider().runnersQueryOptions(),
+		refetchInterval: 1000,
+		maxPages: 9999,
+		select: (data) =>
+			data.pages.reduce((acc, page) => acc + page.runners.length, 0),
+	});
+
+	const lastCount = useRef(data);
+
+	useEffect(() => {
+		lastCount.current = data;
+	}, [data]);
+
+	const success =
+		data !== undefined && data > 0 && data !== lastCount.current;
+
+	return (
+		<motion.div
+			layoutId="msg"
+			className={cn(
+				"text-center text-muted-foreground text-sm overflow-hidden flex items-center justify-center",
+				success && "text-primary-foreground",
+			)}
+			initial={{ height: 0, opacity: 0.5 }}
+			animate={{ height: "6rem", opacity: 1 }}
+		>
+			{success ? (
+				<>
+					<Icon icon={faCheck} className="mr-1.5 text-primary" />{" "}
+					Runner successfully connected
+				</>
+			) : (
+				<div className="flex flex-col items-center gap-2">
+					<div className="flex items-center">
+						<Icon
+							icon={faSpinnerThird}
+							className="mr-1.5 animate-spin"
+						/>{" "}
+						Waiting for Runner to connect...
+					</div>
+					<NeedHelp />
+				</div>
+			)}
+		</motion.div>
+	);
+};

frontend/src/app/forms/org-sign-up-form.tsx

@@ -0,0 +1,47 @@
+import { type UseFormReturn, useFormContext } from "react-hook-form";
+import z from "zod";
+import {
+	createSchemaForm,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	Input,
+} from "@/components";
+
+export const formSchema = z.object({
+	password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+export type FormValues = z.infer<typeof formSchema>;
+export type SubmitHandler = (
+	values: FormValues,
+	form: UseFormReturn<FormValues>,
+) => Promise<void>;
+
+const { Form, Submit, SetValue } = createSchemaForm(formSchema);
+export { Form, Submit, SetValue };
+
+export const Password = ({ className }: { className?: string }) => {
+	const { control } = useFormContext<FormValues>();
+	return (
+		<FormField
+			control={control}
+			name="password"
+			render={({ field }) => (
+				<FormItem className={className}>
+					<FormLabel>Password</FormLabel>
+					<FormControl>
+						<Input
+							type="password"
+							placeholder="Enter a secure password"
+							{...field}
+						/>
+					</FormControl>
+					<FormMessage />
+				</FormItem>
+			)}
+		/>
+	);
+};

frontend/src/app/namespaces-page.tsx

@@ -32,7 +32,7 @@ export function NamespacesPage({ from }: { from: LinkComponentProps["from"] }) {
 
 	return (
 		<div className="bg-card h-full border my-2 mr-2 rounded-lg">
-			<div className="max-w-5xl mx-auto my-2 flex justify-between items-center px-6 py-4">
+			<div className="mx-auto my-2 flex justify-between items-center px-6 py-4">
 				<H1>Namespaces</H1>
 				<div className="flex items-center gap-2">
 					<WithTooltip

frontend/src/components/actors/dialogs/create-actor-dialog.tsx

@@ -65,20 +65,18 @@ export default function CreateActorDialog({
 				{!name ? <ActorCreateForm.Build /> : null}
 				<ActorCreateForm.Keys />
 				<ActorCreateForm.ActorPreview />
-				{__APP_TYPE__ === "engine" ? (
-					<ActorCreateForm.PrefillRunnerName namespace={namespace} />
+				{["engine", "cloud"].includes(__APP_TYPE__) ? (
+					<ActorCreateForm.PrefillRunnerName />
 				) : null}
 
 				<Accordion type="single" collapsible>
 					<AccordionItem value="item-1">
 						<AccordionTrigger>Advanced</AccordionTrigger>
 						<AccordionContent className="flex gap-4 flex-col">
-							{__APP_TYPE__ === "engine" ? (
+							{["engine", "cloud"].includes(__APP_TYPE__) ? (
 								<>
 									<ActorCreateForm.Region />
-									<ActorCreateForm.RunnerNameSelector
-										namespace={namespace}
-									/>
+									<ActorCreateForm.RunnerNameSelector />
 									<ActorCreateForm.CrashPolicy />
 								</>
 							) : null}

frontend/src/components/actors/form/actor-create-form.tsx

@@ -15,6 +15,7 @@ import {
 } from "../../ui/form";
 import { BuildSelect } from "../build-select";
 import { CrashPolicySelect } from "../crash-policy-select";
+import { useEngineCompatDataProvider } from "../data-provider";
 import { CrashPolicy as CrashPolicyEnum } from "../queries";
 import { RegionSelect } from "../region-select";
 import { RunnerSelect } from "../runner-select";
@@ -153,7 +154,7 @@ export const JsonInput = () => {
 	);
 };
 
-export const RunnerNameSelector = ({ namespace }: { namespace: string }) => {
+export const RunnerNameSelector = () => {
 	const { control } = useFormContext<FormValues>();
 
 	return (
@@ -165,7 +166,6 @@ export const RunnerNameSelector = ({ namespace }: { namespace: string }) => {
 					<FormLabel>Runner</FormLabel>
 					<FormControl>
 						<RunnerSelect
-							namespace={namespace}
 							onValueChange={field.onChange}
 							value={field.value || ""}
 						/>
@@ -212,12 +212,12 @@ export const ActorPreview = () => {
 	);
 };
 
-export const PrefillRunnerName = ({ namespace }: { namespace: string }) => {
+export const PrefillRunnerName = () => {
 	const prefilled = useRef(false);
 	const { watch } = useFormContext<FormValues>();
 
 	const { data = [], isSuccess } = useInfiniteQuery(
-		runnerNamesQueryOptions({ namespace }),
+		useEngineCompatDataProvider().runnerNamesQueryOptions(),
 	);
 
 	const watchedValue = watch("runnerNameSelector");

frontend/src/components/actors/runner-select.tsx

@@ -6,22 +6,17 @@ import { useEngineCompatDataProvider } from "./data-provider";
 interface RunnerSelectProps {
 	onValueChange: (value: string) => void;
 	value: string;
-	namespace: string;
 }
 
-export function RunnerSelect({
-	onValueChange,
-	value,
-	namespace,
-}: RunnerSelectProps) {
+export function RunnerSelect({ onValueChange, value }: RunnerSelectProps) {
 	const {
 		data = [],
 		hasNextPage,
 		fetchNextPage,
 		isLoading,
 		isFetchingNextPage,
 	} = useInfiniteQuery(
-		useEngineCompatDataProvider().runnerNamesQueryOptions({ namespace }),
+		useEngineCompatDataProvider().runnerNamesQueryOptions(),
 	);
 
 	const [newRunner, setNewRunner] = useState<string | null>(null);

frontend/src/components/docs-sheet.tsx

@@ -52,8 +52,8 @@ export function DocsSheet({
 								rel="noopener noreferrer"
 								href={
 									path.startsWith("http")
-										? `${path}?utm_source=engine&embed=true`
-										: `https://rivet.gg/${path}?utm_source=engine&embed=true#${hash}`
+										? `${path}?utm_source=engine`
+										: `https://rivet.gg/${path}?utm_source=engine#${hash}`
 								}
 							>
 								Open in new tab

frontend/src/components/hooks/use-dialog.tsx

@@ -49,9 +49,9 @@ export const createDialogHook = <
 				<Dialog
 					{...dialogProps}
 					onOpenChange={
-						props.dismissible
+						props.dismissible === false
 							? () => {}
-							: props.dialogProps?.onOpenChange
+							: dialogProps?.onOpenChange
 					}
 				>
 					<DialogContent

frontend/src/routes/_context/_cloud/orgs.$organization/index.tsx

@@ -40,7 +40,7 @@ export const Route = createFileRoute("/_context/_cloud/orgs/$organization/")({
 	pendingComponent: () => (
 		<RouteLayout>
 			<div className="bg-card h-full border my-2 mr-2 rounded-lg">
-				<div className="max-w-5xl  mt-2 flex justify-between items-center px-6 py-4">
+				<div className="mt-2 flex justify-between items-center px-6 py-4">
 					<H2 className="mb-2">
 						<Skeleton className="w-48 h-8" />
 					</H2>