From 9a7d2d28bc899cc21ee15fc562382f77641ecd28 Mon Sep 17 00:00:00 2001
From: thelinuxguy-ssh <mr.linux.0@protonmail.com>
Date: Mon, 3 Aug 2026 18:56:38 +0530
Subject: [PATCH] UI Enhancement towards scientific functionality

---
 src/lib/components/MapView.svelte       |  26 +-
 src/lib/components/SiteDetail.svelte    | 347 ++++++++++++------------
 src/routes/(app)/alerts/+page.svelte    | 122 +++++++--
 src/routes/(app)/dashboard/+page.svelte |  26 +-
 4 files changed, 321 insertions(+), 200 deletions(-)

diff --git a/src/lib/components/MapView.svelte b/src/lib/components/MapView.svelte
index e4d49eb..de56892 100644
--- a/src/lib/components/MapView.svelte
+++ b/src/lib/components/MapView.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import { onMount, onDestroy, tick } from "svelte";
   import { allSites, selectedSiteId } from "$lib/stores/sites";
+  import { theme } from "$lib/stores/theme";
   import "leaflet/dist/leaflet.css";
   import type { SiteSummary } from "$lib/stores/sites";
   let container: HTMLDivElement;
   let map: any = null;
   let markers: Map<string, any> = new Map();
+  let currentTileLayer: any = null;
+  let themeUnsub: (() => void) | null = null;
 
   const c: Record<string,string> = { stable: "#34d399", watch: "#fbbf24", critical: "#f87171" };
 
@@ -45,6 +48,19 @@
       maxZoom: 19,
     }).addTo(map);
 
+    themeUnsub = theme.subscribe((t) => {
+      if (!map) return;
+      map.eachLayer((l: any) => { if (l._url) map.removeLayer(l); });
+      const url = t === "light"
+        ? "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
+        : "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png";
+      L.tileLayer(url, {
+        attribution: '&copy; <a href="https://carto.com/">CARTO</a> &copy; <a href="https://openstreetmap.org">OSM</a>',
+        subdomains: "abcd",
+        maxZoom: 19,
+      }).addTo(map);
+    });
+
     function renderMarkers(sites: SiteSummary[]) {
       markers.forEach(m => map.removeLayer(m));
       markers.clear();
@@ -75,7 +91,11 @@
     sitesUnsub = allSites.subscribe(renderMarkers);
 
     selectedUnsub = selectedSiteId.subscribe((id) => {
-      const m = id ? markers.get(id) : null;
+      if (!id) {
+        if (map) map.flyTo([20, 20], 2, { duration: 0.6 });
+        return;
+      }
+      const m = markers.get(id);
       if (m && map) {
         const latlng = m.getLatLng();
         map.flyTo(latlng, 8, { duration: 0.8 });
@@ -87,12 +107,16 @@
   onDestroy(() => {
     sitesUnsub?.();
     selectedUnsub?.();
+    themeUnsub?.();
     map?.remove();
   });
 </script>
 
 <div class="relative z-0 w-full h-full">
   <div class="absolute inset-0 overflow-hidden"><div bind:this={container} class="w-full h-full"></div></div>
+  {#if $theme === "night-vision"}
+    <div class="absolute inset-0 pointer-events-none z-10" style="background: rgba(80,0,0,0.25); mix-blend-mode: multiply;"></div>
+  {/if}
 </div>
 
 <style>
diff --git a/src/lib/components/SiteDetail.svelte b/src/lib/components/SiteDetail.svelte
index b55adb2..8ada514 100644
--- a/src/lib/components/SiteDetail.svelte
+++ b/src/lib/components/SiteDetail.svelte
@@ -3,8 +3,8 @@
   import { theme } from "$lib/stores/theme";
   import TrendChart from "./TrendChart.svelte";
   import Badge from "$lib/components/ui/badge.svelte";
-  import { fade, scale } from "svelte/transition";
-  import { X, AlertTriangle, Crosshair, Zap, Star, Activity, TrendingUp, Shield, BrainCircuit, Bell, Download } from "@lucide/svelte";
+  import { fly } from "svelte/transition";
+  import { X, AlertTriangle, Crosshair, Zap, Star, Activity, TrendingUp, Shield, BrainCircuit, Download } from "@lucide/svelte";
 
   function close() { selectedSiteId.set(null); }
 
@@ -52,196 +52,183 @@
   let hasShift = $derived($selectedSiteAssessment?.changePoints?.hasSignificantShift ?? false);
   let qualityReport = $derived($selectedSiteAssessment?.qualityReport ?? null);
   let pct = $derived((v: number) => (Math.exp(v) - 1) * 100);
+
+  let groupedAlerts = $derived(() => {
+    const groups: Record<string, typeof $selectedSiteAlerts> = { critical: [], warning: [], info: [] };
+    for (const a of $selectedSiteAlerts) {
+      groups[a.severity]?.push(a);
+    }
+    return groups;
+  });
 </script>
 
 {#if $selectedSite}
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
   <div
-    transition:fade={{ duration: 150 }}
-    class="fixed inset-0 z-200 cursor-pointer" style="background:var(--overlay)" onclick={close} role="presentation"
-  ></div>
-  <div class="fixed inset-0 z-201 flex items-center justify-center p-4 pointer-events-none">
-    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
-    <div
-      transition:scale={{ duration: 200, start: 0.95 }}
-      class="pointer-events-auto w-full max-w-[680px] max-h-[90vh] overflow-y-auto rounded-2xl border border-border-main bg-surface shadow-2xl p-6 panel" onclick={(e)=>e.stopPropagation()} role="document" style="border-top:2px solid var(--accent);box-shadow:var(--panel-shadow)">
-      <div class="flex items-start justify-between mb-6">
-        <div>
-          <div class="flex items-center gap-2.5 mb-1">
-            <h2 class="text-xl font-semibold" style="font-family:var(--font-display)">{$selectedSite.name}</h2>
-            <Badge variant={$selectedSite.status}>{$selectedSite.status}</Badge>
-          </div>
-          <span class="text-sm text-text-dim">{$selectedSite.region} &middot; {$selectedSite.type.replace("_"," ")}</span>
-        </div>
-        <div class="flex items-center gap-2">
-          <div class="flex items-center rounded-lg border border-border-main bg-elevated p-0.5" role="group" aria-label="Export site data">
-            <button onclick={() => exportSite("csv")} class="flex items-center gap-1 h-7 px-2 text-[11px] text-text-dim hover:text-text-main transition-colors" title="Export CSV"><Download size={12} /> CSV</button>
-            <button onclick={() => exportSite("json")} class="flex items-center gap-1 h-7 px-2 text-[11px] text-text-dim hover:text-text-main transition-colors" title="Export JSON"><Download size={12} /> JSON</button>
-          </div>
-          <button onclick={close} class="inline-flex items-center justify-center h-9 w-9 rounded-lg text-text-dim hover:text-text-main hover:bg-elevated border border-transparent hover:border-border-main transition-all duration-200" aria-label="Close"><X size={18} /></button>
-        </div>
+    transition:fly={{ x: 420, duration: 250 }}
+    class="absolute top-3 right-3 bottom-3 w-[420px] border border-border-main bg-surface overflow-y-auto z-20
+           max-[768px]:fixed max-[768px]:top-[68px] max-[768px]:right-3 max-[768px]:left-3 max-[768px]:bottom-3 max-[768px]:w-auto max-[768px]:z-30 max-[768px]:rounded-xl"
+    onclick={(e) => e.stopPropagation()}
+    role="document"
+    data-detail-panel
+  >
+    <div class="flex items-start justify-between px-5 pt-5 pb-2">
+      <div class="min-w-0">
+        <div class="flex items-center gap-2 mb-1">
+          <h2 class="text-base font-semibold truncate" style="font-family:var(--font-display)">{$selectedSite.name}</h2>
+          <Badge variant={$selectedSite.status}>{$selectedSite.status}</Badge>
+        </div>
+        <span class="text-xs text-text-dim">{$selectedSite.region} &middot; {$selectedSite.type.replace("_"," ")}</span>
       </div>
-      <div class="grid grid-cols-3 gap-4 mb-6">
-        <div class="rounded-xl border border-border-main bg-elevated p-4 text-center relative" style="border-top:2px solid var(--accent)">
-          <span class="block text-xs font-medium text-text-dim uppercase tracking-wider mb-1.5 flex items-center justify-center gap-1"><Crosshair size={13}/> Bortle</span>
-          <span class="block text-2xl font-bold font-mono text-text-main">{$selectedSite?.bortle ?? '—'}</span>
-          <span class="block text-xs text-text-faint mt-1">Class</span>
-        </div>
-        <div class="rounded-xl border border-border-main bg-elevated p-4 text-center relative" style="border-top:2px solid var(--accent)">
-          <span class="block text-xs font-medium text-text-dim uppercase tracking-wider mb-1.5 flex items-center justify-center gap-1"><Zap size={13}/> Radiance</span>
-          <span class="block text-2xl font-bold font-mono text-text-main">{latestRadiance?.toFixed(1) ?? '—'}</span>
-          <span class="block text-xs text-text-faint mt-1">nW/cm<sup>2</sup>/sr</span>
-        </div>
-        <div class="rounded-xl border border-border-main bg-elevated p-4 text-center relative" style="border-top:2px solid var(--accent)">
-          <span class="block text-xs font-medium text-text-dim uppercase tracking-wider mb-1.5 flex items-center justify-center gap-1"><Star size={13}/> Limiting</span>
-          <span class="block text-2xl font-bold font-mono text-text-main">{latestLimitingMag?.toFixed(1) ?? '—'}</span>
-          <span class="block text-xs text-text-faint mt-1">Limiting magnitude</span>
-        </div>
-        <div class="rounded-xl border border-border-main bg-elevated p-4 text-center">
-          <span class="block text-xs font-medium text-text-dim uppercase tracking-wider mb-1.5 flex items-center justify-center gap-1"><Activity size={13}/> VIIRS</span>
-          <span class="block text-2xl font-bold font-mono text-text-dim">+{$selectedSite.viirsTrend}%</span>
-          <span class="block text-xs text-text-faint mt-1">per year (satellite)</span>
-        </div>
-        <div class="rounded-xl border border-accent/30 bg-accent-glow p-4 text-center relative" style="border-top:2px solid var(--accent)">
-          <span class="block text-xs font-medium uppercase tracking-wider mb-1.5 flex items-center justify-center gap-1 text-accent"><TrendingUp size={13}/> Corrected</span>
-          <span class="block text-2xl font-bold font-mono text-accent">+{$selectedSite.correctedTrend}%</span>
-          <span class="block text-xs text-text-faint mt-1">per year (corrected)</span>
-        </div>
-        <div class="rounded-xl border border-border-main bg-elevated p-4 text-center">
-          <span class="block text-xs font-medium text-text-dim uppercase tracking-wider mb-1.5 flex items-center justify-center gap-1"><Shield size={13}/> Confidence</span>
-          <span class="block text-2xl font-bold font-mono" style={confStyle($selectedSite.confidence)}>{$selectedSite.confidence}</span>
-          <span class="block text-xs text-text-faint mt-1">Data quality</span>
-        </div>
-        <div class="rounded-xl border border-border-main bg-elevated p-4 text-center" style="border-top:2px solid var(--accent)">
-          <span class="block text-xs font-medium text-text-dim uppercase tracking-wider mb-1.5 flex items-center justify-center gap-1"><TrendingUp size={13}/> Calibration</span>
-          <span class="block text-lg font-bold font-mono text-text-main">{$selectedSite.calibrationSource ?? 'population'}</span>
-          <span class="block text-xs text-text-faint mt-1">{$selectedSite.calibrationSource === 'site-specific' ? 'Local fit' : 'Literature priors'}</span>
-        </div>
-        <div class="rounded-xl border border-border-main bg-elevated p-4 text-center">
-          <span class="block text-xs font-medium text-text-dim uppercase tracking-wider mb-1.5 flex items-center justify-center gap-1"><Activity size={13}/> Spectral</span>
-          <span class="block text-lg font-bold font-mono text-text-main">{Math.round(($selectedSite.spectralDivergence ?? 0) * 100)}%</span>
-          <span class="block text-xs text-text-faint mt-1">LED contribution</span>
-        </div>
-        <div class="rounded-xl border border-border-main bg-elevated p-4 text-center">
-          <span class="block text-xs font-medium text-text-dim uppercase tracking-wider mb-1.5 flex items-center justify-center gap-1"><Crosshair size={13}/> Uncertainty</span>
-          <span class="block text-lg font-bold font-mono text-text-main">&plusmn;{($selectedSite.correctedTrendStd ?? 0).toFixed(1)}%</span>
-          <span class="block text-xs text-text-faint mt-1">Corrected trend &plusmn;</span>
-        </div>
+      <div class="flex items-center gap-1.5 shrink-0 ml-2">
+        <button onclick={() => exportSite("csv")} class="h-6 px-2 text-[10px] text-text-dim hover:text-text-main transition-colors border border-border-main" title="Export CSV">CSV</button>
+        <button onclick={() => exportSite("json")} class="h-6 px-2 text-[10px] text-text-dim hover:text-text-main transition-colors border border-border-main" title="Export JSON">JSON</button>
+        <button onclick={close} class="h-6 w-6 flex items-center justify-center text-text-dim hover:text-text-main transition-colors" aria-label="Close"><X size={14} /></button>
       </div>
-      {#if $selectedSite.crossingYear}
-        <div class="flex items-center gap-3 rounded-xl px-4 py-3 mb-5 text-sm font-medium border-l-4" style="background:rgba(251,191,36,0.08);border-color:var(--watch);color:var(--watch)">
-          <AlertTriangle size={16} class="shrink-0" />
-          <span>At the current rate, this site is projected to cross into the next Bortle class by <strong class="font-mono">{$selectedSite.crossingYear}</strong>.</span>
-        </div>
-      {/if}
-      {#if $selectedSiteAlerts.length > 0}
-        <div class="mb-5 space-y-2">
-          {#each $selectedSiteAlerts as alert (alert.id)}
-            <div class="flex items-start gap-3 rounded-xl px-4 py-3 text-sm border-l-4" style="background:{alert.severity === 'critical' ? 'rgba(239,68,68,0.08)' : alert.severity === 'warning' ? 'rgba(251,191,36,0.08)' : 'rgba(99,102,241,0.08)'};border-color:{alert.severity === 'critical' ? 'var(--critical)' : alert.severity === 'warning' ? 'var(--watch)' : 'var(--accent)'};color:{alert.severity === 'critical' ? 'var(--critical)' : alert.severity === 'warning' ? 'var(--watch)' : 'var(--text-main)'}">
-              <Bell size={14} class="shrink-0 mt-0.5" />
-              <span>{alert.message}</span>
+    </div>
+
+    <div class="grid grid-cols-2 gap-2 px-5 mb-4">
+      <div class="border border-border-main bg-elevated p-2.5 text-center">
+        <span class="block text-[10px] font-medium text-text-dim uppercase tracking-wider mb-0.5">Bortle</span>
+        <span class="block text-lg font-bold font-mono text-text-main">{$selectedSite?.bortle ?? "—"}</span>
+        <span class="block text-[9px] text-text-faint">Class</span>
+      </div>
+      <div class="border border-border-main bg-elevated p-2.5 text-center">
+        <span class="block text-[10px] font-medium text-text-dim uppercase tracking-wider mb-0.5">Radiance</span>
+        <span class="block text-lg font-bold font-mono text-text-main">{latestRadiance?.toFixed(1) ?? "—"}</span>
+        <span class="block text-[9px] text-text-faint">nW/cm²/sr</span>
+      </div>
+      <div class="border border-border-main bg-elevated p-2.5 text-center">
+        <span class="block text-[10px] font-medium text-text-dim uppercase tracking-wider mb-0.5">VIIRS Trend</span>
+        <span class="block text-lg font-bold font-mono text-text-dim">+{$selectedSite.viirsTrend}%</span>
+        <span class="block text-[9px] text-text-faint">per year</span>
+      </div>
+      <div class="border border-accent/20 bg-accent-glow p-2.5 text-center">
+        <span class="block text-[10px] font-medium text-accent uppercase tracking-wider mb-0.5">Corrected</span>
+        <span class="block text-lg font-bold font-mono text-accent">+{$selectedSite.correctedTrend}%</span>
+        <span class="block text-[9px] text-text-faint">&plusmn;{($selectedSite.correctedTrendStd ?? 0).toFixed(1)}%</span>
+      </div>
+      <div class="border border-border-main bg-elevated p-2.5 text-center">
+        <span class="block text-[10px] font-medium text-text-dim uppercase tracking-wider mb-0.5">Calibration</span>
+        <span class="block text-sm font-bold font-mono text-text-main">{$selectedSite.calibrationSource ?? "population"}</span>
+        <span class="block text-[9px] text-text-faint">{$selectedSite.calibrationSource === "site-specific" ? "Local fit" : "Literature priors"}</span>
+      </div>
+      <div class="border border-border-main bg-elevated p-2.5 text-center">
+        <span class="block text-[10px] font-medium text-text-dim uppercase tracking-wider mb-0.5">Spectral</span>
+        <span class="block text-sm font-bold font-mono" style="color:{(($selectedSite.spectralDivergence ?? 0) * 100) > 30 ? 'var(--page-led)' : 'var(--text-dim)'}">{Math.round(($selectedSite.spectralDivergence ?? 0) * 100)}%</span>
+        <span class="block text-[9px] text-text-faint">LED contribution</span>
+      </div>
+    </div>
+
+    {#if $selectedSite.crossingYear}
+      <div class="mx-5 mb-4 flex items-center gap-2 px-3 py-2 text-xs border-l-2" style="background:rgba(251,191,36,0.06);border-color:var(--watch);color:var(--watch)">
+        <AlertTriangle size={13} class="shrink-0" />
+        <span>Projected to cross into the next Bortle class by <strong class="font-mono">{$selectedSite.crossingYear}</strong></span>
+      </div>
+    {/if}
+
+    {#if $selectedSiteAlerts.length > 0}
+      <div class="mx-5 mb-4">
+        <div class="text-[11px] font-medium text-text-dim uppercase tracking-wider mb-2">Alerts</div>
+        {#each Object.entries(groupedAlerts) as [severity, alerts]}
+          {#if alerts.length > 0}
+            <div class="mb-2">
+              <div class="flex items-center gap-1.5 mb-1">
+                <span class="w-2 h-2 shrink-0" style="background:{severity === 'critical' ? 'var(--critical)' : severity === 'warning' ? 'var(--watch)' : 'var(--accent)'}"></span>
+                <span class="text-[10px] font-medium uppercase tracking-wider" style="color:{severity === 'critical' ? 'var(--critical)' : severity === 'warning' ? 'var(--watch)' : 'var(--accent)'}">{severity}</span>
+                <span class="text-[10px] text-text-faint font-mono">{alerts.length}</span>
+              </div>
+              {#each alerts as alert}
+                <div class="border-l-2 pl-2.5 py-1 text-xs" style="border-color:{severity === 'critical' ? 'rgba(239,68,68,0.2)' : severity === 'warning' ? 'rgba(251,191,36,0.2)' : 'rgba(99,102,241,0.2)'}">
+                  <span class="text-text-main">{alert.message}</span>
+                  <span class="text-text-faint font-mono ml-2 text-[10px]">{new Date(alert.triggeredAt).toLocaleDateString()}</span>
+                </div>
+              {/each}
             </div>
-          {/each}
-        </div>
+          {/if}
+        {/each}
+      </div>
+    {/if}
+
+    <div class="mx-5 mb-4">
+      <div class="flex items-center gap-2 mb-2">
+        <span class="text-xs font-medium" style="font-family:var(--font-display)">Brightness Trend</span>
+        <div class="h-px flex-1 glow-line"></div>
+      </div>
+      <p class="text-[10px] text-text-dim mb-2">The vertical gap between the two trend lines represents blue-light pollution the satellite sensor does not register.</p>
+      {#if $selectedSiteData}
+        <TrendChart site={$selectedSiteData} theme={$theme} changePoints={changePoints}/>
       {/if}
-      <div>
-        <div class="flex items-center gap-3 mb-3">
-          <span class="text-sm font-medium" style="font-family:var(--font-display)">Brightness Trend Over Time</span>
-          <div class="h-px flex-1 glow-line"></div>
-        </div>
-        <p class="text-xs text-text-dim mb-4">The vertical gap between the two trend lines represents the blue-light pollution that the satellite sensor does not register.</p>
-        {#if $selectedSiteData}
-          <TrendChart site={$selectedSiteData} theme={$theme} changePoints={changePoints}/>
-        {/if}
+    </div>
+
+    {#if $assessing}
+      <div class="mx-5 mb-4 flex items-center gap-2 text-xs text-text-faint">
+        <BrainCircuit size={14} class="animate-pulse" /> Running Bayesian assessment…
       </div>
-      {#if $assessing}
-        <div class="flex items-center gap-2 mt-4 mb-1 text-xs text-text-faint">
-          <BrainCircuit size={14} class="animate-pulse" /> Running Bayesian assessment…
+    {:else if $selectedSiteAssessment}
+      <div class="mx-5 mb-4">
+        <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center gap-1.5 text-xs font-medium" style="font-family:var(--font-display)"><BrainCircuit size={13} /> Bayesian Assessment</div>
+          <button onclick={() => assessSite($selectedSiteData!.id)} class="text-[10px] text-text-dim hover:text-text-main transition-colors">Refresh</button>
+        </div>
+        <div class="grid grid-cols-3 gap-1.5 mb-3">
+          <div class="border border-border-main bg-elevated p-2 text-center">
+            <span class="block text-[9px] font-medium text-text-faint uppercase tracking-wider">Trend</span>
+            <span class="block text-sm font-bold font-mono" style="color:{trendColor($selectedSiteAssessment.posteriorMean)}">{$selectedSiteAssessment.posteriorMean > 0 ? '+' : ''}{$selectedSiteAssessment.posteriorMean}%</span>
+            <span class="block text-[9px] text-text-faint">&plusmn;{$selectedSiteAssessment.posteriorStd}</span>
+          </div>
+          <div class="border border-border-main bg-elevated p-2 text-center">
+            <span class="block text-[9px] font-medium text-text-faint uppercase tracking-wider">95% CI</span>
+            <span class="block text-sm font-bold font-mono text-text-main">[{$selectedSiteAssessment.posteriorInterval95Lower}, {$selectedSiteAssessment.posteriorInterval95Upper}]</span>
+            <span class="block text-[9px] text-text-faint">%/yr</span>
+          </div>
+          <div class="border border-border-main bg-elevated p-2 text-center">
+            <span class="block text-[9px] font-medium text-text-faint uppercase tracking-wider">Agreement</span>
+            <span class="block text-sm font-bold font-mono" style="color:{scoreColor($selectedSiteAssessment.agreementScore)}">{$selectedSiteAssessment.agreementScore}</span>
+            <span class="block text-[9px] text-text-faint">Sat. vs ground</span>
+          </div>
+          <div class="border border-border-main bg-elevated p-2 text-center">
+            <span class="block text-[9px] font-medium text-text-faint uppercase tracking-wider">Quality</span>
+            <span class="block text-sm font-bold font-mono" style="color:{scoreColor($selectedSiteAssessment.dataQualityScore)}">{$selectedSiteAssessment.dataQualityScore}</span>
+            <span class="block text-[9px] text-text-faint">0 to 1</span>
+          </div>
+          <div class="border border-border-main bg-elevated p-2 text-center">
+            <span class="block text-[9px] font-medium text-text-faint uppercase tracking-wider">Ground</span>
+            <span class="block text-sm font-bold font-mono text-text-main">{$selectedSiteAssessment.groundReportCount}</span>
+            <span class="block text-[9px] text-text-faint">reports</span>
+          </div>
+          <div class="border border-border-main bg-elevated p-2 text-center">
+            <span class="block text-[9px] font-medium text-text-faint uppercase tracking-wider">VIIRS</span>
+            <span class="block text-sm font-bold font-mono text-text-main">{$selectedSiteAssessment.viirsYearCount}</span>
+            <span class="block text-[9px] text-text-faint">years</span>
+          </div>
         </div>
-      {:else if $selectedSiteAssessment}
-        <div class="border-t border-border-main mt-5 pt-5">
-          <div class="flex items-center justify-between mb-3">
-            <div class="flex items-center gap-2 text-sm font-medium" style="font-family:var(--font-display)"><BrainCircuit size={15} /> Bayesian Assessment</div>
-            <button onclick={() => assessSite($selectedSiteData!.id)} class="text-[11px] text-text-dim hover:text-text-main transition-colors">Refresh</button>
+        {#if $selectedSiteAssessment.anomalyFlags.length > 0}
+          <div class="flex flex-wrap gap-1.5 mb-3">
+            {#each $selectedSiteAssessment.anomalyFlags as flag}
+              <span class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium" style="background:rgba(251,191,36,0.08);color:var(--watch);border:1px solid rgba(251,191,36,0.15)"><AlertTriangle size={10} />{flagLabel(flag)}</span>
+            {/each}
           </div>
-          <div class="grid grid-cols-3 gap-3 mb-3">
-            <div class="rounded-lg border border-border-main bg-elevated p-3 text-center">
-              <span class="block text-[10px] font-medium text-text-faint uppercase tracking-wider mb-1">Estimated Trend</span>
-              <span class="block text-lg font-bold font-mono" style="color:{trendColor($selectedSiteAssessment.posteriorMean)}">{$selectedSiteAssessment.posteriorMean > 0 ? '+' : ''}{$selectedSiteAssessment.posteriorMean}%</span>
-              <span class="block text-[10px] text-text-faint">&plusmn;{$selectedSiteAssessment.posteriorStd}%/yr</span>
-            </div>
-            <div class="rounded-lg border border-border-main bg-elevated p-3 text-center">
-              <span class="block text-[10px] font-medium text-text-faint uppercase tracking-wider mb-1">95% Credible Interval</span>
-              <span class="block text-lg font-bold font-mono text-text-main">[{$selectedSiteAssessment.posteriorInterval95Lower}, {$selectedSiteAssessment.posteriorInterval95Upper}]</span>
-              <span class="block text-[10px] text-text-faint">%/yr</span>
-            </div>
-            <div class="rounded-lg border border-border-main bg-elevated p-3 text-center">
-              <span class="block text-[10px] font-medium text-text-faint uppercase tracking-wider mb-1">Agreement</span>
-              <span class="block text-lg font-bold font-mono" style="color:{scoreColor($selectedSiteAssessment.agreementScore)}">{$selectedSiteAssessment.agreementScore}</span>
-              <span class="block text-[10px] text-text-faint">Satellite vs. ground</span>
-            </div>
-            <div class="rounded-lg border border-border-main bg-elevated p-3 text-center">
-              <span class="block text-[10px] font-medium text-text-faint uppercase tracking-wider mb-1">Data Quality</span>
-              <span class="block text-lg font-bold font-mono" style="color:{scoreColor($selectedSiteAssessment.dataQualityScore)}">{$selectedSiteAssessment.dataQualityScore}</span>
-              <span class="block text-[10px] text-text-faint">0 to 1 scale</span>
-            </div>
-            <div class="rounded-lg border border-border-main bg-elevated p-3 text-center">
-              <span class="block text-[10px] font-medium text-text-faint uppercase tracking-wider mb-1">Ground Reports</span>
-              <span class="block text-lg font-bold font-mono text-text-main">{$selectedSiteAssessment.groundReportCount}</span>
-              <span class="block text-[10px] text-text-faint">reports</span>
-            </div>
-            <div class="rounded-lg border border-border-main bg-elevated p-3 text-center">
-              <span class="block text-[10px] font-medium text-text-faint uppercase tracking-wider mb-1">VIIRS Years</span>
-              <span class="block text-lg font-bold font-mono text-text-main">{$selectedSiteAssessment.viirsYearCount}</span>
-              <span class="block text-[10px] text-text-faint">years</span>
-            </div>
+        {/if}
+        {#if qualityReport && qualityReport.totalCount > 0}
+          <div class="border border-border-main bg-elevated p-2 text-[10px] text-text-dim">
+            {qualityReport.filteredCount}/{qualityReport.totalCount} ground reports passed quality filtering
+            {#if qualityReport.rejectionReason}
+              <span class="text-text-faint italic block mt-0.5">{qualityReport.rejectionReason}</span>
+            {/if}
           </div>
-          {#if $selectedSiteAssessment.anomalyFlags.length > 0}
-            <div class="flex flex-wrap gap-2 mt-2">
-              {#each $selectedSiteAssessment.anomalyFlags as flag}
-                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-medium" style="background:rgba(251,191,36,0.1);color:var(--watch);border:1px solid rgba(251,191,36,0.2)"><AlertTriangle size={11} />{flagLabel(flag)}</span>
-              {/each}
-            </div>
-          {/if}
-          {#if qualityReport && qualityReport.totalCount > 0}
-            <div class="mt-3 rounded-lg border border-border-main bg-elevated p-3">
-              <span class="block text-[10px] font-medium text-text-faint uppercase tracking-wider mb-1.5">Data Quality Filtering</span>
-              <div class="flex items-center gap-4 text-xs">
-                <span>{qualityReport.filteredCount}/{qualityReport.totalCount} reports passed</span>
-                <span class="font-mono" style="color:{qualityReport.avgQualityScore > 0.6 ? 'var(--stable)' : qualityReport.avgQualityScore > 0.3 ? 'var(--watch)' : 'var(--critical)'}">avg {qualityReport.avgQualityScore}</span>
-                {#if qualityReport.rejectionReason}
-                  <span class="text-text-dim italic">{qualityReport.rejectionReason}</span>
-                {/if}
-              </div>
-            </div>
-          {/if}
-          {#if hasShift && segments.length > 1}
-            <div class="mt-3 rounded-lg border border-border-main bg-elevated p-3">
-              <span class="block text-[10px] font-medium text-text-faint uppercase tracking-wider mb-1.5">Trend Shift Detected</span>
-              <div class="space-y-1.5 text-xs">
-                {#each segments as seg}
-                  <div class="flex items-center gap-3">
-                    <span class="text-text-dim">{seg.startYear}&ndash;{seg.endYear}</span>
-                    <span class="font-mono" style="color:{pct(seg.slope) > 5 ? 'var(--critical)' : pct(seg.slope) > 2 ? 'var(--watch)' : 'var(--stable)'}">{pct(seg.slope) > 0 ? '+' : ''}{pct(seg.slope).toFixed(1)}%/yr</span>
-                    <span class="text-text-faint">&plusmn;{pct(seg.slopeStd).toFixed(1)}</span>
-                  </div>
-                {/each}
+        {/if}
+        {#if hasShift && segments.length > 1}
+          <div class="border border-border-main bg-elevated p-2 mt-1.5">
+            <span class="block text-[9px] font-medium text-text-faint uppercase tracking-wider mb-1">Trend Shift Detected</span>
+            {#each segments as seg}
+              <div class="flex items-center gap-2 text-[10px]">
+                <span class="text-text-dim font-mono">{seg.startYear}&ndash;{seg.endYear}</span>
+                <span class="font-mono" style="color:{pct(seg.slope) > 5 ? 'var(--critical)' : pct(seg.slope) > 2 ? 'var(--watch)' : 'var(--stable)'}">{pct(seg.slope) > 0 ? '+' : ''}{pct(seg.slope).toFixed(1)}%/yr</span>
               </div>
-            </div>
-          {/if}
-          {#if $selectedSiteAssessment.narrative}
-            <div class="mt-4 rounded-xl border border-border-main bg-elevated p-4">
-              <span class="block text-[10px] font-medium text-text-faint uppercase tracking-wider mb-2">LLM Assessment</span>
-              <p class="text-sm text-text-main leading-relaxed">{$selectedSiteAssessment.narrative}</p>
-            </div>
-          {:else}
-            <div class="mt-4 flex items-center justify-between rounded-xl border border-border-main bg-elevated p-3">
-              <span class="text-xs text-text-dim">No narrative assessment available. Append <code class="font-mono text-text-faint">?llm=true</code> to generate one.</span>
-              <button onclick={() => assessSite($selectedSiteData!.id, true)} class="text-[11px] px-3 py-1 rounded-md bg-accent-glow text-accent hover:bg-accent/20 transition-colors">Generate</button>
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/if}
   </div>
 {/if}
diff --git a/src/routes/(app)/alerts/+page.svelte b/src/routes/(app)/alerts/+page.svelte
index 1168a0c..84aa5bd 100644
--- a/src/routes/(app)/alerts/+page.svelte
+++ b/src/routes/(app)/alerts/+page.svelte
@@ -1,6 +1,50 @@
 <script lang="ts">
   import { allAlerts } from "$lib/stores/sites";
-  import { Bell, AlertTriangle } from "@lucide/svelte";
+  import { Bell } from "@lucide/svelte";
+  import { goto } from "$app/navigation";
+
+  let criticalAlerts = $derived($allAlerts.filter(a => a.severity === "critical"));
+  let warningAlerts = $derived($allAlerts.filter(a => a.severity === "warning"));
+  let infoAlerts = $derived($allAlerts.filter(a => a.severity === "info"));
+
+  function groupBySite(alerts: typeof $allAlerts): Map<string, typeof $allAlerts> {
+    const groups = new Map<string, typeof $allAlerts>();
+    for (const a of alerts) {
+      const match = a.message.match(/for (.+?)(?:\.|$)/);
+      const site = match?.[1] ?? "Unknown";
+      if (!groups.has(site)) groups.set(site, []);
+      groups.get(site)!.push(a);
+    }
+    return groups;
+  }
+
+  function openSite(siteName: string) {
+    const allSites = document.querySelectorAll('[role="option"]');
+    for (const el of allSites) {
+      if (el.textContent?.includes(siteName)) {
+        (el as HTMLElement).click();
+        return;
+      }
+    }
+    goto("/dashboard");
+  }
+
+  let expandedSections = $state<Set<string>>(new Set(["critical"]));
+
+  function toggleSection(severity: string) {
+    if (expandedSections.has(severity)) {
+      expandedSections.delete(severity);
+    } else {
+      expandedSections.add(severity);
+    }
+    expandedSections = new Set(expandedSections);
+  }
+
+  function severityColor(s: string): string {
+    if (s === "critical") return "var(--critical)";
+    if (s === "warning") return "var(--watch)";
+    return "var(--accent)";
+  }
 </script>
 
 <svelte:head><title>Alerts — Duskmeter</title></svelte:head>
@@ -8,7 +52,7 @@
 <div class="p-6">
   <div class="mb-8">
     <h1 class="text-2xl font-semibold" style="font-family:var(--font-sans)">Alerts</h1>
-    <p class="text-sm text-text-dim mt-1.5">{$allAlerts.length} active alert{$allAlerts.length === 1 ? '' : 's'}</p>
+    <p class="text-sm text-text-dim mt-1.5">Monitoring {$allAlerts.length} active alert{$allAlerts.length === 1 ? '' : 's'} across all sites</p>
   </div>
 
   {#if $allAlerts.length === 0}
@@ -17,22 +61,66 @@
       <span class="text-sm text-text-faint">No active alerts</span>
     </div>
   {:else}
-    <div class="space-y-2">
-      {#each $allAlerts as alert (alert.id)}
-        <div class="flex items-start gap-4 border p-4 bg-surface transition-colors duration-150" style="border-color:{alert.severity === 'critical' ? 'rgba(239,68,68,0.2)' : alert.severity === 'warning' ? 'rgba(251,191,36,0.2)' : 'rgba(99,102,241,0.2)'};background:{alert.severity === 'critical' ? 'rgba(239,68,68,0.03)' : alert.severity === 'warning' ? 'rgba(251,191,36,0.03)' : 'rgba(99,102,241,0.03)'}">
-          <div class="shrink-0 mt-0.5">
-            <AlertTriangle size={16} style="color:{alert.severity === 'critical' ? 'var(--critical)' : alert.severity === 'warning' ? 'var(--watch)' : 'var(--accent)'}" />
-          </div>
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 mb-1">
-              <span class="inline-flex items-center font-mono text-[10px] font-medium px-2 py-0.5 uppercase tracking-[0.06em] border" style="background:{alert.severity === 'critical' ? 'rgba(239,68,68,0.1)' : alert.severity === 'warning' ? 'rgba(251,191,36,0.1)' : 'rgba(99,102,241,0.1)'};color:{alert.severity === 'critical' ? 'var(--critical)' : alert.severity === 'warning' ? 'var(--watch)' : 'var(--accent)'}">{alert.severity}</span>
-              <span class="text-[11px] text-text-faint">{alert.alertType.replace(/_/g, ' ')}</span>
-              <span class="text-[10px] text-text-faint font-mono ml-auto">{new Date(alert.triggeredAt).toLocaleDateString()}</span>
+    <div class="grid grid-cols-4 gap-3 mb-8">
+      <div class="border border-border-main bg-surface p-4" style="border-top:2px solid var(--critical)">
+        <span class="block text-2xl font-bold font-mono" style="color:var(--critical)">{criticalAlerts.length}</span>
+        <span class="block text-[11px] text-text-faint uppercase tracking-[0.06em] mt-1">Critical</span>
+      </div>
+      <div class="border border-border-main bg-surface p-4" style="border-top:2px solid var(--watch)">
+        <span class="block text-2xl font-bold font-mono" style="color:var(--watch)">{warningAlerts.length}</span>
+        <span class="block text-[11px] text-text-faint uppercase tracking-[0.06em] mt-1">Warning</span>
+      </div>
+      <div class="border border-border-main bg-surface p-4" style="border-top:2px solid var(--accent)">
+        <span class="block text-2xl font-bold font-mono" style="color:var(--accent)">{infoAlerts.length}</span>
+        <span class="block text-[11px] text-text-faint uppercase tracking-[0.06em] mt-1">Information</span>
+      </div>
+      <div class="border border-border-main bg-surface p-4">
+        <span class="block text-2xl font-bold font-mono text-text-main">{new Set($allAlerts.map(a => a.message.match(/for (.+?)(?:\.|$)/)?.[1] ?? "")).size}</span>
+        <span class="block text-[11px] text-text-faint uppercase tracking-[0.06em] mt-1">Sites Affected</span>
+      </div>
+    </div>
+
+    {#each [{ sev: "critical", alerts: criticalAlerts }, { sev: "warning", alerts: warningAlerts }, { sev: "info", alerts: infoAlerts }] as group}
+      {#if group.alerts.length > 0}
+        {@const severity = group.sev}
+        {@const alerts = group.alerts}
+        {@const isExpanded = expandedSections.has(severity)}
+        {@const siteGroups = groupBySite(alerts)}
+
+        <div class="mb-4">
+          <button
+            onclick={() => toggleSection(severity)}
+            class="w-full flex items-center gap-2 text-left px-3 py-2.5 border border-border-main bg-surface hover:bg-elevated transition-colors duration-150"
+          >
+            <span class="w-2.5 h-2.5 shrink-0" style="background:{severityColor(severity)}"></span>
+            <span class="text-sm font-medium uppercase tracking-wider" style="color:{severityColor(severity)}">{severity}</span>
+            <span class="font-mono text-xs" style="color:{severityColor(severity)}">{alerts.length}</span>
+            <span class="text-text-faint ml-auto text-xs">{isExpanded ? '▲' : '▼'}</span>
+          </button>
+
+          {#if isExpanded}
+            <div class="border-l border-r border-b border-border-main">
+              {#each [...siteGroups.entries()] as [siteName, siteAlerts]}
+                <div class="border-b border-border-main/50 last:border-b-0">
+                  <button
+                    onclick={() => openSite(siteName)}
+                    class="w-full text-left px-4 py-2 text-xs font-medium text-text-dim hover:text-text-main hover:bg-elevated/50 transition-colors duration-100"
+                  >
+                    {siteName}
+                    <span class="font-mono text-text-faint ml-1">({siteAlerts.length})</span>
+                  </button>
+                  {#each siteAlerts as alert}
+                    <div class="pl-6 pr-4 pb-2 text-xs text-text-dim">
+                      <span class="text-text-main">{alert.message}</span>
+                      <span class="text-text-faint font-mono ml-2">{new Date(alert.triggeredAt).toLocaleDateString()}</span>
+                    </div>
+                  {/each}
+                </div>
+              {/each}
             </div>
-            <p class="text-sm text-text-main">{alert.message}</p>
-          </div>
+          {/if}
         </div>
-      {/each}
-    </div>
+      {/if}
+    {/each}
   {/if}
 </div>
diff --git a/src/routes/(app)/dashboard/+page.svelte b/src/routes/(app)/dashboard/+page.svelte
index 294c343..0d2a7df 100644
--- a/src/routes/(app)/dashboard/+page.svelte
+++ b/src/routes/(app)/dashboard/+page.svelte
@@ -3,7 +3,27 @@
   import FilterBar from "$lib/components/FilterBar.svelte";
   import SiteList from "$lib/components/SiteList.svelte";
   import SiteDetail from "$lib/components/SiteDetail.svelte";
+  import { selectedSiteId } from "$lib/stores/sites";
   import { MousePointer2, Download } from "@lucide/svelte";
+
+  let mouseDown = $state<{ x: number; y: number } | null>(null);
+
+  function onMouseDown(e: MouseEvent) {
+    mouseDown = { x: e.clientX, y: e.clientY };
+  }
+
+  function onMapClick(e: MouseEvent) {
+    if (mouseDown) {
+      const dx = Math.abs(e.clientX - mouseDown.x);
+      const dy = Math.abs(e.clientY - mouseDown.y);
+      mouseDown = null;
+      if (dx > 5 || dy > 5) return;
+    }
+    const target = e.target as HTMLElement;
+    if (target.closest("[data-detail-panel]")) return;
+    if (target.closest(".leaflet-marker-icon, .leaflet-popup, .leaflet-control")) return;
+    selectedSiteId.set(null);
+  }
 </script>
 <div class="flex h-[calc(100vh-56px)] overflow-hidden">
   <aside class="w-[340px] min-w-[300px] flex flex-col border-r border-border-main bg-surface">
@@ -13,6 +33,8 @@
       <a href="/api/export?format=csv" class="flex items-center gap-1 text-[11px] text-text-dim hover:text-accent transition-colors no-underline hover:no-underline" title="Export all sites"><Download size={12} /> Export</a>
     </div>
   </aside>
-  <div class="flex-1 relative"><MapView /></div>
+  <div class="flex-1 relative" onmousedown={onMouseDown} onclick={onMapClick} onkeydown={(e) => e.key === 'Escape' && selectedSiteId.set(null)}>
+    <MapView />
+    <SiteDetail />
+  </div>
 </div>
-<SiteDetail />