ui/phase-19: read-only ship-group inspector + sheet + tab dispatch

Closes Phase 19's UI surface. The inspector dispatches on the
selection variant: local / other groups render class, count, the
four tech levels, mass, cargo (type + amount when loaded),
location (planet name on-orbit, from/to/distance in hyperspace),
and — for local groups only — fleet membership + state. Incoming
groups surface origin / destination / distance / speed and the
inline ETA = ceil(distance / speed); zero speed collapses to the
designer's existing "—" placeholder. Unidentified groups render
just the (x, y) coordinates and the no-data hint, mirroring the
unidentified planet treatment.

Layout / inspector-tab plumbing:
  - inspector-tab.svelte derives selectedShipGroup against the
    rendered report and mounts <ShipGroup /> when the planet
    branch doesn't match. Stale refs (an index that no longer
    resolves after a turn refresh) collapse cleanly to the empty
    state.
  - +layout.svelte mounts <ShipGroupSheet /> alongside the
    existing planet sheet on mobile; both share the
    `effectiveTool === "map"` guard and clear-on-close.

i18n: en + ru both grow ~30 keys under
`game.inspector.ship_group.*`. Adding a key to one without the
other is a TS error (TranslationKey is `keyof typeof en`), so the
Russian mirror stays mandatory.

Tests:
  - inspector-ship-group.test.ts exercises every variant —
    on-planet local, in-hyperspace local, cargo-loaded local,
    foreign, incoming with ETA, incoming with zero speed,
    unidentified, plus the missing-planet `#NN` fallback.
  - tests/e2e/inspector-ship-group.spec.ts is a smoke spec that
    drives the DEV-only synthetic-report loader from /lobby
    through navigation to /games/synthetic-XXX/map.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ui/frontend/src/lib/i18n/locales/en.ts

@@ -245,6 +245,36 @@ const en = {
 	"game.designer.ship_class.preview.range": "range at full load (ly/turn)",
 	"game.designer.ship_class.preview.cargo_capacity": "cargo capacity per ship",
 	"game.designer.ship_class.preview.unavailable": "—",
+
+	"game.inspector.ship_group.kind.local": "your group",
+	"game.inspector.ship_group.kind.other": "other race group",
+	"game.inspector.ship_group.kind.incoming": "incoming group",
+	"game.inspector.ship_group.kind.unidentified": "unidentified group",
+	"game.inspector.ship_group.field.class": "class",
+	"game.inspector.ship_group.field.count": "ships",
+	"game.inspector.ship_group.field.drive": "drive",
+	"game.inspector.ship_group.field.weapons": "weapons",
+	"game.inspector.ship_group.field.shields": "shields",
+	"game.inspector.ship_group.field.cargo_tech": "cargo",
+	"game.inspector.ship_group.field.mass": "mass",
+	"game.inspector.ship_group.field.cargo_load": "cargo aboard",
+	"game.inspector.ship_group.field.location": "location",
+	"game.inspector.ship_group.field.from": "from",
+	"game.inspector.ship_group.field.to": "to",
+	"game.inspector.ship_group.field.distance": "distance remaining",
+	"game.inspector.ship_group.field.speed": "speed (ly/turn)",
+	"game.inspector.ship_group.field.eta": "ETA (turns)",
+	"game.inspector.ship_group.field.fleet": "fleet",
+	"game.inspector.ship_group.field.state": "state",
+	"game.inspector.ship_group.field.coordinates": "coordinates",
+	"game.inspector.ship_group.cargo.col": "colonists",
+	"game.inspector.ship_group.cargo.cap": "industry",
+	"game.inspector.ship_group.cargo.mat": "materials",
+	"game.inspector.ship_group.cargo.emp": "empty",
+	"game.inspector.ship_group.cargo.none": "none",
+	"game.inspector.ship_group.location.in_hyperspace": "in hyperspace",
+	"game.inspector.ship_group.fleet.none": "—",
+	"game.inspector.ship_group.unidentified_no_data": "no data — only the radar blip is known",
 } as const;
 
 export default en;

ui/frontend/src/lib/i18n/locales/ru.ts

@@ -246,6 +246,36 @@ const ru: Record<keyof typeof en, string> = {
 	"game.designer.ship_class.preview.range": "дальность при полной загрузке (св.лет/ход)",
 	"game.designer.ship_class.preview.cargo_capacity": "грузоподъёмность одного корабля",
 	"game.designer.ship_class.preview.unavailable": "—",
+
+	"game.inspector.ship_group.kind.local": "ваша группа",
+	"game.inspector.ship_group.kind.other": "группа другой расы",
+	"game.inspector.ship_group.kind.incoming": "входящая группа",
+	"game.inspector.ship_group.kind.unidentified": "неопознанная группа",
+	"game.inspector.ship_group.field.class": "класс",
+	"game.inspector.ship_group.field.count": "кораблей",
+	"game.inspector.ship_group.field.drive": "двигатели",
+	"game.inspector.ship_group.field.weapons": "оружие",
+	"game.inspector.ship_group.field.shields": "защита",
+	"game.inspector.ship_group.field.cargo_tech": "грузоперевозки",
+	"game.inspector.ship_group.field.mass": "масса",
+	"game.inspector.ship_group.field.cargo_load": "груз на борту",
+	"game.inspector.ship_group.field.location": "расположение",
+	"game.inspector.ship_group.field.from": "из",
+	"game.inspector.ship_group.field.to": "в",
+	"game.inspector.ship_group.field.distance": "оставшееся расстояние",
+	"game.inspector.ship_group.field.speed": "скорость (св.лет/ход)",
+	"game.inspector.ship_group.field.eta": "прибытие (ходов)",
+	"game.inspector.ship_group.field.fleet": "флот",
+	"game.inspector.ship_group.field.state": "состояние",
+	"game.inspector.ship_group.field.coordinates": "координаты",
+	"game.inspector.ship_group.cargo.col": "колонисты",
+	"game.inspector.ship_group.cargo.cap": "промышленность",
+	"game.inspector.ship_group.cargo.mat": "сырьё",
+	"game.inspector.ship_group.cargo.emp": "пусто",
+	"game.inspector.ship_group.cargo.none": "нет",
+	"game.inspector.ship_group.location.in_hyperspace": "в гиперпространстве",
+	"game.inspector.ship_group.fleet.none": "—",
+	"game.inspector.ship_group.unidentified_no_data": "данных нет — известны только координаты",
 };
 
 export default ru;

ui/frontend/src/lib/inspectors/ship-group-sheet.svelte

@@ -0,0 +1,78 @@
+<!--
+Phase 19 mobile bottom-sheet that hosts the ship-group inspector when
+the user is on the map view on a small screen. Mirrors the existing
+`planet-sheet.svelte` layout: hidden via media query above 768 px, and
+mounted by the in-game shell layout only while the active tool is
+`map` so it does not stack on top of the calc / order overlays.
+-->
+<script lang="ts">
+	import type { ReportPlanet } from "../../api/game-state";
+	import { i18n } from "$lib/i18n/index.svelte";
+	import ShipGroup, { type ShipGroupSelection } from "./ship-group.svelte";
+
+	type Props = {
+		selection: ShipGroupSelection | null;
+		planets: ReportPlanet[];
+		onMap: boolean;
+		onClose: () => void;
+	};
+	let { selection, planets, onMap, onClose }: Props = $props();
+</script>
+
+{#if selection !== null && onMap}
+	<section
+		class="sheet"
+		aria-label={i18n.t("game.sidebar.tab.inspector")}
+		data-testid="inspector-ship-group-sheet"
+	>
+		<button
+			type="button"
+			class="close"
+			data-testid="inspector-ship-group-sheet-close"
+			aria-label={i18n.t("game.inspector.sheet_close")}
+			onclick={onClose}
+		>
+			✕
+		</button>
+		<ShipGroup {selection} {planets} />
+	</section>
+{/if}
+
+<style>
+	.sheet {
+		display: none;
+	}
+	@media (max-width: 767.98px) {
+		.sheet {
+			display: block;
+			position: fixed;
+			left: 0;
+			right: 0;
+			bottom: 3.25rem;
+			max-height: calc(100vh - 6rem);
+			overflow-y: auto;
+			background: #14182a;
+			color: #e8eaf6;
+			border-top: 1px solid #2a3150;
+			box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
+			z-index: 40;
+		}
+	}
+	.close {
+		position: absolute;
+		top: 0.4rem;
+		right: 0.4rem;
+		font: inherit;
+		font-size: 1rem;
+		padding: 0.2rem 0.55rem;
+		background: transparent;
+		color: #aab;
+		border: 1px solid #2a3150;
+		border-radius: 3px;
+		cursor: pointer;
+	}
+	.close:hover {
+		color: #e8eaf6;
+		border-color: #6d8cff;
+	}
+</style>

ui/frontend/src/lib/inspectors/ship-group.svelte

@@ -0,0 +1,260 @@
+<!--
+Phase 19 read-only ship-group inspector. Renders the documented field
+set per group variant (local / other / incoming / unidentified). The
+inspector is mounted by the sidebar `inspector-tab.svelte` when the
+selection has `kind === "shipGroup"`, and on the mobile breakpoint by
+the `ship-group-sheet.svelte` overlay.
+
+Phase 20 will fold action buttons (split / send / load / unload /
+modernize / dismantle / transfer / assign-to-fleet) onto the local
+variant — for Phase 19 the inspector is intentionally read-only.
+-->
+<script lang="ts">
+	import type {
+		ReportIncomingShipGroup,
+		ReportLocalShipGroup,
+		ReportOtherShipGroup,
+		ReportPlanet,
+		ReportUnidentifiedShipGroup,
+	} from "../../api/game-state";
+	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
+
+	export type ShipGroupSelection =
+		| { variant: "local"; group: ReportLocalShipGroup }
+		| { variant: "other"; group: ReportOtherShipGroup }
+		| { variant: "incoming"; group: ReportIncomingShipGroup }
+		| { variant: "unidentified"; group: ReportUnidentifiedShipGroup };
+
+	type Props = {
+		selection: ShipGroupSelection;
+		planets: ReportPlanet[];
+	};
+	let { selection, planets }: Props = $props();
+
+	const kindKeyMap: Record<ShipGroupSelection["variant"], TranslationKey> = {
+		local: "game.inspector.ship_group.kind.local",
+		other: "game.inspector.ship_group.kind.other",
+		incoming: "game.inspector.ship_group.kind.incoming",
+		unidentified: "game.inspector.ship_group.kind.unidentified",
+	};
+
+	const cargoLoadKeyMap = {
+		COL: "game.inspector.ship_group.cargo.col",
+		CAP: "game.inspector.ship_group.cargo.cap",
+		MAT: "game.inspector.ship_group.cargo.mat",
+		EMP: "game.inspector.ship_group.cargo.emp",
+	} as const;
+
+	const planetIndex = $derived.by(() => {
+		const m = new Map<number, ReportPlanet>();
+		for (const p of planets) m.set(p.number, p);
+		return m;
+	});
+
+	function planetLabel(number: number): string {
+		const planet = planetIndex.get(number);
+		if (planet === undefined) return `#${number}`;
+		if (planet.name === "" || planet.name === undefined) return `#${number}`;
+		return planet.name;
+	}
+
+	function formatNumber(value: number): string {
+		return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+	}
+
+	function cargoLabel(cargo: "NONE" | "COL" | "CAP" | "MAT" | "EMP"): string {
+		if (cargo === "NONE") {
+			return i18n.t("game.inspector.ship_group.cargo.none");
+		}
+		return i18n.t(cargoLoadKeyMap[cargo]);
+	}
+
+	const kindLabel = $derived(i18n.t(kindKeyMap[selection.variant]));
+</script>
+
+<section
+	class="inspector"
+	data-testid="inspector-ship-group"
+	data-variant={selection.variant}
+>
+	<header>
+		<p class="kind" data-testid="inspector-ship-group-kind">{kindLabel}</p>
+		{#if selection.variant === "local" || selection.variant === "other"}
+			<h3 class="name" data-testid="inspector-ship-group-class">
+				{selection.group.class}
+			</h3>
+		{/if}
+	</header>
+
+	{#if selection.variant === "local" || selection.variant === "other"}
+		{@const g = selection.group}
+		{@const onPlanet = g.origin === null || g.range === null}
+		<dl class="fields">
+			<div class="field" data-testid="inspector-ship-group-field-count">
+				<dt>{i18n.t("game.inspector.ship_group.field.count")}</dt>
+				<dd>{g.count}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-drive">
+				<dt>{i18n.t("game.inspector.ship_group.field.drive")}</dt>
+				<dd>{formatNumber(g.tech.drive)}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-weapons">
+				<dt>{i18n.t("game.inspector.ship_group.field.weapons")}</dt>
+				<dd>{formatNumber(g.tech.weapons)}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-shields">
+				<dt>{i18n.t("game.inspector.ship_group.field.shields")}</dt>
+				<dd>{formatNumber(g.tech.shields)}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-cargo-tech">
+				<dt>{i18n.t("game.inspector.ship_group.field.cargo_tech")}</dt>
+				<dd>{formatNumber(g.tech.cargo)}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-mass">
+				<dt>{i18n.t("game.inspector.ship_group.field.mass")}</dt>
+				<dd>{formatNumber(g.mass)}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-cargo-load">
+				<dt>{i18n.t("game.inspector.ship_group.field.cargo_load")}</dt>
+				<dd>
+					{#if g.cargo === "NONE"}
+						{cargoLabel(g.cargo)}
+					{:else}
+						{cargoLabel(g.cargo)} × {formatNumber(g.load)}
+					{/if}
+				</dd>
+			</div>
+
+			{#if onPlanet}
+				<div class="field" data-testid="inspector-ship-group-field-location">
+					<dt>{i18n.t("game.inspector.ship_group.field.location")}</dt>
+					<dd>{planetLabel(g.destination)}</dd>
+				</div>
+			{:else}
+				<div class="field" data-testid="inspector-ship-group-field-from">
+					<dt>{i18n.t("game.inspector.ship_group.field.from")}</dt>
+					<dd>{planetLabel(g.origin!)}</dd>
+				</div>
+				<div class="field" data-testid="inspector-ship-group-field-to">
+					<dt>{i18n.t("game.inspector.ship_group.field.to")}</dt>
+					<dd>{planetLabel(g.destination)}</dd>
+				</div>
+				<div class="field" data-testid="inspector-ship-group-field-distance">
+					<dt>{i18n.t("game.inspector.ship_group.field.distance")}</dt>
+					<dd>{formatNumber(g.range!)}</dd>
+				</div>
+			{/if}
+
+			{#if selection.variant === "local"}
+				<div class="field" data-testid="inspector-ship-group-field-fleet">
+					<dt>{i18n.t("game.inspector.ship_group.field.fleet")}</dt>
+					<dd>
+						{selection.group.fleet ?? i18n.t("game.inspector.ship_group.fleet.none")}
+					</dd>
+				</div>
+				<div class="field" data-testid="inspector-ship-group-field-state">
+					<dt>{i18n.t("game.inspector.ship_group.field.state")}</dt>
+					<dd>{selection.group.state}</dd>
+				</div>
+			{/if}
+		</dl>
+	{:else if selection.variant === "incoming"}
+		{@const g = selection.group}
+		{@const eta = g.speed > 0 ? Math.ceil(g.distance / g.speed) : null}
+		<dl class="fields">
+			<div class="field" data-testid="inspector-ship-group-field-from">
+				<dt>{i18n.t("game.inspector.ship_group.field.from")}</dt>
+				<dd>{planetLabel(g.origin)}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-to">
+				<dt>{i18n.t("game.inspector.ship_group.field.to")}</dt>
+				<dd>{planetLabel(g.destination)}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-distance">
+				<dt>{i18n.t("game.inspector.ship_group.field.distance")}</dt>
+				<dd>{formatNumber(g.distance)}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-speed">
+				<dt>{i18n.t("game.inspector.ship_group.field.speed")}</dt>
+				<dd>{formatNumber(g.speed)}</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-eta">
+				<dt>{i18n.t("game.inspector.ship_group.field.eta")}</dt>
+				<dd>
+					{eta === null
+						? i18n.t("game.designer.ship_class.preview.unavailable")
+						: eta}
+				</dd>
+			</div>
+			<div class="field" data-testid="inspector-ship-group-field-mass">
+				<dt>{i18n.t("game.inspector.ship_group.field.mass")}</dt>
+				<dd>{formatNumber(g.mass)}</dd>
+			</div>
+		</dl>
+	{:else}
+		<dl class="fields">
+			<div
+				class="field"
+				data-testid="inspector-ship-group-field-coordinates"
+			>
+				<dt>{i18n.t("game.inspector.ship_group.field.coordinates")}</dt>
+				<dd>
+					({formatNumber(selection.group.x)}, {formatNumber(selection.group.y)})
+				</dd>
+			</div>
+		</dl>
+		<p class="hint" data-testid="inspector-ship-group-no-data">
+			{i18n.t("game.inspector.ship_group.unidentified_no_data")}
+		</p>
+	{/if}
+</section>
+
+<style>
+	.inspector {
+		padding: 1rem;
+		font-family: system-ui, sans-serif;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+	header {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+	}
+	.kind {
+		margin: 0;
+		font-size: 0.75rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: #aab;
+	}
+	.name {
+		margin: 0;
+		font-size: 1.05rem;
+	}
+	.fields {
+		margin: 0;
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		row-gap: 0.25rem;
+		column-gap: 0.75rem;
+	}
+	.field {
+		display: contents;
+	}
+	.field dt {
+		color: #aab;
+		font-size: 0.85rem;
+	}
+	.field dd {
+		margin: 0;
+		font-variant-numeric: tabular-nums;
+		font-size: 0.9rem;
+	}
+	.hint {
+		margin: 0;
+		color: #888;
+		font-size: 0.85rem;
+	}
+</style>

ui/frontend/src/lib/sidebar/inspector-tab.svelte

@@ -7,6 +7,12 @@ only planet inspector. A selection that points at a planet missing
 from the current report (e.g. visibility lost between turns) falls
 back to the empty state instead of holding stale data.
 
+Phase 19 widens the dispatch: a `kind === "shipGroup"` selection
+resolves against the matching report array and mounts the read-only
+ship-group inspector. Unresolvable refs (e.g. the chosen index has
+fallen out of the new turn's report) cleanly collapse to the empty
+state — same fallback as a stale planet selection.
+
 The empty-state copy still matches the IA section verbatim — `select
 an object on the map` — so the no-selection experience is unchanged
 from the Phase 10 stub.
@@ -23,6 +29,9 @@ from the Phase 10 stub.
 		type RenderedReportSource,
 	} from "$lib/rendered-report.svelte";
 	import Planet from "$lib/inspectors/planet.svelte";
+	import ShipGroup, {
+		type ShipGroupSelection,
+	} from "$lib/inspectors/ship-group.svelte";
 
 	const renderedReport = getContext<RenderedReportSource | undefined>(
 		RENDERED_REPORT_CONTEXT_KEY,
@@ -38,6 +47,38 @@ from the Phase 10 stub.
 		if (report === undefined || report === null) return null;
 		return report.planets.find((p) => p.number === sel.id) ?? null;
 	});
+	const selectedShipGroup: ShipGroupSelection | null = $derived.by(() => {
+		const sel = selection?.selected;
+		if (sel === undefined || sel === null || sel.kind !== "shipGroup") {
+			return null;
+		}
+		const report = renderedReport?.report;
+		if (report === undefined || report === null) return null;
+		const ref = sel.ref;
+		switch (ref.variant) {
+			case "local": {
+				const group = report.localShipGroups.find((g) => g.id === ref.id);
+				if (group === undefined) return null;
+				return { variant: "local", group };
+			}
+			case "other": {
+				const group = report.otherShipGroups[ref.index];
+				if (group === undefined) return null;
+				return { variant: "other", group };
+			}
+			case "incoming": {
+				const group = report.incomingShipGroups[ref.index];
+				if (group === undefined) return null;
+				return { variant: "incoming", group };
+			}
+			case "unidentified": {
+				const group = report.unidentifiedShipGroups[ref.index];
+				if (group === undefined) return null;
+				return { variant: "unidentified", group };
+			}
+		}
+	});
+
 	const localShipClass = $derived(
 		renderedReport?.report?.localShipClass ?? [],
 	);
@@ -61,6 +102,8 @@ from the Phase 10 stub.
 			{mapHeight}
 			{localPlayerDrive}
 		/>
+	{:else if selectedShipGroup !== null}
+		<ShipGroup selection={selectedShipGroup} planets={allPlanets} />
 	{:else}
 		<h3>{i18n.t("game.sidebar.tab.inspector")}</h3>
 		<p>{i18n.t("game.sidebar.empty.inspector")}</p>

ui/frontend/src/routes/games/[id]/+layout.svelte

@@ -52,6 +52,8 @@ fresh.
 	import Calculator from "$lib/sidebar/calculator-tab.svelte";
 	import Order from "$lib/sidebar/order-tab.svelte";
 	import PlanetSheet from "$lib/inspectors/planet-sheet.svelte";
+	import ShipGroupSheet from "$lib/inspectors/ship-group-sheet.svelte";
+	import type { ShipGroupSelection } from "$lib/inspectors/ship-group.svelte";
 	import type { MobileTool, SidebarTab } from "$lib/sidebar/types";
 	import { GameStateStore, GAME_STATE_CONTEXT_KEY } from "$lib/game-state.svelte";
 	import {
@@ -139,6 +141,35 @@ fresh.
 		if (report === null) return null;
 		return report.planets.find((p) => p.number === sel.id) ?? null;
 	});
+	const selectedShipGroup: ShipGroupSelection | null = $derived.by(() => {
+		const sel = selection.selected;
+		if (sel === null || sel.kind !== "shipGroup") return null;
+		const report = renderedReport.report;
+		if (report === null) return null;
+		const ref = sel.ref;
+		switch (ref.variant) {
+			case "local": {
+				const group = report.localShipGroups.find((g) => g.id === ref.id);
+				if (group === undefined) return null;
+				return { variant: "local", group };
+			}
+			case "other": {
+				const group = report.otherShipGroups[ref.index];
+				if (group === undefined) return null;
+				return { variant: "other", group };
+			}
+			case "incoming": {
+				const group = report.incomingShipGroups[ref.index];
+				if (group === undefined) return null;
+				return { variant: "incoming", group };
+			}
+			case "unidentified": {
+				const group = report.unidentifiedShipGroups[ref.index];
+				if (group === undefined) return null;
+				return { variant: "unidentified", group };
+			}
+		}
+	});
 	const localShipClass = $derived(
 		renderedReport.report?.localShipClass ?? [],
 	);
@@ -296,6 +327,12 @@ fresh.
 		onMap={effectiveTool === "map"}
 		onClose={() => selection.clear()}
 	/>
+	<ShipGroupSheet
+		selection={selectedShipGroup}
+		planets={inspectorPlanets}
+		onMap={effectiveTool === "map"}
+		onClose={() => selection.clear()}
+	/>
 </div>
 
 <style>