Added Latest Alert badge to header

src/lib/components/Header.svelte

@@ -2,6 +2,7 @@
   import { theme } from "$lib/stores/theme";
   import { allAlerts, refreshData, refreshing } from "$lib/stores/sites";
   import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
   import { slide } from "svelte/transition";
   import { Satellite, Globe, BookOpen, Bell, Moon, Sun, Monitor, RefreshCw } from "@lucide/svelte";
   import Logo from "$lib/components/ui/logo.svelte";
@@ -13,7 +14,27 @@
     { href: "/methodology", label: "Methodology", icon: BookOpen },
   ];
   let alertCount = $derived($allAlerts.length);
-
+  let latestAlert = $derived.by(() => {
+    if ($allAlerts.length === 0) return null;
+    const a = $allAlerts.reduce((a, b) => new Date(a.triggeredAt) > new Date(b.triggeredAt) ? a : b);
+    const siteName = a.message.match(/for (.+?)(?:\.|:|\s|$)/)?.[1] ?? "";
+    const severityColor = a.severity === "critical" ? "var(--critical)" : a.severity === "warning" ? "var(--watch)" : "var(--accent)";
+    const shortMsg = a.message.replace(/ for .+/, "").replace(/\.$/, "");
+    return { siteName, severityColor, shortMsg, message: a.message, triggeredAt: a.triggeredAt };
+  });
+
+  function openLatestAlert() {
+    if (!latestAlert) return;
+    const allSites = document.querySelectorAll('[role="option"]');
+    for (const el of allSites) {
+      if (el.textContent?.includes(latestAlert.siteName)) {
+        (el as HTMLElement).click();
+        return;
+      }
+    }
+    goto("/dashboard");
+  }
+
   // Store reference to the hamburger button to restore focus when menu closes
   let hamburgerBtn: HTMLButtonElement | undefined = $state();
 
@@ -72,6 +93,18 @@
           <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold font-mono leading-none" style="background:var(--critical);color:white">{alertCount}</span>
         {/if}
       </a>
+      {#if latestAlert}
+        <button
+          onclick={openLatestAlert}
+          class="hidden xl:flex items-center gap-2 h-7 px-3 text-[11px] border cursor-pointer transition-colors duration-150 hover:bg-elevated"
+          style="border-color:{latestAlert.severityColor}"
+          title="Click to view this site on the dashboard"
+        >
+          <span class="shrink-0 w-2 h-2 rounded-full" style="background:{latestAlert.severityColor}"></span>
+          <span class="font-medium text-text-main truncate max-w-[140px]">{latestAlert.siteName}</span>
+          <span class="text-text-dim truncate max-w-[200px] font-mono">{latestAlert.shortMsg.slice(0, 60)}{latestAlert.shortMsg.length > 60 ? "…" : ""}</span>
+        </button>
+      {/if}
     </nav>
 
     <div class="flex items-center gap-2 ml-auto">
@@ -137,6 +170,9 @@
         onclick={() => mobileOpen = false}
       >
         <Bell size={14}/>Alerts{$allAlerts.length > 0 ? ` (${$allAlerts.length})` : ''}
+        {#if latestAlert}
+          <span class="text-[11px] text-text-faint ml-auto">{latestAlert.message.slice(0, 40)}{latestAlert.message.length > 40 ? '…' : ''}</span>
+        {/if}
       </a>
       <button 
         onclick={() => { cycleTheme(); mobileOpen = false; }}