fix(fe): broken ui when no runner under name is available

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

@@ -39,7 +39,11 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 					</Dd>
 					<Dt>ID</Dt>
 					<Dd className="text-mono">
-						<DiscreteCopyButton size="xs" value={actorId}>
+						<DiscreteCopyButton
+							size="xs"
+							value={actorId}
+							className="-mx-2"
+						>
 							{actorId}
 						</DiscreteCopyButton>
 					</Dd>
@@ -64,6 +68,7 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 						<DiscreteCopyButton
 							size="xs"
 							value={createdAt ? formatISO(createdAt) : "n/a"}
+							className="-mx-2"
 						>
 							{createdAt ? formatISO(createdAt) : "n/a"}
 						</DiscreteCopyButton>
@@ -81,6 +86,7 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 									? formatISO(pendingAllocationAt)
 									: "n/a"
 							}
+							className="-mx-2"
 						>
 							{pendingAllocationAt
 								? formatISO(pendingAllocationAt)
@@ -95,6 +101,7 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 					>
 						<DiscreteCopyButton
 							size="xs"
+							className="-mx-2"
 							value={
 								connectableAt ? formatISO(connectableAt) : "n/a"
 							}
@@ -108,6 +115,7 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 					>
 						<DiscreteCopyButton
 							size="xs"
+							className="-mx-2"
 							value={sleepingAt ? formatISO(sleepingAt) : "n/a"}
 						>
 							{sleepingAt ? formatISO(sleepingAt) : "n/a"}
@@ -121,6 +129,7 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 					>
 						<DiscreteCopyButton
 							size="xs"
+							className="-mx-2"
 							value={destroyedAt ? formatISO(destroyedAt) : "n/a"}
 						>
 							{destroyedAt ? formatISO(destroyedAt) : "n/a"}

frontend/src/components/actors/actor-state-tab.tsx

@@ -58,7 +58,7 @@ export function ActorStateTab({ actorId }: ActorStateTabProps) {
 
 export function Info({ children }: PropsWithChildren) {
 	return (
-		<div className="flex-1 flex flex-col gap-2 items-center justify-center h-full text-center max-w-md mx-auto">
+		<div className="flex-1 flex flex-col gap-2 items-center justify-center h-full text-center max-w-lg mx-auto">
 			{children}
 		</div>
 	);

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

@@ -82,9 +82,11 @@ export function GuardConnectableInspector({
 			<InspectorGuardContext.Provider
 				value={
 					<Info>
-						Cannot start Actor, runners are out of capacity. Add
-						more runners to run the Actor or increase runner
-						capacity.
+						<p>Cannot start Actor, runners are out of capacity.</p>
+						<p>
+							Add more runners to run the Actor or increase runner
+							capacity.
+						</p>
 					</Info>
 				}
 			>

frontend/src/queries/manager-engine.ts

@@ -18,7 +18,7 @@ import {
 	ActorQueryOptionsSchema,
 	createDefaultManagerContext,
 } from "@/components/actors/manager-context";
-import { shouldRetryAllExpect403, throwAllExpect403 } from "./utils";
+import { noThrow, shouldRetryAllExpect403 } from "./utils";
 
 export const createClient = (opts: { token: (() => string) | string }) =>
 	new RivetClient({
@@ -53,7 +53,7 @@ export const createEngineManagerContext = ({
 					return true;
 				},
 				retry: shouldRetryAllExpect403,
-				throwOnError: throwAllExpect403,
+				throwOnError: noThrow,
 				meta: {
 					mightRequireAuth: true,
 				},
@@ -74,7 +74,7 @@ export const createEngineManagerContext = ({
 					};
 				},
 				retry: shouldRetryAllExpect403,
-				throwOnError: throwAllExpect403,
+				throwOnError: noThrow,
 				meta: {
 					mightRequireAuth: true,
 				},
@@ -100,7 +100,7 @@ export const createEngineManagerContext = ({
 					throw new Error(`Region not found: ${regionId}`);
 				},
 				retry: shouldRetryAllExpect403,
-				throwOnError: throwAllExpect403,
+				throwOnError: noThrow,
 				meta: {
 					mightRequireAuth: true,
 				},
@@ -124,7 +124,7 @@ export const createEngineManagerContext = ({
 					return transformActor(data.actors[0]);
 				},
 				retry: shouldRetryAllExpect403,
-				throwOnError: throwAllExpect403,
+				throwOnError: noThrow,
 				meta: {
 					mightRequireAuth: true,
 				},
@@ -199,7 +199,7 @@ export const createEngineManagerContext = ({
 					return lastPage.pagination.cursor;
 				},
 				retry: shouldRetryAllExpect403,
-				throwOnError: throwAllExpect403,
+				throwOnError: noThrow,
 				meta: {
 					mightRequireAuth: true,
 				},
@@ -237,7 +237,7 @@ export const createEngineManagerContext = ({
 					return lastPage.pagination.cursor;
 				},
 				retry: shouldRetryAllExpect403,
-				throwOnError: throwAllExpect403,
+				throwOnError: noThrow,
 				meta: {
 					mightRequireAuth: true,
 				},
@@ -260,7 +260,7 @@ export const createEngineManagerContext = ({
 					return response.actor.actorId;
 				},
 				onSuccess: () => {},
-				throwOnError: throwAllExpect403,
+				throwOnError: noThrow,
 				retry: shouldRetryAllExpect403,
 				meta: {
 					mightRequireAuth: true,
@@ -270,7 +270,7 @@ export const createEngineManagerContext = ({
 		actorDestroyMutationOptions(actorId) {
 			return {
 				...def.actorDestroyMutationOptions(actorId),
-				throwOnError: throwAllExpect403,
+				throwOnError: noThrow,
 				retry: shouldRetryAllExpect403,
 				meta: {
 					mightRequireAuth: true,
@@ -309,7 +309,7 @@ export const runnersQueryOptions = (opts: { namespace: NamespaceNameId }) => {
 		},
 		select: (data) => data.pages.flatMap((page) => page.runners),
 		retry: shouldRetryAllExpect403,
-		throwOnError: throwAllExpect403,
+		throwOnError: noThrow,
 		meta: {
 			mightRequireAuth: true,
 		},
@@ -333,7 +333,7 @@ export const runnerQueryOptions = (opts: {
 			);
 			return data.runner;
 		},
-		throwOnError: throwAllExpect403,
+		throwOnError: noThrow,
 		retry: shouldRetryAllExpect403,
 		meta: {
 			mightRequireAuth: true,
@@ -360,7 +360,7 @@ export const runnerByNameQueryOptions = (opts: {
 			}
 			return data.runners[0];
 		},
-		throwOnError: throwAllExpect403,
+		throwOnError: noThrow,
 		retry: shouldRetryAllExpect403,
 		meta: {
 			mightRequireAuth: true,
@@ -394,7 +394,7 @@ export const runnerNamesQueryOptions = (opts: {
 			return lastPage.pagination.cursor;
 		},
 		select: (data) => data.pages.flatMap((page) => page.names),
-		throwOnError: throwAllExpect403,
+		throwOnError: noThrow,
 		retry: shouldRetryAllExpect403,
 		meta: {
 			mightRequireAuth: true,
@@ -423,7 +423,7 @@ export const namespacesQueryOptions = () => {
 			return lastPage.pagination.cursor;
 		},
 		select: (data) => data.pages.flatMap((page) => page.namespaces),
-		throwOnError: throwAllExpect403,
+		throwOnError: noThrow,
 		retry: shouldRetryAllExpect403,
 		meta: {
 			mightRequireAuth: true,
@@ -447,7 +447,7 @@ export const namespaceQueryOptions = (
 			: skipToken,
 
 		retry: shouldRetryAllExpect403,
-		throwOnError: throwAllExpect403,
+		throwOnError: noThrow,
 		meta: {
 			mightRequireAuth: true,
 		},

frontend/src/queries/utils.ts

@@ -15,16 +15,9 @@ export const shouldRetryAllExpect403 = (failureCount: number, error: Error) => {
 	return true;
 };
 
-export const throwAllExpect403 = <T extends Query<any, any, any, any>>(
+export const noThrow = <T extends Query<any, any, any, any>>(
 	error: Error,
-	_query: T,
+	query: T,
 ) => {
-	if (error && "statusCode" in error) {
-		if (error.statusCode === 403) {
-			// Don't throw on auth errors
-			return false;
-		}
-	}
-
-	return true;
+	return false;
 };