ui/phase-22: races table with stance toggle and vote slot

Adds the Races View in the in-game shell. The table lists every non-extinct other race with tech levels (percent), totals, planets, votes received, and a per-row WAR | PEACE segmented control. A single vote-recipient slot above the table queues a `CommandRaceVote`; per-row buttons queue `CommandRaceRelation`. Both commands flow through the existing order draft store with collapse-by-acceptor (stance) and singleton (vote) rules. `GameReport` widens with `races`, `myVotes`, `myVoteFor`; the decoder walks `report.player[]` once for the richer projection. The optimistic overlay flips stance and vote target immediately; `votesReceived`, `myVotes`, and the alliance summary stay server-authoritative — alliance grouping and the 2/3 victory check are tallied on the server at turn cutoff and explicitly not surfaced client-side (`rules.txt` keeps foreign races' outgoing vote targets private). Includes Vitest component coverage of stance and vote collapse rules + a Playwright e2e that drives both commands through the dispatcher route and verifies the gateway saw the expected `CommandRaceRelation` / `CommandRaceVote` payloads. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-11 01:52:23 +02:00
parent 7a7f2e4b98
commit 9111dd955a
18 changed files with 1714 additions and 47 deletions
@@ -16,12 +16,15 @@ import {
 	CommandPlanetRename,
 	CommandPlanetRouteRemove,
 	CommandPlanetRouteSet,
+	CommandRaceRelation,
+	CommandRaceVote,
 	CommandScienceCreate,
 	CommandScienceRemove,
 	CommandShipClassCreate,
 	CommandShipClassRemove,
 	PlanetProduction,
 	PlanetRouteLoadType,
+	Relation,
 	UserGamesOrder,
 	UserGamesOrderGetResponse,
 	UserGamesOrderResponse,
@@ -98,6 +101,19 @@ export interface RemoveScienceResultFixture extends CommandResultFixtureBase {
 	name: string;
 }

+export interface SetDiplomaticStanceResultFixture
+	extends CommandResultFixtureBase {
+	kind: "setDiplomaticStance";
+	acceptor: string;
+	relation: "WAR" | "PEACE";
+}
+
+export interface SetVoteRecipientResultFixture
+	extends CommandResultFixtureBase {
+	kind: "setVoteRecipient";
+	acceptor: string;
+}
+
 export type CommandResultFixture =
 	| PlanetRenameResultFixture
 	| SetProductionTypeResultFixture
@@ -106,7 +122,9 @@ export type CommandResultFixture =
 	| CreateShipClassResultFixture
 	| RemoveShipClassResultFixture
 	| CreateScienceResultFixture
-	| RemoveScienceResultFixture;
+	| RemoveScienceResultFixture
+	| SetDiplomaticStanceResultFixture
+	| SetVoteRecipientResultFixture;

 export function buildOrderResponsePayload(
 	gameId: string,
@@ -255,6 +273,22 @@ function encodeItem(builder: Builder, c: CommandResultFixture): number {
 			payloadType = CommandPayload.CommandScienceRemove;
 			break;
 		}
+		case "setDiplomaticStance": {
+			const acceptorOffset = builder.createString(c.acceptor);
+			inner = CommandRaceRelation.createCommandRaceRelation(
+				builder,
+				acceptorOffset,
+				relationToFBS(c.relation),
+			);
+			payloadType = CommandPayload.CommandRaceRelation;
+			break;
+		}
+		case "setVoteRecipient": {
+			const acceptorOffset = builder.createString(c.acceptor);
+			inner = CommandRaceVote.createCommandRaceVote(builder, acceptorOffset);
+			payloadType = CommandPayload.CommandRaceVote;
+			break;
+		}
 	}
 	CommandItem.startCommandItem(builder);
 	CommandItem.addCmdId(builder, cmdIdOffset);
@@ -304,3 +338,14 @@ function cargoLoadTypeToFBS(
 			return PlanetRouteLoadType.EMP;
 	}
 }
+
+function relationToFBS(
+	value: SetDiplomaticStanceResultFixture["relation"],
+): Relation {
+	switch (value) {
+		case "WAR":
+			return Relation.WAR;
+		case "PEACE":
+			return Relation.PEACE;
+	}
+}
@@ -73,6 +73,15 @@ export interface ScienceFixture {
 export interface PlayerFixture {
 	name: string;
 	drive?: number;
+	weapons?: number;
+	shields?: number;
+	cargo?: number;
+	population?: number;
+	industry?: number;
+	planets?: number;
+	relation?: "WAR" | "PEACE" | "-";
+	votes?: number;
+	extinct?: boolean;
 }

 export interface RouteEntryFixture {
@@ -98,6 +107,8 @@ export interface ReportFixture {
 	race?: string;
 	players?: PlayerFixture[];
 	routes?: RouteFixture[];
+	myVotes?: number;
+	myVoteFor?: string;
 }

 export function buildReportPayload(fixture: ReportFixture): Uint8Array {
@@ -202,9 +213,20 @@ export function buildReportPayload(fixture: ReportFixture): Uint8Array {

 	const playerOffsets = (fixture.players ?? []).map((p) => {
 		const name = builder.createString(p.name);
+		const relation =
+			p.relation === undefined ? null : builder.createString(p.relation);
 		Player.startPlayer(builder);
 		Player.addName(builder, name);
 		Player.addDrive(builder, p.drive ?? 1);
+		Player.addWeapons(builder, p.weapons ?? 0);
+		Player.addShields(builder, p.shields ?? 0);
+		Player.addCargo(builder, p.cargo ?? 0);
+		Player.addPopulation(builder, p.population ?? 0);
+		Player.addIndustry(builder, p.industry ?? 0);
+		Player.addPlanets(builder, p.planets ?? 0);
+		if (relation !== null) Player.addRelation(builder, relation);
+		Player.addVotes(builder, p.votes ?? 0);
+		Player.addExtinct(builder, p.extinct ?? false);
 		return Player.endPlayer(builder);
 	});

@@ -257,6 +279,10 @@ export function buildReportPayload(fixture: ReportFixture): Uint8Array {
 			: Report.createRouteVector(builder, routeOffsets);
 	const raceOffset =
 		fixture.race === undefined ? null : builder.createString(fixture.race);
+	const voteForOffset =
+		fixture.myVoteFor === undefined
+			? null
+			: builder.createString(fixture.myVoteFor);

 	const totalPlanets =
 		(fixture.localPlanets ?? []).length +
@@ -270,6 +296,8 @@ export function buildReportPayload(fixture: ReportFixture): Uint8Array {
 	Report.addHeight(builder, fixture.mapHeight ?? 4000);
 	Report.addPlanetCount(builder, totalPlanets);
 	if (raceOffset !== null) Report.addRace(builder, raceOffset);
+	if (fixture.myVotes !== undefined) Report.addVotes(builder, fixture.myVotes);
+	if (voteForOffset !== null) Report.addVoteFor(builder, voteForOffset);
 	if (playerVec !== null) Report.addPlayer(builder, playerVec);
 	if (localVec !== null) Report.addLocalPlanet(builder, localVec);
 	if (otherVec !== null) Report.addOtherPlanet(builder, otherVec);
@@ -0,0 +1,316 @@
+// Phase 22 end-to-end coverage for the Races View. Boots an
+// authenticated session, mocks the gateway with three non-extinct
+// other races (mixed WAR/PEACE), navigates to the races table, then:
+//
+//   1. flips one row's stance from PEACE to WAR — observes the
+//      submitted order envelope decoded as `CommandRaceRelation`,
+//      with the expected `acceptor` + `relation`;
+//   2. changes the vote recipient — observes the submitted order
+//      envelope decoded as `CommandRaceVote`;
+//   3. after the auto-sync round-trip both rows show as `applied`
+//      in the sidebar order tab.
+
+import { fromJson, type JsonValue } from "@bufbuild/protobuf";
+import { expect, test, type Page } from "@playwright/test";
+import { ByteBuffer } from "flatbuffers";
+
+import { ExecuteCommandRequestSchema } from "../../src/proto/galaxy/gateway/v1/edge_gateway_pb";
+import { UUID } from "../../src/proto/galaxy/fbs/common";
+import {
+	CommandPayload,
+	CommandRaceRelation,
+	CommandRaceVote,
+	Relation,
+	UserGamesOrder,
+	UserGamesOrderGet,
+} from "../../src/proto/galaxy/fbs/order";
+import { GameReportRequest } from "../../src/proto/galaxy/fbs/report";
+import { forgeExecuteCommandResponseJson } from "./fixtures/sign-response";
+import {
+	buildMyGamesListPayload,
+	type GameFixture,
+} from "./fixtures/lobby-fbs";
+import { buildReportPayload } from "./fixtures/report-fbs";
+import {
+	buildOrderGetResponsePayload,
+	buildOrderResponsePayload,
+	type CommandResultFixture,
+} from "./fixtures/order-fbs";
+
+const SESSION_ID = "phase-22-races-session";
+const GAME_ID = "22222222-2222-2222-2222-222222222222";
+
+interface MockHandle {
+	get lastStance(): { acceptor: string; relation: "WAR" | "PEACE" } | null;
+	get lastVote(): { acceptor: string } | null;
+}
+
+async function mockGateway(page: Page): Promise<MockHandle> {
+	const game: GameFixture = {
+		gameId: GAME_ID,
+		gameName: "Phase 22 Game",
+		gameType: "private",
+		status: "running",
+		ownerUserId: "user-1",
+		minPlayers: 2,
+		maxPlayers: 8,
+		enrollmentEndsAtMs: BigInt(Date.now() + 86_400_000),
+		createdAtMs: BigInt(Date.now() - 86_400_000),
+		updatedAtMs: BigInt(Date.now()),
+		currentTurn: 1,
+	};
+
+	let storedOrder: CommandResultFixture[] = [];
+	let lastStance: MockHandle["lastStance"] = null;
+	let lastVote: MockHandle["lastVote"] = null;
+
+	await page.route(
+		"**/galaxy.gateway.v1.EdgeGateway/ExecuteCommand",
+		async (route) => {
+			const reqText = route.request().postData();
+			if (reqText === null) {
+				await route.fulfill({ status: 400 });
+				return;
+			}
+			const req = fromJson(
+				ExecuteCommandRequestSchema,
+				JSON.parse(reqText) as JsonValue,
+			);
+
+			let resultCode = "ok";
+			let payload: Uint8Array;
+			switch (req.messageType) {
+				case "lobby.my.games.list":
+					payload = buildMyGamesListPayload([game]);
+					break;
+				case "user.games.report": {
+					GameReportRequest.getRootAsGameReportRequest(
+						new ByteBuffer(req.payloadBytes),
+					).gameId(new UUID());
+					payload = buildReportPayload({
+						turn: 1,
+						mapWidth: 4000,
+						mapHeight: 4000,
+						race: "Earthlings",
+						myVotes: 4,
+						myVoteFor: "Earthlings",
+						players: [
+							{
+								name: "Earthlings",
+								drive: 1,
+								weapons: 1,
+								shields: 1,
+								cargo: 1,
+								population: 4000,
+								industry: 3000,
+								planets: 2,
+								relation: "-",
+								votes: 4,
+							},
+							{
+								name: "Andori",
+								drive: 1,
+								weapons: 1,
+								shields: 1,
+								cargo: 1,
+								population: 3000,
+								industry: 2500,
+								planets: 2,
+								relation: "PEACE",
+								votes: 3,
+							},
+							{
+								name: "Bajori",
+								drive: 1,
+								weapons: 1,
+								shields: 1,
+								cargo: 1,
+								population: 2000,
+								industry: 1500,
+								planets: 1,
+								relation: "PEACE",
+								votes: 2,
+							},
+							{
+								name: "Cardassian",
+								drive: 1,
+								weapons: 1,
+								shields: 1,
+								cargo: 1,
+								population: 1000,
+								industry: 800,
+								planets: 1,
+								relation: "WAR",
+								votes: 1,
+							},
+						],
+						localPlanets: [
+							{
+								number: 1,
+								name: "Earth",
+								x: 2000,
+								y: 2000,
+								size: 1000,
+								resources: 5,
+								population: 4000,
+								industry: 3000,
+							},
+						],
+					});
+					break;
+				}
+				case "user.games.order": {
+					const decoded = UserGamesOrder.getRootAsUserGamesOrder(
+						new ByteBuffer(req.payloadBytes),
+					);
+					const length = decoded.commandsLength();
+					const fixtures: CommandResultFixture[] = [];
+					for (let i = 0; i < length; i++) {
+						const item = decoded.commands(i);
+						if (item === null) continue;
+						const cmdId = item.cmdId() ?? "";
+						const payloadType = item.payloadType();
+						if (payloadType === CommandPayload.CommandRaceRelation) {
+							const inner = new CommandRaceRelation();
+							item.payload(inner);
+							const relation =
+								inner.relation() === Relation.WAR ? "WAR" : "PEACE";
+							lastStance = {
+								acceptor: inner.acceptor() ?? "",
+								relation,
+							};
+							fixtures.push({
+								kind: "setDiplomaticStance",
+								cmdId,
+								acceptor: lastStance.acceptor,
+								relation,
+								applied: true,
+								errorCode: null,
+							});
+							continue;
+						}
+						if (payloadType === CommandPayload.CommandRaceVote) {
+							const inner = new CommandRaceVote();
+							item.payload(inner);
+							lastVote = { acceptor: inner.acceptor() ?? "" };
+							fixtures.push({
+								kind: "setVoteRecipient",
+								cmdId,
+								acceptor: lastVote.acceptor,
+								applied: true,
+								errorCode: null,
+							});
+							continue;
+						}
+					}
+					storedOrder = fixtures;
+					payload = buildOrderResponsePayload(GAME_ID, fixtures, Date.now());
+					break;
+				}
+				case "user.games.order.get": {
+					UserGamesOrderGet.getRootAsUserGamesOrderGet(
+						new ByteBuffer(req.payloadBytes),
+					);
+					payload = buildOrderGetResponsePayload(
+						GAME_ID,
+						storedOrder,
+						Date.now(),
+						storedOrder.length > 0,
+					);
+					break;
+				}
+				default:
+					resultCode = "internal_error";
+					payload = new Uint8Array();
+			}
+
+			const body = await forgeExecuteCommandResponseJson({
+				requestId: req.requestId,
+				timestampMs: BigInt(Date.now()),
+				resultCode,
+				payloadBytes: payload,
+			});
+			await route.fulfill({
+				status: 200,
+				contentType: "application/json",
+				body,
+			});
+		},
+	);
+
+	await page.route(
+		"**/galaxy.gateway.v1.EdgeGateway/SubscribeEvents",
+		async () => {
+			await new Promise<void>(() => {});
+		},
+	);
+
+	return {
+		get lastStance() {
+			return lastStance;
+		},
+		get lastVote() {
+			return lastVote;
+		},
+	};
+}
+
+async function bootSession(page: Page): Promise<void> {
+	await page.goto("/__debug/store");
+	await expect(page.getByTestId("debug-store-ready")).toBeVisible();
+	await page.waitForFunction(() => window.__galaxyDebug?.ready === true);
+	await page.evaluate(() => window.__galaxyDebug!.clearSession());
+	await page.evaluate(
+		(id) => window.__galaxyDebug!.setDeviceSessionId(id),
+		SESSION_ID,
+	);
+	await page.evaluate(
+		(gameId) => window.__galaxyDebug!.clearOrderDraft(gameId),
+		GAME_ID,
+	);
+}
+
+test("toggle stance and pick a vote target via the races table", async ({
+	page,
+}, testInfo) => {
+	test.skip(
+		testInfo.project.name.startsWith("chromium-mobile"),
+		"phase 22 spec covers desktop layout; mobile inherits the same store",
+	);
+
+	const handle = await mockGateway(page);
+	await bootSession(page);
+	await page.goto(`/games/${GAME_ID}/table/races`);
+
+	const tableHost = page.getByTestId("active-view-table");
+	await expect(tableHost).toBeVisible();
+	await expect(page.getByTestId("races-table")).toBeVisible();
+
+	// Flip Andori from PEACE to WAR through the per-row segmented
+	// control. The optimistic overlay flips the buttons immediately;
+	// the auto-sync round-trip echoes back as applied.
+	const andoriRow = page.locator(
+		'[data-testid="races-row"][data-name="Andori"]',
+	);
+	const andoriWar = andoriRow.getByTestId("races-stance-war");
+	await andoriWar.click();
+	await expect(andoriWar).toHaveAttribute("aria-pressed", "true");
+
+	// Pick Andori as the vote target.
+	await page.getByTestId("races-vote-target").selectOption("Andori");
+
+	// Both commands appear in the sidebar order tab as applied.
+	await page.getByTestId("sidebar-tab-order").click();
+	const orderTool = page.getByTestId("sidebar-tool-order");
+	await expect(orderTool.getByTestId("order-command-status-0")).toHaveText(
+		"applied",
+	);
+	await expect(orderTool.getByTestId("order-command-status-1")).toHaveText(
+		"applied",
+	);
+
+	// The gateway saw both commands with the expected payloads.
+	expect(handle.lastStance?.acceptor).toBe("Andori");
+	expect(handle.lastStance?.relation).toBe("WAR");
+	expect(handle.lastVote?.acceptor).toBe("Andori");
+});
@@ -1,13 +1,15 @@
-// EMPTY_SHIP_GROUPS supplies empty arrays for the ancillary report
-// fields added in Phase 19 (ship-groups + fleets) and Phase 21
-// (sciences). Test fixtures spread it into their report objects so
-// the fixture body still focuses on the fields under test, without
-// forcing every spec to enumerate the full GameReport surface.
+// EMPTY_SHIP_GROUPS supplies empty arrays / zero defaults for the
+// ancillary report fields added in Phase 19 (ship-groups + fleets),
+// Phase 21 (sciences), and Phase 22 (races / diplomacy / voting).
+// Test fixtures spread it into their report objects so the fixture
+// body still focuses on the fields under test, without forcing
+// every spec to enumerate the full GameReport surface.

 import type {
 	ReportIncomingShipGroup,
 	ReportLocalFleet,
 	ReportLocalShipGroup,
+	ReportOtherRace,
 	ReportOtherShipGroup,
 	ReportUnidentifiedShipGroup,
 	ScienceSummary,
@@ -21,6 +23,9 @@ export const EMPTY_SHIP_GROUPS: {
 	localFleets: ReportLocalFleet[];
 	otherRaces: string[];
 	localScience: ScienceSummary[];
+	races: ReportOtherRace[];
+	myVotes: number;
+	myVoteFor: string;
 } = {
 	localShipGroups: [],
 	otherShipGroups: [],
@@ -29,4 +34,7 @@ export const EMPTY_SHIP_GROUPS: {
 	localFleets: [],
 	otherRaces: [],
 	localScience: [],
+	races: [],
+	myVotes: 0,
+	myVoteFor: "",
 };
@@ -69,6 +69,9 @@ function makeReport(
 		unidentifiedShipGroups: [],
 		localFleets: [],
 		otherRaces: [],
+		races: [],
+		myVotes: 0,
+		myVoteFor: "",
 		...overrides,
 	};
 }
@@ -0,0 +1,323 @@
+// Vitest coverage for the Phase 22 races table active view. The
+// component renders against a synthetic `RenderedReportSource` (no
+// live `GameStateStore`) and a real `OrderDraftStore` (so the per-row
+// stance toggle and the vote picker exercise the `add` path and the
+// IndexedDB persistence end-to-end). The render path also flows
+// through `applyOrderOverlay`, so the optimistic flips made by the
+// component must keep the test fixture's report intact: each test
+// passes the *raw* report and the helper recomputes the overlay on
+// every snapshot.
+
+import "@testing-library/jest-dom/vitest";
+import "fake-indexeddb/auto";
+import { fireEvent, render, waitFor } from "@testing-library/svelte";
+import {
+	afterEach,
+	beforeEach,
+	describe,
+	expect,
+	test,
+	vi,
+} from "vitest";
+
+import { i18n } from "../src/lib/i18n/index.svelte";
+import {
+	applyOrderOverlay,
+	type GameReport,
+	type ReportOtherRace,
+} from "../src/api/game-state";
+import {
+	ORDER_DRAFT_CONTEXT_KEY,
+	OrderDraftStore,
+} from "../src/sync/order-draft.svelte";
+import { RENDERED_REPORT_CONTEXT_KEY } from "../src/lib/rendered-report.svelte";
+import { IDBCache } from "../src/platform/store/idb-cache";
+import { openGalaxyDB, type GalaxyDB } from "../src/platform/store/idb";
+import type { Cache } from "../src/platform/store/index";
+import type { IDBPDatabase } from "idb";
+import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";
+
+const GAME_ID = "11111111-2222-3333-4444-555555555555";
+
+const pageMock = vi.hoisted(() => ({
+	url: new URL("http://localhost/games/g1/table/races"),
+	params: { id: "g1" } as Record<string, string>,
+}));
+
+const gotoMock = vi.hoisted(() => vi.fn());
+
+vi.mock("$app/state", () => ({
+	page: pageMock,
+}));
+
+vi.mock("$app/navigation", () => ({
+	goto: gotoMock,
+}));
+
+import TableRaces from "../src/lib/active-view/table-races.svelte";
+
+let db: IDBPDatabase<GalaxyDB>;
+let dbName: string;
+let cache: Cache;
+let draft: OrderDraftStore;
+
+beforeEach(async () => {
+	dbName = `galaxy-table-races-${crypto.randomUUID()}`;
+	db = await openGalaxyDB(dbName);
+	cache = new IDBCache(db);
+	draft = new OrderDraftStore();
+	await draft.init({ cache, gameId: GAME_ID });
+	i18n.resetForTests("en");
+	pageMock.params = { id: "g1" };
+	gotoMock.mockClear();
+});
+
+afterEach(async () => {
+	draft.dispose();
+	db.close();
+	await new Promise<void>((resolve) => {
+		const req = indexedDB.deleteDatabase(dbName);
+		req.onsuccess = () => resolve();
+		req.onerror = () => resolve();
+		req.onblocked = () => resolve();
+	});
+});
+
+function race(
+	overrides: Partial<ReportOtherRace> & Pick<ReportOtherRace, "name">,
+): ReportOtherRace {
+	return {
+		drive: 0,
+		weapons: 0,
+		shields: 0,
+		cargo: 0,
+		population: 0,
+		industry: 0,
+		planets: 0,
+		relation: "PEACE",
+		votesReceived: 0,
+		...overrides,
+	};
+}
+
+function makeReport(
+	races: ReportOtherRace[],
+	opts: { myVotes?: number; myVoteFor?: string } = {},
+): GameReport {
+	const baseEmpty = {
+		...EMPTY_SHIP_GROUPS,
+		races,
+		myVotes: opts.myVotes ?? 0,
+		myVoteFor: opts.myVoteFor ?? "",
+	};
+	return {
+		turn: 1,
+		mapWidth: 1000,
+		mapHeight: 1000,
+		planetCount: 0,
+		planets: [],
+		race: "Self",
+		localShipClass: [],
+		routes: [],
+		localPlayerDrive: 0,
+		localPlayerWeapons: 0,
+		localPlayerShields: 0,
+		localPlayerCargo: 0,
+		...baseEmpty,
+	};
+}
+
+function mountTable(report: GameReport | null) {
+	const renderedReport = {
+		get report() {
+			if (report === null) return null;
+			return applyOrderOverlay(report, draft.commands, draft.statuses);
+		},
+	};
+	const context = new Map<unknown, unknown>([
+		[ORDER_DRAFT_CONTEXT_KEY, draft],
+		[RENDERED_REPORT_CONTEXT_KEY, renderedReport],
+	]);
+	return render(TableRaces, { context });
+}
+
+describe("races table", () => {
+	test("renders a loading placeholder before the report lands", () => {
+		const ui = mountTable(null);
+		expect(ui.getByTestId("races-loading")).toBeInTheDocument();
+	});
+
+	test("renders an empty placeholder when no other races are known", () => {
+		const ui = mountTable(makeReport([]));
+		expect(ui.getByTestId("races-empty")).toBeInTheDocument();
+		// vote picker stays mounted but disabled
+		expect(ui.getByTestId("races-vote-target")).toBeDisabled();
+	});
+
+	test("renders one row per race with all ten columns populated", () => {
+		const ui = mountTable(
+			makeReport([
+				race({
+					name: "Andori",
+					drive: 0.25,
+					weapons: 0.5,
+					shields: 0.75,
+					cargo: 1.0,
+					population: 12345,
+					industry: 6789,
+					planets: 4,
+					relation: "WAR",
+					votesReceived: 3.5,
+				}),
+			]),
+		);
+		const rows = ui.getAllByTestId("races-row");
+		expect(rows).toHaveLength(1);
+		expect(rows[0]).toHaveAttribute("data-name", "Andori");
+		expect(ui.getByTestId("races-cell-name")).toHaveTextContent("Andori");
+		expect(ui.getByTestId("races-cell-drive")).toHaveTextContent("25");
+		expect(ui.getByTestId("races-cell-weapons")).toHaveTextContent("50");
+		expect(ui.getByTestId("races-cell-shields")).toHaveTextContent("75");
+		expect(ui.getByTestId("races-cell-cargo")).toHaveTextContent("100");
+		expect(ui.getByTestId("races-cell-population")).toHaveTextContent(
+			/12[,\s]345/,
+		);
+		expect(ui.getByTestId("races-cell-industry")).toHaveTextContent(
+			/6[,\s]?789/,
+		);
+		expect(ui.getByTestId("races-cell-planets")).toHaveTextContent("4");
+		expect(ui.getByTestId("races-cell-votes")).toHaveTextContent("3.5");
+	});
+
+	test("filters rows by case-insensitive name match", async () => {
+		const ui = mountTable(
+			makeReport([
+				race({ name: "Alpha" }),
+				race({ name: "Beta" }),
+				race({ name: "Gamma" }),
+			]),
+		);
+		await fireEvent.input(ui.getByTestId("races-filter"), {
+			target: { value: "PH" },
+		});
+		const rows = ui.getAllByTestId("races-row");
+		expect(rows).toHaveLength(1);
+		expect(rows[0]).toHaveAttribute("data-name", "Alpha");
+	});
+
+	test("toggles sort direction when the same column is clicked twice", async () => {
+		const ui = mountTable(
+			makeReport([
+				race({ name: "Alpha", votesReceived: 1 }),
+				race({ name: "Beta", votesReceived: 5 }),
+				race({ name: "Gamma", votesReceived: 3 }),
+			]),
+		);
+		const header = ui.getByTestId("races-column-votesReceived");
+		await fireEvent.click(header);
+		let names = ui
+			.getAllByTestId("races-row")
+			.map((row) => row.getAttribute("data-name"));
+		expect(names).toEqual(["Alpha", "Gamma", "Beta"]);
+		await fireEvent.click(header);
+		names = ui
+			.getAllByTestId("races-row")
+			.map((row) => row.getAttribute("data-name"));
+		expect(names).toEqual(["Beta", "Gamma", "Alpha"]);
+	});
+
+	test("clicking PEACE on a WAR row appends setDiplomaticStance and flips the overlay", async () => {
+		const ui = mountTable(
+			makeReport([race({ name: "Andori", relation: "WAR" })]),
+		);
+		const peaceButton = ui.getByTestId("races-stance-peace");
+		await fireEvent.click(peaceButton);
+		await waitFor(() => expect(draft.commands).toHaveLength(1));
+		const cmd = draft.commands[0]!;
+		if (cmd.kind !== "setDiplomaticStance") {
+			throw new Error("wrong kind");
+		}
+		expect(cmd.acceptor).toBe("Andori");
+		expect(cmd.relation).toBe("PEACE");
+		// After overlay the WAR button loses its `aria-pressed=true`.
+		await waitFor(() => {
+			expect(ui.getByTestId("races-stance-war")).toHaveAttribute(
+				"aria-pressed",
+				"false",
+			);
+			expect(ui.getByTestId("races-stance-peace")).toHaveAttribute(
+				"aria-pressed",
+				"true",
+			);
+		});
+	});
+
+	test("a second stance click for the same race collapses on acceptor", async () => {
+		const ui = mountTable(
+			makeReport([race({ name: "Andori", relation: "WAR" })]),
+		);
+		await fireEvent.click(ui.getByTestId("races-stance-peace"));
+		await waitFor(() => expect(draft.commands).toHaveLength(1));
+		const firstId = draft.commands[0]!.id;
+		await fireEvent.click(ui.getByTestId("races-stance-war"));
+		await waitFor(() => {
+			expect(draft.commands).toHaveLength(1);
+		});
+		const cmd = draft.commands[0]!;
+		if (cmd.kind !== "setDiplomaticStance") {
+			throw new Error("wrong kind");
+		}
+		expect(cmd.id).not.toBe(firstId);
+		expect(cmd.relation).toBe("WAR");
+	});
+
+	test("changing the vote picker appends setVoteRecipient", async () => {
+		const ui = mountTable(
+			makeReport(
+				[race({ name: "Andori" }), race({ name: "Bajori" })],
+				{ myVoteFor: "Andori" },
+			),
+		);
+		await fireEvent.change(ui.getByTestId("races-vote-target"), {
+			target: { value: "Bajori" },
+		});
+		await waitFor(() => expect(draft.commands).toHaveLength(1));
+		const cmd = draft.commands[0]!;
+		if (cmd.kind !== "setVoteRecipient") {
+			throw new Error("wrong kind");
+		}
+		expect(cmd.acceptor).toBe("Bajori");
+	});
+
+	test("a second vote pick collapses singleton regardless of target", async () => {
+		const ui = mountTable(
+			makeReport(
+				[
+					race({ name: "Andori" }),
+					race({ name: "Bajori" }),
+					race({ name: "Cardassian" }),
+				],
+				{ myVoteFor: "Andori" },
+			),
+		);
+		const select = ui.getByTestId("races-vote-target");
+		await fireEvent.change(select, { target: { value: "Bajori" } });
+		await waitFor(() => expect(draft.commands).toHaveLength(1));
+		await fireEvent.change(select, { target: { value: "Cardassian" } });
+		await waitFor(() => {
+			expect(draft.commands).toHaveLength(1);
+		});
+		const cmd = draft.commands[0]!;
+		if (cmd.kind !== "setVoteRecipient") {
+			throw new Error("wrong kind");
+		}
+		expect(cmd.acceptor).toBe("Cardassian");
+	});
+
+	test("my votes summary reads from the report", () => {
+		const ui = mountTable(
+			makeReport([race({ name: "Andori" })], { myVotes: 7.5 }),
+		);
+		expect(ui.getByTestId("races-my-votes")).toHaveTextContent("7.5");
+	});
+});