ui/phase-21: sciences CRUD list, designer, and production-picker integration

Lights up the player-defined sciences feature: a table view with sort
and filter, a designer with four percent inputs and a strict
sum-equals-100 gate, and a Research-sub-row integration so the
planet production picker lists the user's sciences alongside the
four tech buttons. Phase 21 decisions are baked back into ui/PLAN.md
(no UpdateScience on the wire — write-once via createScience +
removeScience; percentages instead of fractions; sciences live under
the existing Research segment).

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

ui/frontend/src/lib/active-view/designer-science.svelte

@@ -1,28 +1,448 @@
 <!--
-Phase 10 stub for the science designer active view. Phase 21 wires
-the CRUD list and designer. The optional `scienceId` URL segment is
-accepted but ignored at this point.
+Phase 21 science designer. Two modes driven by the optional
+`scienceId` URL segment:
+
+  - **new (no scienceId)** — empty form with four percent fields
+    plus name. Save is disabled until `validateScience` returns
+    `ok`; the localised tooltip mirrors `validateEntityName`'s
+    invalid-reason messages and the value-rule mirrors the engine's
+    `pkg/calc/validator.go.ValidateScienceValues`. Save adds a
+    `createScience` to the local order draft (with the four
+    percentages converted to fractions in `[0, 1]`) and returns to
+    the table.
+  - **view (scienceId set)** — read-only render of the matching row
+    from the optimistic overlay. Sciences are defined once and
+    cannot be modified after creation (Phase 21 decision: the wire
+    has only Create + Remove, no Update); the view exposes a Delete
+    affordance (engine-side checks ensure the science is not
+    referenced by an active production target) and a Back button.
+
+The four tech proportions are entered as percentages (`step="0.1"`)
+with a strict sum-equals-100 gate. The running sum is shown live so
+the player can chase it down; conversion to wire fractions happens
+inside `validateScience` only on Save. The choice of percent vs.
+fractions is a Phase 21 decision documented in
+`ui/docs/science-designer-ux.md`.
 -->
 <script lang="ts">
-	import { i18n } from "$lib/i18n/index.svelte";
+	import { getContext, tick } from "svelte";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
+
+	import type { ScienceSummary } from "../../api/game-state";
+	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
+	import {
+		RENDERED_REPORT_CONTEXT_KEY,
+		type RenderedReportSource,
+	} from "$lib/rendered-report.svelte";
+	import {
+		ORDER_DRAFT_CONTEXT_KEY,
+		OrderDraftStore,
+	} from "../../sync/order-draft.svelte";
+	import {
+		fractionsToPercent,
+		validateScience,
+		type ScienceInvalidReason,
+	} from "$lib/util/science-validation";
+
+	const rendered = getContext<RenderedReportSource | undefined>(
+		RENDERED_REPORT_CONTEXT_KEY,
+	);
+	const draft = getContext<OrderDraftStore | undefined>(
+		ORDER_DRAFT_CONTEXT_KEY,
+	);
+
+	const gameId = $derived(page.params.id ?? "");
+	const scienceId = $derived(page.params.scienceId ?? "");
+	const isViewMode = $derived(scienceId !== "");
+
+	const localScience = $derived<ScienceSummary[]>(
+		rendered?.report?.localScience ?? [],
+	);
+	const existingNames = $derived(localScience.map((sci) => sci.name));
+	const viewing = $derived(
+		isViewMode
+			? (localScience.find((sci) => sci.name === scienceId) ?? null)
+			: null,
+	);
+	const viewingPercent = $derived(
+		viewing === null ? null : fractionsToPercent(viewing),
+	);
+
+	let name = $state("");
+	let drive = $state(0);
+	let weapons = $state(0);
+	let shields = $state(0);
+	let cargo = $state(0);
+	let nameInputEl: HTMLInputElement | null = $state(null);
+
+	const invalidReasonKeyMap: Record<ScienceInvalidReason, TranslationKey> = {
+		empty: "game.designer.science.invalid.empty",
+		too_long: "game.designer.science.invalid.too_long",
+		starts_with_special: "game.designer.science.invalid.starts_with_special",
+		ends_with_special: "game.designer.science.invalid.ends_with_special",
+		consecutive_specials: "game.designer.science.invalid.consecutive_specials",
+		whitespace: "game.designer.science.invalid.whitespace",
+		disallowed_character: "game.designer.science.invalid.disallowed_character",
+		duplicate_name: "game.designer.science.invalid.duplicate_name",
+		drive_value: "game.designer.science.invalid.drive_value",
+		weapons_value: "game.designer.science.invalid.weapons_value",
+		shields_value: "game.designer.science.invalid.shields_value",
+		cargo_value: "game.designer.science.invalid.cargo_value",
+		sum_not_hundred: "game.designer.science.invalid.sum_not_hundred",
+	};
+
+	const validation = $derived(
+		validateScience(
+			{ name, drive, weapons, shields, cargo },
+			{ existingNames },
+		),
+	);
+	const invalidMessage = $derived(
+		validation.ok ? "" : i18n.t(invalidReasonKeyMap[validation.reason]),
+	);
+	const canSave = $derived(validation.ok && draft !== undefined);
+
+	const sumPercent = $derived(drive + weapons + shields + cargo);
+	const sumDisplay = $derived(
+		sumPercent.toLocaleString(undefined, {
+			minimumFractionDigits: 0,
+			maximumFractionDigits: 1,
+		}),
+	);
+
+	$effect(() => {
+		if (!isViewMode) {
+			void tick().then(() => nameInputEl?.focus());
+		}
+	});
+
+	function formatPercent(fraction: number): string {
+		return (fraction * 100).toLocaleString(undefined, {
+			minimumFractionDigits: 0,
+			maximumFractionDigits: 1,
+		});
+	}
+
+	function backToTable(): void {
+		void goto(`/games/${gameId}/table/sciences`);
+	}
+
+	async function save(): Promise<void> {
+		if (!validation.ok || draft === undefined) return;
+		await draft.add({
+			kind: "createScience",
+			id: crypto.randomUUID(),
+			name: validation.value.name,
+			drive: validation.value.drive,
+			weapons: validation.value.weapons,
+			shields: validation.value.shields,
+			cargo: validation.value.cargo,
+		});
+		backToTable();
+	}
+
+	async function deleteThis(): Promise<void> {
+		if (viewing === null || draft === undefined) return;
+		await draft.add({
+			kind: "removeScience",
+			id: crypto.randomUUID(),
+			name: viewing.name,
+		});
+		backToTable();
+	}
 </script>
 
-<section class="active-view" data-testid="active-view-designer-science">
-	<h2>{i18n.t("game.view.designer.science")}</h2>
-	<p>{i18n.t("game.shell.coming_soon")}</p>
+<section
+	class="active-view"
+	data-testid="active-view-designer-science"
+	data-mode={isViewMode ? "view" : "new"}
+>
+	{#if isViewMode}
+		{#if viewing === null || viewingPercent === null}
+			<h2>{i18n.t("game.view.designer.science")}</h2>
+			<p class="not-found" data-testid="designer-science-not-found">
+				{i18n.t("game.designer.science.not_found", { name: scienceId })}
+			</p>
+			<div class="actions">
+				<button
+					type="button"
+					data-testid="designer-science-back"
+					onclick={backToTable}
+				>
+					{i18n.t("game.designer.science.action.back")}
+				</button>
+			</div>
+		{:else}
+			<h2 data-testid="designer-science-title">
+				{i18n.t("game.designer.science.title.view", { name: viewing.name })}
+			</h2>
+			<p class="notice" data-testid="designer-science-notice">
+				{i18n.t("game.designer.science.read_only_notice")}
+			</p>
+			<dl class="fields">
+				<div class="field">
+					<dt>{i18n.t("game.designer.science.field.name")}</dt>
+					<dd data-testid="designer-science-view-name">{viewing.name}</dd>
+				</div>
+				<div class="field">
+					<dt>{i18n.t("game.designer.science.field.drive")}</dt>
+					<dd data-testid="designer-science-view-drive">
+						{formatPercent(viewing.drive)}
+					</dd>
+				</div>
+				<div class="field">
+					<dt>{i18n.t("game.designer.science.field.weapons")}</dt>
+					<dd data-testid="designer-science-view-weapons">
+						{formatPercent(viewing.weapons)}
+					</dd>
+				</div>
+				<div class="field">
+					<dt>{i18n.t("game.designer.science.field.shields")}</dt>
+					<dd data-testid="designer-science-view-shields">
+						{formatPercent(viewing.shields)}
+					</dd>
+				</div>
+				<div class="field">
+					<dt>{i18n.t("game.designer.science.field.cargo")}</dt>
+					<dd data-testid="designer-science-view-cargo">
+						{formatPercent(viewing.cargo)}
+					</dd>
+				</div>
+			</dl>
+			<div class="actions">
+				<button
+					type="button"
+					class="back"
+					data-testid="designer-science-back"
+					onclick={backToTable}
+				>
+					{i18n.t("game.designer.science.action.back")}
+				</button>
+				<button
+					type="button"
+					class="delete"
+					data-testid="designer-science-delete"
+					disabled={draft === undefined}
+					onclick={() => void deleteThis()}
+				>
+					{i18n.t("game.designer.science.action.delete")}
+				</button>
+			</div>
+		{/if}
+	{:else}
+		<h2 data-testid="designer-science-title">
+			{i18n.t("game.designer.science.title.new")}
+		</h2>
+		<p class="hint" data-testid="designer-science-hint">
+			{i18n.t("game.designer.science.hint.values")}
+		</p>
+		<form
+			class="form"
+			data-testid="designer-science-form"
+			onsubmit={(event) => {
+				event.preventDefault();
+				void save();
+			}}
+		>
+			<label class="row">
+				<span>{i18n.t("game.designer.science.field.name")}</span>
+				<input
+					type="text"
+					bind:this={nameInputEl}
+					bind:value={name}
+					data-testid="designer-science-input-name"
+					maxlength="30"
+					aria-invalid={validation.ok ? "false" : "true"}
+				/>
+			</label>
+			<label class="row">
+				<span>{i18n.t("game.designer.science.field.drive")}</span>
+				<input
+					type="number"
+					step="0.1"
+					min="0"
+					max="100"
+					bind:value={drive}
+					data-testid="designer-science-input-drive"
+				/>
+			</label>
+			<label class="row">
+				<span>{i18n.t("game.designer.science.field.weapons")}</span>
+				<input
+					type="number"
+					step="0.1"
+					min="0"
+					max="100"
+					bind:value={weapons}
+					data-testid="designer-science-input-weapons"
+				/>
+			</label>
+			<label class="row">
+				<span>{i18n.t("game.designer.science.field.shields")}</span>
+				<input
+					type="number"
+					step="0.1"
+					min="0"
+					max="100"
+					bind:value={shields}
+					data-testid="designer-science-input-shields"
+				/>
+			</label>
+			<label class="row">
+				<span>{i18n.t("game.designer.science.field.cargo")}</span>
+				<input
+					type="number"
+					step="0.1"
+					min="0"
+					max="100"
+					bind:value={cargo}
+					data-testid="designer-science-input-cargo"
+				/>
+			</label>
+			<p
+				class="sum"
+				data-testid="designer-science-sum"
+				data-sum-ok={validation.ok || (validation.reason !== "sum_not_hundred")
+					? "true"
+					: "false"}
+			>
+				{i18n.t("game.designer.science.field.sum", { value: sumDisplay })}
+			</p>
+			{#if !validation.ok}
+				<p class="error" data-testid="designer-science-error">
+					{invalidMessage}
+				</p>
+			{/if}
+			<div class="actions">
+				<button
+					type="button"
+					class="cancel"
+					data-testid="designer-science-cancel"
+					onclick={backToTable}
+				>
+					{i18n.t("game.designer.science.action.cancel")}
+				</button>
+				<button
+					type="submit"
+					class="save"
+					data-testid="designer-science-save"
+					disabled={!canSave}
+					title={canSave ? "" : invalidMessage}
+				>
+					{i18n.t("game.designer.science.action.save")}
+				</button>
+			</div>
+		</form>
+	{/if}
 </section>
 
 <style>
 	.active-view {
 		padding: 1.5rem;
 		font-family: system-ui, sans-serif;
+		display: flex;
+		flex-direction: column;
+		gap: 0.85rem;
 	}
 	.active-view h2 {
-		margin: 0 0 0.5rem;
+		margin: 0;
 		font-size: 1.1rem;
 	}
-	.active-view p {
+	.notice,
+	.hint,
+	.not-found {
 		margin: 0;
-		color: #555;
+		color: #888;
+		font-size: 0.85rem;
+	}
+	.form {
+		display: flex;
+		flex-direction: column;
+		gap: 0.55rem;
+		max-width: 30rem;
+	}
+	.row {
+		display: grid;
+		grid-template-columns: 8rem 1fr;
+		align-items: center;
+		gap: 0.6rem;
+	}
+	.row span {
+		color: #aab;
+		font-size: 0.85rem;
+	}
+	.row input {
+		font: inherit;
+		padding: 0.3rem 0.5rem;
+		background: #0a0e1a;
+		color: #e8eaf6;
+		border: 1px solid #2a3150;
+		border-radius: 3px;
+	}
+	.row input[aria-invalid="true"] {
+		border-color: #d97a7a;
+	}
+	.sum {
+		margin: 0;
+		font-size: 0.85rem;
+		color: #aab;
+	}
+	.sum[data-sum-ok="false"] {
+		color: #d97a7a;
+	}
+	.error {
+		margin: 0;
+		font-size: 0.8rem;
+		color: #d97a7a;
+	}
+	.fields {
+		margin: 0;
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		row-gap: 0.25rem;
+		column-gap: 0.75rem;
+		max-width: 30rem;
+	}
+	.field {
+		display: contents;
+	}
+	.field dt {
+		color: #aab;
+		font-size: 0.85rem;
+	}
+	.field dd {
+		margin: 0;
+		font-variant-numeric: tabular-nums;
+		font-size: 0.9rem;
+	}
+	.actions {
+		display: flex;
+		gap: 0.5rem;
+	}
+	.actions button {
+		font: inherit;
+		font-size: 0.9rem;
+		padding: 0.3rem 0.7rem;
+		background: transparent;
+		color: #aab;
+		border: 1px solid #2a3150;
+		border-radius: 3px;
+		cursor: pointer;
+	}
+	.actions button:not(:disabled):hover {
+		color: #e8eaf6;
+		border-color: #6d8cff;
+	}
+	.actions button:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+	.actions .delete {
+		color: #d97a7a;
+	}
+	.actions .delete:not(:disabled):hover {
+		border-color: #d97a7a;
+		color: #f0a0a0;
 	}
 </style>

ui/frontend/src/lib/active-view/table-sciences.svelte

@@ -0,0 +1,333 @@
+<!--
+Phase 21 sciences table. Renders the player's defined sciences with
+sort, filter, double-tap-to-open-designer, and a per-row Delete
+action. Source data is the optimistic overlay
+(`RenderedReportSource.report.localScience`) so a freshly queued
+`createScience` shows up immediately and a freshly queued
+`removeScience` disappears immediately — both before the auto-sync
+round-trip lands.
+
+The four tech proportions are stored on the wire as fractions in
+`[0, 1]` and surfaced here as percentages with one decimal so the
+table matches the designer's input units.
+
+The component sits inside the active-view slot owned by
+`routes/games/[id]/+layout.svelte`, so it inherits the per-game
+`OrderDraftStore` and `RenderedReportSource` through context. No
+data fetching is performed here — the layout is responsible.
+-->
+<script lang="ts">
+	import { getContext } from "svelte";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
+
+	import type { ScienceSummary } from "../../api/game-state";
+	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
+	import {
+		RENDERED_REPORT_CONTEXT_KEY,
+		type RenderedReportSource,
+	} from "$lib/rendered-report.svelte";
+	import {
+		ORDER_DRAFT_CONTEXT_KEY,
+		OrderDraftStore,
+	} from "../../sync/order-draft.svelte";
+
+	type SortColumn = "name" | "drive" | "weapons" | "shields" | "cargo";
+	type SortDirection = "asc" | "desc";
+
+	const COLUMN_LABELS: Record<SortColumn, TranslationKey> = {
+		name: "game.table.sciences.column.name",
+		drive: "game.table.sciences.column.drive",
+		weapons: "game.table.sciences.column.weapons",
+		shields: "game.table.sciences.column.shields",
+		cargo: "game.table.sciences.column.cargo",
+	};
+
+	const COLUMNS: readonly SortColumn[] = [
+		"name",
+		"drive",
+		"weapons",
+		"shields",
+		"cargo",
+	];
+
+	const rendered = getContext<RenderedReportSource | undefined>(
+		RENDERED_REPORT_CONTEXT_KEY,
+	);
+	const draft = getContext<OrderDraftStore | undefined>(
+		ORDER_DRAFT_CONTEXT_KEY,
+	);
+
+	const gameId = $derived(page.params.id ?? "");
+
+	let sortColumn: SortColumn = $state("name");
+	let sortDirection: SortDirection = $state("asc");
+	let filter: string = $state("");
+
+	const localScience = $derived<ScienceSummary[]>(
+		rendered?.report?.localScience ?? [],
+	);
+	const reportLoaded = $derived(
+		rendered?.report !== null && rendered?.report !== undefined,
+	);
+
+	const filtered = $derived.by(() => {
+		const needle = filter.trim().toLowerCase();
+		if (needle === "") return localScience;
+		return localScience.filter((sci) =>
+			sci.name.toLowerCase().includes(needle),
+		);
+	});
+
+	const sorted = $derived.by(() => {
+		const list = [...filtered];
+		const dir = sortDirection === "asc" ? 1 : -1;
+		list.sort((a, b) => {
+			if (sortColumn === "name") {
+				return a.name.localeCompare(b.name) * dir;
+			}
+			return (a[sortColumn] - b[sortColumn]) * dir;
+		});
+		return list;
+	});
+
+	function toggleSort(column: SortColumn): void {
+		if (sortColumn === column) {
+			sortDirection = sortDirection === "asc" ? "desc" : "asc";
+			return;
+		}
+		sortColumn = column;
+		sortDirection = "asc";
+	}
+
+	function ariaSort(column: SortColumn): "ascending" | "descending" | "none" {
+		if (sortColumn !== column) return "none";
+		return sortDirection === "asc" ? "ascending" : "descending";
+	}
+
+	// Render a fraction in `[0, 1]` as a one-decimal percent
+	// (`0.225` → `"22.5"`). The conversion is value-only — no `%`
+	// suffix — so callers can decorate independently.
+	function formatPercent(fraction: number): string {
+		return (fraction * 100).toLocaleString(undefined, {
+			minimumFractionDigits: 0,
+			maximumFractionDigits: 1,
+		});
+	}
+
+	function openDesigner(name: string): void {
+		void goto(`/games/${gameId}/designer/science/${encodeURIComponent(name)}`);
+	}
+
+	function newScience(): void {
+		void goto(`/games/${gameId}/designer/science`);
+	}
+
+	async function deleteScience(name: string): Promise<void> {
+		if (draft === undefined) return;
+		await draft.add({
+			kind: "removeScience",
+			id: crypto.randomUUID(),
+			name,
+		});
+	}
+</script>
+
+<section
+	class="active-view"
+	data-testid="active-view-table"
+	data-entity="sciences"
+>
+	<header>
+		<h2>{i18n.t("game.table.sciences.title")}</h2>
+		<div class="controls">
+			<input
+				type="search"
+				class="filter"
+				data-testid="sciences-filter"
+				placeholder={i18n.t("game.table.sciences.filter.placeholder")}
+				bind:value={filter}
+			/>
+			<button
+				type="button"
+				class="new"
+				data-testid="sciences-new"
+				onclick={newScience}
+			>
+				{i18n.t("game.table.sciences.action.new")}
+			</button>
+		</div>
+	</header>
+
+	{#if !reportLoaded}
+		<p class="status" data-testid="sciences-loading">
+			{i18n.t("game.table.sciences.loading")}
+		</p>
+	{:else if localScience.length === 0}
+		<p class="status" data-testid="sciences-empty">
+			{i18n.t("game.table.sciences.empty")}
+		</p>
+	{:else}
+		<table class="grid" data-testid="sciences-table">
+			<thead>
+				<tr>
+					{#each COLUMNS as column (column)}
+						<th aria-sort={ariaSort(column)}>
+							<button
+								type="button"
+								class="sort"
+								data-testid="sciences-column-{column}"
+								onclick={() => toggleSort(column)}
+							>
+								{i18n.t(COLUMN_LABELS[column])}
+								{#if sortColumn === column}
+									<span class="sort-indicator" aria-hidden="true">
+										{sortDirection === "asc" ? "▲" : "▼"}
+									</span>
+								{/if}
+							</button>
+						</th>
+					{/each}
+					<th>{i18n.t("game.table.sciences.column.actions")}</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each sorted as sci (sci.name)}
+					<tr
+						data-testid="sciences-row"
+						data-name={sci.name}
+						ondblclick={() => openDesigner(sci.name)}
+					>
+						<td data-testid="sciences-cell-name">{sci.name}</td>
+						<td data-testid="sciences-cell-drive">{formatPercent(sci.drive)}</td>
+						<td data-testid="sciences-cell-weapons">
+							{formatPercent(sci.weapons)}
+						</td>
+						<td data-testid="sciences-cell-shields">
+							{formatPercent(sci.shields)}
+						</td>
+						<td data-testid="sciences-cell-cargo">{formatPercent(sci.cargo)}</td>
+						<td>
+							<button
+								type="button"
+								class="delete"
+								data-testid="sciences-delete"
+								onclick={() => void deleteScience(sci.name)}
+							>
+								{i18n.t("game.table.sciences.action.delete")}
+							</button>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/if}
+</section>
+
+<style>
+	.active-view {
+		padding: 1.5rem;
+		font-family: system-ui, sans-serif;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+	header {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	header h2 {
+		margin: 0;
+		font-size: 1.1rem;
+	}
+	.controls {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	.filter {
+		font: inherit;
+		padding: 0.3rem 0.5rem;
+		background: #0a0e1a;
+		color: #e8eaf6;
+		border: 1px solid #2a3150;
+		border-radius: 3px;
+		flex: 1 1 12rem;
+		min-width: 8rem;
+	}
+	.new {
+		font: inherit;
+		font-size: 0.9rem;
+		padding: 0.3rem 0.7rem;
+		background: transparent;
+		color: #aab;
+		border: 1px solid #2a3150;
+		border-radius: 3px;
+		cursor: pointer;
+	}
+	.new:hover {
+		color: #e8eaf6;
+		border-color: #6d8cff;
+	}
+	.status {
+		margin: 0;
+		color: #888;
+		font-size: 0.9rem;
+	}
+	.grid {
+		border-collapse: collapse;
+		width: 100%;
+		font-variant-numeric: tabular-nums;
+	}
+	.grid th,
+	.grid td {
+		padding: 0.4rem 0.6rem;
+		text-align: left;
+		border-bottom: 1px solid #1c2240;
+		font-size: 0.9rem;
+	}
+	.grid th {
+		color: #aab;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		font-size: 0.75rem;
+	}
+	.grid tbody tr {
+		cursor: pointer;
+	}
+	.grid tbody tr:hover {
+		background: #11172a;
+	}
+	.sort {
+		font: inherit;
+		font-size: inherit;
+		text-transform: inherit;
+		letter-spacing: inherit;
+		color: inherit;
+		background: transparent;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		display: inline-flex;
+		gap: 0.3rem;
+		align-items: baseline;
+	}
+	.sort-indicator {
+		font-size: 0.7em;
+	}
+	.delete {
+		font: inherit;
+		font-size: 0.85rem;
+		padding: 0.15rem 0.5rem;
+		background: transparent;
+		color: #d97a7a;
+		border: 1px solid #2a3150;
+		border-radius: 3px;
+		cursor: pointer;
+	}
+	.delete:hover {
+		border-color: #d97a7a;
+	}
+</style>

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

@@ -1,15 +1,17 @@
 <!--
 Active-view router for the per-entity tables. Phase 17 lights up
-the ship-classes table; the other slugs (planets, ship-groups,
-fleets, sciences, races) keep the Phase 10 stub copy until their
-respective phases land. The wrapper preserves
-`data-testid="active-view-table"` and `data-entity={entity}` for
-both branches so the navigation e2e specs (`game-shell.spec.ts`,
+the ship-classes table; Phase 21 lights up the sciences table; the
+remaining slugs (planets, ship-groups, fleets, races) keep the
+Phase 10 stub copy until their respective phases land. The wrapper
+preserves `data-testid="active-view-table"` and
+`data-entity={entity}` for every branch (each leaf component
+mirrors them) so the navigation e2e specs (`game-shell.spec.ts`,
 `view-menu`) keep matching.
 -->
 <script lang="ts">
 	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
 	import TableShipClasses from "./table-ship-classes.svelte";
+	import TableSciences from "./table-sciences.svelte";
 
 	type Props = { entity: string };
 	let { entity }: Props = $props();
@@ -22,6 +24,8 @@ both branches so the navigation e2e specs (`game-shell.spec.ts`,
 
 {#if entity === "ship-classes"}
 	<TableShipClasses />
+{:else if entity === "sciences"}
+	<TableSciences />
 {:else}
 	<section
 		class="active-view"