From 062c67234e91242a3cb6fffa2e19f23bc9961186 Mon Sep 17 00:00:00 2001
From: kleinbem <martin.kleinberger@gmail.com>
Date: Wed, 11 Nov 2026 02:39:59 +0000
Subject: [PATCH 1/3] fix: consistent service health, keep it on Gatus errors,
 filter bad bookmarks

Cards, the issues filter and the counters each resolved health their own
way, and healthyCount counted alias keys. One resolveHealth() now serves
all three. A failed or malformed Gatus response returns null and keeps
the last known state instead of blanking it; bad entries are skipped.
Stored bookmarks must be http(s) URLs and invalid ones are dropped
one by one instead of discarding the whole list. Icon-only buttons in the
bookmarks section get accessible names.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/lib/components/BookmarksSection.svelte | 13 +++++---
 src/lib/components/CategorySection.svelte  |  4 +--
 src/lib/data/gatus.ts                      | 39 ++++++++++++++++------
 src/routes/+page.svelte                    | 13 ++++----
 4 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/BookmarksSection.svelte b/src/lib/components/BookmarksSection.svelte
index 85a4f3a..2fb18a7 100644
--- a/src/lib/components/BookmarksSection.svelte
+++ b/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>
diff --git a/src/lib/components/CategorySection.svelte b/src/lib/components/CategorySection.svelte
index 4610b0f..4290ea0 100644
--- a/src/lib/components/CategorySection.svelte
+++ b/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>
diff --git a/src/lib/data/gatus.ts b/src/lib/data/gatus.ts
index fc0ee7f..443a129 100644
--- a/src/lib/data/gatus.ts
+++ b/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,9 +13,9 @@ 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' },
@@ -23,14 +23,17 @@ export async function fetchGatusStatuses(): Promise<Record<string, HealthStatus>
 		});
 
 		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'
+	);
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 364cf03..37eb9cc 100644
--- a/src/routes/+page.svelte
+++ b/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';
@@ -44,8 +44,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 +74,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 +90,8 @@
 
 	onMount(() => {
 		async function refreshHealth() {
-			healthMap = await fetchGatusStatuses();
+			const next = await fetchGatusStatuses();
+			if (next) healthMap = next;
 		}
 
 		refreshHealth();

From 598c67c2d8ac281caa4fa9db975267d3e164006f Mon Sep 17 00:00:00 2001
From: kleinbem <martin.kleinberger@gmail.com>
Date: Wed, 11 Nov 2026 02:50:02 +0000
Subject: [PATCH 2/3] fix: say when the shown health is stale

CodeRabbit on #8: after a failed Gatus poll the page kept the old map
without saying so. It now shows "Gatus unreachable" with the time of
the last successful poll.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/routes/+page.svelte | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 37eb9cc..9768971 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.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 {
@@ -91,7 +94,13 @@
 	onMount(() => {
 		async function refreshHealth() {
 			const next = await fetchGatusStatuses();
-			if (next) healthMap = next;
+			if (next) {
+				healthMap = next;
+				healthUpdatedAt = new Date();
+				healthStale = false;
+			} else {
+				healthStale = true;
+			}
 		}
 
 		refreshHealth();
@@ -110,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.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
+						: ' · 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">

From 21265772d54f6a9bb5d585ed8f35036c0992ee57 Mon Sep 17 00:00:00 2001
From: kleinbem <martin.kleinberger@gmail.com>
Date: Wed, 11 Nov 2026 02:56:08 +0000
Subject: [PATCH 3/3] fix: show the date of the last health poll too

CodeRabbit on #8: a time alone makes day-old health look recent.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/routes/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9768971..75d3e2c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -122,7 +122,7 @@
 			{#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.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
+						? ` · health as of ${healthUpdatedAt.toLocaleString([], { dateStyle: 'short', timeStyle: 'short' })}`
 						: ' · no health data yet'}
 				</p>
 			{/if}