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/+layout.svelte

@@ -8,6 +8,8 @@
 	import LocaleSwitcher from '$lib/components/LocaleSwitcher.svelte';
 	import { IconDashboard, IconProjects, IconDeploy, IconProxies, IconEvents, IconSettings, IconMenu, IconX, IconLogout } from '$lib/components/icons';
 	import { connectGlobalEvents, type SSEConnection } from '$lib/sse';
+	import { isAuthenticated, clearAuth } from '$lib/auth';
+	import * as api from '$lib/api';
 	import { instanceStatusStore } from '$lib/stores/instance-status';
 	import { resolvedTheme, applyTheme } from '$lib/stores/theme';
 	import { t } from '$lib/i18n';
@@ -34,6 +36,8 @@
 
 	let sseConnection: SSEConnection | null = null;
 	let sidebarOpen = $state(false);
+	let dockerConnected = $state<boolean | null>(null);
+	let healthInterval: ReturnType<typeof setInterval> | null = null;
 
 	// Hide sidebar and chrome on the login page.
 	const isLoginPage = $derived($page.url.pathname === '/login');
@@ -59,28 +63,41 @@
 	});
 
 	function logout() {
-		if (typeof localStorage !== 'undefined') {
-			localStorage.removeItem('auth_token');
-		}
+		clearAuth();
 		sseConnection?.close();
 		sseConnection = null;
 		window.location.href = '/login';
 	}
 
 	onMount(() => {
-		sseConnection = connectGlobalEvents({
-			onInstanceStatus(payload) {
-				instanceStatusStore.update(payload);
-			},
-			onDeployStatus(payload) {
-				instanceStatusStore.notifyDeploy(payload);
+		if (isAuthenticated()) {
+			sseConnection = connectGlobalEvents({
+				onInstanceStatus(payload) {
+					instanceStatusStore.update(payload);
+				},
+				onDeployStatus(payload) {
+					instanceStatusStore.notifyDeploy(payload);
+				}
+			});
+
+			// Poll Docker health every 30s.
+			async function checkHealth() {
+				try {
+					const h = await api.getHealth();
+					dockerConnected = h.docker;
+				} catch {
+					dockerConnected = null;
+				}
 			}
-		});
+			checkHealth();
+			healthInterval = setInterval(checkHealth, 30_000);
+		}
 	});
 
 	onDestroy(() => {
 		sseConnection?.close();
 		sseConnection = null;
+		if (healthInterval) clearInterval(healthInterval);
 	});
 </script>
 
@@ -156,6 +173,17 @@
 
 		<!-- Footer controls -->
 		<div class="space-y-3 border-t border-[var(--border-primary)] px-4 py-3">
+			{#if dockerConnected !== null}
+				<div class="flex items-center gap-2 rounded-md px-2 py-1.5 text-xs {dockerConnected ? 'text-emerald-600' : 'text-red-500'}">
+					<span class="relative flex h-2 w-2">
+						{#if dockerConnected}
+							<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-50"></span>
+						{/if}
+						<span class="relative inline-flex h-2 w-2 rounded-full {dockerConnected ? 'bg-emerald-500' : 'bg-red-500'}"></span>
+					</span>
+					Docker {dockerConnected ? $t('health.connected') : $t('health.disconnected')}
+				</div>
+			{/if}
 			<div class="flex items-center justify-between">
 				<ThemeToggle />
 				<LocaleSwitcher />

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

@@ -180,7 +180,7 @@
 					disabled={inspecting}
 				/>
 			</div>
-			<div class="flex items-end gap-2">
+			<div class="flex items-start gap-2 pt-[26px]">
 				<button
 					type="button"
 					onclick={handleBrowseImages}

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>

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

@@ -5,6 +5,7 @@
 	import { t } from '$lib/i18n';
 	import { resolvedTheme, applyTheme } from '$lib/stores/theme';
 	import { IconLoader } from '$lib/components/icons';
+	import { setAuthToken, isAuthenticated } from '$lib/auth';
 
 	let username = $state('');
 	let password = $state('');
@@ -25,7 +26,7 @@
 					headers: { 'Authorization': `Bearer ${urlToken}` }
 				});
 				if (res.ok) {
-					localStorage.setItem('auth_token', urlToken);
+					setAuthToken(urlToken);
 					// Remove token from URL to prevent leakage via history/referrer.
 					history.replaceState(null, '', '/login');
 					goto('/');
@@ -37,8 +38,7 @@
 			// Remove invalid token from URL.
 			history.replaceState(null, '', '/login');
 		}
-		const existingToken = localStorage.getItem('auth_token');
-		if (existingToken) {
+		if (isAuthenticated()) {
 			goto('/');
 		}
 	});
@@ -57,7 +57,7 @@
 				error = envelope.error ?? $t('login.loginFailed');
 				return;
 			}
-			localStorage.setItem('auth_token', envelope.data.token);
+			setAuthToken(envelope.data.token);
 			goto('/');
 		} catch (err: unknown) {
 			error = err instanceof Error ? err.message : $t('login.networkError');

web/src/routes/settings/auth/+page.svelte

@@ -3,6 +3,7 @@
 	import { t } from '$lib/i18n';
 	import { IconLoader, IconPlus, IconTrash, IconUsers } from '$lib/components/icons';
 	import EmptyState from '$lib/components/EmptyState.svelte';
+	import { getAuthToken } from '$lib/auth';
 
 	interface AuthSettings {
 		auth_mode: string;
@@ -33,8 +34,7 @@
 	let newEmail = $state('');
 	let newRole = $state('viewer');
 
-	function getToken(): string { return localStorage.getItem('auth_token') ?? ''; }
-	function authHeaders(): Record<string, string> { return { 'Content-Type': 'application/json', Authorization: `Bearer ${getToken()}` }; }
+	function authHeaders(): Record<string, string> { return { 'Content-Type': 'application/json', Authorization: `Bearer ${getAuthToken() ?? ''}` }; }
 
 	onMount(async () => { await Promise.all([loadSettings(), loadUsers()]); });