[Graphite MQ] Draft PR GROUP:spec_7c321a (PRs 3259, 3229, 3260)

.github/workflows/fe-pull-request.yml

@@ -4,7 +4,8 @@ on:
   pull_request:
     paths:
       - frontend/**
-      - sdks/typescript/runner/**
+      - engine/sdks/typescript/**
+      - rivetkit-typescript/**
 
 jobs:
   quality:
@@ -15,4 +16,14 @@ jobs:
         with:
           version: latest
       - name: Run Biome
-        run: biome check . --reporter=github
+        run: biome check . --reporter=github
+  tsc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - run: pnpm install
+      - run: pnpm turbo build:engine
+      - name: Run TypeScript Compiler
+        run: pnpm ts-check
+        working-directory: ./frontend

frontend/package.json

@@ -86,8 +86,8 @@
 		"@types/lodash": "^4.17.20",
 		"@types/mdx": "^2.0.13",
 		"@types/node": "^20.19.13",
-		"@types/react": "^18.3.24",
-		"@types/react-dom": "^18.3.7",
+		"@types/react": "^19",
+		"@types/react-dom": "^19",
 		"@uiw/codemirror-extensions-basic-setup": "^4.25.1",
 		"@uiw/codemirror-theme-github": "^4.25.1",
 		"@uiw/react-codemirror": "^4.25.1",

frontend/src/app.tsx

@@ -2,26 +2,18 @@ import type { Clerk } from "@clerk/clerk-js";
 import * as Sentry from "@sentry/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { createRouter, Link, RouterProvider } from "@tanstack/react-router";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { Suspense } from "react";
 import {
-	Button,
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
 	ConfigProvider,
 	FullscreenLoading,
 	getConfig,
-	H2,
 	ThirdPartyProviders,
 	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";
 import { queryClient } from "./queries/global";
 import { routeTree } from "./routeTree.gen";

frontend/src/app/billing/plan-card.tsx

@@ -51,7 +51,7 @@ function PlanCard({
 				<p>Includes:</p>
 				<ul className="text-muted-foreground mt-2 space-y-1">
 					{features?.map((feature, index) => (
-						<li key={feature.label}>
+						<li key={index}>
 							<Icon icon={feature.icon} /> {feature.label}
 						</li>
 					))}

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

@@ -1,7 +1,7 @@
 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 { fetcher } from "@rivetkit/engine-api-full/core";
+import { infiniteQueryOptions, QueryKey, queryOptions, UseQueryOptions } from "@tanstack/react-query";
 import { cloudEnv } from "@/lib/env";
 import { queryClient } from "@/queries/global";
 import { RECORDS_PER_PAGE } from "./default-data-provider";
@@ -19,13 +19,17 @@ function createClient({ clerk }: { clerk: Clerk }) {
 		token: async () => {
 			return (await clerk.session?.getToken()) || "";
 		},
+		// @ts-expect-error
 		fetcher: async (args) => {
-			Object.keys(args.headers).forEach((key) => {
+			Object.keys(args.headers || {}).forEach((key) => {
 				if (key.toLowerCase().startsWith("x-fern-")) {
-					delete args.headers[key];
+					delete args.headers?.[key];
 				}
 			});
-			return await fetcher(args);
+			return await fetcher(
+				// @ts-expect-error
+				args
+			);
 		},
 	});
 }
@@ -207,7 +211,6 @@ export const createOrganizationContext = ({
 				mutationKey: ["projects"],
 				mutationFn: async (data: {
 					displayName: string;
-					nameId: string;
 				}) => {
 					const response = await client.projects.create({
 						displayName: data.displayName,
@@ -339,19 +342,20 @@ export const createNamespaceContext = ({
 } & ReturnType<typeof createProjectContext> &
 	ReturnType<typeof createOrganizationContext> &
 	ReturnType<typeof createGlobalContext>) => {
+	const token = async () => {
+		const response = await queryClient.fetchQuery(
+			parent.accessTokenQueryOptions({ namespace }),
+		);
+
+		return response.token;
+	};
 	return {
 		...createEngineNamespaceContext({
 			...parent,
 			namespace: engineNamespaceName,
-			namespaceId: engineNamespaceId,
+			engineToken: token,
 			client: createEngineClient(cloudEnv().VITE_APP_API_URL, {
-				token: async () => {
-					const response = await queryClient.fetchQuery(
-						parent.accessTokenQueryOptions({ namespace }),
-					);
-
-					return response.token;
-				},
+				token,
 			}),
 		}),
 		namespaceQueryOptions() {
@@ -360,7 +364,7 @@ export const createNamespaceContext = ({
 		currentNamespaceAccessTokenQueryOptions() {
 			return parent.accessTokenQueryOptions({ namespace });
 		},
-		engineAdminTokenQueryOptions() {
+		engineAdminTokenQueryOptions(): UseQueryOptions<string> {
 			return queryOptions({
 				staleTime: 5 * 60 * 1000, // 5 minutes
 				gcTime: 5 * 60 * 1000, // 5 minutes
@@ -372,7 +376,7 @@ export const createNamespaceContext = ({
 					},
 					"tokens",
 					"engine-admin",
-				],
+				] as QueryKey,
 				queryFn: async () => {
 					const f = parent.client.namespaces.createSecretToken(
 						parent.project,

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

@@ -1,7 +1,10 @@
 import {
 	infiniteQueryOptions,
+	mutationOptions,
 	type MutationOptions,
+	QueryKey,
 	queryOptions,
+	UseInfiniteQueryOptions,
 } from "@tanstack/react-query";
 import type {
 	ActorId,
@@ -73,7 +76,7 @@ const defaultContext = {
 	},
 	actorsQueryOptions(opts: ActorQueryOptions) {
 		return infiniteQueryOptions({
-			queryKey: ["actors", opts],
+			queryKey: ["actors", opts] as QueryKey,
 			initialPageParam: undefined as string | undefined,
 			enabled: false,
 			refetchInterval: 2000,
@@ -101,7 +104,7 @@ const defaultContext = {
 
 	buildsQueryOptions() {
 		return infiniteQueryOptions({
-			queryKey: ["actors", "builds"],
+			queryKey: ["actors", "builds"] as QueryKey,
 			enabled: false,
 			initialPageParam: undefined as string | undefined,
 			refetchInterval: 2000,
@@ -159,7 +162,7 @@ const defaultContext = {
 			queryFn: async () => {
 				return {} as Actor;
 			},
-			queryKey: ["actor", actorId],
+			queryKey: ["actor", actorId] as QueryKey,
 		});
 	},
 
@@ -217,7 +220,7 @@ const defaultContext = {
 	},
 	actorBuildQueryOptions(actorId: ActorId) {
 		return queryOptions({
-			queryKey: ["actor", actorId, "build"],
+			queryKey: ["actor", actorId, "build"] as QueryKey,
 			queryFn: async () => {
 				throw new Error("Not implemented");
 				return {} as Build;
@@ -227,7 +230,7 @@ const defaultContext = {
 	},
 	actorMetricsQueryOptions(actorId: ActorId) {
 		return queryOptions({
-			queryKey: ["actor", actorId, "metrics"],
+			queryKey: ["actor", actorId, "metrics"] as QueryKey,
 			queryFn: async () => {
 				throw new Error("Not implemented");
 				return {} as ActorMetrics;
@@ -249,7 +252,7 @@ const defaultContext = {
 	},
 	actorDestroyMutationOptions(actorId: ActorId) {
 		return {
-			mutationKey: ["actor", actorId, "destroy"],
+			mutationKey: ["actor", actorId, "destroy"] as QueryKey,
 			mutationFn: async () => {
 				return;
 			},
@@ -267,7 +270,7 @@ const defaultContext = {
 	},
 	actorLogsQueryOptions(actorId: ActorId) {
 		return infiniteQueryOptions({
-			queryKey: ["actor", actorId, "logs"],
+			queryKey: ["actor", actorId, "logs"] as QueryKey,
 			initialPageParam: null as string | null,
 			queryFn: async () => {
 				throw new Error("Not implemented");
@@ -308,6 +311,7 @@ const defaultContext = {
 				destroyedAt: data.destroyedAt
 					? new Date(data.destroyedAt)
 					: null,
+				runner: data.runner ?? undefined,
 				sleepingAt: data.sleepingAt ? new Date(data.sleepingAt) : null,
 				startedAt: data.startedAt ? new Date(data.startedAt) : null,
 			}),
@@ -316,7 +320,7 @@ const defaultContext = {
 	// #endregion
 	regionsQueryOptions() {
 		return infiniteQueryOptions({
-			queryKey: ["actor", "regions"],
+			queryKey: ["actor", "regions"] as QueryKey,
 			initialPageParam: null as string | null,
 			queryFn: async () => {
 				throw new Error("Not implemented");
@@ -328,7 +332,7 @@ const defaultContext = {
 	},
 	regionQueryOptions(regionId: string | undefined) {
 		return queryOptions({
-			queryKey: ["actor", "region", regionId],
+			queryKey: ["actor", "region", regionId] as QueryKey,
 			enabled: !!regionId,
 			queryFn: async () => {
 				throw new Error("Not implemented");
@@ -338,7 +342,7 @@ const defaultContext = {
 	},
 	statusQueryOptions() {
 		return queryOptions({
-			queryKey: ["status"],
+			queryKey: ["status"] as QueryKey,
 			refetchInterval: 1000,
 			enabled: false,
 			retry: 0,
@@ -349,8 +353,8 @@ const defaultContext = {
 		});
 	},
 	createActorMutationOptions() {
-		return {
-			mutationKey: ["createActor"],
+		return mutationOptions({
+			mutationKey: ["createActor"] as QueryKey,
 			mutationFn: async (_: CreateActor) => {
 				throw new Error("Not implemented");
 				return "";
@@ -365,7 +369,7 @@ const defaultContext = {
 					},
 				});
 			},
-		};
+		});
 	},
 };