dockhand/routes/activity/+page.svelte

<script lang="ts">
	import { onMount, onDestroy, untrack } from 'svelte';
	import { page } from '$app/stores';
	import * as Select from '$lib/components/ui/select';
	import MultiSelectFilter from '$lib/components/MultiSelectFilter.svelte';
	import { Button } from '$lib/components/ui/button';
	import { DatePicker } from '$lib/components/ui/date-picker';
	import { Input } from '$lib/components/ui/input';
	import { Badge } from '$lib/components/ui/badge';
	import * as Dialog from '$lib/components/ui/dialog';
	import {
		RefreshCw,
		Calendar,
		Box,
		X,
		Eye,
		Server,
		Play,
		Square,
		RotateCcw,
		Pause,
		CirclePlay,
		Trash2,
		Plus,
		Skull,
		Zap,
		AlertTriangle,
		Pencil,
		Activity,
		Loader2,
		FileX,
		Heart,
		Search
	} from 'lucide-svelte';
	import PageHeader from '$lib/components/PageHeader.svelte';
	import { currentEnvironment, environments as environmentsStore } from '$lib/stores/environment';
	import { getIconComponent } from '$lib/utils/icons';
	import { canAccess } from '$lib/stores/auth';
	import ConfirmPopover from '$lib/components/ConfirmPopover.svelte';
	import { toast } from 'svelte-sonner';
	import { formatDateTime } from '$lib/stores/settings';
	import { NoEnvironment } from '$lib/components/ui/empty-state';
	import { DataGrid } from '$lib/components/data-grid';

	interface ContainerEvent {
		id: number;
		environmentId: number | null;
		environmentName: string | null;
		environmentIcon: string | null;
		containerId: string | null;
		containerName: string | null;
		image: string | null;
		action: string;
		actorAttributes: Record<string, string> | null;
		timestamp: string;
		createdAt: string;
	}

	interface Environment {
		id: number;
		name: string;
		icon: string;
		labels?: string[];
	}

	// Constants
	const FETCH_BATCH_SIZE = 100;

	// State
	let events = $state<ContainerEvent[]>([]);
	let total = $state(0);
	let loading = $state(false);
	let loadingMore = $state(false);
	let containers = $state<string[]>([]);
	let environments = $state<Environment[]>([]);
	let envId = $state<number | null>(null);
	let hasMore = $state(true);
	let initialized = $state(false);
	let dataFetched = $state(false);
	let showClearConfirm = $state(false);
	let clearingActivity = $state(false);

	// Visible range for virtual scroll
	let visibleStart = $state(1);
	let visibleEnd = $state(0);

	// localStorage key for filters
	const STORAGE_KEY = 'dockhand_activity_filters';

	// Filters
	let filterContainerName = $state('');
	let filterActions = $state<string[]>([]);
	let filterEnvironmentId = $state<number | null>(null);
	let filterLabels = $state<string[]>([]);
	let filterFromDate = $state('');
	let filterToDate = $state('');

	// Load filters from localStorage
	function loadFiltersFromStorage() {
		if (typeof window === 'undefined') return;
		try {
			const stored = localStorage.getItem(STORAGE_KEY);
			if (stored) {
				const parsed = JSON.parse(stored);
				filterContainerName = parsed.containerName || '';
				filterActions = parsed.actions || [];
				filterEnvironmentId = parsed.environmentId || null;
				filterLabels = parsed.labels || [];
				filterFromDate = parsed.fromDate || '';
				filterToDate = parsed.toDate || '';
			}
		} catch (e) {
			console.error('Failed to load activity filters from localStorage:', e);
		}
	}

	// Save filters to localStorage
	function saveFiltersToStorage() {
		if (typeof window === 'undefined') return;
		try {
			localStorage.setItem(STORAGE_KEY, JSON.stringify({
				containerName: filterContainerName,
				actions: filterActions,
				environmentId: filterEnvironmentId,
				labels: filterLabels,
				fromDate: filterFromDate,
				toDate: filterToDate
			}));
		} catch (e) {
			console.error('Failed to save activity filters to localStorage:', e);
		}
	}

	// Detail dialog
	let showDetailDialog = $state(false);
	let selectedEvent = $state<ContainerEvent | null>(null);

	// SSE connection
	let sseConnected = $state(false);
	let eventSource: EventSource | null = null;

	const actionOptions = [
		{ value: 'create', label: 'Create', icon: Plus, color: 'text-emerald-500' },
		{ value: 'start', label: 'Start', icon: Play, color: 'text-emerald-500' },
		{ value: 'stop', label: 'Stop', icon: Square, color: 'text-amber-500' },
		{ value: 'die', label: 'Die', icon: Skull, color: 'text-red-500' },
		{ value: 'kill', label: 'Kill', icon: Zap, color: 'text-red-500' },
		{ value: 'restart', label: 'Restart', icon: RotateCcw, color: 'text-sky-500' },
		{ value: 'pause', label: 'Pause', icon: Pause, color: 'text-amber-500' },
		{ value: 'unpause', label: 'Unpause', icon: CirclePlay, color: 'text-emerald-500' },
		{ value: 'destroy', label: 'Destroy', icon: Trash2, color: 'text-red-500' },
		{ value: 'rename', label: 'Rename', icon: Pencil, color: 'text-muted-foreground' },
		{ value: 'update', label: 'Update', icon: Pencil, color: 'text-sky-500' },
		{ value: 'oom', label: 'Out of memory', icon: AlertTriangle, color: 'text-red-500' },
		{ value: 'health_status', label: 'Health status', icon: Heart, color: 'text-amber-500' }
	];

	// Date filter preset
	let selectedDatePreset = $state<string>('');

	// Check if any filters are active
	const hasActiveFilters = $derived(
		filterContainerName || filterActions.length > 0 || filterEnvironmentId !== null || selectedDatePreset
	);

	const datePresets = [
		{ value: 'today', label: 'Today' },
		{ value: 'yesterday', label: 'Yesterday' },
		{ value: 'last7days', label: 'Last 7 days' },
		{ value: 'last30days', label: 'Last 30 days' },
		{ value: 'thisMonth', label: 'This month' },
		{ value: 'lastMonth', label: 'Last month' }
	];

	function formatDateForInput(date: Date): string {
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	}

	function applyDatePreset(preset: string): { from: string; to: string } {
		const today = new Date();
		today.setHours(0, 0, 0, 0);

		let from = '';
		let to = '';

		switch (preset) {
			case 'today':
				from = formatDateForInput(today);
				to = formatDateForInput(today);
				break;
			case 'yesterday': {
				const yesterday = new Date(today);
				yesterday.setDate(yesterday.getDate() - 1);
				from = formatDateForInput(yesterday);
				to = formatDateForInput(yesterday);
				break;
			}
			case 'last7days': {
				const weekAgo = new Date(today);
				weekAgo.setDate(weekAgo.getDate() - 6);
				from = formatDateForInput(weekAgo);
				to = formatDateForInput(today);
				break;
			}
			case 'last30days': {
				const monthAgo = new Date(today);
				monthAgo.setDate(monthAgo.getDate() - 29);
				from = formatDateForInput(monthAgo);
				to = formatDateForInput(today);
				break;
			}
			case 'thisMonth': {
				const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
				from = formatDateForInput(firstOfMonth);
				to = formatDateForInput(today);
				break;
			}
			case 'lastMonth': {
				const firstOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
				const lastOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
				from = formatDateForInput(firstOfLastMonth);
				to = formatDateForInput(lastOfLastMonth);
				break;
			}
		}

		filterFromDate = from;
		filterToDate = to;

		return { from, to };
	}

	async function clearActivity() {
		clearingActivity = true;
		try {
			const res = await fetch('/api/activity', {
				method: 'DELETE'
			});
			if (!res.ok) {
				const data = await res.json();
				throw new Error(data.error || 'Failed to clear activity');
			}
			toast.success('Activity log cleared');
			// Reset and reload
			events = [];
			total = 0;
			hasMore = true;
			fetchEvents(false);
		} catch (error: any) {
			toast.error(error.message);
		} finally {
			clearingActivity = false;
			showClearConfirm = false;
		}
	}

	// Subscribe to environment
	$effect(() => {
		const env = $currentEnvironment;
		envId = env?.id ?? null;
	});

	let fetchController: AbortController | null = null;

	async function fetchEvents(append = false, silent = false) {
		if (append && loadingMore) return;

		if (!append && fetchController) {
			fetchController.abort();
		}

		if (append) {
			loadingMore = true;
		} else if (!silent) {
			loading = true;
			hasMore = true;
		}

		fetchController = new AbortController();

		try {
			const params = new URLSearchParams();

			if (filterContainerName) params.set('containerName', filterContainerName);
			if (filterActions.length > 0) params.set('actions', filterActions.join(','));
			if (filterEnvironmentId !== null) params.set('environmentId', String(filterEnvironmentId));
			if (filterLabels.length > 0) params.set('labels', filterLabels.join(','));
			if (filterFromDate) params.set('fromDate', filterFromDate);
			if (filterToDate) params.set('toDate', filterToDate + 'T23:59:59');
			params.set('limit', String(FETCH_BATCH_SIZE));
			params.set('offset', String(append ? events.length : 0));

			const response = await fetch(`/api/activity?${params.toString()}`, {
				signal: fetchController.signal
			});
			if (!response.ok) {
				throw new Error('Failed to fetch events');
			}
			const data = await response.json();

			if (append) {
				events = [...events, ...data.events];
			} else {
				events = data.events;
			}
			total = data.total;
			hasMore = events.length < total;
			dataFetched = true;

			loading = false;
			loadingMore = false;
			fetchController = null;
		} catch (error: any) {
			if (error?.name === 'AbortError') {
				return;
			}
			console.error('Failed to fetch events:', error);
			if (!append && !silent) {
				events = [];
				total = 0;
			}
			loading = false;
			loadingMore = false;
			fetchController = null;
			hasMore = false;
		}
	}

	async function fetchContainers() {
		try {
			const params = new URLSearchParams();
			if (filterEnvironmentId !== null) {
				params.set('environmentId', String(filterEnvironmentId));
			}
			const response = await fetch(`/api/activity/containers?${params.toString()}`);
			if (response.ok) {
				containers = await response.json();
			}
		} catch (error) {
			console.error('Failed to fetch containers:', error);
		}
	}

	async function fetchEnvironments() {
		try {
			const response = await fetch('/api/environments');
			if (response.ok) {
				environments = await response.json();
			}
		} catch (error) {
			console.error('Failed to fetch environments:', error);
		}
	}

	function clearFilters() {
		filterContainerName = '';
		filterActions = [];
		filterEnvironmentId = null;
		filterLabels = [];
		filterFromDate = '';
		filterToDate = '';
		selectedDatePreset = '';
		if (typeof window !== 'undefined') {
			localStorage.removeItem(STORAGE_KEY);
		}
	}

	// Track if initial load is done
	let initialLoadDone = $state(false);

	// Auto-fetch when filters change
	$effect(() => {
		const _cn = filterContainerName;
		const _a = filterActions;
		const _fd = filterFromDate;
		const _td = filterToDate;
		const _ei = filterEnvironmentId;
		const _l = filterLabels;

		const isReady = untrack(() => initialLoadDone);

		if (isReady) {
			saveFiltersToStorage();
			fetchEvents(false);
		}
	});

	// Called by DataGrid when user scrolls near the bottom
	function loadMoreEvents() {
		if (hasMore && !loadingMore && !loading) {
			fetchEvents(true);
		}
	}

	// Called by DataGrid when visible range changes
	function handleVisibleRangeChange(start: number, end: number, _total: number) {
		visibleStart = start;
		visibleEnd = end;
	}

	function showDetails(event: ContainerEvent) {
		selectedEvent = event;
		showDetailDialog = true;
	}

	function formatTimestamp(ts: string): string {
		return formatDateTime(ts, true);
	}

	function getActionIcon(action: string) {
		switch (action) {
			case 'create': return Plus;
			case 'start': return Play;
			case 'stop': return Square;
			case 'die': return Skull;
			case 'kill': return Zap;
			case 'restart': return RotateCcw;
			case 'pause': return Pause;
			case 'unpause': return CirclePlay;
			case 'destroy': return Trash2;
			case 'rename': return Pencil;
			case 'update': return Pencil;
			case 'oom': return AlertTriangle;
			case 'health_status': return Heart;
			default: return Activity;
		}
	}

	function getActionColor(action: string): string {
		switch (action) {
			case 'create':
			case 'start':
			case 'unpause':
				return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400';
			case 'stop':
			case 'die':
			case 'kill':
			case 'destroy':
			case 'oom':
				return 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400';
			case 'restart':
			case 'pause':
			case 'update':
			case 'rename':
				return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400';
			case 'health_status':
				return 'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-400';
			default:
				return 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-400';
		}
	}

	// SSE connection
	let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
	let wasConnected = false;
	let reconnectAttempts = 0;
	const MAX_RECONNECT_ATTEMPTS = 10;
	const BASE_RECONNECT_DELAY = 3000;

	function connectSSE() {
		if (eventSource) {
			eventSource.close();
		}

		if (reconnectTimer) {
			clearTimeout(reconnectTimer);
			reconnectTimer = null;
		}

		eventSource = new EventSource('/api/activity/events');

		eventSource.addEventListener('connected', () => {
			const wasDisconnected = wasConnected && !sseConnected;
			sseConnected = true;
			wasConnected = true;
			reconnectAttempts = 0; // Reset backoff on successful connection

			// If we were previously connected and reconnected, fetch any missed events
			if (wasDisconnected) {
				fetchEvents(false, true); // silent fetch to catch up on missed events
			}
		});

		eventSource.addEventListener('activity', (e) => {
			try {
				const newEvent = JSON.parse(e.data);

				// Check if event matches current filters
				if (filterContainerName && !newEvent.containerName?.includes(filterContainerName)) return;
				if (filterActions.length > 0 && !filterActions.includes(newEvent.action)) return;
				if (filterEnvironmentId !== null && newEvent.environmentId !== filterEnvironmentId) return;

				// Check date filters
				if (filterFromDate) {
					const eventDate = new Date(newEvent.timestamp).toISOString().split('T')[0];
					if (eventDate < filterFromDate) return;
				}
				if (filterToDate) {
					const eventDate = new Date(newEvent.timestamp).toISOString().split('T')[0];
					if (eventDate > filterToDate) return;
				}

				// Add to beginning of events (prepend new events)
				if (!events.some(event => event.id === newEvent.id)) {
					events = [newEvent, ...events];
					total = total + 1;

					// Add container to list if not already there
					if (newEvent.containerName && !containers.includes(newEvent.containerName)) {
						containers = [...containers, newEvent.containerName].sort();
					}
				}
			} catch {
				// Ignore parse errors
			}
		});

		eventSource.addEventListener('heartbeat', () => {
			sseConnected = true;
		});

		eventSource.onerror = () => {
			sseConnected = false;
			// Exponential backoff reconnection
			if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
				const delay = Math.min(BASE_RECONNECT_DELAY * Math.pow(2, reconnectAttempts), 60000);
				reconnectAttempts++;
				reconnectTimer = setTimeout(() => {
					if (eventSource?.readyState === EventSource.CLOSED) {
						connectSSE();
					}
				}, delay);
			}
		};
	}

	function disconnectSSE() {
		if (reconnectTimer) {
			clearTimeout(reconnectTimer);
			reconnectTimer = null;
		}
		if (eventSource) {
			eventSource.close();
			eventSource = null;
			sseConnected = false;
		}
	}

	// Handle tab visibility changes (e.g., user switches back from another tab)
	function handleVisibilityChange() {
		if (document.visibilityState === 'visible') {
			// Tab became visible - check and restore connection

			// Clear any pending reconnection timer
			if (reconnectTimer) {
				clearTimeout(reconnectTimer);
				reconnectTimer = null;
			}

			// Reset reconnection counter for fresh attempts
			reconnectAttempts = 0;

			// Reconnect SSE if it's closed or in error state
			if (!eventSource || eventSource.readyState !== EventSource.OPEN) {
				connectSSE();
			}
		}
	}

	onMount(() => {
		// Listen for tab visibility changes to reconnect when user returns
		document.addEventListener('visibilitychange', handleVisibilityChange);
		// Chrome 77+ Page Lifecycle API - fires when frozen tab is resumed
		document.addEventListener('resume', handleVisibilityChange);

		loadFiltersFromStorage();

		// Check for URL query param (env) - takes priority over localStorage
		const urlEnvParam = $page.url.searchParams.get('env');
		if (urlEnvParam) {
			const envIdFromUrl = parseInt(urlEnvParam);
			if (!isNaN(envIdFromUrl)) {
				filterEnvironmentId = envIdFromUrl;
			}
		}

		// Initialize in order - set initialized=true AFTER data is fetched
		fetchEnvironments().then(() => {
			// Validate filterEnvironmentId - reset if it doesn't exist
			if (filterEnvironmentId !== null) {
				const envExists = environments.some(e => e.id === filterEnvironmentId);
				if (!envExists) {
					filterEnvironmentId = null;
					saveFiltersToStorage();
				}
			}
			return fetchEvents();
		}).then(() => {
			initialized = true;
			return fetchContainers();
		}).then(() => {
			connectSSE();
			initialLoadDone = true;
		});

		return () => {
			disconnectSSE();
		};
	});

	onDestroy(() => {
		document.removeEventListener('visibilitychange', handleVisibilityChange);
		document.removeEventListener('resume', handleVisibilityChange);
		disconnectSSE();
	});
</script>

<svelte:head>
	<title>Activity - Dockhand</title>
</svelte:head>

<div class="flex-1 min-h-0 flex flex-col gap-3 overflow-hidden">
	<!-- Header with inline filters -->
	<div class="shrink-0 flex flex-wrap justify-between items-center gap-3">
		<PageHeader icon={Activity} title="Activity" count={visibleEnd > 0 ? `${visibleStart}-${visibleEnd}` : undefined} total={total > 0 ? total : undefined} countClass="min-w-32" />
		<div class="flex flex-wrap items-center gap-2">
			<!-- Container name search -->
			<div class="relative">
				<Search class="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
				<Input
					type="text"
					placeholder="Container..."
					bind:value={filterContainerName}
					onkeydown={(e) => e.key === 'Escape' && (filterContainerName = '')}
					class="pl-8 h-8 w-36 text-sm"
				/>
			</div>

			<!-- Action filter -->
			<MultiSelectFilter
				bind:value={filterActions}
				options={actionOptions}
				placeholder="Action"
				pluralLabel="actions"
				width="w-36"
				defaultIcon={Activity}
			/>

			<!-- Environment filter -->
			{#if environments.length > 0}
				{@const selectedEnv = environments.find(e => e.id === filterEnvironmentId)}
				{@const SelectedEnvIcon = selectedEnv ? getIconComponent(selectedEnv.icon || 'globe') : Server}
				<Select.Root
					type="single"
					value={filterEnvironmentId !== null ? String(filterEnvironmentId) : undefined}
					onValueChange={(v) => filterEnvironmentId = v ? parseInt(v) : null}
				>
					<Select.Trigger size="sm" class="w-44 text-sm">
						<SelectedEnvIcon class="w-3.5 h-3.5 mr-1.5 text-muted-foreground shrink-0" />
						<span class="truncate">
							{#if filterEnvironmentId === null}
								Environment
							{:else}
								{selectedEnv?.name || 'Environment'}
							{/if}
						</span>
					</Select.Trigger>
					<Select.Content>
						<Select.Item value="">
							<Server class="w-4 h-4 mr-2 text-muted-foreground" />
							All environments
						</Select.Item>
						{#each environments as env}
							{@const EnvIcon = getIconComponent(env.icon || 'globe')}
							<Select.Item value={String(env.id)}>
								<EnvIcon class="w-4 h-4 mr-2 text-muted-foreground" />
								{env.name}
							</Select.Item>
						{/each}
					</Select.Content>
				</Select.Root>
			{/if}

			<!-- Date range filter -->
			<Select.Root
				type="single"
				value={selectedDatePreset}
				onValueChange={(v) => {
					selectedDatePreset = v || '';
					if (v !== 'custom') {
						applyDatePreset(v || '');
					}
				}}
			>
				<Select.Trigger size="sm" class="w-32 text-sm">
					<Calendar class="w-3.5 h-3.5 mr-1.5 text-muted-foreground shrink-0" />
					<span class="truncate">
						{#if selectedDatePreset === 'custom'}
							Custom
						{:else if selectedDatePreset}
							{datePresets.find(d => d.value === selectedDatePreset)?.label || 'All time'}
						{:else}
							All time
						{/if}
					</span>
				</Select.Trigger>
				<Select.Content>
					<Select.Item value="">All time</Select.Item>
					{#each datePresets as preset}
						<Select.Item value={preset.value}>{preset.label}</Select.Item>
					{/each}
					<Select.Item value="custom">Custom range...</Select.Item>
				</Select.Content>
			</Select.Root>

			<!-- Custom date inputs -->
			{#if selectedDatePreset === 'custom'}
				<DatePicker bind:value={filterFromDate} placeholder="From" class="h-8 w-28" />
				<DatePicker bind:value={filterToDate} placeholder="To" class="h-8 w-28" />
			{/if}

			<!-- Clear filters -->
			<Button
				variant="outline"
				size="sm"
				class="h-8 px-2"
				onclick={clearFilters}
				disabled={!hasActiveFilters}
				title="Clear all filters"
			>
				<X class="w-3.5 h-3.5" />
			</Button>

			<Button variant="outline" size="sm" onclick={() => { hasMore = true; fetchEvents(false); }} disabled={loading}>
				<RefreshCw class="w-3.5 h-3.5 {loading ? 'animate-spin' : ''}" />
			</Button>

			{#if $canAccess('activity', 'delete')}
				<ConfirmPopover
					bind:open={showClearConfirm}
					action="Clear"
					itemType="activity log"
					title="Clear all"
					onConfirm={clearActivity}
					confirmText="Clear"
					variant="destructive"
					disabled={clearingActivity}
					onOpenChange={(open) => showClearConfirm = open}
				>
					{#snippet children({ open })}
						<Button variant="outline" size="sm" disabled={clearingActivity || total === 0}>
							<Trash2 class="w-3.5 h-3.5" />
						</Button>
					{/snippet}
				</ConfirmPopover>
			{/if}
		</div>
	</div>

	<!-- DataGrid with Virtual Scrolling -->
	{#if $environmentsStore.length === 0}
		<NoEnvironment />
	{:else}
		<DataGrid
			data={events}
			keyField="id"
			gridId="activity"
			virtualScroll
			hasMore={hasMore}
			onLoadMore={loadMoreEvents}
			onVisibleRangeChange={handleVisibleRangeChange}
			loading={loading || !initialized}
			onRowClick={(event) => showDetails(event)}
			class="border-none"
			wrapperClass="border rounded-lg"
		>
			{#snippet cell(column, event, rowState)}
				{#if column.id === 'timestamp'}
					<span class="font-mono text-xs whitespace-nowrap">{formatTimestamp(event.timestamp)}</span>
				{:else if column.id === 'environment'}
					{#if event.environmentName}
						{@const EventEnvIcon = getIconComponent(event.environmentIcon || 'globe')}
						<div class="flex items-center gap-1 text-xs">
							<EventEnvIcon class="w-3 h-3 text-muted-foreground shrink-0" />
							<span class="truncate">{event.environmentName}</span>
						</div>
					{:else}
						<span class="text-muted-foreground text-xs">-</span>
					{/if}
				{:else if column.id === 'action'}
					<div class="flex justify-center">
						<Badge class="{getActionColor(event.action)} py-0.5 px-1" title={event.action.charAt(0).toUpperCase() + event.action.slice(1)}>
							<svelte:component this={getActionIcon(event.action)} class="w-3 h-3" />
						</Badge>
					</div>
				{:else if column.id === 'container'}
					<div class="flex items-center gap-1 truncate text-xs">
						<Box class="w-3 h-3 text-muted-foreground shrink-0" />
						<span class="truncate" title={event.containerName || event.containerId || 'Unknown'}>
							{event.containerName || (event.containerId ? event.containerId.slice(0, 12) : 'Unknown')}
						</span>
					</div>
				{:else if column.id === 'image'}
					<span class="text-xs text-muted-foreground truncate" title={event.image || '-'}>
						{event.image || '-'}
					</span>
				{:else if column.id === 'exitCode'}
					{#if event.actorAttributes?.exitCode !== undefined}
						{@const exitCode = parseInt(event.actorAttributes.exitCode)}
						<span class="font-mono text-xs text-center block {exitCode === 0 ? 'text-green-600' : 'text-red-500'}">
							{exitCode}
						</span>
					{:else}
						<span class="text-muted-foreground text-xs text-center block">-</span>
					{/if}
				{:else if column.id === 'actions'}
					<div class="flex items-center justify-end">
						<Button variant="ghost" size="icon" class="h-6 w-6" onclick={(e) => { e.stopPropagation(); showDetails(event); }}>
							<Eye class="w-3.5 h-3.5" />
						</Button>
					</div>
				{/if}
			{/snippet}

			{#snippet emptyState()}
				<div class="flex flex-col items-center justify-center py-16 text-muted-foreground">
					<FileX class="w-10 h-10 mb-3 opacity-40" />
					<p>No container events found</p>
					<p class="text-xs mt-1">Events will appear here as containers start, stop, etc.</p>
				</div>
			{/snippet}

			{#snippet loadingState()}
				<div class="flex items-center justify-center py-16 text-muted-foreground">
					<RefreshCw class="w-5 h-5 animate-spin mr-2" />
					Loading...
				</div>
			{/snippet}
		</DataGrid>

		<!-- Loading more indicator -->
		{#if loadingMore}
			<div class="flex items-center justify-center py-2 text-muted-foreground border-t">
				<Loader2 class="w-4 h-4 animate-spin mr-2" />
				Loading more...
			</div>
		{/if}

		<!-- End of results -->
		{#if !hasMore && events.length > 0}
			<div class="text-center py-2 text-sm text-muted-foreground border-t">
				End of results ({total.toLocaleString()} events)
			</div>
		{/if}
	{/if}
</div>

<!-- Detail Dialog -->
<Dialog.Root bind:open={showDetailDialog}>
	<Dialog.Content class="max-w-2xl">
		<Dialog.Header>
			<Dialog.Title>Event details</Dialog.Title>
		</Dialog.Header>
		{#if selectedEvent}
			<div class="space-y-4">
				<div class="grid grid-cols-2 gap-4">
					<div>
						<label class="text-sm font-medium text-muted-foreground">Timestamp</label>
						<p class="font-mono text-sm">{formatTimestamp(selectedEvent.timestamp)}</p>
					</div>
					<div>
						<label class="text-sm font-medium text-muted-foreground">Action</label>
						<p>
							<Badge class="{getActionColor(selectedEvent.action)} gap-1">
								<svelte:component this={getActionIcon(selectedEvent.action)} class="w-3 h-3" />
								{selectedEvent.action}
							</Badge>
						</p>
					</div>
					<div>
						<label class="text-sm font-medium text-muted-foreground">Container name</label>
						<p class="flex items-center gap-1">
							<Box class="w-4 h-4 text-muted-foreground" />
							{selectedEvent.containerName || '-'}
						</p>
					</div>
					<div>
						<label class="text-sm font-medium text-muted-foreground">Container ID</label>
						<p class="font-mono text-sm break-all">{selectedEvent.containerId}</p>
					</div>
					{#if selectedEvent.image}
						<div class="col-span-2">
							<label class="text-sm font-medium text-muted-foreground">Image</label>
							<p class="font-mono text-sm break-all">{selectedEvent.image}</p>
						</div>
					{/if}
					{#if selectedEvent.environmentName}
						<div>
							<label class="text-sm font-medium text-muted-foreground">Environment</label>
							<p>{selectedEvent.environmentName}</p>
						</div>
					{/if}
				</div>

				{#if selectedEvent.actorAttributes && Object.keys(selectedEvent.actorAttributes).length > 0}
					<div>
						<label class="text-sm font-medium text-muted-foreground">Attributes</label>
						<div class="mt-1 border rounded-md overflow-hidden max-h-[200px] overflow-y-auto">
							<table class="w-full text-xs">
								<tbody>
									{#each Object.entries(selectedEvent.actorAttributes) as [key, value], i}
										<tr class="{i % 2 === 0 ? 'bg-muted/50' : 'bg-background'}">
											<td class="px-3 py-1.5 font-mono font-medium text-muted-foreground whitespace-nowrap align-top w-1/3">{key}</td>
											<td class="px-3 py-1.5 font-mono break-all">{value}</td>
										</tr>
									{/each}
								</tbody>
							</table>
						</div>
					</div>
				{/if}
			</div>
		{/if}
		<Dialog.Footer>
			<Button variant="outline" onclick={() => showDetailDialog = false}>Close</Button>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>