feat(ui): F8-05 — game-mode chrome cleanup + inspector compact rows (#48)

Drains six F8 polish items (parent #43) in one feature:

а) Chrome cleanup
- п.6 — remove the AccountMenu (settings/sessions/theme/language/logout
  ∼ rudimentary in-game) and replace it with a single icon-button
  light/dark theme toggle. The toggle flips an in-memory `theme.override`;
  game-shell unmount calls `theme.clearOverride()` so the lobby (and
  any re-entry) re-projects the persisted lobby choice.
- п.8 — remove the wrap-scrolling radio from the map gear popover. The
  per-game `wrapMode` store and the renderer's no-wrap path stay in
  place for a future engine-side topology feature; only the UI surface
  is dropped (wrap is a server-side concept, not a per-session UI
  affordance).

б) Inspector compact rows (single idiom: select + ✓ apply / ✗ cancel,
or contextual edit/remove/add)
- п.13 — planet name is now click-to-edit: clicking the name opens an
  inline `<input>` + ✓ confirm icon; Escape cancels; the explicit
  Rename action button and Cancel button are gone.
- п.14 — production becomes one row: primary `<select>` picks
  industry/materials/research/ship, conditional secondary `<select>`
  picks the target (tech / science / ship class) for research and
  ship contexts. Apply is gated until row state differs from the
  planet's current effective production; auto-submit-on-click is
  replaced by the apply-gate.
- п.16 — cargo routes collapse to one row: a single dropdown
  (COL/CAP/MAT/EMP plus a placeholder that absorbs the old section
  title) and contextual action buttons (add / edit + remove) to the
  right. After a successful pick or remove the dropdown stays on the
  type the user just acted on.
- п.32 — stationed ship groups hoist the race column into a dropdown
  above the table. The dropdown seeds with the player's own race when
  local groups are stationed here, otherwise the first race
  alphabetically; rendered only when more than one race is in orbit.
  The race column is dropped in both single- and multi-race modes —
  the dropdown's value already names the active race.

Tests: unit and Playwright e2e updated for every changed test-id and
flow; new coverage added for `theme.override`, the in-game toggle, the
apply-gate behaviour, and the stationed-race dropdown. i18n keys for
the removed menu items, the wrap radios, the cargo title, and the
explicit `rename.cancel` are dropped from both locales; new
`game.shell.theme_toggle.*`, `production.main/target.*`,
`production.apply/cancel`, `cargo.placeholder`, and
`ship_groups.race_filter.aria` keys land.

Docs synced: `docs/FUNCTIONAL.md` §6.7 + `docs/FUNCTIONAL_ru.md`
mirror drop the torus / no-wrap radio mention; `ui/docs/design-system.md`
documents the lobby-owned persisted picker + the in-game ephemeral
override channel.

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

ui/frontend/tests/e2e/a11y-keyboard.spec.ts

@@ -44,17 +44,17 @@ test.describe("keyboard navigation", () => {
 		await expect(page.locator("#active-view-host")).toBeFocused();
 	});
 
-	test("Escape closes the account menu and returns focus to its trigger", async ({
-		page,
-	}) => {
+	test("game-mode theme toggle is keyboard activatable", async ({ page }) => {
 		await bootShell(page);
-		await page.getByTestId("account-menu-trigger").click();
-		await expect(page.getByTestId("account-menu-list")).toBeVisible();
-		// Move focus into the menu, then dismiss with Escape.
-		await page.getByTestId("account-menu-theme-select").focus();
-		await page.keyboard.press("Escape");
-		await expect(page.getByTestId("account-menu-list")).toBeHidden();
-		await expect(page.getByTestId("account-menu-trigger")).toBeFocused();
+		const toggle = page.getByTestId("game-mode-theme-toggle");
+		await toggle.focus();
+		await expect(toggle).toBeFocused();
+		const before = await toggle.getAttribute("data-theme");
+		await page.keyboard.press("Enter");
+		const after = await toggle.getAttribute("data-theme");
+		expect(after).not.toBe(before);
+		// The toggle keeps focus across an activation.
+		await expect(toggle).toBeFocused();
 	});
 
 	test("sidebar tabs move with the arrow keys (roving)", async ({ page }) => {

ui/frontend/tests/e2e/cargo-routes.spec.ts

@@ -394,9 +394,8 @@ test("cargo-routes flow: pick a destination, arrow appears, reload restores", as
 	await expect(sidebar.getByTestId("inspector-planet-name")).toHaveText(
 		SOURCE_PLANET.name,
 	);
-	await expect(
-		sidebar.getByTestId("inspector-planet-cargo-slot-col-empty"),
-	).toBeVisible();
+	const typeSelect = sidebar.getByTestId("inspector-planet-cargo-type");
+	await typeSelect.selectOption("COL");
 
 	// Add a COL route. Expect pick-mode to open with `reachableIds`
 	// covering only the two near planets.
@@ -470,6 +469,7 @@ test("cargo-routes flow: pick a destination, arrow appears, reload restores", as
 	});
 
 	// Add a CAP route to confirm slots coexist.
+	await typeSelect.selectOption("CAP");
 	await page
 		.getByTestId("inspector-planet-cargo-slot-cap-add")
 		.first()
@@ -495,12 +495,13 @@ test("cargo-routes flow: pick a destination, arrow appears, reload restores", as
 		.toBe(6);
 
 	// Remove the COL route.
+	await typeSelect.selectOption("COL");
 	await page
 		.getByTestId("inspector-planet-cargo-slot-col-remove")
 		.first()
 		.click();
 	await expect(
-		page.getByTestId("inspector-planet-cargo-slot-col-empty").first(),
+		page.getByTestId("inspector-planet-cargo-slot-col-add").first(),
 	).toBeVisible({ timeout: 10000 });
 	await expect
 		.poll(() => handle.lastRouteRemove, { timeout: 10000 })

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

@@ -52,7 +52,7 @@ test("shell mounts with header / sidebar / active-view chrome", async ({
 		"turn",
 	);
 	await expect(page.getByTestId("view-menu-trigger")).toBeVisible();
-	await expect(page.getByTestId("account-menu-trigger")).toBeVisible();
+	await expect(page.getByTestId("game-mode-theme-toggle")).toBeVisible();
 });
 
 test("header view-menu navigates to every active view", async ({ page }) => {

ui/frontend/tests/e2e/map-toggles.spec.ts

@@ -9,8 +9,6 @@
 //     flag mirroring the renderer's hide set. The spec counts the
 //     visible-foreign-planet primitives, etc.
 //   * `getMapFog()` — the current visibility-fog circle list.
-//   * `getMapCamera()` — the wrap-mode test reads the centre before
-//     and after the flip to confirm camera preservation.
 //   * `getMapRenderCount()` — painted-frame counter used by the
 //     render-on-demand specs at the bottom of this file: an idle map
 //     must not keep repainting, and a released drag must not coast
@@ -330,48 +328,6 @@ test("visibility fog toggles between the LOCAL-planet circle list and an empty o
 	);
 });
 
-test("wrap mode radios flip the renderer and the camera centre survives", async ({
-	page,
-}) => {
-	await mockGateway(page, { currentTurn: 1 });
-	await bootSession(page);
-	await openGame(page);
-
-	// Confirm the renderer starts in torus mode.
-	await page.waitForFunction(
-		() => window.__galaxyDebug?.getMapMode?.() === "torus",
-	);
-	const initial = await page.evaluate(() =>
-		window.__galaxyDebug!.getMapCamera!(),
-	);
-	expect(initial).not.toBeNull();
-	const startCentre = initial!.camera;
-
-	await page.getByTestId("map-toggles-trigger").click();
-	await page.getByTestId("map-toggles-wrap-no-wrap").click();
-
-	// `setWrapMode` triggers a full Pixi remount; wait for the
-	// renderer to settle into the new mode and the debug surface to
-	// re-register before reading the camera. The mode provider is
-	// re-bound inside `runSerializedMount` after `createRenderer`
-	// resolves, so observing `getMapMode() === "no-wrap"` is the
-	// canonical "remount complete" signal.
-	await page.waitForFunction(
-		() => window.__galaxyDebug?.getMapMode?.() === "no-wrap",
-	);
-
-	const after = await page.evaluate(() =>
-		window.__galaxyDebug!.getMapCamera!(),
-	);
-	expect(after).not.toBeNull();
-	expect(
-		Math.abs(after!.camera.centerX - startCentre.centerX),
-	).toBeLessThanOrEqual(1);
-	expect(
-		Math.abs(after!.camera.centerY - startCentre.centerY),
-	).toBeLessThanOrEqual(1);
-});
-
 test("toggle state persists across a page reload", async ({ page }) => {
 	await mockGateway(page, { currentTurn: 1 });
 	await bootSession(page);

ui/frontend/tests/e2e/order-sync.spec.ts

@@ -263,7 +263,7 @@ async function clickPlanetCentre(page: Page): Promise<void> {
 async function startRename(page: Page, newName: string): Promise<void> {
 	await clickPlanetCentre(page);
 	const sidebar = page.getByTestId("sidebar-tool-inspector");
-	await sidebar.getByTestId("inspector-planet-rename-action").click();
+	await sidebar.getByTestId("inspector-planet-name").click();
 	const input = sidebar.getByTestId("inspector-planet-rename-input");
 	await input.fill(newName);
 	await sidebar.getByTestId("inspector-planet-rename-confirm").click();

ui/frontend/tests/e2e/planet-production.spec.ts

@@ -301,16 +301,22 @@ test("switching production three times collapses to one auto-synced row", async
 	const sidebar = page.getByTestId("sidebar-tool-inspector");
 	await expect(sidebar.getByTestId("inspector-planet-name")).toHaveText("Earth");
 
-	// Initial state: report.production = "Drive" → research segment is
-	// active, sub-row reveals Drive as the highlighted tech.
-	await expect(
-		sidebar.getByTestId("inspector-planet-production-segment-research"),
-	).toHaveClass(/active/);
+	const mainSelect = sidebar.getByTestId("inspector-planet-production-main");
+	const targetSelect = sidebar.getByTestId(
+		"inspector-planet-production-target",
+	);
+	const applyBtn = sidebar.getByTestId("inspector-planet-production-apply");
 
-	// Click 1: Industry → CAP
-	await sidebar
-		.getByTestId("inspector-planet-production-segment-industry")
-		.click();
+	// Initial state: report.production = "Drive" → main is "research"
+	// and the target is "DRIVE"; both apply/cancel start inert.
+	await expect(mainSelect).toHaveValue("research");
+	await expect(targetSelect).toHaveValue("DRIVE");
+	await expect(applyBtn).toBeDisabled();
+
+	// Pick 1: Industry + ✓ → CAP
+	await mainSelect.selectOption("industry");
+	await expect(applyBtn).toBeEnabled();
+	await applyBtn.click();
 	await page.getByTestId("sidebar-tab-order").click();
 	const orderTool = page.getByTestId("sidebar-tool-order");
 	await expect(orderTool.getByTestId("order-list").locator("li")).toHaveCount(
@@ -323,11 +329,10 @@ test("switching production three times collapses to one auto-synced row", async
 		"applied",
 	);
 
-	// Click 2: Materials → MAT (replaces CAP via collapse)
+	// Pick 2: Materials + ✓ → MAT (replaces CAP via collapse)
 	await page.getByTestId("sidebar-tab-inspector").click();
-	await sidebar
-		.getByTestId("inspector-planet-production-segment-materials")
-		.click();
+	await mainSelect.selectOption("materials");
+	await applyBtn.click();
 	await page.getByTestId("sidebar-tab-order").click();
 	await expect(orderTool.getByTestId("order-list").locator("li")).toHaveCount(
 		1,
@@ -336,14 +341,11 @@ test("switching production three times collapses to one auto-synced row", async
 		"Material",
 	);
 
-	// Click 3: Build Ship → expand sub-row → Scout (replaces MAT)
+	// Pick 3: Build Ship → target select appears → Scout + ✓ (replaces MAT)
 	await page.getByTestId("sidebar-tab-inspector").click();
-	await sidebar
-		.getByTestId("inspector-planet-production-segment-ship")
-		.click();
-	await sidebar
-		.getByTestId(`inspector-planet-production-ship-${SHIP_CLASS}`)
-		.click();
+	await mainSelect.selectOption("ship");
+	await targetSelect.selectOption(SHIP_CLASS);
+	await applyBtn.click();
 	await page.getByTestId("sidebar-tab-order").click();
 	await expect(orderTool.getByTestId("order-list").locator("li")).toHaveCount(
 		1,

ui/frontend/tests/e2e/rename-planet.spec.ts

@@ -245,7 +245,7 @@ test("rename a seeded planet auto-syncs and the overlay survives reload", async
 	const sidebar = page.getByTestId("sidebar-tool-inspector");
 	await expect(sidebar.getByTestId("inspector-planet-name")).toHaveText("Earth");
 
-	await sidebar.getByTestId("inspector-planet-rename-action").click();
+	await sidebar.getByTestId("inspector-planet-name").click();
 	const input = sidebar.getByTestId("inspector-planet-rename-input");
 	await input.fill("New-Earth");
 	await sidebar.getByTestId("inspector-planet-rename-confirm").click();
@@ -312,7 +312,7 @@ test("rejected submit keeps the old name and surfaces the failure", async ({
 	);
 	await clickPlanetCentre(page);
 	const sidebar = page.getByTestId("sidebar-tool-inspector");
-	await sidebar.getByTestId("inspector-planet-rename-action").click();
+	await sidebar.getByTestId("inspector-planet-name").click();
 	await sidebar.getByTestId("inspector-planet-rename-input").fill("Mars-2");
 	await sidebar.getByTestId("inspector-planet-rename-confirm").click();
 

ui/frontend/tests/e2e/sciences.spec.ts

@@ -419,23 +419,28 @@ test("planet production picker exposes user sciences in the Research sub-row", a
 	const sidebar = page.getByTestId("sidebar-tool-inspector");
 	await expect(sidebar.getByTestId("inspector-planet-name")).toHaveText("Earth");
 
-	// Expand the Research segment.
-	await sidebar
-		.getByTestId("inspector-planet-production-segment-research")
-		.click();
+	const mainSelect = sidebar.getByTestId("inspector-planet-production-main");
+	await mainSelect.selectOption("research");
 
-	// Tech buttons + the user's science button are both rendered.
-	await expect(
-		sidebar.getByTestId("inspector-planet-production-research-drive"),
-	).toBeVisible();
-	const scienceButton = sidebar.getByTestId(
-		"inspector-planet-production-science-FirstStep",
+	// Tech options and the user's science option are both rendered.
+	const targetSelect = sidebar.getByTestId(
+		"inspector-planet-production-target",
 	);
-	await expect(scienceButton).toBeVisible();
+	await expect(
+		targetSelect.locator(
+			'[data-testid="inspector-planet-production-target-option-drive"]',
+		),
+	).toHaveCount(1);
+	await expect(
+		targetSelect.locator(
+			'[data-testid="inspector-planet-production-target-option-science-FirstStep"]',
+		),
+	).toHaveCount(1);
 
-	// Click the science → setProductionType("SCIENCE", "FirstStep")
-	// lands in the draft and auto-syncs.
-	await scienceButton.click();
+	// Select the science target + ✓ → setProductionType("SCIENCE",
+	// "FirstStep") lands in the draft and auto-syncs.
+	await targetSelect.selectOption("FirstStep");
+	await sidebar.getByTestId("inspector-planet-production-apply").click();
 	await expect.poll(() => handle.lastProduce?.subject).toBe("FirstStep");
 	expect(handle.lastProduce?.planetNumber).toBe(1);
 });