ui/phase-13: planet inspector — read-only

Plumbs the map → inspector pathway: a click on a planet selects it
through the new SelectionStore, the sidebar Inspector tab swaps
its empty-state copy for a per-kind read-only field set, and a
mobile-only bottom-sheet mirrors the same content over the map.
Field projection in api/game-state.ts now surfaces every documented
planet field.

ui/frontend/tests/e2e/fixtures/report-fbs.ts

@@ -4,8 +4,12 @@
 // engine container.
 //
 // Phase 11 only renders planets, so the helpers keep the report shape
-// minimal (turn / dimensions / planet vectors). Later phases extend
-// the helper as ships, fleets, sciences, etc. land.
+// minimal (turn / dimensions / planet vectors). Phase 13 extended the
+// fixture with the optional rich planet fields (size, resources,
+// stockpiles, population, industry, colonists, production, free
+// industry) so the inspector e2e can drive the read-only display
+// against realistic values. Later phases extend the helper as ships,
+// fleets, sciences, etc. land.
 
 import { Builder } from "flatbuffers";
 
@@ -22,9 +26,21 @@ export interface PlanetFixture {
 	name: string;
 	x: number;
 	y: number;
+	size?: number;
+	resources?: number;
+	capital?: number;
+	material?: number;
 }
 
-export interface OtherPlanetFixture extends PlanetFixture {
+export interface InhabitedFixture extends PlanetFixture {
+	population?: number;
+	colonists?: number;
+	industry?: number;
+	production?: string;
+	freeIndustry?: number;
+}
+
+export interface OtherPlanetFixture extends InhabitedFixture {
 	owner: string;
 }
 
@@ -32,7 +48,7 @@ export interface ReportFixture {
 	turn: number;
 	mapWidth?: number;
 	mapHeight?: number;
-	localPlanets?: PlanetFixture[];
+	localPlanets?: InhabitedFixture[];
 	otherPlanets?: OtherPlanetFixture[];
 	uninhabitedPlanets?: PlanetFixture[];
 	unidentifiedPlanets?: { number: number; x: number; y: number }[];
@@ -43,28 +59,49 @@ export function buildReportPayload(fixture: ReportFixture): Uint8Array {
 
 	const localOffsets = (fixture.localPlanets ?? []).map((planet) => {
 		const name = builder.createString(planet.name);
+		const production =
+			planet.production !== undefined
+				? builder.createString(planet.production)
+				: null;
 		LocalPlanet.startLocalPlanet(builder);
 		LocalPlanet.addNumber(builder, BigInt(planet.number));
 		LocalPlanet.addX(builder, planet.x);
 		LocalPlanet.addY(builder, planet.y);
 		LocalPlanet.addName(builder, name);
-		LocalPlanet.addSize(builder, 10);
-		LocalPlanet.addResources(builder, 0.5);
-		LocalPlanet.addPopulation(builder, 0);
-		LocalPlanet.addIndustry(builder, 0);
+		LocalPlanet.addSize(builder, planet.size ?? 10);
+		LocalPlanet.addResources(builder, planet.resources ?? 0.5);
+		LocalPlanet.addCapital(builder, planet.capital ?? 0);
+		LocalPlanet.addMaterial(builder, planet.material ?? 0);
+		LocalPlanet.addPopulation(builder, planet.population ?? 0);
+		LocalPlanet.addIndustry(builder, planet.industry ?? 0);
+		LocalPlanet.addColonists(builder, planet.colonists ?? 0);
+		if (production !== null) LocalPlanet.addProduction(builder, production);
+		LocalPlanet.addFreeIndustry(builder, planet.freeIndustry ?? 0);
 		return LocalPlanet.endLocalPlanet(builder);
 	});
 
 	const otherOffsets = (fixture.otherPlanets ?? []).map((planet) => {
 		const name = builder.createString(planet.name);
 		const owner = builder.createString(planet.owner);
+		const production =
+			planet.production !== undefined
+				? builder.createString(planet.production)
+				: null;
 		OtherPlanet.startOtherPlanet(builder);
 		OtherPlanet.addNumber(builder, BigInt(planet.number));
 		OtherPlanet.addX(builder, planet.x);
 		OtherPlanet.addY(builder, planet.y);
 		OtherPlanet.addName(builder, name);
 		OtherPlanet.addOwner(builder, owner);
-		OtherPlanet.addSize(builder, 9);
+		OtherPlanet.addSize(builder, planet.size ?? 9);
+		OtherPlanet.addResources(builder, planet.resources ?? 0.5);
+		OtherPlanet.addCapital(builder, planet.capital ?? 0);
+		OtherPlanet.addMaterial(builder, planet.material ?? 0);
+		OtherPlanet.addPopulation(builder, planet.population ?? 0);
+		OtherPlanet.addIndustry(builder, planet.industry ?? 0);
+		OtherPlanet.addColonists(builder, planet.colonists ?? 0);
+		if (production !== null) OtherPlanet.addProduction(builder, production);
+		OtherPlanet.addFreeIndustry(builder, planet.freeIndustry ?? 0);
 		return OtherPlanet.endOtherPlanet(builder);
 	});
 
@@ -76,7 +113,10 @@ export function buildReportPayload(fixture: ReportFixture): Uint8Array {
 			UninhabitedPlanet.addX(builder, planet.x);
 			UninhabitedPlanet.addY(builder, planet.y);
 			UninhabitedPlanet.addName(builder, name);
-			UninhabitedPlanet.addSize(builder, 6);
+			UninhabitedPlanet.addSize(builder, planet.size ?? 6);
+			UninhabitedPlanet.addResources(builder, planet.resources ?? 0.5);
+			UninhabitedPlanet.addCapital(builder, planet.capital ?? 0);
+			UninhabitedPlanet.addMaterial(builder, planet.material ?? 0);
 			return UninhabitedPlanet.endUninhabitedPlanet(builder);
 		},
 	);

ui/frontend/tests/e2e/game-shell-inspector.spec.ts

@@ -0,0 +1,223 @@
+// Phase 13 end-to-end coverage for the planet inspector. Boots an
+// authenticated session and a mocked gateway with a single local
+// planet placed at the world centre, navigates to the map view, and
+// drives a real canvas click into the renderer's `clicked` event.
+// On desktop the sidebar inspector tab swaps from the empty state to
+// the planet view; on the mobile project the bottom-sheet appears
+// and the close button clears it.
+
+import { fromJson, type JsonValue } from "@bufbuild/protobuf";
+import { expect, test, type Page } from "@playwright/test";
+import { ByteBuffer } from "flatbuffers";
+
+import { ExecuteCommandRequestSchema } from "../../src/proto/galaxy/gateway/v1/edge_gateway_pb";
+import { UUID } from "../../src/proto/galaxy/fbs/common";
+import { GameReportRequest } from "../../src/proto/galaxy/fbs/report";
+import { forgeExecuteCommandResponseJson } from "./fixtures/sign-response";
+import {
+	buildMyGamesListPayload,
+	type GameFixture,
+} from "./fixtures/lobby-fbs";
+import { buildReportPayload } from "./fixtures/report-fbs";
+
+const SESSION_ID = "phase-13-inspector-session";
+const GAME_ID = "13131313-1313-1313-1313-131313131313";
+const WORLD = 4000;
+const CENTRE = WORLD / 2;
+
+interface MockOpts {
+	currentTurn: number;
+	report: Parameters<typeof buildReportPayload>[0];
+}
+
+async function mockGateway(page: Page, opts: MockOpts): Promise<void> {
+	const game: GameFixture = {
+		gameId: GAME_ID,
+		gameName: "Phase 13 Game",
+		gameType: "private",
+		status: "running",
+		ownerUserId: "user-1",
+		minPlayers: 2,
+		maxPlayers: 8,
+		enrollmentEndsAtMs: BigInt(Date.now() + 86_400_000),
+		createdAtMs: BigInt(Date.now() - 86_400_000),
+		updatedAtMs: BigInt(Date.now()),
+		currentTurn: opts.currentTurn,
+	};
+
+	await page.route(
+		"**/galaxy.gateway.v1.EdgeGateway/ExecuteCommand",
+		async (route) => {
+			const reqText = route.request().postData();
+			if (reqText === null) {
+				await route.fulfill({ status: 400 });
+				return;
+			}
+			const req = fromJson(
+				ExecuteCommandRequestSchema,
+				JSON.parse(reqText) as JsonValue,
+			);
+
+			let resultCode = "ok";
+			let payload: Uint8Array;
+			switch (req.messageType) {
+				case "lobby.my.games.list":
+					payload = buildMyGamesListPayload([game]);
+					break;
+				case "user.games.report": {
+					// Drain the request to keep the decoder happy even though
+					// we ignore the turn — the fixture serves a single snapshot.
+					GameReportRequest.getRootAsGameReportRequest(
+						new ByteBuffer(req.payloadBytes),
+					).gameId(new UUID());
+					payload = buildReportPayload(opts.report);
+					break;
+				}
+				default:
+					resultCode = "internal_error";
+					payload = new Uint8Array();
+			}
+
+			const body = await forgeExecuteCommandResponseJson({
+				requestId: req.requestId,
+				timestampMs: BigInt(Date.now()),
+				resultCode,
+				payloadBytes: payload,
+			});
+			await route.fulfill({
+				status: 200,
+				contentType: "application/json",
+				body,
+			});
+		},
+	);
+
+	await page.route(
+		"**/galaxy.gateway.v1.EdgeGateway/SubscribeEvents",
+		async () => {
+			await new Promise<void>(() => {});
+		},
+	);
+}
+
+async function bootSession(page: Page): Promise<void> {
+	await page.goto("/__debug/store");
+	await expect(page.getByTestId("debug-store-ready")).toBeVisible();
+	await page.waitForFunction(() => window.__galaxyDebug?.ready === true);
+	await page.evaluate(() => window.__galaxyDebug!.clearSession());
+	await page.evaluate(
+		(id) => window.__galaxyDebug!.setDeviceSessionId(id),
+		SESSION_ID,
+	);
+}
+
+async function setupShell(page: Page): Promise<void> {
+	await mockGateway(page, {
+		currentTurn: 4,
+		report: {
+			turn: 4,
+			mapWidth: WORLD,
+			mapHeight: WORLD,
+			localPlanets: [
+				{
+					number: 17,
+					name: "Galactica",
+					x: CENTRE,
+					y: CENTRE,
+					size: 1000,
+					resources: 10,
+					capital: 0,
+					material: 0,
+					population: 850,
+					colonists: 25,
+					industry: 700,
+					production: "drive",
+					freeIndustry: 175,
+				},
+			],
+		},
+	});
+	await bootSession(page);
+	await page.goto(`/games/${GAME_ID}/map`);
+	await expect(page.getByTestId("active-view-map")).toHaveAttribute(
+		"data-status",
+		"ready",
+	);
+	await expect(page.getByTestId("map-canvas-wrap")).toHaveAttribute(
+		"data-planet-count",
+		"1",
+	);
+}
+
+async function clickCanvasCentre(page: Page): Promise<void> {
+	const canvas = page.locator("canvas");
+	const box = await canvas.boundingBox();
+	expect(box).not.toBeNull();
+	if (box === null) throw new Error("canvas has no bounding box");
+	const cx = box.x + box.width / 2;
+	const cy = box.y + box.height / 2;
+	await page.mouse.click(cx, cy);
+}
+
+test("clicking a planet on the map shows it in the desktop inspector tab", async ({
+	page,
+}, testInfo) => {
+	test.skip(
+		testInfo.project.name.startsWith("chromium-mobile"),
+		"sidebar is hidden on mobile breakpoint",
+	);
+	await setupShell(page);
+
+	// Empty state before any selection.
+	const sidebar = page.getByTestId("sidebar-tool-inspector");
+	await expect(sidebar).toContainText("select an object on the map");
+
+	await clickCanvasCentre(page);
+
+	// Both the sidebar inspector and the bottom-sheet receive the
+	// same selection — the sheet is hidden by CSS at the desktop
+	// breakpoint but still mounted in the DOM, so the assertions
+	// scope explicitly to the sidebar to avoid the strict-mode
+	// duplicate-locator trap.
+	const inspector = sidebar.getByTestId("inspector-planet");
+	await expect(inspector).toBeVisible();
+	await expect(inspector).toHaveAttribute("data-planet-id", "17");
+	await expect(sidebar.getByTestId("inspector-planet-name")).toHaveText(
+		"Galactica",
+	);
+	await expect(
+		sidebar.getByTestId("inspector-planet-field-population"),
+	).toContainText("850");
+	await expect(
+		sidebar.getByTestId("inspector-planet-field-industry"),
+	).toContainText("700");
+	await expect(
+		sidebar.getByTestId("inspector-planet-field-production"),
+	).toContainText("drive");
+});
+
+test("clicking a planet on mobile raises the bottom-sheet, close clears it", async ({
+	page,
+}, testInfo) => {
+	test.skip(
+		!testInfo.project.name.startsWith("chromium-mobile"),
+		"sheet is mobile-only",
+	);
+	await setupShell(page);
+
+	// No sheet before the click.
+	await expect(page.getByTestId("inspector-planet-sheet")).toHaveCount(0);
+
+	await clickCanvasCentre(page);
+
+	const sheet = page.getByTestId("inspector-planet-sheet");
+	await expect(sheet).toBeVisible();
+	const inspector = sheet.getByTestId("inspector-planet");
+	await expect(inspector).toHaveAttribute("data-planet-id", "17");
+	await expect(sheet.getByTestId("inspector-planet-name")).toHaveText(
+		"Galactica",
+	);
+
+	await page.getByTestId("inspector-planet-sheet-close").click();
+	await expect(page.getByTestId("inspector-planet-sheet")).toHaveCount(0);
+});