pi-mega-compact 0.20.57 → 0.20.59

package/extensions/dashboard-client/src/tabs/SessionsTab.tsx

@@ -1,9 +1,22 @@
 /**
- * dashboard-client/src/tabs/SessionsTab.tsx — Sessions tab (S39).
+ * dashboard-client/src/tabs/SessionsTab.tsx — Sessions tab (S39, DASH-0b).
  *
- * Renders: window selector (5/15/30/60 min), sessions summary tiles,
- * the stacked-memory graph (SessionsMemoryChart), and the active sessions
- * table (ActiveSessionsTable).
+ * DASH-0b: the Sessions surface absorbs the existent TurnsTab as a drill-down.
+ * A `SessionsViews` toggle ("Active Sessions" / "Turn Memory") switches between
+ * the existent sessions summary/chart/table body and the turns view (rendered by
+ * `SessionsTab/TurnMemoryView.tsx` — the turns body moved VERBATIM from the
+ * standalone TurnsTab.tsx, which is left untouched this sprint for flag-off
+ * parity).
+ *
+ * Flag: `MEGACOMPACT_DASH_0B` default ON. The dashboard client is a browser
+ * bundle with NO `process` global, so the positive sprint flag cannot be read
+ * server-side-style (`process.env`) inside the client. Instead the flag is read
+ * from the server-authoritative `/api/rag-settings` state: the server resolves
+ * `process.env["MEGACOMPACT_DASH_0B"] ?? default` into the `SettingState.value`
+ * boolean. When the flag is OFF (settings confirmed value=false), this surface
+ * renders ONLY the existent sessions body — no toggle, no TurnMemoryView branch
+ * (byte-identical predecessor). The standalone TurnsTab.tsx top-level surface is
+ * untouched and remains reachable for flag-off parity.
  *
  * Data sources: fetchSessions() + fetchSessionTimeseries(minutes). Both poll
  * every 2s for near-real-time updates. useSSE() listens for session_sample
@@ -18,12 +31,19 @@ import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useApi } from "../hooks/useApi";
 import { useSSE } from "../hooks/useSSE";
-import { fetchSessions, fetchSessionTimeseries } from "../api/client";
-import type { SseEvent, SseSessionSample, SessionsResponse, SessionTimeseriesResponse } from "@contracts";
+import { fetchSessions, fetchSessionTimeseries, fetchSettings } from "../api/client";
+import type {
+	SseEvent,
+	SseSessionSample,
+	SessionsResponse,
+	SessionTimeseriesResponse,
+	SettingsResponse,
+} from "@contracts";
 import { SessionsMemoryChart } from "../components/SessionsMemoryChart";
 import { ActiveSessionsTable } from "../components/ActiveSessionsTable";
 import { Toggle } from "../components/ui/toggle";
 import { Card, CardContent } from "../components/ui/card";
+import { TurnMemoryView } from "./SessionsTab/TurnMemoryView";
 
 /**
  * Shape of the {@link SseSessionSample} SSE event appended to events.log by
@@ -40,6 +60,21 @@ function isSessionSample(
 	return e.type === "session_sample";
 }
 
+const DASH_0B_KEY = "MEGACOMPACT_DASH_0B";
+
+/** Resolve the DASH-0b consolidation flag from the server settings state.
+ *  Absent/not-yet-loaded => false (flag-off posture), so flag-off users never
+ *  see a toggle flash; the toggle appears only once settings confirm it is ON. */
+function dash0bEnabled(settings: SettingsResponse | null): boolean {
+	if (!settings) return false;
+	for (const cat of settings.categories) {
+		for (const s of cat.settings) {
+			if (s.key === DASH_0B_KEY && s.type === "boolean") return s.value === true;
+		}
+	}
+	return false;
+}
+
 const WINDOWS: ReadonlyArray<{ value: number; label: string }> = [
 	{ value: 5, label: "5m" },
 	{ value: 15, label: "15m" },
@@ -98,8 +133,19 @@ function SummaryTiles({ sessions }: SummaryTilesProps): React.ReactElement {
 	);
 }
 
+type SessionsView = "active" | "turns";
+
 export default function SessionsTab(): React.ReactElement {
 	const [minutes, setMinutes] = useState(30);
+	const [view, setView] = useState<SessionsView>("active");
+
+	const {
+		data: settingsData,
+	} = useApi<SettingsResponse>(
+		useCallback(() => fetchSettings(), []),
+		{ pollInterval: 0, maxRetries: 0 },
+	);
+	const dash0bOn = dash0bEnabled(settingsData);
 
 	const {
 		data: sessionsData,
@@ -142,6 +188,10 @@ export default function SessionsTab(): React.ReactElement {
 		refetchTimeseries();
 	}, [lastSampleTs, refetchSessions, refetchTimeseries]);
 
+	if (dash0bOn && view === "turns") {
+		return <TurnMemoryView />;
+	}
+
 	if (sessionsErr && !sessionsData) {
 		return (
 			<div className="tab-stub">
@@ -185,6 +235,27 @@ export default function SessionsTab(): React.ReactElement {
 				</div>
 			</div>
 
+			{dash0bOn && (
+				<div
+					className="flex items-center gap-2"
+					role="tablist"
+					aria-label="Sessions views"
+				>
+					<Toggle
+						pressed={view === "active"}
+						onClick={() => setView("active")}
+					>
+						Active Sessions
+					</Toggle>
+					<Toggle
+						pressed={view === "turns"}
+						onClick={() => setView("turns")}
+					>
+						Turn Memory
+					</Toggle>
+				</div>
+			)}
+
 			{sessions.length === 0 ? (
 				<div className="text-sm text-muted-foreground">No active sessions.</div>
 			) : (

package/extensions/dashboard-client/src/tabs/VectorCortexTab/sections.tsx

@@ -0,0 +1,201 @@
+/**
+ * dashboard-client/src/tabs/VectorCortexTab/sections.tsx — DASH-0b sectioned
+ * layout for the Vector Cortex tab.
+ *
+ * Groups the existent flat VectorCortexTab card list under 4 `<section
+ * aria-labelledby>` headers — Cortex status / Cortex repair / Cortex cache /
+ * Cortex adaptive — without editing any card component file. Every card is
+ * imported verbatim by its current path (unchanged prop contract) and appears
+ * under EXACTLY one section (bijective assignment).
+ *
+ * Groups (spec §Goal):
+ *   - Cortex status  — VC0C health card + ModelImprovementCard +
+ *                      VectorCortexTopologyCard + VectorCortexShardsCard
+ *                      (+ embedded Reconstruct)
+ *   - Cortex repair  — VectorCortexClosureCard + VectorCortexRestoreCard +
+ *                      VectorCortexRepairCard
+ *   - Cortex cache   — VectorCortexCrystalsCard + VectorCortexEconomicsCard +
+ *                      VectorCortexDiagnosticsCard
+ *   - Cortex adaptive— VectorCortexOutcomesCard + VectorCortexPolicyCard +
+ *                      VectorCortexPlansCard + VectorCortexRenderCard +
+ *                      VectorCortexRolloutCard + VectorCortexPlatformCard +
+ *                      VectorCortexLedgerCard
+ *
+ * The health card (VC0C "Live Safety Envelope") markup is moved here verbatim
+ * from the predecessor VectorCortexTab so the sectioned (flag-ON) layout owns
+ * all 18 cards. Consumers pass the live poll state + health-reset handlers.
+ *
+ * PREVENT-PI-004: local reader data only. PREVENT-011: no `any`.
+ */
+
+import type {
+	VectorCortexHealthCard,
+	VectorCortexEvaluationSummary,
+} from "../../api/vector-cortex";
+import type { VectorCortexPollState } from "../useVectorCortexPoll";
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card";
+import { Badge } from "../../components/ui/badge";
+import { Metric } from "../VectorCortexMetric";
+import { VectorCortexRenderCard } from "../VectorCortexRenderCard";
+import { VectorCortexRolloutCard } from "../VectorCortexRolloutCard";
+import { VectorCortexClosureCard } from "../VectorCortexClosureCard";
+import { VectorCortexRestoreCard } from "../VectorCortexRestoreCard";
+import { VectorCortexRepairCard } from "../VectorCortexRepairCard";
+import { VectorCortexCrystalsCard } from "../VectorCortexCrystalsCard";
+import { VectorCortexEconomicsCard } from "../VectorCortexEconomicsCard";
+import { VectorCortexDiagnosticsCard } from "../VectorCortexDiagnosticsCard";
+import { VectorCortexOutcomesCard } from "../VectorCortexOutcomesCard";
+import { VectorCortexPolicyCard } from "../VectorCortexPolicyCard";
+import { VectorCortexPlatformCard } from "../VectorCortexPlatformCard";
+import {
+	VectorCortexShardsCard,
+	VectorCortexReconstructCard,
+} from "../VectorCortexShardsCard";
+import { VectorCortexPlansCard } from "../VectorCortexPlansCard";
+import { VectorCortexTopologyCard } from "../VectorCortexTopologyCard";
+import { VectorCortexLedgerCard } from "../VectorCortexLedgerCard";
+import { ModelImprovementCard } from "../../components/ModelImprovementCard";
+
+/** Props the sectioned layout needs from the VectorCortexTab shell. */
+export interface VectorCortexSectionsProps {
+	/** The polled evaluation summary (guaranteed non-null by the shell). */
+	data: VectorCortexEvaluationSummary;
+	/** Live VC0C health envelope (may be null when VC0C is off). */
+	health: VectorCortexHealthCard | null;
+	/** The full poll state (holds every card's view slice). */
+	poll: VectorCortexPollState;
+	/** Reset-cooldown handler wired to the VC0C health card. */
+	onReset: () => void;
+	/** Reset feedback message shown on the VC0C health card. */
+	resetMsg: string | null;
+}
+
+function StatusHeading({ id, title }: { id: string; title: string }): React.ReactElement {
+	return (
+		<h2 id={id} className="font-heading text-lg font-semibold">
+			{title}
+		</h2>
+	);
+}
+
+/**
+ * The VC0C "Live Safety Envelope" health card, moved verbatim from the
+ * predecessor VectorCortexTab. It is the 18th card in the sectioned layout.
+ */
+function Vc0cHealthCard({
+	health,
+	onReset,
+	resetMsg,
+}: {
+	health: VectorCortexHealthCard | null;
+	onReset: () => void;
+	resetMsg: string | null;
+}): React.ReactElement {
+	return (
+		<Card>
+			<CardHeader>
+				<div className="flex items-center justify-between">
+					<CardTitle>Live Safety Envelope (VC0C)</CardTitle>
+					<div className="flex items-center gap-2">
+						{health?.stateSource === "ephemeral" && (
+							<Badge variant="outline">EPHEMERAL (non-live)</Badge>
+						)}
+						<button
+							onClick={onReset}
+							disabled={!health?.enabled}
+							className="rounded border border-border px-2 py-1 text-xs disabled:opacity-50"
+						>
+							Reset Cooldown
+						</button>
+					</div>
+				</div>
+			</CardHeader>
+			<CardContent>
+				{resetMsg && (
+					<div className="mb-2 text-xs text-muted-foreground">{resetMsg}</div>
+				)}
+				{!health ? (
+					<div className="vc-empty">Health unavailable (VC0C off).</div>
+				) : (
+					<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+						<Metric label="State" value={health.state} />
+						<Metric label="Mode" value={health.mode} />
+						<Metric label="Window" value={`${health.windowMs}ms`} />
+						<Metric label="Probes" value={String(health.probeCount)} />
+						<Metric label="Backoff" value={`${health.backoffDelayMs}ms`} />
+						<Metric
+							label="Failures"
+							value={`${health.failures}/${health.attempts}`}
+						/>
+						<Metric
+							label="Frontier"
+							value={
+								health.stateSource === "ephemeral"
+									? "non-live"
+									: health.frontierFrozen
+										? "FROZEN"
+										: "LIVE"
+							}
+						/>
+						<Metric label="Spool lag" value={String(health.spoolLag)} />
+						<Metric label="Encoder mode" value={health.encoderMode} />
+						<Metric label="Encoder asset" value={health.encoderAssetDigest ? health.encoderAssetDigest.slice(0, 12) : "none"} />
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}
+
+/** The four section groups, rendered as `<section aria-labelledby>` blocks. */
+export function VectorCortexSections({
+	data,
+	health,
+	poll,
+	onReset,
+	resetMsg,
+}: VectorCortexSectionsProps): React.ReactElement {
+	return (
+		<>
+			<section aria-labelledby="cortex-status" className="flex flex-col gap-4">
+				<StatusHeading id="cortex-status" title="Cortex status" />
+				<Vc0cHealthCard health={health} onReset={onReset} resetMsg={resetMsg} />
+				{data.ml5dEnabled && (
+					<ModelImprovementCard
+						encoderMode={health?.encoderMode ?? "B"}
+						encoderAssetDigest={health?.encoderAssetDigest ?? null}
+						status={data.status}
+					/>
+				)}
+				<VectorCortexTopologyCard topology={poll.topology} query={poll.query} />
+				<VectorCortexShardsCard view={poll.shards} />
+				<VectorCortexReconstructCard view={poll.reconstruct} />
+			</section>
+
+			<section aria-labelledby="cortex-repair" className="flex flex-col gap-4">
+				<StatusHeading id="cortex-repair" title="Cortex repair" />
+				<VectorCortexClosureCard view={poll.closureProof} />
+				<VectorCortexRestoreCard view={poll.restore} />
+				<VectorCortexRepairCard view={poll.repair} />
+			</section>
+
+			<section aria-labelledby="cortex-cache" className="flex flex-col gap-4">
+				<StatusHeading id="cortex-cache" title="Cortex cache" />
+				<VectorCortexCrystalsCard view={poll.crystals} />
+				<VectorCortexEconomicsCard view={poll.economics} />
+				<VectorCortexDiagnosticsCard view={poll.diagnostics} />
+			</section>
+
+			<section aria-labelledby="cortex-adaptive" className="flex flex-col gap-4">
+				<StatusHeading id="cortex-adaptive" title="Cortex adaptive" />
+				<VectorCortexOutcomesCard view={poll.outcomes} />
+				<VectorCortexPolicyCard view={poll.policy} />
+				<VectorCortexPlansCard view={poll.plans} />
+				<VectorCortexRenderCard view={poll.render} />
+				<VectorCortexRolloutCard view={poll.rollout} />
+				<VectorCortexPlatformCard view={poll.platform} />
+				<VectorCortexLedgerCard ledger={poll.ledger} />
+			</section>
+		</>
+	);
+}

package/extensions/dashboard-client/src/tabs/VectorCortexTab.tsx

@@ -1,13 +1,27 @@
 /**
- * VectorCortexTab.tsx — vector-cortex dashboard tab.
+ * VectorCortexTab.tsx — vector-cortex dashboard tab (VC0A, DASH-0b).
  * VC0A: reader-only aggregate latency histogram + per-mode sample counts from
  * GET /api/vector-cortex/evaluation. VC0C (task 5): live safety envelope health
  * card (breaker state, window/probe/backoff, durable spool frontier/lag) from
  * GET /api/vector-cortex/health plus an admin "reset cooldown" action. Polls
  * every 5s via useVectorCortexPoll.
+ *
+ * DASH-0b: delegate-shell. Flag `MEGACOMPACT_DASH_0B` default ON re-groups the
+ * flat 18-card layout under 4 `<section aria-labelledby>` headers (rendered by
+ * `VectorCortexTab/sections.tsx`). Flag-OFF keeps the original flat card list
+ * in this file — byte-identical predecessor layout. No card component file is
+ * edited; only their import grouping moves.
+ *
+ * The client is a browser bundle with no `process` global, so the flag is read
+ * from the server-authoritative `/api/rag-settings` state (the server resolves
+ * `process.env["MEGACOMPACT_DASH_0B"] ?? default` into a boolean SettingState);
+ * see the same pattern in SessionsTab. PREVENT-PI-004: loopback reader calls only.
  */
 
 import { useState } from "react";
+import { useApi } from "../hooks/useApi";
+import { fetchSettings } from "../api/client";
+import type { SettingsResponse } from "@contracts";
 import {
 	resetVectorCortexBreaker,
 	fetchVectorCortexHealth,
@@ -17,6 +31,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card"
 import { Badge } from "../components/ui/badge";
 import { Metric } from "./VectorCortexMetric";
 import { useVectorCortexPoll } from "./useVectorCortexPoll";
+import { VectorCortexSections } from "./VectorCortexTab/sections";
 import { VectorCortexRenderCard } from "./VectorCortexRenderCard";
 import { VectorCortexRolloutCard } from "./VectorCortexRolloutCard";
 import { VectorCortexClosureCard } from "./VectorCortexClosureCard";
@@ -38,6 +53,19 @@ import { VectorCortexLedgerCard } from "./VectorCortexLedgerCard";
 import { VcStatusBadge } from "./VcStatusBadge";
 import { ModelImprovementCard } from "../components/ModelImprovementCard";
 
+const DASH_0B_KEY = "MEGACOMPACT_DASH_0B";
+
+/** Resolve the DASH-0b flag from the server settings state (false unless confirmed). */
+function dash0bEnabled(settings: SettingsResponse | null): boolean {
+	if (!settings) return false;
+	for (const cat of settings.categories) {
+		for (const s of cat.settings) {
+			if (s.key === DASH_0B_KEY && s.type === "boolean") return s.value === true;
+		}
+	}
+	return false;
+}
+
 function ModeChip({ mode, count }: { mode: string; count: number }): React.ReactElement {
 	return (
 		<div className="flex items-center justify-between border-b border-border/50 py-1 text-sm">
@@ -51,6 +79,12 @@ export default function VectorCortexTab(): React.ReactElement {
 	const [poll, refetch] = useVectorCortexPoll();
 	const [resetMsg, setResetMsg] = useState<string | null>(null);
 
+	const { data: settingsData } = useApi<SettingsResponse>(
+		() => fetchSettings(),
+		{ pollInterval: 0, maxRetries: 0 },
+	);
+	const dash0bOn = dash0bEnabled(settingsData);
+
 	const { loading, error, data, health } = poll;
 
 	const onReset = () => {
@@ -85,138 +119,150 @@ export default function VectorCortexTab(): React.ReactElement {
 				</span>
 			</div>
 
-			<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-				<Card>
-					<CardHeader>
-						<CardTitle>Samples</CardTitle>
-					</CardHeader>
-					<CardContent>
-						<div className="text-3xl font-bold">{data.samples}</div>
-						<div className="mt-2 flex flex-col">
-							<ModeChip mode="A" count={data.byMode.A} />
-							<ModeChip mode="B" count={data.byMode.B} />
-							<ModeChip mode="C" count={data.byMode.C} />
-						</div>
-					</CardContent>
-				</Card>
+			{dash0bOn ? (
+				<VectorCortexSections
+					data={data}
+					health={health}
+					poll={poll}
+					onReset={onReset}
+					resetMsg={resetMsg}
+				/>
+			) : (
+				<>
+					<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+						<Card>
+							<CardHeader>
+								<CardTitle>Samples</CardTitle>
+							</CardHeader>
+							<CardContent>
+								<div className="text-3xl font-bold">{data.samples}</div>
+								<div className="mt-2 flex flex-col">
+									<ModeChip mode="A" count={data.byMode.A} />
+									<ModeChip mode="B" count={data.byMode.B} />
+									<ModeChip mode="C" count={data.byMode.C} />
+								</div>
+							</CardContent>
+						</Card>
 
-				<Card className="md:col-span-2">
-					<CardHeader>
-						<CardTitle>Latency Histogram (ms, inclusive edges)</CardTitle>
-					</CardHeader>
-					<CardContent>
-						<div className="flex items-end gap-2" style={{ height: 160 }}>
-							{data.histogram.edges.map((edge, i) => {
-								const h = (data.histogram.cells[i] / max) * 140;
-								return (
-									<div key={edge} className="flex flex-1 flex-col items-center gap-1">
+						<Card className="md:col-span-2">
+							<CardHeader>
+								<CardTitle>Latency Histogram (ms, inclusive edges)</CardTitle>
+							</CardHeader>
+							<CardContent>
+								<div className="flex items-end gap-2" style={{ height: 160 }}>
+									{data.histogram.edges.map((edge, i) => {
+										const h = (data.histogram.cells[i] / max) * 140;
+										return (
+											<div key={edge} className="flex flex-1 flex-col items-center gap-1">
+												<span className="text-xs text-muted-foreground">
+													{data.histogram.cells[i]}
+												</span>
+												<div
+													className="w-full rounded-t"
+													style={{ height: Math.max(2, h), background: "#6366f1" }}
+												/>
+												<span className="text-[10px] text-muted-foreground">&le;{edge}</span>
+											</div>
+										);
+									})}
+									<div className="flex flex-1 flex-col items-center gap-1">
 										<span className="text-xs text-muted-foreground">
-											{data.histogram.cells[i]}
+											{data.histogram.overflow}
 										</span>
 										<div
 											className="w-full rounded-t"
-											style={{ height: Math.max(2, h), background: "#6366f1" }}
+											style={{
+												height: Math.max(2, (data.histogram.overflow / max) * 140),
+												background: "#f87171",
+											}}
 										/>
-										<span className="text-[10px] text-muted-foreground">&le;{edge}</span>
+										<span className="text-[10px] text-muted-foreground">&gt;250</span>
 									</div>
-								);
-							})}
-							<div className="flex flex-1 flex-col items-center gap-1">
-								<span className="text-xs text-muted-foreground">
-									{data.histogram.overflow}
-								</span>
-								<div
-									className="w-full rounded-t"
-									style={{
-										height: Math.max(2, (data.histogram.overflow / max) * 140),
-										background: "#f87171",
-									}}
-								/>
-								<span className="text-[10px] text-muted-foreground">&gt;250</span>
-							</div>
-						</div>
-						<div className="mt-1 text-xs text-muted-foreground">
-							Total: {data.histogram.total} · Rejects: {data.rejects.length}
-						</div>
-					</CardContent>
-				</Card>
-			</div>
+								</div>
+								<div className="mt-1 text-xs text-muted-foreground">
+									Total: {data.histogram.total} · Rejects: {data.rejects.length}
+								</div>
+							</CardContent>
+						</Card>
+					</div>
 
-			<Card>
-				<CardHeader>
-					<div className="flex items-center justify-between">
-						<CardTitle>Live Safety Envelope (VC0C)</CardTitle>
-						<div className="flex items-center gap-2">
-							{health?.stateSource === "ephemeral" && (
-								<Badge variant="outline">EPHEMERAL (non-live)</Badge>
+					<Card>
+						<CardHeader>
+							<div className="flex items-center justify-between">
+								<CardTitle>Live Safety Envelope (VC0C)</CardTitle>
+								<div className="flex items-center gap-2">
+									{health?.stateSource === "ephemeral" && (
+										<Badge variant="outline">EPHEMERAL (non-live)</Badge>
+									)}
+									<button
+										onClick={onReset}
+										disabled={!health?.enabled}
+										className="rounded border border-border px-2 py-1 text-xs disabled:opacity-50"
+									>
+										Reset Cooldown
+									</button>
+								</div>
+							</div>
+						</CardHeader>
+						<CardContent>
+							{resetMsg && (
+								<div className="mb-2 text-xs text-muted-foreground">{resetMsg}</div>
 							)}
-							<button
-								onClick={onReset}
-								disabled={!health?.enabled}
-								className="rounded border border-border px-2 py-1 text-xs disabled:opacity-50"
-							>
-								Reset Cooldown
-							</button>
-						</div>
-					</div>
-				</CardHeader>
-				<CardContent>
-					{resetMsg && (
-						<div className="mb-2 text-xs text-muted-foreground">{resetMsg}</div>
-					)}
-					{!health ? (
-						<div className="vc-empty">Health unavailable (VC0C off).</div>
-					) : (
-						<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
-							<Metric label="State" value={health.state} />
-							<Metric label="Mode" value={health.mode} />
-							<Metric label="Window" value={`${health.windowMs}ms`} />
-							<Metric label="Probes" value={String(health.probeCount)} />
-							<Metric label="Backoff" value={`${health.backoffDelayMs}ms`} />
-							<Metric
-								label="Failures"
-								value={`${health.failures}/${health.attempts}`}
-							/>
-							<Metric
-								label="Frontier"
-								value={
-									health.stateSource === "ephemeral"
-										? "non-live"
-										: health.frontierFrozen
-											? "FROZEN"
-											: "LIVE"
-								}
-							/>
-							<Metric label="Spool lag" value={String(health.spoolLag)} />
-							<Metric label="Encoder mode" value={health.encoderMode} />
-							<Metric label="Encoder asset" value={health.encoderAssetDigest ? health.encoderAssetDigest.slice(0, 12) : "none"} />
-						</div>
+							{!health ? (
+								<div className="vc-empty">Health unavailable (VC0C off).</div>
+							) : (
+								<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+									<Metric label="State" value={health.state} />
+									<Metric label="Mode" value={health.mode} />
+									<Metric label="Window" value={`${health.windowMs}ms`} />
+									<Metric label="Probes" value={String(health.probeCount)} />
+									<Metric label="Backoff" value={`${health.backoffDelayMs}ms`} />
+									<Metric
+										label="Failures"
+										value={`${health.failures}/${health.attempts}`}
+									/>
+									<Metric
+										label="Frontier"
+										value={
+											health.stateSource === "ephemeral"
+												? "non-live"
+												: health.frontierFrozen
+													? "FROZEN"
+													: "LIVE"
+										}
+									/>
+									<Metric label="Spool lag" value={String(health.spoolLag)} />
+									<Metric label="Encoder mode" value={health.encoderMode} />
+									<Metric label="Encoder asset" value={health.encoderAssetDigest ? health.encoderAssetDigest.slice(0, 12) : "none"} />
+								</div>
+							)}
+						</CardContent>
+					</Card>
+					{data.ml5dEnabled && (
+						<ModelImprovementCard
+							encoderMode={health?.encoderMode ?? "B"}
+							encoderAssetDigest={health?.encoderAssetDigest ?? null}
+							status={data.status}
+						/>
 					)}
-				</CardContent>
-			</Card>
-			{data.ml5dEnabled && (
-				<ModelImprovementCard
-					encoderMode={health?.encoderMode ?? "B"}
-					encoderAssetDigest={health?.encoderAssetDigest ?? null}
-					status={data.status}
-				/>
+					<VectorCortexTopologyCard topology={poll.topology} query={poll.query} />
+					<VectorCortexShardsCard view={poll.shards} />
+					<VectorCortexReconstructCard view={poll.reconstruct} />
+					<VectorCortexPlansCard view={poll.plans} />
+					<VectorCortexRenderCard view={poll.render} />
+					<VectorCortexRolloutCard view={poll.rollout} />
+					<VectorCortexClosureCard view={poll.closureProof} />
+					<VectorCortexRestoreCard view={poll.restore} />
+					<VectorCortexRepairCard view={poll.repair} />
+					<VectorCortexCrystalsCard view={poll.crystals} />
+					<VectorCortexEconomicsCard view={poll.economics} />
+					<VectorCortexDiagnosticsCard view={poll.diagnostics} />
+					<VectorCortexOutcomesCard view={poll.outcomes} />
+					<VectorCortexPolicyCard view={poll.policy} />
+					<VectorCortexPlatformCard view={poll.platform} />
+					<VectorCortexLedgerCard ledger={poll.ledger} />
+				</>
 			)}
-			<VectorCortexTopologyCard topology={poll.topology} query={poll.query} />
-			<VectorCortexShardsCard view={poll.shards} />
-			<VectorCortexReconstructCard view={poll.reconstruct} />
-			<VectorCortexPlansCard view={poll.plans} />
-			<VectorCortexRenderCard view={poll.render} />
-			<VectorCortexRolloutCard view={poll.rollout} />
-			<VectorCortexClosureCard view={poll.closureProof} />
-			<VectorCortexRestoreCard view={poll.restore} />
-			<VectorCortexRepairCard view={poll.repair} />
-			<VectorCortexCrystalsCard view={poll.crystals} />
-			<VectorCortexEconomicsCard view={poll.economics} />
-			<VectorCortexDiagnosticsCard view={poll.diagnostics} />
-			<VectorCortexOutcomesCard view={poll.outcomes} />
-			<VectorCortexPolicyCard view={poll.policy} />
-			<VectorCortexPlatformCard view={poll.platform} />
-			<VectorCortexLedgerCard ledger={poll.ledger} />
 		</div>
 	);
 }