phase 8: lobby UI + cross-stack lobby command catalog + TS FlatBuffers

- Extend pkg/model/lobby and pkg/schema/fbs/lobby.fbs with public-games
  list, my-applications/invites lists, game-create, application-submit,
  invite-redeem/decline. Mirror the matching transcoder pairs and Go
  fixture round-trip tests.
- Wire the seven new lobby message types through
  gateway/internal/backendclient/{routes,lobby_commands}.go with
  per-command REST helpers, JSON-tolerant decoding of backend wire
  shapes, and httptest-based unit coverage for success / 4xx / 5xx /
  503 across each command.
- Introduce TS-side FlatBuffers via the `flatbuffers` runtime dep, a
  `make fbs-ts` target driving flatc, and the generated bindings under
  ui/frontend/src/proto/galaxy/fbs. Phase 7's `user.account.get` decode
  now uses these bindings as well, closing the JSON.parse vs
  FlatBuffers gap that would have failed against a real local stack.
- Replace the placeholder lobby with five sections (my games, pending
  invitations, my applications, public games, create new game) and the
  /lobby/create form. Submit-application uses an inline race-name
  form on the public-game card; create-game keeps name / description /
  turn_schedule / enrollment_ends_at always visible and the rest under
  an Advanced toggle with TS-side defaults.
- Update lobby/+page.svelte to throw LobbyError on non-ok result codes;
  GalaxyClient.executeCommand now returns { resultCode, payloadBytes }.
- Vitest binding round-trips, lobby.ts wrapper unit tests, lobby-page
  + lobby-create component tests, Playwright lobby-flow.spec covering
  create / submit / accept across all four projects. Phase 7 e2e was
  migrated to the FlatBuffers fixtures and to click+fill against the
  Safari-autofill readonly inputs.
- Mark Phase 8 done in ui/PLAN.md, mirror the wire-format note into
  Phase 7, append the new lobby commands to gateway/README.md and
  docs/ARCHITECTURE.md, add ui/docs/lobby.md.

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

ui/frontend/tests/e2e/auth-flow.spec.ts

@@ -16,6 +16,13 @@ import { fromJson, type JsonValue } from "@bufbuild/protobuf";
 import { expect, test, type Page } from "@playwright/test";
 import { ExecuteCommandRequestSchema } from "../../src/proto/galaxy/gateway/v1/edge_gateway_pb";
 import { forgeExecuteCommandResponseJson } from "./fixtures/sign-response";
+import {
+	buildAccountResponsePayload,
+	buildMyApplicationsListPayload,
+	buildMyGamesListPayload,
+	buildMyInvitesListPayload,
+	buildPublicGamesListPayload,
+} from "./fixtures/lobby-fbs";
 
 interface MockSetup {
 	pendingSubscribes: Array<() => void>;
@@ -58,19 +65,36 @@ async function mockGatewayHappyPath(
 				ExecuteCommandRequestSchema,
 				JSON.parse(reqText) as JsonValue,
 			);
-			const accountJson = JSON.stringify({
-				account: {
-					user_id: "user-1",
-					email: "pilot@example.com",
-					user_name: "player-test",
-					display_name: displayName,
-				},
-			});
+			let payload: Uint8Array;
+			switch (req.messageType) {
+				case "user.account.get":
+					payload = buildAccountResponsePayload({
+						userId: "user-1",
+						email: "pilot@example.com",
+						userName: "player-test",
+						displayName,
+					});
+					break;
+				case "lobby.my.games.list":
+					payload = buildMyGamesListPayload([]);
+					break;
+				case "lobby.public.games.list":
+					payload = buildPublicGamesListPayload([]);
+					break;
+				case "lobby.my.invites.list":
+					payload = buildMyInvitesListPayload([]);
+					break;
+				case "lobby.my.applications.list":
+					payload = buildMyApplicationsListPayload([]);
+					break;
+				default:
+					payload = new Uint8Array();
+			}
 			const responseJson = await forgeExecuteCommandResponseJson({
 				requestId: req.requestId,
 				timestampMs: BigInt(Date.now()),
 				resultCode: "ok",
-				payloadBytes: new TextEncoder().encode(accountJson),
+				payloadBytes: payload,
 			});
 			await route.fulfill({
 				status: 200,
@@ -122,9 +146,14 @@ async function mockGatewayHappyPath(
 async function completeLogin(page: Page): Promise<void> {
 	await page.goto("/");
 	await expect(page).toHaveURL(/\/login$/);
+	// Inputs render `readonly` initially as a Safari autofill-suppression
+	// workaround; the attribute drops on first focus. Click first so the
+	// onfocus handler runs before fill checks editability.
+	await page.getByTestId("login-email-input").click();
 	await page.getByTestId("login-email-input").fill("pilot@example.com");
 	await page.getByTestId("login-email-submit").click();
 	await expect(page.getByTestId("login-code-input")).toBeVisible();
+	await page.getByTestId("login-code-input").click();
 	await page.getByTestId("login-code-input").fill("123456");
 	await page.getByTestId("login-code-submit").click();
 	await expect(page).toHaveURL(/\/lobby$/);
@@ -213,6 +242,7 @@ test.describe("Phase 7 — auth flow", () => {
 			"отправить код",
 		);
 
+		await page.getByTestId("login-email-input").click();
 		await page.getByTestId("login-email-input").fill("pilot@example.com");
 		await page.getByTestId("login-email-submit").click();
 		await expect(page.getByTestId("login-code-input")).toBeVisible();

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

@@ -0,0 +1,258 @@
+// Helpers that build FlatBuffers payloads for the lobby Playwright
+// suite. Mirrors what `pkg/transcoder/lobby.go` produces in production,
+// so the forged response goes through the same TS decoder the lobby
+// page uses.
+
+import { Builder } from "flatbuffers";
+
+import {
+	AccountResponse,
+	AccountView,
+	EntitlementSnapshot,
+} from "../../../src/proto/galaxy/fbs/user";
+import {
+	ApplicationSubmitResponse,
+	ApplicationSummary,
+	GameCreateResponse,
+	GameSummary,
+	InviteDeclineResponse,
+	InviteRedeemResponse,
+	InviteSummary,
+	MyApplicationsListResponse,
+	MyGamesListResponse,
+	MyInvitesListResponse,
+	PublicGamesListResponse,
+} from "../../../src/proto/galaxy/fbs/lobby";
+
+export interface GameFixture {
+	gameId: string;
+	gameName: string;
+	gameType: string;
+	status: string;
+	ownerUserId?: string;
+	minPlayers?: number;
+	maxPlayers?: number;
+	enrollmentEndsAtMs?: bigint;
+	createdAtMs?: bigint;
+	updatedAtMs?: bigint;
+}
+
+export interface ApplicationFixture {
+	applicationId: string;
+	gameId: string;
+	applicantUserId: string;
+	raceName: string;
+	status: string;
+	createdAtMs?: bigint;
+	decidedAtMs?: bigint;
+}
+
+export interface InviteFixture {
+	inviteId: string;
+	gameId: string;
+	inviterUserId: string;
+	invitedUserId?: string;
+	code?: string;
+	raceName: string;
+	status: string;
+	createdAtMs?: bigint;
+	expiresAtMs?: bigint;
+	decidedAtMs?: bigint;
+}
+
+const DEFAULT_TIME_MS = 1_780_000_000_000n;
+
+function encodeGame(builder: Builder, game: GameFixture): number {
+	const gameId = builder.createString(game.gameId);
+	const gameName = builder.createString(game.gameName);
+	const gameType = builder.createString(game.gameType);
+	const status = builder.createString(game.status);
+	const ownerUserId = builder.createString(game.ownerUserId ?? "");
+	GameSummary.startGameSummary(builder);
+	GameSummary.addGameId(builder, gameId);
+	GameSummary.addGameName(builder, gameName);
+	GameSummary.addGameType(builder, gameType);
+	GameSummary.addStatus(builder, status);
+	GameSummary.addOwnerUserId(builder, ownerUserId);
+	GameSummary.addMinPlayers(builder, game.minPlayers ?? 2);
+	GameSummary.addMaxPlayers(builder, game.maxPlayers ?? 8);
+	GameSummary.addEnrollmentEndsAtMs(builder, game.enrollmentEndsAtMs ?? DEFAULT_TIME_MS);
+	GameSummary.addCreatedAtMs(builder, game.createdAtMs ?? DEFAULT_TIME_MS);
+	GameSummary.addUpdatedAtMs(builder, game.updatedAtMs ?? DEFAULT_TIME_MS);
+	return GameSummary.endGameSummary(builder);
+}
+
+function encodeApplication(builder: Builder, app: ApplicationFixture): number {
+	const applicationId = builder.createString(app.applicationId);
+	const gameId = builder.createString(app.gameId);
+	const applicantUserId = builder.createString(app.applicantUserId);
+	const raceName = builder.createString(app.raceName);
+	const status = builder.createString(app.status);
+	ApplicationSummary.startApplicationSummary(builder);
+	ApplicationSummary.addApplicationId(builder, applicationId);
+	ApplicationSummary.addGameId(builder, gameId);
+	ApplicationSummary.addApplicantUserId(builder, applicantUserId);
+	ApplicationSummary.addRaceName(builder, raceName);
+	ApplicationSummary.addStatus(builder, status);
+	ApplicationSummary.addCreatedAtMs(builder, app.createdAtMs ?? DEFAULT_TIME_MS);
+	ApplicationSummary.addDecidedAtMs(builder, app.decidedAtMs ?? 0n);
+	return ApplicationSummary.endApplicationSummary(builder);
+}
+
+function encodeInvite(builder: Builder, invite: InviteFixture): number {
+	const inviteId = builder.createString(invite.inviteId);
+	const gameId = builder.createString(invite.gameId);
+	const inviterUserId = builder.createString(invite.inviterUserId);
+	const invitedUserId = builder.createString(invite.invitedUserId ?? "");
+	const code = builder.createString(invite.code ?? "");
+	const raceName = builder.createString(invite.raceName);
+	const status = builder.createString(invite.status);
+	InviteSummary.startInviteSummary(builder);
+	InviteSummary.addInviteId(builder, inviteId);
+	InviteSummary.addGameId(builder, gameId);
+	InviteSummary.addInviterUserId(builder, inviterUserId);
+	InviteSummary.addInvitedUserId(builder, invitedUserId);
+	InviteSummary.addCode(builder, code);
+	InviteSummary.addRaceName(builder, raceName);
+	InviteSummary.addStatus(builder, status);
+	InviteSummary.addCreatedAtMs(builder, invite.createdAtMs ?? DEFAULT_TIME_MS);
+	InviteSummary.addExpiresAtMs(builder, invite.expiresAtMs ?? DEFAULT_TIME_MS);
+	InviteSummary.addDecidedAtMs(builder, invite.decidedAtMs ?? 0n);
+	return InviteSummary.endInviteSummary(builder);
+}
+
+export function buildMyGamesListPayload(games: GameFixture[]): Uint8Array {
+	const builder = new Builder(256);
+	const offsets = games.map((g) => encodeGame(builder, g));
+	const items = MyGamesListResponse.createItemsVector(builder, offsets);
+	MyGamesListResponse.startMyGamesListResponse(builder);
+	MyGamesListResponse.addItems(builder, items);
+	builder.finish(MyGamesListResponse.endMyGamesListResponse(builder));
+	return builder.asUint8Array();
+}
+
+export function buildPublicGamesListPayload(
+	games: GameFixture[],
+	page = 1,
+	pageSize = 50,
+): Uint8Array {
+	const builder = new Builder(256);
+	const offsets = games.map((g) => encodeGame(builder, g));
+	const items = PublicGamesListResponse.createItemsVector(builder, offsets);
+	PublicGamesListResponse.startPublicGamesListResponse(builder);
+	PublicGamesListResponse.addItems(builder, items);
+	PublicGamesListResponse.addPage(builder, page);
+	PublicGamesListResponse.addPageSize(builder, pageSize);
+	PublicGamesListResponse.addTotal(builder, games.length);
+	builder.finish(PublicGamesListResponse.endPublicGamesListResponse(builder));
+	return builder.asUint8Array();
+}
+
+export function buildMyApplicationsListPayload(
+	applications: ApplicationFixture[],
+): Uint8Array {
+	const builder = new Builder(256);
+	const offsets = applications.map((a) => encodeApplication(builder, a));
+	const items = MyApplicationsListResponse.createItemsVector(builder, offsets);
+	MyApplicationsListResponse.startMyApplicationsListResponse(builder);
+	MyApplicationsListResponse.addItems(builder, items);
+	builder.finish(MyApplicationsListResponse.endMyApplicationsListResponse(builder));
+	return builder.asUint8Array();
+}
+
+export function buildMyInvitesListPayload(invites: InviteFixture[]): Uint8Array {
+	const builder = new Builder(256);
+	const offsets = invites.map((i) => encodeInvite(builder, i));
+	const items = MyInvitesListResponse.createItemsVector(builder, offsets);
+	MyInvitesListResponse.startMyInvitesListResponse(builder);
+	MyInvitesListResponse.addItems(builder, items);
+	builder.finish(MyInvitesListResponse.endMyInvitesListResponse(builder));
+	return builder.asUint8Array();
+}
+
+export function buildGameCreateResponsePayload(game: GameFixture): Uint8Array {
+	const builder = new Builder(256);
+	const summary = encodeGame(builder, game);
+	GameCreateResponse.startGameCreateResponse(builder);
+	GameCreateResponse.addGame(builder, summary);
+	builder.finish(GameCreateResponse.endGameCreateResponse(builder));
+	return builder.asUint8Array();
+}
+
+export function buildApplicationSubmitResponsePayload(
+	application: ApplicationFixture,
+): Uint8Array {
+	const builder = new Builder(128);
+	const app = encodeApplication(builder, application);
+	ApplicationSubmitResponse.startApplicationSubmitResponse(builder);
+	ApplicationSubmitResponse.addApplication(builder, app);
+	builder.finish(ApplicationSubmitResponse.endApplicationSubmitResponse(builder));
+	return builder.asUint8Array();
+}
+
+export function buildInviteRedeemResponsePayload(invite: InviteFixture): Uint8Array {
+	const builder = new Builder(128);
+	const summary = encodeInvite(builder, invite);
+	InviteRedeemResponse.startInviteRedeemResponse(builder);
+	InviteRedeemResponse.addInvite(builder, summary);
+	builder.finish(InviteRedeemResponse.endInviteRedeemResponse(builder));
+	return builder.asUint8Array();
+}
+
+export function buildInviteDeclineResponsePayload(invite: InviteFixture): Uint8Array {
+	const builder = new Builder(128);
+	const summary = encodeInvite(builder, invite);
+	InviteDeclineResponse.startInviteDeclineResponse(builder);
+	InviteDeclineResponse.addInvite(builder, summary);
+	builder.finish(InviteDeclineResponse.endInviteDeclineResponse(builder));
+	return builder.asUint8Array();
+}
+
+export interface AccountFixture {
+	userId: string;
+	email: string;
+	userName: string;
+	displayName: string;
+}
+
+export function buildAccountResponsePayload(account: AccountFixture): Uint8Array {
+	const builder = new Builder(256);
+
+	const planCode = builder.createString("free");
+	const source = builder.createString("internal");
+	const reasonCode = builder.createString("");
+	EntitlementSnapshot.startEntitlementSnapshot(builder);
+	EntitlementSnapshot.addPlanCode(builder, planCode);
+	EntitlementSnapshot.addIsPaid(builder, false);
+	EntitlementSnapshot.addSource(builder, source);
+	EntitlementSnapshot.addReasonCode(builder, reasonCode);
+	EntitlementSnapshot.addStartsAtMs(builder, 0n);
+	EntitlementSnapshot.addEndsAtMs(builder, 0n);
+	EntitlementSnapshot.addUpdatedAtMs(builder, 0n);
+	const entitlement = EntitlementSnapshot.endEntitlementSnapshot(builder);
+
+	const userId = builder.createString(account.userId);
+	const email = builder.createString(account.email);
+	const userName = builder.createString(account.userName);
+	const displayName = builder.createString(account.displayName);
+	const preferredLanguage = builder.createString("en");
+	const timeZone = builder.createString("UTC");
+	const declaredCountry = builder.createString("");
+	AccountView.startAccountView(builder);
+	AccountView.addUserId(builder, userId);
+	AccountView.addEmail(builder, email);
+	AccountView.addUserName(builder, userName);
+	AccountView.addDisplayName(builder, displayName);
+	AccountView.addPreferredLanguage(builder, preferredLanguage);
+	AccountView.addTimeZone(builder, timeZone);
+	AccountView.addDeclaredCountry(builder, declaredCountry);
+	AccountView.addEntitlement(builder, entitlement);
+	AccountView.addCreatedAtMs(builder, 0n);
+	AccountView.addUpdatedAtMs(builder, 0n);
+	const view = AccountView.endAccountView(builder);
+
+	AccountResponse.startAccountResponse(builder);
+	AccountResponse.addAccount(builder, view);
+	builder.finish(AccountResponse.endAccountResponse(builder));
+	return builder.asUint8Array();
+}

ui/frontend/tests/e2e/lobby-flow.spec.ts

@@ -0,0 +1,340 @@
+// Phase 8 lobby end-to-end coverage. The gateway is mocked through
+// `page.route(...)` like in the Phase 7 spec; this spec dispatches by
+// `messageType` so each lobby command can return its own forged
+// FlatBuffers payload. The flows under test:
+//
+//   1) Land on /lobby with empty lists; create a private game; verify
+//      the new game appears in My Games after the redirect.
+//   2) Submit an application to a public game; verify the application
+//      shows up in My Applications.
+//   3) Accept an invitation; verify the invite card disappears.
+
+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 { GameCreateRequest } from "../../src/proto/galaxy/fbs/lobby";
+import { forgeExecuteCommandResponseJson } from "./fixtures/sign-response";
+import {
+	buildAccountResponsePayload,
+	buildApplicationSubmitResponsePayload,
+	buildGameCreateResponsePayload,
+	buildInviteRedeemResponsePayload,
+	buildMyApplicationsListPayload,
+	buildMyGamesListPayload,
+	buildMyInvitesListPayload,
+	buildPublicGamesListPayload,
+	type ApplicationFixture,
+	type GameFixture,
+	type InviteFixture,
+} from "./fixtures/lobby-fbs";
+
+interface LobbyState {
+	myGames: GameFixture[];
+	publicGames: GameFixture[];
+	invitations: InviteFixture[];
+	applications: ApplicationFixture[];
+}
+
+interface LobbyMocks {
+	state: LobbyState;
+	pendingSubscribes: Array<() => void>;
+	createGameCalls: GameFixture[];
+	applicationSubmitCalls: Array<{ gameId: string; raceName: string }>;
+	inviteRedeemCalls: Array<{ gameId: string; inviteId: string }>;
+}
+
+async function mockGateway(page: Page, initial: Partial<LobbyState> = {}): Promise<LobbyMocks> {
+	const mocks: LobbyMocks = {
+		state: {
+			myGames: initial.myGames ?? [],
+			publicGames: initial.publicGames ?? [],
+			invitations: initial.invitations ?? [],
+			applications: initial.applications ?? [],
+		},
+		pendingSubscribes: [],
+		createGameCalls: [],
+		applicationSubmitCalls: [],
+		inviteRedeemCalls: [],
+	};
+
+	await page.route("**/api/v1/public/auth/send-email-code", async (route) => {
+		await route.fulfill({
+			status: 200,
+			contentType: "application/json",
+			body: JSON.stringify({ challenge_id: "ch-test-1" }),
+		});
+	});
+
+	await page.route("**/api/v1/public/auth/confirm-email-code", async (route) => {
+		await route.fulfill({
+			status: 200,
+			contentType: "application/json",
+			body: JSON.stringify({ device_session_id: "dev-test-1" }),
+		});
+	});
+
+	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 "user.account.get":
+				payload = buildAccountResponsePayload({
+					userId: "user-1",
+					email: "pilot@example.com",
+					userName: "pilot",
+					displayName: "Pilot",
+				});
+				break;
+			case "lobby.my.games.list":
+				payload = buildMyGamesListPayload(mocks.state.myGames);
+				break;
+			case "lobby.public.games.list":
+				payload = buildPublicGamesListPayload(mocks.state.publicGames);
+				break;
+			case "lobby.my.invites.list":
+				payload = buildMyInvitesListPayload(mocks.state.invitations);
+				break;
+			case "lobby.my.applications.list":
+				payload = buildMyApplicationsListPayload(mocks.state.applications);
+				break;
+			case "lobby.game.create": {
+				const decoded = GameCreateRequest.getRootAsGameCreateRequest(
+					new ByteBuffer(req.payloadBytes),
+				);
+				const created: GameFixture = {
+					gameId: "private-newly-created",
+					gameName: decoded.gameName() ?? "",
+					gameType: "private",
+					status: "draft",
+					ownerUserId: "user-1",
+					minPlayers: decoded.minPlayers(),
+					maxPlayers: decoded.maxPlayers(),
+					enrollmentEndsAtMs: decoded.enrollmentEndsAtMs(),
+					createdAtMs: BigInt(Date.now()),
+					updatedAtMs: BigInt(Date.now()),
+				};
+				mocks.createGameCalls.push(created);
+				mocks.state.myGames = [...mocks.state.myGames, created];
+				payload = buildGameCreateResponsePayload(created);
+				break;
+			}
+			case "lobby.application.submit": {
+				const builder = req.payloadBytes;
+				const submitReq = await import("../../src/proto/galaxy/fbs/lobby");
+				const decoded = submitReq.ApplicationSubmitRequest.getRootAsApplicationSubmitRequest(
+					new ByteBuffer(builder),
+				);
+				const application: ApplicationFixture = {
+					applicationId: `app-${mocks.applicationSubmitCalls.length + 1}`,
+					gameId: decoded.gameId() ?? "",
+					applicantUserId: "user-1",
+					raceName: decoded.raceName() ?? "",
+					status: "pending",
+					createdAtMs: BigInt(Date.now()),
+				};
+				mocks.applicationSubmitCalls.push({
+					gameId: application.gameId,
+					raceName: application.raceName,
+				});
+				mocks.state.applications = [application, ...mocks.state.applications];
+				payload = buildApplicationSubmitResponsePayload(application);
+				break;
+			}
+			case "lobby.invite.redeem": {
+				const redeemMod = await import("../../src/proto/galaxy/fbs/lobby");
+				const decoded = redeemMod.InviteRedeemRequest.getRootAsInviteRedeemRequest(
+					new ByteBuffer(req.payloadBytes),
+				);
+				const gameId = decoded.gameId() ?? "";
+				const inviteId = decoded.inviteId() ?? "";
+				mocks.inviteRedeemCalls.push({ gameId, inviteId });
+				const original = mocks.state.invitations.find((i) => i.inviteId === inviteId);
+				const invite: InviteFixture = {
+					...(original ?? {
+						inviteId,
+						gameId,
+						inviterUserId: "user-host",
+						invitedUserId: "user-1",
+						raceName: "",
+					}),
+					status: "accepted",
+					decidedAtMs: BigInt(Date.now()),
+				};
+				mocks.state.invitations = mocks.state.invitations.filter(
+					(i) => i.inviteId !== inviteId,
+				);
+				const newGame: GameFixture = {
+					gameId,
+					gameName: "Invited Game",
+					gameType: "private",
+					status: "enrollment_open",
+					ownerUserId: "user-host",
+					minPlayers: 2,
+					maxPlayers: 8,
+					enrollmentEndsAtMs: BigInt(Date.now() + 1_000_000),
+				};
+				mocks.state.myGames = [...mocks.state.myGames, newGame];
+				payload = buildInviteRedeemResponsePayload(invite);
+				break;
+			}
+			default:
+				resultCode = "internal_error";
+				payload = new Uint8Array();
+				break;
+		}
+
+		const responseJson = await forgeExecuteCommandResponseJson({
+			requestId: req.requestId,
+			timestampMs: BigInt(Date.now()),
+			resultCode,
+			payloadBytes: payload,
+		});
+		await route.fulfill({
+			status: 200,
+			contentType: "application/json",
+			body: responseJson,
+		});
+	});
+
+	await page.route(
+		"**/galaxy.gateway.v1.EdgeGateway/SubscribeEvents",
+		async (route) => {
+			const action = await new Promise<"endOfStream" | "abort">((resolve) => {
+				mocks.pendingSubscribes.push(() => resolve("endOfStream"));
+			});
+			if (action === "abort") {
+				await route.abort();
+				return;
+			}
+			const body = new TextEncoder().encode("{}");
+			const frame = new Uint8Array(5 + body.length);
+			frame[0] = 0x02;
+			new DataView(frame.buffer).setUint32(1, body.length, false);
+			frame.set(body, 5);
+			await route.fulfill({
+				status: 200,
+				contentType: "application/connect+json",
+				body: Buffer.from(frame),
+			});
+		},
+	);
+
+	return mocks;
+}
+
+async function completeLogin(page: Page): Promise<void> {
+	await page.goto("/");
+	await expect(page).toHaveURL(/\/login$/);
+	// The login page renders the inputs `readonly` as a Safari
+	// autofill-suppression workaround; the readonly attribute is
+	// dropped on first focus. Playwright's `fill()` checks editability
+	// before its own focus call, so emulate the user gesture explicitly:
+	// click the input (focus → readonly drops), then fill.
+	await page.getByTestId("login-email-input").click();
+	await page.getByTestId("login-email-input").fill("pilot@example.com");
+	await page.getByTestId("login-email-submit").click();
+	await expect(page.getByTestId("login-code-input")).toBeVisible();
+	await page.getByTestId("login-code-input").click();
+	await page.getByTestId("login-code-input").fill("123456");
+	await page.getByTestId("login-code-submit").click();
+	await expect(page).toHaveURL(/\/lobby$/);
+}
+
+test.describe("Phase 8 — lobby flow", () => {
+	test("create-game flow lands the new game in My Games", async ({ page }) => {
+		const mocks = await mockGateway(page);
+		await completeLogin(page);
+
+		await expect(page.getByTestId("lobby-my-games-empty")).toBeVisible();
+		await expect(page.getByTestId("lobby-public-games-empty")).toBeVisible();
+
+		await page.getByTestId("lobby-create-button").click();
+		await expect(page).toHaveURL(/\/lobby\/create$/);
+
+		await page.getByTestId("lobby-create-game-name").click();
+		await page.getByTestId("lobby-create-game-name").fill("First Contact");
+		await page.getByTestId("lobby-create-turn-schedule").click();
+		await page.getByTestId("lobby-create-turn-schedule").fill("0 0 * * *");
+		await page
+			.getByTestId("lobby-create-enrollment-ends-at")
+			.fill("2026-06-01T12:00");
+		await page.getByTestId("lobby-create-submit").click();
+
+		await expect(page).toHaveURL(/\/lobby$/);
+		await expect(page.getByTestId("lobby-my-game-card")).toContainText("First Contact");
+		expect(mocks.createGameCalls.length).toBe(1);
+		expect(mocks.createGameCalls[0]!.gameName).toBe("First Contact");
+
+		mocks.pendingSubscribes.forEach((resolve) => resolve());
+	});
+
+	test("submitting an application produces a pending applications card", async ({
+		page,
+	}) => {
+		const mocks = await mockGateway(page, {
+			publicGames: [
+				{
+					gameId: "public-1",
+					gameName: "Open Lobby",
+					gameType: "public",
+					status: "enrollment_open",
+				},
+			],
+		});
+		await completeLogin(page);
+
+		await expect(page.getByTestId("lobby-public-game-apply")).toBeVisible();
+		await page.getByTestId("lobby-public-game-apply").click();
+		await page
+			.getByTestId("lobby-application-race-name")
+			.fill("Vegan Federation");
+		await page.getByTestId("lobby-application-submit").click();
+
+		await expect(page.getByTestId("lobby-application-card")).toBeVisible();
+		expect(mocks.applicationSubmitCalls).toEqual([
+			{ gameId: "public-1", raceName: "Vegan Federation" },
+		]);
+
+		mocks.pendingSubscribes.forEach((resolve) => resolve());
+	});
+
+	test("accepting an invitation removes it and adds the game to My Games", async ({
+		page,
+	}) => {
+		const mocks = await mockGateway(page, {
+			invitations: [
+				{
+					inviteId: "invite-1",
+					gameId: "private-1",
+					inviterUserId: "user-host",
+					invitedUserId: "user-1",
+					raceName: "Vegan Federation",
+					status: "pending",
+				},
+			],
+		});
+		await completeLogin(page);
+
+		await expect(page.getByTestId("lobby-invite-accept")).toBeVisible();
+		await page.getByTestId("lobby-invite-accept").click();
+
+		await expect(page.getByTestId("lobby-invite-accept")).toBeHidden();
+		await expect(page.getByTestId("lobby-my-game-card")).toContainText("Invited Game");
+		expect(mocks.inviteRedeemCalls).toEqual([
+			{ gameId: "private-1", inviteId: "invite-1" },
+		]);
+
+		mocks.pendingSubscribes.forEach((resolve) => resolve());
+	});
+});