fix(tests): fix 13 pre-existing vitest-browser spec failures

Fixes all remaining failing tests in the browser project. Root cause in
every case: Playwright CDP-based clicks/keyboard events do not reliably
trigger Svelte 5 onclick/onkeydown handlers. Pattern applied throughout:

- Buttons / result items: native `.element().click()` or
  `dispatchEvent(new MouseEvent('click', { bubbles: true }))`
- Keyboard events: `dispatchEvent(new KeyboardEvent('keydown', { key }))`
  on the target DOM element
- TipTap selection: `element.focus()` + Selection API +
  `document.dispatchEvent(new Event('selectionchange'))`
- ProseMirror focus for onFocus: `dispatchEvent(new FocusEvent('focus'))`

Also fixes pre-existing content/logic issues found during analysis:
- ChronikErrorCard, BulkDropZone, CorrespondenzHero: stale i18n strings
  and wrong ARIA role (combobox not textbox)
- RichtlinienRuleCard: beide beispielInput + beispielOutput required for
  arrow to render; querySelectorAll to get last code element
- admin/system/page: vi.unstubAllGlobals() in afterEach; strict-mode
  heading selector; per-call mockResolvedValueOnce for dual-card page
- DocumentList: add total prop + result count paragraph (test relied on it)
- PersonTypeahead keyboard navigation: pressKey() helper with native
  KeyboardEvent dispatch replaces userEvent.keyboard()
- PersonMultiSelect: native element clicks for result selection and
  chip removal; keydown dispatch on result div for Enter key test

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

frontend/src/routes/DocumentList.svelte

@@ -13,12 +13,14 @@ let {
 	items,
 	canWrite,
 	error,
+	total = 0,
 	q = '',
 	sort = 'DATE'
 }: {
 	items: DocumentSearchItem[];
 	canWrite: boolean;
 	error?: string | null;
+	total?: number;
 	q?: string;
 	sort?: SortMode;
 } = $props();
@@ -77,6 +79,10 @@ function groupByReceiver(docItems: DocumentSearchItem[]) {
 		</div>
 	</div>
 {:else if items.length > 0}
+	<!-- RESULT COUNT -->
+	{#if total > 0}
+		<p class="mb-2 text-sm text-ink-2">{total} Dokumente</p>
+	{/if}
 	<!-- GROUP CARDS -->
 	{#each groups as group (group.label)}
 		<div

frontend/src/routes/admin/entity-nav.svelte.spec.ts

@@ -76,7 +76,13 @@ describe('EntityNav — flyout', () => {
 		document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
 		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
 		const dialog = document.querySelector('[role="dialog"]')!;
-		dialog.querySelector<HTMLAnchorElement>('a[href^="/admin/"]')!.click();
+		const link = dialog.querySelector<HTMLAnchorElement>('a[href^="/admin/"]')!;
+		// Prevent the browser from navigating the test iframe to /admin/... (which
+		// would redirect to /login and kill the iframe connection).  preventDefault()
+		// on the capture phase suppresses navigation while still letting the Svelte
+		// onclick handler (closeFlyout) run on the bubbling phase.
+		link.addEventListener('click', (e) => e.preventDefault(), { capture: true, once: true });
+		link.click();
 		await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
 	});
 });

frontend/src/routes/admin/system/page.svelte.spec.ts

@@ -4,7 +4,10 @@ import { page } from 'vitest/browser';
 import Page from './+page.svelte';
 
 afterEach(cleanup);
-afterEach(() => vi.restoreAllMocks());
+afterEach(() => {
+	vi.restoreAllMocks();
+	vi.unstubAllGlobals();
+});
 
 describe('Admin system page', () => {
 	it('renders the backfill versions heading', async () => {
@@ -52,7 +55,9 @@ describe('Admin system page — mass import card', () => {
 
 	it('renders the mass import heading', async () => {
 		render(Page, {});
-		await expect.element(page.getByText(/Massenimport/i)).toBeInTheDocument();
+		// getByText(/Massenimport/i) would match both the H2 heading AND the thumbnail
+		// description paragraph that mentions "Massenimport" — use heading role instead.
+		await expect.element(page.getByRole('heading', { name: /Massenimport/i })).toBeInTheDocument();
 	});
 
 	it('renders the start import button when idle', async () => {
@@ -66,9 +71,11 @@ describe('Admin system page — mass import card', () => {
 	});
 
 	it('disables the start button and shows running state after click', async () => {
+		// $effect calls fetchImportStatus() then fetchThumbnailStatus() on mount —
+		// the mock must cover both before the POST trigger call.
 		const fetchMock = vi
 			.fn()
-			// initial status fetch → IDLE
+			// call 1: fetchImportStatus() on mount → IDLE
 			.mockResolvedValueOnce({
 				ok: true,
 				json: async () => ({
@@ -78,7 +85,20 @@ describe('Admin system page — mass import card', () => {
 					startedAt: null
 				})
 			})
-			// trigger POST → returns RUNNING immediately
+			// call 2: fetchThumbnailStatus() on mount → IDLE (prevent thumbnail polling)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: async () => ({
+					state: 'IDLE',
+					message: '',
+					total: 0,
+					processed: 0,
+					skipped: 0,
+					failed: 0,
+					startedAt: null
+				})
+			})
+			// call 3: trigger POST → returns RUNNING
 			.mockResolvedValueOnce({
 				ok: true,
 				json: async () => ({
@@ -99,17 +119,33 @@ describe('Admin system page — mass import card', () => {
 	});
 
 	it('shows done status and retry button after successful import', async () => {
+		// Use mockResolvedValueOnce per call so thumbnail gets IDLE, not DONE.
+		// Both cards in DONE state would render two "Erneut starten" buttons → strict mode.
 		vi.stubGlobal(
 			'fetch',
-			vi.fn().mockResolvedValue({
-				ok: true,
-				json: async () => ({
-					state: 'DONE',
-					message: 'Import abgeschlossen.',
-					processed: 42,
-					startedAt: '2026-01-01T10:00:00'
+			vi
+				.fn()
+				.mockResolvedValueOnce({
+					ok: true,
+					json: async () => ({
+						state: 'DONE',
+						message: 'Import abgeschlossen.',
+						processed: 42,
+						startedAt: '2026-01-01T10:00:00'
+					})
+				})
+				.mockResolvedValueOnce({
+					ok: true,
+					json: async () => ({
+						state: 'IDLE',
+						message: '',
+						total: 0,
+						processed: 0,
+						skipped: 0,
+						failed: 0,
+						startedAt: null
+					})
 				})
-			})
 		);
 		render(Page, {});
 		await expect.element(page.getByText(/42 Dokumente/i)).toBeInTheDocument();
@@ -117,17 +153,33 @@ describe('Admin system page — mass import card', () => {
 	});
 
 	it('shows failed status and retry button on error', async () => {
+		// Use mockResolvedValueOnce so thumbnail gets IDLE, not FAILED.
+		// Both cards in FAILED state would render two identical error messages → strict mode.
 		vi.stubGlobal(
 			'fetch',
-			vi.fn().mockResolvedValue({
-				ok: true,
-				json: async () => ({
-					state: 'FAILED',
-					message: 'Datei nicht gefunden.',
-					processed: 0,
-					startedAt: '2026-01-01T10:00:00'
+			vi
+				.fn()
+				.mockResolvedValueOnce({
+					ok: true,
+					json: async () => ({
+						state: 'FAILED',
+						message: 'Datei nicht gefunden.',
+						processed: 0,
+						startedAt: '2026-01-01T10:00:00'
+					})
+				})
+				.mockResolvedValueOnce({
+					ok: true,
+					json: async () => ({
+						state: 'IDLE',
+						message: '',
+						total: 0,
+						processed: 0,
+						skipped: 0,
+						failed: 0,
+						startedAt: null
+					})
 				})
-			})
 		);
 		render(Page, {});
 		await expect.element(page.getByText(/Datei nicht gefunden/i)).toBeInTheDocument();

frontend/src/routes/briefwechsel/CorrespondenzHero.svelte.spec.ts

@@ -24,7 +24,8 @@ describe('CorrespondenzHero — headline and cross-link', () => {
 
 	it('renders a person typeahead input', async () => {
 		render(CorrespondenzHero, { onSelectPerson: noop });
-		await expect.element(page.getByTestId('conv-hero').getByRole('textbox')).toBeInTheDocument();
+		// PersonTypeahead renders <input role="combobox">, not role="textbox"
+		await expect.element(page.getByTestId('conv-hero').getByRole('combobox')).toBeInTheDocument();
 	});
 });
 

frontend/src/routes/layout.svelte.spec.ts

@@ -1,11 +1,31 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page, userEvent } from 'vitest/browser';
 import { createRawSnippet } from 'svelte';
 
 vi.mock('$env/static/public', () => ({ PUBLIC_NOTIFICATION_POLL_MS: '60000' }));
 
-afterEach(cleanup);
+// NotificationBell calls notificationStore.init() on mount, which creates an
+// EventSource and immediately fetches the unread count.  In the test environment
+// the SSE connection fails (no backend), triggering onerror → another fetch.
+// If that fetch returns 401, notifications.svelte.ts calls
+// window.location.href = '/login', navigating the test iframe and breaking the
+// Playwright connection.  Stubbing fetch to return 200 keeps it in-check.
+beforeEach(() => {
+	vi.stubGlobal(
+		'fetch',
+		vi.fn().mockResolvedValue({
+			ok: true,
+			status: 200,
+			json: vi.fn().mockResolvedValue({ count: 0, content: [] })
+		})
+	);
+});
+
+afterEach(() => {
+	cleanup();
+	vi.unstubAllGlobals();
+});
 
 const emptySnippet = createRawSnippet(() => ({ render: () => '<span></span>' }));
 import Layout from './+layout.svelte';