fix(showcase): thread shared now + periodic staleness re-render in dashboard page

Author: jpr5

showcase/shell-dashboard/src/app/page.tsx

@@ -2,7 +2,7 @@
 // Feature matrix: composable overlay-driven 2-tab layout.
 // Matrix tab: overlay toggles control which visual layers render.
 // Ops tab: probe status grid (unchanged from legacy).
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { FeatureGrid } from "@/components/feature-grid";
 import type { CellContext } from "@/components/feature-grid";
 import { StatusTab } from "@/components/status-tab";
@@ -45,6 +45,27 @@ export default function Page() {
 
   const connection = allStatus.status;
 
+  // Wall-clock tick: forces staleness re-evaluation even when no SSE delta
+  // arrives. Without this, a wedged pipeline (no new rows) would never
+  // re-sample time, so a frozen-green cell could never downgrade to stale.
+  // One interval, 60s cadence (well under the staleness window), cleared on
+  // unmount. Bumping `tick` only invalidates the `now` memo below, so the
+  // re-render is cheap — the same recompute that already runs on every SSE
+  // delta.
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 60_000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Single reference time shared by EVERY staleness-deriving call below
+  // (healthStats, depthDistribution, d6Stats, renderCell). Re-sampled when
+  // live-status changes OR the 60s `tick` fires, so chips and stats agree on
+  // which green rows are stale instead of each defaulting to its own
+  // `Date.now()` that may have crossed a window boundary milliseconds later.
+  // Mirrors the single-`now` discipline in cell-matrix.tsx.
+  const now = useMemo(() => Date.now(), [liveStatus, tick]);
+
   // R2-D.1: real probe wiring. `useProbes` polls the ops API every 10s and
   // feeds the schedule grid; `useTriggerProbe` POSTs to /trigger with the
   // operator token. If the token is unset, the trigger callback throws
@@ -85,12 +106,16 @@ export default function Page() {
     for (const cell of catalogData.cells) {
       if (cell.status !== "wired" || cell.feature === null) continue;
       // "wired" status implies supported — no need to check unsupported here
-      const model = buildCellModel(liveStatus, {
-        slug: cell.integration,
-        featureId: cell.feature,
-        isSupported: true,
-        isWired: true,
-      });
+      const model = buildCellModel(
+        liveStatus,
+        {
+          slug: cell.integration,
+          featureId: cell.feature,
+          isSupported: true,
+          isWired: true,
+        },
+        now,
+      );
       switch (model.chipColor) {
         case "green":
           green++;
@@ -107,7 +132,7 @@ export default function Page() {
       }
     }
     return { green, amber, red };
-  }, [liveStatus]);
+  }, [liveStatus, now]);
 
   // Compute parity tier counts
   const parityStats = useMemo(() => {
@@ -163,17 +188,21 @@ export default function Page() {
     for (const cell of catalogData.cells) {
       if (cell.status !== "wired" || cell.feature === null) continue;
       // "wired" status implies supported — no need to check unsupported here
-      const model = buildCellModel(liveStatus, {
-        slug: cell.integration,
-        featureId: cell.feature,
-        isSupported: true,
-        isWired: true,
-      });
+      const model = buildCellModel(
+        liveStatus,
+        {
+          slug: cell.integration,
+          featureId: cell.feature,
+          isSupported: true,
+          isWired: true,
+        },
+        now,
+      );
       const key = `d${model.achievedDepth}` as keyof DepthDistribution;
       dist[key]++;
     }
     return dist;
-  }, [liveStatus]);
+  }, [liveStatus, now]);
 
   // Compute D6 (parity-vs-reference) rollup counts across wired cells.
   const d6Stats = useMemo((): D6Stats => {
@@ -182,7 +211,9 @@ export default function Page() {
     let red = 0;
     for (const cell of catalogData.cells) {
       if (cell.status !== "wired" || cell.feature === null) continue;
-      const state = resolveCell(liveStatus, cell.integration, cell.feature);
+      const state = resolveCell(liveStatus, cell.integration, cell.feature, {
+        now,
+      });
       switch (state.d6.tone) {
         case "green":
           green++;
@@ -196,7 +227,7 @@ export default function Page() {
       }
     }
     return { green, gray, red };
-  }, [liveStatus]);
+  }, [liveStatus, now]);
 
   // renderCell callback wrapping UnifiedCell + buildCellModel.
   // buildCellModel is the single source of truth for cell state — it handles
@@ -207,15 +238,19 @@ export default function Page() {
         ctx.integration.not_supported_features?.includes(ctx.feature.id) ??
         false
       );
-      const model = buildCellModel(ctx.liveStatus, {
-        slug: ctx.integration.slug,
-        featureId: ctx.feature.id,
-        isSupported,
-        isWired: true, // renderCell only called when demo exists
-      });
+      const model = buildCellModel(
+        ctx.liveStatus,
+        {
+          slug: ctx.integration.slug,
+          featureId: ctx.feature.id,
+          isSupported,
+          isWired: true, // renderCell only called when demo exists
+        },
+        now,
+      );
       return <UnifiedCell ctx={ctx} model={model} overlays={overlays} />;
     },
-    [overlays],
+    [overlays, now],
   );
 
   return (