From 725a79a1d80c102cece519bb5c294c6d423326dc Mon Sep 17 00:00:00 2001
From: Amp <amp@ampcode.com>
Date: Mon, 7 Sep 2026 06:20:50 +0000
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20dashboard=20audit=20polish=20?=
 =?UTF-8?q?=E2=80=94=20inspector=20defaults,=20empty=20states,=20OSS=20the?=
 =?UTF-8?q?me=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Default actor tab is State (Workflow for workflows); Database only leads for
  raw-SQLite actors. The dashboard now canonicalizes the tab order advertised
  by the runner's inspector bundle so older runners get the same order.
- Database tab: user tables first, _rivet_* tables grouped under "Internal",
  and the first user table is selected by default.
- Connections tab: table (ID, type, hibernatable, params, state) with a proper
  empty state instead of a raw object tree; Queue empty state matches Schedules.
- Metadata: Key rendered as copyable mono text instead of a JSON tree.
- OSS top bar gets a light/dark toggle (cloud keeps it in the user menu).
- ?n=counter (plain string) no longer renders a Zod error page.
- Provider/runner copy no longer references Rivet Cloud in OSS; settings drawer
  description is flavor-aware; Live badge uses primary instead of destructive.
- "No more Actors to load." only shows after more than one page.

Amp-Thread-ID: https://ampcode.com/threads/T-01a072ad-3c9e-744e-b4b9-a8997aae8809
Co-authored-by: Nicholas Kissel <nicholas@rivet.gg>
---
 frontend/src/app/runner-config-table.tsx      |   2 +-
 frontend/src/app/runners-table.tsx            |   4 +-
 frontend/src/app/settings-drawer.tsx          |   5 +-
 .../app/settings-pages/namespace-settings.tsx |   4 +-
 frontend/src/app/top-bar-actions.tsx          |  43 +++++-
 .../actors/actor-connections-tab.tsx          | 140 ++++++++++++++++--
 .../src/components/actors/actor-database.tsx  |  49 +++++-
 .../actors/actor-details-iframe.tsx           |   3 +-
 .../actors/actor-details-shared.tsx           |  32 +++-
 .../actors/actor-details-skeleton.tsx         |   2 +-
 .../src/components/actors/actor-general.tsx   |  31 ++--
 .../src/components/actors/actor-queue.tsx     |  16 +-
 .../src/components/actors/actors-list.tsx     |   6 +-
 .../actors/inspector-tab-registry.tsx         |  20 ++-
 .../components/actors/no-providers-alert.tsx  |  12 +-
 frontend/src/components/live-badge.tsx        |   3 +-
 frontend/src/routes/_context.tsx              |  11 +-
 17 files changed, 317 insertions(+), 66 deletions(-)

diff --git a/frontend/src/app/runner-config-table.tsx b/frontend/src/app/runner-config-table.tsx
index f7179c077b..15f147bcdf 100644
--- a/frontend/src/app/runner-config-table.tsx
+++ b/frontend/src/app/runner-config-table.tsx
@@ -87,7 +87,7 @@ export function RunnerConfigsTable({
 					<TableRow>
 						<TableCell colSpan={6}>
 							<Text className="text-center">
-								There's no providers matching criteria.
+								No providers added yet.
 							</Text>
 						</TableCell>
 					</TableRow>
diff --git a/frontend/src/app/runners-table.tsx b/frontend/src/app/runners-table.tsx
index 59bacab7f5..1490e55034 100644
--- a/frontend/src/app/runners-table.tsx
+++ b/frontend/src/app/runners-table.tsx
@@ -412,8 +412,8 @@ function EmptyState() {
 					</>
 				) : (
 					<Text className="text-center">
-						There are no runners connected. You will not be able to
-						run actors until a runner appears here.
+						No runners connected yet. Actors can't run until a
+						runner appears here.
 					</Text>
 				)}
 			</TableCell>
diff --git a/frontend/src/app/settings-drawer.tsx b/frontend/src/app/settings-drawer.tsx
index ff9417d795..380dee2d8a 100644
--- a/frontend/src/app/settings-drawer.tsx
+++ b/frontend/src/app/settings-drawer.tsx
@@ -92,8 +92,9 @@ const TAB_META: Record<SettingsTab, { title: string; description?: string }> = {
 	},
 	settings: {
 		title: "Settings",
-		description:
-			"Connect your RivetKit application to Rivet Cloud. Use your cloud of choice to run Rivet Actors.",
+		description: features.platform
+			? "Connect your RivetKit application to Rivet Cloud. Use your cloud of choice to run Rivet Actors."
+			: "Connect providers and runners to this namespace. Use your cloud of choice to run Rivet Actors.",
 	},
 	compute: {
 		title: "Compute",
diff --git a/frontend/src/app/settings-pages/namespace-settings.tsx b/frontend/src/app/settings-pages/namespace-settings.tsx
index a6451a1f80..ae1a3c31e0 100644
--- a/frontend/src/app/settings-pages/namespace-settings.tsx
+++ b/frontend/src/app/settings-pages/namespace-settings.tsx
@@ -109,7 +109,7 @@ function Providers() {
 	return (
 		<SettingsCard
 			title="Providers"
-			description="Clouds connected to Rivet for running Rivet Actors."
+			description="Clouds connected to this namespace for running Rivet Actors."
 			action={
 				<ProviderDropdown>
 					<Button
@@ -190,7 +190,7 @@ function Runners() {
 	return (
 		<SettingsCard
 			title="Runners"
-			description="Processes connected to Rivet Cloud and ready to start running Rivet Actors."
+			description="Processes connected to this namespace and ready to run Rivet Actors."
 		>
 			<div className="border border-foreground/10 rounded-md overflow-hidden">
 				<RunnersTable
diff --git a/frontend/src/app/top-bar-actions.tsx b/frontend/src/app/top-bar-actions.tsx
index 1fe1b811ea..b4fc9af510 100644
--- a/frontend/src/app/top-bar-actions.tsx
+++ b/frontend/src/app/top-bar-actions.tsx
@@ -1,9 +1,16 @@
-import { faBook, Icon } from "@rivet-gg/icons";
+import { faBook, faMoon, faSun, Icon } from "@rivet-gg/icons";
 import { type ComponentPropsWithoutRef, forwardRef } from "react";
-import { Avatar, AvatarFallback, AvatarImage, Button } from "@/components";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+	Button,
+	WithTooltip,
+} from "@/components";
 import { authClient } from "@/lib/auth";
 import { features } from "@/lib/features";
 import { orgConicGradient, paletteForLetter } from "@/lib/org-palette";
+import { useTheme } from "@/lib/theme";
 import { FeedbackButton } from "./feedback-button";
 import { HelpButton } from "./help-button";
 import { UserDropdown } from "./user-dropdown";
@@ -23,11 +30,41 @@ export function TopBarActions() {
 						<UserAvatarTrigger />
 					</UserDropdown>
 				</>
-			) : null}
+			) : (
+				// Signed-in users switch themes from the account menu. Without
+				// auth (OSS / self-hosted) there is no menu, so expose the
+				// toggle directly.
+				<ThemeToggleButton />
+			)}
 		</div>
 	);
 }
 
+function ThemeToggleButton() {
+	const { theme, toggle } = useTheme();
+	const label =
+		theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
+	return (
+		<WithTooltip
+			content={label}
+			trigger={
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					aria-label={label}
+					className="text-muted-foreground hover:text-foreground"
+					onClick={toggle}
+				>
+					<Icon
+						icon={theme === "dark" ? faSun : faMoon}
+						className="size-4"
+					/>
+				</Button>
+			}
+		/>
+	);
+}
+
 function DocsButton() {
 	return (
 		<Button
diff --git a/frontend/src/components/actors/actor-connections-tab.tsx b/frontend/src/components/actors/actor-connections-tab.tsx
index 1415d3b0b9..608647d01d 100644
--- a/frontend/src/components/actors/actor-connections-tab.tsx
+++ b/frontend/src/components/actors/actor-connections-tab.tsx
@@ -1,6 +1,14 @@
-import { faSpinnerThird, Icon } from "@rivet-gg/icons";
+import { faPlug, faSpinnerThird, Icon } from "@rivet-gg/icons";
 import { useQuery } from "@tanstack/react-query";
-import { LiveBadge, ScrollArea } from "@/components";
+import { DiscreteCopyButton, LiveBadge, ScrollArea } from "@/components";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
 import { useActorInspector } from "./actor-inspector-context";
 import { Info } from "./actor-state-tab";
 import { ActorObjectInspector } from "./console/actor-inspector";
@@ -11,6 +19,21 @@ interface ActorConnectionsTabProps {
 	actorId: ActorId;
 }
 
+/**
+ * Shape of the CBOR-decoded `details` payload sent by RivetKit. Kept loose on
+ * purpose: older runtimes send `type` instead of `connectionType`, and the
+ * inspector should still render whatever it gets.
+ */
+interface ConnectionDetails {
+	connectionType?: string | null;
+	type?: string | null;
+	params?: unknown;
+	state?: unknown;
+	stateEnabled?: boolean;
+	subscriptions?: number;
+	isHibernatable?: boolean;
+}
+
 export function ActorConnectionsTab({ actorId }: ActorConnectionsTabProps) {
 	const { data: destroyedAt } = useQuery(
 		useDataProvider().actorDestroyedAtQueryOptions(actorId),
@@ -41,17 +64,112 @@ export function ActorConnectionsTab({ actorId }: ActorConnectionsTabProps) {
 	}
 
 	return (
-		<ScrollArea className="flex-1 w-full min-h-0 h-full">
-			<div className="flex  justify-between items-center gap-1 border-b sticky top-0 p-2 z-[1] h-[45px]">
+		<div className="flex h-full min-h-0 flex-1 flex-col">
+			<div className="flex justify-between items-center gap-1 border-b p-2 h-[45px]">
 				<LiveBadge />
+				<div className="text-xs text-muted-foreground">
+					{data.length}{" "}
+					{data.length === 1 ? "connection" : "connections"}
+				</div>
 			</div>
-			<div className="p-2">
-				<ActorObjectInspector
-					name="connections"
-					data={data}
-					expandPaths={["$"]}
-				/>
+			{data.length === 0 ? (
+				<EmptyConnections />
+			) : (
+				<ScrollArea className="flex-1 w-full min-h-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Connection ID</TableHead>
+								<TableHead>Type</TableHead>
+								<TableHead>Hibernatable</TableHead>
+								<TableHead>Params</TableHead>
+								<TableHead>State</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{data.map((connection) => {
+								const details = (connection.details ??
+									{}) as ConnectionDetails;
+								const type =
+									details.connectionType ??
+									details.type ??
+									"—";
+								return (
+									<TableRow
+										key={connection.id}
+										className="align-top"
+									>
+										<TableCell className="whitespace-nowrap align-top">
+											<DiscreteCopyButton
+												size="xs"
+												className="font-mono-console text-xs -ml-2"
+												value={connection.id}
+											>
+												{connection.id}
+											</DiscreteCopyButton>
+										</TableCell>
+										<TableCell className="text-muted-foreground align-top">
+											{type}
+										</TableCell>
+										<TableCell className="text-muted-foreground align-top">
+											{details.isHibernatable
+												? "Yes"
+												: "No"}
+										</TableCell>
+										<TableCell className="w-1/4 min-w-48 align-top">
+											<ConnectionValue
+												name="params"
+												value={details.params}
+											/>
+										</TableCell>
+										<TableCell className="w-1/4 min-w-48 align-top">
+											{details.stateEnabled === false ? (
+												<span className="text-muted-foreground">
+													Disabled
+												</span>
+											) : (
+												<ConnectionValue
+													name="state"
+													value={details.state}
+												/>
+											)}
+										</TableCell>
+									</TableRow>
+								);
+							})}
+						</TableBody>
+					</Table>
+				</ScrollArea>
+			)}
+		</div>
+	);
+}
+
+function ConnectionValue({ name, value }: { name: string; value: unknown }) {
+	if (value === undefined || value === null) {
+		return <span className="text-muted-foreground">—</span>;
+	}
+	return (
+		<ActorObjectInspector
+			name={name}
+			data={value}
+			expandPaths={["$"]}
+			className="text-xs"
+		/>
+	);
+}
+
+function EmptyConnections() {
+	return (
+		<div className="flex flex-1 flex-col items-center justify-center p-8 text-center">
+			<div className="mb-3 flex size-11 items-center justify-center rounded-full bg-muted">
+				<Icon icon={faPlug} className="text-muted-foreground" />
 			</div>
-		</ScrollArea>
+			<h3 className="font-medium">No active connections</h3>
+			<p className="mt-1 max-w-sm text-sm text-muted-foreground">
+				Clients connected to this actor, their params, and connection
+				state will appear here.
+			</p>
+		</div>
 	);
 }
diff --git a/frontend/src/components/actors/actor-database.tsx b/frontend/src/components/actors/actor-database.tsx
index d57899962a..2e9d0594a4 100644
--- a/frontend/src/components/actors/actor-database.tsx
+++ b/frontend/src/components/actors/actor-database.tsx
@@ -20,12 +20,14 @@ import {
 	Textarea,
 	WithTooltip,
 } from "@/components";
-import { ShimmerLine } from "../shimmer-line";
 import { formatValue } from "@/lib/format-value";
+import { ShimmerLine } from "../shimmer-line";
 import {
 	Select,
 	SelectContent,
+	SelectGroup,
 	SelectItem,
+	SelectLabel,
 	SelectTrigger,
 	SelectValue,
 } from "../ui/select";
@@ -105,18 +107,33 @@ export function ActorDatabase({ actorId }: ActorDatabaseProps) {
 	);
 }
 
+/**
+ * Tables created by Rivet itself (actor metadata, workflow KV, migration
+ * bookkeeping). They are still browsable but should not be the first thing a
+ * user sees when opening the Database tab.
+ */
+function isInternalTable(name: string) {
+	return name.startsWith("_rivet");
+}
+
+function defaultTableName(names: string[] | undefined) {
+	if (!names?.length) return undefined;
+	return names.find((name) => !isInternalTable(name)) ?? names[0];
+}
+
 function ActorDatabaseBrowser({ actorId }: ActorDatabaseProps) {
 	const actorInspector = useActorInspector();
 	const queryClient = useQueryClient();
 	const { data, refetch } = useQuery(
 		actorInspector.actorDatabaseQueryOptions(actorId),
 	);
-	const [table, setTable] = useState<string | undefined>(
-		() => data?.tables?.[0]?.table.name,
+	const [table, setTable] = useState<string | undefined>(() =>
+		defaultTableName(data?.tables?.map((t) => t.table.name)),
 	);
 	const [page, setPage] = useState(0);
 
-	const selectedTable = table || data?.tables?.[0]?.table.name;
+	const selectedTable =
+		table || defaultTableName(data?.tables?.map((t) => t.table.name));
 
 	const {
 		data: rows,
@@ -811,6 +828,10 @@ function TableSelect({
 	const { data: tables } = useQuery(
 		actorInspector.actorDatabaseTablesQueryOptions(actorId),
 	);
+	const userTables =
+		tables?.filter((table) => !isInternalTable(table.name)) ?? [];
+	const internalTables =
+		tables?.filter((table) => isInternalTable(table.name)) ?? [];
 
 	return (
 		<Select onValueChange={onSelect} value={value}>
@@ -826,7 +847,7 @@ function TableSelect({
 						</Flex>
 					</SelectItem>
 				) : null}
-				{tables?.map((table) => (
+				{userTables.map((table) => (
 					<SelectItem key={table.name} value={table.name}>
 						<div className="flex items-center gap-2">
 							<Icon icon={faTable} className="text-foreground" />
@@ -834,6 +855,24 @@ function TableSelect({
 						</div>
 					</SelectItem>
 				))}
+				{internalTables.length > 0 ? (
+					<SelectGroup>
+						<SelectLabel className="text-muted-foreground font-normal">
+							Internal
+						</SelectLabel>
+						{internalTables.map((table) => (
+							<SelectItem key={table.name} value={table.name}>
+								<div className="flex items-center gap-2">
+									<Icon
+										icon={faTable}
+										className="text-muted-foreground"
+									/>
+									{table.name}
+								</div>
+							</SelectItem>
+						))}
+					</SelectGroup>
+				) : null}
 			</SelectContent>
 		</Select>
 	);
diff --git a/frontend/src/components/actors/actor-details-iframe.tsx b/frontend/src/components/actors/actor-details-iframe.tsx
index 3f497f2b31..40a25e8d7f 100644
--- a/frontend/src/components/actors/actor-details-iframe.tsx
+++ b/frontend/src/components/actors/actor-details-iframe.tsx
@@ -22,6 +22,7 @@ import { useTimeout } from "../hooks/use-timeout";
 import { ActorDetailsLegacy } from "./actor-details-legacy";
 import {
 	CLOUD_TABS,
+	orderInspectorTabs,
 	SKELETON_INSPECTOR_TABS,
 	useHasManagedPool,
 	useShowTabLabels,
@@ -575,7 +576,7 @@ function ActorDetailsIframePath({
 				return;
 			}
 			if (msg.type === "tabs-available") {
-				setInspectorTabs(msg.tabs);
+				setInspectorTabs(orderInspectorTabs(msg.tabs));
 				return;
 			}
 			if (msg.type === "token-refresh-needed") {
diff --git a/frontend/src/components/actors/actor-details-shared.tsx b/frontend/src/components/actors/actor-details-shared.tsx
index c0c4885513..44392c26a6 100644
--- a/frontend/src/components/actors/actor-details-shared.tsx
+++ b/frontend/src/components/actors/actor-details-shared.tsx
@@ -145,10 +145,40 @@ export const CLOUD_TABS: readonly CloudTabSpec[] = [
  */
 export const SKELETON_INSPECTOR_TABS: readonly InspectorTabDescriptor[] = [
 	{ id: "workflow", label: "Workflow", icon: "workflow" },
-	{ id: "database", label: "Database", icon: "database" },
 	{ id: "state", label: "State", icon: "state" },
+	{ id: "database", label: "Database", icon: "database" },
 	{ id: "queue", label: "Queue", icon: "queue" },
 	{ id: "schedules", label: "Schedules", icon: "calendar" },
 	{ id: "connections", label: "Connections", icon: "plug" },
 	{ id: "console", label: "Console", icon: "terminal" },
 ];
+
+const KNOWN_INSPECTOR_TAB_ORDER = new Map(
+	SKELETON_INSPECTOR_TABS.map((tab, index) => [tab.id, index]),
+);
+
+/**
+ * Orders tabs advertised by an actor's inspector bundle to match the
+ * dashboard's canonical order. The bundle is shipped with the runner, so older
+ * runners may advertise tabs in a different order (e.g. Database before
+ * State); the dashboard owns the strip and picks `displayedTabs[0]` as the
+ * default, so it also owns the order. Custom tabs the dashboard doesn't know
+ * keep their advertised order and follow the built-in ones.
+ */
+export function orderInspectorTabs<T extends { id: string }>(
+	tabs: readonly T[],
+): T[] {
+	return tabs
+		.map((tab, index) => ({ tab, index }))
+		.sort((a, b) => {
+			const aKnown = KNOWN_INSPECTOR_TAB_ORDER.get(a.tab.id);
+			const bKnown = KNOWN_INSPECTOR_TAB_ORDER.get(b.tab.id);
+			if (aKnown !== undefined && bKnown !== undefined) {
+				return aKnown - bKnown;
+			}
+			if (aKnown !== undefined) return -1;
+			if (bKnown !== undefined) return 1;
+			return a.index - b.index;
+		})
+		.map(({ tab }) => tab);
+}
diff --git a/frontend/src/components/actors/actor-details-skeleton.tsx b/frontend/src/components/actors/actor-details-skeleton.tsx
index babfb3c3ac..cd728d5a68 100644
--- a/frontend/src/components/actors/actor-details-skeleton.tsx
+++ b/frontend/src/components/actors/actor-details-skeleton.tsx
@@ -13,8 +13,8 @@ const PLACEHOLDER_TABS: ReadonlyArray<{
 	icon: string;
 }> = [
 	{ id: "workflow", label: "Workflow", icon: "workflow" },
-	{ id: "database", label: "Database", icon: "database" },
 	{ id: "state", label: "State", icon: "state" },
+	{ id: "database", label: "Database", icon: "database" },
 	{ id: "queue", label: "Queue", icon: "queue" },
 	{ id: "connections", label: "Connections", icon: "plug" },
 	{ id: "console", label: "Console", icon: "terminal" },
diff --git a/frontend/src/components/actors/actor-general.tsx b/frontend/src/components/actors/actor-general.tsx
index f9c7b61872..d82e628e9b 100644
--- a/frontend/src/components/actors/actor-general.tsx
+++ b/frontend/src/components/actors/actor-general.tsx
@@ -18,7 +18,6 @@ import {
 	ActorSleepButton,
 	ActorStopButton,
 } from "./actor-stop-button";
-import { ActorObjectInspector } from "./console/actor-inspector";
 import { useDataProvider } from "./data-provider";
 import type { ActorId } from "./queries";
 
@@ -91,19 +90,19 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 								actorId={actorId}
 							/>
 						</Dd>
-						<Dt>Keys</Dt>
-						<Dd>
-							<Flex
-								direction="col"
-								gap="2"
-								className="flex-1 min-w-0"
-								w="full"
-							>
-								<ActorObjectInspector
-									data={keys}
-									expandPaths={["$"]}
-								/>
-							</Flex>
+						<Dt>Key</Dt>
+						<Dd className="text-mono">
+							{keys ? (
+								<DiscreteCopyButton
+									size="xs"
+									value={keys}
+									className="-mx-2 h-auto"
+								>
+									{keys}
+								</DiscreteCopyButton>
+							) : (
+								<span className="text-muted-foreground">-</span>
+							)}
 						</Dd>
 						{runner ? (
 							<>
@@ -129,7 +128,7 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 						) : null}
 						{connectableTs ? (
 							<>
-								<Dt>Connectable</Dt>
+								<Dt>Connectable since</Dt>
 								<Dd>
 									<TimestampValue ts={connectableTs} />
 								</Dd>
@@ -137,7 +136,7 @@ export function ActorGeneral({ actorId }: ActorGeneralProps) {
 						) : null}
 						{sleepTs ? (
 							<>
-								<Dt>Sleeping</Dt>
+								<Dt>Sleeping since</Dt>
 								<Dd>
 									<TimestampValue ts={sleepTs} />
 								</Dd>
diff --git a/frontend/src/components/actors/actor-queue.tsx b/frontend/src/components/actors/actor-queue.tsx
index 4e8b4b7ac4..af021889fe 100644
--- a/frontend/src/components/actors/actor-queue.tsx
+++ b/frontend/src/components/actors/actor-queue.tsx
@@ -1,4 +1,4 @@
-import { faSpinnerThird, Icon } from "@rivet-gg/icons";
+import { faInbox, faSpinnerThird, Icon } from "@rivet-gg/icons";
 import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
 import { LiveBadge, ScrollArea } from "@/components";
@@ -53,8 +53,18 @@ export function ActorQueue({ actorId }: { actorId: ActorId }) {
 			</div>
 			<div className="p-3 space-y-2">
 				{status.messages.length === 0 ? (
-					<div className="text-sm text-muted-foreground">
-						Queue is empty.
+					<div className="flex flex-col items-center justify-center p-8 text-center">
+						<div className="mb-3 flex size-11 items-center justify-center rounded-full bg-muted">
+							<Icon
+								icon={faInbox}
+								className="text-muted-foreground"
+							/>
+						</div>
+						<h3 className="font-medium">Queue is empty</h3>
+						<p className="mt-1 max-w-sm text-sm text-muted-foreground">
+							Messages waiting to be processed by this actor will
+							appear here.
+						</p>
 					</div>
 				) : (
 					status.messages.map((message) => (
diff --git a/frontend/src/components/actors/actors-list.tsx b/frontend/src/components/actors/actors-list.tsx
index fef9023381..64d8c7bf5d 100644
--- a/frontend/src/components/actors/actors-list.tsx
+++ b/frontend/src/components/actors/actors-list.tsx
@@ -517,11 +517,13 @@ function EmptyState({ count }: { count: number }) {
 						</Button>
 					</>
 				)
-			) : (
+			) : count > RECORDS_PER_PAGE ? (
+				// Only worth saying once the user has actually scrolled through
+				// more than one page; for short lists it is just noise.
 				<SmallText className="text-muted-foreground text-center text-xs">
 					{copy.noMoreActors}
 				</SmallText>
-			)}
+			) : null}
 		</div>
 	);
 }
diff --git a/frontend/src/components/actors/inspector-tab-registry.tsx b/frontend/src/components/actors/inspector-tab-registry.tsx
index 1e560710ab..fd1804bea5 100644
--- a/frontend/src/components/actors/inspector-tab-registry.tsx
+++ b/frontend/src/components/actors/inspector-tab-registry.tsx
@@ -75,25 +75,29 @@ interface TabRegistration {
 	render: (actorId: ActorId) => ReactNode;
 }
 
-// Tab list — preserved order matches the dashboard tab strip. Adding a new
-// inspector tab here automatically advertises it to the dashboard (in the
-// iframe path) and renders it inline (in the legacy path).
+// Tab list — preserved order matches the dashboard tab strip, and the first
+// available tab is the default the dashboard opens. State sits before
+// Database on purpose: every actor has a SQLite database (so Database would
+// otherwise always win), but the state object is what the actor's code
+// actually defines. Adding a new inspector tab here automatically advertises
+// it to the dashboard (in the iframe path) and renders it inline (in the
+// legacy path).
 export const INSPECTOR_TAB_REGISTRATIONS: readonly TabRegistration[] = [
 	{
 		descriptor: { id: "workflow", label: "Workflow", icon: "workflow" },
 		available: (caps) => caps.isWorkflowEnabled,
 		render: (actorId) => <ActorWorkflowTab actorId={actorId} />,
 	},
-	{
-		descriptor: { id: "database", label: "Database", icon: "database" },
-		available: (caps) => caps.isDatabaseEnabled,
-		render: (actorId) => <ActorDatabaseTab actorId={actorId} />,
-	},
 	{
 		descriptor: { id: "state", label: "State", icon: "state" },
 		available: (caps) => caps.isStateEnabled,
 		render: (actorId) => <ActorStateTab actorId={actorId} />,
 	},
+	{
+		descriptor: { id: "database", label: "Database", icon: "database" },
+		available: (caps) => caps.isDatabaseEnabled,
+		render: (actorId) => <ActorDatabaseTab actorId={actorId} />,
+	},
 	{
 		descriptor: { id: "queue", label: "Queue", icon: "queue" },
 		available: (caps) => caps.isQueueSupported,
diff --git a/frontend/src/components/actors/no-providers-alert.tsx b/frontend/src/components/actors/no-providers-alert.tsx
index 01d6402238..9dd8c80d36 100644
--- a/frontend/src/components/actors/no-providers-alert.tsx
+++ b/frontend/src/components/actors/no-providers-alert.tsx
@@ -1,4 +1,4 @@
-import { faBook, faExclamationTriangle, faPlus, Icon } from "@rivet-gg/icons";
+import { faBook, faPlug, faPlus, Icon } from "@rivet-gg/icons";
 import { Link } from "@tanstack/react-router";
 import { ProviderDropdown } from "@/app/provider-dropdown";
 import { docsLinks } from "@/content/data";
@@ -16,14 +16,14 @@ export function NoProvidersAlert({
 			<div>
 				<H4>
 					<Icon
-						icon={faExclamationTriangle}
+						icon={faPlug}
 						className="mr-2 text-muted-foreground"
 					/>
-					No Providers Connected
+					No providers connected
 				</H4>
 				<p className="text-sm text-muted-foreground mt-1 mb-2 pl-7">
-					You can't run any Actors yet. Use provider of your choice to
-					connect and start deploying and running Rivet Actors.
+					Actors need somewhere to run. Add a provider to connect a
+					cloud of your choice and start running Rivet Actors.
 				</p>
 			</div>
 			<div className="flex flex-col items-center justify-center gap-2">
@@ -65,7 +65,7 @@ export function NoProvidersAlert({
 							size="sm"
 							className="w-full"
 						>
-							Connect Provider
+							Add Provider
 						</Button>
 					</ProviderDropdown>
 				)}
diff --git a/frontend/src/components/live-badge.tsx b/frontend/src/components/live-badge.tsx
index 45e1c1f324..6b201ad084 100644
--- a/frontend/src/components/live-badge.tsx
+++ b/frontend/src/components/live-badge.tsx
@@ -11,7 +11,8 @@ export function LiveBadge({ className }: LiveBadgeProps) {
 			className={cn(className, "flex justify-center items-center")}
 			variant="outline"
 		>
-			<div className="mr-2 bg-destructive rounded-full animate-pulse size-2" />
+			{/* Accent, not destructive: red reads as an error elsewhere in the app. */}
+			<div className="mr-2 bg-primary rounded-full animate-pulse size-2" />
 			Live
 		</Badge>
 	);
diff --git a/frontend/src/routes/_context.tsx b/frontend/src/routes/_context.tsx
index 2bab960caa..15feffba23 100644
--- a/frontend/src/routes/_context.tsx
+++ b/frontend/src/routes/_context.tsx
@@ -44,7 +44,16 @@ const searchSchema = z
 export const Route = createFileRoute("/_context")({
 	component: RouteComponent,
 	validateSearch: (search) => {
-		const validated = searchSchema.parse(search);
+		// Hand-typed and shared links often carry `?n=counter` instead of the
+		// serialized array form. Accept both so a bare string never surfaces
+		// as a raw validation error page. Normalized before parsing because
+		// the schema is an intersection, and a per-field transform would
+		// conflict with the untouched value from the `z.record` half.
+		const normalized =
+			typeof search.n === "string"
+				? { ...search, n: [search.n] }
+				: search;
+		const validated = searchSchema.parse(normalized);
 		// `pool` is scoped to the pages that actually use it: the Logs route
 		// re-declares it in its own validateSearch, and the compute settings tab
 		// needs it while open. Drop it everywhere else so the selected pool does