llm-multiverse-ui/src/routes/audit/+page.svelte

<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 ThemeToggle from '$lib/components/ThemeToggle.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 dark:bg-gray-900">
	<!-- Header -->
	<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 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 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
			>
				&larr; Chat
			</a>
			<!-- eslint-enable svelte/no-navigation-without-resolve -->
			<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Audit Log</h1>
		</div>
		<div class="flex items-center gap-2">
			<ThemeToggle />
			<span class="rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
				Sample Data
			</span>
		</div>
	</header>

	<!-- Filters -->
	<div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 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 dark:text-gray-400">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 dark:border-gray-600 bg-white dark:bg-gray-800 px-2.5 py-1.5 text-sm text-gray-700 dark:text-gray-300 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 dark:text-gray-400">Type</label>
					<select
						id="type-filter"
						bind:value={typeFilter}
						class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2.5 py-1.5 text-sm text-gray-700 dark:text-gray-300 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 dark:text-gray-500">
					{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 dark:text-gray-600">&#128203;</div>
					<p class="text-sm font-medium text-gray-500 dark:text-gray-400">No audit events recorded</p>
					<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
						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 dark:text-gray-600">&#128269;</div>
					<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Select a session to view its audit log</p>
					<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
						Choose a session from the dropdown above.
					</p>
				</div>
			{/if}
		{:else}
			<AuditTimeline {events} />
		{/if}
	</main>
</div>