test(e2e): add history panel playwright spec

Three scenarios: versions list appears after edits, diff shows changed
field, compare mode displays diff between two selected versions.

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

frontend/e2e/history.spec.ts

@@ -0,0 +1,89 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Document edit history E2E tests.
+ * Relies on the 'Document creation' and 'Document editing' tests in documents.spec.ts
+ * having run first (they create and edit "E2E Testbrief (überarbeitet)").
+ * Assumes auth setup has run.
+ */
+test.describe('Document history panel', () => {
+	test('history section appears after creating and editing a document', async ({ page }) => {
+		// Find the document edited in the documents.spec.ts editing test
+		await page.goto('/?q=E2E+Testbrief');
+		await page.waitForSelector('[data-hydrated]');
+		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
+		const href = await docLink.getAttribute('href');
+		await page.goto(href!);
+
+		// History section should be present (collapsed by default)
+		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
+		await expect(historyToggle).toBeVisible();
+
+		// Expand the history section
+		await historyToggle.click();
+
+		// Should show at least two version entries (created + edited)
+		const versionItems = page.locator('[data-testid="history-version"]');
+		await expect(versionItems).toHaveCount(2, { timeout: 5000 });
+
+		await page.screenshot({ path: 'test-results/e2e/history-versions-list.png' });
+	});
+
+	test('diff view highlights changed field after title edit', async ({ page }) => {
+		await page.goto('/?q=E2E+Testbrief');
+		await page.waitForSelector('[data-hydrated]');
+		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
+		const href = await docLink.getAttribute('href');
+		await page.goto(href!);
+
+		// Expand history
+		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
+		await historyToggle.click();
+
+		// Click the second version (the edit) to see its diff
+		const versionItems = page.locator('[data-testid="history-version"]');
+		await versionItems.nth(1).click();
+
+		// The diff panel should show the "Titel" field as changed
+		const diffPanel = page.locator('[data-testid="history-diff"]');
+		await expect(diffPanel).toBeVisible();
+		await expect(diffPanel.getByText(/Titel/i)).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/history-diff-title.png' });
+	});
+
+	test('compare mode lets user compare any two versions', async ({ page }) => {
+		await page.goto('/?q=E2E+Testbrief');
+		await page.waitForSelector('[data-hydrated]');
+		const docLink = page.getByRole('link', { name: /E2E Testbrief/ }).first();
+		const href = await docLink.getAttribute('href');
+		await page.goto(href!);
+
+		// Expand history
+		const historyToggle = page.getByRole('button', { name: /Verlauf/i });
+		await historyToggle.click();
+
+		// Switch to compare mode
+		const compareBtn = page.getByRole('button', { name: /Vergleichen/i });
+		await expect(compareBtn).toBeVisible();
+		await compareBtn.click();
+
+		// Two version selects should appear
+		const selectA = page.getByLabel(/Version A/i);
+		const selectB = page.getByLabel(/Version B/i);
+		await expect(selectA).toBeVisible();
+		await expect(selectB).toBeVisible();
+
+		// Apply the comparison
+		await page
+			.getByRole('button', { name: /Vergleichen/i })
+			.last()
+			.click();
+
+		// Diff panel should be visible
+		const diffPanel = page.locator('[data-testid="history-diff"]');
+		await expect(diffPanel).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/history-compare-mode.png' });
+	});
+});