feat: cloud acl

frontend/package.json

@@ -58,14 +58,14 @@
 		"@radix-ui/react-toggle-group": "^1.1.11",
 		"@radix-ui/react-tooltip": "^1.2.8",
 		"@radix-ui/react-visually-hidden": "^1.2.3",
-		"@rivet-gg/cloud": "file:vendor/rivet-cloud.tgz",
+		"@rivet-gg/cloud": "https://pkg.pr.new/rivet-dev/cloud/@rivet-gg/cloud@7090780",
 		"@rivet-gg/icons": "workspace:*",
-		"rivetkit": "*",
 		"@rivetkit/engine-api-full": "workspace:*",
 		"@sentry/react": "^8.55.0",
 		"@sentry/vite-plugin": "^2.23.1",
 		"@shikijs/langs": "^3.12.2",
 		"@shikijs/transformers": "^3.12.2",
+		"@stepperize/react": "^5.1.8",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/typography": "^0.5.16",
 		"@tanstack/query-core": "^5.87.1",
@@ -118,6 +118,7 @@
 		"react-inspector": "^6.0.2",
 		"react-resizable-panels": "^2.1.9",
 		"recharts": "^2.15.4",
+		"rivetkit": "*",
 		"shiki": "^3.12.2",
 		"sonner": "^1.7.4",
 		"tailwind-merge": "^2.6.0",

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

@@ -3,6 +3,7 @@ import { type Rivet, RivetClient } from "@rivet-gg/cloud";
 import { type FetchFunction, fetcher } from "@rivetkit/engine-api-full/core";
 import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
 import { cloudEnv } from "@/lib/env";
+import { queryClient } from "@/queries/global";
 import { RECORDS_PER_PAGE } from "./default-data-provider";
 import {
 	type CreateNamespace,
@@ -170,6 +171,7 @@ export const createOrganizationContext = ({
 	};
 
 	return {
+		organization,
 		orgProjectNamespacesQueryOptions,
 		currentOrgProjectNamespacesQueryOptions: (opts: {
 			project: string;
@@ -209,8 +211,7 @@ export const createOrganizationContext = ({
 				}) => {
 					const response = await client.projects.create({
 						displayName: data.displayName,
-						name: data.nameId,
-						organizationId: organization,
+						org: organization,
 					});
 
 					return response;
@@ -233,6 +234,7 @@ export const createProjectContext = ({
 } & ReturnType<typeof createOrganizationContext> &
 	ReturnType<typeof createGlobalContext>) => {
 	return {
+		project,
 		createNamespaceMutationOptions(opts: {
 			onSuccess?: (data: Namespace) => void;
 		}) {
@@ -241,7 +243,6 @@ export const createProjectContext = ({
 				mutationKey: ["namespaces"],
 				mutationFn: async (data: CreateNamespace) => {
 					const response = await client.namespaces.create(project, {
-						name: data.name,
 						displayName: data.displayName,
 						org: organization,
 					});
@@ -304,20 +305,37 @@ export const createProjectContext = ({
 				},
 			};
 		},
+		accessTokenQueryOptions({ namespace }: { namespace: string }) {
+			return queryOptions({
+				staleTime: 15 * 60 * 1000, // 15 minutes
+				gcTime: 15 * 60 * 1000, // 15 minutes
+				queryKey: [
+					{ organization, project, namespace },
+					"access-token",
+				],
+				queryFn: async ({ signal: abortSignal }) => {
+					const response = await client.namespaces.createAccessToken(
+						project,
+						namespace,
+						{ org: organization },
+						{ abortSignal },
+					);
+					return response;
+				},
+			});
+		},
 	};
 };
 
 export const createNamespaceContext = ({
 	namespace,
 	engineNamespaceName,
 	engineNamespaceId,
-	engineToken,
 	...parent
 }: {
 	namespace: string;
 	engineNamespaceName: string;
 	engineNamespaceId: string;
-	engineToken?: (() => string) | string;
 } & ReturnType<typeof createProjectContext> &
 	ReturnType<typeof createOrganizationContext> &
 	ReturnType<typeof createGlobalContext>) => {
@@ -327,11 +345,41 @@ export const createNamespaceContext = ({
 			namespace: engineNamespaceName,
 			namespaceId: engineNamespaceId,
 			client: createEngineClient(cloudEnv().VITE_APP_CLOUD_ENGINE_URL, {
-				token: engineToken,
+				token: async () => {
+					const response = await queryClient.fetchQuery(
+						parent.accessTokenQueryOptions({ namespace }),
+					);
+
+					return response.token;
+				},
 			}),
 		}),
 		namespaceQueryOptions() {
 			return parent.currentProjectNamespaceQueryOptions({ namespace });
 		},
+		connectRunnerTokenQueryOptions() {
+			return queryOptions({
+				staleTime: 5 * 60 * 1000, // 5 minutes
+				gcTime: 5 * 60 * 1000, // 5 minutes
+				queryKey: [
+					{
+						namespace,
+						project: parent.project,
+						organization: parent.organization,
+					},
+					"runners",
+					"connect",
+				],
+				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/engine-data-provider.tsx

@@ -1,5 +1,6 @@
 import { type Rivet, RivetClient } from "@rivetkit/engine-api-full";
 import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
+import { getConfig, ls } from "@/components";
 import {
 	type Actor,
 	ActorFeature,
@@ -15,11 +16,11 @@ import {
 	type DefaultDataProvider,
 	RECORDS_PER_PAGE,
 } from "./default-data-provider";
-import { getConfig } from "@/components/lib/config";
+
+const mightRequireAuth = __APP_TYPE__ === "engine";
 
 export type CreateNamespace = {
 	displayName: string;
-	name?: string;
 };
 
 export type Namespace = {
@@ -30,8 +31,8 @@ export type Namespace = {
 };
 
 export function createClient(
-	baseUrl = getConfig().apiUrl,
-	opts: { token: (() => string) | string },
+	baseUrl = engineEnv().VITE_APP_API_URL,
+	opts: { token: (() => string) | string | (() => Promise<string>) },
 ) {
 	return new RivetClient({
 		baseUrl: () => baseUrl,
@@ -43,7 +44,7 @@ export function createClient(
 export const createGlobalContext = (opts: {
 	engineToken: (() => string) | string;
 }) => {
-	const client = createClient(getConfig().apiUrl, {
+	const client = createClient(engineEnv().VITE_APP_API_URL, {
 		token: opts.engineToken,
 	});
 	return {
@@ -88,7 +89,7 @@ export const createGlobalContext = (opts: {
 				mutationFn: async (data: CreateNamespace) => {
 					const response = await client.namespaces.create({
 						displayName: data.displayName,
-						name: data.name || convertStringToId(data.displayName),
+						name: convertStringToId(data.displayName),
 					});
 
 					return {
@@ -133,7 +134,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -158,7 +159,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -187,7 +188,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -214,7 +215,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -289,7 +290,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -330,7 +331,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -354,7 +355,7 @@ export const createNamespaceContext = ({
 				throwOnError: noThrow,
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			};
 		},
@@ -364,7 +365,7 @@ export const createNamespaceContext = ({
 				throwOnError: noThrow,
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 				mutationFn: async () => {
 					await client.actorsDelete(actorId);
@@ -375,14 +376,14 @@ export const createNamespaceContext = ({
 
 	return {
 		...dataProvider,
-		runnersQueryOptions(opts: { namespace: string }) {
+		runnersQueryOptions() {
 			return infiniteQueryOptions({
-				queryKey: [opts.namespace, "runners"],
+				queryKey: [{ namespace }, "runners"],
 				initialPageParam: undefined as string | undefined,
 				queryFn: async ({ pageParam, signal: abortSignal }) => {
 					const data = await client.runners.list(
 						{
-							namespace: opts.namespace,
+							namespace,
 							cursor: pageParam ?? undefined,
 							limit: RECORDS_PER_PAGE,
 						},
@@ -399,7 +400,7 @@ export const createNamespaceContext = ({
 				select: (data) => data.pages.flatMap((page) => page.runners),
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -430,7 +431,7 @@ export const createNamespaceContext = ({
 				retry: shouldRetryAllExpect403,
 				throwOnError: noThrow,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -457,7 +458,7 @@ export const createNamespaceContext = ({
 				throwOnError: noThrow,
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -482,7 +483,7 @@ export const createNamespaceContext = ({
 				},
 				retry: shouldRetryAllExpect403,
 				meta: {
-					mightRequireAuth: true,
+					mightRequireAuth,
 				},
 			});
 		},
@@ -507,6 +508,10 @@ export const createNamespaceContext = ({
 					});
 					return response;
 				},
+				retry: shouldRetryAllExpect403,
+				meta: {
+					mightRequireAuth,
+				},
 			};
 		},
 		runnerConfigsQueryOptions() {
@@ -539,6 +544,25 @@ export const createNamespaceContext = ({
 					}
 					return lastPage.pagination.cursor;
 				},
+
+				retryDelay: 50_000,
+				retry: shouldRetryAllExpect403,
+				meta: {
+					mightRequireAuth,
+				},
+			});
+		},
+		connectRunnerTokenQueryOptions() {
+			return queryOptions({
+				staleTime: 1000,
+				gcTime: 1000,
+				queryKey: [{ namespace }, "runners", "connect"],
+				queryFn: async () => {
+					return ls.engineCredentials.get(getConfig().apiUrl) || "";
+				},
+				meta: {
+					mightRequireAuth,
+				},
 			});
 		},
 	};