ui/phase-17: ship-class CRUD without calc

Phase 17 lights up the ship-class table and designer active views,
extends the order-draft pipeline with createShipClass and
removeShipClass commands, and projects pending Save/Delete actions
through applyOrderOverlay so the table reflects the player's
intent before auto-sync lands. The plan is corrected in the same
patch: per game/rules.txt, ship classes are designed once and
cannot be edited — the engine has no Update command, so the UI
exposes only Create + Delete.

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

ui/frontend/src/lib/active-view/designer-ship-class.svelte

@@ -1,28 +1,434 @@
 <!--
-Phase 10 stub for the ship-class designer active view. Phase 17 wires
-the CRUD list and Phase 18 the calc bridge. The optional `classId`
-URL segment is accepted but ignored at this point.
+Phase 17 ship-class designer. Two modes driven by the optional
+`classId` URL segment:
+
+  - **new (no classId)** — empty form with five numeric fields
+    plus name. Save is disabled until `validateShipClass` returns
+    `ok`; the localised tooltip mirrors `validateEntityName`'s
+    invalid-reason messages and the value-rule mirrors of
+    `pkg/calc/validator.go.ValidateShipTypeValues`. Save adds a
+    `createShipClass` to the local order draft and returns to the
+    table.
+  - **view (classId set)** — read-only render of the matching row
+    from the optimistic overlay. Ship classes are designed once
+    and cannot be modified after creation (per
+    `game/rules.txt`); the in-game upgrade story lives elsewhere
+    (`CommandShipGroupUpgrade`, Phase 19/20). The view exposes a
+    Delete affordance (engine-side checks ensure the class is not
+    referenced by active production / ship groups) and a Back
+    button.
+
+Phase 18 wires `pkg/calc/` into the form for live mass / speed /
+range / cargo previews; the markup keeps a placeholder slot near
+the value fields so the diff in Phase 18 stays minimal.
 -->
 <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 { ShipClassSummary } 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 {
+		validateShipClass,
+		type ShipClassInvalidReason,
+	} from "$lib/util/ship-class-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 classId = $derived(page.params.classId ?? "");
+	const isViewMode = $derived(classId !== "");
+
+	const localShipClass = $derived<ShipClassSummary[]>(
+		rendered?.report?.localShipClass ?? [],
+	);
+	const existingNames = $derived(localShipClass.map((cls) => cls.name));
+	const viewing = $derived(
+		isViewMode
+			? localShipClass.find((cls) => cls.name === classId) ?? null
+			: null,
+	);
+
+	let name = $state("");
+	let drive = $state(0);
+	let armament = $state(0);
+	let weapons = $state(0);
+	let shields = $state(0);
+	let cargo = $state(0);
+	let nameInputEl: HTMLInputElement | null = $state(null);
+
+	const invalidReasonKeyMap: Record<ShipClassInvalidReason, TranslationKey> = {
+		empty: "game.designer.ship_class.invalid.empty",
+		too_long: "game.designer.ship_class.invalid.too_long",
+		starts_with_special: "game.designer.ship_class.invalid.starts_with_special",
+		ends_with_special: "game.designer.ship_class.invalid.ends_with_special",
+		consecutive_specials:
+			"game.designer.ship_class.invalid.consecutive_specials",
+		whitespace: "game.designer.ship_class.invalid.whitespace",
+		disallowed_character:
+			"game.designer.ship_class.invalid.disallowed_character",
+		duplicate_name: "game.designer.ship_class.invalid.duplicate_name",
+		drive_value: "game.designer.ship_class.invalid.drive_value",
+		armament_value: "game.designer.ship_class.invalid.armament_value",
+		armament_not_integer:
+			"game.designer.ship_class.invalid.armament_not_integer",
+		weapons_value: "game.designer.ship_class.invalid.weapons_value",
+		shields_value: "game.designer.ship_class.invalid.shields_value",
+		cargo_value: "game.designer.ship_class.invalid.cargo_value",
+		armament_weapons_pair:
+			"game.designer.ship_class.invalid.armament_weapons_pair",
+		all_zero: "game.designer.ship_class.invalid.all_zero",
+	};
+
+	const validation = $derived(
+		validateShipClass(
+			{ name, drive, armament, weapons, shields, cargo },
+			{ existingNames },
+		),
+	);
+	const invalidMessage = $derived(
+		validation.ok ? "" : i18n.t(invalidReasonKeyMap[validation.reason]),
+	);
+	const canSave = $derived(validation.ok && draft !== undefined);
+
+	$effect(() => {
+		if (!isViewMode) {
+			void tick().then(() => nameInputEl?.focus());
+		}
+	});
+
+	function formatNumber(value: number): string {
+		return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+	}
+
+	function backToTable(): void {
+		void goto(`/games/${gameId}/table/ship-classes`);
+	}
+
+	async function save(): Promise<void> {
+		if (!validation.ok || draft === undefined) return;
+		await draft.add({
+			kind: "createShipClass",
+			id: crypto.randomUUID(),
+			name: validation.value.name,
+			drive: validation.value.drive,
+			armament: validation.value.armament,
+			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: "removeShipClass",
+			id: crypto.randomUUID(),
+			name: viewing.name,
+		});
+		backToTable();
+	}
 </script>
 
-<section class="active-view" data-testid="active-view-designer-ship-class">
-	<h2>{i18n.t("game.view.designer.ship_class")}</h2>
-	<p>{i18n.t("game.shell.coming_soon")}</p>
+<section
+	class="active-view"
+	data-testid="active-view-designer-ship-class"
+	data-mode={isViewMode ? "view" : "new"}
+>
+	{#if isViewMode}
+		{#if viewing === null}
+			<h2>{i18n.t("game.view.designer.ship_class")}</h2>
+			<p class="not-found" data-testid="designer-ship-class-not-found">
+				{i18n.t("game.designer.ship_class.not_found", { name: classId })}
+			</p>
+			<div class="actions">
+				<button
+					type="button"
+					data-testid="designer-ship-class-back"
+					onclick={backToTable}
+				>
+					{i18n.t("game.designer.ship_class.action.back")}
+				</button>
+			</div>
+		{:else}
+			<h2 data-testid="designer-ship-class-title">
+				{i18n.t("game.designer.ship_class.title.view", { name: viewing.name })}
+			</h2>
+			<p class="notice" data-testid="designer-ship-class-notice">
+				{i18n.t("game.designer.ship_class.read_only_notice")}
+			</p>
+			<dl class="fields">
+				<div class="field">
+					<dt>{i18n.t("game.designer.ship_class.field.name")}</dt>
+					<dd data-testid="designer-ship-class-view-name">{viewing.name}</dd>
+				</div>
+				<div class="field">
+					<dt>{i18n.t("game.designer.ship_class.field.drive")}</dt>
+					<dd data-testid="designer-ship-class-view-drive">
+						{formatNumber(viewing.drive)}
+					</dd>
+				</div>
+				<div class="field">
+					<dt>{i18n.t("game.designer.ship_class.field.armament")}</dt>
+					<dd data-testid="designer-ship-class-view-armament">
+						{viewing.armament}
+					</dd>
+				</div>
+				<div class="field">
+					<dt>{i18n.t("game.designer.ship_class.field.weapons")}</dt>
+					<dd data-testid="designer-ship-class-view-weapons">
+						{formatNumber(viewing.weapons)}
+					</dd>
+				</div>
+				<div class="field">
+					<dt>{i18n.t("game.designer.ship_class.field.shields")}</dt>
+					<dd data-testid="designer-ship-class-view-shields">
+						{formatNumber(viewing.shields)}
+					</dd>
+				</div>
+				<div class="field">
+					<dt>{i18n.t("game.designer.ship_class.field.cargo")}</dt>
+					<dd data-testid="designer-ship-class-view-cargo">
+						{formatNumber(viewing.cargo)}
+					</dd>
+				</div>
+			</dl>
+			<div class="actions">
+				<button
+					type="button"
+					class="back"
+					data-testid="designer-ship-class-back"
+					onclick={backToTable}
+				>
+					{i18n.t("game.designer.ship_class.action.back")}
+				</button>
+				<button
+					type="button"
+					class="delete"
+					data-testid="designer-ship-class-delete"
+					disabled={draft === undefined}
+					onclick={() => void deleteThis()}
+				>
+					{i18n.t("game.designer.ship_class.action.delete")}
+				</button>
+			</div>
+		{/if}
+	{:else}
+		<h2 data-testid="designer-ship-class-title">
+			{i18n.t("game.designer.ship_class.title.new")}
+		</h2>
+		<p class="hint" data-testid="designer-ship-class-hint">
+			{i18n.t("game.designer.ship_class.hint.values")}
+		</p>
+		<form
+			class="form"
+			data-testid="designer-ship-class-form"
+			onsubmit={(event) => {
+				event.preventDefault();
+				void save();
+			}}
+		>
+			<label class="row">
+				<span>{i18n.t("game.designer.ship_class.field.name")}</span>
+				<input
+					type="text"
+					bind:this={nameInputEl}
+					bind:value={name}
+					data-testid="designer-ship-class-input-name"
+					aria-invalid={validation.ok ? "false" : "true"}
+				/>
+			</label>
+			<label class="row">
+				<span>{i18n.t("game.designer.ship_class.field.drive")}</span>
+				<input
+					type="number"
+					step="0.01"
+					min="0"
+					bind:value={drive}
+					data-testid="designer-ship-class-input-drive"
+				/>
+			</label>
+			<label class="row">
+				<span>{i18n.t("game.designer.ship_class.field.armament")}</span>
+				<input
+					type="number"
+					step="1"
+					min="0"
+					bind:value={armament}
+					data-testid="designer-ship-class-input-armament"
+				/>
+			</label>
+			<label class="row">
+				<span>{i18n.t("game.designer.ship_class.field.weapons")}</span>
+				<input
+					type="number"
+					step="0.01"
+					min="0"
+					bind:value={weapons}
+					data-testid="designer-ship-class-input-weapons"
+				/>
+			</label>
+			<label class="row">
+				<span>{i18n.t("game.designer.ship_class.field.shields")}</span>
+				<input
+					type="number"
+					step="0.01"
+					min="0"
+					bind:value={shields}
+					data-testid="designer-ship-class-input-shields"
+				/>
+			</label>
+			<label class="row">
+				<span>{i18n.t("game.designer.ship_class.field.cargo")}</span>
+				<input
+					type="number"
+					step="0.01"
+					min="0"
+					bind:value={cargo}
+					data-testid="designer-ship-class-input-cargo"
+				/>
+			</label>
+			{#if !validation.ok}
+				<p class="error" data-testid="designer-ship-class-error">
+					{invalidMessage}
+				</p>
+			{/if}
+			<div class="actions">
+				<button
+					type="button"
+					class="cancel"
+					data-testid="designer-ship-class-cancel"
+					onclick={backToTable}
+				>
+					{i18n.t("game.designer.ship_class.action.cancel")}
+				</button>
+				<button
+					type="submit"
+					class="save"
+					data-testid="designer-ship-class-save"
+					disabled={!canSave}
+					title={canSave ? "" : invalidMessage}
+				>
+					{i18n.t("game.designer.ship_class.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;
+	}
+	.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-ship-classes.svelte

@@ -0,0 +1,328 @@
+<!--
+Phase 17 ship-classes table. Renders the player's designed ship
+classes with sort, filter, double-tap-to-open-designer, and a
+per-row Delete action. Source data is the optimistic overlay
+(`RenderedReportSource.report.localShipClass`) so a freshly
+queued `createShipClass` shows up immediately and a freshly
+queued `removeShipClass` disappears immediately — both before the
+auto-sync round-trip lands.
+
+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 { ShipClassSummary } 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"
+		| "armament"
+		| "weapons"
+		| "shields"
+		| "cargo";
+	type SortDirection = "asc" | "desc";
+
+	const COLUMN_LABELS: Record<SortColumn, TranslationKey> = {
+		name: "game.table.ship_classes.column.name",
+		drive: "game.table.ship_classes.column.drive",
+		armament: "game.table.ship_classes.column.armament",
+		weapons: "game.table.ship_classes.column.weapons",
+		shields: "game.table.ship_classes.column.shields",
+		cargo: "game.table.ship_classes.column.cargo",
+	};
+
+	const COLUMNS: readonly SortColumn[] = [
+		"name",
+		"drive",
+		"armament",
+		"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 localShipClass = $derived<ShipClassSummary[]>(
+		rendered?.report?.localShipClass ?? [],
+	);
+	const reportLoaded = $derived(rendered?.report !== null && rendered?.report !== undefined);
+
+	const filtered = $derived.by(() => {
+		const needle = filter.trim().toLowerCase();
+		if (needle === "") return localShipClass;
+		return localShipClass.filter((cls) =>
+			cls.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";
+	}
+
+	function formatNumber(value: number): string {
+		return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+	}
+
+	function openDesigner(name: string): void {
+		void goto(
+			`/games/${gameId}/designer/ship-class/${encodeURIComponent(name)}`,
+		);
+	}
+
+	function newShipClass(): void {
+		void goto(`/games/${gameId}/designer/ship-class`);
+	}
+
+	async function deleteShipClass(name: string): Promise<void> {
+		if (draft === undefined) return;
+		await draft.add({
+			kind: "removeShipClass",
+			id: crypto.randomUUID(),
+			name,
+		});
+	}
+</script>
+
+<section
+	class="active-view"
+	data-testid="active-view-table"
+	data-entity="ship-classes"
+>
+	<header>
+		<h2>{i18n.t("game.table.ship_classes.title")}</h2>
+		<div class="controls">
+			<input
+				type="search"
+				class="filter"
+				data-testid="ship-classes-filter"
+				placeholder={i18n.t("game.table.ship_classes.filter.placeholder")}
+				bind:value={filter}
+			/>
+			<button
+				type="button"
+				class="new"
+				data-testid="ship-classes-new"
+				onclick={newShipClass}
+			>
+				{i18n.t("game.table.ship_classes.action.new")}
+			</button>
+		</div>
+	</header>
+
+	{#if !reportLoaded}
+		<p class="status" data-testid="ship-classes-loading">
+			{i18n.t("game.table.ship_classes.loading")}
+		</p>
+	{:else if localShipClass.length === 0}
+		<p class="status" data-testid="ship-classes-empty">
+			{i18n.t("game.table.ship_classes.empty")}
+		</p>
+	{:else}
+		<table class="grid" data-testid="ship-classes-table">
+			<thead>
+				<tr>
+					{#each COLUMNS as column (column)}
+						<th aria-sort={ariaSort(column)}>
+							<button
+								type="button"
+								class="sort"
+								data-testid="ship-classes-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.ship_classes.column.actions")}</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each sorted as cls (cls.name)}
+					<tr
+						data-testid="ship-classes-row"
+						data-name={cls.name}
+						ondblclick={() => openDesigner(cls.name)}
+					>
+						<td data-testid="ship-classes-cell-name">{cls.name}</td>
+						<td data-testid="ship-classes-cell-drive">{formatNumber(cls.drive)}</td>
+						<td data-testid="ship-classes-cell-armament">{cls.armament}</td>
+						<td data-testid="ship-classes-cell-weapons">{formatNumber(cls.weapons)}</td>
+						<td data-testid="ship-classes-cell-shields">{formatNumber(cls.shields)}</td>
+						<td data-testid="ship-classes-cell-cargo">{formatNumber(cls.cargo)}</td>
+						<td>
+							<button
+								type="button"
+								class="delete"
+								data-testid="ship-classes-delete"
+								onclick={() => void deleteShipClass(cls.name)}
+							>
+								{i18n.t("game.table.ship_classes.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,11 +1,15 @@
 <!--
-Phase 10 stub for the entity-table active view. Phase 11+ wires real
-list data per entity (planets in Phase 11, ship-classes in Phase 17,
-etc.). Until then, the stub renders the localised entity title plus a
-`coming soon` body so navigation can be exercised end-to-end.
+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`,
+`view-menu`) keep matching.
 -->
 <script lang="ts">
 	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
+	import TableShipClasses from "./table-ship-classes.svelte";
 
 	type Props = { entity: string };
 	let { entity }: Props = $props();
@@ -16,12 +20,20 @@ etc.). Until then, the stub renders the localised entity title plus a
 	}
 </script>
 
-<section class="active-view" data-testid="active-view-table" data-entity={entity}>
-	<h2>
-		{i18n.t("game.view.table")}: {i18n.t(entityKey(entity))}
-	</h2>
-	<p>{i18n.t("game.shell.coming_soon")}</p>
-</section>
+{#if entity === "ship-classes"}
+	<TableShipClasses />
+{:else}
+	<section
+		class="active-view"
+		data-testid="active-view-table"
+		data-entity={entity}
+	>
+		<h2>
+			{i18n.t("game.view.table")}: {i18n.t(entityKey(entity))}
+		</h2>
+		<p>{i18n.t("game.shell.coming_soon")}</p>
+	</section>
+{/if}
 
 <style>
 	.active-view {

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

@@ -192,6 +192,52 @@ const en = {
 	"game.inspector.planet.cargo.pick.no_destinations": "no reachable destinations within {reach} world units",
 	"game.sidebar.order.label.cargo_route_set": "set {loadType} route from planet {source} → planet {destination}",
 	"game.sidebar.order.label.cargo_route_remove": "remove {loadType} route from planet {source}",
+	"game.sidebar.order.label.ship_class_create": "design ship class {name}",
+	"game.sidebar.order.label.ship_class_remove": "remove ship class {name}",
+	"game.table.ship_classes.title": "ship classes",
+	"game.table.ship_classes.column.name": "name",
+	"game.table.ship_classes.column.drive": "drive",
+	"game.table.ship_classes.column.armament": "armament",
+	"game.table.ship_classes.column.weapons": "weapons",
+	"game.table.ship_classes.column.shields": "shields",
+	"game.table.ship_classes.column.cargo": "cargo",
+	"game.table.ship_classes.column.actions": "actions",
+	"game.table.ship_classes.empty": "no ship classes designed yet",
+	"game.table.ship_classes.filter.placeholder": "filter by name",
+	"game.table.ship_classes.action.new": "+ new ship class",
+	"game.table.ship_classes.action.delete": "delete",
+	"game.table.ship_classes.loading": "loading ship classes…",
+	"game.designer.ship_class.title.new": "design new ship class",
+	"game.designer.ship_class.title.view": "ship class {name}",
+	"game.designer.ship_class.field.name": "name",
+	"game.designer.ship_class.field.drive": "drive",
+	"game.designer.ship_class.field.armament": "armament",
+	"game.designer.ship_class.field.weapons": "weapons",
+	"game.designer.ship_class.field.shields": "shields",
+	"game.designer.ship_class.field.cargo": "cargo",
+	"game.designer.ship_class.action.save": "save",
+	"game.designer.ship_class.action.cancel": "cancel",
+	"game.designer.ship_class.action.delete": "delete",
+	"game.designer.ship_class.action.back": "back",
+	"game.designer.ship_class.hint.values": "each value is either 0 or ≥ 1; armament is a non-negative integer; armament and weapons are both zero or both nonzero",
+	"game.designer.ship_class.read_only_notice": "ship classes are designed once; values cannot be edited after creation",
+	"game.designer.ship_class.not_found": "ship class \"{name}\" does not exist",
+	"game.designer.ship_class.invalid.empty": "name cannot be empty",
+	"game.designer.ship_class.invalid.too_long": "name is too long (30 characters max)",
+	"game.designer.ship_class.invalid.starts_with_special": "name cannot start with a special character",
+	"game.designer.ship_class.invalid.ends_with_special": "name cannot end with a special character",
+	"game.designer.ship_class.invalid.consecutive_specials": "too many special characters in a row",
+	"game.designer.ship_class.invalid.whitespace": "name cannot contain spaces",
+	"game.designer.ship_class.invalid.disallowed_character": "name contains disallowed characters",
+	"game.designer.ship_class.invalid.duplicate_name": "a ship class with this name already exists",
+	"game.designer.ship_class.invalid.drive_value": "drive must be 0 or ≥ 1",
+	"game.designer.ship_class.invalid.armament_value": "armament must be 0 or a positive integer",
+	"game.designer.ship_class.invalid.armament_not_integer": "armament must be an integer",
+	"game.designer.ship_class.invalid.weapons_value": "weapons must be 0 or ≥ 1",
+	"game.designer.ship_class.invalid.shields_value": "shields must be 0 or ≥ 1",
+	"game.designer.ship_class.invalid.cargo_value": "cargo must be 0 or ≥ 1",
+	"game.designer.ship_class.invalid.armament_weapons_pair": "armament and weapons must be both zero or both nonzero",
+	"game.designer.ship_class.invalid.all_zero": "at least one value must be nonzero",
 } as const;
 
 export default en;

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

@@ -193,6 +193,52 @@ const ru: Record<keyof typeof en, string> = {
 	"game.inspector.planet.cargo.pick.no_destinations": "нет планет в зоне полёта {reach} ед.",
 	"game.sidebar.order.label.cargo_route_set": "маршрут {loadType} с планеты {source} → планета {destination}",
 	"game.sidebar.order.label.cargo_route_remove": "удалить маршрут {loadType} с планеты {source}",
+	"game.sidebar.order.label.ship_class_create": "сконструировать класс корабля {name}",
+	"game.sidebar.order.label.ship_class_remove": "удалить класс корабля {name}",
+	"game.table.ship_classes.title": "классы кораблей",
+	"game.table.ship_classes.column.name": "название",
+	"game.table.ship_classes.column.drive": "двигатель",
+	"game.table.ship_classes.column.armament": "вооружённость",
+	"game.table.ship_classes.column.weapons": "оружие",
+	"game.table.ship_classes.column.shields": "защита",
+	"game.table.ship_classes.column.cargo": "трюм",
+	"game.table.ship_classes.column.actions": "действия",
+	"game.table.ship_classes.empty": "классы кораблей ещё не спроектированы",
+	"game.table.ship_classes.filter.placeholder": "фильтр по названию",
+	"game.table.ship_classes.action.new": "+ новый класс корабля",
+	"game.table.ship_classes.action.delete": "удалить",
+	"game.table.ship_classes.loading": "загрузка классов кораблей…",
+	"game.designer.ship_class.title.new": "конструктор нового класса корабля",
+	"game.designer.ship_class.title.view": "класс корабля {name}",
+	"game.designer.ship_class.field.name": "название",
+	"game.designer.ship_class.field.drive": "двигатель",
+	"game.designer.ship_class.field.armament": "вооружённость",
+	"game.designer.ship_class.field.weapons": "оружие",
+	"game.designer.ship_class.field.shields": "защита",
+	"game.designer.ship_class.field.cargo": "трюм",
+	"game.designer.ship_class.action.save": "сохранить",
+	"game.designer.ship_class.action.cancel": "отмена",
+	"game.designer.ship_class.action.delete": "удалить",
+	"game.designer.ship_class.action.back": "назад",
+	"game.designer.ship_class.hint.values": "каждое значение — 0 либо ≥ 1; вооружённость — целое неотрицательное; вооружённость и оружие должны быть оба нулевыми либо оба ненулевыми",
+	"game.designer.ship_class.read_only_notice": "классы кораблей проектируются один раз; характеристики нельзя изменить после создания",
+	"game.designer.ship_class.not_found": "класса \"{name}\" не существует",
+	"game.designer.ship_class.invalid.empty": "название не может быть пустым",
+	"game.designer.ship_class.invalid.too_long": "название слишком длинное (максимум 30 символов)",
+	"game.designer.ship_class.invalid.starts_with_special": "название не может начинаться со спецсимвола",
+	"game.designer.ship_class.invalid.ends_with_special": "название не может заканчиваться спецсимволом",
+	"game.designer.ship_class.invalid.consecutive_specials": "слишком много спецсимволов подряд",
+	"game.designer.ship_class.invalid.whitespace": "название не может содержать пробелы",
+	"game.designer.ship_class.invalid.disallowed_character": "название содержит недопустимые символы",
+	"game.designer.ship_class.invalid.duplicate_name": "класс с таким названием уже существует",
+	"game.designer.ship_class.invalid.drive_value": "двигатель должен быть 0 или ≥ 1",
+	"game.designer.ship_class.invalid.armament_value": "вооружённость должна быть 0 или положительным целым",
+	"game.designer.ship_class.invalid.armament_not_integer": "вооружённость должна быть целым числом",
+	"game.designer.ship_class.invalid.weapons_value": "оружие должно быть 0 или ≥ 1",
+	"game.designer.ship_class.invalid.shields_value": "защита должна быть 0 или ≥ 1",
+	"game.designer.ship_class.invalid.cargo_value": "трюм должен быть 0 или ≥ 1",
+	"game.designer.ship_class.invalid.armament_weapons_pair": "вооружённость и оружие должны быть оба нулевыми или оба ненулевыми",
+	"game.designer.ship_class.invalid.all_zero": "хотя бы одно значение должно быть ненулевым",
 };
 
 export default ru;

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

@@ -69,6 +69,14 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
 					loadType: cmd.loadType,
 					source: String(cmd.sourcePlanetNumber),
 				});
+			case "createShipClass":
+				return i18n.t("game.sidebar.order.label.ship_class_create", {
+					name: cmd.name,
+				});
+			case "removeShipClass":
+				return i18n.t("game.sidebar.order.label.ship_class_remove", {
+					name: cmd.name,
+				});
 		}
 	}
 

ui/frontend/src/lib/util/ship-class-validation.ts

@@ -0,0 +1,141 @@
+// TS port of `pkg/calc/validator.go.ValidateShipTypeValues` plus a
+// thin wrapper that runs the entity-name rules and a duplicate-name
+// check against the live `localShipClass` projection. The validator
+// is reused by the ship-class designer (`active-view/designer-ship-class.svelte`)
+// for inline error messages and by `OrderDraftStore.validateCommand`
+// to gate auto-sync, so the local invariants match the engine's
+// (`game/internal/controller/ship_class.go.ShipClassCreate`).
+//
+// Engine rules (from `pkg/calc/validator.go` and `game/rules.txt`):
+//
+//   - drive, weapons, shields, cargo: float, equal to 0 or >= 1;
+//   - armament: integer, >= 0;
+//   - either both `armament` and `weapons` are zero or both nonzero;
+//   - not all five values may be zero at once;
+//   - name must satisfy `validateEntityName` (`pkg/util/string.go`).
+//
+// The duplicate-name check is a UX-only addition — the engine raises
+// `EntityDuplicateIdentifierError` for a duplicate `Create` and the
+// auto-sync pipeline would surface that as a `rejected` row, but
+// catching it locally keeps the Save button disabled with a clear
+// hint instead of a red badge after a wire round-trip.
+
+import {
+	validateEntityName,
+	type EntityNameInvalidReason,
+} from "./entity-name";
+
+/**
+ * ShipClassInvalidReason enumerates every reason
+ * `validateShipClass` can refuse a draft. Name-derived reasons are
+ * the same identifiers `validateEntityName` returns, so the
+ * designer's `aria-describedby` mapping reuses the existing
+ * translation keys for those branches and adds new keys only for
+ * the value-derived ones.
+ */
+export type ShipClassInvalidReason =
+	| EntityNameInvalidReason
+	| "duplicate_name"
+	| "drive_value"
+	| "armament_value"
+	| "armament_not_integer"
+	| "weapons_value"
+	| "shields_value"
+	| "cargo_value"
+	| "armament_weapons_pair"
+	| "all_zero";
+
+/**
+ * ShipClassDraft is the structural shape the designer composes. The
+ * five numeric fields carry the player's typed values verbatim;
+ * `validateShipClass` is responsible for refusing non-finite or
+ * out-of-range entries.
+ */
+export interface ShipClassDraft {
+	name: string;
+	drive: number;
+	armament: number;
+	weapons: number;
+	shields: number;
+	cargo: number;
+}
+
+export type ShipClassValidation =
+	| { ok: true; value: ShipClassDraft }
+	| { ok: false; reason: ShipClassInvalidReason };
+
+/**
+ * validateShipClass mirrors `ValidateShipTypeValues` plus the
+ * entity-name rules. `existingNames` is the optimistic projection of
+ * already-designed ship classes (from `localShipClass` after
+ * `applyOrderOverlay`). When the trimmed name matches any entry,
+ * the validator returns `duplicate_name` so the designer's Save
+ * button stays disabled. Pass an empty array (or omit the option)
+ * to skip the duplicate check — useful for unit tests of the
+ * value-only rules.
+ */
+export function validateShipClass(
+	draft: ShipClassDraft,
+	options: { existingNames?: readonly string[] } = {},
+): ShipClassValidation {
+	const nameResult = validateEntityName(draft.name);
+	if (!nameResult.ok) {
+		return { ok: false, reason: nameResult.reason };
+	}
+	const trimmedName = nameResult.value;
+
+	if (!isValidDWSC(draft.drive)) {
+		return { ok: false, reason: "drive_value" };
+	}
+	if (!Number.isFinite(draft.armament) || draft.armament < 0) {
+		return { ok: false, reason: "armament_value" };
+	}
+	if (!Number.isInteger(draft.armament)) {
+		return { ok: false, reason: "armament_not_integer" };
+	}
+	if (!isValidDWSC(draft.weapons)) {
+		return { ok: false, reason: "weapons_value" };
+	}
+	if (!isValidDWSC(draft.shields)) {
+		return { ok: false, reason: "shields_value" };
+	}
+	if (!isValidDWSC(draft.cargo)) {
+		return { ok: false, reason: "cargo_value" };
+	}
+	if (
+		(draft.armament === 0 && draft.weapons !== 0) ||
+		(draft.armament !== 0 && draft.weapons === 0)
+	) {
+		return { ok: false, reason: "armament_weapons_pair" };
+	}
+	if (
+		draft.drive === 0 &&
+		draft.armament === 0 &&
+		draft.weapons === 0 &&
+		draft.shields === 0 &&
+		draft.cargo === 0
+	) {
+		return { ok: false, reason: "all_zero" };
+	}
+
+	const existing = options.existingNames ?? [];
+	if (existing.some((existingName) => existingName === trimmedName)) {
+		return { ok: false, reason: "duplicate_name" };
+	}
+
+	return {
+		ok: true,
+		value: { ...draft, name: trimmedName },
+	};
+}
+
+/**
+ * isValidDWSC mirrors `pkg/calc/validator.go.CheckShipTypeValueDWSC`:
+ * a Drive / Weapons / Shields / Cargo value is acceptable only when
+ * it is exactly zero or at least one. NaN, infinity, and negative
+ * numbers are rejected.
+ */
+function isValidDWSC(value: number): boolean {
+	if (!Number.isFinite(value)) return false;
+	return value === 0 || value >= 1;
+}