pi-mega-compact 0.11.4 → 0.11.6

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;
+}

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

@@ -1,22 +1,36 @@
 /**
- * dashboard-client/src/tabs/CacheTab.tsx — Cache tab (B.3).
+ * dashboard-client/src/tabs/CacheTab.tsx -- Cache tab (B.3 + A3).
  *
- * Two sections, each with its own header:
- *   1. Provider Prompt Cache  → ProviderCacheCard  (/api/provider-cache)
- *   2. Mega-Compact Dedup Cache → CacheHitsCard + TimeSavedCard  (/api/snapshot)
+ * Sections:
+ *   1. Provider Prompt Cache    -> ProviderCacheCard        (/api/provider-cache)
+ *   2. Cache Stripe Distribution -> StripeDistributionCard  (/api/cache-stripes)
+ *   3. Cache Hit-Rate Trend     -> CacheHitRateTrendCard    (/api/perf)
+ *   4. Mega-Compact Dedup Cache -> CacheHitsCard + TimeSavedCard  (/api/snapshot)
  *
- * Both fetch at 5s polling (same interval). Loading / error shown per-section
- * only when its own fetch fails; the other section keeps rendering.
+ * Each section fetches independently; failures in one do not affect others.
+ * 5s polling on provider cache and activity snapshot; 15s on stripes + trend.
  */
 
 import type React from "react";
 import { useCallback } from "react";
-import type { SnapshotResponse, ProviderCacheResponse } from "@contracts";
+import type {
+	SnapshotResponse,
+	ProviderCacheResponse,
+	CacheStripesResponse,
+	PerfResponse,
+} from "@contracts";
 import { useApi } from "../hooks/useApi";
-import { fetchSnapshot, fetchProviderCache } from "../api/client";
+import {
+	fetchSnapshot,
+	fetchProviderCache,
+	fetchCacheStripes,
+	fetchPerf,
+} from "../api/client";
 import { CacheHitsCard } from "../components/CacheHitsCard";
 import { TimeSavedCard } from "../components/TimeSavedCard";
 import { ProviderCacheCard } from "../components/ProviderCacheCard";
+import { StripeDistributionCard } from "../components/StripeDistributionCard";
+import { CacheHitRateTrendCard } from "../components/CacheHitRateTrendCard";
 
 export default function CacheTab(): React.ReactElement {
 	/* --- Provider prompt cache (5s poll) --- */
@@ -29,6 +43,26 @@ export default function CacheTab(): React.ReactElement {
 		{ pollInterval: 5000 },
 	);
 
+	/* --- Cache stripe distribution (15s poll) --- */
+	const {
+		data: stripes,
+		loading: stripesLoading,
+		error: stripesError,
+	} = useApi<CacheStripesResponse>(
+		useCallback(() => fetchCacheStripes(), []),
+		{ pollInterval: 15000 },
+	);
+
+	/* --- Cache hit-rate trend from perf samples (15s poll) --- */
+	const {
+		data: perf,
+		loading: perfLoading,
+		error: perfError,
+	} = useApi<PerfResponse>(
+		useCallback(() => fetchPerf({ minutes: 30 }), []),
+		{ pollInterval: 15000 },
+	);
+
 	/* --- Dedup cache snapshot (5s poll) --- */
 	const {
 		data: snapshot,
@@ -42,11 +76,11 @@ export default function CacheTab(): React.ReactElement {
 	return (
 		<div className="cache-tab">
 			{/* ==============================================================
-			    Section 1 — Provider Prompt Cache
+			    Section 1 -- Provider Prompt Cache
 			    ============================================================== */}
 			<h2>Provider Prompt Cache</h2>
 			{pcLoading ? (
-				<p className="tab-stub">Loading…</p>
+				<p className="tab-stub">Loading...</p>
 			) : pcError ? (
 				<p className="tab-stub">
 					Provider cache unavailable: {pcError.message}
@@ -64,15 +98,44 @@ export default function CacheTab(): React.ReactElement {
 					modelLabel={providerCache.savings?.model ?? null}
 					firstTurnAt={providerCache.cache.firstTurnAt}
 					latestTurnAt={providerCache.cache.latestTurnAt}
+					byModel={providerCache.cache.byModel ?? []}
 				/>
 			) : null}
 
 			{/* ==============================================================
-			    Section 2 — Mega-Compact Dedup Cache
+			    Section 2 -- Cache Stripe Distribution
+			    ============================================================== */}
+			<h2>Cache Stripe Distribution</h2>
+			{stripesLoading ? (
+				<p className="tab-stub">Loading...</p>
+			) : stripesError ? (
+				<p className="tab-stub">
+					Cache stripe data unavailable: {stripesError.message}
+				</p>
+			) : stripes ? (
+				<StripeDistributionCard data={stripes} />
+			) : null}
+
+			{/* ==============================================================
+			    Section 3 -- Cache Hit-Rate Trend
+			    ============================================================== */}
+			<h2>Cache Hit-Rate Trend</h2>
+			{perfLoading ? (
+				<p className="tab-stub">Loading...</p>
+			) : perfError ? (
+				<p className="tab-stub">
+					Hit-rate trend unavailable: {perfError.message}
+				</p>
+			) : perf ? (
+				<CacheHitRateTrendCard perf={perf} />
+			) : null}
+
+			{/* ==============================================================
+			    Section 4 -- Mega-Compact Dedup Cache
 			    ============================================================== */}
 			<h2>Mega-Compact Dedup Cache</h2>
 			{snapLoading ? (
-				<p className="tab-stub">Loading…</p>
+				<p className="tab-stub">Loading...</p>
 			) : snapError ? (
 				<p className="tab-stub">Snapshot unavailable: {snapError.message}</p>
 			) : (