Live wall: truth strip keyed to the pipeline, not node heartbeats (#232)

The '● Live · Ns ago' pill was reset by any node/activeCalls/incident change,
so heartbeats kept it green while STT/correlation were dead (#196).

- lib/usePipelineHealth.ts: polls /health/ai (auth-free) every 60 s and
  derives stage staleness from data too, since /health/ai resets on restart.
  Radio = newest call; STT = calls heard after the newest transcript, dry when
  >=3 are waiting and the oldest is > N min; AI = newest incident write /
  linked call + any degraded /health/ai tier. N = NEXT_PUBLIC_WALL_STALE_MIN
  (default 10); radio silence and AI absence get 3N (weaker evidence).
- components/live/TruthStrip.tsx: per-stage chips; full-width amber
  DEGRADED bar naming the dry stage and any degraded tier.
- LiveView: heartbeat lastUpdated removed and no longer passed to MapView
  (hides the old pill without touching MapView); 'Listening' only when every
  stage is healthy; map + rail greyed when degraded; nodes KPI is now
  'nodes hearing' (a call in the last N min).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

drb-frontend/components/LiveView.tsx

@@ -27,6 +27,8 @@ import { TimeScrubber } from "@/components/TimeScrubber";
 import { TranscriptTicker } from "@/components/live/TranscriptTicker";
 import { CameraDrill } from "@/components/live/CameraDrill";
 import { IncidentPanel, RegionPanel } from "@/components/live/WallPanels";
+import { TruthStrip } from "@/components/live/TruthStrip";
+import { usePipelineHealth } from "@/lib/usePipelineHealth";
 
 const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
 
@@ -93,12 +95,11 @@ export function LiveView() {
   const { calls: recentCalls, loading: callsLoading } = useCalls(500);
   const { aircraft } = useAircraft();
   const { vessels } = useVessels();
-  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const [clock, setClock] = useState<string>("");
 
-  useEffect(() => {
-    if (!nodesLoading) setLastUpdated(new Date());
-  }, [nodes, activeCalls, activeIncidents, nodesLoading]);
+  // No heartbeat-driven "last updated" any more (server-26#232): a node
+  // check-in kept '● Live' fresh while STT/correlation were dead (#196). The
+  // wall's liveness now comes from usePipelineHealth, keyed to pipeline output.
   useEffect(() => {
     const tick = () => setClock(new Date().toLocaleTimeString([], { hour12: false }));
     tick();
@@ -156,6 +157,13 @@ export function LiveView() {
   }, [pointsById, cams.cameras]);
   const camCountByIncident = useMemo(() => new Map(Array.from(nearById.entries()).map(([id, n]) => [id, n.length])), [nearById]);
   const events = useRegionEvents(regionBox);
+  const health = usePipelineHealth({
+    calls: recentCalls,
+    incidents: activeIncidents,
+    nodes,
+    eventsStatus: events.events_status,
+    cameraProviders: cams.providers,
+  });
   const onAir = useMemo(() => onAirIncidentIds(activeIncidents, activeCalls), [activeIncidents, activeCalls]);
 
   const selected = link.inc ? activeIncidents.find((i) => i.incident_id === link.inc) ?? null : null;
@@ -220,13 +228,14 @@ export function LiveView() {
 
   // ── KPIs ──────────────────────────────────────────────────────────────────
   const count = (sev: string) => activeIncidents.filter((i) => i.severity === sev).length;
-  const nodesUp = nodes.filter((n) => n.status !== "offline").length;
+  // "Nodes hearing": a call in the last N min, not merely not-offline — a node
+  // that checks in but hears nothing is not contributing to the picture.
+  const nodesHearing = health.nodesHearing;
   const eventsOff = !!events.events_status?.disabled;
 
-  const configuredButQuiet = !nodesLoading && nodes.length > 0 && activeIncidents.length === 0;
-  const mostRecentSeen = configuredButQuiet
-    ? nodes.map((n) => n.last_seen).filter((s): s is string => !!s).sort().at(-1)
-    : null;
+  // "Listening" only when every stage is healthy; otherwise the amber bar says why.
+  const configuredButQuiet = !nodesLoading && !callsLoading && nodes.length > 0
+    && activeIncidents.length === 0 && !health.degraded;
 
   const crumb = (label: string, active: boolean, enabled: boolean, onClick: () => void) => (
     <button type="button" disabled={!enabled} onClick={onClick} aria-current={active ? "true" : undefined}
@@ -251,13 +260,14 @@ export function LiveView() {
           <Kpi value={count("major")} label="major" />
           <Kpi value={count("moderate")} label="moderate" />
           <Kpi value={activeIncidents.length} label="active" />
-          <Kpi value={`${nodesUp}/${nodes.length}`} label="nodes" />
+          <Kpi value={`${nodesHearing}/${nodes.length}`} label={`nodes hearing (${health.staleMin}m)`} />
           <Kpi value={cams.cameras.length} label="cams" />
           <Kpi value={aircraft.length} label="aircraft" />
           <Kpi value={vessels.length} label="vessels" />
           <Kpi value={eventsOff ? "—" : events.events?.length ?? 0} label="road events" />
         </div>
         <div className="ml-auto flex items-center gap-3">
+          <TruthStrip health={health} placement="chips" />
           <button type="button" aria-pressed={link.tour} onClick={() => setLink({ ...link, cam: null, tour: !link.tour })}
             title="Wall mode: cycle through active incidents, worst first"
             className={`px-2 py-0.5 rounded border ${link.tour ? "bg-accent text-white border-accent" : "border-line text-ink-2 hover:text-ink"}`}>
@@ -271,9 +281,13 @@ export function LiveView() {
           <span className="font-mono text-ink-2 tabular-nums">{clock}</span>
         </div>
       </div>
+      <TruthStrip health={health} placement="bar" />
 
       <div className="flex-1 min-h-0 flex flex-col lg:flex-row">
         <div className="relative h-[55vh] lg:h-auto lg:flex-1 min-w-0 shrink-0">
+          {/* Degraded → grey the map and its incident rail (the rail lives inside
+              MapView, so it is wrapped here rather than edited). */}
+          <div className={`w-full h-full transition-[filter,opacity] ${health.degraded ? "grayscale opacity-60" : ""}`}>
           {nodesLoading || callsLoading ? (
             <div className="w-full h-full flex items-center justify-center text-ink-muted text-sm">Loading map…</div>
           ) : (
@@ -282,7 +296,6 @@ export function LiveView() {
               activeCalls={activeCalls}
               incidents={activeIncidents}
               calls={recentCalls}
-              lastUpdated={lastUpdated}
               selectedIncidentId={selected?.incident_id ?? null}
               onSelectIncident={selectIncident}
               nearCameras={near}
@@ -291,13 +304,14 @@ export function LiveView() {
               camCountByIncident={camCountByIncident}
             />
           )}
+          </div>
 
           {/* Configured-and-quiet — distinct from "no nodes at all" (chunk 10's
               Activation screen handles the zero-node case). */}
           {configuredButQuiet && (
             <div className="absolute top-12 left-1/2 -translate-x-1/2 z-[1001] pointer-events-none">
               <span className="bg-surface/90 border border-line rounded-full px-3 py-1 text-xs text-ink-2 whitespace-nowrap">
-                ● Listening{mostRecentSeen ? ` — last check-in ${timeAgo(new Date(mostRecentSeen))}` : ""}
+                ● Listening{health.newestCallAt ? ` — last call heard ${timeAgo(health.newestCallAt)}` : ""}
               </span>
             </div>
           )}

drb-frontend/components/live/TruthStrip.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+/**
+ * Truth strip (server-26#232) — replaces the heartbeat-driven '● Live' pill.
+ *
+ * Healthy: compact per-stage chips (Radio · Transcripts · AI · Feeds), each
+ * with its last-output age. Any core stage dry past the threshold, or any
+ * /health/ai tier degraded: a full-width amber bar that says what broke and
+ * since when — "DEGRADED — radio heard, not transcribed since 12:15".
+ * Theme tokens only (sev-moderate is the amber), so both themes follow.
+ */
+import type { PipelineHealth, PipelineStage } from "@/lib/usePipelineHealth";
+
+function dotClass(s: PipelineStage["state"]): string {
+  if (s === "degraded") return "bg-sev-moderate";
+  if (s === "unknown") return "bg-ink-muted";
+  return "bg-ink-2";
+}
+
+export function TruthChips({ health }: { health: PipelineHealth }) {
+  return (
+    <div className="flex items-center gap-1.5 flex-wrap" role="status" aria-label="Pipeline health">
+      {health.stages.map((s) => (
+        <span key={s.key} title={s.detail}
+          className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded border text-[11px] whitespace-nowrap ${
+            s.state === "degraded" ? "border-sev-moderate text-ink bg-sev-moderate/10" : "border-line text-ink-2"}`}>
+          <span className={`w-1.5 h-1.5 rounded-full ${dotClass(s.state)}`} aria-hidden="true" />
+          {s.label}
+          <span className="sr-only">: {s.state === "ok" ? "healthy" : s.state}, {s.detail}</span>
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export function TruthBar({ health }: { health: PipelineHealth }) {
+  if (!health.degraded || !health.message) return null;
+  return (
+    <div role="alert"
+      className="shrink-0 w-full px-3 py-1.5 border-b border-sev-moderate bg-sev-moderate/15 text-xs text-ink flex flex-wrap items-baseline gap-x-2">
+      <b className="font-bold tracking-wide">DEGRADED</b>
+      <span>— {health.message}</span>
+      <span className="ml-auto text-ink-muted whitespace-nowrap">
+        stale after {health.staleMin} min · map shows last-known state
+      </span>
+    </div>
+  );
+}
+
+/** Chips for the wall bar, plus the bar itself directly below it when degraded. */
+export function TruthStrip({ health, placement }: { health: PipelineHealth; placement: "chips" | "bar" }) {
+  return placement === "chips" ? <TruthChips health={health} /> : <TruthBar health={health} />;
+}