Phase 28 (Steps 6+9): mail active view + i18n keys

Step 6 — mail active view + subcomponents.

- `lib/active-view/mail.svelte` replaces the Phase 10 stub with the
  list / detail layout: two-pane on desktop, one-pane stack on
  mobile (CSS media query, no separate route).
- `lib/active-view/mail/thread-list.svelte` renders per-race
  threads collapsed to their last message plus stand-alone
  system / admin / outgoing-broadcast items, with unread badges.
- `lib/active-view/mail/thread-pane.svelte` is the chat-style
  transcript for one race; bodies render through `textContent`,
  per-message Show original / translation toggles flip the
  rendering when a translated body is present, and a persistent
  reply box at the bottom calls `mailStore.composePersonal`.
- `lib/active-view/mail/system-item-pane.svelte` renders one
  stand-alone item read-only with the same translation toggle.
- `lib/active-view/mail/compose.svelte` is the compose dialog:
  recipient race picker fed from `report.races[]`, kind toggle
  (personal / broadcast / admin), admin sub-toggle for target
  user / all and recipient-scope picker. Server-side enforces
  paid-tier and owner gating; the UI surfaces 403 inline.
- `lib/active-view/mail/system-titles.ts` keeps the keyword →
  i18n-title mapping for lifecycle-hook system mail so both the
  list and the detail pane pick the same canonical title.

Step 9 — i18n strings (en + ru).

`game.mail.*`, `game.view.mail.badge`, `game.events.mail_new.*`,
`game.mail.system.*` keys added in lockstep across both locales
covering compose labels / validation copy / per-system titles /
translation toggle / reply / delete affordances.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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

@@ -1,27 +1,207 @@
 <!--
-Phase 10 stub for the diplomatic-mail active view. Phase 28 wires the
+Phase 28 active-view for the diplomatic mail. Replaces the Phase 10
-real mail listing.
+stub. Renders a two-pane list/detail layout on desktop and a
+one-pane stack on mobile; the inner pieces (thread list, thread
+pane, system-item pane, compose form) live under
+`./mail/*.svelte`.
 -->
 <script lang="ts">
+	import { page } from "$app/state";
+
 	import { i18n } from "$lib/i18n/index.svelte";
+	import { mailStore, type MailListEntry } from "$lib/mail-store.svelte";
+
+	import ThreadList from "./mail/thread-list.svelte";
+	import ThreadPane from "./mail/thread-pane.svelte";
+	import SystemItemPane from "./mail/system-item-pane.svelte";
+	import Compose from "./mail/compose.svelte";
+
+	let selectedKey = $state<string | null>(null);
+	let composeOpen = $state(false);
+
+	const gameId = $derived(page.params.id ?? "");
+
+	const entries = $derived(mailStore.entries);
+
+	const selected = $derived.by<MailListEntry | null>(() => {
+		if (selectedKey === null) {
+			return null;
+		}
+		return entries.find((entry) => entryKey(entry) === selectedKey) ?? null;
+	});
+
+	function entryKey(entry: MailListEntry): string {
+		return entry.kind === "thread"
+			? `thread:${entry.raceName}`
+			: `standalone:${entry.message.messageId}`;
+	}
+
+	function openEntry(entry: MailListEntry): void {
+		selectedKey = entryKey(entry);
+	}
+
+	function closePane(): void {
+		selectedKey = null;
+	}
 </script>
 
-<section class="active-view" data-testid="active-view-mail">
+<section class="mail" data-testid="active-view-mail">
+	<header class="mail-header">
 		<h2>{i18n.t("game.view.mail")}</h2>
-	<p>{i18n.t("game.shell.coming_soon")}</p>
+		<button
+			type="button"
+			class="compose-btn"
+			data-testid="mail-compose-open"
+			onclick={() => (composeOpen = true)}
+			disabled={mailStore.status !== "ready"}
+		>
+			{i18n.t("game.mail.compose_action")}
+		</button>
+	</header>
+
+	{#if mailStore.status === "loading"}
+		<p class="status" data-testid="mail-loading">
+			{i18n.t("game.mail.loading")}
+		</p>
+	{:else if mailStore.status === "error"}
+		<p class="status error" data-testid="mail-error">
+			{mailStore.error ?? i18n.t("game.mail.load_failed")}
+		</p>
+	{:else if entries.length === 0}
+		<p class="status" data-testid="mail-empty">
+			{i18n.t("game.mail.empty")}
+		</p>
+	{:else}
+		<div class="panes" class:detail-open={selected !== null}>
+			<div class="list-pane">
+				<ThreadList
+					{entries}
+					selectedKey={selectedKey}
+					onSelect={openEntry}
+				/>
+			</div>
+			<div class="detail-pane">
+				<button
+					type="button"
+					class="back-btn"
+					data-testid="mail-back"
+					onclick={closePane}
+				>
+					{i18n.t("game.mail.back")}
+				</button>
+				{#if selected === null}
+					<p class="status empty-detail">
+						{i18n.t("game.mail.select_thread")}
+					</p>
+				{:else if selected.kind === "thread"}
+					<ThreadPane thread={selected} {gameId} />
+				{:else}
+					<SystemItemPane entry={selected} />
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	{#if composeOpen}
+		<Compose
+			onClose={() => (composeOpen = false)}
+			onSent={(raceName: string | null) => {
+				composeOpen = false;
+				if (raceName !== null) {
+					selectedKey = `thread:${raceName}`;
+				}
+			}}
+		/>
+	{/if}
 </section>
 
 <style>
-	.active-view {
+	.mail {
-		padding: 1.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem;
 		font-family: system-ui, sans-serif;
 	}
-	.active-view h2 {
+	.mail-header {
-		margin: 0 0 0.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.mail-header h2 {
+		margin: 0;
 		font-size: 1.1rem;
 	}
-	.active-view p {
+	.compose-btn {
-		margin: 0;
+		font: inherit;
-		color: #555;
+		padding: 0.35rem 0.75rem;
+		border: 1px solid #444;
+		background: #1a1a1a;
+		color: #fff;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	.compose-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	.status {
+		color: #888;
+	}
+	.status.error {
+		color: #c62828;
+	}
+	.panes {
+		display: grid;
+		grid-template-columns: minmax(220px, 280px) 1fr;
+		gap: 1rem;
+		min-height: 320px;
+	}
+	.list-pane,
+	.detail-pane {
+		border: 1px solid #2a2a2a;
+		border-radius: 6px;
+		padding: 0.75rem;
+		background: #111;
+		overflow: hidden;
+	}
+	.list-pane {
+		max-height: 70vh;
+		overflow-y: auto;
+	}
+	.back-btn {
+		display: none;
+		font: inherit;
+		margin-bottom: 0.5rem;
+		padding: 0.25rem 0.5rem;
+		border: 1px solid #444;
+		background: transparent;
+		color: #fff;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	.empty-detail {
+		text-align: center;
+		padding: 2rem 0;
+	}
+	@media (max-width: 767px) {
+		.panes {
+			grid-template-columns: 1fr;
+		}
+		.list-pane {
+			display: block;
+		}
+		.detail-pane {
+			display: none;
+		}
+		.panes.detail-open .list-pane {
+			display: none;
+		}
+		.panes.detail-open .detail-pane {
+			display: block;
+		}
+		.panes.detail-open .back-btn {
+			display: inline-block;
+		}
 	}
 </style>

ui/frontend/src/lib/active-view/mail/compose.svelte

@@ -0,0 +1,273 @@
+<!--
+Phase 28 — compose dialog for diplomatic mail. The recipient picker
+reads `gameState.report.races[]` (Phase 22), the kind toggle exposes
+personal / broadcast / admin; broadcast and admin sends are gated
+server-side, the UI surfaces the resulting 403 inline.
+-->
+<script lang="ts">
+	import { getContext } from "svelte";
+
+	import { i18n } from "$lib/i18n/index.svelte";
+	import { mailStore } from "$lib/mail-store.svelte";
+	import {
+		RENDERED_REPORT_CONTEXT_KEY,
+		type RenderedReportSource,
+	} from "$lib/rendered-report.svelte";
+
+	type ComposeKind = "personal" | "broadcast" | "admin";
+	type AdminAudience = "active" | "active_and_removed" | "all_members";
+
+	let {
+		onClose,
+		onSent,
+	}: {
+		onClose: () => void;
+		onSent: (raceName: string | null) => void;
+	} = $props();
+
+	const rendered = getContext<RenderedReportSource | undefined>(
+		RENDERED_REPORT_CONTEXT_KEY,
+	);
+
+	const races = $derived.by<string[]>(() => {
+		const r = rendered?.report;
+		if (!r) {
+			return [];
+		}
+		return r.races.map((race) => race.name);
+	});
+
+	let kind = $state<ComposeKind>("personal");
+	let raceName = $state("");
+	let adminTarget = $state<"user" | "all">("user");
+	let adminAudience = $state<AdminAudience>("active");
+	let subject = $state("");
+	let body = $state("");
+	let error = $state<string | null>(null);
+	let sending = $state(false);
+
+	$effect(() => {
+		if (raceName === "" && races.length > 0) {
+			raceName = races[0];
+		}
+	});
+
+	async function submit(event: SubmitEvent): Promise<void> {
+		event.preventDefault();
+		error = null;
+		const bodyText = body.trim();
+		if (bodyText === "") {
+			error = i18n.t("game.mail.body_required");
+			return;
+		}
+		const needsRecipient = kind === "personal" || (kind === "admin" && adminTarget === "user");
+		if (needsRecipient && raceName === "") {
+			error = i18n.t("game.mail.recipient_required");
+			return;
+		}
+		sending = true;
+		try {
+			if (kind === "personal") {
+				await mailStore.composePersonal({
+					raceName,
+					subject,
+					body: bodyText,
+				});
+				onSent(raceName);
+				return;
+			}
+			if (kind === "broadcast") {
+				await mailStore.composeBroadcast({ subject, body: bodyText });
+				onSent(null);
+				return;
+			}
+			await mailStore.composeAdmin({
+				target: adminTarget,
+				raceName: adminTarget === "user" ? raceName : undefined,
+				recipients: adminTarget === "all" ? adminAudience : undefined,
+				subject,
+				body: bodyText,
+			});
+			onSent(null);
+		} catch (err) {
+			error = err instanceof Error ? err.message : String(err);
+		} finally {
+			sending = false;
+		}
+	}
+</script>
+
+<div class="overlay" data-testid="mail-compose">
+	<form class="dialog" onsubmit={submit}>
+		<header>
+			<h3>{i18n.t("game.mail.compose_action")}</h3>
+			<button type="button" class="close" onclick={onClose}>×</button>
+		</header>
+
+		<label>
+			{i18n.t("game.mail.compose.target_label")}
+			<select bind:value={kind} data-testid="mail-compose-kind">
+				<option value="personal">{i18n.t("game.mail.compose.target_personal")}</option>
+				<option value="broadcast">{i18n.t("game.mail.compose.target_broadcast")}</option>
+				<option value="admin">{i18n.t("game.mail.compose.target_admin")}</option>
+			</select>
+		</label>
+
+		{#if kind === "admin"}
+			<label>
+				{i18n.t("game.mail.compose.recipients_label")}
+				<select bind:value={adminTarget} data-testid="mail-compose-admin-target">
+					<option value="user">{i18n.t("game.mail.compose.target_personal")}</option>
+					<option value="all">{i18n.t("game.mail.compose.target_broadcast")}</option>
+				</select>
+			</label>
+			{#if adminTarget === "all"}
+				<label>
+					{i18n.t("game.mail.compose.recipients_label")}
+					<select bind:value={adminAudience} data-testid="mail-compose-admin-audience">
+						<option value="active">{i18n.t("game.mail.compose.recipients_active")}</option>
+						<option value="active_and_removed">{i18n.t("game.mail.compose.recipients_active_and_removed")}</option>
+						<option value="all_members">{i18n.t("game.mail.compose.recipients_all_members")}</option>
+					</select>
+				</label>
+			{/if}
+		{/if}
+
+		{#if kind === "personal" || (kind === "admin" && adminTarget === "user")}
+			<label>
+				{i18n.t("game.mail.recipient_label")}
+				<select bind:value={raceName} data-testid="mail-compose-recipient">
+					{#each races as race (race)}
+						<option value={race}>{race}</option>
+					{/each}
+				</select>
+			</label>
+		{/if}
+
+		<label>
+			<span class="visually-hidden">{i18n.t("game.mail.subject_placeholder")}</span>
+			<input
+				type="text"
+				bind:value={subject}
+				placeholder={i18n.t("game.mail.subject_placeholder")}
+				data-testid="mail-compose-subject"
+			/>
+		</label>
+
+		<label>
+			<span class="visually-hidden">{i18n.t("game.mail.body_placeholder")}</span>
+			<textarea
+				bind:value={body}
+				placeholder={i18n.t("game.mail.body_placeholder")}
+				rows="6"
+				data-testid="mail-compose-body"
+			></textarea>
+		</label>
+
+		{#if error}
+			<p class="error" data-testid="mail-compose-error">{error}</p>
+		{/if}
+
+		<footer>
+			<button type="button" onclick={onClose}>
+				{i18n.t("game.mail.compose.cancel")}
+			</button>
+			<button type="submit" disabled={sending} data-testid="mail-compose-send">
+				{i18n.t("game.mail.compose.send")}
+			</button>
+		</footer>
+	</form>
+</div>
+
+<style>
+	.overlay {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 50;
+	}
+	.dialog {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 1rem 1.25rem;
+		background: #161616;
+		border: 1px solid #2a2a2a;
+		border-radius: 8px;
+		min-width: min(420px, 90vw);
+		max-width: min(560px, 95vw);
+	}
+	header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	header h3 {
+		margin: 0;
+		font-size: 1rem;
+	}
+	.close {
+		font: inherit;
+		background: transparent;
+		border: none;
+		color: inherit;
+		font-size: 1.25rem;
+		cursor: pointer;
+	}
+	label {
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+		font-size: 0.85rem;
+		color: #ccc;
+	}
+	input,
+	textarea,
+	select {
+		font: inherit;
+		padding: 0.4rem 0.5rem;
+		border: 1px solid #444;
+		background: #111;
+		color: inherit;
+		border-radius: 4px;
+	}
+	footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+	}
+	footer button {
+		font: inherit;
+		padding: 0.35rem 0.75rem;
+		border: 1px solid #444;
+		background: #1a1a1a;
+		color: #fff;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	footer button[type="submit"] {
+		background: #2a4d7d;
+		border-color: #2a4d7d;
+	}
+	footer button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	.error {
+		color: #c62828;
+		font-size: 0.85rem;
+		margin: 0;
+	}
+	.visually-hidden {
+		position: absolute;
+		clip: rect(0 0 0 0);
+		clip-path: inset(50%);
+		height: 1px;
+		width: 1px;
+		overflow: hidden;
+	}
+</style>

ui/frontend/src/lib/active-view/mail/system-item-pane.svelte

@@ -0,0 +1,106 @@
+<!--
+Phase 28 — right-pane for stand-alone messages (system mail, admin
+notifications, and the caller's own paid-tier broadcasts). The pane
+is read-only: no reply box, no per-recipient context. Soft-delete is
+available for incoming rows that the caller has read.
+-->
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	import { i18n } from "$lib/i18n/index.svelte";
+	import { mailStore, type MailStandalone } from "$lib/mail-store.svelte";
+	import { systemTitleKey } from "./system-titles";
+
+	let { entry }: { entry: MailStandalone } = $props();
+
+	let showOriginal = $state(false);
+
+	const incoming = $derived(entry.message.recipientUserName !== "" && entry.message.senderKind !== "player");
+
+	onMount(() => {
+		if (incoming && entry.message.readAt === null) {
+			void mailStore.markRead(entry.message.messageId);
+		}
+	});
+
+	const displayBody = $derived(
+		entry.message.translatedBody && !showOriginal
+			? entry.message.translatedBody
+			: entry.message.body,
+	);
+	const displaySubject = $derived(
+		entry.message.translatedSubject && !showOriginal
+			? entry.message.translatedSubject
+			: entry.message.subject,
+	);
+
+	const headerKey = $derived.by(() => {
+		const m = entry.message;
+		if (m.senderKind === "system") {
+			return systemTitleKey(m);
+		}
+		if (m.senderKind === "admin") {
+			return "game.mail.admin.title" as const;
+		}
+		return "game.mail.broadcast.title" as const;
+	});
+</script>
+
+<div class="standalone" data-testid="mail-system-item">
+	<h3 class="title">{i18n.t(headerKey)}</h3>
+	{#if displaySubject}
+		<div class="subject">{displaySubject}</div>
+	{/if}
+	<p class="body">{displayBody}</p>
+	{#if entry.message.translatedBody}
+		<button
+			type="button"
+			class="toggle"
+			onclick={() => (showOriginal = !showOriginal)}
+		>
+			{showOriginal ? i18n.t("game.mail.show_translation") : i18n.t("game.mail.show_original")}
+		</button>
+	{/if}
+	{#if incoming}
+		<button
+			type="button"
+			class="delete"
+			onclick={() => mailStore.softDelete(entry.message.messageId)}
+			data-testid="mail-system-delete"
+		>
+			{i18n.t("game.mail.delete_action")}
+		</button>
+	{/if}
+</div>
+
+<style>
+	.standalone {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.title {
+		margin: 0;
+		font-size: 1rem;
+		color: #b3a14c;
+	}
+	.subject {
+		font-weight: 700;
+	}
+	.body {
+		margin: 0;
+		white-space: pre-wrap;
+	}
+	.toggle,
+	.delete {
+		align-self: flex-start;
+		font: inherit;
+		padding: 0.2rem 0.5rem;
+		border: 1px solid #444;
+		background: transparent;
+		color: inherit;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 0.8rem;
+	}
+</style>

ui/frontend/src/lib/active-view/mail/system-titles.ts

@@ -0,0 +1,30 @@
+// Maps a system-mail message (lifecycle hook) to its i18n title key.
+// Kept as a typed helper so the thread-list and detail panes pick the
+// same title even when the body templates evolve.
+
+import type { TranslationKey } from "$lib/i18n/index.svelte";
+import type { MailMessage } from "../../../api/diplomail";
+
+const KEYWORDS: Array<{ test: RegExp; key: TranslationKey }> = [
+	{ test: /game[._ ]paused/i, key: "game.mail.system.game_paused.title" },
+	{ test: /game[._ ]cancelled|cancelled/i, key: "game.mail.system.game_cancelled.title" },
+	{ test: /membership[._ ]removed|kicked/i, key: "game.mail.system.membership_removed.title" },
+	{ test: /membership[._ ]blocked|blocked/i, key: "game.mail.system.membership_blocked.title" },
+];
+
+/**
+ * systemTitleKey returns the localised title key for a system mail
+ * row. The lobby renders these messages through templated subjects;
+ * the UI matches on the subject to pick a canonical title regardless
+ * of language. Falls back to a generic system-mail title when no
+ * pattern matches.
+ */
+export function systemTitleKey(message: MailMessage): TranslationKey {
+	const subject = message.subject ?? "";
+	for (const { test, key } of KEYWORDS) {
+		if (test.test(subject)) {
+			return key;
+		}
+	}
+	return "game.mail.system.generic.title";
+}

ui/frontend/src/lib/active-view/mail/thread-list.svelte

@@ -0,0 +1,130 @@
+<!--
+Phase 28 — left-pane list of mail entries. Each entry is either a
+per-race thread (collapsed to the latest message) or a stand-alone
+system / admin / outgoing-broadcast item. The list is virtual only
+inside its scroll container; PixiJS / canvas concerns do not apply
+here.
+-->
+<script lang="ts">
+	import { i18n } from "$lib/i18n/index.svelte";
+	import type { MailListEntry } from "$lib/mail-store.svelte";
+	import { systemTitleKey } from "./system-titles";
+
+	let {
+		entries,
+		selectedKey,
+		onSelect,
+	}: {
+		entries: MailListEntry[];
+		selectedKey: string | null;
+		onSelect: (entry: MailListEntry) => void;
+	} = $props();
+
+	function entryKey(entry: MailListEntry): string {
+		return entry.kind === "thread"
+			? `thread:${entry.raceName}`
+			: `standalone:${entry.message.messageId}`;
+	}
+
+	function snippet(entry: MailListEntry): string {
+		if (entry.kind === "thread") {
+			const last = entry.messages[entry.messages.length - 1];
+			return last.subject || last.body;
+		}
+		return entry.message.subject || entry.message.body;
+	}
+</script>
+
+<ul class="list" data-testid="mail-thread-list">
+	{#each entries as entry (entryKey(entry))}
+		<li
+			class="row"
+			class:active={selectedKey === entryKey(entry)}
+			class:standalone={entry.kind === "standalone"}
+			class:has-unread={entry.kind === "thread" && entry.unreadCount > 0}
+			data-testid="mail-list-row"
+		>
+			<button
+				type="button"
+				class="row-btn"
+				onclick={() => onSelect(entry)}
+				data-thread-key={entryKey(entry)}
+			>
+				<span class="title">
+					{#if entry.kind === "thread"}
+						{entry.raceName}
+					{:else if entry.message.senderKind === "system"}
+						{i18n.t(systemTitleKey(entry.message))}
+					{:else if entry.message.senderKind === "admin"}
+						{i18n.t("game.mail.admin.title")}
+					{:else}
+						{i18n.t("game.mail.broadcast.title")}
+					{/if}
+				</span>
+				{#if entry.kind === "thread" && entry.unreadCount > 0}
+					<span class="badge" data-testid="mail-row-unread">{entry.unreadCount}</span>
+				{/if}
+				<span class="snippet">{snippet(entry)}</span>
+			</button>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+	.row-btn {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		grid-template-rows: auto auto;
+		gap: 0.25rem 0.5rem;
+		text-align: left;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font: inherit;
+		background: transparent;
+		color: inherit;
+		border: 1px solid transparent;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	.row.active .row-btn {
+		border-color: #555;
+		background: #1c1c1c;
+	}
+	.row.has-unread .title {
+		font-weight: 700;
+	}
+	.row.standalone .title {
+		color: #b3a14c;
+	}
+	.title {
+		grid-column: 1 / span 1;
+	}
+	.badge {
+		grid-column: 2 / span 1;
+		grid-row: 1 / span 1;
+		justify-self: end;
+		min-width: 1.5rem;
+		padding: 0 0.4rem;
+		text-align: center;
+		font-size: 0.75rem;
+		border-radius: 999px;
+		background: #2a4d7d;
+		color: #fff;
+	}
+	.snippet {
+		grid-column: 1 / span 2;
+		color: #999;
+		font-size: 0.85rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

ui/frontend/src/lib/active-view/mail/thread-pane.svelte

@@ -0,0 +1,255 @@
+<!--
+Phase 28 — right-pane transcript for a single per-race thread.
+Renders messages oldest → newest, with outgoing messages visually
+distinct from incoming. Each message body goes through `textContent`
+(no HTML parsing); the optional translation has a per-message
+"show original" / "show translation" toggle. A persistent reply box
+sits at the bottom of the pane.
+-->
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	import { i18n } from "$lib/i18n/index.svelte";
+	import { mailStore, type MailThread } from "$lib/mail-store.svelte";
+	import type { MailMessage } from "../../../api/diplomail";
+
+	let {
+		thread,
+		gameId,
+	}: {
+		thread: MailThread;
+		gameId: string;
+	} = $props();
+
+	let replyBody = $state("");
+	let replyError = $state<string | null>(null);
+	let sending = $state(false);
+	const showOriginal = $state<Map<string, boolean>>(new Map());
+
+	// Mark every still-unread incoming message in this thread as read
+	// when the pane mounts. Idempotent on the server; the store
+	// optimistically flips `readAt` so the header badge updates
+	// without waiting for the round-trip.
+	onMount(() => {
+		for (const m of thread.messages) {
+			const incoming = m.senderRaceName === thread.raceName;
+			if (incoming && m.readAt === null) {
+				void mailStore.markRead(m.messageId);
+			}
+		}
+	});
+
+	function isOutgoing(m: MailMessage): boolean {
+		// Outgoing messages have the local user as sender, which
+		// corresponds to `recipientRaceName === thread.raceName` (the
+		// thread is keyed on the other party's race name).
+		return m.recipientRaceName === thread.raceName;
+	}
+
+	function displayBody(m: MailMessage): string {
+		if (m.translatedBody && !showOriginal.get(m.messageId)) {
+			return m.translatedBody;
+		}
+		return m.body;
+	}
+
+	function displaySubject(m: MailMessage): string {
+		if (m.translatedSubject && !showOriginal.get(m.messageId)) {
+			return m.translatedSubject ?? "";
+		}
+		return m.subject;
+	}
+
+	function toggleTranslation(messageId: string): void {
+		showOriginal.set(messageId, !(showOriginal.get(messageId) ?? false));
+		// Trigger reactivity on the map proxy.
+		showOriginal.size; // eslint-disable-line @typescript-eslint/no-unused-expressions
+	}
+
+	async function submitReply(event: SubmitEvent): Promise<void> {
+		event.preventDefault();
+		replyError = null;
+		const body = replyBody.trim();
+		if (body === "") {
+			replyError = i18n.t("game.mail.body_required");
+			return;
+		}
+		sending = true;
+		try {
+			await mailStore.composePersonal({
+				raceName: thread.raceName,
+				subject: "",
+				body,
+			});
+			replyBody = "";
+		} catch (err) {
+			replyError = err instanceof Error ? err.message : String(err);
+		} finally {
+			sending = false;
+		}
+	}
+
+	$effect(() => {
+		// Force the component to depend on the gameId rune so a game
+		// switch re-mounts the pane (the parent unmounts the old one
+		// implicitly via the entry-key change, but this keeps the
+		// dependency explicit for SSR-disabled hot reloads).
+		void gameId;
+	});
+</script>
+
+<div class="thread" data-testid="mail-thread-pane">
+	<h3 class="title">{thread.raceName}</h3>
+	<ol class="messages">
+		{#each thread.messages as m (m.messageId)}
+			<li class="message" class:outgoing={isOutgoing(m)}>
+				<div class="meta">
+					<span class="from">
+						{#if isOutgoing(m)}
+							{i18n.t("game.mail.outgoing_label")}
+						{:else}
+							{thread.raceName}
+						{/if}
+					</span>
+					<time>{m.createdAt.toISOString().slice(0, 19).replace("T", " ")}</time>
+				</div>
+				{#if displaySubject(m)}
+					<div class="subject">{displaySubject(m)}</div>
+				{/if}
+				<p class="body">{displayBody(m)}</p>
+				{#if m.translatedBody}
+					<button
+						type="button"
+						class="toggle"
+						onclick={() => toggleTranslation(m.messageId)}
+					>
+						{#if showOriginal.get(m.messageId)}
+							{i18n.t("game.mail.show_translation")}
+						{:else}
+							{i18n.t("game.mail.show_original")}
+						{/if}
+					</button>
+				{/if}
+				{#if !isOutgoing(m)}
+					<button
+						type="button"
+						class="delete"
+						onclick={() => mailStore.softDelete(m.messageId)}
+						data-testid="mail-delete"
+					>
+						{i18n.t("game.mail.delete_action")}
+					</button>
+				{/if}
+			</li>
+		{/each}
+	</ol>
+
+	<form class="reply" onsubmit={submitReply}>
+		<label for="mail-reply-body">{i18n.t("game.mail.reply_label")}</label>
+		<textarea
+			id="mail-reply-body"
+			bind:value={replyBody}
+			placeholder={i18n.t("game.mail.body_placeholder")}
+			rows="3"
+			data-testid="mail-reply-body"
+		></textarea>
+		{#if replyError}
+			<p class="error" data-testid="mail-reply-error">{replyError}</p>
+		{/if}
+		<button type="submit" disabled={sending} data-testid="mail-reply-send">
+			{i18n.t("game.mail.compose.send")}
+		</button>
+	</form>
+</div>
+
+<style>
+	.thread {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		height: 100%;
+	}
+	.title {
+		margin: 0;
+		font-size: 1rem;
+	}
+	.messages {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		overflow-y: auto;
+		max-height: 50vh;
+	}
+	.message {
+		padding: 0.5rem 0.75rem;
+		border-radius: 6px;
+		background: #1c1c1c;
+		border: 1px solid #2a2a2a;
+	}
+	.message.outgoing {
+		background: #15252e;
+	}
+	.meta {
+		display: flex;
+		justify-content: space-between;
+		font-size: 0.8rem;
+		color: #999;
+		margin-bottom: 0.25rem;
+	}
+	.subject {
+		font-weight: 700;
+	}
+	.body {
+		margin: 0.25rem 0 0;
+		white-space: pre-wrap;
+	}
+	.toggle,
+	.delete {
+		margin-top: 0.5rem;
+		margin-right: 0.5rem;
+		font: inherit;
+		padding: 0.2rem 0.5rem;
+		border: 1px solid #444;
+		background: transparent;
+		color: inherit;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 0.8rem;
+	}
+	.reply {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+	.reply textarea {
+		font: inherit;
+		padding: 0.5rem;
+		border: 1px solid #444;
+		background: #111;
+		color: inherit;
+		border-radius: 4px;
+		resize: vertical;
+	}
+	.reply button {
+		align-self: flex-end;
+		font: inherit;
+		padding: 0.35rem 0.75rem;
+		border: 1px solid #444;
+		background: #1a1a1a;
+		color: #fff;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	.reply button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	.error {
+		color: #c62828;
+		font-size: 0.85rem;
+		margin: 0;
+	}
+</style>

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

@@ -123,6 +123,46 @@ const en = {
 	"game.view.report": "turn report",
 	"game.view.battle": "battle log",
 	"game.view.mail": "diplomatic mail",
+	"game.view.mail.badge": "{count}",
+	"game.events.mail_new.message": "new mail from {from}",
+	"game.events.mail_new.action": "view",
+	"game.mail.loading": "loading mail…",
+	"game.mail.load_failed": "could not load mail",
+	"game.mail.empty": "no diplomatic messages yet",
+	"game.mail.back": "back",
+	"game.mail.compose_action": "compose",
+	"game.mail.select_thread": "pick a thread on the left to read it",
+	"game.mail.broadcast.title": "your broadcast",
+	"game.mail.admin.title": "admin notification",
+	"game.mail.system.generic.title": "system message",
+	"game.mail.system.game_paused.title": "game paused",
+	"game.mail.system.game_cancelled.title": "game cancelled",
+	"game.mail.system.membership_removed.title": "membership removed",
+	"game.mail.system.membership_blocked.title": "membership blocked",
+	"game.mail.subject_placeholder": "subject (optional)",
+	"game.mail.body_placeholder": "your message…",
+	"game.mail.recipient_label": "race",
+	"game.mail.recipient_required": "pick a recipient race",
+	"game.mail.body_required": "the message body cannot be empty",
+	"game.mail.body_too_long": "the body exceeds the {limit} byte limit",
+	"game.mail.subject_too_long": "the subject exceeds the {limit} byte limit",
+	"game.mail.compose.send": "send",
+	"game.mail.compose.cancel": "cancel",
+	"game.mail.compose.target_personal": "personal",
+	"game.mail.compose.target_broadcast": "broadcast",
+	"game.mail.compose.target_admin": "admin",
+	"game.mail.compose.recipients_active": "active members",
+	"game.mail.compose.recipients_active_and_removed": "active + removed",
+	"game.mail.compose.recipients_all_members": "all members",
+	"game.mail.compose.target_label": "kind",
+	"game.mail.compose.recipients_label": "audience",
+	"game.mail.compose.send_failed": "send failed",
+	"game.mail.show_original": "show original",
+	"game.mail.show_translation": "show translation",
+	"game.mail.translation_unavailable": "translation unavailable",
+	"game.mail.reply_label": "reply",
+	"game.mail.delete_action": "delete",
+	"game.mail.outgoing_label": "you",
 	"game.view.designer.ship_class": "ship-class designer",
 	"game.view.designer.science": "science designer",
 	"game.sidebar.tab.calculator": "calculator",

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

@@ -124,6 +124,46 @@ const ru: Record<keyof typeof en, string> = {
 	"game.view.report": "отчёт хода",
 	"game.view.battle": "журнал боёв",
 	"game.view.mail": "дипломатическая почта",
+	"game.view.mail.badge": "{count}",
+	"game.events.mail_new.message": "новое письмо от {from}",
+	"game.events.mail_new.action": "открыть",
+	"game.mail.loading": "загрузка почты…",
+	"game.mail.load_failed": "не удалось загрузить почту",
+	"game.mail.empty": "дипломатических сообщений пока нет",
+	"game.mail.back": "назад",
+	"game.mail.compose_action": "написать",
+	"game.mail.select_thread": "выбери ветку слева",
+	"game.mail.broadcast.title": "твоя рассылка",
+	"game.mail.admin.title": "административное уведомление",
+	"game.mail.system.generic.title": "системное сообщение",
+	"game.mail.system.game_paused.title": "игра поставлена на паузу",
+	"game.mail.system.game_cancelled.title": "игра отменена",
+	"game.mail.system.membership_removed.title": "членство удалено",
+	"game.mail.system.membership_blocked.title": "членство заблокировано",
+	"game.mail.subject_placeholder": "тема (необязательно)",
+	"game.mail.body_placeholder": "твоё сообщение…",
+	"game.mail.recipient_label": "раса",
+	"game.mail.recipient_required": "выбери расу-получателя",
+	"game.mail.body_required": "тело сообщения не может быть пустым",
+	"game.mail.body_too_long": "длина тела превышает лимит {limit} байт",
+	"game.mail.subject_too_long": "длина темы превышает лимит {limit} байт",
+	"game.mail.compose.send": "отправить",
+	"game.mail.compose.cancel": "отмена",
+	"game.mail.compose.target_personal": "личное",
+	"game.mail.compose.target_broadcast": "рассылка",
+	"game.mail.compose.target_admin": "админ.",
+	"game.mail.compose.recipients_active": "активным членам",
+	"game.mail.compose.recipients_active_and_removed": "активным + удалённым",
+	"game.mail.compose.recipients_all_members": "всем членам",
+	"game.mail.compose.target_label": "тип",
+	"game.mail.compose.recipients_label": "адресаты",
+	"game.mail.compose.send_failed": "отправка не удалась",
+	"game.mail.show_original": "показать оригинал",
+	"game.mail.show_translation": "показать перевод",
+	"game.mail.translation_unavailable": "перевод недоступен",
+	"game.mail.reply_label": "ответить",
+	"game.mail.delete_action": "удалить",
+	"game.mail.outgoing_label": "ты",
 	"game.view.designer.ship_class": "конструктор класса кораблей",
 	"game.view.designer.science": "редактор наук",
 	"game.sidebar.tab.calculator": "калькулятор",