diff --git a/frontend/src/lib/activity/ChronikErrorCard.svelte.test.ts b/frontend/src/lib/activity/ChronikErrorCard.svelte.test.ts
new file mode 100644
index 00000000..8a516501
--- /dev/null
+++ b/frontend/src/lib/activity/ChronikErrorCard.svelte.test.ts
@@ -0,0 +1,37 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ChronikErrorCard from './ChronikErrorCard.svelte';
+
+afterEach(cleanup);
+
+describe('ChronikErrorCard', () => {
+	it('renders the default error message when no message is supplied', async () => {
+		render(ChronikErrorCard, { props: { onRetry: () => {} } });
+
+		await expect.element(page.getByText(/Aktivitäten konnten nicht/i)).toBeVisible();
+	});
+
+	it('renders the supplied message when provided', async () => {
+		render(ChronikErrorCard, {
+			props: { onRetry: () => {}, message: 'Custom error message' }
+		});
+
+		await expect.element(page.getByText('Custom error message')).toBeVisible();
+	});
+
+	it('calls onRetry when the retry button is clicked', async () => {
+		const onRetry = vi.fn();
+		render(ChronikErrorCard, { props: { onRetry } });
+
+		await page.getByRole('button', { name: /erneut versuchen/i }).click();
+
+		expect(onRetry).toHaveBeenCalledOnce();
+	});
+
+	it('marks the card as role="alert" for assistive tech', async () => {
+		render(ChronikErrorCard, { props: { onRetry: () => {} } });
+
+		await expect.element(page.getByRole('alert')).toBeVisible();
+	});
+});
diff --git a/frontend/src/lib/activity/ChronikTimeline.svelte.test.ts b/frontend/src/lib/activity/ChronikTimeline.svelte.test.ts
new file mode 100644
index 00000000..49300ce0
--- /dev/null
+++ b/frontend/src/lib/activity/ChronikTimeline.svelte.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import ChronikTimeline from './ChronikTimeline.svelte';
+
+afterEach(cleanup);
+
+const baseActor = { id: 'a1', name: 'Anna Schmidt', initials: 'AS', color: '#012851' };
+
+const makeItem = (overrides: Record<string, unknown> = {}) => ({
+	id: 'i1',
+	kind: 'TEXT_SAVED' as string,
+	actor: baseActor,
+	documentId: 'd1',
+	documentTitle: 'Brief 1923',
+	count: 1,
+	happenedAt: new Date().toISOString(),
+	youMentioned: false,
+	...overrides
+});
+
+describe('ChronikTimeline', () => {
+	it('renders nothing when items is empty', async () => {
+		render(ChronikTimeline, { props: { items: [] } });
+
+		const buckets = document.querySelectorAll('[data-testid^="chronik-bucket-"]');
+		expect(buckets.length).toBe(0);
+	});
+
+	it('renders the today bucket for today items', async () => {
+		const today = new Date();
+		render(ChronikTimeline, {
+			props: { items: [makeItem({ id: 'i1', happenedAt: today.toISOString() })] }
+		});
+
+		const today_bucket = document.querySelector('[data-testid="chronik-bucket-today"]');
+		expect(today_bucket).not.toBeNull();
+	});
+
+	it('renders the older bucket for old items', async () => {
+		render(ChronikTimeline, {
+			props: { items: [makeItem({ id: 'i1', happenedAt: '2020-01-01T10:00:00Z' })] }
+		});
+
+		const olderBucket = document.querySelector('[data-testid="chronik-bucket-older"]');
+		expect(olderBucket).not.toBeNull();
+	});
+
+	it('renders multiple buckets when items span time ranges', async () => {
+		const today = new Date();
+		render(ChronikTimeline, {
+			props: {
+				items: [
+					makeItem({ id: 'i1', kind: 'TEXT_SAVED', happenedAt: today.toISOString() }),
+					makeItem({
+						id: 'i2',
+						kind: 'FILE_UPLOADED',
+						documentId: 'd2',
+						happenedAt: '2020-01-01T10:00:00Z'
+					})
+				]
+			}
+		});
+
+		const buckets = document.querySelectorAll('[data-testid^="chronik-bucket-"]');
+		expect(buckets.length).toBeGreaterThanOrEqual(2);
+	});
+});