diff --git a/frontend/src/routes/briefwechsel/ConversationTimeline.svelte.test.ts b/frontend/src/routes/briefwechsel/ConversationTimeline.svelte.test.ts
new file mode 100644
index 00000000..98840368
--- /dev/null
+++ b/frontend/src/routes/briefwechsel/ConversationTimeline.svelte.test.ts
@@ -0,0 +1,101 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ConversationTimeline from './ConversationTimeline.svelte';
+
+afterEach(cleanup);
+
+const sender = { id: 'p1', firstName: 'Anna', lastName: 'Schmidt', displayName: 'Anna Schmidt' };
+const receiver = { id: 'p2', firstName: 'Bert', lastName: 'Meier', displayName: 'Bert Meier' };
+
+const makeDoc = (overrides: Record<string, unknown> = {}) => ({
+	id: 'd1',
+	originalFilename: 'brief.pdf',
+	documentDate: '1923-04-15',
+	sender,
+	receivers: [receiver],
+	tags: [],
+	...overrides
+});
+
+const baseProps = (overrides: Record<string, unknown> = {}) => ({
+	documents: [makeDoc()],
+	senderId: 'p1',
+	receiverId: '',
+	canWrite: false,
+	senderName: 'Anna Schmidt',
+	receiverName: 'Bert Meier',
+	...overrides
+});
+
+describe('ConversationTimeline', () => {
+	it('renders the year divider for the document year', async () => {
+		render(ConversationTimeline, { props: baseProps() });
+
+		await expect.element(page.getByTestId('year-divider')).toBeVisible();
+	});
+
+	it('renders one year divider per distinct year', async () => {
+		render(ConversationTimeline, {
+			props: baseProps({
+				documents: [
+					makeDoc({ id: 'd1', documentDate: '1923-04-15' }),
+					makeDoc({ id: 'd2', documentDate: '1924-06-20' }),
+					makeDoc({ id: 'd3', documentDate: '1925-12-31' })
+				]
+			})
+		});
+
+		const dividers = document.querySelectorAll('[data-testid="year-divider"]');
+		expect(dividers.length).toBe(3);
+	});
+
+	it('does not duplicate the year divider when consecutive documents share a year', async () => {
+		render(ConversationTimeline, {
+			props: baseProps({
+				documents: [
+					makeDoc({ id: 'd1', documentDate: '1923-04-15' }),
+					makeDoc({ id: 'd2', documentDate: '1923-06-20' })
+				]
+			})
+		});
+
+		const dividers = document.querySelectorAll('[data-testid="year-divider"]');
+		expect(dividers.length).toBe(1);
+	});
+
+	it('does not render a year divider for documents with no documentDate', async () => {
+		render(ConversationTimeline, {
+			props: baseProps({
+				documents: [makeDoc({ documentDate: undefined })]
+			})
+		});
+
+		const dividers = document.querySelectorAll('[data-testid="year-divider"]');
+		expect(dividers.length).toBe(0);
+	});
+
+	it('renders the new-document link when canWrite is true', async () => {
+		render(ConversationTimeline, { props: baseProps({ canWrite: true }) });
+
+		await expect
+			.element(page.getByTestId('conv-new-doc-link'))
+			.toHaveAttribute('href', '/documents/new?senderId=p1');
+	});
+
+	it('appends receiverId to the new-document URL when set', async () => {
+		render(ConversationTimeline, {
+			props: baseProps({ canWrite: true, receiverId: 'p2' })
+		});
+
+		await expect
+			.element(page.getByTestId('conv-new-doc-link'))
+			.toHaveAttribute('href', '/documents/new?senderId=p1&receiverId=p2');
+	});
+
+	it('hides the new-document link when canWrite is false', async () => {
+		render(ConversationTimeline, { props: baseProps({ canWrite: false }) });
+
+		await expect.element(page.getByTestId('conv-new-doc-link')).not.toBeInTheDocument();
+	});
+});