pi-mega-compact 0.11.5 → 0.11.6

package/extensions/dashboard-client/dist/assets/{useSSE-DNgMuyP6.js → useSSE-Bf5LOLSi.js}

@@ -1,2 +1,2 @@
-import{r as e}from"./index-4gQ7auad.js";function R(i={}){const{maxEvents:c=500,maxReconnects:l=5}=i,[f,v]=e.useState([]),[E,n]=e.useState("connecting"),[S,p]=e.useState(0),[m,d]=e.useState(null),o=e.useRef(0),s=e.useRef(null),r=e.useCallback(()=>{s.current&&s.current.close(),n("connecting");const t=new EventSource("/api/events");s.current=t,t.onopen=()=>{n("connected"),o.current=0},t.onmessage=g=>{try{const x=JSON.parse(g.data);v(u=>{const a=[...u,x];return a.length>c?a.slice(-c):a}),p(u=>u+1),d(Date.now())}catch{}},t.onerror=()=>{t.close(),o.current<l?(o.current+=1,n("connecting"),setTimeout(r,1e3)):n("disconnected")}},[c,l]);return e.useEffect(()=>(r(),()=>{s.current?.close()}),[r]),{events:f,status:E,eventCount:S,lastEventAt:m}}export{R as u};
-//# sourceMappingURL=useSSE-DNgMuyP6.js.map
+import{r as e}from"./index-DrktNOoT.js";function R(i={}){const{maxEvents:c=500,maxReconnects:l=5}=i,[f,v]=e.useState([]),[E,n]=e.useState("connecting"),[S,p]=e.useState(0),[m,d]=e.useState(null),o=e.useRef(0),s=e.useRef(null),r=e.useCallback(()=>{s.current&&s.current.close(),n("connecting");const t=new EventSource("/api/events");s.current=t,t.onopen=()=>{n("connected"),o.current=0},t.onmessage=g=>{try{const x=JSON.parse(g.data);v(u=>{const a=[...u,x];return a.length>c?a.slice(-c):a}),p(u=>u+1),d(Date.now())}catch{}},t.onerror=()=>{t.close(),o.current<l?(o.current+=1,n("connecting"),setTimeout(r,1e3)):n("disconnected")}},[c,l]);return e.useEffect(()=>(r(),()=>{s.current?.close()}),[r]),{events:f,status:E,eventCount:S,lastEventAt:m}}export{R as u};
+//# sourceMappingURL=useSSE-Bf5LOLSi.js.map

package/extensions/dashboard-client/dist/assets/{useSSE-DNgMuyP6.js.map → useSSE-Bf5LOLSi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useSSE-DNgMuyP6.js","sources":["../../src/hooks/useSSE.ts"],"sourcesContent":["/**\n * dashboard-client/src/hooks/useSSE.ts — Server-Sent Events hook.\n *\n * Connects to /api/events, provides real-time event stream.\n * SPRINT-B1: basic connection. SPRINT-D1: reconnect with backoff.\n */\n\nimport { useState, useEffect, useRef, useCallback } from 'react';\nimport type { SseEvent } from '../../../dashboard-server/api-contracts';\n\nexport type SseStatus = 'connecting' | 'connected' | 'disconnected' | 'error';\n\nexport interface UseSSEResult {\n  events: SseEvent[];\n  status: SseStatus;\n  eventCount: number;\n  lastEventAt: number | null;\n}\n\nexport interface UseSSEOptions {\n  /** Max events to keep in memory (ring buffer). */\n  maxEvents?: number;\n  /** Max reconnect attempts before giving up. */\n  maxReconnects?: number;\n}\n\n// SPRINT-D1-REMAINING: exponential backoff (1s → 2s → 4s → max 30s).\n// SPRINT-D1-REMAINING: after 5 failures, set status='disconnected'.\n\nexport function useSSE(options: UseSSEOptions = {}): UseSSEResult {\n  const { maxEvents = 500, maxReconnects = 5 } = options;\n  const [events, setEvents] = useState<SseEvent[]>([]);\n  const [status, setStatus] = useState<SseStatus>('connecting');\n  const [eventCount, setEventCount] = useState(0);\n  const [lastEventAt, setLastEventAt] = useState<number | null>(null);\n  const reconnectCount = useRef(0);\n  const sourceRef = useRef<EventSource | null>(null);\n\n  const connect = useCallback(() => {\n    if (sourceRef.current) {\n      sourceRef.current.close();\n    }\n    setStatus('connecting');\n    const source = new EventSource('/api/events');\n    sourceRef.current = source;\n\n    source.onopen = () => {\n      setStatus('connected');\n      reconnectCount.current = 0;\n    };\n\n    source.onmessage = (event) => {\n      try {\n        const parsed = JSON.parse(event.data) as SseEvent;\n        setEvents(prev => {\n          const next = [...prev, parsed];\n          return next.length > maxEvents ? next.slice(-maxEvents) : next;\n        });\n        setEventCount(c => c + 1);\n        setLastEventAt(Date.now());\n      } catch {\n        // non-fatal: skip malformed events\n      }\n    };\n\n    source.onerror = () => {\n      source.close();\n      if (reconnectCount.current < maxReconnects) {\n        reconnectCount.current += 1;\n        setStatus('connecting');\n        // SPRINT-D1: use exponential backoff instead of fixed delay\n        setTimeout(connect, 1000);\n      } else {\n        setStatus('disconnected');\n      }\n    };\n  }, [maxEvents, maxReconnects]);\n\n  useEffect(() => {\n    connect();\n    return () => {\n      sourceRef.current?.close();\n    };\n  }, [connect]);\n\n  return { events, status, eventCount, lastEventAt };\n}\n"],"names":["useSSE","options","maxEvents","maxReconnects","events","setEvents","useState","status","setStatus","eventCount","setEventCount","lastEventAt","setLastEventAt","reconnectCount","useRef","sourceRef","connect","useCallback","source","event","parsed","prev","next","c","useEffect"],"mappings":"wCA6BO,SAASA,EAAOC,EAAyB,GAAkB,CAChE,KAAM,CAAE,UAAAC,EAAY,IAAK,cAAAC,EAAgB,GAAMF,EACzC,CAACG,EAAQC,CAAS,EAAIC,EAAAA,SAAqB,CAAA,CAAE,EAC7C,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAoB,YAAY,EACtD,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SAAS,CAAC,EACxC,CAACK,EAAaC,CAAc,EAAIN,EAAAA,SAAwB,IAAI,EAC5DO,EAAiBC,EAAAA,OAAO,CAAC,EACzBC,EAAYD,EAAAA,OAA2B,IAAI,EAE3CE,EAAUC,EAAAA,YAAY,IAAM,CAC5BF,EAAU,SACZA,EAAU,QAAQ,MAAA,EAEpBP,EAAU,YAAY,EACtB,MAAMU,EAAS,IAAI,YAAY,aAAa,EAC5CH,EAAU,QAAUG,EAEpBA,EAAO,OAAS,IAAM,CACpBV,EAAU,WAAW,EACrBK,EAAe,QAAU,CAC3B,EAEAK,EAAO,UAAaC,GAAU,CAC5B,GAAI,CACF,MAAMC,EAAS,KAAK,MAAMD,EAAM,IAAI,EACpCd,EAAUgB,GAAQ,CAChB,MAAMC,EAAO,CAAC,GAAGD,EAAMD,CAAM,EAC7B,OAAOE,EAAK,OAASpB,EAAYoB,EAAK,MAAM,CAACpB,CAAS,EAAIoB,CAC5D,CAAC,EACDZ,EAAca,GAAKA,EAAI,CAAC,EACxBX,EAAe,KAAK,KAAK,CAC3B,MAAQ,CAER,CACF,EAEAM,EAAO,QAAU,IAAM,CACrBA,EAAO,MAAA,EACHL,EAAe,QAAUV,GAC3BU,EAAe,SAAW,EAC1BL,EAAU,YAAY,EAEtB,WAAWQ,EAAS,GAAI,GAExBR,EAAU,cAAc,CAE5B,CACF,EAAG,CAACN,EAAWC,CAAa,CAAC,EAE7BqB,OAAAA,EAAAA,UAAU,KACRR,EAAA,EACO,IAAM,CACXD,EAAU,SAAS,MAAA,CACrB,GACC,CAACC,CAAO,CAAC,EAEL,CAAE,OAAAZ,EAAQ,OAAAG,EAAQ,WAAAE,EAAY,YAAAE,CAAA,CACvC"}
+{"version":3,"file":"useSSE-Bf5LOLSi.js","sources":["../../src/hooks/useSSE.ts"],"sourcesContent":["/**\n * dashboard-client/src/hooks/useSSE.ts — Server-Sent Events hook.\n *\n * Connects to /api/events, provides real-time event stream.\n * SPRINT-B1: basic connection. SPRINT-D1: reconnect with backoff.\n */\n\nimport { useState, useEffect, useRef, useCallback } from 'react';\nimport type { SseEvent } from '../../../dashboard-server/api-contracts';\n\nexport type SseStatus = 'connecting' | 'connected' | 'disconnected' | 'error';\n\nexport interface UseSSEResult {\n  events: SseEvent[];\n  status: SseStatus;\n  eventCount: number;\n  lastEventAt: number | null;\n}\n\nexport interface UseSSEOptions {\n  /** Max events to keep in memory (ring buffer). */\n  maxEvents?: number;\n  /** Max reconnect attempts before giving up. */\n  maxReconnects?: number;\n}\n\n// SPRINT-D1-REMAINING: exponential backoff (1s → 2s → 4s → max 30s).\n// SPRINT-D1-REMAINING: after 5 failures, set status='disconnected'.\n\nexport function useSSE(options: UseSSEOptions = {}): UseSSEResult {\n  const { maxEvents = 500, maxReconnects = 5 } = options;\n  const [events, setEvents] = useState<SseEvent[]>([]);\n  const [status, setStatus] = useState<SseStatus>('connecting');\n  const [eventCount, setEventCount] = useState(0);\n  const [lastEventAt, setLastEventAt] = useState<number | null>(null);\n  const reconnectCount = useRef(0);\n  const sourceRef = useRef<EventSource | null>(null);\n\n  const connect = useCallback(() => {\n    if (sourceRef.current) {\n      sourceRef.current.close();\n    }\n    setStatus('connecting');\n    const source = new EventSource('/api/events');\n    sourceRef.current = source;\n\n    source.onopen = () => {\n      setStatus('connected');\n      reconnectCount.current = 0;\n    };\n\n    source.onmessage = (event) => {\n      try {\n        const parsed = JSON.parse(event.data) as SseEvent;\n        setEvents(prev => {\n          const next = [...prev, parsed];\n          return next.length > maxEvents ? next.slice(-maxEvents) : next;\n        });\n        setEventCount(c => c + 1);\n        setLastEventAt(Date.now());\n      } catch {\n        // non-fatal: skip malformed events\n      }\n    };\n\n    source.onerror = () => {\n      source.close();\n      if (reconnectCount.current < maxReconnects) {\n        reconnectCount.current += 1;\n        setStatus('connecting');\n        // SPRINT-D1: use exponential backoff instead of fixed delay\n        setTimeout(connect, 1000);\n      } else {\n        setStatus('disconnected');\n      }\n    };\n  }, [maxEvents, maxReconnects]);\n\n  useEffect(() => {\n    connect();\n    return () => {\n      sourceRef.current?.close();\n    };\n  }, [connect]);\n\n  return { events, status, eventCount, lastEventAt };\n}\n"],"names":["useSSE","options","maxEvents","maxReconnects","events","setEvents","useState","status","setStatus","eventCount","setEventCount","lastEventAt","setLastEventAt","reconnectCount","useRef","sourceRef","connect","useCallback","source","event","parsed","prev","next","c","useEffect"],"mappings":"wCA6BO,SAASA,EAAOC,EAAyB,GAAkB,CAChE,KAAM,CAAE,UAAAC,EAAY,IAAK,cAAAC,EAAgB,GAAMF,EACzC,CAACG,EAAQC,CAAS,EAAIC,EAAAA,SAAqB,CAAA,CAAE,EAC7C,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAoB,YAAY,EACtD,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SAAS,CAAC,EACxC,CAACK,EAAaC,CAAc,EAAIN,EAAAA,SAAwB,IAAI,EAC5DO,EAAiBC,EAAAA,OAAO,CAAC,EACzBC,EAAYD,EAAAA,OAA2B,IAAI,EAE3CE,EAAUC,EAAAA,YAAY,IAAM,CAC5BF,EAAU,SACZA,EAAU,QAAQ,MAAA,EAEpBP,EAAU,YAAY,EACtB,MAAMU,EAAS,IAAI,YAAY,aAAa,EAC5CH,EAAU,QAAUG,EAEpBA,EAAO,OAAS,IAAM,CACpBV,EAAU,WAAW,EACrBK,EAAe,QAAU,CAC3B,EAEAK,EAAO,UAAaC,GAAU,CAC5B,GAAI,CACF,MAAMC,EAAS,KAAK,MAAMD,EAAM,IAAI,EACpCd,EAAUgB,GAAQ,CAChB,MAAMC,EAAO,CAAC,GAAGD,EAAMD,CAAM,EAC7B,OAAOE,EAAK,OAASpB,EAAYoB,EAAK,MAAM,CAACpB,CAAS,EAAIoB,CAC5D,CAAC,EACDZ,EAAca,GAAKA,EAAI,CAAC,EACxBX,EAAe,KAAK,KAAK,CAC3B,MAAQ,CAER,CACF,EAEAM,EAAO,QAAU,IAAM,CACrBA,EAAO,MAAA,EACHL,EAAe,QAAUV,GAC3BU,EAAe,SAAW,EAC1BL,EAAU,YAAY,EAEtB,WAAWQ,EAAS,GAAI,GAExBR,EAAU,cAAc,CAE5B,CACF,EAAG,CAACN,EAAWC,CAAa,CAAC,EAE7BqB,OAAAA,EAAAA,UAAU,KACRR,EAAA,EACO,IAAM,CACXD,EAAU,SAAS,MAAA,CACrB,GACC,CAACC,CAAO,CAAC,EAEL,CAAE,OAAAZ,EAAQ,OAAAG,EAAQ,WAAAE,EAAY,YAAAE,CAAA,CACvC"}

package/extensions/dashboard-client/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>mega-compact dashboard</title>
-    <script type="module" crossorigin src="./assets/index-4gQ7auad.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BEdKlpAB.css">
+    <script type="module" crossorigin src="./assets/index-DrktNOoT.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CUNn22iV.css">
   </head>
   <body>
     <div id="root"></div>

package/extensions/dashboard-client/src/App.tsx

@@ -27,6 +27,7 @@ const SessionsTab = React.lazy(() => import("./tabs/SessionsTab"));
 const TopicsTab = React.lazy(() => import("./tabs/TopicsTab"));
 const TurnsTab = React.lazy(() => import("./tabs/TurnsTab"));
 const MaintenanceTab = React.lazy(() => import("./tabs/MaintenanceTab"));
+const MemoryMapTab = React.lazy(() => import("./tabs/MemoryMapTab"));
 
 export type TabId =
 	| "overview"
@@ -41,24 +42,33 @@ export type TabId =
 	| "sessions"
 	| "topics"
 	| "turns"
-	| "maintenance";
+	| "maintenance"
+	| "memory-map";
 
-const TABS: Array<{ id: TabId; label: string }> = [
+type TabDef = { id: TabId; label: string };
+
+const PRIMARY_TABS: TabDef[] = [
 	{ id: "overview", label: "Overview" },
+	{ id: "cache", label: "Cache" },
+	{ id: "sessions", label: "Sessions" },
+	{ id: "turns", label: "Turns" },
+];
+
+const ADVANCED_TABS: TabDef[] = [
 	{ id: "repos", label: "Repos" },
 	{ id: "events", label: "Events" },
 	{ id: "config", label: "Config" },
 	{ id: "setup", label: "Setup" },
 	{ id: "metrics", label: "Metrics" },
-	{ id: "cache", label: "Cache" },
 	{ id: "game", label: "Game" },
 	{ id: "achievements", label: "Achievements" },
-	{ id: "sessions", label: "Sessions" },
 	{ id: "topics", label: "Topics" },
-	{ id: "turns", label: "Turns" },
 	{ id: "maintenance", label: "Maintenance" },
+	{ id: "memory-map", label: "Memory Map" },
 ];
 
+const advancedTabIds = new Set<TabId>(ADVANCED_TABS.map((t) => t.id));
+
 export default function App(): React.ReactElement {
 	const [activeTab, setActiveTab] = useState<TabId>("overview");
 	const {
@@ -86,7 +96,13 @@ export default function App(): React.ReactElement {
 						{version && <span className="version-pill">{version}</span>}
 					</h1>
 				</header>
-				<TabBar tabs={TABS} active={activeTab} onTabChange={setActiveTab} />
+				<TabBar
+					primaryTabs={PRIMARY_TABS}
+					advancedTabs={ADVANCED_TABS}
+					advancedTabIds={advancedTabIds}
+					active={activeTab}
+					onTabChange={setActiveTab}
+				/>
 				<main className="dashboard-content">
 					<React.Suspense fallback={<LoadingSpinner />}>
 						{activeTab === "overview" && (
@@ -106,8 +122,8 @@ export default function App(): React.ReactElement {
 						{activeTab === "achievements" && <AchievementsTab />}
 						{activeTab === "sessions" && <SessionsTab />}
 						{activeTab === "topics" && <TopicsTab />}
-						{activeTab === "turns" && <TurnsTab />}
-					{activeTab === "maintenance" && <MaintenanceTab />}
+						{activeTab === "maintenance" && <MaintenanceTab />}
+						{activeTab === "memory-map" && <MemoryMapTab />}
 					</React.Suspense>
 				</main>
 			</div>

package/extensions/dashboard-client/src/api/client.ts

@@ -40,8 +40,11 @@ import type {
 	MaintenanceAction,
 	MaintenanceActionResult,
 	ProviderCacheResponse,
+	CacheStripesResponse,
 	SetupStatusResponse,
 	SetupDetectResponse,
+	SetupConfigureRequest,
+	SetupConfigureResponse,
 } from "@contracts";
 
 /** Error thrown when a dashboard API response is not 2xx. */
@@ -198,6 +201,11 @@ export function fetchProviderCache(): Promise<ProviderCacheResponse> {
 	return getJson<ProviderCacheResponse>(ENDPOINTS.providerCache.path);
 }
 
+/** Cache stripe distribution + health score (A3). */
+export function fetchCacheStripes(): Promise<CacheStripesResponse> {
+	return getJson<CacheStripesResponse>(ENDPOINTS.cacheStripes.path);
+}
+
 // ── S52: turn-by-turn memory tracking + recall + rewind ───────────────
 
 export function fetchTurns(): Promise<TurnsResponse> {
@@ -287,3 +295,10 @@ export function fetchSetupStatus(): Promise<SetupStatusResponse> {
 export function fetchSetupDetect(): Promise<SetupDetectResponse> {
 	return getJson<SetupDetectResponse>(ENDPOINTS.setupDetect.path);
 }
+
+/** POST /api/setup-configure — write embedder config to .mega-compact.env. */
+export function configureEmbedder(
+	body: SetupConfigureRequest,
+): Promise<SetupConfigureResponse> {
+	return postJson<SetupConfigureResponse>(ENDPOINTS.setupConfigure.path, body);
+}

package/extensions/dashboard-client/src/components/CacheHitRateTrendCard.tsx

@@ -0,0 +1,100 @@
+/**
+ * dashboard-client/src/components/CacheHitRateTrendCard.tsx -- Cache hit-rate
+ * time-series trend chart (A3, PLAN_V2 Phase 4).
+ *
+ * Renders a sparkline view of cache hit rate from the /api/perf endpoint using
+ * real cache_hit_pct samples with timestamps. Each bar represents one sample.
+ * Shows the latest, average, and sample count.
+ *
+ * Uses .ov-sparkline / .ov-sparkline-bar CSS classes from cache.css.
+ * No external charting dependencies.
+ */
+
+import type React from "react";
+import type { PerfResponse, CacheHitSample } from "@contracts";
+
+export interface CacheHitRateTrendCardProps {
+	perf: PerfResponse;
+}
+
+function fmtPct(n: number): string {
+	return `${n.toFixed(1)}%`;
+}
+
+/**
+ * Map a percentage (0–100) to a CSS color class:
+ *   >= 80: green   (healthy)
+ *   >= 60: teal    (fair)
+ *   >= 40: yellow  (degraded)
+ *   >= 20: orange  (poor)
+ *   <  20: red     (critical)
+ */
+function pctColorClass(pct: number): string {
+	if (pct >= 80) return "ov-bar-green";
+	if (pct >= 60) return "ov-bar-teal";
+	if (pct >= 40) return "ov-bar-yellow";
+	if (pct >= 20) return "ov-bar-orange";
+	return "ov-bar-red";
+}
+
+export const CacheHitRateTrendCard: React.FC<CacheHitRateTrendCardProps> = ({
+	perf,
+}) => {
+	const { cache_hit_pct: c } = perf;
+	const samples: CacheHitSample[] =
+		c.samples && c.samples.length > 0 ? c.samples : [];
+
+	return (
+		<div className="ov-card cache-trend-card">
+			<h3 className="ov-card-title">Cache Hit-Rate Trend</h3>
+
+			{/* Metric summary */}
+			<div className="ov-perf-summary">
+				<div className="ov-perf-stat">
+					Avg: <strong>{fmtPct(c.avg)}</strong>
+				</div>
+				<div className="ov-perf-stat">
+					Latest: <strong>{fmtPct(c.latest)}</strong>
+				</div>
+				<div className="ov-perf-stat">
+					Samples: <strong>{c.n}</strong>
+				</div>
+			</div>
+
+			{/* Sparkline bars from real samples */}
+			{samples.length > 0 ? (
+				<>
+					<div
+						className="ov-sparkline"
+						role="img"
+						aria-label={`Cache hit rate trend: ${c.n} samples, average ${fmtPct(c.avg)}, latest ${fmtPct(c.latest)}`}
+					>
+						{samples.map((s, i) => {
+							const barH = Math.max(2, Math.round(s.pct * 0.6));
+							const colorClass = pctColorClass(s.pct);
+							const isLatest = i === samples.length - 1;
+							return (
+								<div
+									key={i}
+									className={`ov-sparkline-bar ${colorClass}${isLatest ? " ov-bar-latest" : ""}`}
+									style={{ height: `${barH}px` }}
+									title={`${fmtPct(s.pct)} at ${new Date(s.ts).toLocaleTimeString()}`}
+								/>
+							);
+						})}
+					</div>
+					<div className="ov-card-footer">
+						{samples.length} sample{samples.length !== 1 ? "s" : ""} over{" "}
+						{samples.length > 1
+							? `${Math.round(
+									(samples[samples.length - 1].ts - samples[0].ts) / 1000,
+								)}s`
+							: "latest turn"}
+					</div>
+				</>
+			) : (
+				<div className="ov-empty-state">No cache-hit samples yet</div>
+			)}
+		</div>
+	);
+};

package/extensions/dashboard-client/src/components/StripeDistributionCard.tsx

@@ -0,0 +1,110 @@
+/**
+ * dashboard-client/src/components/StripeDistributionCard.tsx — Cache stripe
+ * distribution visualization (A3, PLAN_V2 Phase 4).
+ *
+ * Renders a horizontal bar chart of stripe buckets (0–4) with stability
+ * indicators, plus a health-score summary box.
+ *
+ * Uses only CSS-based bar rendering — no external charting dependencies.
+ */
+
+import type React from "react";
+import type { CacheStripesResponse } from "@contracts";
+import { fmtPctFromFraction } from "../utils/format";
+
+const STRIPE_COLORS = [
+	"ov-bar-green",   // 0 permanent
+	"ov-bar-blue",    // 1 epoch
+	"ov-bar-teal",    // 2 topic
+	"ov-bar-yellow",  // 3 thread
+	"ov-bar-gray",    // 4 volatile
+];
+
+const STRIPE_LABELS = [
+	"Permanent",
+	"Epoch",
+	"Topic",
+	"Thread",
+	"Volatile",
+];
+
+const HEALTH_LABEL_COLOR: Record<string, string> = {
+	good: "ov-text-green",
+	fair: "ov-text-yellow",
+	degraded: "ov-text-orange",
+	poor: "ov-text-red",
+};
+
+export interface StripeDistributionCardProps {
+	data: CacheStripesResponse;
+}
+
+export function StripeDistributionCard({
+	data,
+}: StripeDistributionCardProps): React.ReactElement {
+	const maxCount = Math.max(...data.buckets.map((b) => b.count), 1);
+	const healthColor = HEALTH_LABEL_COLOR[data.health.label] ?? "ov-text-gray";
+
+	return (
+		<div className="ov-card">
+			<h3 className="ov-card-title">Cache Stripe Distribution</h3>
+
+			{/* Health score summary */}
+			<div className="ov-stripe-health-summary">
+				<span className={`ov-stripe-health-badge ${healthColor}`}>
+					{data.health.label}
+				</span>
+				<span className="ov-stripe-health-score">
+					{fmtPctFromFraction(data.health.score)}
+				</span>
+				<span className="ov-stripe-churn">
+					Churn: {fmtPctFromFraction(data.health.churnRate)}
+				</span>
+				<span className="ov-stripe-total">
+					{data.totalChunks} total chunks
+				</span>
+			</div>
+
+			{/* Bar chart — one row per stripe */}
+			<div className="ov-stripe-bars">
+				{data.buckets.map((bucket) => {
+					const pct =
+						maxCount > 0
+							? Math.max(0, Math.min(100, (bucket.count / maxCount) * 100))
+							: 0;
+					const colorClass =
+						STRIPE_COLORS[bucket.stripe] ?? "ov-bar-gray";
+					const label =
+						bucket.label || (STRIPE_LABELS[bucket.stripe] ?? `Stripe ${bucket.stripe}`);
+					return (
+						<div key={bucket.stripe} className="ov-stripe-row">
+							<span className="ov-stripe-label" title={label}>
+								{label}
+							</span>
+							<div className="ov-bar-track">
+								<div
+									className={`ov-bar-fill ${colorClass}`}
+									style={{ width: `${pct}%` }}
+								/>
+							</div>
+							<span className="ov-stripe-count">{bucket.count}</span>
+							<span
+								className="ov-stripe-stability"
+								title={`min ${fmtPctFromFraction(bucket.minStability)} / max ${fmtPctFromFraction(bucket.maxStability)}`}
+							>
+								{fmtPctFromFraction(bucket.avgStability)}
+							</span>
+						</div>
+					);
+				})}
+			</div>
+
+			{/* Epoch info */}
+			<div className="ov-stripe-footer">
+				Epoch: {data.epochId ?? "—"}
+				&middot;
+				Dominant tier: {fmtPctFromFraction(data.health.dominantTier)}
+			</div>
+		</div>
+	);
+}

package/extensions/dashboard-client/src/components/TabBar.tsx

@@ -1,23 +1,37 @@
 /**
- * dashboard-client/src/components/TabBar.tsx — tab navigation.
+ * dashboard-client/src/components/TabBar.tsx — tab navigation with Advanced collapse.
+ *
+ * PRIMARY_TABS are always visible. The remaining tabs collapse behind an
+ * "Advanced" toggle button.
  */
 
+import React, { useState } from "react";
 import type { TabId } from "../App";
 
 export interface TabBarProps {
-	tabs: Array<{ id: TabId; label: string }>;
+	primaryTabs: Array<{ id: TabId; label: string }>;
+	advancedTabs: Array<{ id: TabId; label: string }>;
+	advancedTabIds: Set<TabId>;
 	active: TabId;
 	onTabChange: (id: TabId) => void;
 }
 
 export function TabBar({
-	tabs,
+	primaryTabs,
+	advancedTabs,
+	advancedTabIds,
 	active,
 	onTabChange,
 }: TabBarProps): React.ReactElement {
+	const [advancedOpen, setAdvancedOpen] = useState(
+		() => advancedTabIds.has(active), // start open if an advanced tab is active
+	);
+
+	const isAdvancedActive = advancedTabIds.has(active);
+
 	return (
 		<nav className="tab-bar" role="tablist">
-			{tabs.map((tab) => (
+			{primaryTabs.map((tab) => (
 				<button
 					key={tab.id}
 					type="button"
@@ -29,6 +43,37 @@ export function TabBar({
 					{tab.label}
 				</button>
 			))}
+
+			<button
+				type="button"
+				className="advanced-toggle"
+				aria-expanded={advancedOpen}
+				onClick={() => setAdvancedOpen((o) => !o)}
+			>
+				Advanced {advancedOpen ? "▲" : "▼"}
+			</button>
+
+			{advancedOpen && (
+				<div className="advanced-tabs">
+					{advancedTabs.map((tab) => (
+						<button
+							key={tab.id}
+							type="button"
+							role="tab"
+							aria-selected={active === tab.id}
+							className={
+								active === tab.id ? "active" : ""
+							}
+							onClick={() => {
+								onTabChange(tab.id);
+								// Keep the panel open so users can browse.
+							}}
+						>
+							{tab.label}
+						</button>
+					))}
+				</div>
+			)}
 		</nav>
 	);
 }

package/extensions/dashboard-client/src/main.tsx

@@ -20,6 +20,7 @@ import "./styles/repostack.css";
 import "./styles/session-gauges.css";
 import "./styles/turns.css";
 import "./styles/maintenance.css";
+import "./styles/cache.css";
 
 const rootEl = document.getElementById("root");
 if (!rootEl) {

package/extensions/dashboard-client/src/styles/base.css

@@ -93,6 +93,36 @@ body {
 	color: var(--text);
 }
 
+/* Advanced toggle — visually same as a tab button but toggles open/closed */
+.tab-bar .advanced-toggle {
+	background: none;
+	border: none;
+	color: var(--muted);
+	padding: 8px 14px;
+	cursor: pointer;
+	font-size: clamp(12px, 0.85vw, 14px);
+	border-bottom: 2px solid transparent;
+	white-space: nowrap;
+	margin-left: 6px;
+}
+.tab-bar .advanced-toggle:hover {
+	color: var(--text);
+}
+.tab-bar .advanced-toggle[aria-expanded="true"] {
+	color: var(--text);
+	border-bottom-color: var(--border);
+}
+
+/* Wrapper for the advanced-tab row — appears underneath on a fresh line */
+.tab-bar .advanced-tabs {
+	display: flex;
+	gap: 4px;
+	flex-basis: 100%;
+	border-top: 1px dashed var(--border);
+	padding-top: 6px;
+	margin-top: -1px;
+}
+
 .dashboard-content {
 	min-height: 400px;
 }

package/extensions/dashboard-client/src/styles/cache.css

@@ -0,0 +1,167 @@
+/**
+ * dashboard-client/src/styles/cache.css — Cache tab styles (B.3 + A3).
+ *
+ * Stripe distribution bars, sparkline trend chart, health badge, and
+ * per-cache-section layout. All colors use CSS variables from base.css.
+ */
+
+/* ─── Stripe Distribution Card ─────────────────────────────────────────── */
+
+.ov-stripe-health-summary {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	margin-bottom: 12px;
+	font-size: clamp(11px, 0.85vw, 14px);
+	flex-wrap: wrap;
+}
+
+.ov-stripe-health-badge {
+	display: inline-block;
+	padding: 2px 10px;
+	border-radius: 10px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	font-weight: 600;
+	text-transform: capitalize;
+}
+
+.ov-text-green  { color: var(--ok); }
+.ov-text-yellow { color: var(--warn); }
+.ov-text-orange { color: #d4761e; }
+.ov-text-red    { color: var(--err); }
+.ov-text-gray   { color: var(--muted); }
+
+.ov-stripe-health-score,
+.ov-stripe-churn,
+.ov-stripe-total {
+	color: var(--muted);
+}
+
+/* Bar chart rows */
+.ov-stripe-bars {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.ov-stripe-row {
+	display: grid;
+	grid-template-columns: 80px 1fr 40px 48px;
+	align-items: center;
+	gap: 8px;
+	font-size: clamp(11px, 0.8vw, 13px);
+}
+
+.ov-stripe-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--text);
+}
+
+.ov-bar-track {
+	height: 18px;
+	background: var(--bg);
+	border-radius: 4px;
+	overflow: hidden;
+	position: relative;
+}
+
+.ov-bar-fill {
+	height: 100%;
+	border-radius: 4px;
+	transition: width 0.5s ease;
+	min-width: 2px;
+}
+
+.ov-bar-green  { background: var(--ok); }
+.ov-bar-blue   { background: var(--accent); }
+.ov-bar-teal   { background: #3d9cb0; }
+.ov-bar-yellow  { background: var(--warn); }
+.ov-bar-gray    { background: var(--muted); }
+.ov-bar-red     { background: var(--err); }
+.ov-bar-orange  { background: #d4761e; }
+
+.ov-bar-latest {
+	box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
+}
+
+.ov-stripe-count {
+	text-align: right;
+	color: var(--text);
+	font-variant-numeric: tabular-nums;
+}
+
+.ov-stripe-stability {
+	color: var(--muted);
+	font-size: clamp(10px, 0.75vw, 12px);
+}
+
+.ov-stripe-footer {
+	margin-top: 10px;
+	font-size: clamp(10px, 0.75vw, 12px);
+	color: var(--muted);
+	display: flex;
+	gap: 8px;
+}
+
+/* ─── Hit-Rate Trend Card ──────────────────────────────────────────────── */
+
+.ov-perf-summary {
+	display: flex;
+	gap: 14px;
+	align-items: center;
+	margin-bottom: 10px;
+	font-size: clamp(11px, 0.85vw, 14px);
+	flex-wrap: wrap;
+}
+
+.ov-perf-stat strong {
+	font-variant-numeric: tabular-nums;
+}
+
+/* Sparkline bars */
+.ov-sparkline {
+	display: flex;
+	align-items: flex-end;
+	gap: 3px;
+	height: 60px;
+	padding: 4px 2px;
+	margin-bottom: 6px;
+}
+
+.ov-sparkline-bar {
+	flex: 1;
+	min-width: 4px;
+	border-radius: 2px 2px 0 0;
+	transition: height 0.4s ease;
+}
+
+.ov-empty-state {
+	font-size: clamp(11px, 0.8vw, 13px);
+	color: var(--muted);
+	padding: 16px 0;
+	text-align: center;
+}
+
+.ov-card-footer {
+	font-size: clamp(10px, 0.75vw, 12px);
+	color: var(--muted);
+	margin-top: 4px;
+}
+
+/* ─── Overrides for card container ─────────────────────────────────────── */
+
+.ov-card {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	padding: clamp(8px, 1.5vw, 16px);
+}
+
+.ov-card-title {
+	margin: 0 0 10px;
+	font-size: clamp(13px, 0.9vw, 15px);
+	font-weight: 600;
+}