ui/phase-27: battle viewer (radial scene, playback, map markers)

Engine wire change: Report.battle switched from []uuid.UUID to
[]BattleSummary{id, planet, shots} so the map can place battle
markers without N extra fetches. FBS schema + generated Go/TS
regenerated; transcoder + report controller updated; openapi
adds the BattleSummary schema with a freeze test.

Backend gateway forwards engine GET /api/v1/battle/:turn/:uuid as
/api/v1/user/games/{game_id}/battles/{turn}/{battle_id} (handler
plus engineclient.FetchBattle, contract test stub, openapi spec).

UI:
- BattleViewer (lib/battle-player/) is a logically isolated SVG
  radial scene that consumes a BattleReport prop. Planet at the
  centre, races on the outer ring at equal angular spacing, race
  clusters by (race, className) with <class>:<numLeft> labels;
  observer groups (inBattle: false) are not drawn; eliminated
  races drop out and survivors re-distribute on the next frame.
- Shot line per frame: red on destroyed, green otherwise; erased
  on the next frame. Playback controls: play/pause + step ± +
  rewind + 1x/2x/4x speed (400/200/100 ms per frame).
- Page wrapper (lib/active-view/battle.svelte) loads BattleReport
  via api/battle-fetch.ts; synthetic-gameId prefix routes to a
  fixture loader, otherwise REST through the gateway. Always-
  visible <ol> text protocol satisfies the accessibility ask.
- section-battles.svelte links every battle UUID into the viewer.
- map/battle-markers.ts: yellow X cross of 2 LinePrim through the
  corners of the planet's circumscribed square (stroke width
  clamps from 1 px at 1 shot to 5 px at 100+ shots); bombing
  marker is a stroke-only ring (yellow when damaged, red when
  wiped). Wired into state-binding.ts; click handler dispatches
  battle clicks to the viewer and bombing clicks to the matching
  Reports row.
- i18n keys for the viewer in en + ru.

Docs: ui/docs/battle-viewer-ux.md, FUNCTIONAL.md §6.5 + ru
mirror, ui/PLAN.md Phase 27 decisions + deferred TODOs (push
event, richer class visuals, animated re-distribution).

Tests: Vitest unit (radial layout + timeline frame builder +
marker stroke formula + marker primitives), Playwright e2e for
the viewer (Reports link → viewer, playback step, not-found),
backend engineclient FetchBattle (200 / 404 / bad input), engine
openapi freezes (BattleReport, BattleReportGroup,
BattleActionReport, BattleSummary, Report.battle items).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/frontend/src/api/battle-fetch.ts

@@ -0,0 +1,88 @@
+// Battle-report fetcher used by the Battle Viewer page.
+//
+// Phase 27 ships the BattleViewer as a logically isolated component
+// that accepts a `BattleReport` matching `pkg/model/report/battle.go`.
+// This module owns the type mirror and a single `fetchBattle` entry
+// point. In synthetic mode (development & e2e fixtures), the loader
+// falls back to a local fixture so the UI tests don't depend on a
+// running engine; otherwise it issues a real `GET` against the
+// backend gateway route added in Phase 27 step 3.
+
+import { isSyntheticGameId } from "./synthetic-report";
+import { lookupSyntheticBattle } from "./synthetic-battle";
+
+/**
+ * BattleReport is the wire shape returned by the engine endpoint
+ * `GET /api/v1/battle/:turn/:uuid` and forwarded by the backend
+ * gateway as `GET /api/v1/user/games/{game_id}/battles/{turn}/{battle_id}`.
+ * Fields mirror `pkg/model/report/battle.go`.
+ */
+export interface BattleReport {
+	id: string;
+	planet: number;
+	planetName: string;
+	races: Record<string, string>;
+	ships: Record<string, BattleReportGroup>;
+	protocol: BattleActionReport[];
+}
+
+export interface BattleReportGroup {
+	race: string;
+	className: string;
+	tech: Record<string, number>;
+	num: number;
+	numLeft: number;
+	loadType: string;
+	loadQuantity: number;
+	inBattle: boolean;
+}
+
+export interface BattleActionReport {
+	a: number;
+	sa: number;
+	d: number;
+	sd: number;
+	x: boolean;
+}
+
+export class BattleFetchError extends Error {
+	constructor(public readonly status: number, message: string) {
+		super(message);
+		this.name = "BattleFetchError";
+	}
+}
+
+/**
+ * fetchBattle returns the `BattleReport` for the supplied game, turn,
+ * and battle id. In synthetic-report mode (DEV / e2e) the lookup is
+ * served from `synthetic-battle.ts`; otherwise the function calls the
+ * backend gateway route. Throws `BattleFetchError` with the upstream
+ * status on validation or transport failure.
+ */
+export async function fetchBattle(
+	gameId: string,
+	turn: number,
+	battleId: string,
+): Promise<BattleReport> {
+	if (isSyntheticGameId(gameId)) {
+		const fixture = lookupSyntheticBattle(battleId);
+		if (fixture === null) {
+			throw new BattleFetchError(404, "battle not found");
+		}
+		return fixture;
+	}
+	const path = `/api/v1/user/games/${encodeURIComponent(gameId)}/battles/${turn}/${encodeURIComponent(battleId)}`;
+	const response = await fetch(path, {
+		headers: { Accept: "application/json" },
+	});
+	if (response.status === 404) {
+		throw new BattleFetchError(404, "battle not found");
+	}
+	if (!response.ok) {
+		throw new BattleFetchError(
+			response.status,
+			`battle fetch failed: ${response.status}`,
+		);
+	}
+	return (await response.json()) as BattleReport;
+}

ui/frontend/src/api/game-state.ts

@@ -382,6 +382,18 @@ export interface ReportBombing {
  * mirrors the producing planet's free industry. Stable order: sorted
  * by `(planetNumber, class)`.
  */
+/**
+ * ReportBattle is one battle summary in the current turn. Carries the
+ * battle UUID, planet number, and shot count — enough to render a
+ * battle marker on the map and to link into the Battle Viewer without
+ * fetching the full BattleReport.
+ */
+export interface ReportBattle {
+	id: string;
+	planet: number;
+	shots: number;
+}
+
 export interface ReportShipProduction {
 	planetNumber: number;
 	class: string;
@@ -524,11 +536,17 @@ export interface GameReport {
 	 */
 	otherShipClass: ReportOtherShipClass[];
 	/**
-	 * battleIds is the list of battle UUIDs the engine recorded for
-	 * the current turn. Phase 23 renders them as inactive
-	 * monospace identifiers; Phase 27 will turn them into navigation
-	 * targets once the battle viewer lands. Empty when no battles
-	 * occurred last turn.
+	 * battles is the list of battle summaries the engine recorded for
+	 * the current turn. Each entry carries the battle UUID, the planet
+	 * it happened on, and the number of shots exchanged. The Reports
+	 * View uses `id` to link into the Battle Viewer; the map renderer
+	 * uses `planet` to locate the marker and `shots` to scale its
+	 * stroke. Empty when no battles occurred last turn.
+	 */
+	battles: ReportBattle[];
+	/**
+	 * battleIds is a convenience derived list of UUIDs from `battles`,
+	 * preserved for legacy callers (Phase 23 report section, fixtures).
 	 */
 	battleIds: string[];
 	/**
@@ -700,7 +718,8 @@ function decodeReport(report: Report): GameReport {
 	const localFleets = decodeLocalFleets(report);
 	const otherScience = decodeOtherScience(report);
 	const otherShipClass = decodeOtherShipClass(report);
-	const battleIds = decodeBattleIds(report);
+	const battles = decodeBattles(report);
+	const battleIds = battles.map((b) => b.id);
 	const bombings = decodeBombings(report);
 	const shipProductions = decodeShipProductions(report);
 
@@ -730,6 +749,7 @@ function decodeReport(report: Report): GameReport {
 		players,
 		otherScience,
 		otherShipClass,
+		battles,
 		battleIds,
 		bombings,
 		shipProductions,
@@ -1153,13 +1173,18 @@ function decodeOtherShipClass(report: Report): ReportOtherShipClass[] {
 	return out;
 }
 
-function decodeBattleIds(report: Report): string[] {
-	const out: string[] = [];
+function decodeBattles(report: Report): ReportBattle[] {
+	const out: ReportBattle[] = [];
 	for (let i = 0; i < report.battleLength(); i++) {
-		const uuid = report.battle(i);
-		const value = uuidStringFromFB(uuid);
-		if (value === null) continue;
-		out.push(value);
+		const summary = report.battle(i);
+		if (summary === null) continue;
+		const id = uuidStringFromFB(summary.id());
+		if (id === null) continue;
+		out.push({
+			id,
+			planet: Number(summary.planet()),
+			shots: Number(summary.shots()),
+		});
 	}
 	return out;
 }
@@ -1439,6 +1464,7 @@ export function applyOrderOverlay(
 		players: report.players ?? [],
 		otherScience: report.otherScience ?? [],
 		otherShipClass: report.otherShipClass ?? [],
+		battles: report.battles ?? [],
 		battleIds: report.battleIds ?? [],
 		bombings: report.bombings ?? [],
 		shipProductions: report.shipProductions ?? [],

ui/frontend/src/api/synthetic-battle.ts

@@ -0,0 +1,37 @@
+// Synthetic battle reports for DEV / e2e mode.
+//
+// Mirrors the shape of `pkg/model/report/battle.go` so the
+// BattleViewer can be exercised without a running engine. Fixtures
+// are registered by battle UUID; the synthetic-report loader fills
+// the report's `battles[]` with these same UUIDs so the report ↔
+// battle link is consistent.
+
+import type { BattleReport } from "./battle-fetch";
+
+const SYNTHETIC_BATTLES = new Map<string, BattleReport>();
+
+/**
+ * registerSyntheticBattle adds a fixture battle to the in-memory map
+ * keyed by its `id`. Used by the synthetic-report DEV loader and by
+ * Vitest unit tests that need a deterministic BattleReport without a
+ * live engine.
+ */
+export function registerSyntheticBattle(report: BattleReport): void {
+	SYNTHETIC_BATTLES.set(report.id, report);
+}
+
+/**
+ * lookupSyntheticBattle returns the fixture stored under `battleId`,
+ * or `null` if nothing was registered (mirrors the engine's 404).
+ */
+export function lookupSyntheticBattle(battleId: string): BattleReport | null {
+	return SYNTHETIC_BATTLES.get(battleId) ?? null;
+}
+
+/**
+ * resetSyntheticBattles clears every registered fixture. Test
+ * harnesses call this between cases to avoid bleed-through.
+ */
+export function resetSyntheticBattles(): void {
+	SYNTHETIC_BATTLES.clear();
+}

ui/frontend/src/api/synthetic-report.ts

@@ -173,6 +173,12 @@ interface SyntheticOtherShipClass extends SyntheticShipClass {
 	mass?: number;
 }
 
+interface SyntheticBattle {
+	id?: string;
+	planet?: number;
+	shots?: number;
+}
+
 interface SyntheticBombing {
 	planet?: number; // wire field "number"
 	planetName?: string; // wire field "planetName"
@@ -219,7 +225,7 @@ interface SyntheticReportRoot {
 	incomingGroup?: SyntheticIncomingGroup[];
 	unidentifiedGroup?: SyntheticUnidentifiedGroup[];
 	localFleet?: SyntheticLocalFleet[];
-	battle?: string[];
+	battle?: SyntheticBattle[];
 	bombing?: SyntheticBombing[];
 	shipProduction?: SyntheticShipProductionRow[];
 }
@@ -357,9 +363,17 @@ function decodeSyntheticReport(json: unknown): GameReport {
 		return a.name.localeCompare(b.name);
 	});
 
-	const battleIds: string[] = (root.battle ?? []).filter(
-		(v): v is string => typeof v === "string" && v !== "",
-	);
+	const battles = (root.battle ?? [])
+		.filter(
+			(v): v is SyntheticBattle =>
+				typeof v === "object" && v !== null && typeof v.id === "string" && v.id !== "",
+		)
+		.map((b) => ({
+			id: b.id as string,
+			planet: numOr0(b.planet),
+			shots: numOr0(b.shots),
+		}));
+	const battleIds = battles.map((b) => b.id);
 
 	const bombings: ReportBombing[] = (root.bombing ?? []).map((b) => ({
 		planetNumber: numOr0(b.planet),
@@ -419,6 +433,7 @@ function decodeSyntheticReport(json: unknown): GameReport {
 		players: collectPlayersFromSynthetic(root, race),
 		otherScience,
 		otherShipClass,
+		battles,
 		battleIds,
 		bombings,
 		shipProductions,