chore(fe): fmt

biome.json

@@ -1,18 +1,21 @@
 {
 	"$schema": "https://biomejs.dev/schemas/2.1.1/schema.json",
 	"files": {
 		"includes": [
 			"**/*.js",
 			"**/*.json",
 			"**/*.ts",
+			"**/*.tsx",
 			"!engine/artifacts",
 			"!engine/sdks",
 			"!engine/sdks/typescript/api-full",
 			"!engine/sdks/typescript/runner-protocol",
-			"!frontend",
+			"!frontend/packages",
+			"!examples",
 			"!rivetkit-openapi/openapi.json",
 			"!scripts",
-			"!website"
+			"!website",
+			"!**/*.gen.*"
 		],
 		"ignoreUnknown": true
 	},

frontend/packages/components/src/actors/actor-config-tab.tsx

@@ -1,5 +1,5 @@
 import { Button, DocsSheet, ScrollArea } from "@rivet-gg/components";
-import { Icon, faBooks } from "@rivet-gg/icons";
+import { faBooks, Icon } from "@rivet-gg/icons";
 import type { ActorAtom } from "./actor-context";
 import { ActorGeneral } from "./actor-general";
 import { ActorNetwork } from "./actor-network";

frontend/packages/components/src/actors/actor-details-settings-button.tsx

@@ -6,7 +6,7 @@ import {
 	DropdownMenuTrigger,
 	WithTooltip,
 } from "@rivet-gg/components";
-import { Icon, faCog } from "@rivet-gg/icons";
+import { faCog, Icon } from "@rivet-gg/icons";
 import { useActorDetailsSettings } from "./actor-details-settings";
 
 export function ActorDetailsSettingsButton() {

frontend/packages/components/src/actors/actor-details-settings.tsx

@@ -1,8 +1,8 @@
 import {
+	createContext,
 	type Dispatch,
 	type ReactNode,
 	type SetStateAction,
-	createContext,
 	useContext,
 } from "react";
 import { useLocalStorage } from "usehooks-ts";

frontend/packages/components/src/actors/actor-download-logs-button.tsx

@@ -1,5 +1,5 @@
 import { Button, WithTooltip } from "@rivet-gg/components";
-import { Icon, faSave } from "@rivet-gg/icons";
+import { faSave, Icon } from "@rivet-gg/icons";
 import { useAtomValue } from "jotai";
 import type { ActorAtom } from "./actor-context";
 import type { LogsTypeFilter } from "./actor-logs";

frontend/packages/components/src/actors/actor-editable-state.tsx

@@ -4,7 +4,7 @@ import {
 	EditorView,
 	JsonCode,
 } from "@rivet-gg/components/code-mirror";
-import { Icon, faRotateLeft, faSave } from "@rivet-gg/icons";
+import { faRotateLeft, faSave, Icon } from "@rivet-gg/icons";
 import { AnimatePresence, motion } from "framer-motion";
 import { useMemo, useRef, useState } from "react";
 import { ActorStateChangeIndicator } from "./actor-state-change-indicator";

frontend/packages/components/src/actors/actor-general.tsx

@@ -1,4 +1,4 @@
-import { Dd, DiscreteCopyButton, Dl, Dt, Flex, cn } from "@rivet-gg/components";
+import { cn, Dd, DiscreteCopyButton, Dl, Dt, Flex } from "@rivet-gg/components";
 import { formatISO } from "date-fns";
 import equal from "fast-deep-equal";
 import { useAtomValue } from "jotai";

frontend/packages/components/src/actors/actor-logs.tsx

@@ -193,7 +193,11 @@ export function filterLogs({
 	typeFilter,
 	filter,
 	logs,
-}: { typeFilter: LogsTypeFilter; filter: string; logs: Logs }) {
+}: {
+	typeFilter: LogsTypeFilter;
+	filter: string;
+	logs: Logs;
+}) {
 	const output = logs?.filter((log) => {
 		if (typeFilter === "errors") {
 			return log.level === "error";

frontend/packages/components/src/actors/actor-metrics-tab.tsx

@@ -1,7 +1,7 @@
 import { Button, ScrollArea } from "@rivet-gg/components";
-import { Icon, faBooks } from "@rivet-gg/icons";
-import { ActorMetrics } from "./actor-metrics";
+import { faBooks, Icon } from "@rivet-gg/icons";
 import type { ActorAtom } from "./actor-context";
+import { ActorMetrics } from "./actor-metrics";
 
 interface ActorMetricsTabProps {
 	actor: ActorAtom;
@@ -22,4 +22,4 @@ export function ActorMetricsTab(props: ActorMetricsTabProps) {
 			<ActorMetrics {...props} />
 		</ScrollArea>
 	);
-}
+}

frontend/packages/components/src/actors/actor-metrics.tsx

@@ -1,17 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+import equal from "fast-deep-equal";
 import { useAtomValue, useSetAtom } from "jotai";
 import { selectAtom } from "jotai/utils";
-import equal from "fast-deep-equal";
-import { useState, useMemo } from "react";
+import { useMemo, useState } from "react";
+import { actorMetricsQueryOptions } from "@/domains/project/queries/actors/query-options";
+import { Button } from "../ui/button";
+import { Flex } from "../ui/flex";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../ui/select";
+import { Dd, Dl, Dt } from "../ui/typography";
 import type { Actor, ActorAtom } from "./actor-context";
+import {
+	actorEnvironmentAtom,
+	actorMetricsTimeWindowAtom,
+} from "./actor-context";
 import { ActorCpuStats } from "./actor-cpu-stats";
 import { ActorMemoryStats } from "./actor-memory-stats";
-import { Dd, Dl, Dt } from "../ui/typography";
-import { Button } from "../ui/button";
-import { Flex } from "../ui/flex";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
-import { actorMetricsTimeWindowAtom, actorEnvironmentAtom } from "./actor-context";
-import { useQuery } from "@tanstack/react-query";
-import { actorMetricsQueryOptions } from "@/domains/project/queries/actors/query-options";
 
 const selector = (a: Actor) => ({
 	metrics: a.metrics,
@@ -42,16 +51,19 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 	);
 	const defaultMetricsData = useAtomValue(metrics);
 	const [showAdvanced, setShowAdvanced] = useState(false);
-	
+
 	const timeWindowMs = useAtomValue(actorMetricsTimeWindowAtom);
 	const setTimeWindowMs = useSetAtom(actorMetricsTimeWindowAtom);
 	const environment = useAtomValue(actorEnvironmentAtom);
-
-	const currentTimeWindow = timeWindowOptions.find(option => option.milliseconds === timeWindowMs) || timeWindowOptions[1];
+
+	const currentTimeWindow =
+		timeWindowOptions.find(
+			(option) => option.milliseconds === timeWindowMs,
+		) || timeWindowOptions[1];
 	const [timeWindow, setTimeWindow] = useState(currentTimeWindow.value);
 
 	const isActorRunning = status === "running";
-	
+
 	// Create a query for time window-specific metrics
 	const { data: customMetricsData, status: customMetricsStatus } = useQuery({
 		...actorMetricsQueryOptions(
@@ -61,23 +73,27 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 				actorId: id,
 				timeWindowMs: timeWindowMs,
 			},
-			{ refetchInterval: 5000 }
+			{ refetchInterval: 5000 },
 		),
 		enabled: !!environment && !!id,
 	});
-	
+
 	// Use custom metrics if available, otherwise fall back to default
-	const metricsData = customMetricsData ? {
-		metrics: customMetricsData.metrics,
-		rawData: customMetricsData.rawData,
-		interval: customMetricsData.interval,
-		status: customMetricsStatus,
-		updatedAt: Date.now(),
-	} : defaultMetricsData;
+	const metricsData = customMetricsData
+		? {
+				metrics: customMetricsData.metrics,
+				rawData: customMetricsData.rawData,
+				interval: customMetricsData.interval,
+				status: customMetricsStatus,
+				updatedAt: Date.now(),
+			}
+		: defaultMetricsData;
 
 	const handleTimeWindowChange = (value: string) => {
 		setTimeWindow(value);
-		const selectedOption = timeWindowOptions.find(option => option.value === value);
+		const selectedOption = timeWindowOptions.find(
+			(option) => option.value === value,
+		);
 		if (selectedOption) {
 			setTimeWindowMs(selectedOption.milliseconds);
 		}
@@ -150,9 +166,7 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 		return `${Math.min(cpuRate, 100).toFixed(2)}%`;
 	}, [metricsData, isActorRunning]);
 
-	const calculateMemoryPercentage = (
-		usage: number | null | undefined,
-	) => {
+	const calculateMemoryPercentage = (usage: number | null | undefined) => {
 		if (
 			!isActorRunning ||
 			usage === null ||
@@ -192,15 +206,16 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 		);
 	}
 
-	const memoryPercentage = calculateMemoryPercentage(
-		data.memory_usage_bytes,
-	);
+	const memoryPercentage = calculateMemoryPercentage(data.memory_usage_bytes);
 
 	return (
 		<div className="px-4 my-8">
 			<div className="flex items-center justify-between mb-4">
 				<h3 className="font-semibold">Container Metrics</h3>
-				<Select value={timeWindow} onValueChange={handleTimeWindowChange}>
+				<Select
+					value={timeWindow}
+					onValueChange={handleTimeWindowChange}
+				>
 					<SelectTrigger className="w-32">
 						<SelectValue />
 					</SelectTrigger>
@@ -222,7 +237,8 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 						<Dd className="text-lg font-semibold flex flex-col gap-1">
 							<span>{cpuPercentage}</span>
 							{metricsData.rawData?.cpu_usage_seconds_total &&
-							metricsData.rawData.cpu_usage_seconds_total.length > 0 ? (
+							metricsData.rawData.cpu_usage_seconds_total.length >
+								0 ? (
 								<ActorCpuStats
 									syncId="actor-stats"
 									interval={metricsData.interval / 1000}
@@ -248,7 +264,8 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 								)}
 							</span>
 							{metricsData.rawData?.memory_usage_bytes &&
-							metricsData.rawData.memory_usage_bytes.length > 0 ? (
+							metricsData.rawData.memory_usage_bytes.length >
+								0 ? (
 								<ActorMemoryStats
 									syncId="actor-stats"
 									interval={metricsData.interval / 1000}
@@ -258,7 +275,9 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 											.memory_usage_bytes ?? []
 									}
 									allocatedMemory={
-										resources?.memory ? resources.memory * 1024 * 1024 : 0
+										resources?.memory
+											? resources.memory * 1024 * 1024
+											: 0
 									}
 									isRunning={isActorRunning}
 								/>
@@ -369,9 +388,17 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 						<h4 className="font-medium mb-2">Resource Limits</h4>
 						<Dl>
 							<Dt>Memory Limit</Dt>
-							<Dd>{resources?.memory ? `${resources.memory} MB` : "n/a"}</Dd>
+							<Dd>
+								{resources?.memory
+									? `${resources.memory} MB`
+									: "n/a"}
+							</Dd>
 							<Dt>CPU Limit</Dt>
-							<Dd>{resources?.cpu ? `${resources.cpu / 1000} cores` : "n/a"}</Dd>
+							<Dd>
+								{resources?.cpu
+									? `${resources.cpu / 1000} cores`
+									: "n/a"}
+							</Dd>
 						</Dl>
 					</div>
 
@@ -537,9 +564,7 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 							</Dd>
 							<Dt>Close Wait</Dt>
 							<Dd>
-								{formatNumber(
-									data.network_tcp_usage_closewait,
-								)}
+								{formatNumber(data.network_tcp_usage_closewait)}
 							</Dd>
 							<Dt>Closing</Dt>
 							<Dd>
@@ -701,4 +726,4 @@ export function ActorMetrics({ actor }: ActorMetricsProps) {
 			)}
 		</div>
 	);
-}
+}

frontend/packages/components/src/actors/actor-network.tsx

@@ -1,14 +1,14 @@
 import {
 	Button,
+	cn,
 	Dd,
 	DiscreteCopyButton,
 	Dl,
 	DocsSheet,
 	Dt,
 	Flex,
-	cn,
 } from "@rivet-gg/components";
-import { Icon, faBooks } from "@rivet-gg/icons";
+import { faBooks, Icon } from "@rivet-gg/icons";
 import { useAtomValue } from "jotai";
 import { selectAtom } from "jotai/utils";
 import { Fragment } from "react";

frontend/packages/components/src/actors/actor-not-found.tsx

@@ -1,7 +1,8 @@
-import { Icon, faQuestionSquare } from "@rivet-gg/icons";
+import { faQuestionSquare, Icon } from "@rivet-gg/icons";
 import { useAtomValue, useSetAtom } from "jotai";
 import { selectAtom } from "jotai/utils";
 import { useCallback } from "react";
+import { ShimmerLine } from "../shimmer-line";
 import { Button } from "../ui/button";
 import { FilterOp } from "../ui/filters";
 import {
@@ -11,11 +12,12 @@ import {
 } from "./actor-context";
 import { ActorTabs } from "./actors-actor-details";
 import { useActorsView } from "./actors-view-context-provider";
-import { ShimmerLine } from "../shimmer-line";
 
 export function ActorNotFound({
 	features = [],
-}: { features?: ActorFeature[] }) {
+}: {
+	features?: ActorFeature[];
+}) {
 	const { copy } = useActorsView();
 
 	const setFilters = useSetAtom(actorFiltersAtom);

frontend/packages/components/src/actors/actor-region.tsx

@@ -3,9 +3,9 @@ import { useAtomValue } from "jotai";
 import { selectAtom } from "jotai/utils";
 import { useCallback } from "react";
 import {
+	getRegionKey,
 	REGION_LABEL,
 	RegionIcon,
-	getRegionKey,
 } from "../matchmaker/lobby-region";
 import { actorRegionsAtom } from "./actor-context";
 

frontend/packages/components/src/actors/actor-status-indicator.tsx

@@ -1,4 +1,4 @@
-import { Ping, cn } from "@rivet-gg/components";
+import { cn, Ping } from "@rivet-gg/components";
 import { useAtomValue } from "jotai";
 import { selectAtom } from "jotai/utils";
 import type { ComponentPropsWithRef } from "react";

frontend/packages/components/src/actors/actor-status-label.tsx

@@ -17,11 +17,7 @@ export const ActorStatusLabel = ({ status }: { status: ActorStatus }) => {
 
 const selector = (a: Actor) => a.status;
 
-export const AtomizedActorStatusLabel = ({
-	actor,
-}: {
-	actor: ActorAtom;
-}) => {
+export const AtomizedActorStatusLabel = ({ actor }: { actor: ActorAtom }) => {
 	const status = useAtomValue(selectAtom(actor, selector));
 	return <ActorStatusLabel status={status} />;
 };

frontend/packages/components/src/actors/actor-stop-button.tsx

@@ -1,5 +1,5 @@
 import { Button, WithTooltip } from "@rivet-gg/components";
-import { Icon, faXmark } from "@rivet-gg/icons";
+import { faXmark, Icon } from "@rivet-gg/icons";
 
 import equal from "fast-deep-equal";
 import { useAtomValue } from "jotai";

frontend/packages/components/src/actors/actor-tags.tsx

@@ -1,13 +1,13 @@
 import {
 	Button,
+	cn,
 	DiscreteCopyButton,
 	Slot,
 	Slottable,
 	WithTooltip,
-	cn,
 } from "@rivet-gg/components";
-import { Icon, faTag } from "@rivet-gg/icons";
-import { type ReactNode, forwardRef, useState } from "react";
+import { faTag, Icon } from "@rivet-gg/icons";
+import { forwardRef, type ReactNode, useState } from "react";
 
 const BUILT_IN_TAGS = {
 	actors: ["framework", "framework-version"],