feat(ui): F8-12 — map polish (zoom invariance, labels, selection, soft radius) (#55)

* Honest pixel-space sizing for `pointRadiusPx` / `strokeWidthPx`: the
  renderer divides by the current camera scale on every
  `viewport.zoomed` so thin lines / small markers stay the same on-screen
  size at any zoom.
* Known-size planets switch to `pointRadiusWorld`, softened against the
  reference scale by `PLANET_SIZE_ZOOM_ALPHA = 0.33`; unidentified
  planets pin to a 3-px disc.
* New planet label layer renders a two-line `name / #N` legend under
  each planet (`#N` only for unidentified or when the new `planetNames`
  toggle is off). Selection now paints an inverse-fill frame around the
  selected planet's label plus an outline on the disc; the old
  selection-ring primitive is retired.
* Bombing markers swap the separate CirclePrim for a planet-outline
  overlay (damaged / wiped colour); the report deep-link moves to a
  "view bombing report" link in the planet inspector.
* Docs + tests follow: `renderer.md` reflects the new sizing contract +
  label / outline layers, vitest covers the sizing math, label
  formatting, and the new toggle, and the map-toggles e2e adds a
  persistence case for `planetNames`.

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

ui/frontend/src/lib/active-view/map-toggles.svelte

@@ -177,6 +177,15 @@ bottom-tabs bar.
 					/>
 					<span>{i18n.t("game.map.toggles.unreachable_planets")}</span>
 				</label>
+				<label>
+					<input
+						type="checkbox"
+						data-testid="map-toggles-planet-names"
+						checked={store.mapToggles.planetNames}
+						onchange={(e) => setFlag("planetNames", e)}
+					/>
+					<span>{i18n.t("game.map.toggles.planet_names")}</span>
+				</label>
 			</fieldset>
 			<fieldset>
 				<legend>{i18n.t("game.map.toggles.section.view")}</legend>

ui/frontend/src/lib/active-view/map.svelte

@@ -26,12 +26,13 @@ preference the store already manages.
 	import {
 		createRenderer,
 		minScaleNoWrap,
+		type PlanetOutlineSpec,
 		type RendererHandle,
 	} from "../../map/index";
 	import { buildCargoRouteLines } from "../../map/cargo-routes";
+	import { buildPlanetLabels } from "../../map/labels";
 	import { buildPendingSendLines } from "../../map/pending-send-routes";
 	import { computeReachCircles } from "../../map/reach-circles";
-	import { computeSelectionRing } from "../../map/selection-ring";
 	import { reachStore } from "$lib/calculator/reach.svelte";
 	import { theme as themeStore } from "$lib/theme/theme.svelte";
 	import {
@@ -216,6 +217,7 @@ preference the store already manages.
 		void toggles.cargoRoutes;
 		void toggles.battleMarkers;
 		void toggles.bombingMarkers;
+		void toggles.planetNames;
 		void toggles.visibleHyperspace;
 
 		// Subscribe to the calculator's published reach so the rings
@@ -253,11 +255,9 @@ preference the store already manages.
 			reachOrigin === null
 				? ""
 				: `${reachOrigin.x},${reachOrigin.y},${reachStore.speedPerTurn}`;
-		const selectedPlanetId =
-			selection?.selected?.kind === "planet" ? selection.selected.id : null;
 		const extrasFingerprint =
 			`cr=${toggles.cargoRoutes ? "1" : "0"}|hp=${hiddenPlanetFingerprint}|` +
-			`reach=${reachFingerprint}|sel=${selectedPlanetId ?? ""}|` +
+			`reach=${reachFingerprint}|` +
 			computeRoutesFingerprint(report.routes) +
 			"|" +
 			computePendingSendFingerprint(draftCommands, draftStatuses);
@@ -363,19 +363,7 @@ preference the store already manages.
 						palette,
 					)
 				: [];
-		const selectedPlanetId =
-			selection?.selected?.kind === "planet" ? selection.selected.id : null;
-		const selectionRing = computeSelectionRing(
-			report.planets,
-			selectedPlanetId,
-			palette,
-		);
-		return [
-			...cargo,
-			...pending,
-			...reach,
-			...(selectionRing === null ? [] : [selectionRing]),
-		];
+		return [...cargo, ...pending, ...reach];
 	}
 
 	function applyVisibilityState(
@@ -394,6 +382,55 @@ preference the store already manages.
 		const fogCircles = computeFogCircles(report, toggles);
 		currentFogCircles = fogCircles;
 		handle.setVisibilityFog(fogCircles);
+		applyPlanetLabels(report, toggles);
+	}
+
+	function applyPlanetLabels(
+		report: NonNullable<GameStateStore["report"]>,
+		toggles: MapToggles,
+	): void {
+		if (handle === null) return;
+		const labels = buildPlanetLabels(report, {
+			showNames: toggles.planetNames,
+		});
+		const selectedPlanetId =
+			selection?.selected?.kind === "planet" ? selection.selected.id : null;
+		handle.setPlanetLabels(labels, selectedPlanetId);
+		applyPlanetOutlines(report, toggles, selectedPlanetId);
+	}
+
+	function applyPlanetOutlines(
+		report: NonNullable<GameStateStore["report"]>,
+		toggles: MapToggles,
+		selectedPlanetId: number | null,
+	): void {
+		if (handle === null) return;
+		const palette = mountedPalette ?? DARK_THEME;
+		const outlines: PlanetOutlineSpec[] = [];
+		// Bombing outline (F8-12 / #30): every bombed planet gets the
+		// damaged / wiped accent painted around its disc. The
+		// `bombingMarkers` toggle hides the visual cue while leaving
+		// the data intact.
+		if (toggles.bombingMarkers) {
+			for (const bombing of report.bombings) {
+				if (bombing.planetNumber === selectedPlanetId) continue;
+				outlines.push({
+					planetNumber: bombing.planetNumber,
+					color: bombing.wiped
+						? palette.bombingWiped
+						: palette.bombingDamaged,
+				});
+			}
+		}
+		// Selection outline overrides bombing on the same planet so the
+		// player can always tell which one is currently focused.
+		if (selectedPlanetId !== null) {
+			outlines.push({
+				planetNumber: selectedPlanetId,
+				color: palette.selectionAccent,
+			});
+		}
+		handle.setPlanetOutlines(outlines);
 	}
 
 	async function runSerializedMount(
@@ -718,30 +755,9 @@ preference the store already manages.
 	// current selection. The Phase 19 ship-group surface dispatches
 	// through the same `hit-test` plumbing — the hitLookup map keyed
 	// by primitive id resolves a hit back to either a planet or a
-	// ship-group selection variant.
-	// scrollToBombingRow waits for the report's bombing row for the
-	// given planet to mount, then scrolls it into view. The map context
-	// menu switches to the report view through a store mutation, so the
-	// section renders on a later frame; a short bounded poll bridges
-	// that gap without coupling the map to the report's render timing.
-	function scrollToBombingRow(planet: number): void {
-		if (typeof document === "undefined") return;
-		let attempts = 60;
-		const tick = (): void => {
-			const row = document.querySelector(
-				`[data-testid="report-bombing-row"][data-planet="${planet}"]`,
-			);
-			if (row instanceof HTMLElement) {
-				row.scrollIntoView({ behavior: "smooth", block: "center" });
-				return;
-			}
-			attempts -= 1;
-			if (attempts <= 0) return;
-			requestAnimationFrame(tick);
-		};
-		requestAnimationFrame(tick);
-	}
-
+	// ship-group selection variant. F8-12 / #30 retired the separate
+	// bombing-ring click; bombing → report navigation now starts in
+	// the inspector via `scrollToBombingRow` (`lib/report-nav.ts`).
 	function handleMapClick(cursorPx: { x: number; y: number }): void {
 		if (handle === null || store?.report === undefined || store.report === null) {
 			return;
@@ -768,15 +784,6 @@ preference the store already manages.
 				});
 				break;
 			}
-			case "bombing": {
-				activeView.select("report");
-				// The report sections render reactively after the view
-				// switches above, so there is no navigation promise to
-				// await; poll a bounded number of animation frames for
-				// the bombing row, then scroll it into view.
-				scrollToBombingRow(target.planet);
-				break;
-			}
 		}
 	}
 

ui/frontend/src/lib/game-state.svelte.ts

@@ -57,6 +57,14 @@ export interface MapToggles {
 	cargoRoutes: boolean;
 	battleMarkers: boolean;
 	bombingMarkers: boolean;
+	/**
+	 * planetNames toggles the on-map two-line label drawn under each
+	 * planet (F8-12 / issue #55, п.29). When ON, the first line shows
+	 * the planet name (when known) and the second line shows `#N`.
+	 * When OFF, the name line is suppressed for every planet — only
+	 * `#N` remains. Default ON.
+	 */
+	planetNames: boolean;
 	/**
 	 * visibleHyperspace toggles the foggy overlay that darkens the
 	 * world OUTSIDE the union of `VisibilityDistance` circles around
@@ -78,6 +86,7 @@ export const DEFAULT_MAP_TOGGLES: MapToggles = {
 	cargoRoutes: true,
 	battleMarkers: true,
 	bombingMarkers: true,
+	planetNames: true,
 	visibleHyperspace: true,
 };
 

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

@@ -175,6 +175,7 @@ const en = {
 	"game.map.toggles.uninhabited_planets": "uninhabited planets",
 	"game.map.toggles.unidentified_planets": "unidentified planets",
 	"game.map.toggles.unreachable_planets": "show unreachable planets",
+	"game.map.toggles.planet_names": "planet names",
 	"game.map.toggles.visible_hyperspace": "visible hyperspace",
 	"game.view.table": "table",
 	"game.view.table.planets": "planets",
@@ -279,6 +280,8 @@ const en = {
 	"game.inspector.planet.field.free_industry": "free production",
 	"game.inspector.planet.production_none": "none",
 	"game.inspector.planet.unidentified_no_data": "no data — only the location is known",
+	"game.inspector.planet.view_bombing": "view bombing report",
+	"game.inspector.planet.view_bombing_wiped": "view bombing report (wiped)",
 	"game.inspector.sheet_close": "close",
 	"game.inspector.planet.action.rename": "rename",
 	"game.inspector.planet.rename.title": "rename planet",

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

@@ -176,6 +176,7 @@ const ru: Record<keyof typeof en, string> = {
 	"game.map.toggles.uninhabited_planets": "необитаемые планеты",
 	"game.map.toggles.unidentified_planets": "неопознанные планеты",
 	"game.map.toggles.unreachable_planets": "показывать недостижимые планеты",
+	"game.map.toggles.planet_names": "имена планет",
 	"game.map.toggles.visible_hyperspace": "видимое гиперпространство",
 	"game.view.table": "таблица",
 	"game.view.table.planets": "планеты",
@@ -280,6 +281,8 @@ const ru: Record<keyof typeof en, string> = {
 	"game.inspector.planet.field.free_industry": "свободные мощности",
 	"game.inspector.planet.production_none": "не задано",
 	"game.inspector.planet.unidentified_no_data": "нет данных — известно только местоположение",
+	"game.inspector.planet.view_bombing": "открыть отчёт о бомбардировке",
+	"game.inspector.planet.view_bombing_wiped": "открыть отчёт о бомбардировке (стёрта)",
 	"game.inspector.sheet_close": "закрыть",
 	"game.inspector.planet.action.rename": "переименовать",
 	"game.inspector.planet.rename.title": "переименование планеты",

ui/frontend/src/lib/inspectors/planet-sheet.svelte

@@ -12,6 +12,7 @@ dismiss from the IA section §6 are deferred to a later polish pass.
 -->
 <script lang="ts">
 	import type {
+		ReportBombing,
 		ReportLocalShipGroup,
 		ReportOtherShipGroup,
 		ReportPlanet,
@@ -35,6 +36,7 @@ dismiss from the IA section §6 are deferred to a later polish pass.
 		localShipGroups: ReportLocalShipGroup[];
 		otherShipGroups: ReportOtherShipGroup[];
 		localRace: string;
+		bombing?: ReportBombing | null;
 		onMap: boolean;
 		onClose: () => void;
 	};
@@ -50,6 +52,7 @@ dismiss from the IA section §6 are deferred to a later polish pass.
 		localShipGroups,
 		otherShipGroups,
 		localRace,
+		bombing = null,
 		onMap,
 		onClose,
 	}: Props = $props();
@@ -84,6 +87,7 @@ dismiss from the IA section §6 are deferred to a later polish pass.
 			{localShipGroups}
 			{otherShipGroups}
 			{localRace}
+			{bombing}
 		/>
 	</section>
 {/if}

ui/frontend/src/lib/inspectors/planet.svelte

@@ -19,6 +19,7 @@ the entry point, Escape (or unmounting the inspector) reverts.
 <script lang="ts">
 	import { getContext, tick } from "svelte";
 	import type {
+		ReportBombing,
 		ReportLocalShipGroup,
 		ReportOtherShipGroup,
 		ReportPlanet,
@@ -36,6 +37,8 @@ the entry point, Escape (or unmounting the inspector) reverts.
 		type EntityNameInvalidReason,
 	} from "$lib/util/entity-name";
 	import { formatFloat } from "$lib/util/number-format";
+	import { scrollToBombingRow } from "$lib/report-nav";
+	import { activeView } from "$lib/app-nav.svelte";
 	import CargoRoutes from "./planet/cargo-routes.svelte";
 	import Production from "./planet/production.svelte";
 	import ShipGroups from "./planet/ship-groups.svelte";
@@ -52,6 +55,7 @@ the entry point, Escape (or unmounting the inspector) reverts.
 		localShipGroups: ReportLocalShipGroup[];
 		otherShipGroups: ReportOtherShipGroup[];
 		localRace: string;
+		bombing?: ReportBombing | null;
 	};
 	let {
 		planet,
@@ -65,8 +69,15 @@ the entry point, Escape (or unmounting the inspector) reverts.
 		localShipGroups,
 		otherShipGroups,
 		localRace,
+		bombing = null,
 	}: Props = $props();
 
+	function openBombingReport(): void {
+		if (bombing === null) return;
+		activeView.select("report");
+		scrollToBombingRow(bombing.planetNumber);
+	}
+
 	const kindKeyMap: Record<ReportPlanet["kind"], TranslationKey> = {
 		local: "game.inspector.planet.kind.local",
 		other: "game.inspector.planet.kind.other",
@@ -314,6 +325,23 @@ the entry point, Escape (or unmounting the inspector) reverts.
 			{i18n.t("game.inspector.planet.unidentified_no_data")}
 		</p>
 	{/if}
+
+	{#if bombing !== null}
+		<button
+			type="button"
+			class="bombing-link"
+			class:bombing-link--wiped={bombing.wiped}
+			data-testid="inspector-planet-view-bombing"
+			data-bombing-wiped={bombing.wiped ? "true" : "false"}
+			onclick={openBombingReport}
+		>
+			{i18n.t(
+				bombing.wiped
+					? "game.inspector.planet.view_bombing_wiped"
+					: "game.inspector.planet.view_bombing",
+			)}
+		</button>
+	{/if}
 </section>
 
 <style>
@@ -432,4 +460,28 @@ the entry point, Escape (or unmounting the inspector) reverts.
 	.icon-action--apply:not(:disabled) {
 		color: var(--color-success);
 	}
+	.bombing-link {
+		font: inherit;
+		font-size: 0.85rem;
+		padding: 0.4rem 0.6rem;
+		background: var(--color-surface-hover);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
+		border-left: 3px solid var(--color-warning, #f57f17);
+		border-radius: 3px;
+		cursor: pointer;
+		text-align: left;
+	}
+	.bombing-link:hover,
+	.bombing-link:focus-visible {
+		border-color: var(--color-accent);
+		border-left-color: var(--color-warning, #f57f17);
+	}
+	.bombing-link--wiped {
+		border-left-color: var(--color-danger);
+	}
+	.bombing-link--wiped:hover,
+	.bombing-link--wiped:focus-visible {
+		border-left-color: var(--color-danger);
+	}
 </style>

ui/frontend/src/lib/report-nav.ts

@@ -0,0 +1,30 @@
+// Navigation helpers for the in-game report view. The two entry
+// points (planet inspector + map) used to scroll-into-view the
+// bombing row in slightly different ways; F8-12 / #30 consolidated
+// the path so the bombing CirclePrim could go away.
+
+/**
+ * scrollToBombingRow polls a bounded number of animation frames for
+ * the matching `[data-testid="report-bombing-row"][data-planet="N"]`
+ * row to mount and, once it does, scrolls it into the centre of the
+ * viewport. The poll is bounded (no infinite loop) because the report
+ * view is rendered reactively after the active-view switch and the
+ * row is not in the DOM on the same frame the caller requested it.
+ */
+export function scrollToBombingRow(planet: number): void {
+	if (typeof document === "undefined") return;
+	let attempts = 60;
+	const tick = (): void => {
+		const row = document.querySelector(
+			`[data-testid="report-bombing-row"][data-planet="${planet}"]`,
+		);
+		if (row instanceof HTMLElement) {
+			row.scrollIntoView({ behavior: "smooth", block: "center" });
+			return;
+		}
+		attempts -= 1;
+		if (attempts <= 0) return;
+		requestAnimationFrame(tick);
+	};
+	requestAnimationFrame(tick);
+}

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

@@ -108,6 +108,12 @@ from the Phase 10 stub.
 	const localFleets = $derived(renderedReport?.report?.localFleets ?? []);
 	const otherRaces = $derived(renderedReport?.report?.otherRaces ?? []);
 	const localRace = $derived(renderedReport?.report?.race ?? "");
+	const bombings = $derived(renderedReport?.report?.bombings ?? []);
+	const selectedPlanetBombing = $derived(
+		selectedPlanet === null
+			? null
+			: (bombings.find((b) => b.planetNumber === selectedPlanet.number) ?? null),
+	);
 </script>
 
 <section class="tool" data-testid="sidebar-tool-inspector">
@@ -124,6 +130,7 @@ from the Phase 10 stub.
 			{localShipGroups}
 			{otherShipGroups}
 			{localRace}
+			bombing={selectedPlanetBombing}
 		/>
 	{:else if selectedShipGroup !== null}
 		<ShipGroup

ui/frontend/src/map/battle-markers.ts

@@ -1,6 +1,8 @@
-// Phase 27 battle and bombing markers on the map.
-//
-// Two visual markers per planet:
+// Phase 27 battle markers on the map. Bombing markers used to live
+// here as a separate ring primitive but F8-12 / #30 turned them into
+// a planet-outline overlay drawn by `render.ts.setPlanetOutlines`,
+// driven from `map.svelte`. The remaining surface here is the battle
+// X-cross:
 //
 //   * Battle marker — an X cross drawn through the corners of the
 //     square that circumscribes the planet circle. Two yellow
@@ -8,18 +10,10 @@
 //     shots: 1 shot → 1px, 100+ shots → 5px (capped). Clicking
 //     either line opens the Battle Viewer for the corresponding
 //     UUID.
-//   * Bombing marker — a thin stroke-only circle slightly larger
-//     than the planet circle. Yellow on damaged planets, red on
-//     wiped planets. Clicking it deep-links to the bombings row in
-//     the Reports view for the planet number.
-//
-// Both markers are wired into `state-binding.ts` so they live in the
-// same `world` / `hitLookup` plumbing as planets and ship groups.
 
 import type { GameReport, ReportPlanet } from "../api/game-state";
 import {
 	DARK_THEME,
-	type CirclePrim,
 	type LinePrim,
 	type Primitive,
 	type PrimitiveID,
@@ -27,20 +21,17 @@ import {
 	type Theme,
 } from "./world";
 
-/** Battle and bombing marker primitive ids use a high-bit prefix to
- * avoid colliding with planet numbers or cargo-route line ids. */
+/** Battle marker primitive ids use a high-bit prefix to avoid
+ * colliding with planet numbers or cargo-route line ids. */
 export const BATTLE_MARKER_ID_PREFIX = 0xa0000000;
-export const BOMBING_MARKER_ID_PREFIX = 0xc0000000;
 
 const PLANET_RADIUS_WORLD = 6;
-const BOMBING_RING_RADIUS = PLANET_RADIUS_WORLD + 3;
 const BATTLE_CROSS_HALF = PLANET_RADIUS_WORLD + 2;
 
 /** Battle marker priority sits between planets (1..4) and cargo
  * routes; the cross is over the planet but loses clicks against the
  * planet glyph itself. */
 const BATTLE_MARKER_PRIORITY = 9;
-const BOMBING_MARKER_PRIORITY = 10;
 
 const BATTLE_LINE_INDEX_A = 0;
 const BATTLE_LINE_INDEX_B = 1;
@@ -51,21 +42,16 @@ export interface BattleMarkerTarget {
 	planet: number;
 }
 
-export interface BombingMarkerTarget {
-	kind: "bombing";
-	planet: number;
-}
-
-export type MarkerTarget = BattleMarkerTarget | BombingMarkerTarget;
+export type MarkerTarget = BattleMarkerTarget;
 
 /**
  * MarkerCategory tags every emitted primitive with the toggleable
  * surface it belongs to so the Phase 29 hide-set machinery can flip
- * each independently. Battles and bombings have their own toggles —
- * a player can hide the bombing rings while keeping the battle
- * crosses visible.
+ * each independently. Battle markers are the only category left here;
+ * the `bombingMarker` toggle now hides the planet-outline overlay
+ * built in `map.svelte.applyPlanetOutlines` (F8-12 / #30).
  */
-export type MarkerCategory = "battleMarker" | "bombingMarker";
+export type MarkerCategory = "battleMarker";
 
 export interface BuildMarkersResult {
 	primitives: Primitive[];
@@ -92,11 +78,13 @@ export function battleMarkerStrokeWidth(shots: number): number {
 }
 
 /**
- * buildBattleAndBombingMarkers emits battle and bombing marker
- * primitives plus a hit-lookup mapping for the current-turn report.
- * Battles whose planet is not visible (e.g. observer-only without a
- * report.planets entry) are skipped — they have no on-map location
- * to anchor against.
+ * buildBattleAndBombingMarkers emits battle X-cross primitives plus a
+ * hit-lookup mapping for the current-turn report. Battles whose
+ * planet is not visible (e.g. observer-only without a report.planets
+ * entry) are skipped — they have no on-map location to anchor
+ * against. Bombing visuals are no longer produced here (F8-12 / #30);
+ * the renderer paints them as a planet-outline overlay driven from
+ * `map.svelte.applyPlanetOutlines`.
  */
 export function buildBattleAndBombingMarkers(
 	report: GameReport,
@@ -167,32 +155,8 @@ export function buildBattleAndBombingMarkers(
 		addDependent(battle.planet, lineB.id);
 	}
 
-	for (let i = 0; i < report.bombings.length; i++) {
-		const bombing = report.bombings[i];
-		const planet = planetByNumber.get(bombing.planetNumber);
-		if (planet === undefined) continue;
-		const color = bombing.wiped ? theme.bombingWiped : theme.bombingDamaged;
-		const style: Style = {
-			strokeColor: color,
-			strokeAlpha: 0.9,
-			strokeWidthPx: 1.5,
-		};
-		const id = BOMBING_MARKER_ID_PREFIX | i;
-		const ring: CirclePrim = {
-			kind: "circle",
-			id,
-			priority: BOMBING_MARKER_PRIORITY,
-			style,
-			hitSlopPx: 0,
-			x: planet.x,
-			y: planet.y,
-			radius: BOMBING_RING_RADIUS,
-		};
-		primitives.push(ring);
-		lookup.set(id, { kind: "bombing", planet: bombing.planetNumber });
-		categories.set(id, "bombingMarker");
-		addDependent(bombing.planetNumber, id);
-	}
-
+	// Bombing visuals are produced by `setPlanetOutlines` in the
+	// renderer (F8-12 / #30); the data still lives on
+	// `report.bombings`, but no primitive is emitted here.
 	return { primitives, lookup, categories, planetDependents };
 }

ui/frontend/src/map/hit-test.ts

@@ -12,9 +12,10 @@
 // and a primitive does not get matched through wrap copies.
 
 import { distSqPointToSegment, screenToWorld, torusShortestDelta } from "./math";
+import { minScaleNoWrap } from "./no-wrap";
 import {
 	DEFAULT_HIT_SLOP_PX,
-	DEFAULT_POINT_RADIUS_PX,
+	displayPointRadiusWorld,
 	KIND_ORDER,
 	type Camera,
 	type CirclePrim,
@@ -50,6 +51,10 @@ export function hitTest(
 ): Hit | null {
 	const cursor = screenToWorld(cursorPx, camera, viewport);
 	const candidates: Hit[] = [];
+	// The non-linear planet radius (F8-12 / #31) is softened relative
+	// to the "whole world fits" reference scale. Computing it here
+	// once keeps the visible disc and the click zone in lock-step.
+	const scaleRef = minScaleNoWrap(viewport, world);
 
 	for (const p of world.primitives) {
 		if (hiddenIds !== undefined && hiddenIds.has(p.id)) continue;
@@ -57,7 +62,18 @@ export function hitTest(
 		const slopWorld = slopPx / camera.scale;
 		let result: number | null;
 		if (p.kind === "point") {
-			result = matchPoint(p, cursor, slopWorld, mode === "torus" ? world : null);
+			const visibleRadius = displayPointRadiusWorld(
+				p.style,
+				camera.scale,
+				scaleRef,
+			);
+			result = matchPoint(
+				p,
+				cursor,
+				visibleRadius,
+				slopWorld,
+				mode === "torus" ? world : null,
+			);
 		} else if (p.kind === "circle") {
 			result = matchCircle(p, cursor, slopWorld, mode === "torus" ? world : null);
 		} else {
@@ -105,15 +121,16 @@ function torusDelta(
 function matchPoint(
 	p: PointPrim,
 	cursor: { x: number; y: number },
+	visibleRadius: number,
 	slopWorld: number,
 	world: World | null,
 ): number | null {
 	const { dx, dy } = torusDelta(p.x, p.y, cursor.x, cursor.y, world);
 	const distSq = dx * dx + dy * dy;
-	// The visible disc is `pointRadiusPx` world units; the hit zone
-	// is the disc plus a small ergonomic slop on top. A click on any
-	// painted pixel of the planet must register as a hit.
-	const visibleRadius = p.style.pointRadiusPx ?? DEFAULT_POINT_RADIUS_PX;
+	// `visibleRadius` already reflects whichever sizing rule the
+	// PointPrim uses (pixel-space for `pointRadiusPx`, softened world
+	// units for `pointRadiusWorld`). The hit zone is that disc plus
+	// a small ergonomic slop on top.
 	const r = visibleRadius + slopWorld;
 	if (distSq <= r * r) return distSq;
 	return null;

ui/frontend/src/map/index.ts

@@ -40,9 +40,12 @@ export { hitTest, type Hit } from "./hit-test";
 
 export {
 	createRenderer,
+	type PlanetOutlineSpec,
 	type RendererHandle,
 	type RendererOptions,
 	type RendererPreference,
 } from "./render";
 
+export { buildPlanetLabels, type PlanetLabelData } from "./labels";
+
 export { sampleWorld } from "./fixtures";

ui/frontend/src/map/labels.ts

@@ -0,0 +1,56 @@
+// Two-line planet labels drawn on the map under each planet (F8-12 /
+// issue #55, п.29). The first line shows the planet name when known
+// and the `planetNames` toggle is on; the second line shows `#N`. For
+// unidentified or unnamed planets only the `#N` line is rendered.
+//
+// Selection is wired through `selectedPlanetId`: the renderer wraps
+// the selected planet's label in an inverse-fill frame (F8-12 / п.30)
+// instead of drawing a separate ring around the planet disc — see the
+// "label-driven selection" branch in `render.ts`.
+
+import type { GameReport } from "../api/game-state";
+
+export interface PlanetLabelData {
+	planetNumber: number;
+	x: number;
+	y: number;
+	/**
+	 * The primary line: planet name. `null` when the `planetNames`
+	 * toggle is off or the planet has no name (unidentified, or a
+	 * legacy report row with an empty string). When null the renderer
+	 * only paints the secondary `#N` line.
+	 */
+	name: string | null;
+	/** Secondary line — always present. Pre-formatted as `#N`. */
+	numberLabel: string;
+}
+
+export interface BuildPlanetLabelsOptions {
+	/** Mirrors `MapToggles.planetNames`. */
+	showNames: boolean;
+}
+
+/**
+ * buildPlanetLabels translates the report's planet list into the
+ * on-map label dataset. The toggle drives whether the name line is
+ * present; for unidentified planets the name is suppressed even when
+ * the toggle is on, because the player has no name to display.
+ */
+export function buildPlanetLabels(
+	report: GameReport,
+	opts: BuildPlanetLabelsOptions,
+): PlanetLabelData[] {
+	const out: PlanetLabelData[] = [];
+	for (const p of report.planets) {
+		const named =
+			opts.showNames && p.kind !== "unidentified" && p.name.length > 0;
+		out.push({
+			planetNumber: p.number,
+			x: p.x,
+			y: p.y,
+			name: named ? p.name : null,
+			numberLabel: `#${p.number}`,
+		});
+	}
+	return out;
+}

ui/frontend/src/map/pick-mode.ts

@@ -12,7 +12,11 @@
 // booting a Pixi `Application`.
 
 import { torusShortestDelta } from "./math";
-import { DEFAULT_POINT_RADIUS_PX, type PointPrim, type PrimitiveID } from "./world";
+import {
+	displayPointRadiusWorld,
+	type PointPrim,
+	type PrimitiveID,
+} from "./world";
 
 /**
  * PickModeOptions configures a pick-mode session. The caller is
@@ -110,11 +114,15 @@ export function computePickOverlay(
 	pointPrimitivesById: ReadonlyMap<PrimitiveID, PointPrim>,
 	allPrimitiveIds: Iterable<PrimitiveID>,
 	world: { width: number; height: number } | null = null,
+	cameraScale: number = 1,
+	scaleRef: number = 1,
 ): PickOverlaySpec {
 	const sourcePrim = pointPrimitivesById.get(options.sourcePrimitiveId);
-	const sourceRadius =
-		(sourcePrim?.style.pointRadiusPx ?? DEFAULT_POINT_RADIUS_PX) +
-		ANCHOR_PADDING_WORLD;
+	const sourceVisibleRadius =
+		sourcePrim === undefined
+			? 0
+			: displayPointRadiusWorld(sourcePrim.style, cameraScale, scaleRef);
+	const sourceRadius = sourceVisibleRadius + ANCHOR_PADDING_WORLD;
 
 	const dimmed = new Set<PrimitiveID>();
 	for (const id of allPrimitiveIds) {
@@ -160,12 +168,15 @@ export function computePickOverlay(
 	) {
 		const target = pointPrimitivesById.get(hoveredId);
 		if (target !== undefined) {
+			const targetRadius = displayPointRadiusWorld(
+				target.style,
+				cameraScale,
+				scaleRef,
+			);
 			hoverOutline = {
 				x: target.x,
 				y: target.y,
-				radius:
-					(target.style.pointRadiusPx ?? DEFAULT_POINT_RADIUS_PX) +
-					HOVER_PADDING_WORLD,
+				radius: targetRadius + HOVER_PADDING_WORLD,
 			};
 		}
 	}

ui/frontend/src/map/render.ts

@@ -21,6 +21,7 @@ import {
 	Application,
 	Container,
 	Graphics,
+	Text,
 	Ticker,
 	UPDATE_PRIORITY,
 	type Renderer,
@@ -29,6 +30,7 @@ import {
 import { Viewport as PixiViewport } from "pixi-viewport";
 
 import { hitTest, type Hit } from "./hit-test";
+import type { PlanetLabelData } from "./labels";
 import { screenToWorld } from "./math";
 import { minScaleNoWrap } from "./no-wrap";
 import {
@@ -40,7 +42,8 @@ import {
 import { wrapCameraTorus } from "./torus";
 import {
 	DARK_THEME,
-	DEFAULT_POINT_RADIUS_PX,
+	displayPointRadiusWorld,
+	displayStrokeWidthWorld,
 	World,
 	type Camera,
 	type CirclePrim,
@@ -57,6 +60,20 @@ import {
 // selection. The map renderer always restricts to webgpu/webgl.
 export type RendererPreference = "webgpu" | "webgl";
 
+/**
+ * PlanetOutlineSpec drives the F8-12 planet-outline overlay (#30):
+ * a thin stroke painted around the planet disc that signals
+ * selection / bombing without adding a separate ring marker. The
+ * renderer hugs the outline to the visible disc on every zoom step,
+ * so callers do not have to recompute it.
+ */
+export interface PlanetOutlineSpec {
+	readonly planetNumber: number;
+	readonly color: number;
+	/** Stroke width in screen pixels. Defaults to 1.5 when omitted. */
+	readonly widthPx?: number;
+}
+
 export interface RendererOptions {
 	canvas: HTMLCanvasElement;
 	world: World;
@@ -202,6 +219,28 @@ export interface RendererHandle {
 	setVisibilityFog(
 		circles: ReadonlyArray<{ x: number; y: number; radius: number }>,
 	): void;
+	/**
+	 * setPlanetLabels replaces the on-map planet label dataset
+	 * (F8-12 / #29). Each entry is anchored to its planet's
+	 * `(x, y)` and the renderer keeps the labels just below the
+	 * disc, repositioning them on every zoom step so the gap stays
+	 * constant in screen pixels. `selectedPlanetId` (or `null`)
+	 * controls which label gets the inverse-fill selection frame
+	 * (F8-12 / #30); pass `null` when no planet is selected.
+	 */
+	setPlanetLabels(
+		labels: ReadonlyArray<PlanetLabelData>,
+		selectedPlanetId: number | null,
+	): void;
+	/**
+	 * setPlanetOutlines replaces the planet-outline overlay set
+	 * (F8-12 / #30). Each entry paints a thin stroke around the
+	 * planet's visible disc — the radius follows the soft / pixel
+	 * sizing rules so the outline hugs the planet at any zoom.
+	 * Used by both selection (selection accent colour) and bombing
+	 * (damaged / wiped colour) signals.
+	 */
+	setPlanetOutlines(outlines: ReadonlyArray<PlanetOutlineSpec>): void;
 	resize(widthPx: number, heightPx: number): void;
 	dispose(): void;
 }
@@ -414,14 +453,52 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 		return c;
 	});
 
+	// Outline layer per copy (F8-12 / #30). Sits between the
+	// primitive disc and the labels so the stroke reads against the
+	// planet fill while staying below the textual layer. Each entry
+	// is rebuilt in `updateOutlineTransforms` on every zoom step so
+	// the radius hugs the visible disc.
+	const outlineLayers: Container[] = copies.map((c) => {
+		const layer = new Container();
+		c.addChild(layer);
+		return layer;
+	});
+
+	// Label layer per copy (F8-12 / #29). Labels render above every
+	// primitive so the text reads on top of fog / route lines, and the
+	// per-copy layout mirrors the primitive copies so wrap mode still
+	// shows the labels in whichever torus tile the user is panned over.
+	// Each layer holds one `Container` per planet (built lazily by
+	// `setPlanetLabels`), and we keep the scale + y-offset of those
+	// containers in lock-step with the camera in `updateLabelTransforms`.
+	const labelLayers: Container[] = copies.map((c) => {
+		const layer = new Container();
+		c.addChild(layer);
+		return layer;
+	});
+
 	// Per-id `Graphics` lookup. Each primitive lives in nine copies
 	// (one per torus tile); pick-mode dims them by id, so the lookup
 	// indexes the full set of `Graphics` instances per primitive id.
 	const primitiveGraphics = new Map<PrimitiveID, Graphics[]>();
 	const pointPrimitivesById = new Map<PrimitiveID, PointPrim>();
+	// primitiveById holds the original `Primitive` for every emitted
+	// id so the F8-12 zoom rebuild can replay the geometry with the
+	// current camera scale without having to re-derive it from a
+	// fresh report. The map covers base + extras alike.
+	const primitiveById = new Map<PrimitiveID, Primitive>();
 	const allPrimitiveIds: PrimitiveID[] = [];
 	const extraPrimitiveIds = new Set<PrimitiveID>();
 	let currentWorld: World = opts.world;
+	// currentScaleRef mirrors the `minScaleNoWrap` value: the scale at
+	// which the whole world fits the viewport. The non-linear planet
+	// size formula softens growth relative to this reference (#31), and
+	// it changes when the viewport resizes — recomputed in `applyMode`
+	// and `resize`.
+	let currentScaleRef = minScaleNoWrap(
+		{ widthPx: widthPx, heightPx: heightPx },
+		opts.world,
+	);
 	// hiddenIds is the Phase 29 hide-by-id snapshot. Empty by default;
 	// every map-view effect run replaces it with the current
 	// MapToggles-derived set via `setHiddenPrimitiveIds`. Both
@@ -436,9 +513,20 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 		const visible = !hiddenIds.has(id);
 		for (const g of list) g.visible = visible;
 	};
+	const drawPrimitiveInto = (prim: Primitive, g: Graphics): void => {
+		g.clear();
+		if (prim.kind === "point") {
+			drawPoint(g, prim, theme, viewport.scaled, currentScaleRef);
+		} else if (prim.kind === "circle") {
+			drawCircle(g, prim, theme, viewport.scaled);
+		} else {
+			drawLine(g, prim, theme, viewport.scaled);
+		}
+	};
 	const populatePrimitives = (prim: Primitive, isExtra: boolean): void => {
 		for (const c of copies) {
-			const g = buildGraphics(prim, theme);
+			const g = new Graphics();
+			drawPrimitiveInto(prim, g);
 			c.addChild(g);
 			let list = primitiveGraphics.get(prim.id);
 			if (list === undefined) {
@@ -448,6 +536,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 			list.push(g);
 		}
 		allPrimitiveIds.push(prim.id);
+		primitiveById.set(prim.id, prim);
 		if (prim.kind === "point") pointPrimitivesById.set(prim.id, prim);
 		if (isExtra) extraPrimitiveIds.add(prim.id);
 		// Fresh primitives honour the current hide set so cargo-route
@@ -456,10 +545,253 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 		const list = primitiveGraphics.get(prim.id);
 		if (list !== undefined) applyHiddenStateTo(prim.id, list);
 	};
+	// redrawAllPrimitives replays every primitive's geometry into its
+	// existing per-copy `Graphics` instances using the current camera
+	// scale. The F8-12 zoom-invariant contract requires the renderer
+	// to repaint pixel-space sizes (#28) and the softened planet
+	// radius (#31) whenever the camera zoom changes — instead of
+	// destroying and recreating the Graphics, we `clear()` and redraw
+	// so dim/visibility state on each Graphics is preserved.
+	const redrawAllPrimitives = (): void => {
+		for (const [id, list] of primitiveGraphics) {
+			const prim = primitiveById.get(id);
+			if (prim === undefined) continue;
+			for (const g of list) drawPrimitiveInto(prim, g);
+		}
+	};
 	for (const p of opts.world.primitives) {
 		populatePrimitives(p, false);
 	}
 
+	// Planet label state (F8-12 / #29 + #30). The renderer holds one
+	// `Container` per planet per torus copy; text + selection frame
+	// live inside that container. `currentLabels` mirrors the dataset
+	// last passed into `setPlanetLabels` so a zoom-driven transform
+	// update does not need a fresh report.
+	interface LabelGfx {
+		readonly container: Container;
+		readonly frame: Graphics;
+		readonly nameText: Text | null;
+		readonly numberText: Text;
+	}
+	const planetLabelInstances = new Map<number, LabelGfx[]>();
+	let currentLabels: ReadonlyArray<PlanetLabelData> = [];
+	const LABEL_FONT_SIZE_PX = 11;
+	const LABEL_LINE_GAP_PX = 0;
+	const LABEL_FRAME_PADDING_PX = 3;
+	const LABEL_OFFSET_PX = 4; // gap between planet disc and the label
+
+	const buildLabelText = (
+		content: string,
+		fillColor: number,
+	): Text => {
+		const t = new Text({
+			text: content,
+			style: {
+				fontFamily:
+					"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+				fontSize: LABEL_FONT_SIZE_PX,
+				fill: fillColor,
+				align: "center",
+			},
+		});
+		t.anchor.set(0.5, 0);
+		return t;
+	};
+
+	const disposeLabelGfx = (entry: LabelGfx): void => {
+		entry.nameText?.destroy();
+		entry.numberText.destroy();
+		entry.frame.destroy();
+		entry.container.parent?.removeChild(entry.container);
+		entry.container.destroy();
+	};
+
+	const clearAllLabels = (): void => {
+		for (const list of planetLabelInstances.values()) {
+			for (const entry of list) disposeLabelGfx(entry);
+		}
+		planetLabelInstances.clear();
+	};
+
+	const paintLabelEntry = (entry: LabelGfx, isSelected: boolean): void => {
+		// Text colours flip on selection so the legend reads on the
+		// inverse-fill frame.
+		const nameFill = isSelected ? theme.labelInverseText : theme.labelText;
+		const numberFill = isSelected
+			? theme.labelInverseText
+			: entry.nameText !== null
+				? theme.labelMuted
+				: theme.labelText;
+		if (entry.nameText !== null) {
+			entry.nameText.style.fill = nameFill;
+		}
+		entry.numberText.style.fill = numberFill;
+		const nameHeight = entry.nameText?.height ?? 0;
+		const numberHeight = entry.numberText.height;
+		const totalTextHeight =
+			nameHeight + (entry.nameText !== null ? LABEL_LINE_GAP_PX : 0) + numberHeight;
+		entry.numberText.y = entry.nameText !== null ? nameHeight + LABEL_LINE_GAP_PX : 0;
+		entry.frame.clear();
+		if (!isSelected) {
+			entry.frame.visible = false;
+			return;
+		}
+		const widestText = Math.max(
+			entry.nameText?.width ?? 0,
+			entry.numberText.width,
+		);
+		const frameWidth = widestText + LABEL_FRAME_PADDING_PX * 2;
+		const frameHeight = totalTextHeight + LABEL_FRAME_PADDING_PX * 2;
+		entry.frame.roundRect(
+			-frameWidth / 2,
+			-LABEL_FRAME_PADDING_PX,
+			frameWidth,
+			frameHeight,
+			3,
+		);
+		entry.frame.fill({ color: theme.labelInverseBackground, alpha: 0.95 });
+		entry.frame.visible = true;
+	};
+
+	const updateLabelTransforms = (): void => {
+		const cameraScale = viewport.scaled;
+		if (cameraScale <= 0) return;
+		const labelScale = 1 / cameraScale;
+		const gapWorld = LABEL_OFFSET_PX / cameraScale;
+		for (const [planetNumber, list] of planetLabelInstances) {
+			const planetPrim = pointPrimitivesById.get(planetNumber);
+			if (planetPrim === undefined) continue;
+			const visibleRadius = displayPointRadiusWorld(
+				planetPrim.style,
+				cameraScale,
+				currentScaleRef,
+			);
+			const labelData = currentLabels.find(
+				(l) => l.planetNumber === planetNumber,
+			);
+			const anchorX = labelData?.x ?? planetPrim.x;
+			const anchorY = labelData?.y ?? planetPrim.y;
+			for (const entry of list) {
+				entry.container.x = anchorX;
+				entry.container.y = anchorY + visibleRadius + gapWorld;
+				entry.container.scale.set(labelScale);
+			}
+		}
+	};
+
+	// Planet outline state (F8-12 / #30). One Graphics per planet per
+	// torus copy. Width and colour come from `PlanetOutlineSpec`; the
+	// radius is recomputed on every zoom step so the outline tracks
+	// the visible disc — the planet itself may grow / shrink with
+	// zoom (`pointRadiusWorld` softening) or stay constant
+	// (`pointRadiusPx` pixel-space).
+	interface PlanetOutlineGfx {
+		readonly graphics: Graphics[];
+		readonly spec: PlanetOutlineSpec;
+	}
+	const planetOutlineInstances = new Map<number, PlanetOutlineGfx>();
+	const OUTLINE_DEFAULT_WIDTH_PX = 1.5;
+	const OUTLINE_RADIUS_PADDING_PX = 1; // gap between disc edge and stroke
+
+	const clearAllOutlines = (): void => {
+		for (const entry of planetOutlineInstances.values()) {
+			for (const g of entry.graphics) {
+				g.parent?.removeChild(g);
+				g.destroy();
+			}
+		}
+		planetOutlineInstances.clear();
+	};
+
+	const paintOutlineEntry = (entry: PlanetOutlineGfx): void => {
+		const cameraScale = viewport.scaled;
+		if (cameraScale <= 0) return;
+		const planetPrim = pointPrimitivesById.get(entry.spec.planetNumber);
+		if (planetPrim === undefined) {
+			for (const g of entry.graphics) g.clear();
+			return;
+		}
+		const visibleRadius = displayPointRadiusWorld(
+			planetPrim.style,
+			cameraScale,
+			currentScaleRef,
+		);
+		const paddingWorld = OUTLINE_RADIUS_PADDING_PX / cameraScale;
+		const widthWorld =
+			(entry.spec.widthPx ?? OUTLINE_DEFAULT_WIDTH_PX) / cameraScale;
+		const outlineRadius = visibleRadius + paddingWorld;
+		for (const g of entry.graphics) {
+			g.clear();
+			g.circle(planetPrim.x, planetPrim.y, outlineRadius);
+			g.stroke({
+				color: entry.spec.color,
+				alpha: 0.95,
+				width: widthWorld,
+			});
+		}
+	};
+
+	const updateOutlineTransforms = (): void => {
+		for (const entry of planetOutlineInstances.values()) {
+			paintOutlineEntry(entry);
+		}
+	};
+
+	const setPlanetOutlines = (
+		outlines: ReadonlyArray<PlanetOutlineSpec>,
+	): void => {
+		clearAllOutlines();
+		for (const spec of outlines) {
+			const list: Graphics[] = [];
+			for (const layer of outlineLayers) {
+				const g = new Graphics();
+				layer.addChild(g);
+				list.push(g);
+			}
+			const entry: PlanetOutlineGfx = { graphics: list, spec };
+			planetOutlineInstances.set(spec.planetNumber, entry);
+			paintOutlineEntry(entry);
+		}
+		requestRender();
+	};
+
+	const setPlanetLabels = (
+		labels: ReadonlyArray<PlanetLabelData>,
+		selectedPlanetId: number | null,
+	): void => {
+		clearAllLabels();
+		currentLabels = labels.slice();
+		for (const data of labels) {
+			const list: LabelGfx[] = [];
+			for (const layer of labelLayers) {
+				const container = new Container();
+				const frame = new Graphics();
+				frame.visible = false;
+				container.addChild(frame);
+				const nameText =
+					data.name === null
+						? null
+						: buildLabelText(data.name, theme.labelText);
+				if (nameText !== null) container.addChild(nameText);
+				const numberText = buildLabelText(data.numberLabel, theme.labelMuted);
+				container.addChild(numberText);
+				layer.addChild(container);
+				const entry: LabelGfx = {
+					container,
+					frame,
+					nameText,
+					numberText,
+				};
+				paintLabelEntry(entry, data.planetNumber === selectedPlanetId);
+				list.push(entry);
+			}
+			planetLabelInstances.set(data.planetNumber, list);
+		}
+		updateLabelTransforms();
+		requestRender();
+	};
+
 	let mode: WrapMode = opts.mode;
 
 	const enforceCentreWhenLarger = (): void => {
@@ -513,6 +845,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 			{ widthPx: viewport.screenWidth, heightPx: viewport.screenHeight },
 			opts.world,
 		);
+		currentScaleRef = minScale;
 		// Both modes enforce minScale on zoom-out: the world (origin
 		// copy) always fills at least the viewport. Without this, in
 		// torus mode the user would zoom out far enough to see the
@@ -535,6 +868,15 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 			viewport.on("moved", wrapTorusCamera);
 			wrapTorusCamera();
 		}
+		// The F8-12 zoom-invariant contract requires pixel-space sizes
+		// (#28) and the softened planet radius (#31) to track the
+		// current scale. `applyMode` can change `viewport.scaled` (e.g.
+		// the `setZoom(minScale, true)` clamp above), so redraw all
+		// primitives before the next paint and re-place the labels /
+		// outlines too.
+		redrawAllPrimitives();
+		updateOutlineTransforms();
+		updateLabelTransforms();
 		// Toggling `copy.visible` does not move the camera, so request a
 		// repaint explicitly; any camera change above also sets
 		// `viewport.dirty`, which is harmless to request twice.
@@ -543,6 +885,14 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 
 	applyMode(mode);
 
+	// `handleZoomed` is defined inline here so it can close over both
+	// `redrawAllPrimitives` and the still-to-be-declared
+	// `redrawPickOverlay`; the `viewport.on("zoomed", …)` subscription
+	// happens further below, after both helpers are in scope. F8-12
+	// (#28, #31): pixel-space sizes and the softened planet radius
+	// depend on `viewport.scaled`, so a zoom step needs to repaint
+	// every base primitive in the same frame.
+
 	// Pointer-move + hover plumbing. Listening on the underlying
 	// canvas keeps the renderer agnostic of pixi-viewport's plugin
 	// chain (drag/pinch can swallow Pixi-level pointer events while
@@ -658,6 +1008,8 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 			mode === "torus"
 				? { width: opts.world.width, height: opts.world.height }
 				: null,
+			viewport.scaled,
+			currentScaleRef,
 		);
 		for (const g of pickOverlays) {
 			g.clear();
@@ -772,6 +1124,18 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 		};
 	};
 
+	// Zoom-driven repaint. Both `redrawAllPrimitives` and
+	// `redrawPickOverlay` are in scope now, so the subscription is
+	// safe even on a synchronous zoomed event.
+	const handleZoomed = (): void => {
+		redrawAllPrimitives();
+		updateOutlineTransforms();
+		updateLabelTransforms();
+		redrawPickOverlay();
+		requestRender();
+	};
+	viewport.on("zoomed", handleZoomed);
+
 	const handle: RendererHandle = {
 		app,
 		viewport,
@@ -809,6 +1173,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 					primitiveGraphics.delete(id);
 				}
 				pointPrimitivesById.delete(id);
+				primitiveById.delete(id);
 				const idx = allPrimitiveIds.indexOf(id);
 				if (idx >= 0) allPrimitiveIds.splice(idx, 1);
 			}
@@ -947,16 +1312,25 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 				mask.destroy();
 			}
 		},
+		setPlanetLabels,
+		setPlanetOutlines,
 		resize: (w, h) => {
 			app.renderer.resize(w, h);
 			viewport.resize(w, h, opts.world.width, opts.world.height);
 			const minScale = minScaleNoWrap({ widthPx: w, heightPx: h }, opts.world);
+			currentScaleRef = minScale;
 			viewport.plugins.remove("clamp-zoom");
 			viewport.clampZoom({ minScale });
 			if (viewport.scaled < minScale) viewport.setZoom(minScale, true);
 			if (mode === "no-wrap") {
 				enforceCentreWhenLarger();
 			}
+			// Resize changes the reference scale and may clamp the zoom;
+			// in both cases the softened planet radius / pixel-space
+			// strokes need to follow.
+			redrawAllPrimitives();
+			updateOutlineTransforms();
+			updateLabelTransforms();
 			// The drawing buffer was resized; repaint at the new size.
 			requestRender();
 		},
@@ -988,8 +1362,11 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 				fogMask.destroy();
 				fogMask = null;
 			}
+			clearAllLabels();
+			clearAllOutlines();
 			viewport.off("moved", enforceCentreWhenLarger);
 			viewport.off("moved", wrapTorusCamera);
+			viewport.off("zoomed", handleZoomed);
 			viewport.off("clicked", handleViewportClicked);
 			canvas.removeEventListener("pointermove", handlePointerMove);
 			canvas.removeEventListener("pointerleave", handlePointerLeave);
@@ -1011,37 +1388,54 @@ function rendererBackendName(r: Renderer): "webgl" | "webgpu" | "canvas" {
 	return "webgl";
 }
 
-function buildGraphics(p: Primitive, theme: Theme): Graphics {
-	const g = new Graphics();
-	if (p.kind === "point") drawPoint(g, p, theme);
-	else if (p.kind === "circle") drawCircle(g, p, theme);
-	else drawLine(g, p, theme);
-	return g;
-}
-
-function drawPoint(g: Graphics, p: PointPrim, theme: Theme): void {
+function drawPoint(
+	g: Graphics,
+	p: PointPrim,
+	theme: Theme,
+	cameraScale: number,
+	scaleRef: number,
+): void {
 	const color = p.style.fillColor ?? theme.pointFill;
 	const alpha = p.style.fillAlpha ?? 1;
-	const radiusPx = p.style.pointRadiusPx ?? DEFAULT_POINT_RADIUS_PX;
-	g.circle(p.x, p.y, radiusPx);
+	const radius = displayPointRadiusWorld(p.style, cameraScale, scaleRef);
+	g.circle(p.x, p.y, radius);
 	g.fill({ color, alpha });
+	if (p.style.strokeColor !== undefined && (p.style.strokeWidthPx ?? 0) > 0) {
+		const strokeAlpha = p.style.strokeAlpha ?? 1;
+		const strokeWidth = displayStrokeWidthWorld(p.style, cameraScale);
+		g.stroke({
+			color: p.style.strokeColor,
+			alpha: strokeAlpha,
+			width: strokeWidth,
+		});
+	}
 }
 
-function drawCircle(g: Graphics, p: CirclePrim, theme: Theme): void {
+function drawCircle(
+	g: Graphics,
+	p: CirclePrim,
+	theme: Theme,
+	cameraScale: number,
+): void {
 	g.circle(p.x, p.y, p.radius);
 	if (p.style.fillColor !== undefined) {
 		g.fill({ color: p.style.fillColor, alpha: p.style.fillAlpha ?? 1 });
 	}
 	const strokeColor = p.style.strokeColor ?? theme.circleStroke;
 	const strokeAlpha = p.style.strokeAlpha ?? 1;
-	const strokeWidth = p.style.strokeWidthPx ?? 1;
+	const strokeWidth = displayStrokeWidthWorld(p.style, cameraScale);
 	g.stroke({ color: strokeColor, alpha: strokeAlpha, width: strokeWidth });
 }
 
-function drawLine(g: Graphics, p: LinePrim, theme: Theme): void {
+function drawLine(
+	g: Graphics,
+	p: LinePrim,
+	theme: Theme,
+	cameraScale: number,
+): void {
 	const color = p.style.strokeColor ?? theme.lineStroke;
 	const alpha = p.style.strokeAlpha ?? 1;
-	const width = p.style.strokeWidthPx ?? 1;
+	const width = displayStrokeWidthWorld(p.style, cameraScale);
 	const dash = p.style.strokeDashPx;
 	if (dash === undefined || dash <= 0) {
 		g.moveTo(p.x1, p.y1);

ui/frontend/src/map/selection-ring.ts

@@ -1,48 +0,0 @@
-// Selected-planet marker. When the SelectionStore holds a planet, the
-// map draws one accent ring tight around it so the current selection is
-// visible on the canvas itself (the inspector/sheet show the detail).
-// Ship-group selection is intentionally not ringed here — groups are
-// addressed by report index and have no single stable map coordinate.
-
-import { DARK_THEME, type CirclePrim, type Theme } from "./world";
-
-/** Planet marker radius in world units; mirrors `battle-markers.ts`. */
-const PLANET_RADIUS_WORLD = 6;
-/** The ring sits just outside the marker (and the bombing ring at +3). */
-const SELECTION_RING_RADIUS = PLANET_RADIUS_WORLD + 4;
-
-/** High-bit prefix so the ring id never collides with planet numbers,
- * route lines, reach rings (`0xb…`), or battle markers. */
-export const SELECTION_RING_ID = 0xc0000000;
-/** Below interactive primitives so it never wins a click. */
-const SELECTION_RING_PRIORITY = 0;
-
-/**
- * computeSelectionRing returns one ring primitive centred on the selected
- * planet, or `null` when nothing (or a non-planet) is selected or the
- * planet is absent from the current report. `theme` supplies the ring
- * colour and defaults to `DARK_THEME`.
- */
-export function computeSelectionRing(
-	planets: ReadonlyArray<{ number: number; x: number; y: number }>,
-	selectedPlanetId: number | null,
-	theme: Theme = DARK_THEME,
-): CirclePrim | null {
-	if (selectedPlanetId === null) return null;
-	const planet = planets.find((p) => p.number === selectedPlanetId);
-	if (planet === undefined) return null;
-	return {
-		kind: "circle",
-		id: SELECTION_RING_ID,
-		priority: SELECTION_RING_PRIORITY,
-		hitSlopPx: 0,
-		x: planet.x,
-		y: planet.y,
-		radius: SELECTION_RING_RADIUS,
-		style: {
-			strokeColor: theme.selectionRing,
-			strokeAlpha: 0.95,
-			strokeWidthPx: 1.5,
-		},
-	};
-}

ui/frontend/src/map/state-binding.ts

@@ -37,24 +37,48 @@ import {
 // binding uses the engine number directly as the primitive id so the
 // click handler can recover a planet by hit-test result without an
 // extra lookup.
-function styleFor(kind: ReportPlanet["kind"], theme: Theme): Style {
+
+/**
+ * KNOWN_PLANET_BASE_RADIUS_WORLD is the world-unit scale of the cube-
+ * root size mapping for planets with a known `size`. With α = 0.33
+ * the on-screen pixel radius at default zoom is roughly
+ * `BASE * cbrt(size) * scaleRef`. The cube root keeps planet area
+ * proportional to volume, so a Size-8 planet reads twice as big as a
+ * Size-1 one. Owner can tune this together with `PLANET_SIZE_ZOOM_ALPHA`
+ * during the F8 manual-QA loop.
+ */
+const KNOWN_PLANET_BASE_RADIUS_WORLD = 4;
+
+/**
+ * UNKNOWN_PLANET_PIXEL_RADIUS matches issue #55 / п.28: planets with
+ * an unknown size — `unidentified` planets and the rare `null`-size
+ * report rows — sit at a constant 3-pixel disc regardless of zoom.
+ */
+const UNKNOWN_PLANET_PIXEL_RADIUS = 3;
+
+function styleFor(planet: ReportPlanet, theme: Theme): Style {
+	const fill = fillForKind(planet.kind, theme);
+	const size = planet.size;
+	if (planet.kind === "unidentified" || size === null || !(size > 0)) {
+		return { ...fill, pointRadiusPx: UNKNOWN_PLANET_PIXEL_RADIUS };
+	}
+	const baseRadius = KNOWN_PLANET_BASE_RADIUS_WORLD * Math.cbrt(size);
+	return { ...fill, pointRadiusWorld: baseRadius };
+}
+
+function fillForKind(
+	kind: ReportPlanet["kind"],
+	theme: Theme,
+): { fillColor: number; fillAlpha: number } {
 	switch (kind) {
 		case "local":
-			return { fillColor: theme.planetLocal, fillAlpha: 1, pointRadiusPx: 6 };
+			return { fillColor: theme.planetLocal, fillAlpha: 1 };
 		case "other":
-			return { fillColor: theme.planetOther, fillAlpha: 1, pointRadiusPx: 5 };
+			return { fillColor: theme.planetOther, fillAlpha: 1 };
 		case "uninhabited":
-			return {
-				fillColor: theme.planetUninhabited,
-				fillAlpha: 0.85,
-				pointRadiusPx: 4,
-			};
+			return { fillColor: theme.planetUninhabited, fillAlpha: 0.85 };
 		case "unidentified":
-			return {
-				fillColor: theme.planetUnidentified,
-				fillAlpha: 0.7,
-				pointRadiusPx: 3,
-			};
+			return { fillColor: theme.planetUnidentified, fillAlpha: 0.7 };
 	}
 }
 
@@ -76,13 +100,16 @@ function priorityFor(kind: ReportPlanet["kind"]): number {
  * resolves to. The click handler in `lib/active-view/map.svelte`
  * looks the hit primitive's id up in the binding's hitLookup map
  * and dispatches `selection.selectPlanet` or
- * `selection.selectShipGroup` accordingly.
+ * `selection.selectShipGroup` accordingly. Bombing markers no longer
+ * surface as their own hit target (F8-12 / #30) — the visual cue is
+ * a planet outline, the click on the planet still selects the
+ * planet, and the bombing → report navigation starts in the
+ * inspector.
  */
 export type HitTarget =
 	| { kind: "planet"; number: number }
 	| { kind: "shipGroup"; ref: ShipGroupRef }
-	| { kind: "battle"; battleId: string; planet: number }
-	| { kind: "bombing"; planet: number };
+	| { kind: "battle"; battleId: string; planet: number };
 
 /**
  * PlanetCategory is the per-`ReportPlanet.kind` flavour exposed to the
@@ -155,7 +182,7 @@ export function reportToWorld(
 			kind: "point",
 			id: planet.number,
 			priority: priorityFor(planet.kind),
-			style: styleFor(planet.kind, theme),
+			style: styleFor(planet, theme),
 			hitSlopPx: 0,
 			x: planet.x,
 			y: planet.y,

ui/frontend/src/map/visibility.ts

@@ -65,8 +65,6 @@ export function isCategoryVisible(
 			return toggles.unidentifiedGroups;
 		case "battleMarker":
 			return toggles.battleMarkers;
-		case "bombingMarker":
-			return toggles.bombingMarkers;
 	}
 }
 

ui/frontend/src/map/world.ts

@@ -17,19 +17,34 @@ export type WrapMode = "torus" | "no-wrap";
 
 // Style describes the visual appearance of a primitive. Any field may
 // be omitted; missing fields fall back to the active theme defaults.
+//
+// `strokeWidthPx` / `pointRadiusPx` are honest screen-pixel sizes
+// since F8-12 (#28): the renderer divides them by the current camera
+// scale before drawing, and rebuilds the affected `Graphics` whenever
+// the camera zooms. This keeps thin lines crisp and small markers
+// readable across the whole zoom range — the camera-relative
+// thickening that the old contract promised but never delivered is
+// gone.
+//
+// `pointRadiusWorld` is the opposite intent: a planet's known
+// `size` produces a base radius in world units, and the renderer
+// softens its growth with the camera scale through
+// `PLANET_SIZE_ZOOM_ALPHA` (F8-12 / #31). When `pointRadiusWorld`
+// is set on a `PointPrim`, `pointRadiusPx` is ignored.
 export interface Style {
 	fillColor?: number; // 0xRRGGBB
 	fillAlpha?: number; // 0..1
 	strokeColor?: number; // 0xRRGGBB
 	strokeAlpha?: number; // 0..1
-	strokeWidthPx?: number; // pixels at any zoom
-	pointRadiusPx?: number; // pixels at any zoom (for kind === 'point')
+	strokeWidthPx?: number; // screen pixels at any zoom
+	pointRadiusPx?: number; // screen pixels at any zoom (for kind === 'point')
+	pointRadiusWorld?: number; // world units, softened by PLANET_SIZE_ZOOM_ALPHA
 	// strokeDashPx — when set on a `LinePrim`, the line is rendered as
 	// a dashed pattern whose dash and gap are both this length. When
-	// unset (or zero), the stroke is solid. Interpreted in the same
-	// world-unit space as `strokeWidthPx`, so the dash spacing scales
-	// with the camera. Phase 19 uses this for the IncomingGroup
-	// trajectory line; ignored on point and circle primitives.
+	// unset (or zero), the stroke is solid. Interpreted in world-unit
+	// space — the dash spacing scales with the camera. Phase 19 uses
+	// this for the IncomingGroup trajectory line; ignored on point
+	// and circle primitives.
 	strokeDashPx?: number;
 }
 
@@ -171,20 +186,91 @@ export interface Theme {
 	routeCap: number;
 	routeMat: number;
 	routeEmp: number;
-	// Battle X-crosses and bombing rings (damaged vs wiped).
+	// Battle X-crosses and the bombing accent (damaged vs wiped). The
+	// bombing accent is now drawn as the planet's outline rather than a
+	// separate ring (F8-12 / issue #55, п.30).
 	battleMarker: number;
 	bombingDamaged: number;
 	bombingWiped: number;
-	// Reach rings, the selected-planet ring, and pending-Send tracks.
+	// Reach rings, the selection accent (planet outline + label frame),
+	// and pending-Send tracks. `selectionRing` is kept around for the
+	// soon-to-be-removed `selection-ring.ts` and the test that locks
+	// the colour; both lines disappear once the label-driven selection
+	// lands.
 	reachCircle: number;
 	selectionRing: number;
+	selectionAccent: number;
 	pendingSend: number;
+	// Planet label colours. `labelText` paints the primary line
+	// (planet name when the toggle is on), `labelMuted` paints the
+	// `#N` companion line. The inverse pair fills the rounded frame
+	// drawn around the selected planet's label (background = the
+	// selection accent, text = the canvas background colour).
+	labelText: number;
+	labelMuted: number;
+	labelInverseText: number;
+	labelInverseBackground: number;
 	// Pick-mode overlay: the anchor / cursor-line / hover highlight
 	// colour and the multiply tint applied to non-reachable primitives.
 	pickHighlight: number;
 	pickDimTint: number;
 }
 
+/**
+ * PLANET_SIZE_ZOOM_ALPHA is the exponent that softens the on-screen
+ * growth of known-size planets with the camera scale (F8-12 / п.31).
+ * `α = 1` keeps the historical linear-with-zoom behaviour; `α = 0`
+ * would make planets fully zoom-invariant. 0.33 (cube-root soft scaling
+ * relative to `scale_ref`) is the owner-approved starting point — it
+ * gives a noticeable, but moderated, growth as the user zooms in. The
+ * constant lives next to the themes so the tuning knob is in one
+ * obvious place.
+ */
+export const PLANET_SIZE_ZOOM_ALPHA = 0.33;
+
+/**
+ * displayPointRadiusWorld returns the world-space radius the renderer
+ * should draw a `PointPrim` with at the current camera scale. When
+ * `style.pointRadiusWorld` is set (known-size planets), the radius is
+ * the base world radius softened by `PLANET_SIZE_ZOOM_ALPHA` relative
+ * to `scaleRef` — at `scale = scaleRef` it equals the base radius;
+ * zooming in grows it sub-linearly. Otherwise the radius collapses to
+ * `pointRadiusPx / cameraScale` so the on-screen disc stays the same
+ * pixel size regardless of zoom.
+ *
+ * Used by both the renderer (`render.ts:drawPoint`) and the hit-test
+ * (`hit-test.ts:matchPoint`) so the visible disc and the click zone
+ * always agree.
+ */
+export function displayPointRadiusWorld(
+	style: Style,
+	cameraScale: number,
+	scaleRef: number,
+): number {
+	if (style.pointRadiusWorld !== undefined) {
+		const softening = Math.pow(cameraScale / scaleRef, PLANET_SIZE_ZOOM_ALPHA - 1);
+		return style.pointRadiusWorld * softening;
+	}
+	const px = style.pointRadiusPx ?? DEFAULT_POINT_RADIUS_PX;
+	if (cameraScale <= 0) return px;
+	return px / cameraScale;
+}
+
+/**
+ * displayStrokeWidthWorld converts `style.strokeWidthPx` (a screen-pixel
+ * thickness, F8-12 / #28) into the world-space width the renderer
+ * passes to `g.stroke({...})`. The renderer redraws strokes on every
+ * `viewport.zoomed` so the on-screen thickness stays constant.
+ */
+export function displayStrokeWidthWorld(
+	style: Style,
+	cameraScale: number,
+): number {
+	const px = style.strokeWidthPx ?? 1;
+	if (cameraScale <= 0) return px;
+	return px / cameraScale;
+}
+
 export const DARK_THEME: Theme = {
 	background: 0x0a0e1a,
 	fog: 0x12162a,
@@ -208,7 +294,12 @@ export const DARK_THEME: Theme = {
 	bombingWiped: 0xff3030,
 	reachCircle: 0x6d8cff,
 	selectionRing: 0x6d8cff,
+	selectionAccent: 0x6d8cff,
 	pendingSend: 0x66bb6a,
+	labelText: 0xc7d2e0,
+	labelMuted: 0x90a4ae,
+	labelInverseText: 0x0a0e1a,
+	labelInverseBackground: 0x6d8cff,
 	pickHighlight: 0xffe082,
 	pickDimTint: 0x303841,
 };
@@ -245,7 +336,12 @@ export const LIGHT_THEME: Theme = {
 	bombingWiped: 0xc62828,
 	reachCircle: 0x3949ab,
 	selectionRing: 0x3949ab,
+	selectionAccent: 0x3949ab,
 	pendingSend: 0x388e3c,
+	labelText: 0x263240,
+	labelMuted: 0x5a6d8a,
+	labelInverseText: 0xf3f5fb,
+	labelInverseBackground: 0x3949ab,
 	pickHighlight: 0xef6c00,
 	pickDimTint: 0xaeb6c4,
 };

ui/frontend/tests/battle-markers.test.ts

@@ -110,7 +110,7 @@ describe("buildBattleAndBombingMarkers", () => {
 		expect(out.primitives).toHaveLength(0);
 	});
 
-	it("emits one yellow ring per damaged bombing and red per wiped", () => {
+	it("does not emit bombing primitives (F8-12 / #30) — the planet outline is drawn elsewhere", () => {
 		const report = makeReport({
 			planets: [
 				{
@@ -163,28 +163,12 @@ describe("buildBattleAndBombingMarkers", () => {
 					attackPower: 1,
 					wiped: false,
 				},
-				{
-					planetNumber: 2,
-					planet: "B",
-					owner: "X",
-					attacker: "Y",
-					production: "MAT",
-					industry: 0,
-					population: 0,
-					colonists: 0,
-					industryStockpile: 0,
-					materialsStockpile: 0,
-					attackPower: 1,
-					wiped: true,
-				},
 			],
 		});
 
 		const out = buildBattleAndBombingMarkers(report);
-		const rings = out.primitives.filter((p) => p.kind === "circle");
-		expect(rings).toHaveLength(2);
-		expect(rings[0].style.strokeColor).toBe(DARK_THEME.bombingDamaged);
-		expect(rings[1].style.strokeColor).toBe(DARK_THEME.bombingWiped);
+		expect(out.primitives.filter((p) => p.kind === "circle")).toHaveLength(0);
+		// `setPlanetOutlines` in the renderer paints the bombing accent.
 	});
 
 	it("paints markers with the supplied palette's colours", () => {
@@ -231,11 +215,9 @@ describe("buildBattleAndBombingMarkers", () => {
 
 		const out = buildBattleAndBombingMarkers(report, LIGHT_THEME);
 		const lines = out.primitives.filter((p) => p.kind === "line");
-		const rings = out.primitives.filter((p) => p.kind === "circle");
 		for (const l of lines) {
 			expect(l.style.strokeColor).toBe(LIGHT_THEME.battleMarker);
 		}
-		expect(rings[0].style.strokeColor).toBe(LIGHT_THEME.bombingWiped);
 		// The accents are deliberately distinct between the palettes.
 		expect(LIGHT_THEME.battleMarker).not.toBe(DARK_THEME.battleMarker);
 		expect(LIGHT_THEME.bombingWiped).not.toBe(DARK_THEME.bombingWiped);

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

@@ -365,9 +365,39 @@ test("toggle state persists across a page reload", async ({ page }) => {
 	expect(
 		await page.getByTestId("map-toggles-bombing-markers").isChecked(),
 	).toBe(false);
-	// Battle X-cross and bombing ring are hidden in the renderer.
+	// Battle X-cross primitives stay hidden in the renderer. F8-12 / #30
+	// retired the bombing CirclePrim — the toggle now hides a planet
+	// outline overlay, which sits outside the primitive surface; the
+	// high-bit 0xc… range is permanently empty.
 	expect(await visibleHighBitCount(page, 0xa0000000)).toBe(0);
-	expect(await visibleHighBitCount(page, 0xc0000000)).toBe(0);
+});
+
+test("planet-names toggle persists across a page reload (F8-12 / #29)", async ({
+	page,
+}) => {
+	await mockGateway(page, { currentTurn: 1 });
+	await bootSession(page);
+	await openGame(page);
+
+	await page.getByTestId("map-toggles-trigger").click();
+	// Default ON; flip it OFF.
+	expect(await page.getByTestId("map-toggles-planet-names").isChecked()).toBe(
+		true,
+	);
+	await page.getByTestId("map-toggles-planet-names").click();
+	expect(await page.getByTestId("map-toggles-planet-names").isChecked()).toBe(
+		false,
+	);
+
+	await page.reload({ waitUntil: "commit" });
+	await expect(page.getByTestId("active-view-map")).toHaveAttribute(
+		"data-status",
+		"ready",
+	);
+	await page.getByTestId("map-toggles-trigger").click();
+	expect(await page.getByTestId("map-toggles-planet-names").isChecked()).toBe(
+		false,
+	);
 });
 
 // settledRenderCount waits out the mount/resize paint burst and returns

ui/frontend/tests/map-display-sizing.test.ts

@@ -0,0 +1,83 @@
+// Coverage for the F8-12 sizing helpers in src/map/world.ts:
+// `displayPointRadiusWorld` (the union of the pixel-space and the
+// softened-by-zoom rules) and `displayStrokeWidthWorld` (pixel-space
+// stroke widths). Both are pure math, so this file stays Pixi-free.
+
+import { describe, expect, test } from "vitest";
+
+import {
+	DEFAULT_POINT_RADIUS_PX,
+	PLANET_SIZE_ZOOM_ALPHA,
+	displayPointRadiusWorld,
+	displayStrokeWidthWorld,
+} from "../src/map/world";
+
+describe("displayPointRadiusWorld — pixel-space (pointRadiusPx)", () => {
+	test("returns pixel size divided by scale at scale=1", () => {
+		expect(displayPointRadiusWorld({ pointRadiusPx: 5 }, 1, 0.2)).toBe(5);
+	});
+
+	test("shrinks the world footprint as zoom grows", () => {
+		expect(displayPointRadiusWorld({ pointRadiusPx: 6 }, 3, 0.2)).toBeCloseTo(2);
+	});
+
+	test("falls back to DEFAULT_POINT_RADIUS_PX when the style is bare", () => {
+		expect(displayPointRadiusWorld({}, 2, 0.2)).toBeCloseTo(
+			DEFAULT_POINT_RADIUS_PX / 2,
+		);
+	});
+
+	test("zero-scale guard returns the raw pixel size", () => {
+		expect(displayPointRadiusWorld({ pointRadiusPx: 4 }, 0, 0.2)).toBe(4);
+	});
+});
+
+describe("displayPointRadiusWorld — softened by zoom (pointRadiusWorld)", () => {
+	test("at scale=scaleRef the visible radius equals the base radius", () => {
+		const radius = displayPointRadiusWorld(
+			{ pointRadiusWorld: 6 },
+			0.2,
+			0.2,
+		);
+		expect(radius).toBeCloseTo(6);
+	});
+
+	test("zooming in grows the radius sub-linearly", () => {
+		const r1 = displayPointRadiusWorld({ pointRadiusWorld: 6 }, 0.2, 0.2);
+		const r10 = displayPointRadiusWorld({ pointRadiusWorld: 6 }, 2.0, 0.2);
+		// On-screen pixel size grows by scale^α (α = 0.33) instead of
+		// linearly: 10x zoom → ~10^0.33 ≈ 2.15x growth.
+		const onScreenAt1 = r1 * 0.2;
+		const onScreenAt10 = r10 * 2.0;
+		expect(onScreenAt10 / onScreenAt1).toBeCloseTo(
+			Math.pow(10, PLANET_SIZE_ZOOM_ALPHA),
+			3,
+		);
+	});
+
+	test("ignores pointRadiusPx when pointRadiusWorld is set", () => {
+		const r = displayPointRadiusWorld(
+			{ pointRadiusPx: 99, pointRadiusWorld: 4 },
+			0.4,
+			0.2,
+		);
+		// World radius is the base softened by (0.4/0.2)^(α-1).
+		expect(r).toBeCloseTo(4 * Math.pow(2, PLANET_SIZE_ZOOM_ALPHA - 1), 4);
+	});
+});
+
+describe("displayStrokeWidthWorld", () => {
+	test("returns width / scale at any zoom", () => {
+		expect(displayStrokeWidthWorld({ strokeWidthPx: 2 }, 1)).toBe(2);
+		expect(displayStrokeWidthWorld({ strokeWidthPx: 2 }, 4)).toBeCloseTo(0.5);
+		expect(displayStrokeWidthWorld({ strokeWidthPx: 2 }, 0.5)).toBeCloseTo(4);
+	});
+
+	test("falls back to 1 when strokeWidthPx is omitted", () => {
+		expect(displayStrokeWidthWorld({}, 2)).toBeCloseTo(0.5);
+	});
+
+	test("zero-scale guard returns the raw pixel value", () => {
+		expect(displayStrokeWidthWorld({ strokeWidthPx: 3 }, 0)).toBe(3);
+	});
+});

ui/frontend/tests/map-hit-test.test.ts

@@ -5,11 +5,13 @@
 // expected hit is obvious from the geometry; the camera is at scale=1
 // in most cases so slop in pixels equals slop in world units.
 //
-// The point hit zone is `(pointRadiusPx + slopPx) / camera.scale`
-// world units — the visible disc plus an ergonomic slop on top. The
-// default `pointRadiusPx` (`DEFAULT_POINT_RADIUS_PX`) is 3 and the
-// default point slop (`DEFAULT_HIT_SLOP_PX.point`) is 4, so a default
-// point is hit out to 7 world units at scale=1.
+// F8-12 / #28 made `pointRadiusPx` and `strokeWidthPx` honest screen-
+// pixel sizes — the hit zone is `(pointRadiusPx + slopPx) / scale`
+// world units, which equals `pointRadiusPx + slopPx` *pixels* on
+// screen at any zoom. The default `pointRadiusPx`
+// (`DEFAULT_POINT_RADIUS_PX`) is 3 and the default point slop
+// (`DEFAULT_HIT_SLOP_PX.point`) is 4, so a default point is hit out
+// to 7 *screen* pixels — equal to 7 world units at scale=1.
 
 import { describe, expect, test } from "vitest";
 import { hitTest } from "../src/map/hit-test";
@@ -256,28 +258,42 @@ describe("hitTest — empty results and scale", () => {
 		expect(ids(w, "torus", cam, cursorOver(500, 500, cam))).toBe(null);
 	});
 
-	test("higher zoom shrinks the on-screen slop in world units", () => {
-		// At scale=4, slopPx 4 = 1 world unit; visible radius stays 3
-		// world units. Threshold = 4 world units.
-		const w = new World(1000, 1000, [point(1, 503, 500)]);
+	test("higher zoom shrinks the world-unit footprint of the default disc", () => {
+		// At scale=4, pointRadiusPx 3 = 0.75 world units; slop 4 = 1
+		// world unit. Threshold = 1.75 world units.
 		const cam4 = camAt(500, 500, 4);
-		// 3 world units away → on the disc edge → hit.
-		expect(ids(w, "torus", cam4, cursorOver(503, 500, cam4))).toBe(1);
-		// 5 world units away → beyond radius+slop → null.
-		const wFar = new World(1000, 1000, [point(1, 505, 500)]);
-		expect(ids(wFar, "torus", cam4, cursorOver(500, 500, cam4))).toBe(null);
+		const w = new World(1000, 1000, [point(1, 500, 500)]);
+		// 1.5 world units away → within 1.75 → hit.
+		expect(ids(w, "torus", cam4, cursorOver(501.5, 500, cam4))).toBe(1);
+		// 2 world units away → beyond 1.75 → null.
+		expect(ids(w, "torus", cam4, cursorOver(502, 500, cam4))).toBe(null);
 	});
 
-	test("lower zoom widens the on-screen slop in world units", () => {
-		// At scale=0.5, slopPx 4 = 8 world units; visible radius
-		// stays 3 → threshold = 11 world units.
+	test("lower zoom inflates the world-unit footprint of the default disc", () => {
+		// At scale=0.5, pointRadiusPx 3 = 6 world units; slop 4 = 8
+		// world units. Threshold = 14 world units.
 		const cam05 = camAt(500, 500, 0.5);
-		const w = new World(1000, 1000, [point(1, 510, 500)]);
-		// 10 world units away → within 11 → hit.
-		expect(ids(w, "torus", cam05, cursorOver(500, 500, cam05))).toBe(1);
-		const wFar = new World(1000, 1000, [point(1, 514, 500)]);
-		// 14 world units away → beyond 11 → null.
-		expect(ids(wFar, "torus", cam05, cursorOver(500, 500, cam05))).toBe(null);
+		const w = new World(1000, 1000, [point(1, 500, 500)]);
+		// 13 world units away → within 14 → hit.
+		expect(ids(w, "torus", cam05, cursorOver(513, 500, cam05))).toBe(1);
+		// 16 world units away → beyond 14 → null.
+		expect(ids(w, "torus", cam05, cursorOver(516, 500, cam05))).toBe(null);
+	});
+
+	test("pointRadiusWorld scales softly with zoom (F8-12 / #31)", () => {
+		// world 1000×1000, viewport 200×200 → scaleRef = 0.2 (every
+		// world unit becomes 0.2 px on screen at the "whole world fits"
+		// zoom). PLANET_SIZE_ZOOM_ALPHA is 0.33: r_display =
+		// r_base * (scale / scaleRef)^(α - 1).
+		const cam05 = camAt(500, 500, 0.5);
+		const wBase = new World(1000, 1000, [
+			point(1, 500, 500, { style: { pointRadiusWorld: 6 } }),
+		]);
+		// At scale=0.5 the softening factor is (0.5/0.2)^(0.33-1) ≈ 0.554.
+		// Visible radius ≈ 3.32 world units, slop 8, threshold ≈ 11.32.
+		expect(ids(wBase, "torus", cam05, cursorOver(510, 500, cam05))).toBe(1);
+		// Cursor 12 world units away exceeds the threshold.
+		expect(ids(wBase, "torus", cam05, cursorOver(512, 500, cam05))).toBe(null);
 	});
 });
 

ui/frontend/tests/map-labels.test.ts

@@ -0,0 +1,147 @@
+// Coverage for the F8-12 / #29 planet-label formatting. The
+// renderer's per-Pixi.Text drawing lives behind Pixi APIs (and is
+// exercised by Playwright); this file pins the pure data step.
+
+import { describe, expect, test } from "vitest";
+
+import type { GameReport } from "../src/api/game-state";
+import { buildPlanetLabels } from "../src/map/labels";
+import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";
+
+function makeReport(overrides: Partial<GameReport> = {}): GameReport {
+	return {
+		turn: 1,
+		mapWidth: 100,
+		mapHeight: 100,
+		planetCount: 0,
+		planets: [],
+		race: "",
+		localShipClass: [],
+		routes: [],
+		localPlayerDrive: 0,
+		localPlayerWeapons: 0,
+		localPlayerShields: 0,
+		localPlayerCargo: 0,
+		...EMPTY_SHIP_GROUPS,
+		...overrides,
+	};
+}
+
+describe("buildPlanetLabels", () => {
+	test("named planet with showNames=true emits both lines", () => {
+		const report = makeReport({
+			planets: [
+				{
+					number: 5,
+					name: "Tancordia",
+					kind: "local",
+					x: 10,
+					y: 20,
+					owner: null,
+					size: null,
+					resources: null,
+					industryStockpile: null,
+					materialsStockpile: null,
+					industry: null,
+					population: null,
+					colonists: null,
+					production: null,
+					freeIndustry: null,
+				},
+			],
+		});
+		const out = buildPlanetLabels(report, { showNames: true });
+		expect(out).toEqual([
+			{
+				planetNumber: 5,
+				x: 10,
+				y: 20,
+				name: "Tancordia",
+				numberLabel: "#5",
+			},
+		]);
+	});
+
+	test("named planet with showNames=false drops the name line", () => {
+		const report = makeReport({
+			planets: [
+				{
+					number: 5,
+					name: "Tancordia",
+					kind: "local",
+					x: 10,
+					y: 20,
+					owner: null,
+					size: null,
+					resources: null,
+					industryStockpile: null,
+					materialsStockpile: null,
+					industry: null,
+					population: null,
+					colonists: null,
+					production: null,
+					freeIndustry: null,
+				},
+			],
+		});
+		const out = buildPlanetLabels(report, { showNames: false });
+		expect(out[0].name).toBeNull();
+		expect(out[0].numberLabel).toBe("#5");
+	});
+
+	test("unidentified planet always renders #N only, ignoring the toggle", () => {
+		const report = makeReport({
+			planets: [
+				{
+					number: 42,
+					name: "Tancordia",
+					kind: "unidentified",
+					x: 5,
+					y: 5,
+					owner: null,
+					size: null,
+					resources: null,
+					industryStockpile: null,
+					materialsStockpile: null,
+					industry: null,
+					population: null,
+					colonists: null,
+					production: null,
+					freeIndustry: null,
+				},
+			],
+		});
+		const on = buildPlanetLabels(report, { showNames: true });
+		const off = buildPlanetLabels(report, { showNames: false });
+		expect(on[0].name).toBeNull();
+		expect(off[0].name).toBeNull();
+		expect(on[0].numberLabel).toBe("#42");
+	});
+
+	test("empty-name planet falls back to #N", () => {
+		const report = makeReport({
+			planets: [
+				{
+					number: 9,
+					name: "",
+					kind: "uninhabited",
+					x: 1,
+					y: 1,
+					owner: null,
+					size: null,
+					resources: null,
+					industryStockpile: null,
+					materialsStockpile: null,
+					industry: null,
+					population: null,
+					colonists: null,
+					production: null,
+					freeIndustry: null,
+				},
+			],
+		});
+		const out = buildPlanetLabels(report, { showNames: true });
+		expect(out[0].name).toBeNull();
+		expect(out[0].numberLabel).toBe("#9");
+	});
+});

ui/frontend/tests/map-toggles-component.test.ts

@@ -59,6 +59,7 @@ describe("MapTogglesControl", () => {
 		expect(ui.getByTestId("map-toggles-uninhabited-planets")).toBeChecked();
 		expect(ui.getByTestId("map-toggles-unidentified-planets")).toBeChecked();
 		expect(ui.getByTestId("map-toggles-unreachable-planets")).toBeChecked();
+		expect(ui.getByTestId("map-toggles-planet-names")).toBeChecked();
 		expect(ui.getByTestId("map-toggles-visible-hyperspace")).toBeChecked();
 		expect(ui.queryByTestId("map-toggles-wrap-torus")).toBeNull();
 		expect(ui.queryByTestId("map-toggles-wrap-no-wrap")).toBeNull();
@@ -91,6 +92,17 @@ describe("MapTogglesControl", () => {
 		expect(setMapToggle).not.toHaveBeenCalledWith("bombingMarkers", false);
 	});
 
+	test("planet-names checkbox flips the planetNames toggle (F8-12 / #29)", async () => {
+		const store = buildStore();
+		const setMapToggle = vi
+			.spyOn(store, "setMapToggle")
+			.mockResolvedValue(undefined);
+		const ui = render(MapTogglesControl, { props: { store } });
+		await fireEvent.click(ui.getByTestId("map-toggles-trigger"));
+		await fireEvent.click(ui.getByTestId("map-toggles-planet-names"));
+		expect(setMapToggle).toHaveBeenCalledWith("planetNames", false);
+	});
+
 	test("Escape closes the popover", async () => {
 		const store = buildStore();
 		const ui = render(MapTogglesControl, { props: { store } });

ui/frontend/tests/map-toggles-state.test.ts

@@ -113,6 +113,7 @@ describe("GameStateStore.mapToggles persistence", () => {
 		await a.init({ client: makeFakeClient(3), cache, gameId: GAME_ID });
 		await a.setMapToggle("hyperspaceGroups", false);
 		await a.setMapToggle("battleMarkers", false);
+		await a.setMapToggle("planetNames", false);
 		await a.setMapToggle("visibleHyperspace", false);
 		a.dispose();
 
@@ -121,6 +122,7 @@ describe("GameStateStore.mapToggles persistence", () => {
 		await b.init({ client: makeFakeClient(3), cache, gameId: GAME_ID });
 		expect(b.mapToggles.hyperspaceGroups).toBe(false);
 		expect(b.mapToggles.battleMarkers).toBe(false);
+		expect(b.mapToggles.planetNames).toBe(false);
 		expect(b.mapToggles.visibleHyperspace).toBe(false);
 		// Untouched flags retain defaults.
 		expect(b.mapToggles.bombingMarkers).toBe(true);
@@ -141,6 +143,7 @@ describe("GameStateStore.mapToggles persistence", () => {
 		expect(store.mapToggles.hyperspaceGroups).toBe(false);
 		expect(store.mapToggles.battleMarkers).toBe(true);
 		expect(store.mapToggles.bombingMarkers).toBe(true);
+		expect(store.mapToggles.planetNames).toBe(true);
 		expect(store.mapToggles.visibleHyperspace).toBe(true);
 		store.dispose();
 	});

ui/frontend/tests/selection-ring.test.ts

@@ -1,40 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { computeSelectionRing, SELECTION_RING_ID } from "../src/map/selection-ring";
-import { DARK_THEME, LIGHT_THEME } from "../src/map/world";
-
-const planets = [
-	{ number: 1, x: 10, y: 20 },
-	{ number: 2, x: 30, y: 40 },
-];
-
-describe("computeSelectionRing", () => {
-	it("returns null when nothing is selected", () => {
-		expect(computeSelectionRing(planets, null)).toBeNull();
-	});
-
-	it("returns null when the selected planet is absent from the report", () => {
-		expect(computeSelectionRing(planets, 99)).toBeNull();
-	});
-
-	it("rings the selected planet at its coordinates", () => {
-		const ring = computeSelectionRing(planets, 2);
-		expect(ring).toMatchObject({
-			kind: "circle",
-			id: SELECTION_RING_ID,
-			x: 30,
-			y: 40,
-			hitSlopPx: 0,
-		});
-		// Defaults to the dark palette.
-		expect(ring?.style.strokeColor).toBe(DARK_THEME.selectionRing);
-		// Sits outside the planet marker (radius 6 world units).
-		expect(ring?.radius ?? 0).toBeGreaterThan(6);
-	});
-
-	it("uses the supplied palette's ring colour", () => {
-		const ring = computeSelectionRing(planets, 2, LIGHT_THEME);
-		expect(ring?.style.strokeColor).toBe(LIGHT_THEME.selectionRing);
-		expect(LIGHT_THEME.selectionRing).not.toBe(DARK_THEME.selectionRing);
-	});
-});

ui/frontend/tests/state-binding-cascade.test.ts

@@ -17,7 +17,7 @@ import type {
 	ReportPlanet,
 	ReportUnidentifiedShipGroup,
 } from "../src/api/game-state";
-import { BATTLE_MARKER_ID_PREFIX, BOMBING_MARKER_ID_PREFIX } from "../src/map/battle-markers";
+import { BATTLE_MARKER_ID_PREFIX } from "../src/map/battle-markers";
 import { SHIP_GROUP_ID_OFFSETS } from "../src/map/ship-groups";
 import { reportToWorld } from "../src/map/state-binding";
 import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";
@@ -200,7 +200,7 @@ describe("reportToWorld — categories", () => {
 		expect(categories.get(unidentifiedId)).toBe("unidentifiedGroup");
 	});
 
-	test("battle markers and bombing markers each carry their own category", () => {
+	test("battle markers carry the battleMarker category", () => {
 		const { categories } = reportToWorld(
 			makeReport({
 				planets: [
@@ -208,6 +208,9 @@ describe("reportToWorld — categories", () => {
 					makePlanet({ number: 2, kind: "other", x: 200, y: 200 }),
 				],
 				battles: [makeBattle({ id: "b1", planet: 2 })],
+				// F8-12 / #30: bombings no longer emit their own
+				// primitives — the planet outline is drawn by
+				// `setPlanetOutlines` from the map view.
 				bombings: [makeBombing({ planetNumber: 2 })],
 			}),
 		);
@@ -216,8 +219,6 @@ describe("reportToWorld — categories", () => {
 		const battleB = BATTLE_MARKER_ID_PREFIX | (0 << 4) | 1;
 		expect(categories.get(battleA)).toBe("battleMarker");
 		expect(categories.get(battleB)).toBe("battleMarker");
-		const bombingId = BOMBING_MARKER_ID_PREFIX | 0;
-		expect(categories.get(bombingId)).toBe("bombingMarker");
 	});
 });
 
@@ -235,7 +236,7 @@ describe("reportToWorld — planetDependents", () => {
 		expect(planetDependents.get(7)?.has(7)).toBe(true);
 	});
 
-	test("battle / bombing markers cascade onto their anchor planet", () => {
+	test("battle markers cascade onto their anchor planet", () => {
 		const { planetDependents } = reportToWorld(
 			makeReport({
 				planets: [
@@ -243,17 +244,18 @@ describe("reportToWorld — planetDependents", () => {
 					makePlanet({ number: 2, kind: "other", x: 200, y: 200 }),
 				],
 				battles: [makeBattle({ planet: 2 })],
+				// Bombings are still in the report but no primitive
+				// rides the cascade now — they paint a planet outline
+				// straight from `map.svelte`.
 				bombings: [makeBombing({ planetNumber: 2 })],
 			}),
 		);
 		const battleA = BATTLE_MARKER_ID_PREFIX | (0 << 4) | 0;
 		const battleB = BATTLE_MARKER_ID_PREFIX | (0 << 4) | 1;
-		const bombingId = BOMBING_MARKER_ID_PREFIX | 0;
 		const deps = planetDependents.get(2) ?? new Set();
 		expect(deps.has(2)).toBe(true);
 		expect(deps.has(battleA)).toBe(true);
 		expect(deps.has(battleB)).toBe(true);
-		expect(deps.has(bombingId)).toBe(true);
 	});
 
 	test("in-space groups cascade onto their destination planet", () => {

ui/frontend/tests/visibility-helpers.test.ts

@@ -82,10 +82,10 @@ describe("isCategoryVisible", () => {
 		expect(isCategoryVisible("planet-unidentified", t)).toBe(false);
 	});
 
-	test("battle and bombing markers have independent toggles", () => {
-		const t = toggles({ battleMarkers: false, bombingMarkers: true });
+	test("battleMarker toggle hides battle X-crosses without touching other layers", () => {
+		const t = toggles({ battleMarkers: false });
 		expect(isCategoryVisible("battleMarker", t)).toBe(false);
-		expect(isCategoryVisible("bombingMarker", t)).toBe(true);
+		expect(isCategoryVisible("planet-foreign", t)).toBe(true);
 	});
 });
 
@@ -202,6 +202,9 @@ describe("computeHiddenPlanetNumbers", () => {
 });
 
 describe("computeHiddenIds", () => {
+	// F8-12 / #30: bombings no longer ride the cascade as their own
+	// primitive — they paint a planet outline directly. The fixture
+	// here mirrors what `reportToWorld` currently emits.
 	const categories: Map<PrimitiveID, MapCategory> = new Map<
 		PrimitiveID,
 		MapCategory
@@ -212,11 +215,10 @@ describe("computeHiddenIds", () => {
 		[150, "hyperspaceGroup"],
 		[200, "incomingGroup"],
 		[300, "battleMarker"],
-		[400, "bombingMarker"],
 	]);
 	const planetDependents = new Map<number, ReadonlySet<PrimitiveID>>([
 		[1, new Set([1])],
-		[2, new Set([2, 100, 150, 200, 300, 400])],
+		[2, new Set([2, 100, 150, 200, 300])],
 	]);
 
 	test("category-toggle off hides every primitive in that category", () => {
@@ -239,10 +241,10 @@ describe("computeHiddenIds", () => {
 			new Set([2]),
 			toggles(),
 		);
-		expect(hidden).toEqual(new Set([2, 100, 150, 200, 300, 400]));
+		expect(hidden).toEqual(new Set([2, 100, 150, 200, 300]));
 	});
 
-	test("battle / bombing markers have independent toggles", () => {
+	test("battle markers honour the battleMarkers toggle independently", () => {
 		const hidden = computeHiddenIds(
 			categories,
 			planetDependents,
@@ -250,7 +252,7 @@ describe("computeHiddenIds", () => {
 			toggles({ battleMarkers: false }),
 		);
 		expect(hidden.has(300)).toBe(true);
-		expect(hidden.has(400)).toBe(false);
+		expect(hidden.has(150)).toBe(false);
 	});
 
 	test("planet cascade and category toggle compose without duplicates", () => {
@@ -262,7 +264,7 @@ describe("computeHiddenIds", () => {
 		);
 		// 300 is already present from the cascade; the category toggle
 		// re-adds it but Set semantics dedupe.
-		expect(hidden).toEqual(new Set([2, 100, 150, 200, 300, 400]));
+		expect(hidden).toEqual(new Set([2, 100, 150, 200, 300]));
 	});
 });