feat(cloud): connect page

frontend/package.json

@@ -18,7 +18,9 @@
 	},
 	"dependencies": {
 		"@clerk/clerk-js": "^5.92.1",
-		"@clerk/clerk-react": "^5.46.2",
+		"@clerk/clerk-react": "^5.47.0",
+		"@clerk/elements": "^0.23.63",
+		"@clerk/shared": "3.25.0",
 		"@clerk/themes": "^2.4.18",
 		"@codemirror/autocomplete": "^6.18.7",
 		"@codemirror/commands": "^6.8.1",
@@ -56,7 +58,7 @@
 		"@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/icons": "file:vendor/rivet-icons.tgz",
+		"@rivet-gg/icons": "workspace:*",
 		"@rivetkit/actor": "file:vendor/rivetkit-actor.tgz",
 		"@rivetkit/core": "file:vendor/rivetkit-core.tgz",
 		"@rivetkit/engine-api-full": "workspace:*",

frontend/packages/icons/.gitignore

@@ -0,0 +1 @@
+src

frontend/packages/icons/scripts/postinstall.js

@@ -34,7 +34,7 @@ if (process.env.FONTAWESOME_PACKAGE_TOKEN) {
 				private: true,
 				sideEffects: false,
 				dependencies: {
-					"@awesome.me/kit-63db24046b": "^1.0.13",
+					"@awesome.me/kit-63db24046b": "^1.0.15",
 					"@fortawesome/pro-regular-svg-icons": "6.6.0",
 					"@fortawesome/pro-solid-svg-icons": "6.6.0",
 				},
@@ -73,7 +73,10 @@ for (const [pkg, { icons }] of Object.entries(manifest)) {
 
 	if (isCustom) {
 		if (hasFaToken) {
-			indexJsSource += `export * from "${pkg}";\n`;
+			const iconNames = icons.map(({ icon }) => icon);
+			const exp = iconNames
+				.join(", ");
+			indexJsSource += `export { ${exp} } from "${pkg}";\n`;
 		} else {
 			const iconNames = icons.map(({ icon }) => icon);
 			const exp = iconNames

frontend/src/app.tsx

@@ -35,12 +35,15 @@ export const router = createRouter({
 			__APP_TYPE__ === "cloud" ? clerk : (undefined as unknown as Clerk),
 		queryClient: queryClient,
 	},
-	defaultStaleTime: Infinity,
-	defaultPendingComponent: PageLayout.Root.Skeleton,
 	defaultPreloadStaleTime: 0,
 	defaultGcTime: 0,
 	defaultPreloadGcTime: 0,
+	defaultStaleTime: Infinity,
+	scrollRestoration: true,
+	defaultPendingMinMs: 300,
+	defaultPendingComponent: FullscreenLoading,
 	defaultOnCatch: (error) => {
+		console.error("Router caught an error:", error);
 		Sentry.captureException(error);
 	},
 });

frontend/src/app/actor-builds-list.tsx

@@ -22,7 +22,7 @@ export function ActorBuildsList() {
 		<div className="h-full">
 			<div className="flex flex-col gap-[1px]">
 				{data?.length === 0 ? (
-					<p className="text-xs text-muted-foreground ms-2">
+					<p className="text-xs text-muted-foreground ms-1">
 						No instances found.
 					</p>
 				) : null}

frontend/src/app/build-prefiller.tsx

@@ -0,0 +1,19 @@
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import { Navigate } from "@tanstack/react-router";
+import { useDataProvider } from "@/components/actors";
+
+export function BuildPrefiller() {
+	const { data } = useSuspenseInfiniteQuery(
+		useDataProvider().buildsQueryOptions(),
+	);
+
+	if (data[0]) {
+		return (
+			<Navigate
+				to="."
+				search={(search) => ({ ...search, n: [data[0].name] })}
+			/>
+		);
+	}
+	return null;
+}

frontend/src/app/context-switcher.tsx

@@ -11,6 +11,7 @@ import {
 	CommandInput,
 	CommandItem,
 	CommandList,
+	cn,
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
@@ -59,7 +60,7 @@ function Breadcrumbs() {
 				<div className="text-left text-xs text-muted-foreground min-w-0 flex w-full">
 					<ProjectBreadcrumb
 						project={matchNamespace.project}
-						className="truncate min-w-0 max-w-full block"
+						className="truncate min-w-0 max-w-full block h-4"
 					/>
 				</div>
 				<div className="min-w-0 w-full">
@@ -97,7 +98,7 @@ function ProjectBreadcrumb({
 		useCloudDataProvider().currentOrgProjectQueryOptions({ project }),
 	);
 	if (isLoading) {
-		return <Skeleton className="h-5 w-32" />;
+		return <Skeleton className={cn("h-5 w-32", className)} />;
 	}
 
 	return <span className={className}>{data?.name}</span>;

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

@@ -21,8 +21,9 @@ function createClient({ clerk }: { clerk: Clerk }) {
 }
 
 export const createGlobalContext = ({ clerk }: { clerk: Clerk }) => {
+	const client = createClient({ clerk });
 	return {
-		client: createClient({ clerk }),
+		client,
 		organizationQueryOptions(opts: { org: string }) {
 			return queryOptions({
 				queryKey: ["organization", opts.org],
@@ -31,6 +32,23 @@ export const createGlobalContext = ({ clerk }: { clerk: Clerk }) => {
 				},
 			});
 		},
+		billingCustomerPortalSessionQueryOptions() {
+			return queryOptions({
+				staleTime: 5 * 60 * 1000, // 5 minutes
+				gcTime: 5 * 60 * 1000, // 5 minutes
+				queryKey: ["billing-customer-portal-session"],
+				queryFn: async () => {
+					const session =
+						await client.billing.createCustomerPortalSession();
+					if (!session.url) {
+						throw new Error(
+							"No URL returned for customer portal session",
+						);
+					}
+					return session.url;
+				},
+			});
+		},
 	};
 };
 
@@ -116,11 +134,32 @@ export const createOrganizationContext = ({
 					},
 					{ abortSignal },
 				);
-				return data;
+				return data.project;
 			},
 			enabled: !!opts.project,
 		});
 
+	const namespaceQueryOptions = (opts: {
+		namespace: string;
+		organization: string;
+		project: string;
+	}) => {
+		return queryOptions({
+			queryKey: [opts, "namespace"],
+			queryFn: async ({ signal: abortSignal }) => {
+				const data = await client.namespaces.get(
+					opts.project,
+					opts.namespace,
+					{
+						org: opts.organization,
+					},
+					{ abortSignal },
+				);
+				return data.namespace;
+			},
+		});
+	};
+
 	return {
 		orgProjectNamespacesQueryOptions,
 		currentOrgProjectNamespacesQueryOptions: (opts: {
@@ -142,20 +181,10 @@ export const createOrganizationContext = ({
 			project: string;
 			namespace: string;
 		}) {
-			return queryOptions({
-				queryKey: [opts, "namespace"],
-				queryFn: async ({ signal: abortSignal }) => {
-					const data = await client.namespaces.get(
-						opts.project,
-						opts.namespace,
-						{
-							org: organization,
-						},
-						{ abortSignal },
-					);
-					return data;
-				},
-				enabled: !!opts.namespace,
+			return namespaceQueryOptions({
+				organization,
+				project: opts.project,
+				namespace: opts.namespace,
 			});
 		},
 		currentOrgCreateProjectMutationOptions({
@@ -172,7 +201,7 @@ export const createOrganizationContext = ({
 					const response = await client.projects.create({
 						displayName: data.displayName,
 						name: data.nameId,
-						organizationId: organization,
+						org: organization,
 					});
 
 					return response;
@@ -207,7 +236,7 @@ export const createProjectContext = ({
 						displayName: data.displayName,
 						org: organization,
 					});
-					return response;
+					return response.namespace;
 				},
 			};
 		},
@@ -223,20 +252,36 @@ export const createProjectContext = ({
 				project,
 			});
 		},
+		currentProjectNamespaceQueryOptions(opts: { namespace: string }) {
+			return parent.currentOrgProjectNamespaceQueryOptions({
+				project,
+				namespace: opts.namespace,
+			});
+		},
 	};
 };
 
 export const createNamespaceContext = ({
 	namespace,
+	engineNamespaceName,
+	engineNamespaceId,
 	...parent
-}: { namespace: string } & ReturnType<typeof createProjectContext> &
+}: {
+	namespace: string;
+	engineNamespaceName: string;
+	engineNamespaceId: string;
+} & ReturnType<typeof createProjectContext> &
 	ReturnType<typeof createOrganizationContext> &
 	ReturnType<typeof createGlobalContext>) => {
 	return {
 		...createEngineNamespaceContext({
-			namespace,
 			...parent,
+			namespace: engineNamespaceName,
+			namespaceId: engineNamespaceId,
 			client: createEngineClient(),
 		}),
+		namespaceQueryOptions() {
+			return parent.currentProjectNamespaceQueryOptions({ namespace });
+		},
 	};
 };

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

@@ -77,6 +77,7 @@ const defaultContext = {
 			enabled: false,
 			refetchInterval: 2000,
 			queryFn: async () => {
+				throw new Error("Not implemented");
 				return {} as PaginatedActorResponse;
 			},
 			getNextPageParam: (lastPage) => {
@@ -104,6 +105,7 @@ const defaultContext = {
 			initialPageParam: undefined as string | undefined,
 			refetchInterval: 2000,
 			queryFn: async () => {
+				throw new Error("Not implemented");
 				return {} as PaginatedBuildsResponse;
 			},
 			getNextPageParam: () => {
@@ -215,6 +217,7 @@ const defaultContext = {
 		return queryOptions({
 			queryKey: ["actor", actorId, "build"],
 			queryFn: async () => {
+				throw new Error("Not implemented");
 				return {} as Build;
 			},
 			enabled: false,
@@ -224,6 +227,7 @@ const defaultContext = {
 		return queryOptions({
 			queryKey: ["actor", actorId, "metrics"],
 			queryFn: async () => {
+				throw new Error("Not implemented");
 				return {} as ActorMetrics;
 			},
 			enabled: false,
@@ -258,6 +262,7 @@ const defaultContext = {
 			queryKey: ["actor", actorId, "logs"],
 			initialPageParam: null as string | null,
 			queryFn: async () => {
+				throw new Error("Not implemented");
 				return [] as ActorLogEntry[];
 			},
 			getNextPageParam: () => null,
@@ -306,6 +311,7 @@ const defaultContext = {
 			queryKey: ["actor", "regions"],
 			initialPageParam: null as string | null,
 			queryFn: async () => {
+				throw new Error("Not implemented");
 				return {} as PaginatedRegionsResponse;
 			},
 			getNextPageParam: () => null,
@@ -317,6 +323,7 @@ const defaultContext = {
 			queryKey: ["actor", "region", regionId],
 			enabled: !!regionId,
 			queryFn: async () => {
+				throw new Error("Not implemented");
 				return {} as Region;
 			},
 		});
@@ -328,6 +335,7 @@ const defaultContext = {
 			enabled: false,
 			retry: 0,
 			queryFn: async () => {
+				throw new Error("Not implemented");
 				return false as boolean;
 			},
 		});
@@ -336,6 +344,7 @@ const defaultContext = {
 		return {
 			mutationKey: ["createActor"],
 			mutationFn: async (_: CreateActor) => {
+				throw new Error("Not implemented");
 				return "";
 			},
 			onSuccess: () => {