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/lib/active-view/battle.svelte

@@ -1,30 +1,134 @@
 <!--
-Phase 10 stub for the battle-log active view. Phase 27 wires the real
-battle viewer.
+Phase 27 — active-view wrapper around the BattleViewer. Loads the
+BattleReport for the supplied `gameId`/`turn`/`battleId` and either
+shows the radial playback (BattleViewer), a loading skeleton, or a
+not-found state. The viewer itself is a logically isolated
+component that takes a `BattleReport` prop — this wrapper owns
+loading and routing concerns.
 -->
 <script lang="ts">
+	import { goto } from "$app/navigation";
+
+	import {
+		BattleFetchError,
+		fetchBattle,
+		type BattleReport,
+	} from "../../api/battle-fetch";
 	import { i18n } from "$lib/i18n/index.svelte";
 
-	type Props = { battleId: string };
-	let { battleId }: Props = $props();
+	import BattleViewer from "../battle-player/battle-viewer.svelte";
+
+	let {
+		gameId,
+		turn,
+		battleId,
+	}: {
+		gameId: string;
+		turn: number;
+		battleId: string;
+	} = $props();
+
+	let state = $state<
+		| { kind: "loading" }
+		| { kind: "ready"; report: BattleReport }
+		| { kind: "not_found" }
+		| { kind: "error"; message: string }
+	>({ kind: "loading" });
+
+	$effect(() => {
+		if (!battleId) {
+			state = { kind: "not_found" };
+			return;
+		}
+		state = { kind: "loading" };
+		fetchBattle(gameId, turn, battleId)
+			.then((report) => {
+				state = { kind: "ready", report };
+			})
+			.catch((err: unknown) => {
+				if (err instanceof BattleFetchError && err.status === 404) {
+					state = { kind: "not_found" };
+				} else {
+					state = {
+						kind: "error",
+						message: err instanceof Error ? err.message : String(err),
+					};
+				}
+			});
+	});
+
+	function backToReport() {
+		goto(`/games/${gameId}/report`);
+	}
+	function backToMap() {
+		goto(`/games/${gameId}/map`);
+	}
 </script>
 
 <section class="active-view" data-testid="active-view-battle" data-battle-id={battleId}>
-	<h2>{i18n.t("game.view.battle")}</h2>
-	<p>{i18n.t("game.shell.coming_soon")}</p>
+	<nav class="back-row">
+		<button
+			type="button"
+			class="back-btn"
+			onclick={backToMap}
+			data-testid="battle-back-to-map"
+		>{i18n.t("game.battle.back_to_map")}</button>
+		<button
+			type="button"
+			class="back-btn"
+			onclick={backToReport}
+			data-testid="battle-back-to-report"
+		>{i18n.t("game.battle.back_to_report")}</button>
+	</nav>
+
+	{#if state.kind === "loading"}
+		<p class="status" data-testid="battle-loading">
+			{i18n.t("game.battle.loading")}
+		</p>
+	{:else if state.kind === "ready"}
+		<BattleViewer report={state.report} />
+	{:else if state.kind === "not_found"}
+		<p class="status" data-testid="battle-not-found">
+			{i18n.t("game.battle.not_found")}
+		</p>
+	{:else}
+		<p class="status error" data-testid="battle-error">{state.message}</p>
+	{/if}
 </section>
 
 <style>
 	.active-view {
-		padding: 1.5rem;
+		padding: 1rem;
 		font-family: system-ui, sans-serif;
+		color: #d6dcf2;
 	}
-	.active-view h2 {
-		margin: 0 0 0.5rem;
-		font-size: 1.1rem;
+	.back-row {
+		display: flex;
+		gap: 0.5rem;
+		max-width: 880px;
+		margin: 0 auto 1rem;
 	}
-	.active-view p {
-		margin: 0;
-		color: #555;
+	.back-btn {
+		appearance: none;
+		background: #1f2748;
+		color: #d6dcf2;
+		border: 1px solid #2c3568;
+		padding: 0.35rem 0.7rem;
+		border-radius: 3px;
+		cursor: pointer;
+		font-size: 0.85rem;
+	}
+	.back-btn:hover {
+		background: #2a3463;
+	}
+	.status {
+		margin: 2rem auto;
+		max-width: 880px;
+		color: #93a0d0;
+		font-size: 0.95rem;
+		text-align: center;
+	}
+	.status.error {
+		color: #e08585;
 	}
 </style>