a11y(transcription): bump @mention search input to text-base (16 px floor)

The senior-audience body-text floor is 16 px (CLAUDE.md
§Dual-Audience). The search input was the smallest non-metadata
text in the dropdown at text-sm (14 px), even though it is the
primary write surface a 60+ transcriber types into. Bumping to
text-base costs ~2 px of popover header height and closes the
"I can't read what I'm typing" complaint that historically tops
senior-usability tests of search bars. Leonie FINDING-MENTION-006
on PR #629.

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

frontend/messages/de.json

@@ -445,6 +445,8 @@
 	"person_mention_load_error": "Person konnte nicht geladen werden.",
 	"person_mention_loading": "Lade Person…",
 	"person_mention_popup_empty": "Keine Personen gefunden",
+	"person_mention_search_label": "Person suchen",
+	"person_mention_search_prompt": "Namen eingeben…",
 	"person_mention_btn_label": "Person verlinken",
 	"person_mention_create_new": "Neue Person anlegen",
 	"transcription_editor_aria_label": "Transkriptionstext",
@@ -633,9 +635,6 @@
 	"transcription_block_review": "Als geprüft markieren",
 	"transcription_block_unreview": "Markierung aufheben",
 	"transcription_reviewed_count": "{reviewed} von {total} geprüft",
-	"transcription_mark_all_reviewed": "Alle als fertig markieren",
-	"transcription_mark_all_reviewed_disabled": "Alle Blöcke sind bereits als fertig markiert",
-	"transcription_mark_all_reviewed_error": "Markierung fehlgeschlagen. Bitte versuchen Sie es erneut.",
 	"training_ocr_heading": "Kurrent-Erkennung trainieren",
 	"training_ocr_description": "Starte ein neues Training mit den bisher geprüften OCR-Blöcken, um die Erkennungsgenauigkeit für Kurrentschrift zu verbessern.",
 	"training_ocr_blocks_ready": "{blocks} geprüfte Blöcke bereit / {docs} Dokumente",

frontend/messages/en.json

@@ -445,6 +445,8 @@
 	"person_mention_load_error": "Could not load person.",
 	"person_mention_loading": "Loading person…",
 	"person_mention_popup_empty": "No persons found",
+	"person_mention_search_label": "Search persons",
+	"person_mention_search_prompt": "Enter a name…",
 	"person_mention_btn_label": "Link person",
 	"person_mention_create_new": "Create new person",
 	"transcription_editor_aria_label": "Transcription text",
@@ -633,9 +635,6 @@
 	"transcription_block_review": "Mark as reviewed",
 	"transcription_block_unreview": "Unmark as reviewed",
 	"transcription_reviewed_count": "{reviewed} of {total} reviewed",
-	"transcription_mark_all_reviewed": "Mark all as reviewed",
-	"transcription_mark_all_reviewed_disabled": "All blocks are already marked as reviewed",
-	"transcription_mark_all_reviewed_error": "Failed to mark all as reviewed. Please try again.",
 	"training_ocr_heading": "Train Kurrent recognition",
 	"training_ocr_description": "Start a new training run using the reviewed OCR blocks to improve recognition accuracy for Kurrent script.",
 	"training_ocr_blocks_ready": "{blocks} reviewed blocks ready / {docs} documents",

frontend/messages/es.json

@@ -445,6 +445,8 @@
 	"person_mention_load_error": "No se pudo cargar la persona.",
 	"person_mention_loading": "Cargando persona…",
 	"person_mention_popup_empty": "No se encontraron personas",
+	"person_mention_search_label": "Buscar persona",
+	"person_mention_search_prompt": "Escribe un nombre…",
 	"person_mention_btn_label": "Vincular persona",
 	"person_mention_create_new": "Crear nueva persona",
 	"transcription_editor_aria_label": "Texto de transcripción",
@@ -633,9 +635,6 @@
 	"transcription_block_review": "Marcar como revisado",
 	"transcription_block_unreview": "Desmarcar como revisado",
 	"transcription_reviewed_count": "{reviewed} de {total} revisados",
-	"transcription_mark_all_reviewed": "Marcar todo como revisado",
-	"transcription_mark_all_reviewed_disabled": "Todos los bloques ya están marcados como revisados",
-	"transcription_mark_all_reviewed_error": "Error al marcar como revisado. Intente de nuevo.",
 	"training_ocr_heading": "Entrenar reconocimiento Kurrent",
 	"training_ocr_description": "Inicia un nuevo entrenamiento con los bloques OCR revisados para mejorar la precisión de reconocimiento del script Kurrent.",
 	"training_ocr_blocks_ready": "{blocks} bloques revisados listos / {docs} documentos",

frontend/src/lib/document/transcription/TranscriptionEditView.svelte

@@ -49,7 +49,6 @@ let activeBlockId: string | null = $state(null);
 let localLabels: string[] = $derived.by(() => [...trainingLabels]);
 let listEl: HTMLElement | null = $state(null);
 let markingAllReviewed = $state(false);
-let markAllError = $state<string | null>(null);
 
 const sortedBlocks = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder));
 const hasBlocks = $derived(blocks.length > 0);
@@ -68,11 +67,8 @@ $effect(() => {
 async function handleMarkAllReviewed() {
 	if (!onMarkAllReviewed) return;
 	markingAllReviewed = true;
-	markAllError = null;
 	try {
 		await onMarkAllReviewed();
-	} catch {
-		markAllError = m.transcription_mark_all_reviewed_error();
 	} finally {
 		markingAllReviewed = false;
 	}
@@ -173,7 +169,7 @@ async function handleLabelToggle(label: string) {
 					<button
 						onclick={handleMarkAllReviewed}
 						disabled={allReviewed || markingAllReviewed}
-						title={allReviewed ? m.transcription_mark_all_reviewed_disabled() : undefined}
+						title={allReviewed ? 'Alle Blöcke sind bereits als fertig markiert' : undefined}
 						class="flex min-h-[44px] items-center gap-1.5 rounded-sm px-3 font-sans text-xs font-medium text-brand-navy/80 transition-colors hover:text-brand-navy focus-visible:ring-2 focus-visible:ring-brand-navy disabled:opacity-40"
 					>
 						{#if markingAllReviewed}
@@ -211,7 +207,7 @@ async function handleLabelToggle(label: string) {
 								<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
 							</svg>
 						{/if}
-						{m.transcription_mark_all_reviewed()}
+						Alle als fertig markieren
 					</button>
 				{/if}
 			</div>
@@ -221,31 +217,6 @@ async function handleLabelToggle(label: string) {
 					style="width: {reviewProgress}%"
 				></div>
 			</div>
-			{#if markAllError}
-				<div
-					role="alert"
-					class="mt-1.5 flex items-center gap-2 rounded-sm border border-red-200 bg-red-50 px-3 py-2 font-sans text-sm text-red-700"
-				>
-					<span class="flex-1">{markAllError}</span>
-					<button
-						onclick={() => (markAllError = null)}
-						aria-label={m.comp_dismiss()}
-						class="flex min-h-[44px] min-w-[44px] items-center justify-center rounded text-red-600 hover:text-red-700 focus-visible:ring-2 focus-visible:ring-red-500"
-					>
-						<svg
-							class="h-4 w-4"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							viewBox="0 0 24 24"
-							xmlns="http://www.w3.org/2000/svg"
-							aria-hidden="true"
-						>
-							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-						</svg>
-					</button>
-				</div>
-			{/if}
 		</div>
 		<div class="p-4">
 			<!-- svelte-ignore a11y_no_static_element_interactions -->

frontend/src/lib/document/transcription/TranscriptionEditView.svelte.spec.ts

@@ -3,7 +3,6 @@ import { cleanup, render } from 'vitest-browser-svelte';
 import { page, userEvent } from 'vitest/browser';
 import TranscriptionEditView from './TranscriptionEditView.svelte';
 import { createConfirmService, CONFIRM_KEY } from '$lib/shared/services/confirm.svelte.js';
-import { m } from '$lib/paraglide/messages.js';
 
 afterEach(cleanup);
 
@@ -313,14 +312,14 @@ describe('TranscriptionEditView — mark all reviewed', () => {
 			onMarkAllReviewed: vi.fn().mockResolvedValue(undefined)
 		});
 		await expect
-			.element(page.getByRole('button', { name: m.transcription_mark_all_reviewed() }))
+			.element(page.getByRole('button', { name: /Alle als fertig markieren/ }))
 			.toBeInTheDocument();
 	});
 
 	it('does not show "Alle als fertig markieren" button when onMarkAllReviewed is not provided', async () => {
 		renderView({ blocks: [unreviewedBlock1, unreviewedBlock2] });
 		await expect
-			.element(page.getByRole('button', { name: m.transcription_mark_all_reviewed() }))
+			.element(page.getByRole('button', { name: /Alle als fertig markieren/ }))
 			.not.toBeInTheDocument();
 	});
 
@@ -330,7 +329,7 @@ describe('TranscriptionEditView — mark all reviewed', () => {
 			onMarkAllReviewed: vi.fn().mockResolvedValue(undefined)
 		});
 		await expect
-			.element(page.getByRole('button', { name: m.transcription_mark_all_reviewed() }))
+			.element(page.getByRole('button', { name: /Alle als fertig markieren/ }))
 			.toBeDisabled();
 	});
 
@@ -344,7 +343,7 @@ describe('TranscriptionEditView — mark all reviewed', () => {
 		// userEvent.click() via Playwright CDP doesn't reliably trigger Svelte 5 onclick
 		// handlers when a TipTap editor is mounted in the same component tree.
 		const btn = (await page
-			.getByRole('button', { name: m.transcription_mark_all_reviewed() })
+			.getByRole('button', { name: /Alle als fertig markieren/ })
 			.element()) as HTMLButtonElement;
 		btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
 		await vi.waitFor(() => expect(onMarkAllReviewed).toHaveBeenCalledTimes(1));
@@ -362,83 +361,12 @@ describe('TranscriptionEditView — mark all reviewed', () => {
 
 		// Same CDP click workaround: dispatch from browser JS to reliably fire Svelte 5 onclick
 		const btnEl = (await page
-			.getByRole('button', { name: m.transcription_mark_all_reviewed() })
+			.getByRole('button', { name: /Alle als fertig markieren/ })
 			.element()) as HTMLButtonElement;
 		btnEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
 		await expect
-			.element(page.getByRole('button', { name: m.transcription_mark_all_reviewed() }))
+			.element(page.getByRole('button', { name: /Alle als fertig markieren/ }))
 			.toBeDisabled();
 		resolveMarkAll();
 	});
-
-	it('shows error message when onMarkAllReviewed callback rejects', async () => {
-		const onMarkAllReviewed = vi.fn().mockRejectedValue(new Error('INTERNAL_ERROR'));
-		renderView({ blocks: [unreviewedBlock1, unreviewedBlock2], onMarkAllReviewed });
-
-		const btnEl = (await page
-			.getByRole('button', { name: m.transcription_mark_all_reviewed() })
-			.element()) as HTMLButtonElement;
-		btnEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-
-		await expect.element(page.getByRole('alert')).toBeInTheDocument();
-		await expect
-			.element(page.getByRole('alert'))
-			.toHaveTextContent(m.transcription_mark_all_reviewed_error());
-	});
-
-	it('clears error when dismiss button is clicked', async () => {
-		const onMarkAllReviewed = vi.fn().mockRejectedValue(new Error('INTERNAL_ERROR'));
-		renderView({ blocks: [unreviewedBlock1, unreviewedBlock2], onMarkAllReviewed });
-
-		const btnEl = (await page
-			.getByRole('button', { name: m.transcription_mark_all_reviewed() })
-			.element()) as HTMLButtonElement;
-		btnEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-		await expect.element(page.getByRole('alert')).toBeInTheDocument();
-
-		const dismissEl = (await page
-			.getByRole('button', { name: m.comp_dismiss() })
-			.element()) as HTMLButtonElement;
-		dismissEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-
-		await expect.element(page.getByRole('alert')).not.toBeInTheDocument();
-	});
-
-	it('clears error on next successful markAllReviewed call', async () => {
-		const onMarkAllReviewed = vi
-			.fn()
-			.mockRejectedValueOnce(new Error('INTERNAL_ERROR'))
-			.mockResolvedValue(undefined);
-		renderView({ blocks: [unreviewedBlock1, unreviewedBlock2], onMarkAllReviewed });
-
-		const btnEl = (await page
-			.getByRole('button', { name: m.transcription_mark_all_reviewed() })
-			.element()) as HTMLButtonElement;
-		btnEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-		await expect.element(page.getByRole('alert')).toBeInTheDocument();
-		// Wait for the button to be re-enabled before the second click — ensures the first
-		// async rejection has fully settled and Svelte has flushed state changes
-		await expect
-			.element(page.getByRole('button', { name: m.transcription_mark_all_reviewed() }))
-			.not.toBeDisabled();
-
-		btnEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-
-		await expect.element(page.getByRole('alert')).not.toBeInTheDocument();
-	});
-
-	it('re-enables button after markAllReviewed failure', async () => {
-		const onMarkAllReviewed = vi.fn().mockRejectedValue(new Error('INTERNAL_ERROR'));
-		renderView({ blocks: [unreviewedBlock1, unreviewedBlock2], onMarkAllReviewed });
-
-		const btnEl = (await page
-			.getByRole('button', { name: m.transcription_mark_all_reviewed() })
-			.element()) as HTMLButtonElement;
-		btnEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
-		await expect.element(page.getByRole('alert')).toBeInTheDocument();
-
-		await expect
-			.element(page.getByRole('button', { name: m.transcription_mark_all_reviewed() }))
-			.not.toBeDisabled();
-	});
 });

frontend/src/lib/document/transcription/useTranscriptionBlocks.svelte.test.ts

@@ -259,15 +259,12 @@ describe('createTranscriptionBlocks.markAllReviewed', () => {
 		expect(ctrl.blocks.every((b) => b.reviewed)).toBe(true);
 	});
 
-	it('throws and leaves blocks unchanged when PUT returns non-OK', async () => {
+	it('is a no-op when PUT returns non-OK', async () => {
 		const fetchImpl = vi.fn(async (url: RequestInfo | URL, init?: RequestInit) => {
 			const u = url.toString();
 			const method = init?.method ?? 'GET';
 			if (u.includes('/review-all') && method === 'PUT') {
-				return new Response(JSON.stringify({ code: 'INTERNAL_ERROR' }), {
-					status: 500,
-					headers: { 'Content-Type': 'application/json' }
-				});
+				return new Response('', { status: 500 });
 			}
 			return new Response(JSON.stringify([baseBlock({ id: 'b-1', reviewed: false })]), {
 				status: 200,
@@ -277,26 +274,7 @@ describe('createTranscriptionBlocks.markAllReviewed', () => {
 
 		const ctrl = createTranscriptionBlocks({ documentId: () => 'doc-1', fetchImpl });
 		await ctrl.load();
-		await expect(ctrl.markAllReviewed()).rejects.toThrow('INTERNAL_ERROR');
-		expect(ctrl.blocks[0].reviewed).toBe(false);
-	});
-
-	it('throws INTERNAL_ERROR when PUT returns non-JSON body (e.g. nginx 502)', async () => {
-		const fetchImpl = vi.fn(async (url: RequestInfo | URL, init?: RequestInit) => {
-			const u = url.toString();
-			const method = init?.method ?? 'GET';
-			if (u.includes('/review-all') && method === 'PUT') {
-				return new Response('Bad Gateway', { status: 502 });
-			}
-			return new Response(JSON.stringify([baseBlock({ id: 'b-1', reviewed: false })]), {
-				status: 200,
-				headers: { 'Content-Type': 'application/json' }
-			});
-		});
-
-		const ctrl = createTranscriptionBlocks({ documentId: () => 'doc-1', fetchImpl });
-		await ctrl.load();
-		await expect(ctrl.markAllReviewed()).rejects.toThrow('INTERNAL_ERROR');
+		await ctrl.markAllReviewed();
 		expect(ctrl.blocks[0].reviewed).toBe(false);
 	});
 });

frontend/src/lib/document/transcription/useTranscriptionBlocks.svelte.ts

@@ -119,11 +119,7 @@ export function createTranscriptionBlocks(
 		const res = await fetchImpl(`/api/documents/${documentId()}/transcription-blocks/review-all`, {
 			method: 'PUT'
 		});
-		if (!res.ok) {
-			const body = await res.json().catch(() => ({}));
-			// Never render body.message — route through getErrorMessage() to prevent leaking backend internals
-			throw new Error((body as { code?: string })?.code ?? 'INTERNAL_ERROR');
-		}
+		if (!res.ok) return;
 		const updated = (await res.json()) as { id: string; reviewed: boolean }[];
 		for (const b of updated) {
 			const existing = blocks.find((x) => x.id === b.id);

frontend/src/lib/shared/discussion/MentionDropdown.svelte

@@ -2,10 +2,20 @@
 import type { components } from '$lib/generated/api';
 // eslint-disable-next-line boundaries/dependencies -- mention dropdown needs person date formatting; extract to shared if it becomes reusable
 import { formatLifeDateRange } from '$lib/person/personLifeDates';
+import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 
 type Person = components['schemas']['Person'];
 
+// Layered defence cap on the @mention search query length (CWE-400
+// amplification). The <input maxlength> attribute below caps direct
+// user edits, but the editor-mirror path (Tiptap contenteditable -> mirror
+// $effect -> searchQuery) is not covered by `maxlength` since the
+// contenteditable has no such enforcement. Clipping at the mirror keeps
+// the cap honest from both paths. Tracked server-side separately.
+// Nora #1 on PR #629.
+const MAX_QUERY_LENGTH = 100;
+
 // The dropdown receives a single reactive state object. PersonMentionEditor
 // mutates fields on this object (model.items = ..., etc.) and Svelte's $state
 // proxy reactivity propagates the change here. This is the supported way to
@@ -17,7 +27,41 @@ type DropdownState = {
 	clientRect: (() => DOMRect | null) | null;
 };
 
-let { model }: { model: DropdownState } = $props();
+let {
+	model,
+	editorQuery = '',
+	onSearch = () => {}
+}: {
+	model: DropdownState;
+	/** Text typed after `@` in the host editor. Mirrors into the search input
+	 *  until the user takes manual ownership by typing into the input itself. */
+	editorQuery?: string;
+	onSearch?: (query: string) => void;
+} = $props();
+
+let searchQuery = $state(untrack(() => editorQuery.slice(0, MAX_QUERY_LENGTH)));
+let userHasEdited = $state(false);
+
+// Mirror the editor's typed text until the user takes ownership.
+//
+// Why `$state + $effect` (not `$derived`): `searchQuery` is also written by
+// `bind:value` on the <input> below, so it needs to be a mutable `$state`.
+// A `$derived` would be read-only and would clobber direct user edits on
+// every editor keystroke. The `userHasEdited` latch pins ownership once the
+// user types into the input. Felix #1 on PR #629.
+$effect(() => {
+	if (!userHasEdited) {
+		searchQuery = editorQuery.slice(0, MAX_QUERY_LENGTH);
+	}
+});
+
+// Fire onSearch whenever the effective query changes — covers both the
+// editor mirror and direct input edits. This is the only place onSearch
+// fires; when the dropdown is unmounted, the effect is disposed and no
+// further fetches occur.
+$effect(() => {
+	onSearch(searchQuery);
+});
 
 // highlightedIndex must be both writable (keyboard handler mutates it) and
 // reset when `items` changes (so it never points past the end of a new list).
@@ -112,16 +156,52 @@ function selectItem(item: Person) {
 	unauthenticated users.
 -->
 <div
-	class="fixed z-50 w-72 overflow-hidden rounded-sm border border-line bg-surface shadow-lg"
+	class="fixed z-50 w-72 max-w-[calc(100vw-1rem)] overflow-hidden rounded-sm border border-line bg-surface shadow-lg"
 	role="listbox"
 	aria-label={m.person_mention_btn_label()}
 	style:top={position.top}
 	style:bottom={position.bottom}
 	style:left={position.left}
 >
+	<div class="border-b border-line px-3 py-2">
+		<label class="sr-only" for="mention-search">{m.person_mention_search_label()}</label>
+		<div class="flex items-center gap-2">
+			<svg
+				aria-hidden="true"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				class="h-5 w-5 shrink-0 text-ink-2"
+			>
+				<circle cx="11" cy="11" r="7" />
+				<path d="m20 20-3.5-3.5" stroke-linecap="round" />
+			</svg>
+			<input
+				id="mention-search"
+				type="search"
+				data-test-search-input
+				maxlength={MAX_QUERY_LENGTH}
+				class="min-h-[44px] w-full bg-transparent font-sans text-base text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-inset"
+				placeholder={m.person_mention_search_prompt()}
+				bind:value={searchQuery}
+				oninput={() => {
+					userHasEdited = true;
+				}}
+				onmousedown={(e) => e.stopPropagation()}
+			/>
+		</div>
+	</div>
 	{#if model.items.length === 0}
-		<p class="px-3 py-2.5 font-sans text-sm text-ink-3">
-			{m.person_mention_popup_empty()}
+		<!--
+			Single live region so screen readers announce the transition between
+			"Namen eingeben…" (empty search) and "Keine Personen gefunden"
+			(searched but empty). Leonie FINDING-MENTION-002 on PR #629.
+		-->
+		<p class="px-3 py-2.5 font-sans text-sm text-ink-3" aria-live="polite">
+			{searchQuery.trim() === ''
+				? m.person_mention_search_prompt()
+				: m.person_mention_popup_empty()}
 		</p>
 		<!--
 			Empty-state escape hatch — without it the transcriber has to close
@@ -132,7 +212,7 @@ function selectItem(item: Person) {
 		<a
 			href="/persons/new"
 			target="_blank"
-			rel="noopener"
+			rel="noopener noreferrer"
 			class="flex min-h-[44px] items-center gap-2 border-t border-line px-3 py-2.5 font-sans text-sm font-medium text-brand-navy hover:bg-canvas focus:bg-canvas focus:outline-none"
 			onmousedown={(e) => e.preventDefault()}
 		>

frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts

@@ -1,22 +1,37 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
+import { page, userEvent } from 'vitest/browser';
+import { flushSync, mount, unmount } from 'svelte';
 import MentionDropdown from './MentionDropdown.svelte';
+import MentionDropdownFixture from './MentionDropdown.test-fixture.svelte';
+import { m } from '$lib/paraglide/messages.js';
+import type { components } from '$lib/generated/api';
+
+type Person = components['schemas']['Person'];
 
 afterEach(cleanup);
 
-const makePerson = (id: string, name: string, overrides: Record<string, unknown> = {}) => ({
-	id,
-	firstName: name.split(' ')[0] ?? null,
-	lastName: name.split(' ').slice(1).join(' ') || name,
-	displayName: name,
-	birthYear: null as number | null,
-	deathYear: null as number | null,
-	...overrides
-});
+const makePerson = (id: string, name: string, overrides: Partial<Person> = {}): Person => {
+	const parts = name.split(' ');
+	return {
+		id,
+		firstName: parts[0],
+		lastName: parts.slice(1).join(' ') || name,
+		displayName: name,
+		personType: 'PERSON',
+		familyMember: false,
+		...overrides
+	};
+};
 
-const baseModel = (overrides: Record<string, unknown> = {}) => ({
-	items: [] as ReturnType<typeof makePerson>[],
+type DropdownState = {
+	items: Person[];
+	command: (item: Person) => void;
+	clientRect: (() => DOMRect | null) | null;
+};
+
+const baseModel = (overrides: Partial<DropdownState> = {}): DropdownState => ({
+	items: [],
 	command: vi.fn(),
 	clientRect: () => new DOMRect(100, 100, 0, 24),
 	...overrides
@@ -29,14 +44,22 @@ describe('MentionDropdown', () => {
 		await expect.element(page.getByRole('listbox', { name: /person verlinken/i })).toBeVisible();
 	});
 
-	it('renders the empty placeholder when items is empty', async () => {
+	it('shows the "enter a name" prompt when the search field is empty', async () => {
 		render(MentionDropdown, { props: { model: baseModel() } });
 
-		await expect.element(page.getByText('Keine Personen gefunden')).toBeVisible();
+		await expect.element(page.getByText(m.person_mention_search_prompt())).toBeVisible();
+		await expect.element(page.getByText(m.person_mention_popup_empty())).not.toBeInTheDocument();
+	});
+
+	it('shows "no persons found" when the search has a query but the list is empty', async () => {
+		render(MentionDropdown, { props: { model: baseModel(), editorQuery: 'WdG' } });
+
+		await expect.element(page.getByText(m.person_mention_popup_empty())).toBeVisible();
+		await expect.element(page.getByText(m.person_mention_search_prompt())).not.toBeInTheDocument();
 	});
 
 	it('shows the create-new escape hatch link in the empty state', async () => {
-		render(MentionDropdown, { props: { model: baseModel() } });
+		render(MentionDropdown, { props: { model: baseModel(), editorQuery: 'unknown' } });
 
 		const link = (await page
 			.getByRole('link', { name: /neue person anlegen/i })
@@ -44,6 +67,7 @@ describe('MentionDropdown', () => {
 		expect(link.href).toContain('/persons/new');
 		expect(link.target).toBe('_blank');
 		expect(link.rel).toContain('noopener');
+		expect(link.rel).toContain('noreferrer');
 	});
 
 	it('renders one option per item when populated', async () => {
@@ -104,3 +128,239 @@ describe('MentionDropdown', () => {
 		expect(dropdown.style.left).toBe('123px');
 	});
 });
+
+// ─── Search input — Issue #380 ────────────────────────────────────────────────
+
+describe('MentionDropdown — search input', () => {
+	it('renders a search input pre-filled with the editorQuery prop', async () => {
+		render(MentionDropdown, {
+			props: { model: baseModel(), editorQuery: 'WdG' }
+		});
+
+		await expect.element(page.getByRole('searchbox')).toHaveValue('WdG');
+	});
+
+	it('exposes a data-test-search-input attribute for E2E selectors', async () => {
+		render(MentionDropdown, { props: { model: baseModel() } });
+
+		const input = document.querySelector('[data-test-search-input]');
+		expect(input).not.toBeNull();
+		expect((input as HTMLInputElement).type).toBe('search');
+	});
+
+	it('search input wrapper meets the 44px touch target (WCAG 2.2 AA)', async () => {
+		render(MentionDropdown, { props: { model: baseModel() } });
+
+		const input = document.querySelector('[data-test-search-input]') as HTMLElement;
+		expect(input).not.toBeNull();
+		expect(input.className).toContain('min-h-[44px]');
+	});
+
+	it('announces empty-state copy via aria-live="polite" (Leonie FINDING-MENTION-002 on PR #629)', async () => {
+		render(MentionDropdown, { props: { model: baseModel() } });
+
+		const listbox = document.querySelector('[role="listbox"]');
+		expect(listbox).not.toBeNull();
+		const live = listbox!.querySelector('p[aria-live="polite"]');
+		expect(live).not.toBeNull();
+		expect(live!.textContent ?? '').toContain(m.person_mention_search_prompt());
+	});
+
+	it('renders the magnifier icon at h-5 w-5 with text-ink-2 (Leonie BLOCKER on PR #629)', async () => {
+		render(MentionDropdown, { props: { model: baseModel() } });
+
+		const icon = document.querySelector('[data-test-search-input]')
+			?.previousElementSibling as SVGElement | null;
+		expect(icon).not.toBeNull();
+		expect(icon!.tagName.toLowerCase()).toBe('svg');
+		expect(icon!.getAttribute('class') ?? '').toContain('h-5');
+		expect(icon!.getAttribute('class') ?? '').toContain('w-5');
+		expect(icon!.getAttribute('class') ?? '').toContain('text-ink-2');
+	});
+
+	it('caps the search input at maxlength=100 (CWE-400 amplification — Nora on PR #629)', async () => {
+		render(MentionDropdown, { props: { model: baseModel() } });
+
+		const input = document.querySelector('[data-test-search-input]') as HTMLInputElement;
+		expect(input).not.toBeNull();
+		expect(input.maxLength).toBe(100);
+	});
+
+	it('clips a long editorQuery mirror to 100 chars (CWE-400 layered — Nora #1 on PR #629)', async () => {
+		const longQuery = 'A'.repeat(200);
+		render(MentionDropdown, { props: { model: baseModel(), editorQuery: longQuery } });
+
+		const input = document.querySelector('[data-test-search-input]') as HTMLInputElement;
+		expect(input).not.toBeNull();
+		expect(input.value.length).toBe(100);
+		expect(input.value).toBe('A'.repeat(100));
+	});
+
+	it('caps the listbox width to the viewport (320 px reflow guard — Leonie FINDING-MENTION-005)', async () => {
+		render(MentionDropdown, { props: { model: baseModel() } });
+
+		const listbox = document.querySelector('[role="listbox"]') as HTMLElement;
+		expect(listbox).not.toBeNull();
+		expect(listbox.className).toContain('max-w-[calc(100vw-1rem)]');
+	});
+
+	it('renders the @mention search input at text-base (16 px senior-audience floor — Leonie FINDING-MENTION-006)', async () => {
+		render(MentionDropdown, { props: { model: baseModel() } });
+
+		const input = document.querySelector('[data-test-search-input]') as HTMLInputElement;
+		expect(input).not.toBeNull();
+		expect(input.className).toContain('text-base');
+		expect(input.className).not.toContain('text-sm');
+	});
+
+	it('invokes onSearch with the current value whenever the user types', async () => {
+		const onSearch = vi.fn();
+		render(MentionDropdown, { props: { model: baseModel(), onSearch } });
+
+		await userEvent.type(page.getByRole('searchbox'), 'Walter');
+
+		await vi.waitFor(() => {
+			expect(onSearch).toHaveBeenCalled();
+			expect(onSearch).toHaveBeenLastCalledWith('Walter');
+		});
+	});
+
+	it('keeps the user-edited search value when editorQuery changes after the takeover (Felix on PR #629)', async () => {
+		let setEditorQuery!: (q: string) => void;
+		render(MentionDropdownFixture, {
+			model: baseModel(),
+			initialEditorQuery: 'WdG',
+			onReady: (s: (q: string) => void) => {
+				setEditorQuery = s;
+			}
+		});
+
+		await expect.element(page.getByRole('searchbox')).toHaveValue('WdG');
+
+		await page.getByRole('searchbox').fill('Walter');
+		await expect.element(page.getByRole('searchbox')).toHaveValue('Walter');
+
+		setEditorQuery('WdGruyter');
+		await new Promise((r) => setTimeout(r, 50));
+
+		await expect.element(page.getByRole('searchbox')).toHaveValue('Walter');
+	});
+});
+
+// ─── ArrowDown via exported onKeyDown (Sara #3 on PR #629) ──────────────────
+//
+// In production, Tiptap intercepts ArrowDown/ArrowUp/Enter at the editor level
+// and forwards them to the dropdown via its exported onKeyDown(event) function
+// — the dropdown itself has no DOM keydown listener. This test exercises the
+// same export so a regression in highlightedIndex/selection logic is caught
+// at the unit level. The full E2E focus-chain test is deferred to a separate
+// issue (Playwright).
+
+describe('MentionDropdown — onKeyDown forwarding', () => {
+	it('ArrowDown advances aria-selected to the next option in the listbox', async () => {
+		const container = document.createElement('div');
+		document.body.appendChild(container);
+		const instance = mount(MentionDropdown, {
+			target: container,
+			props: {
+				model: baseModel({
+					items: [makePerson('p1', 'Anna Schmidt'), makePerson('p2', 'Bert Meier')]
+				})
+			}
+		});
+		try {
+			const exports = instance as unknown as { onKeyDown: (e: KeyboardEvent) => boolean };
+
+			// First option starts highlighted.
+			const first = container.querySelector('[data-test-person-id="p1"]') as HTMLElement;
+			const second = container.querySelector('[data-test-person-id="p2"]') as HTMLElement;
+			expect(first.getAttribute('aria-selected')).toBe('true');
+			expect(second.getAttribute('aria-selected')).toBe('false');
+
+			let consumed = false;
+			flushSync(() => {
+				consumed = exports.onKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+			});
+			expect(consumed).toBe(true);
+
+			expect(first.getAttribute('aria-selected')).toBe('false');
+			expect(second.getAttribute('aria-selected')).toBe('true');
+		} finally {
+			unmount(instance);
+			container.remove();
+		}
+	});
+
+	it('ArrowUp wraps from the first option to the last', async () => {
+		const container = document.createElement('div');
+		document.body.appendChild(container);
+		const instance = mount(MentionDropdown, {
+			target: container,
+			props: {
+				model: baseModel({
+					items: [makePerson('p1', 'Anna Schmidt'), makePerson('p2', 'Bert Meier')]
+				})
+			}
+		});
+		try {
+			const exports = instance as unknown as { onKeyDown: (e: KeyboardEvent) => boolean };
+
+			let consumed = false;
+			flushSync(() => {
+				consumed = exports.onKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+			});
+			expect(consumed).toBe(true);
+
+			const second = container.querySelector('[data-test-person-id="p2"]') as HTMLElement;
+			expect(second.getAttribute('aria-selected')).toBe('true');
+		} finally {
+			unmount(instance);
+			container.remove();
+		}
+	});
+
+	it('Enter invokes model.command with the currently highlighted item', async () => {
+		const command = vi.fn();
+		const container = document.createElement('div');
+		document.body.appendChild(container);
+		const instance = mount(MentionDropdown, {
+			target: container,
+			props: {
+				model: baseModel({
+					items: [makePerson('p1', 'Anna Schmidt'), makePerson('p2', 'Bert Meier')],
+					command
+				})
+			}
+		});
+		try {
+			const exports = instance as unknown as { onKeyDown: (e: KeyboardEvent) => boolean };
+
+			const consumed = exports.onKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }));
+			expect(consumed).toBe(true);
+			expect(command).toHaveBeenCalledTimes(1);
+			expect(command.mock.calls[0][0].id).toBe('p1');
+		} finally {
+			unmount(instance);
+			container.remove();
+		}
+	});
+
+	it('Escape returns false so the suggestion plugin can handle it', async () => {
+		const container = document.createElement('div');
+		document.body.appendChild(container);
+		const instance = mount(MentionDropdown, {
+			target: container,
+			props: {
+				model: baseModel({ items: [makePerson('p1', 'Anna Schmidt')] })
+			}
+		});
+		try {
+			const exports = instance as unknown as { onKeyDown: (e: KeyboardEvent) => boolean };
+			const consumed = exports.onKeyDown(new KeyboardEvent('keydown', { key: 'Escape' }));
+			expect(consumed).toBe(false);
+		} finally {
+			unmount(instance);
+			container.remove();
+		}
+	});
+});

frontend/src/lib/shared/discussion/MentionDropdown.test-fixture.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import MentionDropdown from './MentionDropdown.svelte';
+import type { components } from '$lib/generated/api';
+
+type Person = components['schemas']['Person'];
+type DropdownState = {
+	items: Person[];
+	command: (item: Person) => void;
+	clientRect: (() => DOMRect | null) | null;
+};
+
+type Props = {
+	model: DropdownState;
+	initialEditorQuery: string;
+	/** Test hook: receives a setter for editorQuery so the test can mutate it. */
+	onReady?: (setEditorQuery: (q: string) => void) => void;
+	onSearch?: (q: string) => void;
+};
+
+let { model, initialEditorQuery, onReady, onSearch = () => {} }: Props = $props();
+
+let editorQuery = $state(untrack(() => initialEditorQuery));
+
+$effect(() => {
+	onReady?.((q) => {
+		editorQuery = q;
+	});
+});
+</script>
+
+<MentionDropdown model={model} editorQuery={editorQuery} onSearch={onSearch} />

frontend/src/lib/shared/discussion/PersonMentionEditor.svelte

@@ -7,8 +7,12 @@ import { m } from '$lib/paraglide/messages.js';
 import type { components } from '$lib/generated/api';
 import type { PersonMention } from '$lib/shared/types';
 import { deserialize, serialize } from '$lib/shared/discussion/mentionSerializer';
+import { debounce } from '$lib/shared/utils/debounce';
 import MentionDropdown from './MentionDropdown.svelte';
 
+const SEARCH_DEBOUNCE_MS = 150;
+const SEARCH_RESULT_LIMIT = 5;
+
 type Person = components['schemas']['Person'];
 
 type Props = {
@@ -33,6 +37,13 @@ let {
 
 let editorEl: HTMLDivElement;
 let editor: Editor | null = null;
+// Hoisted so onDestroy can guarantee the imperatively-mounted dropdown is
+// torn down even if Tiptap's suggestion plugin onExit didn't fire (e.g. when
+// the host component is unmounted while the dropdown is still open).
+let mountedDropdown: object | null = null;
+// Hoisted so onDestroy can cancel any pending fetch — otherwise a trailing
+// debounced search can fire after the editor is gone and pollute later tests.
+let cancelPendingSearch: (() => void) | null = null;
 
 // Single reactive state object shared with MentionDropdown. Mutating these
 // fields propagates to the mounted dropdown via Svelte's $state proxy —
@@ -42,10 +53,12 @@ let dropdownState = $state<{
 	items: Person[];
 	command: (item: Person) => void;
 	clientRect: (() => DOMRect | null) | null;
+	editorQuery: string;
 }>({
 	items: [],
 	command: () => {},
-	clientRect: null
+	clientRect: null,
+	editorQuery: ''
 });
 
 type DropdownExports = {
@@ -138,16 +151,13 @@ onMount(() => {
 					// Nora #5618 #3 — separate issue tracks the GET /api/persons
 					// response-shape audit (PersonSummaryDTO leaks `notes`).
 					// ─────────────────────────────────────────────────────────────
-					items: async ({ query }: { query: string }) => {
-						if (!query) return [];
-						try {
-							const res = await fetch(`/api/persons?q=${encodeURIComponent(query)}`);
-							if (!res.ok) return [];
-							return ((await res.json()) as Person[]).slice(0, 5);
-						} catch {
-							return [];
-						}
-					},
+					// Tiptap's suggestion plugin requires an `items()` callback to keep
+					// the dropdown alive, but the actual fetch is owned by `runSearch`
+					// below — routed through the dropdown's search input via the
+					// debounced `onSearch` channel. Returning `[]` here keeps Tiptap
+					// happy without firing a duplicate per-keystroke fetch.
+					// Markus #5616 / Felix / Nora / Sara on PR #629.
+					items: async () => [],
 					// AC-1 fix: insert the typed query as displayName, not person.displayName.
 					command({ editor: ed, range, props }) {
 						const p = props as unknown as { personId: string; displayName: string };
@@ -165,7 +175,6 @@ onMount(() => {
 							.run();
 					},
 					render() {
-						let component: object | null = null;
 						let exports: DropdownExports | null = null;
 
 						// Tiptap's SuggestionProps types `command` against the default
@@ -178,8 +187,46 @@ onMount(() => {
 							clientRect?: (() => DOMRect | null) | null;
 						};
 
+						// Request-token guard: every onSearch invocation bumps `requestId`;
+						// runSearch captures the id active when its fetch starts and discards
+						// the response if a newer onSearch has fired since. Without this, a
+						// late response can repopulate the dropdown after the user cleared
+						// the search input. Sara on PR #629.
+						let requestId = 0;
+						const runSearch = async (query: string) => {
+							const id = requestId;
+							try {
+								// Defensive client-side cap — server-side enforcement is tracked
+								// separately. Markus on PR #629.
+								const res = await fetch(
+									`/api/persons?q=${encodeURIComponent(query)}&limit=${SEARCH_RESULT_LIMIT}`
+								);
+								if (id !== requestId) return;
+								if (!res.ok) {
+									dropdownState.items = [];
+									return;
+								}
+								const data = (await res.json()) as Person[];
+								if (id !== requestId) return;
+								dropdownState.items = data.slice(0, SEARCH_RESULT_LIMIT);
+							} catch {
+								if (id !== requestId) return;
+								dropdownState.items = [];
+							}
+						};
+						const debouncedSearch = debounce(runSearch, SEARCH_DEBOUNCE_MS);
+						cancelPendingSearch = () => debouncedSearch.cancel();
+						const onSearch = (query: string) => {
+							requestId++;
+							if (query.trim() === '') {
+								debouncedSearch.cancel();
+								dropdownState.items = [];
+								return;
+							}
+							debouncedSearch(query);
+						};
+
 						const updateState = (renderProps: LooseRenderProps) => {
-							dropdownState.items = renderProps.items as Person[];
 							// AC-1: pass typed query as displayName, not person.displayName
 							dropdownState.command = (item: Person) =>
 								renderProps.command({
@@ -187,16 +234,29 @@ onMount(() => {
 									displayName: renderProps.query
 								});
 							dropdownState.clientRect = renderProps.clientRect ?? null;
+							dropdownState.editorQuery = renderProps.query;
 						};
 
 						return {
 							onStart(renderProps) {
-								updateState(renderProps as unknown as LooseRenderProps);
+								const loose = renderProps as unknown as LooseRenderProps;
+								updateState(loose);
+								// MentionDropdown reads `editorQuery` off the shared state
+								// proxy via its `editorQuery` prop binding below — this is
+								// the same pattern as `model.items`. We do not pass it as a
+								// separate prop because Svelte 5's mount() does not expose
+								// settable prop accessors, so we route through the proxy.
 								const mounted = mount(MentionDropdown, {
 									target: document.body,
-									props: { model: dropdownState }
+									props: {
+										model: dropdownState,
+										get editorQuery() {
+											return dropdownState.editorQuery;
+										},
+										onSearch
+									}
 								});
-								component = mounted as object;
+								mountedDropdown = mounted as object;
 								exports = mounted as unknown as DropdownExports;
 							},
 							onUpdate(renderProps) {
@@ -208,9 +268,16 @@ onMount(() => {
 								return exports?.onKeyDown(event) ?? false;
 							},
 							onExit() {
-								if (component) {
-									unmount(component);
-									component = null;
+								// Cancel any pending debounce so a closed dropdown's trailing
+								// runSearch cannot fire against the *next* dropdown's state.
+								// The hoisted `cancelPendingSearch` would be overwritten by
+								// the next render()'s onStart before the trailing call fires,
+								// so we cancel locally via the closure-scoped debouncedSearch.
+								// Felix #1 on PR #629.
+								debouncedSearch.cancel();
+								if (mountedDropdown) {
+									unmount(mountedDropdown);
+									mountedDropdown = null;
 									exports = null;
 								}
 							}
@@ -253,7 +320,15 @@ onMount(() => {
 });
 
 onDestroy(() => {
+	cancelPendingSearch?.();
 	editor?.destroy();
+	// Tiptap suggestion onExit usually unmounts the dropdown, but if the host
+	// component is destroyed while a suggestion is active the dropdown can
+	// outlive the editor — clean it up explicitly.
+	if (mountedDropdown) {
+		unmount(mountedDropdown);
+		mountedDropdown = null;
+	}
 });
 
 // Keep the data-placeholder attribute in sync with actual emptiness so the

frontend/src/lib/shared/discussion/PersonMentionEditor.svelte.spec.ts

@@ -15,22 +15,32 @@ import { m } from '$lib/paraglide/messages.js';
 type Person = components['schemas']['Person'];
 type PersonMention = components['schemas']['PersonMention'];
 
+// Mirror of the debounce in PersonMentionEditor.svelte. Naming the magic and
+// using a generous slack (SEARCH_DEBOUNCE_MS + 350 = 500 ms) kills CI-jitter
+// flakiness Sara raised on PR #629.
+const SEARCH_DEBOUNCE_MS = 150;
+const POST_DEBOUNCE_SLACK_MS = 350;
+
 const AUGUSTE: Person = {
 	id: 'p-aug',
 	firstName: 'Auguste',
 	lastName: 'Raddatz',
 	displayName: 'Auguste Raddatz',
+	personType: 'PERSON',
+	familyMember: false,
 	birthYear: 1882,
 	deathYear: 1944
-} as unknown as Person;
+};
 
 const ANNA: Person = {
 	id: 'p-anna',
 	firstName: 'Anna',
 	lastName: 'Schmidt',
 	displayName: 'Anna Schmidt',
+	personType: 'PERSON',
+	familyMember: false,
 	birthYear: 1860
-} as unknown as Person;
+};
 
 function mockFetchWithPersons(persons: Person[] = [AUGUSTE, ANNA]) {
 	vi.stubGlobal(
@@ -125,6 +135,20 @@ describe('PersonMentionEditor — typeahead', () => {
 		});
 	});
 
+	it('appends &limit=5 to the fetch URL (defensive client-side cap, Markus on PR #629)', async () => {
+		const fetchMock = vi
+			.fn()
+			.mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([AUGUSTE]) });
+		vi.stubGlobal('fetch', fetchMock);
+		renderHost();
+
+		await userEvent.type(page.getByRole('textbox'), '@Aug');
+
+		await vi.waitFor(() => {
+			expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('limit=5'));
+		});
+	});
+
 	it('shows life dates next to the name in the dropdown', async () => {
 		mockFetchWithPersons();
 		renderHost();
@@ -161,6 +185,226 @@ describe('PersonMentionEditor — typeahead', () => {
 	});
 });
 
+// ─── AC-2/3: search input drives the person fetch (debounced) ───────────────
+
+describe('PersonMentionEditor — AC-2/3: search input drives fetch', () => {
+	it('editing the search input fires a debounced fetch with the new query', async () => {
+		const fetchMock = vi
+			.fn()
+			.mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([AUGUSTE]) });
+		vi.stubGlobal('fetch', fetchMock);
+		renderHost();
+
+		// Open the dropdown so the search input is reachable.
+		await userEvent.type(page.getByRole('textbox'), '@');
+		await vi.waitFor(async () => {
+			await expect.element(page.getByRole('searchbox')).toBeVisible();
+		});
+
+		const fetchesBeforeSearch = fetchMock.mock.calls.length;
+
+		// `fill` simulates a single input event with the final value — sidesteps
+		// per-keystroke timing of userEvent.type so the test can deterministically
+		// assert that one input event collapses into one debounced fetch.
+		await page.getByRole('searchbox').fill('Walter');
+
+		await vi.waitFor(
+			() => {
+				expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('q=Walter'));
+			},
+			{ timeout: 1000 }
+		);
+
+		const fetchesAfterSearch = fetchMock.mock.calls.length - fetchesBeforeSearch;
+		expect(fetchesAfterSearch).toBe(1);
+	});
+
+	it('fires exactly one /api/persons fetch when the user searches for Walter (debounced)', async () => {
+		const fetchMock = vi
+			.fn()
+			.mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([AUGUSTE]) });
+		vi.stubGlobal('fetch', fetchMock);
+		renderHost();
+
+		// Open the dropdown first so the search input is reachable. `fill` then
+		// drives the searchbox in one input event — sidesteps per-keystroke
+		// debounce timing on CI that Sara flagged on PR #629 round 2.
+		await userEvent.type(page.getByRole('textbox'), '@');
+		await vi.waitFor(async () => {
+			await expect.element(page.getByRole('searchbox')).toBeVisible();
+		});
+
+		const fetchesBeforeSearch = fetchMock.mock.calls.length;
+
+		await page.getByRole('searchbox').fill('Walter');
+
+		await new Promise((r) => setTimeout(r, SEARCH_DEBOUNCE_MS + POST_DEBOUNCE_SLACK_MS));
+
+		const personsFetches = fetchMock.mock.calls
+			.slice(fetchesBeforeSearch)
+			.filter(([url]) => typeof url === 'string' && url.startsWith('/api/persons'));
+		expect(personsFetches.length).toBe(1);
+	});
+
+	it('clearing the search input clears the list without firing a fetch', async () => {
+		const fetchMock = vi
+			.fn()
+			.mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([AUGUSTE]) });
+		vi.stubGlobal('fetch', fetchMock);
+		renderHost();
+
+		await userEvent.type(page.getByRole('textbox'), '@Aug');
+		await vi.waitFor(async () => {
+			await expect.element(page.getByText('Auguste Raddatz')).toBeInTheDocument();
+		});
+
+		const fetchesBeforeClear = fetchMock.mock.calls.length;
+
+		await userEvent.clear(page.getByRole('searchbox'));
+
+		await new Promise((r) => setTimeout(r, SEARCH_DEBOUNCE_MS + POST_DEBOUNCE_SLACK_MS));
+
+		expect(fetchMock.mock.calls.length).toBe(fetchesBeforeClear);
+		await expect.element(page.getByText('Auguste Raddatz')).not.toBeInTheDocument();
+	});
+});
+
+// ─── Whitespace-only query (Elicit AC-4 ambiguity on PR #629) ───────────────
+
+describe('PersonMentionEditor — whitespace-only query', () => {
+	it('keeps the "Namen eingeben…" prompt and fires no fetch when @ is followed only by spaces', async () => {
+		const fetchMock = vi.fn().mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([]) });
+		vi.stubGlobal('fetch', fetchMock);
+		renderHost();
+
+		await userEvent.type(page.getByRole('textbox'), '@   ');
+		await vi.waitFor(async () => {
+			await expect.element(page.getByRole('searchbox')).toBeVisible();
+		});
+
+		await new Promise((r) => setTimeout(r, SEARCH_DEBOUNCE_MS + POST_DEBOUNCE_SLACK_MS));
+
+		await expect.element(page.getByText(m.person_mention_search_prompt())).toBeInTheDocument();
+		expect(fetchMock).not.toHaveBeenCalled();
+	});
+});
+
+// ─── Stale-response race (Sara on PR #629) ───────────────────────────────────
+
+describe('PersonMentionEditor — stale-response race', () => {
+	it('discards a stale response that resolves after the search has been cleared', async () => {
+		let resolveFetch!: (v: { ok: boolean; json: () => Promise<Person[]> }) => void;
+		const pendingResponse = new Promise<{ ok: boolean; json: () => Promise<Person[]> }>((r) => {
+			resolveFetch = r;
+		});
+		const fetchMock = vi.fn().mockReturnValue(pendingResponse);
+		vi.stubGlobal('fetch', fetchMock);
+		renderHost();
+
+		// Open the dropdown and let the debounce fire so a fetch is in flight.
+		await userEvent.type(page.getByRole('textbox'), '@Aug');
+		await vi.waitFor(() => {
+			expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/persons?q=Aug'));
+		});
+
+		// Clear the search input *before* the fetch resolves.
+		await userEvent.clear(page.getByRole('searchbox'));
+		await expect.element(page.getByRole('searchbox')).toHaveValue('');
+
+		// The stale fetch now resolves with persons. The dropdown must stay empty.
+		resolveFetch({ ok: true, json: () => Promise.resolve([AUGUSTE]) });
+		await new Promise((r) => setTimeout(r, 50));
+
+		await expect.element(page.getByText('Auguste Raddatz')).not.toBeInTheDocument();
+	});
+});
+
+// ─── Server failure characterization (Sara #2 on PR #629) ───────────────────
+
+describe('PersonMentionEditor — server failure', () => {
+	it('on 500 response keeps the dropdown open with the empty-state copy (silent failure pinned; distinct error UX tracked separately)', async () => {
+		const fetchMock = vi
+			.fn()
+			.mockResolvedValue({ ok: false, status: 500, json: vi.fn().mockResolvedValue({}) });
+		vi.stubGlobal('fetch', fetchMock);
+		renderHost();
+
+		await userEvent.type(page.getByRole('textbox'), '@Aug');
+		await new Promise((r) => setTimeout(r, SEARCH_DEBOUNCE_MS + POST_DEBOUNCE_SLACK_MS));
+
+		// Pins current silent-failure behaviour. The day someone implements a
+		// distinct error UX (toast / "Suche fehlgeschlagen" copy), this test
+		// goes red and forces them to update the assertion.
+		await expect.element(page.getByText(m.person_mention_popup_empty())).toBeInTheDocument();
+	});
+
+	it('on a fetch reject (network failure) keeps the dropdown open with the empty-state copy', async () => {
+		const fetchMock = vi.fn().mockRejectedValue(new TypeError('NetworkError'));
+		vi.stubGlobal('fetch', fetchMock);
+		renderHost();
+
+		await userEvent.type(page.getByRole('textbox'), '@Aug');
+		await new Promise((r) => setTimeout(r, SEARCH_DEBOUNCE_MS + POST_DEBOUNCE_SLACK_MS));
+
+		await expect.element(page.getByText(m.person_mention_popup_empty())).toBeInTheDocument();
+	});
+});
+
+// ─── onExit cancels pending debounce (Felix #1 on PR #629) ───────────────────
+
+describe('PersonMentionEditor — onExit cancels pending debounce', () => {
+	it('cancels the pending debounced fetch when Escape closes the dropdown before the debounce fires', async () => {
+		const fetchMock = vi.fn().mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([]) });
+		vi.stubGlobal('fetch', fetchMock);
+		renderHost();
+
+		// Open the dropdown by typing @ + a query in the editor.
+		await userEvent.type(page.getByRole('textbox'), '@A');
+		await vi.waitFor(async () => {
+			await expect.element(page.getByRole('searchbox')).toBeVisible();
+		});
+
+		// Wait for any in-flight fetch from opening the dropdown to settle.
+		await new Promise((r) => setTimeout(r, SEARCH_DEBOUNCE_MS + POST_DEBOUNCE_SLACK_MS));
+		const fetchesBeforeEscape = fetchMock.mock.calls.length;
+
+		// Trigger a new debounced search (queues runSearch after 150 ms), then
+		// immediately Escape *while focus is back in the editor* so Tiptap's
+		// suggestion-plugin Escape handler fires onExit before the debounce.
+		// Without onExit cancelling the pending debounce, runSearch executes
+		// against the now-unmounted dropdown's state.
+		await page.getByRole('searchbox').fill('Walter');
+		// Focus the editor so the Escape lands on Tiptap's suggestion handler.
+		(page.getByRole('textbox').element() as HTMLElement).focus();
+		await userEvent.keyboard('{Escape}');
+
+		// Wait past the debounce window. If onExit did not cancel the pending
+		// debounce, a fetch with q=Walter would still fire here.
+		await new Promise((r) => setTimeout(r, SEARCH_DEBOUNCE_MS + POST_DEBOUNCE_SLACK_MS));
+
+		const newFetches = fetchMock.mock.calls.slice(fetchesBeforeEscape);
+		const walterFetches = newFetches.filter(
+			([url]) => typeof url === 'string' && url.includes('q=Walter')
+		);
+		expect(walterFetches.length).toBe(0);
+	});
+});
+
+// ─── AC-1: search input prefilled with text typed after @ ───────────────────
+
+describe('PersonMentionEditor — AC-1: search input prefill', () => {
+	it('prefills the dropdown search input with the text typed after @', async () => {
+		mockFetchEmpty();
+		renderHost();
+
+		await userEvent.type(page.getByRole('textbox'), '@WdG');
+
+		await vi.waitFor(async () => {
+			await expect.element(page.getByRole('searchbox')).toHaveValue('WdG');
+		});
+	});
+});
+
 // ─── AC-1: typed text becomes displayName, not DB name ───────────────────────
 
 describe('PersonMentionEditor — AC-1: typed text as displayName', () => {

frontend/src/lib/shared/utils/debounce.ts

@@ -1,12 +1,25 @@
 /**
  * Returns a debounced version of fn that delays invocation until after
- * `delay` ms have elapsed since the last call.
+ * `delay` ms have elapsed since the last call. The returned function
+ * exposes a `cancel()` method that DROPS (does not flush) the pending
+ * trailing invocation — essential when the host context (a destroyed
+ * component, an unmounted editor) shouldn't fire the trailing call.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): T {
-	let timer: ReturnType<typeof setTimeout>;
-	return ((...args: Parameters<T>) => {
-		clearTimeout(timer);
+export function debounce<T extends (...args: any[]) => void>(
+	fn: T,
+	delay: number
+): T & { cancel: () => void } {
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	const wrapped = ((...args: Parameters<T>) => {
+		if (timer !== undefined) clearTimeout(timer);
 		timer = setTimeout(() => fn(...args), delay);
-	}) as T;
+	}) as T & { cancel: () => void };
+	wrapped.cancel = () => {
+		if (timer !== undefined) {
+			clearTimeout(timer);
+			timer = undefined;
+		}
+	};
+	return wrapped;
 }