feat(transcription): swap plain textarea for PersonMentionEditor and thread mentionedPersons through autosave

- TranscriptionBlockData now carries mentionedPersons (matches backend
  schema added in PR-A).
- useBlockAutoSave.saveFn signature widens to (blockId, text, mentions);
  pendingMentions is tracked alongside pendingTexts and is preserved on
  failure so a retry resends the in-flight payload (B12).
- TranscriptionBlock.svelte renders <PersonMentionEditor>, exposing the
  textarea node back through a captureTextarea callback so the existing
  quote-selection feature still works.
- saveBlock in routes/documents/[id]/+page.svelte forwards mentions on
  PUT.
- flushOnUnload sends mentions in the keepalive payload too.

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

frontend/src/lib/components/PersonMentionEditor.svelte

@@ -16,6 +16,10 @@ type Props = {
 	disabled?: boolean;
 	onfocus?: () => void;
 	onblur?: () => void;
+	// Optional escape hatch: lets the parent observe the underlying textarea node
+	// (e.g. to read selection bounds for quote-selection features). Returning a
+	// cleanup function from the parent is not required.
+	captureTextarea?: (node: HTMLTextAreaElement) => void | (() => void);
 };
 
 let {
@@ -25,7 +29,8 @@ let {
 	rows = 1,
 	disabled = false,
 	onfocus,
-	onblur
+	onblur,
+	captureTextarea
 }: Props = $props();
 
 let query: string | null = $state(null);
@@ -38,7 +43,9 @@ let debounceTimer: ReturnType<typeof setTimeout> | undefined;
 
 function attachTextarea(node: HTMLTextAreaElement) {
 	textarea = node;
+	const parentCleanup = captureTextarea?.(node);
 	return () => {
+		parentCleanup?.();
 		textarea = null;
 	};
 }

frontend/src/lib/components/TranscriptionBlock.svelte

@@ -2,6 +2,8 @@
 import { m } from '$lib/paraglide/messages.js';
 import { getConfirmService } from '$lib/services/confirm.svelte.js';
 import CommentThread from './CommentThread.svelte';
+import PersonMentionEditor from './PersonMentionEditor.svelte';
+import type { PersonMention } from '$lib/types';
 
 const { confirm } = getConfirmService();
 
@@ -12,13 +14,14 @@ type Props = {
 	documentId: string;
 	blockNumber: number;
 	text: string;
+	mentionedPersons: PersonMention[];
 	label: string | null;
 	active: boolean;
 	reviewed: boolean;
 	saveState: SaveState;
 	canComment: boolean;
 	currentUserId: string | null;
-	onTextChange: (text: string) => void;
+	onTextChange: (text: string, mentionedPersons: PersonMention[]) => void;
 	onFocus: () => void;
 	onDeleteClick: () => void;
 	onRetry: () => void;
@@ -35,6 +38,7 @@ let {
 	documentId,
 	blockNumber,
 	text,
+	mentionedPersons,
 	label = null,
 	active,
 	reviewed,
@@ -54,10 +58,10 @@ let {
 }: Props = $props();
 
 let localText = $state(text);
+let localMentions = $state<PersonMention[]>([...mentionedPersons]);
 let commentOpen = $state(false);
 let commentCount = $state(0);
 let selectedQuote = $state<string | null>(null);
-let textareaEl = $state<HTMLTextAreaElement | null>(null);
 
 const hasComments = $derived(commentCount > 0);
 
@@ -66,6 +70,7 @@ let prevBlockId = $state(blockId);
 $effect(() => {
 	if (blockId !== prevBlockId) {
 		localText = text;
+		localMentions = [...mentionedPersons];
 		prevBlockId = blockId;
 	}
 });
@@ -74,29 +79,32 @@ let leftBorderClass = $derived(
 	saveState === 'error' ? 'border-l-2 border-error' : active ? 'border-l-2 border-turquoise' : ''
 );
 
-function autoresize(node: HTMLTextAreaElement) {
+// Single source of truth for the editor's textarea — stored on attach so
+// we can read selection bounds for quote selection without re-querying the DOM.
+let textareaEl: HTMLTextAreaElement | null = null;
+
+function captureTextarea(node: HTMLTextAreaElement) {
 	textareaEl = node;
-	function resize() {
-		node.style.height = 'auto';
-		node.style.height = `${node.scrollHeight}px`;
-	}
-
-	resize();
-
-	return {
-		update() {
-			resize();
-		},
-		destroy() {
-			textareaEl = null;
-		}
+	resizeTextarea();
+	return () => {
+		textareaEl = null;
 	};
 }
 
-function handleInput(event: Event) {
-	const target = event.target as HTMLTextAreaElement;
-	localText = target.value;
-	onTextChange(target.value);
+function resizeTextarea() {
+	if (!textareaEl) return;
+	textareaEl.style.height = 'auto';
+	textareaEl.style.height = `${textareaEl.scrollHeight}px`;
+}
+
+$effect(() => {
+	// Re-run autoresize whenever the bound text changes.
+	void localText;
+	resizeTextarea();
+});
+
+function emitChange() {
+	onTextChange(localText, localMentions);
 }
 
 async function handleDelete() {
@@ -181,17 +189,24 @@ function handleTextareaMouseUp() {
 			{/if}
 		</div>
 
-		<!-- Textarea -->
-		<textarea
-			use:autoresize={localText}
-			class="w-full resize-none border-none bg-transparent font-serif text-base leading-relaxed text-ink outline-none placeholder:text-ink-3"
-			placeholder={m.transcription_block_placeholder()}
-			rows={1}
-			value={localText}
-			oninput={handleInput}
-			onfocus={onFocus}
-			onmouseup={handleTextareaMouseUp}
-		></textarea>
+		<!-- Textarea (now powered by PersonMentionEditor for @-mention typeahead) -->
+		<div onmouseup={handleTextareaMouseUp} role="presentation">
+			<PersonMentionEditor
+				bind:value={() => localText,
+					(v) => {
+						localText = v;
+						emitChange();
+					}}
+				bind:mentionedPersons={() => localMentions,
+					(m) => {
+						localMentions = m;
+						emitChange();
+					}}
+				placeholder={m.transcription_block_placeholder()}
+				onfocus={onFocus}
+				captureTextarea={captureTextarea}
+			/>
+		</div>
 
 		{#if selectedQuote}
 			<p class="mt-1 text-xs text-ink-3">{m.transcription_block_quote_hint()}</p>

frontend/src/lib/components/TranscriptionBlock.test-host.svelte

@@ -1,21 +1,24 @@
 <script lang="ts">
 import { provideConfirmService, type ConfirmService } from '$lib/services/confirm.svelte.js';
 import TranscriptionBlock from './TranscriptionBlock.svelte';
+import type { PersonMention } from '$lib/types';
 
 type BlockProps = {
 	blockId: string;
 	documentId: string;
 	blockNumber: number;
 	text: string;
+	mentionedPersons?: PersonMention[];
 	label: string | null;
 	active: boolean;
 	saveState: 'idle' | 'saving' | 'saved' | 'fading' | 'error';
 	canComment: boolean;
 	currentUserId: string | null;
-	onTextChange: (text: string) => void;
+	onTextChange: (text: string, mentionedPersons: PersonMention[]) => void;
 	onFocus: () => void;
 	onDeleteClick: () => void;
 	onRetry: () => void;
+	onReviewToggle?: () => void;
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
 	isFirst?: boolean;
@@ -24,13 +27,22 @@ type BlockProps = {
 
 let {
 	onServiceReady,
+	mentionedPersons = [],
+	reviewed = false,
+	onReviewToggle = () => {},
 	...blockProps
 }: BlockProps & {
 	onServiceReady: (s: ConfirmService) => void;
+	reviewed?: boolean;
 } = $props();
 
 const service = provideConfirmService();
 onServiceReady(service);
 </script>
 
-<TranscriptionBlock {...blockProps} />
+<TranscriptionBlock
+	{...blockProps}
+	mentionedPersons={mentionedPersons}
+	reviewed={reviewed}
+	onReviewToggle={onReviewToggle}
+/>

frontend/src/lib/components/TranscriptionEditView.svelte

@@ -3,7 +3,7 @@ import { m } from '$lib/paraglide/messages.js';
 import TranscriptionBlock from './TranscriptionBlock.svelte';
 import OcrTrigger from './OcrTrigger.svelte';
 import TranscribeCoachEmptyState from './TranscribeCoachEmptyState.svelte';
-import type { TranscriptionBlockData } from '$lib/types';
+import type { PersonMention, TranscriptionBlockData } from '$lib/types';
 import { createBlockAutoSave } from '$lib/hooks/useBlockAutoSave.svelte';
 import { createBlockDragDrop } from '$lib/hooks/useBlockDragDrop.svelte';
 
@@ -16,7 +16,7 @@ type Props = {
 	storedScriptType?: string;
 	canRunOcr?: boolean;
 	onBlockFocus: (blockId: string) => void;
-	onSaveBlock: (blockId: string, text: string) => Promise<void>;
+	onSaveBlock: (blockId: string, text: string, mentionedPersons: PersonMention[]) => Promise<void>;
 	onDeleteBlock: (blockId: string) => Promise<void>;
 	onReviewToggle: (blockId: string) => Promise<void>;
 	onMarkAllReviewed?: () => Promise<void>;
@@ -245,16 +245,19 @@ async function handleLabelToggle(label: string) {
 							documentId={documentId}
 							blockNumber={i + 1}
 							text={block.text}
+							mentionedPersons={block.mentionedPersons ?? []}
 							label={block.label}
 							active={activeBlockId === block.id}
 							reviewed={block.reviewed ?? false}
 							saveState={autoSave.getSaveState(block.id)}
 							canComment={canComment}
 							currentUserId={currentUserId}
-							onTextChange={(text) => autoSave.handleTextChange(block.id, text)}
+							onTextChange={(text, mentions) =>
+								autoSave.handleTextChange(block.id, text, mentions)}
 							onFocus={() => handleFocus(block.id)}
 							onDeleteClick={() => handleDelete(block.id)}
-							onRetry={() => autoSave.handleRetry(block.id, block.text)}
+							onRetry={() =>
+								autoSave.handleRetry(block.id, block.text, block.mentionedPersons ?? [])}
 							onReviewToggle={() => onReviewToggle(block.id)}
 							onMoveUp={() => handleMoveUp(block.id)}
 							onMoveDown={() => handleMoveDown(block.id)}

frontend/src/lib/components/TranscriptionEditView.svelte.spec.ts

@@ -15,7 +15,8 @@ const block1 = {
 	sortOrder: 0,
 	version: 0,
 	source: 'MANUAL' as const,
-	reviewed: false
+	reviewed: false,
+	mentionedPersons: []
 };
 const block2 = {
 	id: 'b2',
@@ -26,7 +27,8 @@ const block2 = {
 	sortOrder: 1,
 	version: 0,
 	source: 'OCR' as const,
-	reviewed: true
+	reviewed: true,
+	mentionedPersons: []
 };
 
 function renderView(overrides: Record<string, unknown> = {}, service = createConfirmService()) {
@@ -141,7 +143,28 @@ describe('TranscriptionEditView — auto-save debounce', () => {
 		vi.advanceTimersByTime(1500);
 		await vi.runAllTimersAsync();
 
-		expect(onSaveBlock).toHaveBeenCalledWith('b1', 'Neue Zeile');
+		expect(onSaveBlock).toHaveBeenCalledWith('b1', 'Neue Zeile', []);
+		vi.useRealTimers();
+	});
+
+	it('passes the block mentionedPersons array as the 3rd save argument', async () => {
+		vi.useFakeTimers();
+		const onSaveBlock = vi.fn().mockResolvedValue(undefined);
+		const blockWithMention = {
+			...block1,
+			mentionedPersons: [{ personId: 'p-aug', displayName: 'Auguste Raddatz' }]
+		};
+		renderView({ blocks: [blockWithMention], onSaveBlock });
+
+		const textarea = page.getByRole('textbox').first();
+		await textarea.fill('Hallo @Auguste Raddatz');
+
+		vi.advanceTimersByTime(1500);
+		await vi.runAllTimersAsync();
+
+		expect(onSaveBlock).toHaveBeenCalledWith('b1', 'Hallo @Auguste Raddatz', [
+			{ personId: 'p-aug', displayName: 'Auguste Raddatz' }
+		]);
 		vi.useRealTimers();
 	});
 
@@ -165,7 +188,7 @@ describe('TranscriptionEditView — auto-save debounce', () => {
 
 		// Only one save with the final value
 		expect(onSaveBlock).toHaveBeenCalledTimes(1);
-		expect(onSaveBlock).toHaveBeenCalledWith('b1', 'Second');
+		expect(onSaveBlock).toHaveBeenCalledWith('b1', 'Second', []);
 		vi.useRealTimers();
 	});
 });
@@ -220,7 +243,7 @@ describe('TranscriptionEditView — flush on blur', () => {
 		el.dispatchEvent(new FocusEvent('blur', { bubbles: true }));
 
 		await vi.runAllTimersAsync();
-		expect(onSaveBlock).toHaveBeenCalledWith('b1', 'Blur text');
+		expect(onSaveBlock).toHaveBeenCalledWith('b1', 'Blur text', []);
 		vi.useRealTimers();
 	});
 });

frontend/src/lib/components/TranscriptionReadView.svelte.test.ts

@@ -12,7 +12,10 @@ const blocks: TranscriptionBlockData[] = [
 		text: 'First paragraph text.',
 		label: null,
 		sortOrder: 1,
-		version: 1
+		version: 1,
+		source: 'MANUAL',
+		reviewed: false,
+		mentionedPersons: []
 	},
 	{
 		id: 'b2',
@@ -49,7 +52,10 @@ describe('TranscriptionReadView', () => {
 					text: 'Text before [unleserlich] text after',
 					label: null,
 					sortOrder: 1,
-					version: 1
+					version: 1,
+					source: 'MANUAL',
+					reviewed: false,
+					mentionedPersons: []
 				}
 			],
 			onParagraphClick: () => {}
@@ -71,7 +77,10 @@ describe('TranscriptionReadView', () => {
 					text: 'Some [...] text',
 					label: null,
 					sortOrder: 1,
-					version: 1
+					version: 1,
+					source: 'MANUAL',
+					reviewed: false,
+					mentionedPersons: []
 				}
 			],
 			onParagraphClick: () => {}