feat: tokens modal

frontend/src/app.tsx

@@ -19,6 +19,7 @@ import {
 	Toaster,
 	TooltipProvider,
 } from "@/components";
+import { NotFoundCard } from "./app/not-found-card";
 import { RouteLayout } from "./app/route-layout";
 import { RootLayout } from "./components/layout";
 import { clerk } from "./lib/auth";
@@ -60,27 +61,7 @@ export const router = createRouter({
 	},
 	defaultNotFoundComponent: () => (
 		<RouteLayout>
-			<div className="bg-card h-full border my-2 mr-2 rounded-lg">
-				<div className="mt-2 flex flex-col items-center justify-center h-full">
-					<div className="w-full sm:w-96">
-						<Card>
-							<CardHeader>
-								<CardTitle className="flex items-center">
-									404
-								</CardTitle>
-								<CardDescription>
-									The page was not found
-								</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<Button asChild variant="secondary">
-									<Link to="/">Go home</Link>
-								</Button>
-							</CardContent>
-						</Card>
-					</div>
-				</div>
-			</div>
+			<NotFoundCard />
 		</RouteLayout>
 	),
 });

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

@@ -381,5 +381,29 @@ export const createNamespaceContext = ({
 				},
 			});
 		},
+		publishableTokenQueryOptions() {
+			return queryOptions({
+				staleTime: 5 * 60 * 1000, // 5 minutes
+				gcTime: 5 * 60 * 1000, // 5 minutes
+				queryKey: [
+					{
+						namespace,
+						project: parent.project,
+						organization: parent.organization,
+					},
+					"tokens",
+					"publishable",
+				],
+				queryFn: async () => {
+					const f = parent.client.namespaces.createPublishableToken(
+						parent.project,
+						namespace,
+						{ org: parent.organization },
+					);
+					const t = await f;
+					return t.token;
+				},
+			});
+		},
 	};
 };

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

@@ -209,6 +209,7 @@ const defaultContext = {
 					: null,
 				sleepingAt: data.sleepingAt ? new Date(data.sleepingAt) : null,
 				region: data.region,
+				runner: data.runner,
 				crashPolicy: data.crashPolicy,
 			}),
 		});

frontend/src/app/dialogs/tokens-frame.tsx

@@ -0,0 +1,103 @@
+import { faQuestionCircle, faRailway, Icon } from "@rivet-gg/icons";
+import { useQuery } from "@tanstack/react-query";
+import { useRouteContext } from "@tanstack/react-router";
+import * as ConnectRailwayForm from "@/app/forms/connect-railway-form";
+import { HelpDropdown } from "@/app/help-dropdown";
+import {
+	Button,
+	type DialogContentProps,
+	DiscreteInput,
+	Frame,
+	Label,
+	Skeleton,
+} from "@/components";
+import {
+	useCloudDataProvider,
+	useEngineCompatDataProvider,
+} from "@/components/actors";
+import { defineStepper } from "@/components/ui/stepper";
+import { cloudEnv, engineEnv } from "@/lib/env";
+
+interface TokensFrameContentProps extends DialogContentProps {}
+
+export default function TokensFrameContent({
+	onClose,
+}: TokensFrameContentProps) {
+	return (
+		<>
+			<Frame.Header>
+				<Frame.Title className="gap-2 flex items-center">
+					<div>Namespace Tokens</div>
+					<HelpDropdown>
+						<Button variant="ghost" size="icon">
+							<Icon icon={faQuestionCircle} />
+						</Button>
+					</HelpDropdown>
+				</Frame.Title>
+				<Frame.Description>
+					These tokens are used to authenticate requests to the Rivet
+					Engine API. Keep them secret!
+				</Frame.Description>
+			</Frame.Header>
+			<Frame.Content>
+				<div className="items-center grid grid-cols-1 gap-6">
+					<SecretToken />
+					<PublishableToken />
+				</div>
+			</Frame.Content>
+			<Frame.Footer>
+				<Button variant="secondary" onClick={onClose}>
+					Close
+				</Button>
+			</Frame.Footer>
+		</>
+	);
+}
+
+function SecretToken() {
+	const dataProvider = useRouteContext({
+		from: "/_context/_cloud/orgs/$organization/projects/$project/ns/$namespace",
+		select: (c) => c.dataProvider,
+	});
+	const { data, isLoading } = useQuery(
+		dataProvider.engineAdminTokenQueryOptions(),
+	);
+	return (
+		<div className="space-y-2">
+			<Label>Secret Token</Label>
+			{isLoading ? (
+				<Skeleton className="w-56 h-10" />
+			) : (
+				<DiscreteInput value={data || ""} />
+			)}
+			<p className="text-sm text-muted-foreground">
+				Only use in secure server environments. Grants full access to
+				your namespace. Used to connect your Runners to your namespace.
+			</p>
+		</div>
+	);
+}
+
+function PublishableToken() {
+	const dataProvider = useRouteContext({
+		from: "/_context/_cloud/orgs/$organization/projects/$project/ns/$namespace",
+		select: (c) => c.dataProvider,
+	});
+	const { data, isLoading } = useQuery(
+		dataProvider.publishableTokenQueryOptions(),
+	);
+	return (
+		<div className="space-y-2">
+			<Label>Publishable Token</Label>
+			{isLoading ? (
+				<Skeleton className="w-56 h-10" />
+			) : (
+				<DiscreteInput value={data || ""} />
+			)}
+			<p className="text-sm text-muted-foreground">
+				Safe to use in public contexts like client-side code. Allows
+				your frontend to interact with Rivet services.
+			</p>
+		</div>
+	);
+}

frontend/src/app/not-found-card.tsx

@@ -0,0 +1,35 @@
+import { Link } from "@tanstack/react-router";
+import {
+	Button,
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components";
+
+export function NotFoundCard() {
+	return (
+		<div className="bg-card h-full border my-2 mr-2 rounded-lg">
+			<div className="mt-2 flex flex-col items-center justify-center h-full">
+				<div className="w-full sm:w-96">
+					<Card>
+						<CardHeader>
+							<CardTitle className="flex items-center">
+								404
+							</CardTitle>
+							<CardDescription>
+								The page was not found
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<Button asChild variant="secondary">
+								<Link to="/">Go home</Link>
+							</Button>
+						</CardContent>
+					</Card>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/app/use-dialog.tsx

@@ -18,4 +18,5 @@ export const useDialog = {
 	ProvideEngineCredentials: createDialogHook(
 		() => import("@/app/dialogs/provide-engine-credentials-frame"),
 	),
+	Tokens: createDialogHook(() => import("@/app/dialogs/tokens-frame")),
 };

frontend/src/app/user-dropdown.tsx

@@ -59,6 +59,16 @@ export function UserDropdown() {
 				>
 					Profile
 				</DropdownMenuItem>
+				<DropdownMenuItem
+					onSelect={() => {
+						navigate({
+							to: ".",
+							search: { ...params, modal: "tokens" },
+						});
+					}}
+				>
+					Tokens
+				</DropdownMenuItem>
 				{clerk.organization ? (
 					<DropdownMenuItem
 						onSelect={() => {

frontend/src/components/actors/actor-general.tsx

@@ -21,6 +21,7 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 			pendingAllocationAt,
 			sleepingAt,
 			crashPolicy,
+			runner,
 		} = {},
 	} = useQuery(useDataProvider().actorGeneralQueryOptions(actorId));
 
@@ -61,6 +62,8 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 							/>
 						</Flex>
 					</Dd>
+					<Dt>Runner</Dt>
+					<Dd>{runner}</Dd>
 					<Dt>Crash Policy</Dt>
 					<Dd>{crashPolicy}</Dd>
 					<Dt>Created</Dt>

frontend/src/routes/_context/_cloud.tsx

@@ -39,6 +39,7 @@ function CloudModals() {
 	const CreateNamespaceDialog = useDialog.CreateNamespace.Dialog;
 	const ConnectVercelDialog = useDialog.ConnectVercel.Dialog;
 	const ConnectRailwayDialog = useDialog.ConnectRailway.Dialog;
+	const TokensDialog = useDialog.Tokens.Dialog;
 
 	return (
 		<>
@@ -116,6 +117,23 @@ function CloudModals() {
 					},
 				}}
 			/>
+			<TokensDialog
+				dialogProps={{
+					open: search.modal === "tokens",
+					// FIXME
+					onOpenChange: (value: any) => {
+						if (!value) {
+							navigate({
+								to: ".",
+								search: (old) => ({
+									...old,
+									modal: undefined,
+								}),
+							});
+						}
+					},
+				}}
+			/>
 		</>
 	);
 }

frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { match } from "ts-pattern";
 import { createProjectContext } from "@/app/data-providers/cloud-data-provider";
+import { NotFoundCard } from "@/app/not-found-card";
 import { RouteError } from "@/app/route-error";
 import { useDialog } from "@/app/use-dialog";
 

frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { createNamespaceContext } from "@/app/data-providers/cloud-data-provider";
+import { NotFoundCard } from "@/app/not-found-card";
 import { RouteLayout } from "@/app/route-layout";
 
 export const Route = createFileRoute(
@@ -28,6 +29,7 @@ export const Route = createFileRoute(
 			},
 		};
 	},
+	notFoundComponent: () => <NotFoundCard />,
 });
 
 function RouteComponent() {

frontend/src/routes/_context/_engine/ns.$namespace.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { match } from "ts-pattern";
 import { createNamespaceContext } from "@/app/data-providers/engine-data-provider";
+import { NotFoundCard } from "@/app/not-found-card";
 import { RouteLayout } from "@/app/route-layout";
 
 export const Route = createFileRoute("/_context/_engine/ns/$namespace")({
@@ -20,6 +21,7 @@ export const Route = createFileRoute("/_context/_engine/ns/$namespace")({
 			});
 	},
 	component: RouteComponent,
+	notFoundComponent: () => <NotFoundCard />,
 });
 
 function RouteComponent() {