feat(mgmt/web): show the running game, and who decides when it ends

The host knows what it launched and, after a disconnect, that it is counting
down to closing it. None of that was visible: the console showed a stream with
no game, and a game on its way to being closed was something you found out about
afterwards.

The Dashboard gains a running-game card above the session card — box art matched
against the catalog it already fetches, so no new endpoint and no request on the
2 s status poll. "End now" means the two different things the row's state
implies: a live game ends by stopping its session (what then happens to the game
follows the policy — stopping a session is not licence to close a game), while
one already waiting out its reconnect window has no session left to stop and is
ended directly.

The settings card sits next to the display keep-alive policy because that is the
same question one step out: keep-alive decides how long a *display* outlives a
disconnect, this decides whether the *game* does. The copy says plainly what
`always` costs, that a drop is not someone pressing Stop, and that a display kept
forever is unaffected either way — the precedence rule that would otherwise
surprise someone. Where a build enforces nothing (macOS, no launch path) the
controls are shown disabled rather than hidden: "does nothing here" is
information.

Also fixes the story fixtures, which had gone stale against the `games[]` field
Phase 1 added, and adds a story for the state the card exists for — a game whose
client walked away.

web: build + tsc clean, biome-formatted; en/de messages complete.

web/src/sections/Dashboard/RunningGames.tsx

@@ -0,0 +1,138 @@
+import { Gamepad2, XCircle } from "lucide-react";
+import type { FC } from "react";
+import type { ActiveGame } from "@/api/gen/model/activeGame";
+import type { GameEntry } from "@/api/gen/model/gameEntry";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { m } from "@/paraglide/messages";
+
+/**
+ * What the host is running, and — when a client has vanished — how long its game has left.
+ *
+ * The `grace` rows are the reason this card exists at all. A game whose session is gone is on a
+ * countdown to being closed, which costs unsaved progress; that has to be visible somewhere, with a
+ * way to say "yes, do it now" or (by reconnecting) "no". The live rows come almost free alongside.
+ */
+export const RunningGames: FC<{
+	games: ActiveGame[];
+	/** The catalog, for box art — matched by `app_id`. Absent while `/library` is still loading. */
+	library?: GameEntry[];
+	onEnd: (game: ActiveGame) => void;
+	isEnding: boolean;
+}> = ({ games, library, onEnd, isEnding }) => {
+	if (games.length === 0) return null;
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="flex items-center gap-2">
+					<Gamepad2 className="size-4" />
+					{m.games_title()}
+				</CardTitle>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-3">
+				{games.map((g) => (
+					<GameRow
+						// A host can run the same title for two clients at once (native admits concurrent
+						// sessions), so the title alone is not a key.
+						key={`${g.plane}:${g.session_id ?? "grace"}:${g.app_id ?? g.title}`}
+						game={g}
+						art={coverFor(g, library)}
+						onEnd={() => onEnd(g)}
+						isEnding={isEnding}
+					/>
+				))}
+			</CardContent>
+		</Card>
+	);
+};
+
+const GameRow: FC<{
+	game: ActiveGame;
+	art?: string;
+	onEnd: () => void;
+	isEnding: boolean;
+}> = ({ game, art, onEnd, isEnding }) => {
+	const waiting = game.state === "grace";
+	return (
+		<div className="flex items-center gap-3">
+			<div className="h-16 w-11 shrink-0 overflow-hidden rounded bg-muted">
+				{art && (
+					<img
+						src={art}
+						alt=""
+						loading="lazy"
+						className="size-full object-cover"
+					/>
+				)}
+			</div>
+			<div className="min-w-0 flex-1">
+				<div className="flex flex-wrap items-center gap-2">
+					<span className="truncate font-medium">{game.title}</span>
+					<Badge variant={waiting ? "destructive" : stateVariant(game.state)}>
+						{stateLabel(game.state)}
+					</Badge>
+				</div>
+				<p className="mt-0.5 truncate text-xs text-muted-foreground">
+					{waiting
+						? m.games_closing_in({
+								time: formatCountdown(game.grace_remaining_s ?? 0),
+							})
+						: [game.client, planeLabel(game.plane)].filter(Boolean).join(" · ")}
+				</p>
+			</div>
+			<Button
+				variant={waiting ? "destructive" : "outline"}
+				size="sm"
+				disabled={isEnding}
+				onClick={onEnd}
+			>
+				<XCircle className="size-3.5" />
+				{m.games_end_now()}
+			</Button>
+		</div>
+	);
+};
+
+/**
+ * Box art for a running game, matched against the already-fetched catalog by store-qualified id —
+ * so this card costs no extra request. `undefined` for an operator-typed GameStream command (no
+ * catalog entry behind it) or a title whose entry carries no art.
+ */
+function coverFor(game: ActiveGame, library?: GameEntry[]): string | undefined {
+	if (!game.app_id || !library) return undefined;
+	const entry = library.find((e) => e.id === game.app_id);
+	return entry?.art.portrait ?? entry?.art.header ?? undefined;
+}
+
+/** `mm:ss` — the countdown reads as a duration, not a number of seconds. */
+function formatCountdown(seconds: number): string {
+	const s = Math.max(0, Math.floor(seconds));
+	return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+}
+
+function stateLabel(state: string): string {
+	switch (state) {
+		case "launching":
+			return m.games_state_launching();
+		case "running":
+			return m.games_state_running();
+		case "exited":
+			return m.games_state_exited();
+		case "grace":
+			return m.games_state_grace();
+		default:
+			return state;
+	}
+}
+
+function stateVariant(state: string): "success" | "secondary" | "outline" {
+	if (state === "running") return "success";
+	if (state === "launching") return "secondary";
+	return "outline";
+}
+
+/** The compat plane is worth naming: it is why a row may show an IP instead of a device name. */
+function planeLabel(plane: string): string {
+	return plane === "gamestream" ? "GameStream" : "";
+}

web/src/sections/Dashboard/index.tsx

@@ -1,7 +1,13 @@
 import { useQueryClient } from "@tanstack/react-query";
 import type { FC } from "react";
 import { getGetStatusQueryKey, useGetStatus } from "@/api/gen/host/host";
-import { useRequestIdr, useStopSession } from "@/api/gen/session/session";
+import { useGetLibrary } from "@/api/gen/library/library";
+import type { ActiveGame } from "@/api/gen/model/activeGame";
+import {
+	useEndGame,
+	useRequestIdr,
+	useStopSession,
+} from "@/api/gen/session/session";
 import { useLocale } from "@/lib/i18n";
 import { DashboardView } from "./view";
 
@@ -10,19 +16,45 @@ export const SectionDashboard: FC = () => {
 	const qc = useQueryClient();
 	// Poll live status every 2s so the console tracks an active session.
 	const status = useGetStatus({ query: { refetchInterval: 2_000 } });
+	// The catalog, for the running-game card's box art. Fetched once and held: a library scan touches
+	// every installed store's on-disk metadata, so it must not ride the 2 s status poll.
+	const library = useGetLibrary(undefined, {
+		query: { staleTime: 5 * 60_000 },
+	});
 	const stop = useStopSession();
 	const idr = useRequestIdr();
+	const endGame = useEndGame();
 
 	const invalidate = () =>
 		qc.invalidateQueries({ queryKey: getGetStatusQueryKey() });
 
+	/**
+	 * "End now" means two different things, and which one is right follows from the row's state: a
+	 * game whose session is still live ends by stopping that session (what then happens to the game
+	 * follows the operator's policy — stopping a session is not licence to close a game), while a
+	 * game already waiting out its reconnect window has no session left to stop and is ended directly.
+	 */
+	const onEndGame = (game: ActiveGame) => {
+		if (game.state === "grace") {
+			endGame.mutate(
+				{ data: { app_id: game.app_id ?? null } },
+				{ onSuccess: invalidate },
+			);
+		} else {
+			stop.mutate(undefined, { onSuccess: invalidate });
+		}
+	};
+
 	return (
 		<DashboardView
 			status={status}
+			library={library.data}
 			onStopSession={() => stop.mutate(undefined, { onSuccess: invalidate })}
 			onRequestIdr={() => idr.mutate(undefined)}
+			onEndGame={onEndGame}
 			isStopping={stop.isPending}
 			isRequestingIdr={idr.isPending}
+			isEndingGame={endGame.isPending || stop.isPending}
 		/>
 	);
 };

web/src/sections/Dashboard/view.tsx

@@ -1,6 +1,8 @@
 import Section from "@unom/ui/section";
 import { MonitorPlay, RefreshCw, Video, Volume2, ZapOff } from "lucide-react";
 import type { FC, ReactNode } from "react";
+import type { ActiveGame } from "@/api/gen/model/activeGame";
+import type { GameEntry } from "@/api/gen/model/gameEntry";
 import type { RuntimeStatus } from "@/api/gen/model/runtimeStatus";
 import { QueryState } from "@/components/query-state";
 import { Badge } from "@/components/ui/badge";
@@ -8,14 +10,27 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { Loadable } from "@/lib/query";
 import { m } from "@/paraglide/messages";
+import { RunningGames } from "./RunningGames";
 
 export const DashboardView: FC<{
 	status: Loadable<RuntimeStatus>;
+	library?: GameEntry[];
 	onStopSession: () => void;
 	onRequestIdr: () => void;
+	onEndGame: (game: ActiveGame) => void;
 	isStopping: boolean;
 	isRequestingIdr: boolean;
-}> = ({ status, onStopSession, onRequestIdr, isStopping, isRequestingIdr }) => {
+	isEndingGame: boolean;
+}> = ({
+	status,
+	library,
+	onStopSession,
+	onRequestIdr,
+	onEndGame,
+	isStopping,
+	isRequestingIdr,
+	isEndingGame,
+}) => {
 	const s = status.data;
 	return (
 		<Section maxWidth={false}>
@@ -61,6 +76,15 @@ export const DashboardView: FC<{
 								</Card>
 							</div>
 
+							{/* Above the session card: a game the host is about to close is the most
+							    time-sensitive thing on this page. */}
+							<RunningGames
+								games={s.games}
+								library={library}
+								onEnd={onEndGame}
+								isEnding={isEndingGame}
+							/>
+
 							<Card>
 								<CardHeader className="flex flex-col items-start gap-3 space-y-0 sm:flex-row sm:items-center sm:justify-between">
 									<CardTitle className="flex items-center gap-2">