llm-multiverse/llm-multiverse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
shahondin1624
2026-03-12 12:41:40 +01:00
parent 807311d7c9
commit 4fc84ccd62
8 changed files with 572 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/routes/audit/+page.svelte Normal file
View File

@@ -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>