feat: add audit/activity log view with timeline and event filtering (#17)

Add a dedicated /audit route displaying a chronological timeline of
orchestration events (state transitions, tool invocations, errors,
messages) grouped by session. Includes session selector, event type
filtering, URL deep-linking via ?session=id, and audit event capture
during chat streaming.

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

src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	const chatHref = resolveRoute('/chat');
 	const lineageHref = resolveRoute('/lineage');
 	const memoryHref = resolveRoute('/memory');
+	const auditHref = resolveRoute('/audit');
 </script>
 
 <h1 class="text-3xl font-bold text-center mt-8">LLM Multiverse UI</h1>
@@ -15,4 +16,6 @@
 	<a href={lineageHref} class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Agent Lineage</a>
 	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
 	<a href={memoryHref} class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Memory Candidates</a>
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
+	<a href={auditHref} class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Audit Log</a>
 </nav>

src/routes/audit/+page.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { resolveRoute } from '$app/paths';
+	import AuditTimeline from '$lib/components/AuditTimeline.svelte';
+	import { auditStore } from '$lib/stores/audit.svelte';
+	import type { AuditEventType } from '$lib/stores/audit.svelte';
+
+	const chatHref = resolveRoute('/chat');
+
+	const allSessions = $derived(auditStore.getAllSessions());
+
+	const selectedSessionId = $derived($page.url.searchParams.get('session'));
+
+	let typeFilter = $state<AuditEventType | 'all'>('all');
+
+	const events = $derived.by(() => {
+		if (!selectedSessionId) return [];
+		const raw = auditStore.getEventsBySession(selectedSessionId);
+		if (typeFilter === 'all') return raw;
+		return raw.filter((e) => e.eventType === typeFilter);
+	});
+
+	const totalEvents = $derived(events.length);
+
+	function selectSession(sessionId: string) {
+		const url = `${resolveRoute('/audit')}?session=${sessionId}`;
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
+		goto(url, { replaceState: true });
+	}
+
+	const filterOptions: { value: AuditEventType | 'all'; label: string }[] = [
+		{ value: 'all', label: 'All Events' },
+		{ value: 'state_change', label: 'State Changes' },
+		{ value: 'tool_invocation', label: 'Tool Invocations' },
+		{ value: 'error', label: 'Errors' },
+		{ value: 'message', label: 'Messages' }
+	];
+</script>
+
+<div class="flex h-screen flex-col bg-gray-50">
+	<!-- Header -->
+	<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
+		<div class="flex items-center gap-4">
+			<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
+			<a
+				href={chatHref}
+				class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+			>
+				&larr; Chat
+			</a>
+			<!-- eslint-enable svelte/no-navigation-without-resolve -->
+			<h1 class="text-lg font-semibold text-gray-900">Audit Log</h1>
+		</div>
+		<span class="rounded-md bg-amber-50 px-2 py-1 text-xs text-amber-700">
+			Sample Data
+		</span>
+	</header>
+
+	<!-- Filters -->
+	<div class="border-b border-gray-200 bg-white px-6 py-3">
+		<div class="flex flex-wrap items-center gap-4">
+			<div class="flex items-center gap-2">
+				<label for="session-select" class="text-xs font-medium text-gray-500">Session</label>
+				<select
+					id="session-select"
+					value={selectedSessionId ?? ''}
+					onchange={(e) => {
+						const target = e.target as HTMLSelectElement;
+						if (target.value) selectSession(target.value);
+					}}
+					class="rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+				>
+					<option value="" disabled>Select a session</option>
+					{#each allSessions as session (session.sessionId)}
+						<option value={session.sessionId}>
+							{session.sessionId} ({session.events.length} events)
+						</option>
+					{/each}
+				</select>
+			</div>
+
+			{#if selectedSessionId}
+				<div class="flex items-center gap-2">
+					<label for="type-filter" class="text-xs font-medium text-gray-500">Type</label>
+					<select
+						id="type-filter"
+						bind:value={typeFilter}
+						class="rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+					>
+						{#each filterOptions as opt (opt.value)}
+							<option value={opt.value}>{opt.label}</option>
+						{/each}
+					</select>
+				</div>
+
+				<span class="text-xs text-gray-400">
+					{totalEvents} event{totalEvents !== 1 ? 's' : ''}
+				</span>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Content -->
+	<main class="flex-1 overflow-auto p-6">
+		{#if !selectedSessionId}
+			{#if allSessions.length === 0}
+				<div class="flex flex-col items-center justify-center py-16 text-center">
+					<div class="mb-3 text-4xl text-gray-300">&#128203;</div>
+					<p class="text-sm font-medium text-gray-500">No audit events recorded</p>
+					<p class="mt-1 text-xs text-gray-400">
+						Events will appear here as orchestration sessions run.
+					</p>
+				</div>
+			{:else}
+				<div class="flex flex-col items-center justify-center py-16 text-center">
+					<div class="mb-3 text-4xl text-gray-300">&#128269;</div>
+					<p class="text-sm font-medium text-gray-500">Select a session to view its audit log</p>
+					<p class="mt-1 text-xs text-gray-400">
+						Choose a session from the dropdown above.
+					</p>
+				</div>
+			{/if}
+		{:else}
+			<AuditTimeline {events} />
+		{/if}
+	</main>
+</div>

src/routes/audit/+page.ts

@@ -0,0 +1,2 @@
+export const prerender = false;
+export const ssr = false;

src/routes/chat/+page.svelte

@@ -19,6 +19,7 @@
 	import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
 	import { sessionStore } from '$lib/stores/sessions.svelte';
 	import { memoryStore } from '$lib/stores/memory.svelte';
+	import { auditStore } from '$lib/stores/audit.svelte';
 
 	let messages: ChatMessage[] = $state([]);
 	let isStreaming = $state(false);
@@ -32,6 +33,7 @@
 	let showConfig = $state(false);
 	const lineageHref = resolveRoute('/lineage');
 	const memoryHref = resolveRoute('/memory');
+	const auditHref = resolveRoute('/audit');
 
 	const isNonDefaultConfig = $derived(
 		sessionConfig.overrideLevel !== OverrideLevel.NONE ||
@@ -80,6 +82,7 @@
 		finalResult = null;
 
 		const sessionId = sessionStore.activeSessionId!;
+		let lastAuditState = OrchestrationState.UNSPECIFIED;
 
 		const userMessage: ChatMessage = {
 			id: crypto.randomUUID(),
@@ -103,6 +106,18 @@
 		try {
 			for await (const response of processRequest(sessionId, content, sessionConfig)) {
 				orchestrationState = response.state;
+
+				// Capture state changes to the audit log
+				if (response.state !== lastAuditState) {
+					const stateLabel = OrchestrationState[response.state] ?? String(response.state);
+					auditStore.addEvent(sessionId, {
+						eventType: 'state_change',
+						details: response.message || `State changed to ${stateLabel}`,
+						state: stateLabel
+					});
+					lastAuditState = response.state;
+				}
+
 				if (response.intermediateResult) {
 					intermediateResult = response.intermediateResult;
 				}
@@ -131,6 +146,10 @@
 					? `Error (${err.code}): ${err.message}`
 					: 'An unexpected error occurred';
 			error = msg;
+			auditStore.addEvent(sessionId, {
+				eventType: 'error',
+				details: msg
+			});
 			const idx = messages.length - 1;
 			messages[idx] = {
 				...messages[idx],
@@ -163,6 +182,12 @@
 			>
 				Memory
 			</a>
+			<a
+				href={auditHref}
+				class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+			>
+				Audit
+			</a>
 			<!-- eslint-enable svelte/no-navigation-without-resolve -->
 			<button
 				type="button"