feat(inspector): make inspector compatible with new architecture

Author: jog1t

frontend/src/app/connect.tsx

@@ -72,7 +72,7 @@ export function Connect({
 					<ConnectionForm
 						ref={formRef}
 						defaultValues={{
-							username: search.u || "http://localhost:8080",
+							username: search.u || "http://localhost:6420",
 							token: search.t || "",
 						}}
 						onSubmit={onSubmit}

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

@@ -176,13 +176,8 @@ function transformActor(a: InspectorActor): Actor {
 
 export function createClient({ url, token }: { url: string; token: string }) {
 	const newUrl = new URL(url);
-	if (!newUrl.pathname.endsWith("registry/inspect")) {
-		if (!newUrl.pathname.endsWith("registry")) {
-			newUrl.pathname = `${ensureTrailingSlash(newUrl.pathname)}registry`;
-		}
-		if (!newUrl.pathname.endsWith("inspect")) {
-			newUrl.pathname = `${ensureTrailingSlash(newUrl.pathname)}inspect`;
-		}
+	if (!newUrl.pathname.endsWith("inspect")) {
+		newUrl.pathname = `${ensureTrailingSlash(newUrl.pathname)}inspect`;
 	}
 
 	return createManagerInspectorClient(newUrl.href, {

frontend/src/components/actors/guard-connectable-inspector.tsx

@@ -3,9 +3,9 @@ import { useMutation, useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { useMatch } from "@tanstack/react-router";
 import { type ReactNode, useMemo } from "react";
 import { useInspectorCredentials } from "@/app/credentials-context";
-import { createEngineActorContext } from "@/queries/actor-engine";
 import { createInspectorActorContext } from "@/queries/actor-inspector";
 import { DiscreteCopyButton } from "../copy-area";
+import { getConfig } from "../lib/config";
 import { Button } from "../ui/button";
 import { useFiltersValue } from "./actor-filters-context";
 import { ActorProvider } from "./actor-queries-context";
@@ -77,16 +77,7 @@ function ActorContextProvider(props: {
 	);
 }
 
-function ActorInspectorProvider({
-	actorId,
-	children,
-}: {
-	actorId: ActorId;
-	children: ReactNode;
-}) {
-	const { data } = useSuspenseQuery(
-		useDataProvider().actorQueryOptions(actorId),
-	);
+function ActorInspectorProvider({ children }: { children: ReactNode }) {
 	const { credentials } = useInspectorCredentials();
 
 	if (!credentials?.url || !credentials?.token) {
@@ -96,9 +87,8 @@ function ActorInspectorProvider({
 	const actorContext = useMemo(() => {
 		return createInspectorActorContext({
 			...credentials,
-			name: data.name || "",
 		});
-	}, [credentials, data.name]);
+	}, [credentials]);
 
 	return <ActorProvider value={actorContext}>{children}</ActorProvider>;
 }
@@ -135,7 +125,8 @@ function useActorEngineContext({ actorId }: { actorId: ActorId }) {
 	const { actor, runner } = useActorRunner({ actorId });
 
 	const actorContext = useMemo(() => {
-		return createEngineActorContext({
+		return createInspectorActorContext({
+			url: getConfig().apiUrl,
 			token: (runner?.metadata?.inspectorToken as string) || "",
 		});
 	}, [runner?.metadata?.inspectorToken]);

frontend/src/queries/actor-engine.ts

@@ -1,4 +1,3 @@
-import { createActorInspectorClient } from "@rivetkit/core/inspector";
 import {
 	type ActorContext,
 	createDefaultActorContext,
@@ -8,43 +7,28 @@ import { ensureTrailingSlash } from "@/lib/utils";
 export const createInspectorActorContext = ({
 	url,
 	token,
-	name,
 }: {
 	url: string;
 	token: string;
-	name: string;
 }) => {
 	const def = createDefaultActorContext();
 	const newUrl = new URL(url);
-	if (!newUrl.pathname.endsWith("registry/inspect")) {
-		if (!newUrl.pathname.endsWith("registry")) {
-			newUrl.pathname = `${ensureTrailingSlash(newUrl.pathname)}registry`;
-		}
-		if (!newUrl.pathname.endsWith("inspect")) {
-			newUrl.pathname = `${ensureTrailingSlash(newUrl.pathname)}inspect`;
-		}
+	if (!newUrl.pathname.endsWith("inspect")) {
+		newUrl.pathname = `${ensureTrailingSlash(newUrl.pathname)}inspect`;
 	}
-	newUrl.pathname = newUrl.pathname.replace(
-		"/registry/inspect",
-		"/registry/actors/inspect",
-	);
 	return {
 		...def,
 		createActorInspectorFetchConfiguration(actorId) {
 			return {
 				headers: {
-					"X-RivetKit-Query": JSON.stringify({
-						getForId: { actorId, name },
-					}),
-					Authorization: `Bearer ${token}`,
+					"x-rivet-actor": actorId,
+					"x-rivet-target": "actor",
+					...(token ? { authorization: `Bearer ${token}` } : {}),
 				},
 			};
 		},
-		createActorInspector(actorId) {
-			return createActorInspectorClient(
-				newUrl.href,
-				this.createActorInspectorFetchConfiguration(actorId),
-			);
+		createActorInspectorUrl() {
+			return new URL(`${url}/inspect`, window.location.origin).href;
 		},
 	} satisfies ActorContext;
 };

frontend/src/queries/actor-inspector.ts

@@ -1,10 +1,16 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+import {
+	createFileRoute,
+	Outlet,
+	useNavigate,
+	useParams,
+} from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { match } from "ts-pattern";
 import z from "zod";
 import { createGlobalContext as createGlobalCloudContext } from "@/app/data-providers/cloud-data-provider";
 import { createGlobalContext as createGlobalEngineContext } from "@/app/data-providers/engine-data-provider";
 import { createGlobalContext as createGlobalInspectorContext } from "@/app/data-providers/inspector-data-provider";
+import { useDialog } from "@/components/hooks/use-dialog";
 
 const searchSchema = z
 	.object({
@@ -49,5 +55,38 @@ export const Route = createFileRoute("/_context")({
 });
 
 function RouteComponent() {
-	return <Outlet />;
+	return (
+		<>
+			<Outlet />
+			<Modals />
+		</>
+	);
+}
+
+function Modals() {
+	const navigate = useNavigate();
+	const search = Route.useSearch();
+	const params = useParams({ strict: false });
+
+	const CreateActorDialog = useDialog.CreateActor.Dialog;
+
+	return (
+		<CreateActorDialog
+			namespace={params.namespace || ""}
+			dialogProps={{
+				open: search.modal === "create-actor",
+				onOpenChange: (value) => {
+					if (!value) {
+						navigate({
+							to: ".",
+							search: (old) => ({
+								...old,
+								modal: undefined,
+							}),
+						});
+					}
+				},
+			}}
+		/>
+	);
 }