feat: global Docker health indicator and graceful degradation

- GET /api/health endpoint returning Docker connectivity status
- Sidebar shows Docker connection dot (green=connected, red=disconnected)
- Stale scanner returns store-only results when Docker is unavailable
- Polls health every 30s

web/src/routes/events/+page.svelte

@@ -1,6 +1,6 @@
 <!--
   Event Log page.
-  Displays a filterable, paginated, real-time event log.
+  Filterable, paginated, real-time event log with timeline-style entries.
 -->
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
@@ -82,7 +82,7 @@
 			hasMore = result.length === PAGE_SIZE;
 			offset = (append ? currentOffset : 0) + result.length;
 		} catch {
-			// Error silently for now — user sees empty state.
+			// Error silently — user sees empty state.
 		} finally {
 			loading = false;
 			loadingMore = false;
@@ -162,7 +162,6 @@
 		} else {
 			events = [newEntry, ...events];
 			newEventIds = new Set([...newEventIds, newEntry.id]);
-			// Clear "new" highlight after animation.
 			setTimeout(() => {
 				newEventIds = new Set([...newEventIds].filter((id) => id !== newEntry.id));
 			}, 3000);
@@ -175,10 +174,8 @@
 		newEventIds = ids;
 		pendingNewEvents = [];
 
-		// Scroll to top.
 		listEl?.scrollTo({ top: 0, behavior: 'smooth' });
 
-		// Clear highlights after animation.
 		setTimeout(() => {
 			newEventIds = new Set();
 		}, 3000);
@@ -210,41 +207,22 @@
 	});
 </script>
 
-<div class="space-y-6">
+<div class="space-y-4">
 	<!-- Header -->
-	<div>
+	<div class="flex items-center justify-between">
 		<h1 class="text-2xl font-bold text-[var(--text-primary)]">{$t('events.title')}</h1>
+		{#if stats.total > 0}
+			<span class="text-xs text-[var(--text-tertiary)] tabular-nums">{stats.total} total</span>
+		{/if}
 	</div>
 
-	<!-- Stats bar -->
-	<div class="flex items-center gap-3 flex-wrap">
-		<div class="flex items-center gap-1.5 rounded-md bg-blue-50 px-2.5 py-1 dark:bg-blue-900/30">
-			<div class="h-2 w-2 rounded-full bg-blue-500"></div>
-			<span class="text-xs font-medium text-blue-700 dark:text-blue-300">{$t('events.severity.info')}</span>
-			<span class="text-xs font-bold text-blue-800 dark:text-blue-200">{stats.info}</span>
-		</div>
-		<div class="flex items-center gap-1.5 rounded-md bg-amber-50 px-2.5 py-1 dark:bg-amber-900/30">
-			<div class="h-2 w-2 rounded-full bg-amber-500"></div>
-			<span class="text-xs font-medium text-amber-700 dark:text-amber-300">{$t('events.severity.warn')}</span>
-			<span class="text-xs font-bold text-amber-800 dark:text-amber-200">{stats.warn}</span>
-		</div>
-		<div class="flex items-center gap-1.5 rounded-md bg-red-50 px-2.5 py-1 dark:bg-red-900/30">
-			<div class="h-2 w-2 rounded-full bg-red-500"></div>
-			<span class="text-xs font-medium text-red-700 dark:text-red-300">{$t('events.severity.error')}</span>
-			<span class="text-xs font-bold text-red-800 dark:text-red-200">{stats.error}</span>
-		</div>
-		<div class="flex items-center gap-1.5 rounded-md bg-[var(--surface-card-hover)] px-2.5 py-1">
-			<span class="text-xs text-[var(--text-secondary)]">Total</span>
-			<span class="text-xs font-bold text-[var(--text-primary)]">{stats.total}</span>
-		</div>
-	</div>
-
-	<!-- Filter bar -->
+	<!-- Filter bar (includes severity stats as pill counts) -->
 	<EventLogFilter
 		{severities}
 		{sources}
 		{dateRange}
 		{searchText}
+		{stats}
 		onseveritieschange={handleSeveritiesChange}
 		onsourceschange={handleSourcesChange}
 		ondaterangechange={handleDateRangeChange}
@@ -266,7 +244,7 @@
 	<!-- Event list -->
 	{#if loading}
 		<div class="flex items-center justify-center py-16">
-			<svg class="h-6 w-6 animate-spin text-[var(--color-brand-600)]" viewBox="0 0 24 24" fill="none">
+			<svg class="h-5 w-5 animate-spin text-[var(--color-brand-500)]" viewBox="0 0 24 24" fill="none">
 				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 			</svg>
@@ -281,7 +259,7 @@
 		<div
 			bind:this={listEl}
 			onscroll={handleScroll}
-			class="space-y-2"
+			class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] divide-y divide-[var(--border-secondary)]"
 		>
 			{#each filteredEvents as entry (entry.id)}
 				<EventLogEntryComponent
@@ -289,26 +267,26 @@
 					isNew={newEventIds.has(entry.id)}
 				/>
 			{/each}
-
-			<!-- Load more -->
-			{#if hasMore && searchText.trim() === ''}
-				<div class="flex justify-center pt-4 pb-2">
-					<button
-						type="button"
-						class="inline-flex items-center gap-2 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] px-4 py-2 text-sm font-medium text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)] disabled:opacity-50"
-						onclick={loadMore}
-						disabled={loadingMore}
-					>
-						{#if loadingMore}
-							<svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
-								<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-								<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-							</svg>
-						{/if}
-						{$t('events.loadMore')}
-					</button>
-				</div>
-			{/if}
 		</div>
+
+		<!-- Load more -->
+		{#if hasMore && searchText.trim() === ''}
+			<div class="flex justify-center pt-2 pb-1">
+				<button
+					type="button"
+					class="inline-flex items-center gap-2 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card)] px-4 py-2 text-sm font-medium text-[var(--text-secondary)] transition-colors hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)] disabled:opacity-50"
+					onclick={loadMore}
+					disabled={loadingMore}
+				>
+					{#if loadingMore}
+						<svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+							<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+							<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+						</svg>
+					{/if}
+					{$t('events.loadMore')}
+				</button>
+			</div>
+		{/if}
 	{/if}
 </div>