diff --git a/frontend/src/routes/search/InterpretationChipRow.svelte b/frontend/src/routes/search/InterpretationChipRow.svelte
new file mode 100644
index 00000000..8e9cdbc0
--- /dev/null
+++ b/frontend/src/routes/search/InterpretationChipRow.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+import { SvelteSet } from 'svelte/reactivity';
+import { m } from '$lib/paraglide/messages.js';
+import type { components } from '$lib/generated/api';
+
+type NlQueryInterpretation = components['schemas']['NlQueryInterpretation'];
+type ChipType = 'sender' | 'directional' | 'date' | 'keyword';
+
+let {
+	interpretation,
+	onRemoveChip
+}: {
+	interpretation: NlQueryInterpretation;
+	onRemoveChip: (type: ChipType, value?: string) => void;
+} = $props();
+
+type Chip =
+	| { key: string; type: 'sender'; label: string }
+	| { key: string; type: 'directional'; from: string; to: string }
+	| { key: string; type: 'date'; label: string }
+	| { key: string; type: 'keyword'; value: string; label: string };
+
+// Locally removed chips. The parent remounts this component (via {#key}) on every
+// new NL search, so this set never needs an explicit reset.
+const removed = new SvelteSet<string>();
+
+function yearOf(iso: string | undefined): string | undefined {
+	return iso?.slice(0, 4);
+}
+
+function dateRangeLabel(from: string | undefined, to: string | undefined): string {
+	const fromYear = yearOf(from);
+	const toYear = yearOf(to);
+	if (fromYear && toYear) return fromYear === toYear ? fromYear : `${fromYear}–${toYear}`;
+	return fromYear ?? toYear ?? '';
+}
+
+const chips = $derived.by(() => {
+	const list: Chip[] = [];
+	const { resolvedPersons, dateFrom, dateTo, keywords, keywordsApplied } = interpretation;
+
+	if (resolvedPersons.length >= 2) {
+		list.push({
+			key: 'directional',
+			type: 'directional',
+			from: resolvedPersons[0].displayName,
+			to: resolvedPersons[1].displayName
+		});
+	} else if (resolvedPersons.length === 1) {
+		list.push({
+			key: 'sender:' + resolvedPersons[0].id,
+			type: 'sender',
+			label: `${m.search_chip_sender()}: ${resolvedPersons[0].displayName}`
+		});
+	}
+
+	if (dateFrom || dateTo) {
+		list.push({
+			key: 'date',
+			type: 'date',
+			label: `${m.search_chip_date()}: ${dateRangeLabel(dateFrom, dateTo)}`
+		});
+	}
+
+	if (keywordsApplied) {
+		for (const keyword of keywords) {
+			list.push({
+				key: 'keyword:' + keyword,
+				type: 'keyword',
+				value: keyword,
+				label: `${m.search_chip_keyword()}: ${keyword}`
+			});
+		}
+	}
+
+	return list.filter((chip) => !removed.has(chip.key));
+});
+
+const showKeywordsNotApplied = $derived(
+	!interpretation.keywordsApplied && interpretation.keywords.length > 0
+);
+
+function remove(chip: Chip) {
+	removed.add(chip.key);
+	onRemoveChip(chip.type, chip.type === 'keyword' ? chip.value : undefined);
+}
+
+const nameSpan = 'sm:max-w-[12rem] max-w-[8rem] truncate';
+const chipWrapper =
+	'inline-flex items-center gap-1.5 rounded-full border border-line bg-muted px-3 text-sm text-ink-2 focus-within:ring-2 focus-within:ring-brand-navy';
+const removeButton =
+	'flex min-h-[44px] w-6 shrink-0 items-center justify-center text-ink-3 outline-none hover:text-red-500 focus-visible:ring-2 focus-visible:ring-brand-navy';
+</script>
+
+<div class="flex flex-wrap gap-2">
+	{#each chips as chip (chip.key)}
+		{#if chip.type === 'directional'}
+			<span
+				data-chip-type="directional"
+				class={chipWrapper}
+				aria-label={m.search_chip_directional_label({ from: chip.from, to: chip.to })}
+			>
+				<span class={nameSpan}>{chip.from}</span>
+				<span aria-hidden="true">→</span>
+				<span class={nameSpan}>{chip.to}</span>
+				<button
+					type="button"
+					class={removeButton}
+					aria-label={m.search_filter_remove_label({ label: `${chip.from} → ${chip.to}` })}
+					onclick={() => remove(chip)}
+				>
+					<span aria-hidden="true">×</span>
+				</button>
+			</span>
+		{:else}
+			<span data-chip-type={chip.type} class={chipWrapper}>
+				<span class={nameSpan}>{chip.label}</span>
+				<button
+					type="button"
+					class={removeButton}
+					aria-label={m.search_filter_remove_label({ label: chip.label })}
+					onclick={() => remove(chip)}
+				>
+					<span aria-hidden="true">×</span>
+				</button>
+			</span>
+		{/if}
+	{/each}
+</div>
+
+{#if showKeywordsNotApplied}
+	<p class="mt-2 text-xs text-ink-3">{m.smart_search_keywords_not_applied()}</p>
+{/if}
diff --git a/frontend/src/routes/search/InterpretationChipRow.svelte.spec.ts b/frontend/src/routes/search/InterpretationChipRow.svelte.spec.ts
new file mode 100644
index 00000000..f3164389
--- /dev/null
+++ b/frontend/src/routes/search/InterpretationChipRow.svelte.spec.ts
@@ -0,0 +1,133 @@
+import { describe, expect, it, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import InterpretationChipRow from './InterpretationChipRow.svelte';
+import type { components } from '$lib/generated/api';
+
+type NlQueryInterpretation = components['schemas']['NlQueryInterpretation'];
+type PersonHint = components['schemas']['PersonHint'];
+
+afterEach(() => cleanup());
+
+const makePerson = (id: string, displayName: string): PersonHint => ({ id, displayName });
+
+const makeInterpretation = (
+	overrides: Partial<NlQueryInterpretation> = {}
+): NlQueryInterpretation => ({
+	resolvedPersons: [],
+	ambiguousPersons: [],
+	keywords: [],
+	rawQuery: 'test',
+	keywordsApplied: true,
+	...overrides
+});
+
+describe('InterpretationChipRow', () => {
+	it('renders type-prefixed labels for sender, date and keyword chips', async () => {
+		render(InterpretationChipRow, {
+			interpretation: makeInterpretation({
+				resolvedPersons: [makePerson('p1', 'Walter Raddatz')],
+				dateFrom: '1914-01-01',
+				dateTo: '1918-12-31',
+				keywords: ['krieg']
+			}),
+			onRemoveChip: vi.fn()
+		});
+		await expect.element(page.getByText('Absender: Walter Raddatz')).toBeInTheDocument();
+		await expect.element(page.getByText('Zeitraum: 1914–1918')).toBeInTheDocument();
+		await expect.element(page.getByText('Stichwort: krieg')).toBeInTheDocument();
+	});
+
+	it('calls onRemoveChip with "sender" when the sender chip × is clicked', async () => {
+		const onRemoveChip = vi.fn();
+		render(InterpretationChipRow, {
+			interpretation: makeInterpretation({
+				resolvedPersons: [makePerson('p1', 'Walter Raddatz')]
+			}),
+			onRemoveChip
+		});
+		await page.getByRole('button', { name: /Absender: Walter Raddatz/ }).click();
+		expect(onRemoveChip).toHaveBeenCalledWith('sender', undefined);
+	});
+
+	it('removes a chip from the DOM but keeps the rest when one × is clicked', async () => {
+		const { container } = render(InterpretationChipRow, {
+			interpretation: makeInterpretation({
+				resolvedPersons: [makePerson('p1', 'Walter Raddatz')],
+				dateFrom: '1914-01-01',
+				dateTo: '1918-12-31',
+				keywords: ['krieg']
+			}),
+			onRemoveChip: vi.fn()
+		});
+		expect(container.querySelectorAll('[data-chip-type]')).toHaveLength(3);
+		await page.getByRole('button', { name: /Absender/ }).click();
+		await vi.waitFor(() => expect(container.querySelectorAll('[data-chip-type]')).toHaveLength(2));
+	});
+
+	it('renders a single directional chip with an arrow for a 2-name query', async () => {
+		const { container } = render(InterpretationChipRow, {
+			interpretation: makeInterpretation({
+				resolvedPersons: [makePerson('p1', 'Walter Raddatz'), makePerson('p2', 'Emma Raddatz')]
+			}),
+			onRemoveChip: vi.fn()
+		});
+		expect(container.querySelectorAll('[data-chip-type="directional"]')).toHaveLength(1);
+		await expect.element(page.getByText(/→/)).toBeInTheDocument();
+	});
+
+	it('calls onRemoveChip with "directional" when the directional chip × is clicked', async () => {
+		const onRemoveChip = vi.fn();
+		render(InterpretationChipRow, {
+			interpretation: makeInterpretation({
+				resolvedPersons: [makePerson('p1', 'Walter Raddatz'), makePerson('p2', 'Emma Raddatz')]
+			}),
+			onRemoveChip
+		});
+		await page.getByRole('button', { name: /Walter Raddatz/ }).click();
+		expect(onRemoveChip).toHaveBeenCalledWith('directional', undefined);
+	});
+
+	it('does not render keyword chips when keywordsApplied is false', async () => {
+		const { container } = render(InterpretationChipRow, {
+			interpretation: makeInterpretation({
+				keywordsApplied: false,
+				keywords: ['krieg', 'brief']
+			}),
+			onRemoveChip: vi.fn()
+		});
+		expect(container.querySelectorAll('[data-chip-type="keyword"]')).toHaveLength(0);
+	});
+
+	it('renders no keyword chips when keywords is empty', async () => {
+		const { container } = render(InterpretationChipRow, {
+			interpretation: makeInterpretation({ keywordsApplied: true, keywords: [] }),
+			onRemoveChip: vi.fn()
+		});
+		expect(container.querySelectorAll('[data-chip-type="keyword"]')).toHaveLength(0);
+	});
+
+	it('renders exactly one keyword chip per keyword', async () => {
+		const { container } = render(InterpretationChipRow, {
+			interpretation: makeInterpretation({
+				keywordsApplied: true,
+				keywords: ['krieg', 'brief', 'front']
+			}),
+			onRemoveChip: vi.fn()
+		});
+		expect(container.querySelectorAll('[data-chip-type="keyword"]')).toHaveLength(3);
+	});
+
+	it('keeps the × button in the DOM when a display name is 100 characters', async () => {
+		const longName = 'W'.repeat(100);
+		render(InterpretationChipRow, {
+			interpretation: makeInterpretation({
+				resolvedPersons: [makePerson('p1', longName)]
+			}),
+			onRemoveChip: vi.fn()
+		});
+		await expect
+			.element(page.getByRole('button', { name: new RegExp('Absender') }))
+			.toBeInTheDocument();
+	});
+});