2026-10-05 03:53:35 -04:00
6 changed files with 890 additions and 45 deletions
@@ -1,6 +1,6 @@
 "use client";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import {
  FeatureGroup,
@@ -25,13 +25,16 @@ import { useAircraftTrail } from "@/lib/useAircraftTrail";
 import { useVessels } from "@/lib/useVessels";
 import { use511 } from "@/lib/use511";
 import { useMapCameras } from "@/lib/useCameras";
-import type { Camera, CameraCredit, CameraProviderFeed, CamerasResponse, Ny511Event, Ny511FeedStatus } from "@/lib/types";
+import type {
  Camera, CameraCredit, CameraProviderFeed, CamerasResponse, Ny511Event, Ny511FeedStatus, WeatherAlert, WeatherAlertsResponse, WeatherGeometry,
 } from "@/lib/types";
 import { useMapWeatherAlerts, useRadarMeta, type Polled, type RadarMeta } from "@/lib/useWeather";
 import { CameraFeed } from "@/components/CameraFeed";
 import { SourceCredit, fetchedLabel } from "@/components/SourceCredit";
 import {
  BASE_NAMES, DEFAULT_BASE, DEFAULT_LAYERS, LAYER_NAMES, NEAR_CAMERA_KM, baseKeyForName, groupCallsByIncident,
  MAY_BE_MERGED_KM, PATH_GAP_DASH_MIN, incidentPoints, layerKeyForName, normaliseLayers, pathStops, roundViewport,
-  viewshedWedge, worstFirst,
+  viewshedWedge, worstFirst, RADAR_LOOP_OFFSETS_MIN, RADAR_STALE_MIN, n0qColor, radarTileUrl, wxStyle, wxTime, WX_KIND_DASH,
  type BaseKey, type LayerKey, type MapViewport,
 } from "@/lib/liveWall";
 import { OutageLayer, outageGlyphSvg } from "@/components/map/OutageLayer";
@@ -326,27 +329,232 @@ function VesselLayer() {
  );
 }
-// ── Weather radar ────────────────────────────────────────────────────────────
+// ── Weather radar (IEM n0q; server-26#237) ───────────────────────────────────
 // IEM tiles are static once loaded, so refresh them in place with a
 // cache-buster. Never remount the layer (e.g. via `key`) to refresh it: a
 // remounted child of an unchecked LayersControl.Overlay is re-registered with
 // the control but not re-added to the map, which switched radar off every 5 min.
-const RADAR_URL = "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0r-900913/{z}/{x}/{y}.png";
+// The layers live in a FeatureGroup that never remounts; the loop frames are
 // that group's children, so adding/removing them is ordinary group membership.
 // The buster is the composite's valid time when known (so tiles, badge and
 // incident sample move together), else a 5-min clock.
 const RADAR_REFRESH_MS = 5 * 60 * 1000;
 const RADAR_OPACITY = 0.65;
 const RADAR_ATTRIBUTION = 'Radar &copy; <a href="https://mesonet.agron.iastate.edu/">IEM/NWS</a>';
 const LOOP_FRAME_MS = 600;
 const LOOP_HOLD_FRAMES = 3;   // the newest frame is held this many ticks before the loop restarts
 const RADAR_LEGEND_DBZ = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75];
 const RADAR_LEGEND_TICKS = [5, 40, 75];   // evenly spaced over RADAR_LEGEND_DBZ, so justify-between places them right
-function RadarLayer() {
+/**
-  const ref = useRef<L.TileLayer>(null);
+ * The loop's current frame, kept OUTSIDE MapView's state: it ticks every
 * LOOP_FRAME_MS, and a MapView re-render rebuilds every marker icon on the map
 * (setIcon on each), so only the radar frames and the badge subscribe to it.
 */
 function createLoopClock() {
  let frame = 0;
  let id: ReturnType<typeof setInterval> | undefined;
  const subs = new Set<() => void>();
  const set = (f: number) => { if (f !== frame) { frame = f; subs.forEach((s) => s()); } };
  return {
    subscribe: (cb: () => void) => { subs.add(cb); return () => { subs.delete(cb); }; },
    get: () => frame,
    run(on: boolean) {
      clearInterval(id);
      id = undefined;
      set(0);
      if (!on) return;
      const last = RADAR_LOOP_OFFSETS_MIN.length - 1;
      const cycle = last + LOOP_HOLD_FRAMES;
      let tick = 0;
      id = setInterval(() => {
        if (document.hidden) return;
        tick = (tick + 1) % cycle;
        set(Math.min(tick, last));
      }, LOOP_FRAME_MS);
    },
  };
 }
 type LoopClock = ReturnType<typeof createLoopClock>;
 const useLoopFrame = (c: LoopClock) => useSyncExternalStore(c.subscribe, c.get, c.get);
 function radarBuster(valid: Date | null, clock: number): string {
  return `?_=${valid ? valid.getTime() : clock}`;
 }
 /**
 * One n0q tile layer. react-leaflet 4 applies a changed `url` with setUrl on
 * the same layer (no remount), which is exactly the in-place refresh above.
 */
 function RadarFrame({ offsetMin, buster, opacity }: { offsetMin: number; buster: string; opacity: number }) {
  return <TileLayer url={`${radarTileUrl(offsetMin)}${buster}`} attribution={RADAR_ATTRIBUTION} opacity={opacity} />;
 }
 /**
 * Current composite, plus — while `loop` is on — the 11 earlier 5-min frames.
 * All frames stay loaded; only the shown one is opaque, so the loop plays
 * without re-fetching tiles every cycle.
 */
 function RadarLayer({ valid, loop, loopClock }: { valid: Date | null; loop: boolean; loopClock: LoopClock }) {
  const frame = useLoopFrame(loopClock);
  const [clock, setClock] = useState(() => Math.floor(Date.now() / RADAR_REFRESH_MS));
  useEffect(() => {
-    const id = setInterval(() => ref.current?.setUrl(`${RADAR_URL}?_=${Date.now()}`), RADAR_REFRESH_MS);
+    if (valid) return;   // the valid time drives refreshes while it is known
    const id = setInterval(() => setClock(Math.floor(Date.now() / RADAR_REFRESH_MS)), 30_000);
    return () => clearInterval(id);
  }, [valid]);
  const buster = radarBuster(valid, clock);
  const last = RADAR_LOOP_OFFSETS_MIN.length - 1;
  return (
    <>
      {loop && RADAR_LOOP_OFFSETS_MIN.slice(0, last).map((off, i) => (
        <RadarFrame key={off} offsetMin={off} buster={buster} opacity={i === frame ? RADAR_OPACITY : 0} />
      ))}
      <RadarFrame offsetMin={0} buster={buster} opacity={!loop || frame >= last ? RADAR_OPACITY : 0} />
    </>
  );
 }
 function hhmmLocal(d: Date): string {
  return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
 }
 /** Radar valid-time badge + loop toggle: what time the map's radar shows, and whether that is stale. */
 function RadarBadge({ meta, loop, loopClock, onLoop }: {
  meta: RadarMeta; loop: boolean; loopClock: LoopClock; onLoop: (on: boolean) => void;
 }) {
  const frame = useLoopFrame(loopClock);
  const [, tick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => tick((t) => t + 1), 30_000);
    return () => clearInterval(id);
  }, []);
  const ageMin = meta.valid ? Math.max(0, Math.round((Date.now() - meta.valid.getTime()) / 60_000)) : null;
  const stale = ageMin == null ? meta.loaded : ageMin > RADAR_STALE_MIN;
  const last = RADAR_LOOP_OFFSETS_MIN.length - 1;
  const off = loop ? RADAR_LOOP_OFFSETS_MIN[Math.min(frame, last)] : 0;
  let text: string;
  if (!meta.loaded) text = "Radar: checking valid time…";
  else if (!meta.valid) text = `Radar: valid time unknown${meta.error ? " (IEM metadata unreachable)" : ""}`;
  else if (loop && off > 0) text = `Radar loop: ${hhmmLocal(new Date(meta.valid.getTime() - off * 60_000))} (−${off} min)`;
  else text = `Radar valid ${hhmmLocal(meta.valid)} · ${ageMin} min old`;
  return (
-    <TileLayer
+    <div className={`flex items-center gap-1.5 bg-surface/90 border rounded px-2 py-1 text-xs text-ink-2 pointer-events-auto ${stale ? "border-accent" : "border-line"}`}>
-      ref={ref}
+      {stale && <span className="bg-accent text-white rounded px-1 text-[9px] font-semibold tracking-wide"
-      url={RADAR_URL}
+        title={`The newest radar frame is more than ${RADAR_STALE_MIN} min old, or its time could not be read`}>STALE</span>}
-      attribution='Radar &copy; <a href="https://mesonet.agron.iastate.edu/">IEM/NWS</a>'
+      <span className="tabular-nums whitespace-nowrap">{text}</span>
-      opacity={0.65}
+      {meta.valid && meta.error && <span className="text-ink-muted whitespace-nowrap" title={meta.error}>· time not refreshing</span>}
-    />
+      <button type="button" onClick={() => onLoop(!loop)}
        title={loop ? "Stop the loop and show the newest frame" : "Play the last hour of radar in 5-min frames"}
        className="ml-1 px-1.5 rounded border border-line text-[10px] hover:bg-raised whitespace-nowrap">
        {loop ? "■ Stop loop" : "▶ 1 h loop"}
      </button>
    </div>
  );
 }
 // ── NWS weather warnings (server-26#237) ─────────────────────────────────────
 const NWS_CREDIT: CameraCredit = { attribution: "National Weather Service", attribution_url: "https://www.weather.gov/", disclaimer: null };
 /** GeoJSON (Multi)Polygon → Leaflet positions ([lon, lat] → [lat, lon]). */
 function wxPositions(g: WeatherGeometry): L.LatLngExpression[][] | L.LatLngExpression[][][] {
  const ring = (r: number[][]) => r.map((p) => [p[1], p[0]] as L.LatLngTuple);
  return g.type === "Polygon" ? g.coordinates.map(ring) : g.coordinates.map((poly) => poly.map(ring));
 }
 function WeatherAlertPopupBody({ a, fetchedAt }: { a: WeatherAlert; fetchedAt: number | null }) {
  const expires = wxTime(a.expires);
  const ends = wxTime(a.ends);
  const onset = wxTime(a.onset);
  return (
    <div className="space-y-1 text-xs">
      <div className="font-semibold text-sm">{a.event}</div>
      {/* Shown as NWS issued it — never summarised or rewritten. */}
      {a.headline && <div className="leading-snug">{a.headline}</div>}
      <div>
        {onset ? `From ${onset}` : ""}{onset && (expires || ends) ? " · " : ""}
        {ends ? `ends ${ends}` : ""}{ends && expires ? " · " : ""}{expires ? `expires ${expires}` : ""}
      </div>
      {a.area_desc && <div className="text-ink-muted leading-snug">{a.area_desc}</div>}
      {a.sender_name && <div className="text-ink-muted">Issued by {a.sender_name}</div>}
      {a.geometry_source === "zones" && (
        <div className="text-ink-muted leading-snug">
          Area drawn from the alert&apos;s forecast/county zones{a.zones_unresolved ? ` — ${a.zones_unresolved} zone${a.zones_unresolved !== 1 ? "s" : ""} could not be fetched, so the real area is larger` : ""}.
        </div>
      )}
      <SourceCredit credit={NWS_CREDIT} updated={fetchedLabel(fetchedAt) ? `fetched ${fetchedLabel(fetchedAt)}` : null} />
    </div>
  );
 }
 function WeatherWarningsLayer({ data }: { data: WeatherAlertsResponse | null }) {
  // Weakest first so warnings draw on top (and win the click where they overlap).
  const alerts = useMemo(() => {
    const rank = { statement: 0, advisory: 1, watch: 2, warning: 3 } as const;
    return (data?.alerts ?? []).slice().sort((a, b) => rank[wxStyle(a.event).kind] - rank[wxStyle(b.event).kind]);
  }, [data]);
  return (
    <>
      {alerts.map((a) => {
        const st = wxStyle(a.event);
        return (
          <Polygon key={a.id} positions={wxPositions(a.geometry)}
            pathOptions={{ color: st.color, weight: st.weight, dashArray: st.dashArray, fillColor: st.color, fillOpacity: st.kind === "warning" ? 0.16 : 0.07 }}>
            <Tooltip sticky>{a.event}{wxTime(a.expires) ? ` · until ${wxTime(a.expires)}` : ""}</Tooltip>
            <Popup minWidth={220} maxWidth={340}>
              <WeatherAlertPopupBody a={a} fetchedAt={data?.fetched_at ?? null} />
            </Popup>
          </Polygon>
        );
      })}
    </>
  );
 }
 /**
 * Always-present status for the Weather Warnings overlay: never a silently
 * empty layer. Feed problems use the 511 FeedProblem wording ("could not reach
 * server" / "feed error, showing data from N min ago"); zone-only alerts —
 * no shape to draw — are listed here, not dropped.
 */
 function WeatherWarningsStatus({ state }: { state: Polled<WeatherAlertsResponse> }) {
  const { data, error, loaded } = state;
  const zoneOnly = data?.zone_only ?? [];
  let msg: string;
  let problem = false;
  if (!loaded) msg = "Weather Warnings: loading…";
  else if (!data) { msg = "Weather Warnings: could not reach server"; problem = true; }
  else if (data.error) {
    problem = true;
    msg = data.fetched_at
      ? `Weather Warnings: NWS feed error, showing data from ${Math.round((Date.now() / 1000 - data.fetched_at) / 60)} min ago`
      : "Weather Warnings: NWS feed error, no data yet";
  } else {
    const n = data.alerts.length;
    msg = n ? `Weather Warnings: ${n} active in view` : "Weather Warnings: no active NWS alert with a mapped area in view";
  }
  if (data && error) msg += " · could not refresh";
  return (
    <div className={`bg-surface/90 border rounded px-2 py-1 text-xs text-ink-2 pointer-events-auto max-w-full ${problem ? "border-accent" : "border-line"}`}>
      <div>
        {msg}
        {data?.fetched_at && !data.error ? ` · NWS, fetched ${fetchedLabel(data.fetched_at)}` : ""}
      </div>
      {zoneOnly.length > 0 && (
        <details className="mt-0.5">
          <summary className="cursor-pointer select-none text-ink-muted">
            {zoneOnly.length} alert{zoneOnly.length !== 1 ? "s" : ""} in the served area with no mapped shape (zone-based)
          </summary>
          <ul className="mt-1 space-y-0.5 max-h-32 overflow-y-auto">
            {zoneOnly.map((a) => (
              <li key={a.id} className="leading-snug">
                <b>{a.event}</b>{a.area_desc ? ` · ${a.area_desc}` : ""}{wxTime(a.expires) ? ` · until ${wxTime(a.expires)}` : ""}
              </li>
            ))}
          </ul>
        </details>
      )}
    </div>
  );
 }
@@ -1353,6 +1561,10 @@ export default function MapView({
  const layerOn = (k: LayerKey) => startLayers.has(k);
  const [aircraftShown, setAircraftShown] = useState(() => startLayers.has("air"));
  const [outagesShown, setOutagesShown] = useState(false);
  const [radarShown, setRadarShown] = useState(() => startLayers.has("radar"));
  const [wxShown, setWxShown] = useState(() => startLayers.has("wx"));
  const [radarLoop, setRadarLoop] = useState(false);   // off by default (#237); not persisted
  const loopClock = useMemo(createLoopClock, []);
  // The altitude key only belongs in the legend while the opt-in Aircraft
  // overlay is actually on (server-26#185); same for the outage key (#184).
@@ -1361,10 +1573,14 @@ export default function MapView({
    const on = (e: L.LayersControlEvent) => {
      if (e.name === LAYER_NAMES.air) setAircraftShown(true);
      if (e.name === OVERLAY_OUTAGES) setOutagesShown(true);
      if (e.name === LAYER_NAMES.radar) setRadarShown(true);
      if (e.name === LAYER_NAMES.wx) setWxShown(true);
    };
    const off = (e: L.LayersControlEvent) => {
      if (e.name === LAYER_NAMES.air) setAircraftShown(false);
      if (e.name === OVERLAY_OUTAGES) setOutagesShown(false);
      if (e.name === LAYER_NAMES.radar) setRadarShown(false);
      if (e.name === LAYER_NAMES.wx) setWxShown(false);
    };
    mapInstance.on("overlayadd", on);
    mapInstance.on("overlayremove", off);
@@ -1379,6 +1595,15 @@ export default function MapView({
    return () => clearInterval(id);
  }, []);
  // ── Weather (server-26#237): fetched only while the overlay is on ─────────
  const radarMeta = useRadarMeta(radarShown);
  const wxAlerts = useMapWeatherAlerts(mapInstance, wxShown);
  const loopOn = radarShown && radarLoop;
  useEffect(() => {
    loopClock.run(loopOn);
    return () => loopClock.run(false);
  }, [loopClock, loopOn]);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const ago = useMemo(() => (lastUpdated ? timeAgo(lastUpdated) : null), [lastUpdated, agoClock]);
@@ -1588,9 +1813,18 @@ export default function MapView({
            </FeatureGroup>
          </LayersControl.Overlay>
-          {/* Overlay: Weather Radar — NEXRAD via Iowa Env Mesonet */}
+          {/* Overlay: Weather Radar — NEXRAD n0q via Iowa Env Mesonet (server-26#237) */}
          <LayersControl.Overlay checked={layerOn("radar")} name={LAYER_NAMES.radar}>
-            <RadarLayer />
+            <FeatureGroup>
              <RadarLayer valid={radarMeta.valid} loop={loopOn} loopClock={loopClock} />
            </FeatureGroup>
          </LayersControl.Overlay>
          {/* Overlay: NWS watches/warnings/advisories (server-26#237) */}
          <LayersControl.Overlay checked={layerOn("wx")} name={LAYER_NAMES.wx}>
            <FeatureGroup>
              <WeatherWarningsLayer data={wxAlerts.data} />
            </FeatureGroup>
          </LayersControl.Overlay>
        </LayersControl>
        </InitialOverlays.Provider>
@@ -1609,6 +1843,15 @@ export default function MapView({
        </div>
      )}
      {/* ── Weather status (server-26#237) — bottom centre, clear of the rail
          (left), the legend (right) and the 511/outage banners (bottom-left). */}
      {(radarShown || wxShown) && (
        <div className="absolute bottom-10 md:bottom-8 left-1/2 -translate-x-1/2 z-[1001] flex flex-col items-center gap-1 w-max max-w-[min(30rem,calc(100%-1.5rem))] pointer-events-none">
          {wxShown && <WeatherWarningsStatus state={wxAlerts} />}
          {radarShown && <RadarBadge meta={radarMeta} loop={radarLoop} loopClock={loopClock} onLoop={setRadarLoop} />}
        </div>
      )}
      {/* ── Map action buttons — top-left, below zoom controls ──────────────── */}
      <div className="absolute top-[4.5rem] left-3 z-[1002] flex flex-col gap-1">
        {mapInstance && allPositions.length > 0 && (
@@ -1706,6 +1949,33 @@ export default function MapView({
            </div>
          </div>
        )}
        {radarShown && (
          <div className="border-t border-line pt-1.5 space-y-1">
            <p className="text-ink-muted font-medium text-[10px] uppercase tracking-wide">Radar reflectivity (dBZ)</p>
            <div
              className="h-2 w-32 rounded-sm border border-line"
              style={{ background: `linear-gradient(to right, ${RADAR_LEGEND_DBZ.map((d, i) => `${n0qColor(d)} ${(i / (RADAR_LEGEND_DBZ.length - 1)) * 100}%`).join(", ")})` }}
            />
            <div className="flex justify-between w-32 text-[10px] text-ink-2 tabular-nums">
              {RADAR_LEGEND_TICKS.map((d) => <span key={d}>{d}</span>)}
            </div>
            <p className="text-[10px] text-ink-muted w-32 leading-snug">~20 light · 40 moderate · 50+ heavy rain / hail</p>
          </div>
        )}
        {wxShown && (
          <div className="border-t border-line pt-1.5 space-y-1">
            <p className="text-ink-muted font-medium text-[10px] uppercase tracking-wide">NWS alerts</p>
            {(["warning", "watch", "advisory"] as const).map((k) => (
              <div key={k} className="flex items-center gap-2">
                <span style={{ width: 16, display: "inline-flex", justifyContent: "center" }}>
                  <svg width="16" height="10" viewBox="0 0 16 10"><rect x="1" y="1" width="14" height="8" fill="none" stroke="var(--ink-2)" strokeWidth={k === "warning" ? 2 : 1.5} strokeDasharray={WX_KIND_DASH[k]} /></svg>
                </span>
                <span className="text-ink-2">{k === "warning" ? "Warning" : k === "watch" ? "Watch" : "Advisory / statement"}</span>
              </div>
            ))}
            <p className="text-[10px] text-ink-muted w-32 leading-snug">Fill colour = NWS hazard-map colour for the event</p>
          </div>
        )}
        {outagesShown && (
          <div className="border-t border-line pt-1.5 space-y-1">
            <p className="text-ink-muted font-medium text-[10px] uppercase tracking-wide">Power outages</p>
@@ -17,9 +17,12 @@ import { SourceCredit, fetchedLabel } from "@/components/SourceCredit";
 import { InlinePlayer } from "@/components/InlinePlayer";
 import { canPlayAudio, hasAudio, playIncident, stop as stopAudio, useAudio } from "@/lib/audioQueue";
 import {
-  CONTEXT_KM, MAY_BE_MERGED_KM, NEAR_CAMERA_KM, bboxAround, contextFor, pathStops, sampleRadarDbz, stopNumbers,
+  CONTEXT_KM, MAY_BE_MERGED_KM, NEAR_CAMERA_KM, PRECIP_ECHO_DBZ, alertsAt, bboxAround, compass, contextFor, pathStops,
  sampleRadarDbz, stopNumbers, wantsWind, wxStyle, wxTime,
  type LatLon, type NearCamera,
 } from "@/lib/liveWall";
 import { useWeatherAlertsIn, useWind, type Polled } from "@/lib/useWeather";
 import type { WeatherAlertsResponse } from "@/lib/types";
 import { useOutagesIn, type OutagesState } from "@/lib/useOutages";
 import { OUTAGE_POINT_KM, countyName, isUtilityHazard, matchOutages, staleCountiesAt } from "@/lib/outageMatch";
@@ -181,6 +184,126 @@ function OutageFeedRow({ incidents, nodes }: { incidents: IncidentRecord[]; node
  );
 }
 // ── Weather (server-26#237) ──────────────────────────────────────────────────
 const NWS_CREDIT: CameraCredit = { attribution: "National Weather Service", attribution_url: "https://www.weather.gov/", disclaimer: null };
 const METAR_CREDIT: CameraCredit = { attribution: "NOAA Aviation Weather Center (METAR)", attribution_url: "https://aviationweather.gov/", disclaimer: null };
 /**
 * Why the NWS answer is unusable, in one line (same wording as the map's
 * banner) — or null when it is fine to read.
 */
 function nwsProblem(state: Polled<WeatherAlertsResponse>): string | null {
  const { data, error, loaded } = state;
  if (!loaded) return "checking…";
  if (!data) return `could not reach server${error ? ` (${error})` : ""}`;
  if (data.error && !data.fetched_at) return "NWS feed error, no data yet";
  return null;
 }
 function nwsFreshness(state: Polled<WeatherAlertsResponse>): string {
  const d = state.data!;
  return `fetched ${fetchedLabel(d.fetched_at) ?? "—"}${d.error ? " · NWS feed error, showing the last good data" : ""}${state.error ? " · could not refresh" : ""}`;
 }
 /** Incident panel "NWS" lines: the warning polygons the incident's head point sits inside. */
 function WeatherWarningContext({ head }: { head: LatLon | null }) {
  const box = useMemo(() => (head ? bboxAround([head], 1) : null), [head]);
  const state = useWeatherAlertsIn(box);
  const inside = useMemo(() => (head && state.data ? alertsAt(head, state.data.alerts) : []), [head, state.data]);
  const tag = <span className="font-mono text-[10px] text-ink-muted mr-1.5">NWS</span>;
  if (!head) return <li>{tag}—</li>;
  const problem = nwsProblem(state);
  if (problem) return <li>{tag}{problem}</li>;
  const zoneOnly = state.data!.zone_only.length;
  return (
    <li>
      {tag}
      {inside.length ? (
        <span className="inline-flex flex-wrap gap-1 align-middle">
          {inside.map((a) => {
            const st = wxStyle(a.event);
            return (
              <span key={a.id} title={a.headline ?? a.event}
                className="inline-flex items-center gap-1 text-[10px] font-semibold px-1.5 py-0.5 rounded bg-raised text-ink"
                style={{ borderLeft: `3px ${st.dashArray ? "dashed" : "solid"} ${st.color}` }}>
                inside {a.event}{wxTime(a.expires) ? ` · until ${wxTime(a.expires)}` : ""}
              </span>
            );
          })}
        </span>
      ) : (
        <>not inside any active NWS alert area</>
      )}
      {zoneOnly > 0 && <span className="text-ink-muted"> · {zoneOnly} zone-based alert{zoneOnly !== 1 ? "s" : ""} in the served area can&apos;t be placed (Weather Warnings layer lists them)</span>}
      <SourceCredit credit={NWS_CREDIT} updated={nwsFreshness(state)} />
    </li>
  );
 }
 /** Arrow pointing where the wind blows TO (METAR gives where it comes FROM). */
 function WindArrow({ fromDeg }: { fromDeg: number }) {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" className="inline-block align-[-2px] mr-1" aria-hidden>
      <g transform={`rotate(${(fromDeg + 180) % 360} 7 7)`}>
        <line x1="7" y1="12" x2="7" y2="2.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        <polyline points="3.8,5.6 7,2.2 10.2,5.6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      </g>
    </svg>
  );
 }
 /** Incident panel "WIND" line for fire/hazmat incidents: nearest METAR station. */
 function WindContext({ head }: { head: LatLon | null }) {
  const state = useWind(head);
  const tag = <span className="font-mono text-[10px] text-ink-muted mr-1.5">WIND</span>;
  if (!head) return <li>{tag}— (no geocoded location)</li>;
  if (!state.loaded) return <li>{tag}checking…</li>;
  const d = state.data;
  if (!d) return <li>{tag}could not reach server{state.error ? ` (${state.error})` : ""}</li>;
  if (!d.available || !d.wind) return <li>{tag}{d.reason ?? "no wind report"}</li>;
  const w = d.wind;
  const calm = w.wind_kt === 0;
  const dir = calm ? "calm" : w.variable || w.wind_dir_deg == null ? "variable" : `from ${compass(w.wind_dir_deg)} (${Math.round(w.wind_dir_deg)}°)`;
  const obs = w.obs_time ? new Date(w.obs_time) : null;
  const obsLabel = obs && !isNaN(obs.getTime()) ? obs.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) : null;
  return (
    <li>
      {tag}
      {!calm && !w.variable && w.wind_dir_deg != null && <WindArrow fromDeg={w.wind_dir_deg} />}
      <b>{calm ? "Calm" : `${Math.round(w.wind_kt)} kt`}</b>
      {w.gust_kt != null && !calm ? <b> G {Math.round(w.gust_kt)} kt</b> : null}
      {calm ? "" : ` ${dir}`}
      {" · "}{w.station}{w.station_name ? ` (${w.station_name})` : ""}, {w.distance_km.toFixed(1)} km away
      {obsLabel ? ` · observed ${obsLabel}` : ""}
      {w.stale && <span className="ml-1 bg-accent text-white rounded px-1 text-[9px] font-semibold" title="This station's latest report is over 2 h old">STALE</span>}
      <SourceCredit credit={METAR_CREDIT}
        updated={`fetched ${fetchedLabel(d.fetched_at) ?? "—"}${d.error ? " · feed error, showing the last good report" : ""}${state.error ? " · could not refresh" : ""}`} />
    </li>
  );
 }
 /** Region Feeds "NWS" row: active alerts over the wall's region, with fetch time or the error. */
 function WeatherFeedRow({ incidents, nodes }: { incidents: IncidentRecord[]; nodes: NodeRecord[] }) {
  const pts = useMemo(() => {
    const inc = incidents.filter((i) => i.location_coords).map((i) => [i.location_coords!.lat, i.location_coords!.lng] as LatLon);
    return inc.length ? inc : nodes.map((n) => [n.lat, n.lon] as LatLon);
  }, [incidents, nodes]);
  const box = useMemo(() => bboxAround(pts, 10), [pts]);
  const state = useWeatherAlertsIn(box);
  const tag = <span className="font-mono text-[10px] text-ink-muted mr-1.5">NWS</span>;
  if (!box) return <li>{tag}no region to check (no nodes or geocoded incidents)</li>;
  const problem = nwsProblem(state);
  if (problem) return <li>{tag}{problem}</li>;
  const d = state.data!;
  const warnings = d.alerts.filter((a) => wxStyle(a.event).kind === "warning").length;
  return (
    <li>{tag}{d.alerts.length
      ? `${d.alerts.length} active alert${d.alerts.length !== 1 ? "s" : ""} in region${warnings ? ` (${warnings} warning${warnings !== 1 ? "s" : ""})` : ""}`
      : "no active alert areas in region"}
      {d.zone_only.length ? ` · ${d.zone_only.length} zone-based in served area` : ""} · {nwsFreshness(state)} · Weather Warnings layer (map menu)</li>
  );
 }
 // ── Level 1: region ──────────────────────────────────────────────────────────
 export function RegionPanel({
  incidents, calls, onAirCount, nodes, wallCameras, feeds, servingCount, aircraftCount, vesselCount,
@@ -244,7 +367,8 @@ export function RegionPanel({
            <li key={p.id}><span className="font-mono text-[10px] text-ink-muted mr-1.5">CAM</span>{p.name}: {p.total_in_bbox} in region{p.error ? " · feed error" : ""}{p.fetched_at ? ` · list ${fetchedLabel(p.fetched_at)}` : ""}</li>
          ))}
          <OutageFeedRow incidents={incidents} nodes={nodes} />
-          <li><span className="font-mono text-[10px] text-ink-muted mr-1.5">NEXRAD</span>Weather Radar layer (map menu); sampled per incident</li>
+          <WeatherFeedRow incidents={incidents} nodes={nodes} />
          <li><span className="font-mono text-[10px] text-ink-muted mr-1.5">NEXRAD</span>Weather Radar layer (map menu, IEM n0q, with valid time); sampled per incident</li>
        </ul>
      </div>
      <div className={SEC}>
@@ -299,7 +423,8 @@ export function IncidentPanel({
 }) {
  const color = sevColor(inc.severity);
  const ctx = useMemo(() => contextFor(points, aircraft, vessels, events), [points, aircraft, vessels, events]);
-  const radar = useRadarDbz(points.at(-1) ?? null);
+  const head = points.at(-1) ?? null;
  const radar = useRadarDbz(head);
  // Stop numbers come from the same pathStops() the map draws from, so the
  // spine numbers exactly what the map numbers (server-26#236): only movement
  // incidents get numbers, and a ghosted (impossible-speed) stop gets none.
@@ -394,8 +519,11 @@ export function IncidentPanel({
          <li>
            <span className="font-mono text-[10px] text-ink-muted mr-1.5">NEXRAD</span>
            {!points.length ? "—" : !radar.done ? "sampling…" : radar.dbz == null ? "radar sample unavailable"
-              : radar.dbz === 0 ? "no precipitation echo within ~5 km" : `up to ~${radar.dbz} dBZ within ~5 km (approx., from the radar tile)`}
+              : radar.dbz < PRECIP_ECHO_DBZ ? "no precipitation echo within ~5 km"
              : `up to ~${Math.round(radar.dbz)} dBZ within ~5 km (approx., read from the radar layer's n0q tile)`}
          </li>
          <WeatherWarningContext head={head} />
          {wantsWind(inc) && <WindContext head={head} />}
          <OutageContext inc={inc} points={points} />
        </ul>
        {!ctx.aircraft.length && !ctx.vessels.length && !ctx.road.length && (
@@ -1,6 +1,7 @@
 import { auth } from "@/lib/firebase";
 import type {
  AreaContext, CameraProviderAdmin, CamerasResponse, Ny511Response, OutageProviderAdmin, OutagesResponse, TalkgroupPending,
  WeatherAlertsResponse, WindResponse,
 } from "@/lib/types";
 import type { DiscordAdminOverview, DiscordStream, RadioBot, RadioBotAddResult } from "@/lib/discord";
@@ -532,6 +533,16 @@ export const c2api = {
      body: JSON.stringify({ enabled, acknowledge_licence: acknowledgeLicence }),
    }),
  // Weather context (server-26#237): active NWS alerts intersecting a bbox (bbox
  // optional — omitted, the whole served area), and nearest-METAR wind. Both are
  // cached server-side; an upstream failure comes back as `error`, not an HTTP error.
  getWeatherAlerts: (bbox?: { south: number; west: number; north: number; east: number } | null) =>
    request<WeatherAlertsResponse>(`/weather/alerts${bbox ? `?${new URLSearchParams({
      south: String(bbox.south), west: String(bbox.west), north: String(bbox.north), east: String(bbox.east),
    })}` : ""}`),
  getWind: (lat: number, lon: number) =>
    request<WindResponse>(`/weather/wind?${new URLSearchParams({ lat: String(lat), lon: String(lon) })}`),
  // Public waitlist — no auth, see routers/waitlist.py
  joinWaitlist: (body: { email: string; org_name?: string; note?: string }) =>
    request<{ ok: boolean }>("/waitlist", { method: "POST", body: JSON.stringify(body) }),
@@ -3,7 +3,9 @@
 * gods-eye-view-notes.md top 5). No React here, so the logic is testable in
 * isolation and shared by MapView and LiveView.
 */
-import type { AircraftTrack, CallRecord, Camera, IncidentRecord, Ny511Event, VesselTrack } from "@/lib/types";
+import type {
  AircraftTrack, CallRecord, Camera, IncidentRecord, Ny511Event, VesselTrack, WeatherAlert, WeatherGeometry,
 } from "@/lib/types";
 import { severityRank } from "@/lib/severity";
 export type LatLon = [number, number];
@@ -261,7 +263,7 @@ export function bboxAround(points: LatLon[], padKm: number) {
 // ── Deep links / saved views ────────────────────────────────────────────────
 // #inc=<id>&cam=<cameraId>&tour&tourMs=30000&kiosk
-//   &layers=nodes,inc,radar&z=11&lat=41.12345&lon=-73.98765&base=light
+//   &layers=nodes,inc,radar,wx&z=11&lat=41.12345&lon=-73.98765&base=light
 //   &f.<name>=<value>
 // Every key is optional; unknown keys are ignored, so an old link (inc/cam/tour
 // only) still parses and a newer one degrades on an older build. Pure string
@@ -278,6 +280,7 @@ export const LAYER_NAMES = {
  vs: "Camera Viewsheds (approx.)",
  traffic: "Traffic Events",
  radar: "Weather Radar",
  wx: "Weather Warnings",
 } as const;
 export type LayerKey = keyof typeof LAYER_NAMES;
 export const LAYER_KEYS = Object.keys(LAYER_NAMES) as LayerKey[];
@@ -407,28 +410,103 @@ export function onAirIncidentIds(incidents: IncidentRecord[], activeCalls: CallR
  );
 }
-// ── NEXRAD sample near an incident ───────────────────────────────────────────
+// ── NEXRAD (IEM n0q composite) ───────────────────────────────────────────────
-// Reads the same IEM n0r composite tile the Weather Radar layer draws (IEM
+// The Weather Radar layer, its valid-time badge, its legend and the per-incident
-// sends ACAO: *), and maps pixel colours back to the NWS reflectivity scale.
+// sample all use ONE product: IEM's n0q (base reflectivity, 0.5 dBZ steps,
-// Approximate by construction — label it so.
+// -32..95 dBZ). Verified first-hand 2026-10-05:
-const N0R_PALETTE: [number, number, number, number][] = [
+//   tiles   https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png
-  [5, 4, 233, 231], [10, 1, 159, 244], [15, 3, 0, 244], [20, 2, 253, 2], [25, 1, 197, 1], [30, 0, 142, 0],
+//           (RGBA PNG, ACAO: *), and nexrad-n0q-900913-m05m … -m55m for the
-  [35, 253, 248, 2], [40, 229, 188, 0], [45, 253, 149, 0], [50, 253, 0, 0], [55, 212, 0, 0], [60, 188, 0, 0],
+//           5-minute frames of the last hour (-m60m is a 404);
-  [65, 248, 0, 253], [70, 152, 84, 198], [75, 253, 253, 253],
+//   valid   https://mesonet.agron.iastate.edu/data/gis/images/4326/USCOMP/n0q_0.json
-];
+//           → {"meta": {"valid": "2026-10-05T07:35:00Z", "product": "N0Q", …}}
-const RADAR_TILE = "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0r-900913";
+//           (n0q_<k>.json is k × 5 min earlier; ACAO: *);
 //   ramp    https://mesonet.agron.iastate.edu/GIS/rasters.php?rid=2 — 255 colours,
 //           index i (1..255) = -32 + (i-1)/2 dBZ. Every opaque pixel of five
 //           sampled live tiles matched this table exactly.
 export const RADAR_TILE_BASE = "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913";
 export const RADAR_META_URL = "https://mesonet.agron.iastate.edu/data/gis/images/4326/USCOMP/n0q_0.json";
 /** A frame older than this is flagged STALE on the map (#237 acceptance). */
 export const RADAR_STALE_MIN = 15;
 /** Loop frames, oldest first, as minutes before the current composite (IEM keeps -m05m … -m55m). */
 export const RADAR_LOOP_OFFSETS_MIN = [55, 50, 45, 40, 35, 30, 25, 20, 15, 10, 5, 0] as const;
 /** Light rain starts around here; weaker returns are clear-air / clutter. */
 export const PRECIP_ECHO_DBZ = 15;
-function pixelDbz(r: number, g: number, b: number): number {
+/** Tile URL for the composite `offsetMin` minutes before the current one (0 = current). */
-  let best = 0;
+export function radarTileUrl(offsetMin = 0): string {
-  let bestD = Infinity;
+  const layer = offsetMin > 0 ? `${RADAR_TILE_BASE}-m${String(offsetMin).padStart(2, "0")}m` : RADAR_TILE_BASE;
-  for (const [dbz, pr, pg, pb] of N0R_PALETTE) {
+  return `${layer}/{z}/{x}/{y}.png`;
    const d = (r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2;
    if (d < bestD) { bestD = d; best = dbz; }
  }
  return bestD < 60 * 60 ? best : 0;
 }
-/** Max reflectivity (dBZ) within ~radiusKm of a point, or null if it can't be read. */
+/** The composite's valid time from IEM's n0q metadata JSON, or null if the shape isn't the verified one. */
 export function parseRadarMeta(body: unknown): Date | null {
  const valid = (body as { meta?: { valid?: unknown } } | null)?.meta?.valid;
  if (typeof valid !== "string") return null;
  const d = new Date(valid);
  return isNaN(d.getTime()) ? null : d;
 }
 /** IEM's published n0q colour table, 6 hex digits per entry, index 1..255 (index 0 = missing). */
 const N0Q_RAMP_HEX =
  "85718f85728f86738d87758b87768b887789897987897a878a7b858b7d848b7e848c7f828d81808d82808e837e8f847c" +
  "8f857c90877b918879918979928b77938d759691539894579b975b9d9a60a09d64a3a068a5a36da8a671aaa976adac7a" +
  "b0af7eb2b283b7b88cbabb90bdbe94bfc199c2c49dc4c7a2c7caa6cacdaaccd0afd2d4b4cfd2b4c9ccb4c6c9b4c3c7b4" +
  "c0c4b4bdc1b4b9beb4b6bbb4b3b9b4b0b6b4adb3b4aab0b4a4abb4a0a8b49da5b49aa2b497a0b4949db4919ab4949bb5" +
  "9098b48c95b38892b2808cb07c89af7886ae7483ac7080ab6c7daa6779a96376a85f73a75b70a6576da44f67a24b64a1" +
  "4761a0435e9f415b9e4361a24568a6486faa4a76ae4d7db24f84b6518bbb5699c3599fc75ba6cb5eadcf60b4d462bbd8" +
  "65c2dc67c9e06ad0e46fd6e868d6d759d6b352d6a24bd69043d67e3cd66d35d65b11d51811d11710cd1710c81610c416" +
  "0fbc150fb7140eb3140eaf130eab130da6120da2120d9e110c99110c95100c91100b880f0b840e0a800e0a7c0d0a770d" +
  "09730c096f0c096b0b08660b08620a095e09327308467d085b88076f9207849d0698a806adb205c1bd05d6c704ead204" +
  "ffe200ffd800ffd300ffce00ffc900ffc400ffc000ffbb00ffb600ffb100ffac00ffa700ffa200ff9900ff9400ff8f00" +
  "ff8a00ff8500ff8000ff0000f80000f10000ea0000e30000d50000cd0000c60000bf0000b80000b10000aa0000a30000" +
  "9b00009400008d00007f0000780000710000fffffffff5ffffeaffffdfffffd4ffffc9ffffbeffffb3ffff9dffff92ff" +
  "ff75fffc6bfdf960faf656f7f34bf4f040f1ed36efea2bece720e9e10be3b200ffac00fca400f79b00f49300ef8800ea" +
  "8300e87900e27200dd6900db05ecf005ebf005eaf005dde005dce005dbe005cdd005ccd004bdc004bcc004bbc004aeb0" +
  "04adb0049ea0049da0049ca0038e90038d90038c90037e80037d80036f70036e70036d70025f60025e60024f50024e50" +
  "024d50023f40023e40023d40013030012f30012020011f20011e203a67b53a66b53a65b53a64b53a63b53a62b5";
 function n0qIndex(dbz: number): number {
  return Math.min(255, Math.max(1, Math.round((dbz + 32) * 2) + 1));
 }
 /** "#rrggbb" the radar layer draws for a reflectivity. */
 export function n0qColor(dbz: number): string {
  const i = n0qIndex(dbz) - 1;
  return `#${N0Q_RAMP_HEX.slice(i * 6, i * 6 + 6)}`;
 }
 let rgbToDbz: Map<number, number> | null = null;
 function n0qLookup(): Map<number, number> {
  if (!rgbToDbz) {
    rgbToDbz = new Map();
    for (let i = 0; i < 255; i++) rgbToDbz.set(parseInt(N0Q_RAMP_HEX.slice(i * 6, i * 6 + 6), 16), -32 + i / 2);
  }
  return rgbToDbz;
 }
 /** dBZ for a radar-tile pixel. Exact table hit (tiles are lossless); else nearest colour within a small distance; else null. */
 export function pixelDbz(r: number, g: number, b: number): number | null {
  const lut = n0qLookup();
  const exact = lut.get((r << 16) | (g << 8) | b);
  if (exact != null) return exact;
  let best: number | null = null;
  let bestD = 12 * 12;
  lut.forEach((dbz, rgb) => {
    const d = (r - ((rgb >> 16) & 255)) ** 2 + (g - ((rgb >> 8) & 255)) ** 2 + (b - (rgb & 255)) ** 2;
    if (d < bestD) { bestD = d; best = dbz; }
  });
  return best;
 }
 /** No opaque radar pixel near the point (the tile is transparent there). */
 export const NO_ECHO_DBZ = -Infinity;
 /**
 * Max reflectivity (dBZ) within ~radiusKm of a point, read from the same n0q
 * tile the Weather Radar layer draws (cache-busted on the same 5-min clock).
 * Approximate by construction — label it so. NO_ECHO_DBZ when nothing is
 * drawn there; null when the tile can't be read.
 */
 export async function sampleRadarDbz(lat: number, lon: number, radiusKm = 5): Promise<number | null> {
  const z = 9;
  const n = 2 ** z;
@@ -439,7 +517,7 @@ export async function sampleRadarDbz(lat: number, lon: number, radiusKm = 5): Pr
  const ty = Math.floor(yf);
  const img = new Image();
  img.crossOrigin = "anonymous";
-  img.src = `${RADAR_TILE}/${z}/${tx}/${ty}.png?_=${Math.floor(Date.now() / 300000)}`;
+  img.src = `${RADAR_TILE_BASE}/${z}/${tx}/${ty}.png?_=${Math.floor(Date.now() / 300000)}`;
  try {
    await img.decode();
  } catch {
@@ -466,10 +544,143 @@ export async function sampleRadarDbz(lat: number, lon: number, radiusKm = 5): Pr
  } catch {
    return null;   // tainted canvas — CORS changed upstream
  }
-  let max = 0;
+  let max = NO_ECHO_DBZ;
  for (let i = 0; i < data.length; i += 4) {
-    if (data[i + 3] < 32) continue;
+    if (data[i + 3] < 128) continue;   // transparent: nothing drawn
-    max = Math.max(max, pixelDbz(data[i], data[i + 1], data[i + 2]));
+    const dbz = pixelDbz(data[i], data[i + 1], data[i + 2]);
    if (dbz != null && dbz > max) max = dbz;
  }
  return max;
 }
 // ── NWS warnings (server-26#237) ─────────────────────────────────────────────
 /** Ray-cast point-in-ring; `ring` is GeoJSON [lon, lat] pairs. */
 function inRing(lat: number, lon: number, ring: number[][]): boolean {
  let inside = false;
  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
    const [xi, yi] = ring[i];
    const [xj, yj] = ring[j];
    if ((yi > lat) !== (yj > lat) && lon < ((xj - xi) * (lat - yi)) / (yj - yi) + xi) inside = !inside;
  }
  return inside;
 }
 /**
 * True when [lat, lon] is inside a GeoJSON Polygon / MultiPolygon (holes
 * respected: inside the outer ring and outside every hole).
 */
 export function pointInPolygon(point: LatLon, geom: WeatherGeometry | null | undefined): boolean {
  if (!geom) return false;
  const polys = geom.type === "Polygon" ? [geom.coordinates] : geom.type === "MultiPolygon" ? geom.coordinates : [];
  const [lat, lon] = point;
  return polys.some((rings) =>
    rings.length > 0 && inRing(lat, lon, rings[0]) && !rings.slice(1).some((hole) => inRing(lat, lon, hole)));
 }
 /** Active alerts whose drawn area contains the point, worst-looking (Warning) first. */
 export function alertsAt(point: LatLon, alerts: WeatherAlert[]): WeatherAlert[] {
  return alerts
    .filter((a) => pointInPolygon(point, a.geometry))
    .sort((a, b) => wxKindRank(a.event) - wxKindRank(b.event));
 }
 export type WxKind = "warning" | "watch" | "advisory" | "statement";
 export function wxKind(event: string): WxKind {
  const e = event.toLowerCase();
  if (e.includes("warning") || e.includes("emergency")) return "warning";
  if (e.includes("watch")) return "watch";
  if (e.includes("advisory") || e.includes("alert")) return "advisory";
  return "statement";
 }
 function wxKindRank(event: string): number {
  return ["warning", "watch", "advisory", "statement"].indexOf(wxKind(event));
 }
 /**
 * NWS hazard-map colours (weather.gov/help-map) for the events this region
 * sees most. Unlisted events fall back by kind. Colour is never the only cue:
 * the outline dash says the kind (warning solid, watch dashed, advisory and
 * statement dotted), and the legend explains it.
 */
 const NWS_EVENT_COLORS: Record<string, string> = {
  "tornado warning": "#ff0000",
  "severe thunderstorm warning": "#ffa500",
  "flash flood warning": "#8b0000",
  "flood warning": "#00ff00",
  "flood advisory": "#00ff7f",
  "flood watch": "#2e8b57",
  "flash flood watch": "#2e8b57",
  "tornado watch": "#ffff00",
  "severe thunderstorm watch": "#db7093",
  "special marine warning": "#ffa500",
  "winter storm warning": "#ff69b4",
  "winter storm watch": "#4682b4",
  "winter weather advisory": "#7b68ee",
  "blizzard warning": "#ff4500",
  "ice storm warning": "#8b008b",
  "lake effect snow warning": "#008b8b",
  "high wind warning": "#daa520",
  "high wind watch": "#b8860b",
  "wind advisory": "#d2b48c",
  "heat advisory": "#ff7f50",
  "excessive heat warning": "#c71585",
  "extreme heat warning": "#c71585",
  "excessive heat watch": "#800000",
  "extreme heat watch": "#800000",
  "coastal flood warning": "#228b22",
  "coastal flood watch": "#66cdaa",
  "coastal flood advisory": "#7cfc00",
  "dense fog advisory": "#708090",
  "special weather statement": "#ffe4b5",
  "red flag warning": "#ff1493",
  "fire weather watch": "#ffdead",
  "freeze warning": "#483d8b",
  "frost advisory": "#6495ed",
  "small craft advisory": "#d8bfd8",
  "gale warning": "#dda0dd",
  "storm warning": "#9400d3",
  "hurricane warning": "#dc143c",
  "tropical storm warning": "#b22222",
  "air quality alert": "#808080",
 };
 const WX_KIND_FALLBACK: Record<WxKind, string> = {
  warning: "#dc2626", watch: "#eab308", advisory: "#60a5fa", statement: "#a3a3a3",
 };
 export const WX_KIND_DASH: Record<WxKind, string | undefined> = {
  warning: undefined, watch: "8 5", advisory: "2 4", statement: "2 4",
 };
 export function wxStyle(event: string): { color: string; kind: WxKind; dashArray: string | undefined; weight: number } {
  const kind = wxKind(event);
  return {
    color: NWS_EVENT_COLORS[event.toLowerCase()] ?? WX_KIND_FALLBACK[kind],
    kind,
    dashArray: WX_KIND_DASH[kind],
    weight: kind === "warning" ? 2.5 : kind === "watch" ? 2 : 1.5,
  };
 }
 /** Local "Oct 5, 2:30 PM" for an NWS ISO timestamp (they carry their own offset). */
 export function wxTime(iso: string | null | undefined): string | null {
  if (!iso) return null;
  const d = new Date(iso);
  return isNaN(d.getTime()) ? null : d.toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
 }
 // ── Wind at the incident (server-26#237) ─────────────────────────────────────
 // Fire and hazmat are where wind direction changes the call (smoke / plume
 // drift, approach side). There is no hazmat incident type, so tags decide.
 const WIND_TAG_RE = /(^|-)(hazmat|haz-mat|gas-leak|natural-gas|chemical|spill|smoke|fumes|odor|odour|plume|brush|wildfire|propane|ammonia|chlorine|carbon-monoxide)(-|$)/;
 export function wantsWind(inc: Pick<IncidentRecord, "type" | "tags">): boolean {
  if (inc.type === "fire") return true;
  return (inc.tags ?? []).some((t) => WIND_TAG_RE.test(t.toLowerCase()));
 }
 /** 16-point compass name for the direction the wind blows FROM. */
 export function compass(deg: number): string {
  const pts = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"];
  return pts[Math.round((((deg % 360) + 360) % 360) / 22.5) % 16];
 }
@@ -319,6 +319,77 @@ export interface Ny511Response {
  credit?: CameraCredit;
 }
 // ── Weather context (server-26#237) — GET /weather/alerts, GET /weather/wind ──
 /** GeoJSON (Multi)Polygon, [lon, lat] order. */
 export type WeatherGeometry =
  | { type: "Polygon"; coordinates: number[][][] }
  | { type: "MultiPolygon"; coordinates: number[][][][] };
 /** One active NWS alert as c2-core normalises it (app/internal/weather.py normalize_alert). */
 export interface WeatherAlertBase {
  id: string;
  event: string;
  severity: string | null;
  urgency: string | null;
  headline: string | null;
  onset: string | null;
  expires: string | null;
  ends: string | null;
  /** An NWS office ("NWS Upton NY"), never a person. */
  sender_name: string | null;
  area_desc: string | null;
  zones: string[];
 }
 export interface WeatherAlert extends WeatherAlertBase {
  geometry: WeatherGeometry;
  /** "alert": NWS drew the polygon; "zones": assembled from the affected forecast/county zones. */
  geometry_source: "alert" | "zones";
  /** [south, west, north, east]. */
  bbox: [number, number, number, number] | null;
  /** >0: some zones could not be fetched, so the drawn area is smaller than the real one. */
  zones_unresolved?: number;
 }
 export interface WeatherAlertsResponse {
  alerts: WeatherAlert[];
  /** Alerts with no resolvable shape — listed, never dropped, never bbox-filtered. */
  zone_only: WeatherAlertBase[];
  /** Epoch s of the server's last SUCCESSFUL NWS fetch; null = never. */
  fetched_at: number | null;
  /** Set when the latest refresh failed; `alerts` is then the last good data. */
  error: string | null;
  credit: string;
 }
 export interface WindObs {
  station: string;
  station_name: string;
  lat: number;
  lon: number;
  obs_time: string | null;
  /** Direction the wind blows FROM, degrees true; null when variable or calm. */
  wind_dir_deg: number | null;
  variable: boolean;
  wind_kt: number;
  gust_kt: number | null;
  raw: string | null;
  distance_km: number;
  /** Report older than 2 h. */
  stale: boolean;
 }
 export interface WindResponse {
  available: boolean;
  /** Why there is no wind, when `available` is false. */
  reason: string | null;
  wind: WindObs | null;
  fetched_at: number | null;
  error: string | null;
  credit: string;
 }
 export interface VocabularyPendingTerm {
  term: string;
  source: "induction" | "correction";
@@ -0,0 +1,154 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 import type L from "leaflet";
 import { c2api } from "@/lib/c2api";
 import type { WeatherAlertsResponse, WindResponse } from "@/lib/types";
 import type { BBox } from "@/lib/useCameras";
 import { RADAR_META_URL, parseRadarMeta, type LatLon } from "@/lib/liveWall";
 // Weather context (server-26#237). NWS alerts and METAR wind come from c2-core
 // (cached server-side, shared by every viewer — NWS rate-limits and wants a
 // contact User-Agent); the radar valid time comes straight from IEM's n0q
 // metadata JSON, the same product the radar tiles are cut from.
 //
 // Everything polls only while wanted AND the tab is visible, and refetches as
 // soon as a hidden tab comes back if a poll was missed — a wall left in a
 // background tab must never show an hour-old warning set as current.
 const ALERTS_POLL_MS = 2 * 60 * 1000;
 const RADAR_META_POLL_MS = 2 * 60 * 1000;
 const WIND_POLL_MS = 5 * 60 * 1000;
 const MOVE_DEBOUNCE_MS = 400;
 const BBOX_PAD = 0.2;
 export interface Polled<T> {
  /** Last successful answer for the current target; null until the first one. */
  data: T | null;
  /** Last request failure (network/HTTP), cleared by the next success. */
  error: string | null;
  /** At least one request for the current target has finished. */
  loaded: boolean;
 }
 /**
 * Fetch `fetcher()` now, every `pollMs` while the tab is visible, and on return
 * to a visible tab once a poll is due. A newer request's answer always wins.
 * A new target (deps change) drops the previous answer, so it is never shown
 * as if it were about the new one.
 */
 function usePolled<T>(
  fetcher: (() => Promise<T> | null) | null,
  deps: unknown[],
  pollMs: number,
  subscribe?: (reload: () => void) => () => void,
 ): Polled<T> {
  const [state, setState] = useState<Polled<T>>({ data: null, error: null, loaded: false });
  const seq = useRef(0);
  useEffect(() => {
    setState({ data: null, error: null, loaded: false });
    if (!fetcher) return;
    const run = fetcher;
    let last = 0;
    const load = async () => {
      const p = run();
      if (!p) return;
      const mine = ++seq.current;
      last = Date.now();
      try {
        const data = await p;
        if (mine !== seq.current) return;
        setState({ data, error: null, loaded: true });
      } catch (e) {
        if (mine !== seq.current) return;
        console.error("useWeather:", e);
        setState((s) => ({ ...s, error: e instanceof Error ? e.message : String(e), loaded: true }));
      }
    };
    const onVisible = () => { if (!document.hidden && Date.now() - last >= pollMs) load(); };
    load();
    const unsub = subscribe?.(load);
    const poll = setInterval(() => { if (!document.hidden) load(); }, pollMs);
    document.addEventListener("visibilitychange", onVisible);
    return () => {
      unsub?.();
      clearInterval(poll);
      document.removeEventListener("visibilitychange", onVisible);
      seq.current++;   // drop any in-flight answer
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
  return state;
 }
 const clamp = (v: number, lim: number) => Math.max(-lim, Math.min(lim, v));
 /** Active NWS alerts intersecting the current map view, while `enabled` (the Weather Warnings overlay is on). */
 export function useMapWeatherAlerts(map: L.Map | null, enabled: boolean): Polled<WeatherAlertsResponse> {
  return usePolled(
    map && enabled
      ? () => {
          // Leaflet bounds run past ±180/±90 zoomed out; the API answers 422 to that.
          const b = map.getBounds().pad(BBOX_PAD);
          return c2api.getWeatherAlerts({
            south: clamp(b.getSouth(), 90), west: clamp(b.getWest(), 180),
            north: clamp(b.getNorth(), 90), east: clamp(b.getEast(), 180),
          });
        }
      : null,
    [map, enabled],
    ALERTS_POLL_MS,
    map
      ? (reload) => {
          let t: ReturnType<typeof setTimeout> | undefined;
          const onMove = () => { clearTimeout(t); t = setTimeout(reload, MOVE_DEBOUNCE_MS); };
          map.on("moveend", onMove);
          return () => { map.off("moveend", onMove); clearTimeout(t); };
        }
      : undefined,
  );
 }
 /** Active NWS alerts intersecting a fixed bbox (an incident, the wall's region). `null` = don't fetch. */
 export function useWeatherAlertsIn(box: BBox | null): Polled<WeatherAlertsResponse> {
  const key = box ? [box.south, box.west, box.north, box.east].map((v) => v.toFixed(3)).join(",") : "";
  const boxRef = useRef(box);
  boxRef.current = box;
  return usePolled(key ? () => (boxRef.current ? c2api.getWeatherAlerts(boxRef.current) : null) : null, [key], ALERTS_POLL_MS);
 }
 /** Nearest-METAR wind at a point. `null` = don't fetch. */
 export function useWind(point: LatLon | null): Polled<WindResponse> {
  // ~100 m key: a re-render with an equal point (new array) must not refetch.
  const key = point ? `${point[0].toFixed(3)},${point[1].toFixed(3)}` : "";
  const ref = useRef(point);
  ref.current = point;
  return usePolled(key ? () => (ref.current ? c2api.getWind(ref.current[0], ref.current[1]) : null) : null, [key], WIND_POLL_MS);
 }
 export interface RadarMeta {
  /** Valid time of the n0q composite (last one successfully read); null when never read. */
  valid: Date | null;
  /** Latest metadata refresh failure (fetch failed, or IEM changed the JSON shape). */
  error: string | null;
  loaded: boolean;
 }
 async function fetchRadarMeta(): Promise<Date> {
  // IEM serves this with ACAO: *, so the browser reads it directly — one tiny
  // JSON per viewer per poll, like the tiles themselves.
  const res = await fetch(RADAR_META_URL, { cache: "no-store" });
  if (!res.ok) throw new Error(`IEM radar metadata HTTP ${res.status}`);
  const valid = parseRadarMeta(await res.json());
  if (!valid) throw new Error("IEM radar metadata has no meta.valid — format changed?");
  return valid;
 }
 /** The radar composite's valid time, polled while `enabled` (the Weather Radar overlay is on). */
 export function useRadarMeta(enabled: boolean): RadarMeta {
  const s = usePolled(enabled ? fetchRadarMeta : null, [enabled], RADAR_META_POLL_MS);
  // On a failed refresh the last known valid time is kept AND the error is
  // reported; the badge shows both, and the stale check keeps ageing it.
  return { valid: s.data, error: s.error, loaded: s.loaded };
 }