Merge pull request 'fix(frontend): readability in both themes' (#188) from fix/ui-readability into main

Reviewed-on: #188

drb-c2-core/.env.example

@@ -26,6 +26,7 @@ NODE_OFFLINE_THRESHOLD=90
 # Google Maps — for geocoding location strings extracted from transcripts
 # Enable "Geocoding API" in Cloud Console for this key
 GOOGLE_MAPS_API_KEY=
+NY511_API_KEY=
 
 # OpenAI — for transcription (Whisper), intelligence extraction, embeddings, and summaries
 OPENAI_API_KEY=

drb-c2-core/app/config.py

@@ -32,6 +32,9 @@ class Settings(BaseSettings):
 
     # Google Maps (geocoding)
     google_maps_api_key: Optional[str] = None
+    # 511NY developer key (server-26#183). Optional: the API answered without one
+    # as of 2026-09-27, but its terms require a registered key.
+    ny511_api_key: Optional[str] = None
 
     # Gemini (intelligence extraction, embeddings, incident summaries)
     gemini_api_key: Optional[str] = None

drb-c2-core/app/internal/mqtt_handler.py

@@ -114,7 +114,10 @@ class MQTTHandler:
                 "secondary_sdr_mode": payload.get("secondary_sdr_mode", "none"),
                 "secondary_sdr_priority": payload.get("secondary_sdr_priority", []),
                 "secondary_sdr_running": payload.get("secondary_sdr_running"),
-                "sdr_count": payload.get("sdr_count", 1),
+                "sdr_pins": payload.get("sdr_pins", {}),
+                "sdr_devices": payload.get("sdr_devices"),
+                "op25_sdr_serial": payload.get("op25_sdr_serial"),
+                "sdr_count": payload.get("sdr_count"),  # None until reported, never a guessed 1
                 "enforce_override_timeout": payload.get("enforce_override_timeout", True),
                 "is_overridden": False,
                 "override_system_id": None,
@@ -145,7 +148,8 @@ class MQTTHandler:
             updates["node_type"] = node_type
             updates["enforce_override_timeout"] = enforce_timeout
 
-            for key in ("secondary_sdr_mode", "secondary_sdr_priority", "secondary_sdr_running"):
+            for key in ("secondary_sdr_mode", "secondary_sdr_priority", "secondary_sdr_running",
+                        "sdr_pins", "sdr_devices", "op25_sdr_serial"):
                 if key in payload:
                     updates[key] = payload[key]
             if "sdr_count" in payload:

drb-c2-core/app/internal/ny511.py

@@ -0,0 +1,140 @@
+"""511NY (NYSDOT) traffic cameras and events, cached in memory (server-26#183).
+
+Public data, identical for every org, so it is NOT written to Firestore: the
+statewide feeds are ~3k cameras and ~2.3k events, and re-writing them every
+poll would be millions of writes a day for data nobody needs history of. The
+cache is filled lazily on request and refreshed per TTL, so an idle deploy
+makes no 511 calls at all.
+
+A failed refresh keeps serving the last good data and reports the error and
+its age to the caller -- an empty layer must never be the only symptom of a
+dead feed (the AI-silent-failures lesson).
+"""
+import asyncio
+import time
+from datetime import datetime
+from typing import Any, Dict, List, Optional
+
+import httpx
+
+from app.config import settings
+from app.internal.logger import logger
+
+_BASE = "https://511ny.org/api"
+CAMERAS_TTL_S = 60 * 60   # camera list is near-static
+EVENTS_TTL_S = 2 * 60     # accidents/closures change minute to minute
+RETRY_AFTER_FAILURE_S = 60
+_DESCRIPTION_MAX = 500
+
+
+class _Feed:
+    def __init__(self, path: str, ttl_s: int, normalize):
+        self.path = path
+        self.ttl_s = ttl_s
+        self.normalize = normalize
+        self.items: List[Dict[str, Any]] = []
+        self.fetched_at: Optional[float] = None   # epoch s of last SUCCESSFUL fetch
+        self.error: Optional[str] = None
+        self._next_attempt = 0.0
+        self._lock = asyncio.Lock()
+
+    async def get(self) -> "_Feed":
+        if time.time() < self._next_attempt:
+            return self
+        async with self._lock:
+            if time.time() < self._next_attempt:
+                return self   # another request refreshed while we waited
+            try:
+                self.items = await _fetch(self.path, self.normalize)
+                self.fetched_at = time.time()
+                self.error = None
+                self._next_attempt = time.time() + self.ttl_s
+            except Exception as e:
+                self._next_attempt = time.time() + min(self.ttl_s, RETRY_AFTER_FAILURE_S)
+                self.error = f"{type(e).__name__}: {e}"[:300]
+                logger.warning(f"511NY {self.path} refresh failed, serving {len(self.items)} cached: {self.error}")
+        return self
+
+
+async def _fetch(path: str, normalize) -> List[Dict[str, Any]]:
+    params = {"format": "json"}
+    if settings.ny511_api_key:
+        params["key"] = settings.ny511_api_key
+    async with httpx.AsyncClient(timeout=20.0) as client:
+        r = await client.get(f"{_BASE}/{path}", params=params)
+        r.raise_for_status()
+        raw = r.json()
+    if not isinstance(raw, list):
+        raise ValueError(f"expected a JSON list, got {type(raw).__name__}")
+    out = [n for n in (normalize(x) for x in raw) if n is not None]
+    if raw and not out:
+        # every record failed to normalize: the schema changed under us
+        raise ValueError(f"0 of {len(raw)} records parsed -- 511NY schema change?")
+    return out
+
+
+def _coords(x: Dict[str, Any]) -> Optional[tuple]:
+    try:
+        lat, lon = float(x["Latitude"]), float(x["Longitude"])
+    except (KeyError, TypeError, ValueError):
+        return None
+    if lat == 0 and lon == 0:
+        return None
+    return lat, lon
+
+
+def _local_iso(s: Any) -> Optional[str]:
+    """511NY stamps are 'DD/MM/YYYY HH:MM:SS' New York local time. Returned as a
+    naive ISO string (no offset) -- display-only, never compared to UTC."""
+    if not s:
+        return None
+    try:
+        return datetime.strptime(s, "%d/%m/%Y %H:%M:%S").isoformat()
+    except (TypeError, ValueError):
+        return None
+
+
+def normalize_camera(x: Dict[str, Any]) -> Optional[Dict[str, Any]]:
+    c = _coords(x)
+    if c is None or x.get("Disabled") or x.get("Blocked") or not x.get("ID"):
+        return None
+    return {
+        "id": x["ID"],
+        "lat": c[0],
+        "lon": c[1],
+        "name": x.get("Name") or "",
+        "roadway": x.get("RoadwayName") or "",
+        "direction": x.get("DirectionOfTravel") or "",
+        "image_url": x.get("Url"),      # 511NY serves the current still at this URL
+        "video_url": x.get("VideoUrl"),  # HLS playlist, when the camera streams
+    }
+
+
+def normalize_event(x: Dict[str, Any]) -> Optional[Dict[str, Any]]:
+    c = _coords(x)
+    if c is None or not x.get("ID"):
+        return None
+    desc = x.get("Description") or ""
+    return {
+        "id": x["ID"],
+        "lat": c[0],
+        "lon": c[1],
+        "type": x.get("EventType") or "",
+        "subtype": x.get("EventSubType") or "",
+        "severity": x.get("Severity") or "",
+        "roadway": x.get("RoadwayName") or "",
+        "direction": x.get("DirectionOfTravel") or "",
+        "county": x.get("CountyName") or "",
+        "description": desc[:_DESCRIPTION_MAX] + ("…" if len(desc) > _DESCRIPTION_MAX else ""),
+        "start_local": _local_iso(x.get("StartDate")),
+        "planned_end_local": _local_iso(x.get("PlannedEndDate")),
+        "updated_local": _local_iso(x.get("LastUpdated")),
+    }
+
+
+cameras = _Feed("getcameras", CAMERAS_TTL_S, normalize_camera)
+events = _Feed("getevents", EVENTS_TTL_S, normalize_event)
+
+
+def in_bbox(items: List[Dict[str, Any]], south: float, west: float, north: float, east: float) -> List[Dict[str, Any]]:
+    return [i for i in items if south <= i["lat"] <= north and west <= i["lon"] <= east]

drb-c2-core/app/main.py

@@ -17,7 +17,7 @@ from app.internal.auth import (
     require_node_service_or_firebase_token,
 )
 from app.routers import nodes, systems, calls, upload, tokens, incidents, alerts, admin, trips, places, links, users
-from app.routers import enrollment, media, org, waitlist, telemetry, replay
+from app.routers import enrollment, media, org, waitlist, telemetry, replay, traffic
 from app.internal import dynsec
 from app.internal import firestore as fstore
 
@@ -127,6 +127,7 @@ app.include_router(incidents.router, dependencies=[Depends(require_service_or_fi
 app.include_router(alerts.router,    dependencies=[Depends(require_service_or_firebase_token)])
 app.include_router(trips.router,     dependencies=[Depends(require_service_or_firebase_token)])
 app.include_router(places.router,    dependencies=[Depends(require_service_or_firebase_token)])
+app.include_router(traffic.router,   dependencies=[Depends(require_service_or_firebase_token)])
 app.include_router(upload.router)    # auth is per-node, handled inline
 app.include_router(admin.router)     # auth is per-endpoint (read: firebase, write: admin)
 app.include_router(replay.router)    # auth: admin only (every route spends or reads a replay run)

drb-c2-core/app/models.py

@@ -68,7 +68,11 @@ class NodeRecord(BaseModel):
     # checkin, which is the source of truth; set via PATCH /nodes/{id}.
     secondary_sdr_priority: List[str] = []
     secondary_sdr_running: Optional[List[str]] = None  # what the node reports actually running
-    sdr_count: int = 1  # self-reported by the node's checkin, best-effort
+    # node-26#11: service (op25/adsb/ais) -> dongle serial; absent = automatic.
+    sdr_pins: Dict[str, str] = {}
+    sdr_devices: Optional[List[Dict[str, Any]]] = None  # [{index, serial, name, duplicate_serial}] from checkin
+    op25_sdr_serial: Optional[str] = None  # the dongle OP25 is actually using, per the node
+    sdr_count: Optional[int] = None  # self-reported by the node's checkin; None = never reported
     enforce_override_timeout: bool = True
     is_overridden: bool = False
     override_system_id: Optional[str] = None

drb-c2-core/app/routers/nodes.py

@@ -1,5 +1,5 @@
 import secrets
-from typing import List, Optional
+from typing import Dict, List, Optional
 from fastapi import APIRouter, HTTPException, Depends, Query
 from pydantic import BaseModel
 from app.models import CommandPayload
@@ -193,6 +193,7 @@ async def assign_system(
 
 
 SECONDARY_SDR_MODES = ("adsb", "ais")
+SDR_PIN_KEYS = ("op25",) + SECONDARY_SDR_MODES
 
 
 class NodeUpdateBody(BaseModel):
@@ -201,6 +202,9 @@ class NodeUpdateBody(BaseModel):
     secondary_sdr_mode: Optional[str] = None  # legacy: none | adsb | ais
     # Ordered, e.g. ["adsb", "ais"]: SDRs beyond op25's run these top-down.
     secondary_sdr_priority: Optional[List[str]] = None
+    # node-26#11: service -> dongle serial; null/"" = automatic. Moving OP25's
+    # dongle restarts OP25 on the node; the other pins never do.
+    sdr_pins: Optional[Dict[str, Optional[str]]] = None
 
 
 @router.patch("/{node_id}")
@@ -224,14 +228,32 @@ async def update_node(
             raise HTTPException(400, f"secondary_sdr_priority must be distinct values from {SECONDARY_SDR_MODES}.")
         updates["secondary_sdr_mode"] = priority[0] if priority else "none"
 
+    if "sdr_pins" in updates:
+        raw = updates["sdr_pins"] or {}
+        unknown = [k for k in raw if k not in SDR_PIN_KEYS]
+        if unknown:
+            raise HTTPException(400, f"sdr_pins keys must be from {SDR_PIN_KEYS}.")
+        pins = {k: str(v).strip() for k, v in raw.items() if v and str(v).strip()}
+        if len(set(pins.values())) != len(pins):
+            raise HTTPException(400, "Two services can't be pinned to the same SDR.")
+        updates["sdr_pins"] = pins
+
     await fstore.doc_update("nodes", node_id, updates)
 
-    # Priority goes as its own command: a config re-push restarts OP25, and
+    # SDR settings go as their own command: a config re-push restarts OP25, and
-    # changing what the spare dongles do must never interrupt P25 recording.
+    # changing what the spare dongles do must never interrupt P25 recording
-    # The node applies it, then its checkin reports back what's really running.
+    # (only moving OP25's own dongle restarts it, on the node's side). The node
+    # applies it, then its checkin reports back what's really running.
+    sdr_keys = {"secondary_sdr_priority", "secondary_sdr_mode", "sdr_pins"}
+    if sdr_keys & set(updates):
+        command = {"action": "set_sdr_config"}
         if priority is not None:
-        mqtt_handler.send_command(node_id, {"action": "set_secondary_priority", "priority": priority})
+            command["priority"] = priority
-        if set(updates) <= {"secondary_sdr_priority", "secondary_sdr_mode"}:
+        if "sdr_pins" in updates:
+            # Explicit nulls so a cleared pin reaches the node as "automatic".
+            command["pins"] = {k: updates["sdr_pins"].get(k) for k in SDR_PIN_KEYS}
+        mqtt_handler.send_command(node_id, command)
+        if set(updates) <= sdr_keys:
             return {"ok": True}
 
     # Re-push config to apply new node settings locally

drb-c2-core/app/routers/traffic.py

@@ -0,0 +1,38 @@
+import asyncio
+from typing import Optional
+
+from fastapi import APIRouter, HTTPException, Query
+
+from app.internal import ny511
+
+router = APIRouter(prefix="/traffic", tags=["traffic"])
+
+# Per-layer cap per response. A statewide view is ~3k cameras; past this the
+# map is unreadable anyway, and the client is told the list was cut.
+MAX_ITEMS = 1500
+
+
+def _feed_status(feed: "ny511._Feed") -> dict:
+    return {"fetched_at": feed.fetched_at, "error": feed.error}
+
+
+@router.get("/511")
+async def get_511(
+    south: float = Query(..., ge=-90, le=90),
+    west: float = Query(..., ge=-180, le=180),
+    north: float = Query(..., ge=-90, le=90),
+    east: float = Query(..., ge=-180, le=180),
+    layers: Optional[str] = Query("cameras,events", description="comma list: cameras, events"),
+):
+    if south > north or west > east:
+        raise HTTPException(400, "bbox must satisfy south<=north and west<=east")
+    wanted = {s.strip() for s in (layers or "").split(",") if s.strip()}
+    feeds = {name: getattr(ny511, name) for name in ("cameras", "events") if name in wanted}
+    await asyncio.gather(*(f.get() for f in feeds.values()))
+
+    out: dict = {}
+    for name, feed in feeds.items():
+        hits = ny511.in_bbox(feed.items, south, west, north, east)
+        out[name] = hits[:MAX_ITEMS]
+        out[f"{name}_status"] = {**_feed_status(feed), "total_in_bbox": len(hits), "truncated": len(hits) > MAX_ITEMS}
+    return out

drb-c2-core/tests/test_node_secondary_priority.py

@@ -40,7 +40,7 @@ def _patch(body):
 def test_priority_only_sends_command_and_never_repushes_config():
     resp, update, command, push = _patch({"secondary_sdr_priority": ["ais", "adsb"]})
     assert resp.status_code == 200
-    command.assert_called_once_with("n1", {"action": "set_secondary_priority", "priority": ["ais", "adsb"]})
+    command.assert_called_once_with("n1", {"action": "set_sdr_config", "priority": ["ais", "adsb"]})
     push.assert_not_called()
     (_, _, updates), _ = update.await_args
     assert updates == {"secondary_sdr_priority": ["ais", "adsb"], "secondary_sdr_mode": "ais"}
@@ -49,7 +49,7 @@ def test_priority_only_sends_command_and_never_repushes_config():
 def test_empty_priority_turns_secondaries_off():
     resp, update, command, push = _patch({"secondary_sdr_priority": []})
     assert resp.status_code == 200
-    command.assert_called_once_with("n1", {"action": "set_secondary_priority", "priority": []})
+    command.assert_called_once_with("n1", {"action": "set_sdr_config", "priority": []})
     (_, _, updates), _ = update.await_args
     assert updates["secondary_sdr_mode"] == "none"
 
@@ -57,3 +57,20 @@ def test_empty_priority_turns_secondaries_off():
 def test_unknown_or_duplicate_modes_are_rejected():
     assert _patch({"secondary_sdr_priority": ["adsb", "sonar"]})[0].status_code == 400
     assert _patch({"secondary_sdr_priority": ["adsb", "adsb"]})[0].status_code == 400
+
+
+def test_pins_send_every_service_with_nulls_for_automatic():
+    resp, update, command, push = _patch({"sdr_pins": {"op25": "00000001", "adsb": "69420", "ais": ""}})
+    assert resp.status_code == 200
+    push.assert_not_called()
+    command.assert_called_once_with("n1", {
+        "action": "set_sdr_config",
+        "pins": {"op25": "00000001", "adsb": "69420", "ais": None},
+    })
+    (_, _, updates), _ = update.await_args
+    assert updates == {"sdr_pins": {"op25": "00000001", "adsb": "69420"}}
+
+
+def test_two_services_on_one_dongle_or_unknown_service_rejected():
+    assert _patch({"sdr_pins": {"op25": "69420", "adsb": "69420"}})[0].status_code == 400
+    assert _patch({"sdr_pins": {"sonar": "1"}})[0].status_code == 400

drb-c2-core/tests/test_ny511.py

@@ -0,0 +1,98 @@
+"""
+server-26#183 — 511NY cameras/events layer.
+
+The feed is scraped from a third party, so the tests pin the two failure shapes
+that would otherwise look like "no traffic right now": a refresh error must keep
+the last good data AND report the error, and a schema change (every record
+unparseable) must be an error, not an empty list.
+"""
+import asyncio
+from unittest.mock import AsyncMock, patch
+
+from fastapi.testclient import TestClient
+
+from app.main import app
+from app.internal import ny511
+from app.internal.auth import require_service_or_firebase_token
+
+client = TestClient(app)
+
+CAM = {"Latitude": 41.03, "Longitude": -73.76, "ID": "NYSDOT-1", "Name": "I-287 at Exit 5",
+       "DirectionOfTravel": "Unknown", "RoadwayName": "I-287", "Url": "https://511ny.org/map/Cctv/1",
+       "VideoUrl": None, "Disabled": False, "Blocked": False}
+EVENT = {"Latitude": 41.019265, "Longitude": -73.797869, "ID": "TRANSCOM-1", "EventType": "roadwork",
+         "EventSubType": "Gas main repairs", "Severity": "Unknown", "RoadwayName": "NY 100",
+         "DirectionOfTravel": "Both directions", "CountyName": "Westchester", "Description": "x" * 900,
+         "StartDate": "28/09/2026 09:00:00", "PlannedEndDate": "", "LastUpdated": "26/09/2026 14:01:12"}
+
+
+def setup_function():
+    app.dependency_overrides[require_service_or_firebase_token] = lambda: {"admin": True}
+    for feed in (ny511.cameras, ny511.events):
+        feed.items, feed.fetched_at, feed.error, feed._next_attempt = [], None, None, 0.0
+
+
+def teardown_function():
+    app.dependency_overrides.pop(require_service_or_firebase_token, None)
+
+
+def test_normalize_camera_skips_disabled_blocked_and_zero_coords():
+    assert ny511.normalize_camera(CAM)["image_url"] == "https://511ny.org/map/Cctv/1"
+    assert ny511.normalize_camera({**CAM, "Disabled": True}) is None
+    assert ny511.normalize_camera({**CAM, "Blocked": True}) is None
+    assert ny511.normalize_camera({**CAM, "Latitude": 0, "Longitude": 0}) is None
+
+
+def test_normalize_event_parses_day_first_dates_and_truncates_description():
+    e = ny511.normalize_event(EVENT)
+    assert e["start_local"] == "2026-09-28T09:00:00"   # DD/MM, not MM/DD
+    assert e["planned_end_local"] is None
+    assert len(e["description"]) == ny511._DESCRIPTION_MAX + 1
+
+
+def test_failed_refresh_keeps_last_good_data_and_reports_error():
+    feed = ny511._Feed("getcameras", 3600, ny511.normalize_camera)
+    with patch.object(ny511, "_fetch", AsyncMock(return_value=[ny511.normalize_camera(CAM)])):
+        asyncio.run(feed.get())
+    feed._next_attempt = 0.0
+    with patch.object(ny511, "_fetch", AsyncMock(side_effect=RuntimeError("boom"))):
+        asyncio.run(feed.get())
+    assert len(feed.items) == 1 and feed.fetched_at is not None
+    assert "boom" in feed.error
+    assert feed._next_attempt - feed.fetched_at <= ny511.RETRY_AFTER_FAILURE_S + 5  # retries soon, not after the full TTL
+
+
+def test_schema_change_is_an_error_not_an_empty_layer():
+    class Resp:
+        def raise_for_status(self): pass
+        def json(self): return [{"lat": 1, "lng": 2}]   # renamed fields -> nothing parses
+
+    class Client:
+        async def __aenter__(self): return self
+        async def __aexit__(self, *a): pass
+        async def get(self, *a, **k): return Resp()
+
+    with patch.object(ny511.httpx, "AsyncClient", lambda **k: Client()):
+        try:
+            asyncio.run(ny511._fetch("getcameras", ny511.normalize_camera))
+            assert False, "expected a schema-change error"
+        except ValueError as e:
+            assert "schema" in str(e)
+
+
+def test_endpoint_filters_to_bbox_and_reports_status():
+    far = {**CAM, "ID": "NYSDOT-2", "Latitude": 42.9, "Longitude": -78.8}   # Buffalo
+    for feed, rows, norm in ((ny511.cameras, [CAM, far], ny511.normalize_camera), (ny511.events, [EVENT], ny511.normalize_event)):
+        feed.items = [norm(r) for r in rows]
+        feed.fetched_at, feed._next_attempt = 1.0, float("inf")
+    r = client.get("/traffic/511", params={"south": 40.9, "west": -74.0, "north": 41.4, "east": -73.4})
+    assert r.status_code == 200
+    body = r.json()
+    assert [c["id"] for c in body["cameras"]] == ["NYSDOT-1"]
+    assert body["cameras_status"] == {"fetched_at": 1.0, "error": None, "total_in_bbox": 1, "truncated": False}
+    assert len(body["events"]) == 1
+
+
+def test_endpoint_rejects_inverted_bbox():
+    r = client.get("/traffic/511", params={"south": 41.4, "west": -74.0, "north": 40.9, "east": -73.4})
+    assert r.status_code == 400

drb-frontend/app/globals.css

@@ -67,6 +67,10 @@ html, body {
   font-family: var(--font-mono), ui-monospace, monospace;
 }
 
+/* Dark mode: raw gray-600/700 text sits ~2.4:1 on the near-black page — below
+ * readable. Lift both to gray-500 (~4:1). */
+.dark .text-gray-600, .dark .text-gray-700 { color: #6b7280; }
+
 /* ── Light mode overrides ─────────────────────────────────────────────────── */
 /*
  * The app's components use hardcoded dark-palette Tailwind classes (bg-gray-9xx,
@@ -84,6 +88,7 @@ html:not(.dark) .bg-gray-900\/60    { background-color: rgba(255,255,255,0.85) !
 html:not(.dark) .bg-gray-900\/50    { background-color: rgba(255,255,255,0.75) !important; }
 html:not(.dark) .bg-gray-900\/30    { background-color: rgba(255,255,255,0.50) !important; }
 html:not(.dark) .bg-gray-800        { background-color: #f1f5f9 !important; }
+html:not(.dark) .bg-gray-800\/60    { background-color: rgba(226,232,240,0.70) !important; }
 html:not(.dark) .bg-gray-800\/40    { background-color: rgba(241,245,249,0.60) !important; }
 html:not(.dark) .bg-gray-800\/30    { background-color: rgba(241,245,249,0.50) !important; }
 html:not(.dark) .bg-gray-700        { background-color: #e2e8f0 !important; }
@@ -91,16 +96,25 @@ html:not(.dark) .bg-gray-700        { background-color: #e2e8f0 !important; }
 /* Borders */
 html:not(.dark) .border-gray-800   { border-color: #e2e8f0 !important; }
 html:not(.dark) .border-gray-700   { border-color: #cbd5e1 !important; }
+html:not(.dark) .border-gray-600   { border-color: #94a3b8 !important; }
+html:not(.dark) .border-gray-800\/60 { border-color: #e2e8f0 !important; }
 html:not(.dark) .divide-gray-800 > * + * { border-color: #e2e8f0 !important; }
 
 /* Text */
 html:not(.dark) .text-white        { color: #0f172a !important; }
 html:not(.dark) .text-gray-100     { color: #1e293b !important; }
+html:not(.dark) .text-gray-200     { color: #1e293b !important; }
 html:not(.dark) .text-gray-300     { color: #334155 !important; }
 html:not(.dark) .text-gray-400     { color: #475569 !important; }
 html:not(.dark) .text-gray-500     { color: #64748b !important; }
 html:not(.dark) .text-gray-600     { color: #94a3b8 !important; }
 
+/* …except on saturated fills (primary/danger/success buttons), where the fill
+ * stays dark in both themes — remapping to navy made their labels unreadable. */
+html:not(.dark) .text-white:is(.bg-accent, .bg-sev-major, .bg-sev-moderate,
+  .bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-red-600, .bg-red-700,
+  .bg-green-600, .bg-green-700, .bg-yellow-700, .bg-yellow-800, .bg-gray-600) { color: #ffffff !important; }
+
 /* Hover states */
 html:not(.dark) .hover\:bg-gray-900:hover  { background-color: #f8fafc !important; }
 html:not(.dark) .hover\:bg-gray-900\/50:hover { background-color: rgba(255,255,255,0.75) !important; }
@@ -177,6 +191,18 @@ html:not(.dark) .border-indigo-800 { border-color: #a5b4fc !important; }
   z-index: 0;
 }
 
+/* Pinned 511 camera tiles (MapView DotCameraLayer): strip Leaflet's tooltip
+ * padding and let the tile's own theme colours show, so the tile is no bigger
+ * than the video it holds. */
+.leaflet-tooltip.drb-cam-pin {
+  padding: 0;
+  border-radius: 6px;
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
+  white-space: normal;
+}
+
 /* ── Form inputs ─────────────────────────────────────────────────────────── */
 html:not(.dark) input:not([type="submit"]):not([type="button"]):not([type="reset"]),
 html:not(.dark) select,

drb-frontend/app/nodes/[id]/page.tsx

@@ -8,7 +8,7 @@ import { useSystems } from "@/lib/useSystems";
 import { useCalls } from "@/lib/useCalls";
 import { StatusBadge } from "@/components/StatusBadge";
 import { NodeConfigModal } from "@/components/NodeConfigModal";
-import { SecondarySdrPriority } from "@/components/SecondarySdrPriority";
+import { SdrSettings } from "@/components/SdrSettings";
 import { CallRow } from "@/components/CallRow";
 import { MachineOutputNotice } from "@/components/ui/MachineOutputNotice";
 import { useAuth } from "@/components/AuthProvider";
@@ -337,7 +337,7 @@ export default function NodeDetailPage() {
         )}
       </div>
 
-      <SecondarySdrPriority node={node} canEdit={isAdmin} />
+      <SdrSettings node={node} canEdit={isAdmin} />
 
       {/* Recent calls */}
       <section>

drb-frontend/components/CameraFeed.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type HlsType from "hls.js";
+import type { Ny511Camera } from "@/lib/types";
+
+// 511NY stills are served with max-age=60, so refreshing faster buys nothing.
+const SNAPSHOT_REFRESH_MS = 60_000;
+
+/**
+ * One 511NY camera: the live HLS stream when the camera has one (NYSDOT's
+ * skyvdn hosts send Access-Control-Allow-Origin: *), otherwise its snapshot on
+ * a timer. A stream that fails falls back to the snapshot rather than a black box.
+ */
+export function CameraFeed({ camera, className }: { camera: Ny511Camera; className?: string }) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [videoFailed, setVideoFailed] = useState(false);
+  const [tick, setTick] = useState(() => Date.now());
+  const useVideo = !!camera.video_url && !videoFailed;
+
+  useEffect(() => {
+    if (useVideo) return;
+    const id = setInterval(() => setTick(Date.now()), SNAPSHOT_REFRESH_MS);
+    return () => clearInterval(id);
+  }, [useVideo]);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    const src = camera.video_url;
+    if (!useVideo || !video || !src) return;
+    let hls: HlsType | null = null;
+    let cancelled = false;
+
+    if (video.canPlayType("application/vnd.apple.mpegurl")) {
+      video.src = src;   // Safari/iOS play HLS natively
+    } else {
+      import("hls.js")
+        .then(({ default: Hls }) => {
+          if (cancelled) return;
+          if (!Hls.isSupported()) { setVideoFailed(true); return; }
+          hls = new Hls({ maxBufferLength: 10, backBufferLength: 0 });
+          hls.on(Hls.Events.ERROR, (_evt, data) => { if (data.fatal) setVideoFailed(true); });
+          hls.loadSource(src);
+          hls.attachMedia(video);
+        })
+        .catch(() => setVideoFailed(true));
+    }
+    return () => {
+      cancelled = true;
+      hls?.destroy();
+      video.removeAttribute("src");
+      video.load();   // stop the download, not just the playback
+    };
+  }, [useVideo, camera.video_url]);
+
+  if (useVideo) {
+    return <video ref={videoRef} muted autoPlay playsInline className={className} onError={() => setVideoFailed(true)} />;
+  }
+  if (!camera.image_url) {
+    return <div className={`${className ?? ""} flex items-center justify-center text-[10px] text-ink-muted`}>No image</div>;
+  }
+  // eslint-disable-next-line @next/next/no-img-element
+  return <img src={`${camera.image_url}?t=${tick}`} alt={`Camera: ${camera.name}`} className={className} />;
+}

drb-frontend/components/MapView.tsx

@@ -21,6 +21,9 @@ import { MachineOutputNotice } from "@/components/ui/MachineOutputNotice";
 import { useAircraft } from "@/lib/useAircraft";
 import { useAircraftTrail } from "@/lib/useAircraftTrail";
 import { useVessels } from "@/lib/useVessels";
+import { use511 } from "@/lib/use511";
+import type { Ny511Camera, Ny511Event, Ny511FeedStatus } from "@/lib/types";
+import { CameraFeed } from "@/components/CameraFeed";
 
 // ── Leaflet icon fix ──────────────────────────────────────────────────────────
 delete (L.Icon.Default.prototype as unknown as Record<string, unknown>)._getIconUrl;
@@ -310,6 +313,162 @@ function VesselLayer() {
   );
 }
 
+// ── 511NY traffic layers (server-26#183) ─────────────────────────────────────
+// Overlay names double as the event keys for overlayadd/overlayremove.
+const OVERLAY_DOT_CAMERAS = "DOT Cameras";
+const OVERLAY_TRAFFIC_EVENTS = "Traffic Events";
+
+/** True while the named LayersControl overlay is checked. Overlays start unchecked. */
+function useOverlayShown(map: L.Map, name: string): boolean {
+  const [shown, setShown] = useState(false);
+  useEffect(() => {
+    const on = (e: L.LayersControlEvent) => e.name === name && setShown(true);
+    const off = (e: L.LayersControlEvent) => e.name === name && setShown(false);
+    map.on("overlayadd", on);
+    map.on("overlayremove", off);
+    return () => { map.off("overlayadd", on); map.off("overlayremove", off); };
+  }, [map, name]);
+  return shown;
+}
+
+function cameraIcon(): L.DivIcon {
+  return L.divIcon({
+    className: "",
+    html: `<svg width="16" height="12" viewBox="0 0 16 12"><rect x="0.5" y="1.5" width="11" height="9" rx="2" fill="#1e3a5f" stroke="#93c5fd" stroke-width="1"/><circle cx="6" cy="6" r="2.5" fill="none" stroke="#93c5fd" stroke-width="1.25"/><polygon points="12,4 15.5,2 15.5,10 12,8" fill="#93c5fd"/></svg>`,
+    iconSize: [16, 12],
+    iconAnchor: [8, 6],
+  });
+}
+
+// Shape + glyph per 511 event type, so the layer reads without colour alone.
+const EVENT_STYLE: Record<string, { glyph: string; fill: string; label: string }> = {
+  accidentsAndIncidents: { glyph: "!", fill: "#dc2626", label: "Accident / incident" },
+  closures: { glyph: "×", fill: "#ea580c", label: "Closure" },
+  roadwork: { glyph: "W", fill: "#ca8a04", label: "Roadwork" },
+  specialEvents: { glyph: "E", fill: "#7c3aed", label: "Special event" },
+  transitOperations: { glyph: "T", fill: "#0891b2", label: "Transit" },
+};
+const EVENT_STYLE_OTHER = { glyph: "i", fill: "#6b7280", label: "Other" };
+
+function trafficEventIcon(type: string): L.DivIcon {
+  const st = EVENT_STYLE[type] ?? EVENT_STYLE_OTHER;
+  return L.divIcon({
+    className: "",
+    html: `<svg width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="3" fill="${st.fill}" stroke="#000" stroke-width="1"/><text x="8" y="12" text-anchor="middle" font-size="11" font-weight="700" font-family="sans-serif" fill="#fff">${st.glyph}</text></svg>`,
+    iconSize: [16, 16],
+    iconAnchor: [8, 8],
+  });
+}
+
+function fmtLocal(iso: string | null): string | null {
+  if (!iso) return null;
+  const d = new Date(iso);   // naive ISO parses as browser-local; 511NY stamps are NY local
+  return isNaN(d.getTime()) ? null : d.toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+}
+
+/** Surfaces a dead or stale 511 feed on the map instead of an unexplained empty layer. */
+function FeedProblem({ map, label, status, fetchError }: { map: L.Map; label: string; status?: Ny511FeedStatus; fetchError: string | null }) {
+  let msg: string | null = null;
+  if (fetchError) msg = `${label}: could not reach server`;
+  else if (status?.error) {
+    const age = status.fetched_at ? `showing data from ${Math.round((Date.now() / 1000 - status.fetched_at) / 60)} min ago` : "no data yet";
+    msg = `${label}: 511NY feed error, ${age}`;
+  } else if (status?.truncated) msg = `${label}: showing ${1500} of ${status.total_in_bbox} — zoom in`;
+  if (!msg) return null;
+  return createPortal(
+    <div className="absolute bottom-8 left-3 z-[1001] bg-surface/90 border border-line rounded px-2 py-1 text-xs text-ink-2 pointer-events-none">{msg}</div>,
+    map.getContainer(),
+  );
+}
+
+// Pinned cameras: clicking a camera's snapshot pins its live feed as a small
+// tile anchored at the camera, so several views along one road can be read
+// against the map. Oldest pin drops past the cap.
+const MAX_CAMERA_PINS = 6;
+
+function DotCameraLayer() {
+  const map = useMap();
+  const shown = useOverlayShown(map, OVERLAY_DOT_CAMERAS);
+  const { data, error } = use511(map, "cameras", shown);
+  const [pinned, setPinned] = useState<Ny511Camera[]>([]);
+  const pinnedIds = useMemo(() => new Set(pinned.map((c) => c.id)), [pinned]);
+
+  const pin = (c: Ny511Camera) => {
+    map.closePopup();
+    setPinned((prev) => (prev.some((p) => p.id === c.id) ? prev : [...prev, c].slice(-MAX_CAMERA_PINS)));
+  };
+  const unpin = (id: string) => setPinned((prev) => prev.filter((p) => p.id !== id));
+
+  return (
+    <>
+      {shown && <FeedProblem map={map} label="DOT cameras" status={data.cameras_status} fetchError={error} />}
+      {(data.cameras ?? []).filter((c) => !pinnedIds.has(c.id)).map((c) => (
+        <Marker key={c.id} position={[c.lat, c.lon]} icon={cameraIcon()}>
+          <Popup minWidth={260} maxWidth={340}>
+            <div className="space-y-1">
+              <div className="font-semibold">{c.name}</div>
+              {c.roadway && <div className="text-xs text-ink-muted">{c.roadway}{c.direction && c.direction !== "Unknown" ? ` · ${c.direction}` : ""}</div>}
+              {c.image_url && (
+                // Popup content mounts on open, so the timestamp busts the cache per open.
+                <button type="button" onClick={() => pin(c)} title="Pin this camera to the map" className="block w-full p-0 border-0 bg-transparent cursor-pointer">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src={`${c.image_url}?t=${Date.now()}`} alt={`Camera: ${c.name}`} className="w-full rounded border border-line" loading="lazy" />
+                </button>
+              )}
+              <div className="text-[10px] text-ink-muted">
+                Click the image to pin {c.video_url ? "the live feed" : "it"} to the map · 511NY / NYSDOT
+              </div>
+            </div>
+          </Popup>
+        </Marker>
+      ))}
+      {/* Players only exist while the overlay is on, so hiding it stops every stream. */}
+      {shown && pinned.map((c) => (
+        <Marker key={`pin-${c.id}`} position={[c.lat, c.lon]} icon={cameraIcon()} zIndexOffset={300}>
+          <Tooltip permanent interactive direction="top" offset={[0, -8]} opacity={1} className="drb-cam-pin">
+            <div className="w-[192px]">
+              <div className="flex items-center gap-1 px-1.5 h-4">
+                <span className="flex-1 truncate text-[10px] leading-4 text-ink-2" title={c.name}>{c.name}</span>
+                <button type="button" onClick={() => unpin(c.id)} aria-label={`Unpin ${c.name}`} className="text-ink-muted hover:text-ink text-xs leading-none px-0.5">×</button>
+              </div>
+              <CameraFeed camera={c} className="block w-[192px] h-[108px] object-cover bg-black rounded-b" />
+            </div>
+          </Tooltip>
+        </Marker>
+      ))}
+    </>
+  );
+}
+
+function TrafficEventLayer() {
+  const map = useMap();
+  const shown = useOverlayShown(map, OVERLAY_TRAFFIC_EVENTS);
+  const { data, error } = use511(map, "events", shown);
+  return (
+    <>
+      {shown && <FeedProblem map={map} label="Traffic events" status={data.events_status} fetchError={error} />}
+      {(data.events ?? []).map((e: Ny511Event) => {
+        const st = EVENT_STYLE[e.type] ?? EVENT_STYLE_OTHER;
+        const start = fmtLocal(e.start_local);
+        const end = fmtLocal(e.planned_end_local);
+        return (
+          <Marker key={e.id} position={[e.lat, e.lon]} icon={trafficEventIcon(e.type)} zIndexOffset={e.type === "accidentsAndIncidents" ? 200 : 0}>
+            <Popup minWidth={220} maxWidth={320}>
+              <div className="space-y-1">
+                <div className="font-semibold">{st.label}{e.subtype ? `: ${e.subtype}` : ""}</div>
+                <div className="text-xs text-ink-muted">{[e.roadway, e.direction, e.county].filter(Boolean).join(" · ")}</div>
+                {(start || end) && <div className="text-xs">{start ? `From ${start}` : ""}{end ? ` until ${end}` : ""}</div>}
+                <div className="text-xs whitespace-pre-line">{e.description}</div>
+                <div className="text-[10px] text-ink-muted">511NY{e.updated_local ? ` · updated ${fmtLocal(e.updated_local)}` : ""}</div>
+              </div>
+            </Popup>
+          </Marker>
+        );
+      })}
+    </>
+  );
+}
+
 function nodeFanIcon(members: NodeRecord[]): L.DivIcon {
   const n = members.length;
   const CARD = 13;
@@ -826,6 +985,18 @@ export default function MapView({ nodes, activeCalls, incidents = [], calls = []
             </FeatureGroup>
           </LayersControl.Overlay>
 
+          {/* Overlays: 511NY DOT cameras + traffic events (server-26#183), opt-in */}
+          <LayersControl.Overlay name={OVERLAY_DOT_CAMERAS}>
+            <FeatureGroup>
+              <DotCameraLayer />
+            </FeatureGroup>
+          </LayersControl.Overlay>
+          <LayersControl.Overlay name={OVERLAY_TRAFFIC_EVENTS}>
+            <FeatureGroup>
+              <TrafficEventLayer />
+            </FeatureGroup>
+          </LayersControl.Overlay>
+
           {/* Overlay: Weather Radar — NEXRAD via Iowa Env Mesonet; key forces remount on refresh */}
           <LayersControl.Overlay name="Weather Radar">
             <TileLayer

drb-frontend/components/SdrSettings.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { c2api } from "@/lib/c2api";
+import type { NodeRecord, SdrDevice } from "@/lib/types";
+
+// node-26#9 / #11. OP25 always has exactly one SDR (pinned by serial, or the
+// first one found). Every other SDR runs the next enabled service, top first;
+// a service can be pinned to the SDR that carries its antenna.
+const MODES: { mode: string; name: string; hint: string }[] = [
+  { mode: "adsb", name: "ADS-B", hint: "Aircraft · 1090 MHz" },
+  { mode: "ais", name: "AIS", hint: "Vessels · 162 MHz" },
+];
+
+type Row = { mode: string; enabled: boolean; pin: string };
+
+function rowsFrom(priority: string[], pins: Record<string, string>): Row[] {
+  const known = priority.filter((m) => MODES.some((x) => x.mode === m));
+  return [
+    ...known.map((mode) => ({ mode, enabled: true, pin: pins[mode] ?? "" })),
+    ...MODES.filter((x) => !known.includes(x.mode)).map((x) => ({ mode: x.mode, enabled: false, pin: pins[x.mode] ?? "" })),
+  ];
+}
+
+const selectClass =
+  "bg-gray-800 border border-gray-700 rounded px-2 py-1 text-gray-200 text-xs focus:outline-none focus:border-indigo-500 disabled:opacity-60 max-w-[13rem]";
+
+function DeviceSelect({
+  value, devices, devicesKnown, autoLabel, label, disabled, onChange,
+}: {
+  value: string;
+  devices: SdrDevice[];
+  devicesKnown: boolean;
+  autoLabel: string;
+  label: string;
+  disabled: boolean;
+  onChange: (serial: string) => void;
+}) {
+  const known = devices.some((d) => d.serial === value);
+  return (
+    <select aria-label={label} value={value} disabled={disabled} onChange={(e) => onChange(e.target.value)} className={selectClass}>
+      <option value="">{autoLabel}</option>
+      {devices.map((d) => (
+        <option key={`${d.index}-${d.serial}`} value={d.serial ?? ""} disabled={!d.serial}>
+          SDR {d.index + 1} · serial {d.serial ?? "unknown"}{d.duplicate_serial ? " (shared serial!)" : ""}
+        </option>
+      ))}
+      {value && !known && (
+        <option value={value}>serial {value} ({devicesKnown ? "not plugged in" : "not reported"})</option>
+      )}
+    </select>
+  );
+}
+
+export function SdrSettings({ node, canEdit }: { node: NodeRecord; canEdit: boolean }) {
+  const priority = node.secondary_sdr_priority ?? [];
+  const pins = node.sdr_pins ?? {};
+  // null/absent = the node has never reported (older firmware, container down
+  // at checkin): unknown, not "nothing running" (server-26#187).
+  const reported = node.secondary_sdr_running != null;
+  const running = node.secondary_sdr_running ?? [];
+  const devices = node.sdr_devices ?? [];
+  const devicesKnown = reported && node.sdr_devices != null;
+
+  const [rows, setRows] = useState<Row[]>(() => rowsFrom(priority, pins));
+  const [op25Pin, setOp25Pin] = useState(pins.op25 ?? "");
+  const [dirty, setDirty] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  // Follow the node's live checkin unless there are unsaved edits.
+  const serverKey = JSON.stringify([priority, pins]);
+  useEffect(() => {
+    if (dirty) return;
+    const [p, pn] = JSON.parse(serverKey) as [string[], Record<string, string>];
+    setRows(rowsFrom(p, pn));
+    setOp25Pin(pn.op25 ?? "");
+  }, [serverKey, dirty]);
+
+  function edit(next: Row[]) {
+    setRows(next);
+    setDirty(true);
+    setMessage(null);
+  }
+
+  function move(i: number, delta: number) {
+    const next = [...rows];
+    [next[i], next[i + delta]] = [next[i + delta], next[i]];
+    edit(next);
+  }
+
+  const pinned = [op25Pin, ...rows.map((r) => r.pin)].filter(Boolean);
+  const clash = new Set(pinned).size !== pinned.length;
+  const op25Moving = op25Pin !== (pins.op25 ?? "");
+
+  async function save() {
+    setSaving(true);
+    setMessage(null);
+    try {
+      const nextPins: Record<string, string | null> = { op25: op25Pin || null };
+      rows.forEach((r) => { nextPins[r.mode] = r.pin || null; });
+      await c2api.updateNode(node.node_id, {
+        secondary_sdr_priority: rows.filter((r) => r.enabled).map((r) => r.mode),
+        sdr_pins: nextPins,
+      });
+      setDirty(false);
+      setMessage("Sent to the node. Status updates when it checks in.");
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : "Save failed.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  let rank = 0;
+
+  return (
+    <section>
+      <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-1">SDRs</h2>
+      <p className="text-xs text-gray-500 font-mono mb-3">
+        {devicesKnown
+          ? `This node reports ${devices.length} SDR${devices.length === 1 ? "" : "s"}.`
+          : "This node hasn't reported its SDRs yet."}
+      </p>
+
+      <div className="bg-gray-900 border border-gray-800 rounded-lg divide-y divide-gray-800 font-mono text-sm">
+        <div className="flex flex-wrap items-center gap-3 px-4 py-2.5">
+          <div className="flex-1 min-w-0">
+            <div className="text-gray-200">OP25 SDR</div>
+            <div className="text-xs text-gray-500">
+              {op25Moving
+                ? "Saving restarts OP25 on the selected SDR."
+                : node.op25_sdr_serial
+                  ? `Using serial ${node.op25_sdr_serial}`
+                  : "P25 / analog scanning"}
+            </div>
+          </div>
+          <DeviceSelect
+            value={op25Pin}
+            devices={devices}
+            devicesKnown={devicesKnown}
+            autoLabel="Automatic (first SDR)"
+            label="OP25 SDR"
+            disabled={!canEdit}
+            onChange={(v) => { setOp25Pin(v); setDirty(true); setMessage(null); }}
+          />
+        </div>
+
+        {rows.map((row, i) => {
+          const meta = MODES.find((x) => x.mode === row.mode)!;
+          const pinMissing = devicesKnown && !!row.pin && !devices.some((d) => d.serial === row.pin);
+          const state = !row.enabled
+            ? "Off"
+            : dirty
+              ? "Unsaved"
+              : !reported
+                ? "Not reported"
+                : running.includes(row.mode)
+                  ? "Running"
+                  : pinMissing
+                    ? "Pinned SDR missing"
+                    : "Waiting for SDR";
+          return (
+            <div key={row.mode} className="flex flex-wrap items-center gap-3 px-4 py-2.5">
+              <span className="w-4 text-right text-gray-600 text-xs">{row.enabled ? ++rank : ""}</span>
+              <input
+                type="checkbox"
+                checked={row.enabled}
+                disabled={!canEdit}
+                aria-label={`Enable ${meta.name}`}
+                onChange={(e) => edit(rows.map((r, j) => (j === i ? { ...r, enabled: e.target.checked } : r)))}
+                className="rounded bg-gray-800 border-gray-700 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-gray-900"
+              />
+              <div className="flex-1 min-w-[7rem]">
+                <div className="text-gray-200">{meta.name}</div>
+                <div className="text-xs text-gray-500">{meta.hint}</div>
+              </div>
+              <DeviceSelect
+                value={row.pin}
+                devices={devices}
+                devicesKnown={devicesKnown}
+                autoLabel="Any spare SDR"
+                label={`${meta.name} SDR`}
+                disabled={!canEdit}
+                onChange={(v) => edit(rows.map((r, j) => (j === i ? { ...r, pin: v } : r)))}
+              />
+              {canEdit && (
+                <div className="flex gap-1">
+                  <button
+                    type="button"
+                    onClick={() => move(i, -1)}
+                    disabled={i === 0}
+                    aria-label={`Move ${meta.name} up`}
+                    className="w-7 h-7 rounded bg-gray-800 hover:bg-gray-700 text-gray-300 disabled:opacity-30"
+                  >
+                    ▲
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => move(i, 1)}
+                    disabled={i === rows.length - 1}
+                    aria-label={`Move ${meta.name} down`}
+                    className="w-7 h-7 rounded bg-gray-800 hover:bg-gray-700 text-gray-300 disabled:opacity-30"
+                  >
+                    ▼
+                  </button>
+                </div>
+              )}
+              <span className={`w-32 text-right text-xs ${state === "Running" ? "text-green-400" : "text-gray-500"}`}>
+                {state}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      <p className="text-xs text-gray-500 font-mono mt-2">
+        Every SDR besides OP25&apos;s runs the next enabled service, top first. Pin a service to the SDR with its
+        antenna, or leave it on &quot;Any spare SDR&quot;.
+      </p>
+      {devices.some((d) => d.duplicate_serial) && (
+        <p className="text-xs text-red-400 font-mono mt-2">
+          Two SDRs share a serial number, so they can&apos;t be told apart. Give each a unique serial (rtl_eeprom -s)
+          before pinning.
+        </p>
+      )}
+      {clash && <p className="text-xs text-red-400 font-mono mt-2">Two services are pinned to the same SDR.</p>}
+
+      {canEdit && (
+        <div className="flex items-center gap-3 mt-3">
+          <button
+            onClick={save}
+            disabled={!dirty || saving || clash}
+            className="px-4 py-2 bg-indigo-700 hover:bg-indigo-600 disabled:opacity-50 text-white rounded-lg text-sm font-mono transition-colors"
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+          {message && <span className="text-xs text-gray-500 font-mono">{message}</span>}
+        </div>
+      )}
+    </section>
+  );
+}

drb-frontend/components/SecondarySdrPriority.tsx

@@ -1,139 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { c2api } from "@/lib/c2api";
-import type { NodeRecord } from "@/lib/types";
-
-// node-26#9. OP25 always keeps its own SDR; every other SDR on the node runs
-// the next enabled item here, top first — so a 3-SDR node runs both.
-const MODES: { mode: string; name: string; hint: string }[] = [
-  { mode: "adsb", name: "ADS-B", hint: "Aircraft · 1090 MHz" },
-  { mode: "ais", name: "AIS", hint: "Vessels · 162 MHz" },
-];
-
-type Row = { mode: string; enabled: boolean };
-
-function rowsFrom(priority: string[]): Row[] {
-  return [
-    ...priority.filter((m) => MODES.some((x) => x.mode === m)).map((mode) => ({ mode, enabled: true })),
-    ...MODES.filter((x) => !priority.includes(x.mode)).map((x) => ({ mode: x.mode, enabled: false })),
-  ];
-}
-
-export function SecondarySdrPriority({ node, canEdit }: { node: NodeRecord; canEdit: boolean }) {
-  const priority = node.secondary_sdr_priority ?? [];
-  const running = node.secondary_sdr_running ?? [];
-  const [rows, setRows] = useState<Row[]>(() => rowsFrom(priority));
-  const [dirty, setDirty] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<string | null>(null);
-
-  // Follow the node's live checkin unless there are unsaved edits.
-  const priorityKey = priority.join(",");
-  useEffect(() => {
-    if (!dirty) setRows(rowsFrom(priorityKey ? priorityKey.split(",") : []));
-  }, [priorityKey, dirty]);
-
-  function edit(next: Row[]) {
-    setRows(next);
-    setDirty(true);
-    setMessage(null);
-  }
-
-  function move(i: number, delta: number) {
-    const next = [...rows];
-    [next[i], next[i + delta]] = [next[i + delta], next[i]];
-    edit(next);
-  }
-
-  async function save() {
-    setSaving(true);
-    setMessage(null);
-    try {
-      await c2api.updateNode(node.node_id, {
-        secondary_sdr_priority: rows.filter((r) => r.enabled).map((r) => r.mode),
-      });
-      setDirty(false);
-      setMessage("Sent to the node. Status updates when it checks in.");
-    } catch (err) {
-      setMessage(err instanceof Error ? err.message : "Save failed.");
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  const sdrCount = node.sdr_count ?? 1;
-  const spare = Math.max(sdrCount - 1, 0);
-  let rank = 0;
-
-  return (
-    <section>
-      <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-1">Secondary SDRs</h2>
-      <p className="text-xs text-gray-500 font-mono mb-3">
-        OP25 always keeps its own SDR. Every other SDR runs the next enabled item, top first.
-        {" "}This node reports {sdrCount} SDR{sdrCount === 1 ? "" : "s"} ({spare} spare).
-      </p>
-      <div className="bg-gray-900 border border-gray-800 rounded-lg divide-y divide-gray-800 font-mono text-sm">
-        {rows.map((row, i) => {
-          const meta = MODES.find((x) => x.mode === row.mode)!;
-          const isRunning = running.includes(row.mode);
-          const state = !row.enabled ? "Off" : dirty ? "Unsaved" : isRunning ? "Running" : "Waiting for SDR";
-          return (
-            <div key={row.mode} className="flex items-center gap-3 px-4 py-2.5">
-              <span className="w-4 text-right text-gray-600 text-xs">{row.enabled ? ++rank : ""}</span>
-              <input
-                type="checkbox"
-                checked={row.enabled}
-                disabled={!canEdit}
-                aria-label={`Enable ${meta.name}`}
-                onChange={(e) => edit(rows.map((r, j) => (j === i ? { ...r, enabled: e.target.checked } : r)))}
-                className="rounded bg-gray-800 border-gray-700 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-gray-900"
-              />
-              <div className="flex-1 min-w-0">
-                <div className="text-gray-200">{meta.name}</div>
-                <div className="text-xs text-gray-500">{meta.hint}</div>
-              </div>
-              {canEdit && (
-                <div className="flex gap-1">
-                  <button
-                    type="button"
-                    onClick={() => move(i, -1)}
-                    disabled={i === 0}
-                    aria-label={`Move ${meta.name} up`}
-                    className="w-7 h-7 rounded bg-gray-800 hover:bg-gray-700 text-gray-300 disabled:opacity-30"
-                  >
-                    ▲
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => move(i, 1)}
-                    disabled={i === rows.length - 1}
-                    aria-label={`Move ${meta.name} down`}
-                    className="w-7 h-7 rounded bg-gray-800 hover:bg-gray-700 text-gray-300 disabled:opacity-30"
-                  >
-                    ▼
-                  </button>
-                </div>
-              )}
-              <span className={`w-28 text-right text-xs ${state === "Running" ? "text-green-400" : "text-gray-500"}`}>
-                {state}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-      {canEdit && (
-        <div className="flex items-center gap-3 mt-3">
-          <button
-            onClick={save}
-            disabled={!dirty || saving}
-            className="px-4 py-2 bg-indigo-700 hover:bg-indigo-600 disabled:opacity-50 text-white rounded-lg text-sm font-mono transition-colors"
-          >
-            {saving ? "Saving…" : "Save priority"}
-          </button>
-          {message && <span className="text-xs text-gray-500 font-mono">{message}</span>}
-        </div>
-      )}
-    </section>
-  );
-}

drb-frontend/lib/c2api.ts

@@ -1,5 +1,5 @@
 import { auth } from "@/lib/firebase";
-import type { AreaContext, TalkgroupPending } from "@/lib/types";
+import type { AreaContext, Ny511Response, TalkgroupPending } from "@/lib/types";
 
 const BASE = process.env.NEXT_PUBLIC_C2_URL ?? "http://localhost:8000";
 
@@ -37,7 +37,12 @@ export const c2api = {
     request(`/nodes/${nodeId}/override/reset`, { method: "POST" }),
   updateNode: (
     id: string,
-    body: { node_type?: string; enforce_override_timeout?: boolean; secondary_sdr_priority?: string[] },
+    body: {
+      node_type?: string;
+      enforce_override_timeout?: boolean;
+      secondary_sdr_priority?: string[];
+      sdr_pins?: Record<string, string | null>;
+    },
   ) =>
     request(`/nodes/${id}`, { method: "PATCH", body: JSON.stringify(body) }),
 
@@ -370,6 +375,12 @@ export const c2api = {
   revokeEnrollmentToken: (tokenId: string) =>
     request(`/org/enrollment-tokens/${tokenId}`, { method: "DELETE" }),
 
+  // 511NY cameras/events inside a map bbox (server-26#183)
+  get511: (bbox: { south: number; west: number; north: number; east: number }, layers: string) =>
+    request<Ny511Response>(`/traffic/511?${new URLSearchParams({
+      south: String(bbox.south), west: String(bbox.west), north: String(bbox.north), east: String(bbox.east), layers,
+    })}`),
+
   // 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) }),

drb-frontend/lib/types.ts

@@ -58,13 +58,26 @@ export interface NodeRecord {
   secondary_sdr_priority?: string[];
   /** What the node's last checkin reported actually running. */
   secondary_sdr_running?: string[] | null;
-  sdr_count?: number;
+  /** node-26#11: service (op25/adsb/ais) -> dongle serial; absent = automatic. */
+  sdr_pins?: Record<string, string>;
+  /** Dongles the node detected, from its checkin; null/absent = not reported. */
+  sdr_devices?: SdrDevice[] | null;
+  /** The dongle OP25 is actually using, per the node. */
+  op25_sdr_serial?: string | null;
+  sdr_count?: number | null; // null = never reported
   enforce_override_timeout?: boolean;
   is_overridden?: boolean;
   override_system_id?: string | null;
   override_timeout_at?: string | null;
 }
 
+export interface SdrDevice {
+  index: number;
+  serial: string | null;
+  name: string;
+  duplicate_serial: boolean;
+}
+
 export interface AircraftTrack {
   icao: string;
   org_id?: string;
@@ -98,6 +111,49 @@ export interface VesselTrack {
   last_seen: string;
 }
 
+// 511NY traffic layer (server-26#183) — GET /traffic/511, cached server-side,
+// not Firestore. *_local times are New York local, no offset: display only.
+export interface Ny511Camera {
+  id: string;
+  lat: number;
+  lon: number;
+  name: string;
+  roadway: string;
+  direction: string;
+  image_url: string | null;
+  video_url: string | null;
+}
+
+export interface Ny511Event {
+  id: string;
+  lat: number;
+  lon: number;
+  type: string;
+  subtype: string;
+  severity: string;
+  roadway: string;
+  direction: string;
+  county: string;
+  description: string;
+  start_local: string | null;
+  planned_end_local: string | null;
+  updated_local: string | null;
+}
+
+export interface Ny511FeedStatus {
+  fetched_at: number | null;  // epoch seconds of the last successful 511NY fetch
+  error: string | null;       // set when the latest refresh failed (data is then stale)
+  total_in_bbox: number;
+  truncated: boolean;
+}
+
+export interface Ny511Response {
+  cameras?: Ny511Camera[];
+  cameras_status?: Ny511FeedStatus;
+  events?: Ny511Event[];
+  events_status?: Ny511FeedStatus;
+}
+
 export interface VocabularyPendingTerm {
   term: string;
   source: "induction" | "correction";

drb-frontend/lib/use511.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type L from "leaflet";
+import { c2api } from "@/lib/c2api";
+import type { Ny511Response } from "@/lib/types";
+
+// 511NY cameras/events for the current map view (server-26#183). Unlike
+// useAircraft/useVessels this is not a Firestore listener: the data is public
+// and statewide, so c2-core caches it in memory and serves a bbox slice.
+// Fetches only while `enabled` (the overlay is on), on pan/zoom (debounced),
+// and on a poll matching the server's events TTL.
+const POLL_MS = 2 * 60 * 1000;
+const MOVE_DEBOUNCE_MS = 400;
+const BBOX_PAD = 0.2;   // fetch a little past the edges so small pans don't blank the layer
+
+export function use511(map: L.Map, layers: "cameras" | "events", enabled: boolean) {
+  const [data, setData] = useState<Ny511Response>({});
+  const [error, setError] = useState<string | null>(null);
+  const seq = useRef(0);
+
+  useEffect(() => {
+    if (!enabled) { setData({}); return; }
+    let debounce: ReturnType<typeof setTimeout> | undefined;
+
+    const load = async () => {
+      const b = map.getBounds().pad(BBOX_PAD);
+      const mine = ++seq.current;
+      try {
+        const res = await c2api.get511(
+          { south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() },
+          layers,
+        );
+        if (mine !== seq.current) return;   // a newer pan's response wins
+        setData(res);
+        setError(null);
+      } catch (e) {
+        if (mine !== seq.current) return;
+        console.error("use511:", e);
+        setError(e instanceof Error ? e.message : String(e));
+      }
+    };
+    const onMove = () => { clearTimeout(debounce); debounce = setTimeout(load, MOVE_DEBOUNCE_MS); };
+
+    load();
+    map.on("moveend", onMove);
+    const poll = setInterval(load, POLL_MS);
+    return () => {
+      map.off("moveend", onMove);
+      clearTimeout(debounce);
+      clearInterval(poll);
+      seq.current++;   // drop any in-flight response
+    };
+  }, [map, layers, enabled]);
+
+  return { data, error };
+}

drb-frontend/package.json

@@ -13,6 +13,7 @@
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "firebase": "^10.12.0",
+    "hls.js": "^1.5.0",
     "leaflet": "^1.9.4",
 "react-leaflet": "^4.2.1",
     "react-markdown": "^9.0.1"

drb-frontend/tailwind.config.ts

@@ -1,5 +1,8 @@
 import type { Config } from "tailwindcss";
 
+const tok = (name: string) =>
+  `color-mix(in srgb, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
+
 const config: Config = {
   content: [
     "./app/**/*.{ts,tsx}",
@@ -15,24 +18,27 @@ const config: Config = {
       // Semantic tokens — defined as CSS custom properties in app/globals.css on
       // :root (light) and .dark (dark). Components must use these names, never a
       // raw gray-9xx, so a theme is one variable block rather than an override sheet.
+      // Wrapped in color-mix so opacity modifiers (bg-surface/90, bg-accent/15)
+      // work — a bare var() hex gives Tailwind nothing to apply alpha to, and the
+      // class silently generates no rule (map overlays rendered see-through).
       colors: {
-        page:        "var(--page)",
+        page:          tok("page"),
-        surface:     "var(--surface)",
+        surface:       tok("surface"),
-        raised:      "var(--raised)",
+        raised:        tok("raised"),
-        line:        "var(--line)",
+        line:          tok("line"),
-        "line-strong": "var(--line-strong)",
+        "line-strong": tok("line-strong"),
         ink: {
-          DEFAULT: "var(--ink)",
+          DEFAULT: tok("ink"),
-          2:       "var(--ink-2)",
+          2:       tok("ink-2"),
-          muted:   "var(--ink-muted)",
+          muted:   tok("ink-muted"),
         },
-        accent:         "var(--accent)",
+        accent:         tok("accent"),
-        "sev-moderate": "var(--sev-moderate)",
+        "sev-moderate": tok("sev-moderate"),
-        "sev-major":    "var(--sev-major)",
+        "sev-major":    tok("sev-major"),
-        "map-bg":    "var(--map-bg)",
+        "map-bg":    tok("map-bg"),
-        "map-block": "var(--map-block)",
+        "map-block": tok("map-block"),
-        "map-road":  "var(--map-road)",
+        "map-road":  tok("map-road"),
-        "map-water": "var(--map-water)",
+        "map-water": tok("map-water"),
       },
       // Marketing/product type scale — used by the (marketing) surface and
       // settings shell so headings read as a deliberate hierarchy rather than