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>

ui/frontend/tests/e2e/fixtures/order-fbs.ts

@@ -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;
+	}
+}

ui/frontend/tests/e2e/fixtures/report-fbs.ts

@@ -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);

ui/frontend/tests/e2e/races.spec.ts

@@ -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");
+});