feat(#240): Mission Control Strip frontend — 5 components + dashboard wiring

Adds the full-width 3-column collaboration widget below the existing
dashboard grid. Renders without the backend running (Promise.allSettled
isolation keeps failures silent).

Components (src/lib/components/):
- ExpertBadge.svelte — purple pill with icon, no props
- SegmentationColumn.svelte — col 1: links to /enrich/{id}, weekly pulse
- TranscriptionColumn.svelte — col 2: per-doc progress bar when blocks exist
- ReadyColumn.svelte — col 3: mint border when filled, dashed empty state
- MissionControlStrip.svelte — strip wrapper, 1-col mobile / 3-col sm+

i18n: 19 new keys added to de/en/es (mission_control_*)

Page wiring:
- +page.server.ts: 4 new Promise.allSettled calls for segmentation-queue,
  transcription-queue, ready-to-read, weekly-stats; all failures silent
- +page.svelte: MissionControlStrip rendered below the grid in isDashboard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/messages/de.json

@@ -557,5 +557,22 @@
 	"training_seg_too_few_blocks": "Mindestens 5 Segmentierungsblöcke erforderlich (aktuell: {available}).",
 	"transcription_block_segmentation_only": "Nur Segmentierung",
 	"training_chip_kurrent": "Kurrent-Erkennung",
-	"training_chip_segmentation": "Segmentierung"
+	"training_chip_segmentation": "Segmentierung",
+	"mission_control_heading": "Mitarbeiten",
+	"mission_control_segmentation_heading": "Segmentierung",
+	"mission_control_segmentation_description": "Textbereiche markieren — keine Vorkenntnisse nötig",
+	"mission_control_segmentation_cta": "Segmentieren",
+	"mission_control_segmentation_empty": "Alle Dokumente haben bereits Segmentierungsblöcke.",
+	"mission_control_transcription_heading": "Transkription",
+	"mission_control_transcription_description": "Text abschreiben — Kurrent-Kenntnisse hilfreich",
+	"mission_control_transcription_cta": "Transkribieren",
+	"mission_control_transcription_empty": "Keine Dokumente warten auf Transkription.",
+	"mission_control_ready_heading": "Lesefertig",
+	"mission_control_ready_description": "Vollständig transkribiert und geprüft",
+	"mission_control_ready_empty": "Noch keine Dokumente vollständig transkribiert.",
+	"mission_control_ready_empty_cta": "Jetzt mitmachen",
+	"mission_control_weekly_pulse": "↑ +{count} diese Woche",
+	"mission_control_expert_badge": "Experten gesucht",
+	"mission_control_blocks_progress": "{texted} / {total} Blöcke",
+	"mission_control_reviewed_pct": "{pct}% geprüft"
 }

frontend/messages/en.json

@@ -557,5 +557,22 @@
 	"training_seg_too_few_blocks": "At least 5 segmentation blocks required (currently: {available}).",
 	"transcription_block_segmentation_only": "Segmentation only",
 	"training_chip_kurrent": "Kurrent recognition",
-	"training_chip_segmentation": "Segmentation"
+	"training_chip_segmentation": "Segmentation",
+	"mission_control_heading": "Contribute",
+	"mission_control_segmentation_heading": "Segmentation",
+	"mission_control_segmentation_description": "Mark text areas — no prior knowledge needed",
+	"mission_control_segmentation_cta": "Segment",
+	"mission_control_segmentation_empty": "All documents already have segmentation blocks.",
+	"mission_control_transcription_heading": "Transcription",
+	"mission_control_transcription_description": "Type out text — Kurrent knowledge helpful",
+	"mission_control_transcription_cta": "Transcribe",
+	"mission_control_transcription_empty": "No documents waiting for transcription.",
+	"mission_control_ready_heading": "Ready to Read",
+	"mission_control_ready_description": "Fully transcribed and reviewed",
+	"mission_control_ready_empty": "No documents fully transcribed yet.",
+	"mission_control_ready_empty_cta": "Start contributing",
+	"mission_control_weekly_pulse": "↑ +{count} this week",
+	"mission_control_expert_badge": "Expert needed",
+	"mission_control_blocks_progress": "{texted} / {total} blocks",
+	"mission_control_reviewed_pct": "{pct}% reviewed"
 }

frontend/messages/es.json

@@ -557,5 +557,22 @@
 	"training_seg_too_few_blocks": "Se requieren al menos 5 bloques de segmentación (actualmente: {available}).",
 	"transcription_block_segmentation_only": "Solo segmentación",
 	"training_chip_kurrent": "Reconocimiento Kurrent",
-	"training_chip_segmentation": "Segmentación"
+	"training_chip_segmentation": "Segmentación",
+	"mission_control_heading": "Colaborar",
+	"mission_control_segmentation_heading": "Segmentación",
+	"mission_control_segmentation_description": "Marcar áreas de texto — sin conocimientos previos",
+	"mission_control_segmentation_cta": "Segmentar",
+	"mission_control_segmentation_empty": "Todos los documentos ya tienen bloques de segmentación.",
+	"mission_control_transcription_heading": "Transcripción",
+	"mission_control_transcription_description": "Escribir el texto — conocimiento de Kurrent útil",
+	"mission_control_transcription_cta": "Transcribir",
+	"mission_control_transcription_empty": "No hay documentos esperando transcripción.",
+	"mission_control_ready_heading": "Listo para leer",
+	"mission_control_ready_description": "Completamente transcrito y revisado",
+	"mission_control_ready_empty": "Aún no hay documentos completamente transcritos.",
+	"mission_control_ready_empty_cta": "Empezar a colaborar",
+	"mission_control_weekly_pulse": "↑ +{count} esta semana",
+	"mission_control_expert_badge": "Se busca experto",
+	"mission_control_blocks_progress": "{texted} / {total} bloques",
+	"mission_control_reviewed_pct": "{pct}% revisado"
 }

frontend/src/lib/components/ExpertBadge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+</script>
+
+<span
+	class="inline-flex items-center gap-1 rounded border border-purple-200 bg-purple-50 px-2 py-0.5 text-xs font-semibold text-purple-700"
+>
+	<svg
+		class="h-4 w-4 shrink-0"
+		viewBox="0 0 16 16"
+		fill="none"
+		aria-hidden="true"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M8 1.5L1.5 13.5h13L8 1.5z"
+			stroke="currentColor"
+			stroke-width="1.5"
+			stroke-linejoin="round"
+			fill="none"
+		/>
+		<path d="M8 6v3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+		<circle cx="8" cy="11.5" r="0.75" fill="currentColor" />
+	</svg>
+	{m.mission_control_expert_badge()}
+</span>

frontend/src/lib/components/MissionControlStrip.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import SegmentationColumn from './SegmentationColumn.svelte';
+import TranscriptionColumn from './TranscriptionColumn.svelte';
+import ReadyColumn from './ReadyColumn.svelte';
+
+type TranscriptionQueueItemDTO = {
+	id: string;
+	title: string;
+	documentDate?: string;
+	needsExpert: boolean;
+	annotationCount: number;
+	textedBlockCount: number;
+	reviewedBlockCount: number;
+};
+
+type TranscriptionWeeklyStatsDTO = {
+	segmentationCount: number;
+	transcriptionCount: number;
+	readyCount: number;
+};
+
+interface Props {
+	segmentationDocs: TranscriptionQueueItemDTO[];
+	transcriptionDocs: TranscriptionQueueItemDTO[];
+	readyDocs: TranscriptionQueueItemDTO[];
+	weeklyStats: TranscriptionWeeklyStatsDTO | null;
+}
+
+let { segmentationDocs, transcriptionDocs, readyDocs, weeklyStats }: Props = $props();
+</script>
+
+<section class="mt-4 rounded-sm border border-line bg-white p-6">
+	<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
+		{m.mission_control_heading()}
+	</h2>
+	<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+		<SegmentationColumn docs={segmentationDocs} weeklyCount={weeklyStats?.segmentationCount ?? 0} />
+		<TranscriptionColumn
+			docs={transcriptionDocs}
+			weeklyCount={weeklyStats?.transcriptionCount ?? 0}
+		/>
+		<ReadyColumn docs={readyDocs} weeklyCount={weeklyStats?.readyCount ?? 0} />
+	</div>
+</section>

frontend/src/lib/components/ReadyColumn.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import { getLocale } from '$lib/paraglide/runtime.js';
+
+type TranscriptionQueueItemDTO = {
+	id: string;
+	title: string;
+	documentDate?: string;
+	needsExpert: boolean;
+	annotationCount: number;
+	textedBlockCount: number;
+	reviewedBlockCount: number;
+};
+
+interface Props {
+	docs: TranscriptionQueueItemDTO[];
+	weeklyCount: number;
+}
+
+let { docs, weeklyCount }: Props = $props();
+
+function formatDate(dateStr: string): string {
+	return new Intl.DateTimeFormat(getLocale(), {
+		day: 'numeric',
+		month: 'short',
+		year: 'numeric'
+	}).format(new Date(dateStr + 'T12:00:00'));
+}
+
+function reviewedPct(doc: TranscriptionQueueItemDTO): number {
+	if (doc.textedBlockCount === 0) return 0;
+	return Math.round((doc.reviewedBlockCount / doc.textedBlockCount) * 100);
+}
+</script>
+
+{#if docs.length > 0}
+	<div class="rounded-sm border border-brand-mint bg-brand-mint/10 p-4">
+		<div class="mb-1 flex items-center gap-2">
+			<h3 class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
+				{m.mission_control_ready_heading()}
+			</h3>
+			{#if weeklyCount > 0}
+				<span class="rounded-full bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-700">
+					{m.mission_control_weekly_pulse({ count: weeklyCount })}
+				</span>
+			{/if}
+		</div>
+		<p class="mt-1 mb-3 text-xs text-gray-400">
+			{m.mission_control_ready_description()}
+		</p>
+		<ul class="space-y-1">
+			{#each docs as doc (doc.id)}
+				<li>
+					<a
+						href="/documents/{doc.id}"
+						class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-brand-mint/20 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
+					>
+						<span class="font-serif text-sm text-ink">{doc.title}</span>
+						<div class="mt-0.5 flex items-center gap-2">
+							{#if doc.documentDate}
+								<span class="text-xs text-gray-400">{formatDate(doc.documentDate)}</span>
+							{/if}
+							{#if doc.textedBlockCount > 0}
+								<span class="text-xs text-gray-500">
+									{m.mission_control_reviewed_pct({ pct: reviewedPct(doc) })}
+								</span>
+							{/if}
+						</div>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
+{:else}
+	<div
+		class="flex min-h-[120px] flex-col items-center justify-center rounded-sm border border-dashed border-brand-mint bg-brand-mint/5 p-6 text-center"
+	>
+		<p class="text-xs text-gray-400">{m.mission_control_ready_empty()}</p>
+		<a
+			href="/enrich"
+			class="mt-2 inline-flex items-center gap-1 rounded text-xs font-semibold text-brand-navy hover:underline focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
+		>
+			{m.mission_control_ready_empty_cta()}
+		</a>
+	</div>
+{/if}

frontend/src/lib/components/SegmentationColumn.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import { getLocale } from '$lib/paraglide/runtime.js';
+import ExpertBadge from './ExpertBadge.svelte';
+
+type TranscriptionQueueItemDTO = {
+	id: string;
+	title: string;
+	documentDate?: string;
+	needsExpert: boolean;
+	annotationCount: number;
+	textedBlockCount: number;
+	reviewedBlockCount: number;
+};
+
+interface Props {
+	docs: TranscriptionQueueItemDTO[];
+	weeklyCount: number;
+}
+
+let { docs, weeklyCount }: Props = $props();
+
+function formatDate(dateStr: string): string {
+	return new Intl.DateTimeFormat(getLocale(), {
+		day: 'numeric',
+		month: 'short',
+		year: 'numeric'
+	}).format(new Date(dateStr + 'T12:00:00'));
+}
+</script>
+
+<div>
+	<div class="mb-1 flex items-center gap-2">
+		<h3 class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
+			{m.mission_control_segmentation_heading()}
+		</h3>
+		{#if weeklyCount > 0}
+			<span class="rounded-full bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-700">
+				{m.mission_control_weekly_pulse({ count: weeklyCount })}
+			</span>
+		{/if}
+	</div>
+	<p class="mt-1 mb-3 text-xs text-gray-400">
+		{m.mission_control_segmentation_description()}
+	</p>
+
+	{#if docs.length === 0}
+		<p class="text-xs text-gray-400 italic">{m.mission_control_segmentation_empty()}</p>
+	{:else}
+		<ul class="space-y-1">
+			{#each docs as doc (doc.id)}
+				<li>
+					<a
+						href="/enrich/{doc.id}"
+						class="hover:bg-brand-sand/30 flex min-h-[44px] flex-col justify-center rounded px-1 py-2 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
+					>
+						<div class="flex flex-wrap items-center gap-1.5">
+							<span class="font-serif text-sm text-ink">{doc.title}</span>
+							{#if doc.needsExpert}
+								<ExpertBadge />
+							{/if}
+						</div>
+						{#if doc.documentDate}
+							<span class="mt-0.5 text-xs text-gray-400">{formatDate(doc.documentDate)}</span>
+						{/if}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

frontend/src/lib/components/TranscriptionColumn.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import { getLocale } from '$lib/paraglide/runtime.js';
+import ExpertBadge from './ExpertBadge.svelte';
+
+type TranscriptionQueueItemDTO = {
+	id: string;
+	title: string;
+	documentDate?: string;
+	needsExpert: boolean;
+	annotationCount: number;
+	textedBlockCount: number;
+	reviewedBlockCount: number;
+};
+
+interface Props {
+	docs: TranscriptionQueueItemDTO[];
+	weeklyCount: number;
+}
+
+let { docs, weeklyCount }: Props = $props();
+
+function formatDate(dateStr: string): string {
+	return new Intl.DateTimeFormat(getLocale(), {
+		day: 'numeric',
+		month: 'short',
+		year: 'numeric'
+	}).format(new Date(dateStr + 'T12:00:00'));
+}
+
+function blockProgress(doc: TranscriptionQueueItemDTO): number {
+	if (doc.annotationCount === 0) return 0;
+	return (doc.textedBlockCount / doc.annotationCount) * 100;
+}
+</script>
+
+<div>
+	<div class="mb-1 flex items-center gap-2">
+		<h3 class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
+			{m.mission_control_transcription_heading()}
+		</h3>
+		{#if weeklyCount > 0}
+			<span class="rounded-full bg-green-50 px-2 py-0.5 text-xs font-semibold text-green-700">
+				{m.mission_control_weekly_pulse({ count: weeklyCount })}
+			</span>
+		{/if}
+	</div>
+	<p class="mt-1 mb-3 text-xs text-gray-400">
+		{m.mission_control_transcription_description()}
+	</p>
+
+	{#if docs.length === 0}
+		<p class="text-xs text-gray-400 italic">{m.mission_control_transcription_empty()}</p>
+	{:else}
+		<ul class="space-y-1">
+			{#each docs as doc (doc.id)}
+				<li>
+					<a
+						href="/enrich/{doc.id}"
+						class="hover:bg-brand-sand/30 flex min-h-[44px] flex-col justify-center rounded px-1 py-2 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
+					>
+						<div class="flex flex-wrap items-center gap-1.5">
+							<span class="font-serif text-sm text-ink">{doc.title}</span>
+							{#if doc.needsExpert}
+								<ExpertBadge />
+							{/if}
+						</div>
+						{#if doc.documentDate}
+							<span class="mt-0.5 text-xs text-gray-400">{formatDate(doc.documentDate)}</span>
+						{/if}
+						{#if doc.textedBlockCount > 0}
+							<div class="mt-1.5 flex items-center gap-2">
+								<span class="shrink-0 text-xs text-gray-400">
+									{m.mission_control_blocks_progress({
+										texted: doc.textedBlockCount,
+										total: doc.annotationCount
+									})}
+								</span>
+								<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
+									<div
+										class="h-full rounded-full bg-ink"
+										style="width: {blockProgress(doc).toFixed(0)}%"
+									></div>
+								</div>
+							</div>
+						{:else}
+							<span class="mt-0.5 text-xs text-gray-400 italic">—</span>
+						{/if}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

frontend/src/routes/+page.server.ts

@@ -6,6 +6,8 @@ type IncompleteDocumentDTO = components['schemas']['IncompleteDocumentDTO'];
 type StatsDTO = components['schemas']['StatsDTO'];
 type Document = components['schemas']['Document'];
 type SearchMatchData = components['schemas']['SearchMatchData'];
+type TranscriptionQueueItemDTO = components['schemas']['TranscriptionQueueItemDTO'];
+type TranscriptionWeeklyStatsDTO = components['schemas']['TranscriptionWeeklyStatsDTO'];
 
 export async function load({ url, fetch }) {
 	const q = url.searchParams.get('q') || '';
@@ -82,12 +84,28 @@ export async function load({ url, fetch }) {
 		let stats: StatsDTO | null = null;
 		let incompleteDocs: IncompleteDocumentDTO[] = [];
 		let recentDocs: Document[] = [];
+		let segmentationDocs: TranscriptionQueueItemDTO[] = [];
+		let transcriptionDocs: TranscriptionQueueItemDTO[] = [];
+		let readyDocs: TranscriptionQueueItemDTO[] = [];
+		let weeklyStats: TranscriptionWeeklyStatsDTO | null = null;
 
 		if (isDashboard) {
-			const [statsResult, incompleteResult, recentResult] = await Promise.allSettled([
+			const [
+				statsResult,
+				incompleteResult,
+				recentResult,
+				segmentationResult,
+				transcriptionResult,
+				readyResult,
+				weeklyStatsResult
+			] = await Promise.allSettled([
 				api.GET('/api/stats'),
 				api.GET('/api/documents/incomplete', { params: { query: { size: 3 } } }),
-				api.GET('/api/documents/recent-activity', { params: { query: { size: 5 } } })
+				api.GET('/api/documents/recent-activity', { params: { query: { size: 5 } } }),
+				api.GET('/api/transcription/segmentation-queue'),
+				api.GET('/api/transcription/transcription-queue'),
+				api.GET('/api/transcription/ready-to-read'),
+				api.GET('/api/transcription/weekly-stats')
 			]);
 
 			if (statsResult.status === 'fulfilled' && statsResult.value.response.ok) {
@@ -99,6 +117,18 @@ export async function load({ url, fetch }) {
 			if (recentResult.status === 'fulfilled' && recentResult.value.response.ok) {
 				recentDocs = recentResult.value.data ?? [];
 			}
+			if (segmentationResult.status === 'fulfilled' && segmentationResult.value.response.ok) {
+				segmentationDocs = (segmentationResult.value.data ?? []) as TranscriptionQueueItemDTO[];
+			}
+			if (transcriptionResult.status === 'fulfilled' && transcriptionResult.value.response.ok) {
+				transcriptionDocs = (transcriptionResult.value.data ?? []) as TranscriptionQueueItemDTO[];
+			}
+			if (readyResult.status === 'fulfilled' && readyResult.value.response.ok) {
+				readyDocs = (readyResult.value.data ?? []) as TranscriptionQueueItemDTO[];
+			}
+			if (weeklyStatsResult.status === 'fulfilled' && weeklyStatsResult.value.response.ok) {
+				weeklyStats = weeklyStatsResult.value.data ?? null;
+			}
 		}
 
 		return {
@@ -109,6 +139,10 @@ export async function load({ url, fetch }) {
 			stats,
 			incompleteDocs,
 			recentDocs,
+			segmentationDocs,
+			transcriptionDocs,
+			readyDocs,
+			weeklyStats,
 			initialValues: {
 				senderName: senderObj?.displayName ?? '',
 				receiverName: receiverObj?.displayName ?? ''
@@ -127,6 +161,10 @@ export async function load({ url, fetch }) {
 			stats: null,
 			incompleteDocs: [],
 			recentDocs: [],
+			segmentationDocs: [],
+			transcriptionDocs: [],
+			readyDocs: [],
+			weeklyStats: null,
 			initialValues: { senderName: '', receiverName: '' },
 			filters: { q, from, to, senderId, receiverId, tags, sort, dir, tagQ },
 			error: 'Daten konnten nicht geladen werden.' as string | null

frontend/src/routes/+page.svelte

@@ -9,6 +9,7 @@ import DocumentList from './DocumentList.svelte';
 import DashboardResumeStrip from '$lib/components/DashboardResumeStrip.svelte';
 import DashboardNeedsMetadata from '$lib/components/DashboardNeedsMetadata.svelte';
 import DashboardRecentDocuments from '$lib/components/DashboardRecentDocuments.svelte';
+import MissionControlStrip from '$lib/components/MissionControlStrip.svelte';
 import { m } from '$lib/paraglide/messages.js';
 
 let { data } = $props();
@@ -132,6 +133,13 @@ const showRightColumn = $derived(data.canWrite || (data.incompleteDocs?.length ?
 
 			<DashboardRecentDocuments recentDocs={data.recentDocs ?? []} stats={data.stats} />
 		</div>
+
+		<MissionControlStrip
+			segmentationDocs={data.segmentationDocs ?? []}
+			transcriptionDocs={data.transcriptionDocs ?? []}
+			readyDocs={data.readyDocs ?? []}
+			weeklyStats={data.weeklyStats ?? null}
+		/>
 	{:else}
 		<DocumentList
 			documents={data.documents ?? []}