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/lib/components/AuditTimeline.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { AuditEvent } from '$lib/stores/audit.svelte';
+
+	let { events }: { events: AuditEvent[] } = $props();
+
+	function formatTimestamp(date: Date): string {
+		return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+	}
+
+	function formatDate(date: Date): string {
+		return date.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+	}
+
+	function typeBadgeClasses(eventType: string): string {
+		switch (eventType) {
+			case 'state_change':
+				return 'bg-blue-100 text-blue-700';
+			case 'tool_invocation':
+				return 'bg-green-100 text-green-700';
+			case 'error':
+				return 'bg-red-100 text-red-700';
+			case 'message':
+				return 'bg-gray-100 text-gray-600';
+			default:
+				return 'bg-gray-100 text-gray-600';
+		}
+	}
+
+	function typeDotClasses(eventType: string): string {
+		switch (eventType) {
+			case 'state_change':
+				return 'bg-blue-500';
+			case 'tool_invocation':
+				return 'bg-green-500';
+			case 'error':
+				return 'bg-red-500';
+			case 'message':
+				return 'bg-gray-400';
+			default:
+				return 'bg-gray-400';
+		}
+	}
+
+	function typeLabel(eventType: string): string {
+		switch (eventType) {
+			case 'state_change':
+				return 'State Change';
+			case 'tool_invocation':
+				return 'Tool';
+			case 'error':
+				return 'Error';
+			case 'message':
+				return 'Message';
+			default:
+				return eventType;
+		}
+	}
+</script>
+
+{#if events.length === 0}
+	<div class="flex flex-col items-center justify-center py-16 text-center">
+		<div class="mb-3 text-4xl text-gray-300">&#128196;</div>
+		<p class="text-sm font-medium text-gray-500">No events for this session</p>
+		<p class="mt-1 text-xs text-gray-400">Events will appear here as orchestration runs.</p>
+	</div>
+{:else}
+	<div class="relative ml-4">
+		<!-- Vertical line -->
+		<div class="absolute top-0 bottom-0 left-3 w-0.5 bg-gray-200"></div>
+
+		<ol class="space-y-4">
+			{#each events as event, i (event.id)}
+				{@const showDate = i === 0 || formatDate(event.timestamp) !== formatDate(events[i - 1].timestamp)}
+
+				{#if showDate}
+					<li class="relative pl-10 pt-2">
+						<span class="text-xs font-medium text-gray-400">{formatDate(event.timestamp)}</span>
+					</li>
+				{/if}
+
+				<li class="group relative flex items-start pl-10">
+					<!-- Dot on the timeline -->
+					<div
+						class="absolute left-1.5 top-1.5 h-3 w-3 rounded-full ring-2 ring-white {typeDotClasses(event.eventType)}"
+					></div>
+
+					<!-- Event card -->
+					<div
+						class="flex-1 rounded-lg border border-gray-200 bg-white px-4 py-3 shadow-sm transition-shadow group-hover:shadow-md"
+					>
+						<div class="flex flex-wrap items-center gap-2">
+							<span class="text-xs text-gray-400">{formatTimestamp(event.timestamp)}</span>
+							<span
+								class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {typeBadgeClasses(event.eventType)}"
+							>
+								{typeLabel(event.eventType)}
+							</span>
+							{#if event.state}
+								<span class="rounded-md bg-blue-50 px-1.5 py-0.5 text-xs font-mono text-blue-600">
+									{event.state}
+								</span>
+							{/if}
+						</div>
+						<p class="mt-1.5 text-sm text-gray-700">{event.details}</p>
+					</div>
+				</li>
+			{/each}
+		</ol>
+	</div>
+{/if}