llm-multiverse-ui/src/lib/components/AuditTimeline.svelte

<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 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300';
			case 'tool_invocation':
				return 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300';
			case 'error':
				return 'bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300';
			case 'message':
				return 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400';
			default:
				return 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400';
		}
	}

	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 dark:text-gray-600">&#128196;</div>
		<p class="text-sm font-medium text-gray-500 dark:text-gray-400">No events for this session</p>
		<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">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 dark:bg-gray-700"></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 dark:text-gray-500">{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 dark:ring-gray-900 {typeDotClasses(event.eventType)}"
					></div>

					<!-- Event card -->
					<div
						class="flex-1 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 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 dark:text-gray-500">{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 dark:bg-blue-900/30 px-1.5 py-0.5 text-xs font-mono text-blue-600 dark:text-blue-400">
									{event.state}
								</span>
							{/if}
						</div>
						<p class="mt-1.5 text-sm text-gray-700 dark:text-gray-300">{event.details}</p>
					</div>
				</li>
			{/each}
		</ol>
	</div>
{/if}