Merge pull request 'feat: audit/activity log view (#17)' (#37) from feature/issue-17-audit-log into main

2026-03-12 12:46:01 +01:00
parent 807311d7c9 4fc84ccd62
commit 79c14378a2
8 changed files with 572 additions and 0 deletions
--- a/implementation-plans/_index.md
+++ b/implementation-plans/_index.md
@@ -18,3 +18,4 @@
 | #14   | Preset configurations                                  | COMPLETED    | [issue-014.md](issue-014.md) |
 | #15   | Agent lineage visualization                            | COMPLETED    | [issue-015.md](issue-015.md) |
 | #16   | Memory candidates viewer                               | COMPLETED    | [issue-016.md](issue-016.md) |
+| #17   | Audit/activity log view                                | COMPLETED    | [issue-017.md](issue-017.md) |
--- a/implementation-plans/issue-017.md
+++ b/implementation-plans/issue-017.md
@@ -0,0 +1,56 @@
+# Issue #17 — Audit/Activity Log View
+
+**Status: COMPLETED**
+
+## Overview
+
+Timeline view of all orchestration events for a session — state transitions, tool invocations, errors. Populated from the streamed responses captured during the session.
+
+## Implementation Steps
+
+### 1. Audit Event Store (`src/lib/stores/audit.svelte.ts`) — COMPLETED
+
+- Created `AuditEvent` type with `id`, `sessionId`, `timestamp`, `eventType`, `details`, `state?`
+- Event types: `state_change`, `tool_invocation`, `error`, `message`
+- Store events grouped by session using `SvelteMap`, persisted to `localStorage`
+- Functions: `addEvent()`, `getEventsBySession()`, `getAllSessions()`, `clearSession()`
+- Sample data seeded for demo sessions
+
+### 2. AuditTimeline Component (`src/lib/components/AuditTimeline.svelte`) — COMPLETED
+
+- Vertical timeline with left-aligned time markers and event cards
+- Color-coded type badges: state change=blue, tool=green, error=red, message=gray
+- Each event shows timestamp, type badge, state label (when applicable), and detail text
+- Date headers when events span multiple days
+- Hover shadow effect on event cards
+
+### 3. Audit Route (`src/routes/audit/+page.svelte`) — COMPLETED
+
+- Dedicated `/audit` route with session selector dropdown and timeline
+- Filter controls for event type (all, state changes, tool invocations, errors, messages)
+- URL query param `?session=id` for deep linking to specific session
+- Empty states when no events or no session selected
+- Header with back-to-chat link and "Sample Data" badge
+
+### 4. Audit Route Config (`src/routes/audit/+page.ts`) — COMPLETED
+
+- `export const prerender = false` and `export const ssr = false`
+
+### 5. Homepage Navigation (`src/routes/+page.svelte`) — COMPLETED
+
+- Added "Audit Log" navigation link alongside existing Chat, Lineage, Memory links
+
+### 6. Chat Page Integration (`src/routes/chat/+page.svelte`) — COMPLETED
+
+- Added "Audit" link in the header navigation bar
+- Capture orchestration state changes during streaming into the audit store
+- Capture errors into the audit store
+
+## Files Changed
+
+- `src/lib/stores/audit.svelte.ts` (new)
+- `src/lib/components/AuditTimeline.svelte` (new)
+- `src/routes/audit/+page.svelte` (new)
+- `src/routes/audit/+page.ts` (new)
+- `src/routes/+page.svelte` (modified)
+- `src/routes/chat/+page.svelte` (modified)
--- a/src/lib/components/AuditTimeline.svelte
+++ b/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}
--- a/src/lib/stores/audit.svelte.ts
+++ b/src/lib/stores/audit.svelte.ts
@@ -0,0 +1,247 @@
+import { SvelteMap } from 'svelte/reactivity';
+
+export type AuditEventType = 'state_change' | 'tool_invocation' | 'error' | 'message';
+
+export interface AuditEvent {
+	id: string;
+	sessionId: string;
+	timestamp: Date;
+	eventType: AuditEventType;
+	details: string;
+	state?: string;
+}
+
+export interface SessionAuditLog {
+	sessionId: string;
+	events: AuditEvent[];
+}
+
+const STORAGE_KEY = 'llm-multiverse-audit-events';
+
+function loadEvents(): SvelteMap<string, AuditEvent[]> {
+	if (typeof localStorage === 'undefined') return new SvelteMap();
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return new SvelteMap();
+		const arr: [string, AuditEvent[]][] = JSON.parse(raw);
+		return new SvelteMap(
+			arr.map(([id, events]) => [
+				id,
+				events.map((e) => ({ ...e, timestamp: new Date(e.timestamp) }))
+			])
+		);
+	} catch {
+		return new SvelteMap();
+	}
+}
+
+function saveEvents(events: SvelteMap<string, AuditEvent[]>) {
+	if (typeof localStorage === 'undefined') return;
+	localStorage.setItem(STORAGE_KEY, JSON.stringify([...events.entries()]));
+}
+
+function getSampleData(): SvelteMap<string, AuditEvent[]> {
+	const samples = new SvelteMap<string, AuditEvent[]>();
+	const now = Date.now();
+
+	samples.set('session-demo-alpha', [
+		{
+			id: 'evt-001',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 300_000),
+			eventType: 'state_change',
+			details: 'Orchestration started — decomposing user request',
+			state: 'DECOMPOSING'
+		},
+		{
+			id: 'evt-002',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 280_000),
+			eventType: 'tool_invocation',
+			details: 'Invoked web_search tool for "SvelteKit best practices"',
+			state: 'DECOMPOSING'
+		},
+		{
+			id: 'evt-003',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 260_000),
+			eventType: 'state_change',
+			details: 'Dispatching subtasks to subagents',
+			state: 'DISPATCHING'
+		},
+		{
+			id: 'evt-004',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 240_000),
+			eventType: 'message',
+			details: 'Researcher agent assigned to subtask "Gather TypeScript patterns"'
+		},
+		{
+			id: 'evt-005',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 220_000),
+			eventType: 'state_change',
+			details: 'Subagents executing tasks',
+			state: 'EXECUTING'
+		},
+		{
+			id: 'evt-006',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 200_000),
+			eventType: 'tool_invocation',
+			details: 'Invoked code_analysis tool on project source files'
+		},
+		{
+			id: 'evt-007',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 180_000),
+			eventType: 'error',
+			details: 'Timeout waiting for code_analysis response (retrying)'
+		},
+		{
+			id: 'evt-008',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 160_000),
+			eventType: 'tool_invocation',
+			details: 'Retry: code_analysis tool succeeded'
+		},
+		{
+			id: 'evt-009',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 140_000),
+			eventType: 'state_change',
+			details: 'Compacting results from subagents',
+			state: 'COMPACTING'
+		},
+		{
+			id: 'evt-010',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 120_000),
+			eventType: 'state_change',
+			details: 'Orchestration complete',
+			state: 'COMPLETE'
+		}
+	]);
+
+	samples.set('session-demo-beta', [
+		{
+			id: 'evt-011',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 600_000),
+			eventType: 'state_change',
+			details: 'Orchestration started — decomposing deployment request',
+			state: 'DECOMPOSING'
+		},
+		{
+			id: 'evt-012',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 580_000),
+			eventType: 'state_change',
+			details: 'Dispatching to sysadmin agent',
+			state: 'DISPATCHING'
+		},
+		{
+			id: 'evt-013',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 560_000),
+			eventType: 'state_change',
+			details: 'Executing deployment analysis',
+			state: 'EXECUTING'
+		},
+		{
+			id: 'evt-014',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 540_000),
+			eventType: 'tool_invocation',
+			details: 'Invoked kubectl_check tool for cluster status'
+		},
+		{
+			id: 'evt-015',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 520_000),
+			eventType: 'error',
+			details: 'Permission denied: kubectl access not granted for this session'
+		},
+		{
+			id: 'evt-016',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 500_000),
+			eventType: 'message',
+			details: 'Agent requested elevated permissions for cluster access'
+		},
+		{
+			id: 'evt-017',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 480_000),
+			eventType: 'state_change',
+			details: 'Compacting partial results',
+			state: 'COMPACTING'
+		},
+		{
+			id: 'evt-018',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 460_000),
+			eventType: 'state_change',
+			details: 'Orchestration complete with warnings',
+			state: 'COMPLETE'
+		}
+	]);
+
+	return samples;
+}
+
+function createAuditStore() {
+	const events = $state<SvelteMap<string, AuditEvent[]>>(loadEvents());
+
+	// Seed sample data if store is empty
+	if (events.size === 0) {
+		const samples = getSampleData();
+		for (const [id, evts] of samples) {
+			events.set(id, evts);
+		}
+		saveEvents(events);
+	}
+
+	function addEvent(
+		sessionId: string,
+		event: Omit<AuditEvent, 'id' | 'sessionId' | 'timestamp'>
+	) {
+		const auditEvent: AuditEvent = {
+			id: crypto.randomUUID(),
+			sessionId,
+			timestamp: new Date(),
+			...event
+		};
+		const existing = events.get(sessionId) ?? [];
+		events.set(sessionId, [...existing, auditEvent]);
+		saveEvents(events);
+	}
+
+	function getEventsBySession(sessionId: string): AuditEvent[] {
+		return events.get(sessionId) ?? [];
+	}
+
+	function getAllSessions(): SessionAuditLog[] {
+		return [...events.entries()]
+			.map(([sessionId, evts]) => ({ sessionId, events: evts }))
+			.sort((a, b) => {
+				const aLatest = a.events.length > 0 ? a.events[a.events.length - 1].timestamp.getTime() : 0;
+				const bLatest = b.events.length > 0 ? b.events[b.events.length - 1].timestamp.getTime() : 0;
+				return bLatest - aLatest;
+			});
+	}
+
+	function clearSession(sessionId: string) {
+		events.delete(sessionId);
+		saveEvents(events);
+	}
+
+	return {
+		addEvent,
+		getEventsBySession,
+		getAllSessions,
+		clearSession
+	};
+}
+
+export const auditStore = createAuditStore();
--- a/src/routes/+page.svelte
+++ b/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>
--- a/src/routes/audit/+page.svelte
+++ b/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>
--- a/src/routes/audit/+page.ts
+++ b/src/routes/audit/+page.ts
@@ -0,0 +1,2 @@
+export const prerender = false;
+export const ssr = false;
--- a/src/routes/chat/+page.svelte
+++ b/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"