@hugpy/video-intelligence-ui 0.1.0 → 0.3.0

package/src/stations/oracle/OracleStation.tsx

@@ -0,0 +1,304 @@
+/**
+ * or-k18 / k114 — the Oracle station: the in-between of generation, made
+ * visible.
+ *
+ *  1. Steward — the selector's self-audit (findings by severity, matrix_stale
+ *     banner, last run time, re-run → POST).
+ *  2. Run picker — the performance jobs on the media bus (the same
+ *     GET /video/jobs feed Active Processes reads), and the picked run's
+ *     manifest from GET /video/jobs/<id> → result.movie.
+ *  3. Run header — run id, ok/gap, digests, registry version, receipts.
+ *  4. Tabs: DAG (node states + per-node drawer) · Spatial overlays (honest
+ *     placeholder) · Ledger (central reliability ledger summary + catalog).
+ *
+ * Every object on this screen is shown with where it came from and a raw JSON
+ * fold-out; every absence is named (route missing, selector disabled, no dag
+ * block, no spatial conditioning) rather than left blank.
+ */
+import { useState } from "react";
+
+import type { StationSpec } from "../types";
+import { DagPanel } from "./DagPanel";
+import { SpatialTab } from "./SpatialTab";
+import { StewardPanel } from "./StewardPanel";
+import { GapNote, RawJson, StateChip, Tag, short, when } from "./oracleShared";
+import {
+  useCapabilities,
+  useLedgerSummary,
+  usePerformanceJobs,
+  useRunManifest,
+  useSteward,
+  type RunManifestApi,
+} from "./useOracle";
+import "./oracle.css";
+
+type TabId = "dag" | "spatial" | "ledger";
+
+function RunPicker({ runs }: { runs: RunManifestApi }) {
+  const jobs = usePerformanceJobs();
+  const [manual, setManual] = useState("");
+  return (
+    <section className="vi-oracle-panel" aria-label="Runs">
+      <h3>
+        Runs
+        <span className="vi-oracle-sub">performance jobs on the media bus (GET /video/jobs?all=1) — pick one to read its manifest</span>
+      </h3>
+      <div className="vi-oracle-row">
+        <button type="button" className="vi-btn vi-btn-sm" onClick={jobs.refresh}>
+          Refresh list
+        </button>
+        <input
+          className="vi-oracle-grow"
+          placeholder="…or paste a job id"
+          value={manual}
+          onChange={(e) => setManual(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && manual.trim()) runs.select(manual.trim());
+          }}
+        />
+        <button type="button" className="vi-btn vi-btn-sm" disabled={!manual.trim()} onClick={() => runs.select(manual.trim())}>
+          Open
+        </button>
+        {runs.jobId ? (
+          <button type="button" className="vi-btn vi-btn-sm vi-btn-ghost" onClick={() => runs.select(null)}>
+            Clear
+          </button>
+        ) : null}
+      </div>
+      <GapNote gap={jobs.gap} />
+      <div className="vi-oracle-runs" style={{ marginTop: "0.5rem" }}>
+        {jobs.jobs.map((j) => (
+          <button
+            key={j.id}
+            type="button"
+            className={`vi-btn vi-btn-sm${runs.jobId === j.id ? " vi-btn-on" : ""}`}
+            onClick={() => runs.select(j.id)}
+            title={`${j.name} · ${j.status}${j.runId ? ` · run ${j.runId}` : ""}`}
+          >
+            {short(j.id, 10)} · {j.status}
+            {j.runId ? ` · ${short(j.runId, 10)}` : ""}
+          </button>
+        ))}
+        {!jobs.jobs.length && !jobs.gap ? (
+          <span className="vi-knob-hint">
+            No performance jobs in the bus feed (live or recent terminal). Enqueue one via the oracle runner, or paste an
+            older job id.
+          </span>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+function RunHeader({ runs }: { runs: RunManifestApi }) {
+  const m = runs.manifest;
+  const job = runs.job;
+  if (!runs.jobId) return null;
+  return (
+    <section className="vi-oracle-panel" aria-label="Run">
+      <h3>
+        Run
+        <span className="vi-oracle-sub">GET /video/jobs/{runs.jobId} → result.movie</span>
+        <button type="button" className="vi-btn vi-btn-sm" style={{ marginLeft: "auto" }} onClick={runs.refresh} disabled={runs.loading}>
+          {runs.loading ? "Reading…" : "Re-read"}
+        </button>
+      </h3>
+      <GapNote gap={runs.gap} />
+      {job && !m ? (
+        <p className="vi-oracle-gap" role="status">
+          Job <code>{job.job_id}</code> is <StateChip state={job.status ?? "unknown"} />
+          {job.result ? (
+            <> and its result carries no manifest (<code>result.movie</code> is empty){job.result.error ? <> — {job.result.error.code}: {job.result.error.message}</> : null}.</>
+          ) : (
+            <> with no result yet — the manifest is written at the terminal transition.</>
+          )}
+          {job.progress ? <RawJson label="live progress" value={job.progress} /> : null}
+        </p>
+      ) : null}
+      {m ? (
+        <>
+          <div className="vi-oracle-row">
+            <Tag kind={m.ok ? "ok" : "alarm"}>{m.ok ? "ok" : "not ok"}</Tag>
+            {m.stopped_after ? <Tag kind="warn">stopped after {m.stopped_after}</Tag> : null}
+            {job?.status ? <StateChip state={job.status} /> : null}
+            {m.dag ? <Tag kind="accent">ran on the DAG</Tag> : <Tag>linear recipe</Tag>}
+            {job?.result?.error ? (
+              <Tag kind="alarm">
+                {job.result.error.code}: {job.result.error.message}
+              </Tag>
+            ) : null}
+          </div>
+          <dl className="vi-oracle-kv" style={{ marginTop: "0.5rem" }}>
+            <dt>run id</dt>
+            <dd>
+              <code>{m.run_id}</code>
+            </dd>
+            <dt>registry version</dt>
+            <dd>
+              <code>{m.registry_version ?? "not recorded"}</code>
+            </dd>
+            <dt>goal / snapshot / lock</dt>
+            <dd>
+              <code>{short(m.goal_digest)}</code> · <code>{short(m.snapshot_digest)}</code> · <code>{short(m.lock_digest)}</code>
+            </dd>
+            <dt>segments</dt>
+            <dd>{m.segment_digests?.length ?? 0}</dd>
+            <dt>video</dt>
+            <dd>{m.video_ref ? <code title={m.video_ref}>{short(m.video_ref, 56)}</code> : "none accepted"}</dd>
+            <dt>receipts</dt>
+            <dd>
+              {(m.receipts ?? []).length ? (
+                <ul className="vi-oracle-reasons" style={{ marginTop: 0 }}>
+                  {(m.receipts ?? []).map((r, i) => (
+                    <li key={i}>
+                      <code>{r.capability}</code> → <code>{r.model_id}</code>
+                      {r.worker ? <> on {r.worker}</> : null} · {when(r.started_at)}
+                      {typeof r.duration_s === "number" ? <> · {r.duration_s.toFixed(1)}s</> : null}
+                      {r.failure ? <Tag kind="alarm">{r.failure}</Tag> : null}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <span className="vi-knob-hint">none in the manifest</span>
+              )}
+            </dd>
+            <dt>state path</dt>
+            <dd>
+              <code>{m.state_path ?? "—"}</code>
+            </dd>
+          </dl>
+          {m.gap ? (
+            <p className="vi-oracle-gap">
+              gap at stage <code>{String(m.gap.stage)}</code>: {String(m.gap.diagnosis ?? "")}
+              {m.gap.requirement ? <> — required: {String(m.gap.requirement)}</> : null}
+            </p>
+          ) : null}
+          {m.limitations?.length ? (
+            <ul className="vi-oracle-limits">
+              {m.limitations.map((l, i) => (
+                <li key={i}>{l}</li>
+              ))}
+            </ul>
+          ) : null}
+          {m.warnings?.length ? <RawJson label={`warnings (${m.warnings.length})`} value={m.warnings} /> : null}
+          <RawJson label="manifest json" value={m} />
+        </>
+      ) : null}
+    </section>
+  );
+}
+
+function LedgerTab() {
+  const ledger = useLedgerSummary();
+  const caps = useCapabilities();
+  return (
+    <>
+      <section className="vi-oracle-panel" aria-label="Ledger">
+        <h3>
+          Reliability ledger
+          <span className="vi-oracle-sub">GET /api/oracle/ledger/summary — the ONE record workers share</span>
+          <button type="button" className="vi-btn vi-btn-sm" style={{ marginLeft: "auto" }} onClick={ledger.refresh}>
+            Refresh
+          </button>
+        </h3>
+        <GapNote gap={ledger.gap} />
+        {ledger.summary ? (
+          <>
+            <div className="vi-oracle-row">
+              {ledger.summary.remote ? <Tag kind="accent">remote: {String(ledger.summary.remote)}</Tag> : <Tag>local ledger</Tag>}
+              {Object.entries(ledger.summary)
+                .filter(([k, v]) => typeof v === "number" && k !== "ok")
+                .map(([k, v]) => (
+                  <span key={k}>
+                    <Tag>
+                      {k}: {String(v)}
+                    </Tag>
+                  </span>
+                ))}
+            </div>
+            <RawJson label="ledger summary json" value={ledger.summary} open />
+          </>
+        ) : !ledger.gap ? (
+          <p className="vi-oracle-note">Reading the ledger…</p>
+        ) : null}
+      </section>
+      <section className="vi-oracle-panel" aria-label="Capabilities">
+        <h3>
+          Capability catalog
+          <span className="vi-oracle-sub">GET /api/oracle/capabilities — registry {caps.caps?.registry_version ? <code>{short(caps.caps.registry_version)}</code> : "unknown"}</span>
+        </h3>
+        <GapNote gap={caps.gap} />
+        {caps.caps?.capabilities?.length ? (
+          <table className="vi-oracle-table">
+            <thead>
+              <tr>
+                <th>capability</th>
+                <th>eligible models</th>
+              </tr>
+            </thead>
+            <tbody>
+              {caps.caps.capabilities.map((c) => (
+                <tr key={c.name}>
+                  <td>
+                    <code>{c.name}</code>
+                  </td>
+                  <td>{c.model_ids?.length ? c.model_ids.map((m) => <code key={m} style={{ marginRight: "0.5rem" }}>{m}</code>) : <span className="vi-knob-hint">none eligible</span>}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : caps.caps && !caps.gap ? (
+          <p className="vi-oracle-note">The catalog answered with zero capabilities.</p>
+        ) : null}
+        {caps.caps ? <RawJson label="capabilities json" value={caps.caps} /> : null}
+      </section>
+    </>
+  );
+}
+
+export function OracleStation({ spec }: { spec: StationSpec }) {
+  const steward = useSteward();
+  const runs = useRunManifest();
+  const [tab, setTab] = useState<TabId>("dag");
+
+  const tabs: Array<{ id: TabId; label: string }> = [
+    { id: "dag", label: "DAG" },
+    { id: "spatial", label: "Spatial overlays" },
+    { id: "ledger", label: "Ledger + catalog" },
+  ];
+
+  return (
+    <section className="station-card station-wide vi-oracle" aria-label={spec.title}>
+      <p className="station-phase">{spec.phase}</p>
+      <p className="station-blurb">{spec.blurb}</p>
+
+      <StewardPanel api={steward} embedded={runs.manifest?.dag?.steward ?? null} />
+      <RunPicker runs={runs} />
+      <RunHeader runs={runs} />
+
+      <div>
+        <div className="vi-oracle-tabs" role="tablist" aria-label="Oracle views">
+          {tabs.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              role="tab"
+              id={`vi-oracle-tab-${t.id}`}
+              aria-selected={tab === t.id}
+              aria-controls={`vi-oracle-panel-${t.id}`}
+              className="vi-oracle-tab"
+              onClick={() => setTab(t.id)}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+        <div role="tabpanel" id={`vi-oracle-panel-${tab}`} aria-labelledby={`vi-oracle-tab-${tab}`}>
+          {tab === "dag" ? <DagPanel runs={runs} /> : null}
+          {tab === "spatial" ? <SpatialTab manifest={runs.manifest} /> : null}
+          {tab === "ledger" ? <LedgerTab /> : null}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/stations/oracle/SpatialTab.tsx

@@ -0,0 +1,185 @@
+/**
+ * or-k18 — "spatial overlays", the honest placeholder.
+ *
+ * The spatial layer (oracle/spatial.py SpatialSceneManifest, oracle/spatial_eval.py
+ * SpatialEvalReport) exists, and the DAG grows a `spatial:<seg>` node when a
+ * segment carries a manifest — but the evaluator is NOT yet folded into the run
+ * manifest, and most runs carry `SegmentSpec.spatial_ref = None`. So this tab
+ * does not draw overlays it cannot source. It walks the manifest for anything
+ * shaped like a spatial manifest / eval report / spatial_manifest ref and prints
+ * what it finds with the JSON path it found it at; otherwise it says "no spatial
+ * conditioning" and quotes the run's own limitation line when there is one.
+ */
+import { useMemo } from "react";
+
+import type { RunManifest } from "./oracleTypes";
+import { findSpatial } from "./useOracle";
+import { RawJson, Tag } from "./oracleShared";
+
+function isRecord(v: unknown): v is Record<string, unknown> {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+export function SpatialTab({ manifest }: { manifest: RunManifest | null }) {
+  const finds = useMemo(() => findSpatial(manifest), [manifest]);
+  const spatialNodes = useMemo(
+    () => Object.entries(manifest?.dag?.nodes ?? {}).filter(([id]) => id.startsWith("spatial:")),
+    [manifest],
+  );
+  const limitation = (manifest?.limitations ?? []).find((l) => /spatial/i.test(l)) ?? null;
+
+  if (!manifest) {
+    return (
+      <section className="vi-oracle-panel" aria-label="Spatial overlays">
+        <h3>
+          Spatial overlays
+          <span className="vi-oracle-sub">placeholder — renders spatial manifests + evaluator metrics when a run carries them</span>
+        </h3>
+        <p className="vi-oracle-note">Pick a performance run to look for spatial conditioning.</p>
+      </section>
+    );
+  }
+
+  const manifests = finds.filter((f) => f.kind === "manifest");
+  const evals = finds.filter((f) => f.kind === "eval");
+  const refs = finds.filter((f) => f.kind === "ref");
+
+  return (
+    <section className="vi-oracle-panel" aria-label="Spatial overlays">
+      <h3>
+        Spatial overlays
+        <span className="vi-oracle-sub">placeholder — no geometry is drawn here yet; the data is shown as it is</span>
+      </h3>
+
+      <div className="vi-oracle-row">
+        <Tag kind={manifests.length ? "accent" : undefined}>{manifests.length} spatial manifest(s)</Tag>
+        <Tag kind={evals.length ? "accent" : undefined}>{evals.length} evaluator report(s)</Tag>
+        <Tag>{refs.length} spatial_manifest ref(s) on segments</Tag>
+        <Tag>{spatialNodes.length} spatial:* DAG node(s)</Tag>
+      </div>
+
+      {!manifests.length && !evals.length && !refs.length && !spatialNodes.length ? (
+        <>
+          <p className="vi-oracle-gap" role="status">
+            No spatial conditioning on this run. {limitation ? <>The run says so itself: “{limitation}”</> : <>No SegmentSpec carried a <code>spatial_ref</code>, no <code>spatial:&lt;seg&gt;</code> node was built, and no SpatialSceneManifest or SpatialEvalReport appears anywhere in the manifest.</>}
+          </p>
+          <p className="vi-oracle-note">
+            When a run is conditioned, this tab will list each segment's manifest (coordinate system, camera, entities,
+            timebase, provenance) and the evaluator's per-rubric metrics with their codes and thresholds. Overlay
+            rendering on frames is not built; nothing here will pretend it is.
+          </p>
+        </>
+      ) : null}
+
+      {spatialNodes.length ? (
+        <>
+          <h4>spatial DAG nodes</h4>
+          <table className="vi-oracle-table">
+            <thead>
+              <tr>
+                <th>node</th>
+                <th>state</th>
+              </tr>
+            </thead>
+            <tbody>
+              {spatialNodes.map(([id, st]) => (
+                <tr key={id}>
+                  <td>
+                    <code>{id}</code>
+                  </td>
+                  <td>{String(st)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <p className="vi-oracle-note">
+            A spatial node validates the segment's manifest against the lock and emits the conditioning request; its
+            outputs (conditioning, manifest_digest, validation) live in the journal and are not exported in the manifest.
+          </p>
+        </>
+      ) : null}
+
+      {refs.length ? (
+        <>
+          <h4>spatial_manifest refs</h4>
+          <ul className="vi-oracle-reasons">
+            {refs.map((f) => (
+              <li key={f.path}>
+                <code>{f.path}</code> → <code>{String(f.value)}</code>
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : null}
+
+      {manifests.map((f) => {
+        const m = isRecord(f.value) ? f.value : {};
+        return (
+          <div key={f.path}>
+            <h4>
+              spatial manifest <span className="vi-knob-hint">at {f.path || "(root)"}</span>
+            </h4>
+            <dl className="vi-oracle-kv">
+              <dt>segment</dt>
+              <dd>{String(m.segment_id ?? "—")}</dd>
+              <dt>schema</dt>
+              <dd>{String(m.schema_version ?? "—")}</dd>
+              <dt>revision</dt>
+              <dd>{String(m.artifact_revision ?? "—")}</dd>
+              <dt>entities</dt>
+              <dd>{Array.isArray(m.entities) ? m.entities.length : "—"}</dd>
+              <dt>fallbacks</dt>
+              <dd>{Array.isArray(m.fallbacks) ? m.fallbacks.length : "—"}</dd>
+            </dl>
+            <RawJson label="manifest json" value={m} open />
+          </div>
+        );
+      })}
+
+      {evals.map((f) => {
+        const r = isRecord(f.value) ? f.value : {};
+        const metrics = Array.isArray(r.metrics) ? (r.metrics as Array<Record<string, unknown>>) : [];
+        return (
+          <div key={f.path}>
+            <h4>
+              evaluator report <span className="vi-knob-hint">at {f.path || "(root)"}</span>
+            </h4>
+            <div className="vi-oracle-row">
+              <Tag kind={r.ok ? "ok" : "alarm"}>{r.ok ? "ok" : "drift"}</Tag>
+              <Tag>segment {String(r.segment_id ?? "—")}</Tag>
+              <Tag>{Array.isArray(r.measured) ? r.measured.length : 0} measured</Tag>
+              <Tag>{Array.isArray(r.skipped) ? r.skipped.length : 0} skipped</Tag>
+            </div>
+            {metrics.length ? (
+              <table className="vi-oracle-table" style={{ marginTop: "0.5rem" }}>
+                <thead>
+                  <tr>
+                    <th>metric</th>
+                    <th>value</th>
+                    <th>threshold</th>
+                    <th>code</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {metrics.map((m, i) => (
+                    <tr key={i}>
+                      <td>{String(m.name ?? m.rubric ?? i)}</td>
+                      <td>
+                        <code>{String(m.value ?? m.measured ?? "—")}</code>
+                      </td>
+                      <td>
+                        <code>{String(m.threshold ?? "—")}</code>
+                      </td>
+                      <td>{m.code ? <Tag kind="warn">{String(m.code)}</Tag> : <span className="vi-knob-hint">—</span>}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : null}
+            <RawJson label="evaluator json" value={r} />
+          </div>
+        );
+      })}
+    </section>
+  );
+}

package/src/stations/oracle/StewardPanel.tsx

@@ -0,0 +1,165 @@
+/**
+ * or-k18 — the steward report: the system checking itself (k113c).
+ *
+ * GET /api/oracle/steward is report-only. The "Re-run" button POSTs, which
+ * re-audits AND applies bounded rebalancing to the live selector — the button
+ * says so, because "re-run" that silently changes policy would be a lie.
+ *
+ * Findings are grouped by severity (alarm → warn → info). A `matrix_stale`
+ * finding is promoted to its own banner regardless of severity: a stale
+ * routing matrix means every selection below is reasoning from old evidence.
+ */
+import { useMemo } from "react";
+
+import type { StewardFinding, StewardReport } from "./oracleTypes";
+import type { StewardApi } from "./useOracle";
+import { GapNote, RawJson, Tag, ago, when } from "./oracleShared";
+
+const ORDER: Array<"alarm" | "warn" | "info"> = ["alarm", "warn", "info"];
+
+function bucket(findings: StewardFinding[]): Record<string, StewardFinding[]> {
+  const out: Record<string, StewardFinding[]> = { alarm: [], warn: [], info: [], other: [] };
+  for (const f of findings) {
+    const k = ORDER.includes(f.severity as "alarm") ? f.severity : "other";
+    out[k].push(f);
+  }
+  return out;
+}
+
+function sevOf(f: StewardFinding): "alarm" | "warn" | "info" {
+  return (ORDER.includes(f.severity as "alarm") ? f.severity : "info") as "alarm" | "warn" | "info";
+}
+
+/** The BODY of one finding row. The `<li key>` wrapper stays at the call site —
+ *  this project's scoped tsconfig rejects a `key` prop on a locally-declared
+ *  component (the JobRow idiom in ActiveProcessesStation). */
+function FindingBody({ f }: { f: StewardFinding }) {
+  return (
+    <>
+      <div className="vi-oracle-finding-head">
+        <Tag kind={sevOf(f)}>{f.severity}</Tag>
+        <Tag>{f.kind}</Tag>
+        {f.capability ? <code>{f.capability}</code> : <span className="vi-knob-hint">fleet-wide</span>}
+      </div>
+      <div style={{ marginTop: "0.25rem" }}>{f.message}</div>
+      {f.action ? <p className="vi-oracle-finding-action">action: {f.action}</p> : null}
+      {f.evidence && Object.keys(f.evidence).length ? <RawJson label="evidence" value={f.evidence} /> : null}
+    </>
+  );
+}
+
+export function StewardPanel({ api, embedded }: { api: StewardApi; embedded?: StewardReport | null }) {
+  const report = api.report;
+  const findings = useMemo(() => report?.findings ?? [], [report]);
+  const groups = useMemo(() => bucket(findings), [findings]);
+  const stale = findings.filter((f) => f.kind === "matrix_stale");
+  const busy = api.busy != null;
+
+  return (
+    <section className="vi-oracle-panel" aria-label="Steward report">
+      <h3>
+        Steward
+        <span className="vi-oracle-sub">the selector audited from its own ledger — GET /api/oracle/steward</span>
+      </h3>
+
+      <div className="vi-oracle-row">
+        <button type="button" className="vi-btn vi-btn-sm" disabled={busy} onClick={api.refresh}>
+          {api.busy === "get" ? "Reading…" : "Refresh report"}
+        </button>
+        <button
+          type="button"
+          className="vi-btn vi-btn-sm vi-btn-accent"
+          disabled={busy}
+          onClick={api.rerun}
+          title="POST /api/oracle/steward — re-audits AND applies bounded rebalancing to the live selection policy"
+        >
+          {api.busy === "post" ? "Re-running…" : "Re-run + apply rebalancing"}
+        </button>
+        <span className="vi-knob-hint">
+          last run (server): <code>{when(report?.at)}</code>
+          {api.fetchedAt != null ? <> · fetched {ago(api.fetchedAt)} (browser clock)</> : null}
+        </span>
+      </div>
+
+      <GapNote gap={api.gap} />
+
+      {report ? (
+        <>
+          <div className="vi-oracle-row" style={{ marginTop: "0.6rem" }}>
+            <Tag kind={report.ok ? "ok" : "alarm"}>{report.ok ? "no alarms" : "alarms present"}</Tag>
+            {report.applied ? <Tag kind="accent">policy applied this call</Tag> : <Tag>report only</Tag>}
+            {report.policy_changed ? <Tag kind="warn">policy changed</Tag> : null}
+            {typeof report.ledger_rows === "number" ? <Tag>ledger rows: {report.ledger_rows}</Tag> : null}
+            <Tag>
+              {groups.alarm.length} alarm · {groups.warn.length} warn · {groups.info.length} info
+            </Tag>
+          </div>
+          {report.summary ? <p className="vi-oracle-note">{report.summary}</p> : null}
+
+          {stale.length ? (
+            <div className="vi-oracle-stale" role="alert">
+              <strong>Routing matrix is stale.</strong> Selections below reason from old evidence.
+              <ul className="vi-oracle-reasons">
+                {stale.map((f, i) => (
+                  <li key={i}>
+                    {f.message}
+                    {f.action ? <> — {f.action}</> : null}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+
+          {ORDER.map((sev) =>
+            groups[sev].length ? (
+              <div key={sev}>
+                <h4>
+                  {sev} ({groups[sev].length})
+                </h4>
+                <ul className="vi-oracle-findings">
+                  {groups[sev].map((f, i) => (
+                    <li key={`${sev}-${f.kind}-${f.capability ?? ""}-${i}`} className={`vi-oracle-finding vi-oracle-finding-${sevOf(f)}`}>
+                      <FindingBody f={f} />
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ) : null,
+          )}
+          {groups.other.length ? (
+            <div>
+              <h4>unclassified severity ({groups.other.length})</h4>
+              <ul className="vi-oracle-findings">
+                {groups.other.map((f, i) => (
+                  <li key={`o-${i}`} className="vi-oracle-finding vi-oracle-finding-info">
+                    <FindingBody f={f} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+          {!findings.length ? (
+            <p className="vi-oracle-note">The steward returned zero findings — a clean fleet normally still says so with numbers; treat an empty list as "nothing audited".</p>
+          ) : null}
+
+          {report.selection_policy ? <RawJson label="selection policy (live)" value={report.selection_policy} /> : null}
+          {report.policy_after ? <RawJson label="policy after this call" value={report.policy_after} /> : null}
+          <RawJson label="steward report json" value={report} />
+        </>
+      ) : !api.gap ? (
+        <p className="vi-oracle-note">Reading the steward…</p>
+      ) : null}
+
+      {embedded ? (
+        <>
+          <h4>steward snapshot embedded in the selected run</h4>
+          <p className="vi-oracle-note">
+            This is the report the run itself recorded at the time (manifest.dag.steward), not the live one above.
+            {embedded.summary ? <> Summary: {embedded.summary}</> : null}
+          </p>
+          <RawJson label="manifest.dag.steward" value={embedded} />
+        </>
+      ) : null}
+    </section>
+  );
+}