refactor(cloud): polish (#3009)

Author: jog1t

frontend/package.json

@@ -9,7 +9,7 @@
 		"dev:engine": "vite --config vite.engine.config.ts",
 		"dev:cloud": "vite --config vite.cloud.config.ts",
 		"ts-check": "tsc --noEmit",
-		"build": "echo 'Please use build:engine or build:inspector' && exit 1",
+		"build": "echo 'Please use build:engine or build:inspector or build:cloud' && exit 1",
 		"build:inspector": "vite build --mode=production --config vite.inspector.config.ts",
 		"build:engine": "vite build --mode=production --config vite.engine.config.ts",
 		"build:cloud": "vite build --mode=production --config vite.cloud.config.ts",
@@ -21,7 +21,7 @@
 		"@clerk/clerk-js": "^5.92.1",
 		"@clerk/clerk-react": "^5.47.0",
 		"@clerk/elements": "^0.23.63",
-		"@clerk/shared": "3.25.0",
+		"@clerk/shared": "*",
 		"@clerk/themes": "^2.4.18",
 		"@codemirror/autocomplete": "^6.18.7",
 		"@codemirror/commands": "^6.8.1",

frontend/src/app.tsx

@@ -79,7 +79,7 @@ function CloudApp() {
 					colorModalBackdrop: "rgb(0 0 0 / 0.8)",
 				},
 			}}
-			publishableKey={cloudEnv().VITE_CLERK_PUBLISHABLE_KEY}
+			publishableKey={cloudEnv().VITE_APP_CLERK_PUBLISHABLE_KEY}
 		>
 			<RouterProvider router={router} />
 		</ClerkProvider>

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

@@ -1,8 +1,4 @@
-import {
-	// @ts-expect-error
-	faActorsBorderless,
-	Icon,
-} from "@rivet-gg/icons";
+import { faActorsBorderless, Icon } from "@rivet-gg/icons";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { Fragment } from "react";
@@ -22,8 +18,8 @@ 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-1">
-						No instances found.
+					<p className="text-xs text-muted-foreground ms-1 px-1">
+						Connect RivetKit to see instances.
 					</p>
 				) : null}
 				{data?.map((build) => (
@@ -84,3 +80,19 @@ export function ActorBuildsList() {
 		</div>
 	);
 }
+
+export function ActorBuildsListSkeleton() {
+	return (
+		<div className="h-full">
+			<div className="flex flex-col gap-[1px]">
+				{Array(RECORDS_PER_PAGE)
+					.fill(null)
+					.map((_, i) => (
+						<Fragment key={i}>
+							<Skeleton className="w-full h-6 my-1" />
+						</Fragment>
+					))}
+			</div>
+		</div>
+	);
+}

frontend/src/app/context-switcher.tsx

@@ -24,6 +24,12 @@ import { VisibilitySensor } from "@/components/visibility-sensor";
 export function ContextSwitcher() {
 	const [isOpen, setIsOpen] = useState(false);
 
+	const match = useContextSwitchMatch();
+
+	if (!match) {
+		return null;
+	}
+
 	return (
 		<>
 			<Popover open={isOpen} onOpenChange={setIsOpen}>
@@ -47,45 +53,69 @@ export function ContextSwitcher() {
 	);
 }
 
-function Breadcrumbs() {
+const useContextSwitchMatch = ():
+	| {
+			project: string;
+			namespace: string;
+			organization: string;
+	  }
+	| { organization: string; project: string }
+	| false => {
 	const match = useMatchRoute();
 
 	const matchNamespace = match({
 		to: "/orgs/$organization/projects/$project/ns/$namespace",
 		fuzzy: true,
 	});
+
 	if (matchNamespace) {
+		return matchNamespace;
+	}
+
+	const matchProject = match({
+		to: "/orgs/$organization/projects/$project",
+		fuzzy: true,
+	});
+
+	if (matchProject) {
+		return matchProject;
+	}
+
+	return false;
+};
+
+function Breadcrumbs() {
+	const match = useContextSwitchMatch();
+
+	if (match && "project" in match && "namespace" in match) {
 		return (
 			<div className="flex flex-col items-center min-w-0 w-full">
 				<div className="text-left text-xs text-muted-foreground min-w-0 flex w-full">
 					<ProjectBreadcrumb
-						project={matchNamespace.project}
+						project={match.project}
 						className="truncate min-w-0 max-w-full block h-4"
 					/>
 				</div>
 				<div className="min-w-0 w-full">
 					<NamespaceBreadcrumb
 						className="text-left truncate block"
-						namespace={matchNamespace.namespace}
-						project={matchNamespace.project}
+						namespace={match.namespace}
+						project={match.project}
 					/>
 				</div>
 			</div>
 		);
 	}
 
-	const matchProject = match({
-		to: "/orgs/$organization/projects/$project",
-		fuzzy: true,
-	});
-
-	if (matchProject) {
+	if (match && "project" in match) {
 		return (
 			<>
-				<ProjectBreadcrumb project={matchProject.project} />
+				<ProjectBreadcrumb project={match.project} />
 			</>
 		);
 	}
+
+	return null;
 }
 
 function ProjectBreadcrumb({
@@ -102,7 +132,7 @@ function ProjectBreadcrumb({
 		return <Skeleton className={cn("h-5 w-32", className)} />;
 	}
 
-	return <span className={className}>{data?.name}</span>;
+	return <span className={className}>{data?.displayName}</span>;
 }
 
 function NamespaceBreadcrumb({
@@ -124,7 +154,7 @@ function NamespaceBreadcrumb({
 		return <Skeleton className="h-5 w-32" />;
 	}
 
-	return <span className={className}>{data?.name}</span>;
+	return <span className={className}>{data?.displayName}</span>;
 }
 
 function Content({ onClose }: { onClose?: () => void }) {

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

@@ -1,5 +1,6 @@
 import type { Clerk } from "@clerk/clerk-js";
 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 { RECORDS_PER_PAGE } from "./default-data-provider";
@@ -17,6 +18,14 @@ function createClient({ clerk }: { clerk: Clerk }) {
 		token: async () => {
 			return (await clerk.session?.getToken()) || "";
 		},
+		fetcher: async (args) => {
+			if (args.headers) {
+				delete args.headers["X-Fern-Language"];
+				delete args.headers["X-Fern-Runtime"];
+				delete args.headers["X-Fern-Runtime-Version"];
+			}
+			return await fetcher(args);
+		},
 	});
 }
 

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

@@ -8,13 +8,13 @@ import {
 } from "@/components/actors";
 import { engineEnv } from "@/lib/env";
 import { convertStringToId } from "@/lib/utils";
+import { noThrow, shouldRetryAllExpect403 } from "@/queries/utils";
 import {
 	ActorQueryOptionsSchema,
 	createDefaultGlobalContext,
 	type DefaultDataProvider,
 	RECORDS_PER_PAGE,
 } from "./default-data-provider";
-import { noThrow, shouldRetryAllExpect403 } from "./utils";
 
 export type CreateNamespace = {
 	displayName: string;