fix: consistent service health, keep it on Gatus errors, filter bad bookmarks

src/lib/components/BookmarksSection.svelte

@@ -24,7 +24,8 @@
 			item !== null &&
 			typeof (item as PinnedBookmark).id === 'string' &&
 			typeof (item as PinnedBookmark).name === 'string' &&
-			typeof (item as PinnedBookmark).url === 'string'
+			typeof (item as PinnedBookmark).url === 'string' &&
+			isValidHttpUrl((item as PinnedBookmark).url)
 		);
 	}
 
@@ -34,8 +35,8 @@
 				const saved = localStorage.getItem('foyer-bookmarks');
 				if (saved) {
 					const parsed = JSON.parse(saved);
-					if (Array.isArray(parsed) && parsed.every(isValidBookmark)) {
-						bookmarks = parsed;
+					if (Array.isArray(parsed)) {
+						bookmarks = parsed.filter(isValidBookmark);
 					}
 				}
 			} catch {}
@@ -150,10 +151,11 @@
 					<button
 						type="button"
 						onclick={() => removeBookmark(bm.id)}
-						class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 text-zinc-400 hover:text-rose-500 p-1 rounded transition-opacity cursor-pointer focus:outline-hidden"
+						class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 text-zinc-400 hover:text-rose-500 p-1 rounded transition-opacity cursor-pointer"
 						title="Remove bookmark"
+						aria-label="Remove bookmark {bm.name}"
 					>
-						<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<svg aria-hidden="true" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 						</svg>
 					</button>
@@ -185,6 +187,7 @@
 					type="button"
 					onclick={() => (showAddModal = false)}
 					class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 cursor-pointer"
+					aria-label="Close dialog"
 				>
 					✕
 				</button>

src/lib/components/CategorySection.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HealthStatus, LayoutDensity, ServiceCategory, ServiceItem } from '../types';
 	import ServiceCard from './ServiceCard.svelte';
+	import { resolveHealth } from '../data/gatus';
 
 	let {
 		category,
@@ -66,8 +67,7 @@
 
 		<div class={containerClass}>
 			{#each services as service (service.id)}
-				{@const normKey = service.id.toLowerCase().replace(/[^a-z0-9]/g, '')}
-				{@const health = service.gatusEndpoint ? (healthMap[service.gatusEndpoint] ?? healthMap[normKey] ?? 'unknown') : 'unknown'}
+				{@const health = resolveHealth(service, healthMap)}
 				<ServiceCard {service} {health} {density} />
 			{/each}
 		</div>

src/lib/data/gatus.ts

@@ -1,4 +1,4 @@
-import type { HealthStatus } from '../types';
+import type { HealthStatus, ServiceItem } from '../types';
 
 export interface EndpointStatus {
 	name: string;
@@ -13,24 +13,27 @@ export interface EndpointStatus {
 
 /**
  * Fetch endpoint statuses from the fleet Gatus instance.
- * Gracefully returns empty status map if unavailable or unreachable.
+ * Returns null when Gatus is unreachable, so callers can keep the last known state.
  */
-export async function fetchGatusStatuses(): Promise<Record<string, HealthStatus>> {
+export async function fetchGatusStatuses(): Promise<Record<string, HealthStatus> | null> {
 	try {
 		const res = await fetch('https://status.kleinbem.dev/api/v1/endpoints/statuses', {
 			headers: { Accept: 'application/json' },
 			signal: AbortSignal.timeout(4000)
 		});
 
 		if (!res.ok) {
-			return {};
+			return null;
 		}
 
-		const endpoints: EndpointStatus[] = await res.json();
+		const endpoints: unknown = await res.json();
+		if (!Array.isArray(endpoints)) return null;
 		const map: Record<string, HealthStatus> = {};
 
-		for (const ep of endpoints) {
-			const latest = ep.results?.[ep.results.length - 1];
+		for (const ep of endpoints as EndpointStatus[]) {
+			if (!ep || typeof ep.name !== 'string') continue;
+			const results = Array.isArray(ep.results) ? ep.results : [];
+			const latest = results[results.length - 1];
 			const status: HealthStatus = !latest
 				? 'unknown'
 				: latest.success
@@ -41,7 +44,7 @@ export async function fetchGatusStatuses(): Promise<Record<string, HealthStatus>
 			const normName = ep.name.toLowerCase().replace(/[^a-z0-9]/g, '');
 			map[normName] = status;
 			map[ep.name.toLowerCase()] = status;
-			if (ep.key) map[ep.key] = status;
+			if (typeof ep.key === 'string' && ep.key) map[ep.key] = status;
 
 			// Common aliases for fleet probes
 			if (normName === 'chat') {
@@ -61,7 +64,23 @@ export async function fetchGatusStatuses(): Promise<Record<string, HealthStatus>
 
 		return map;
 	} catch {
-		// Silent fallback: offline / CORS / unreachable
-		return {};
+		// Offline / CORS / unreachable
+		return null;
 	}
 }
+
+/**
+ * Health of one service: its Gatus endpoint, then its normalised id, then its raw id.
+ */
+export function resolveHealth(
+	service: Pick<ServiceItem, 'id' | 'gatusEndpoint'>,
+	healthMap: Record<string, HealthStatus>
+): HealthStatus {
+	const normKey = service.id.toLowerCase().replace(/[^a-z0-9]/g, '');
+	return (
+		(service.gatusEndpoint ? healthMap[service.gatusEndpoint] : undefined) ??
+		healthMap[normKey] ??
+		healthMap[service.id] ??
+		'unknown'
+	);
+}

src/routes/+page.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import type { HealthStatus, HostNode, LayoutDensity, ServiceCategory } from '#lib/types';
 	import { CATEGORY_ORDER, FLEET_SERVICES } from '#lib/data/services';
-	import { fetchGatusStatuses } from '#lib/data/gatus';
+	import { fetchGatusStatuses, resolveHealth } from '#lib/data/gatus';
 	import HostFilter from '#lib/components/HostFilter.svelte';
 	import HostBar from '#lib/components/HostBar.svelte';
 	import BookmarksSection from '#lib/components/BookmarksSection.svelte';
@@ -13,6 +13,9 @@
 	let networkFilter = $state<'all' | 'public' | 'mesh' | 'issues'>('all');
 	let density = $state<LayoutDensity>('comfortable');
 	let healthMap = $state<Record<string, HealthStatus>>({});
+	// Last successful Gatus poll; the map is kept on failures, so show how old it is.
+	let healthUpdatedAt = $state<Date | null>(null);
+	let healthStale = $state(false);
 
 	onMount(() => {
 		try {
@@ -44,8 +47,7 @@
 			list = list.filter((s) => s.network === 'mesh');
 		} else if (networkFilter === 'issues') {
 			list = list.filter((s) => {
-				const normKey = s.id.toLowerCase().replace(/[^a-z0-9]/g, '');
-				const h = s.gatusEndpoint ? (healthMap[s.gatusEndpoint] ?? healthMap[normKey]) : healthMap[normKey];
+				const h = resolveHealth(s, healthMap);
 				return h === 'down' || h === 'degraded';
 			});
 		}
@@ -75,10 +77,9 @@
 	let metrics = $derived.by(() => {
 		const publicCount = FLEET_SERVICES.filter((s) => s.network === 'public').length;
 		const meshCount = FLEET_SERVICES.filter((s) => s.network === 'mesh').length;
-		const healthyCount = Object.values(healthMap).filter((s) => s === 'healthy').length;
+		const healthyCount = FLEET_SERVICES.filter((s) => resolveHealth(s, healthMap) === 'healthy').length;
 		const issueCount = FLEET_SERVICES.filter((s) => {
-			const probeKey = s.gatusEndpoint || s.id.toLowerCase().replace(/[^a-z0-9]/g, '');
-			const status = healthMap[probeKey] || healthMap[s.id];
+			const status = resolveHealth(s, healthMap);
 			return status === 'down' || status === 'degraded';
 		}).length;
 		return { publicCount, meshCount, healthyCount, issueCount };
@@ -92,7 +93,14 @@
 
 	onMount(() => {
 		async function refreshHealth() {
-			healthMap = await fetchGatusStatuses();
+			const next = await fetchGatusStatuses();
+			if (next) {
+				healthMap = next;
+				healthUpdatedAt = new Date();
+				healthStale = false;
+			} else {
+				healthStale = true;
+			}
 		}
 
 		refreshHealth();
@@ -111,6 +119,13 @@
 			<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">
 				Central gateway to self-hosted compute, storage, and AI agents.
 			</p>
+			{#if healthStale}
+				<p class="text-[11px] text-amber-600 dark:text-amber-400 mt-1 font-mono" role="status">
+					Gatus unreachable{healthUpdatedAt
+						? ` · health as of ${healthUpdatedAt.toLocaleString([], { dateStyle: 'short', timeStyle: 'short' })}`
+						: ' · no health data yet'}
+				</p>
+			{/if}
 		</div>
 
 		<div class="flex items-center gap-2 sm:gap-2.5 text-xs font-mono flex-wrap" role="group" aria-label="Network status filters">