pi-mega-compact 0.13.4 → 0.13.6

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

@@ -17,6 +17,7 @@ import {
 	fmtRelativeTime,
 } from "../utils/format";
 import { lookupModelInputRate } from "@pricing";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 // ---------------------------------------------------------------------------
 // Per-model breakdown type (mirrors the API contract).
@@ -90,11 +91,11 @@ function StatRow({
 	title?: string;
 }): React.ReactElement {
 	return (
-		<div className="ov-stat-row">
-			<span className="ov-stat-label" title={title}>
+		<div className="flex items-baseline justify-between border-b border-border py-1 text-sm">
+			<span className="text-xs text-muted-foreground" title={title}>
 				{label}
 			</span>
-			<span className={`ov-stat-value${className ? ` ${className}` : ""}`}>
+			<span className={`font-semibold${className ? ` ${className}` : ""}`}>
 				{value}
 			</span>
 		</div>
@@ -109,7 +110,11 @@ export function ProviderCacheCard(
 	props: ProviderCacheCardProps,
 ): React.ReactElement {
 	return (
-		<div className="card provider-cache-card">
+		<Card className="electric-hover">
+			<CardHeader>
+				<CardTitle>Provider Prompt Cache</CardTitle>
+			</CardHeader>
+			<CardContent>
 			{/* --- Hit Rate + Turns --- */}
 			<StatRow
 				label="Cache Hit Rate"
@@ -155,7 +160,9 @@ export function ProviderCacheCard(
 			{/* --- Per-model breakdown (F4) --- */}
 			{props.byModel.length > 0 && (
 				<>
-					<div className="ov-stat-section-label">Per Model</div>
+					<div className="mt-2 text-xs font-semibold text-muted-foreground">
+						Per Model
+					</div>
 					{props.byModel.map((m) => {
 						const rate = lookupModelInputRate(m.model);
 						const cr =
@@ -163,7 +170,7 @@ export function ProviderCacheCard(
 						const cw =
 							rate != null ? (m.totalCacheWrite / 1_000_000) * rate : null;
 						return (
-							<div key={m.model} className="ov-stat-group">
+							<div key={m.model} className="mt-2">
 								<StatRow label="Model" value={m.model} />
 								<StatRow
 									label="Hit Rate"
@@ -192,6 +199,7 @@ export function ProviderCacheCard(
 					})}
 				</>
 			)}
-		</div>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -0,0 +1,253 @@
+/**
+ * dashboard-client/src/components/RagDashboard.tsx — full RAG metrics section
+ * (H3.2). Rendered in the Metrics tab.
+ *
+ * Fetches /api/rag-metrics and renders:
+ *   1. Stat row: telemetry turns, HyDE-ran count, avg lift, pass rate.
+ *   2. HyDE Recall Lift Bar (BarChart over daily avg lift).
+ *   3. CRAG Quality Line (LineChart over daily avg score).
+ *   4. Per-flag status dots (hydeEnabled, recallMetricsEnabled).
+ *   5. Recall Latency Stacked Bar (hyde vs base turn counts) + Hit-Rate Area.
+ *
+ * PREVENT-PI-004: relative-path fetch to the same-origin dashboard server.
+ * recharts is bundled into this localhost-served static bundle (no runtime
+ * network calls).
+ */
+
+import type React from "react";
+import { useMemo } from "react";
+import { useApi } from "../hooks/useApi";
+import { fetchRagMetrics } from "../api/client";
+import type { RagMetricsResponse } from "@contracts";
+
+/** Daily-aggregate row shape (derived from the rag-metrics contract). */
+type DailyTelemetry = RagMetricsResponse["daily"][number];
+import {
+	ResponsiveContainer,
+	BarChart,
+	Bar,
+	LineChart,
+	Line,
+	AreaChart,
+	Area,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	Legend,
+} from "recharts";
+import { Card, CardHeader, CardTitle, CardContent } from "./ui/card";
+import { Badge } from "./ui/badge";
+
+const AXIS = "#8b949e";
+const GRID = "#30363d";
+const TOOLTIP = {
+	background: "#161b22",
+	border: "1px solid #30363d",
+	borderRadius: "6px",
+	color: "#e6edf3",
+	fontSize: 12,
+} as const;
+
+/** One row per day, with lead/lag-safe derived series for the charts. */
+interface DailyRow {
+	day: string;
+	avgLift: number;
+	avgScore: number;
+	avgGenMs: number;
+	passRate: number;
+	hydeTurns: number;
+	baseTurns: number;
+	recallCount: number;
+}
+
+function toRows(daily: DailyTelemetry[]): DailyRow[] {
+	return daily.map((d) => {
+		const baseTurns = Math.max(0, d.recallCount - d.hydeRanCount);
+		return {
+			day: d.day.slice(5), // "MM-DD"
+			avgLift: d.avgLift ?? 0,
+			avgScore: d.avgScore ?? 0,
+			avgGenMs: d.avgGenMs ?? 0,
+			passRate: d.avgScore == null ? 0 : d.avgScore,
+			hydeTurns: d.hydeRanCount,
+			baseTurns,
+			recallCount: d.recallCount,
+		};
+	});
+}
+
+export interface RagDashboardProps {
+	/** Optional pre-fetched metrics; when absent, the card fetches inline. */
+	metrics?: RagMetricsResponse | null;
+}
+
+export const RagDashboard: React.FC<RagDashboardProps> = ({ metrics }) => {
+	const { data, loading } = useApi<RagMetricsResponse>(
+		useMemo(() => () => fetchRagMetrics(), []),
+		{ pollInterval: 30_000 },
+	);
+	const m = metrics ?? data;
+	const rows = useMemo(() => (m ? toRows(m.daily) : []), [m]);
+
+	if (loading && !m) {
+		return <div className="text-sm text-muted-foreground">Loading RAG metrics…</div>;
+	}
+	if (!m) {
+		return (
+			<div className="text-sm text-muted-foreground">
+				No RAG metrics available yet. They appear once turns record HyDE/recall
+				telemetry.
+			</div>
+		);
+	}
+
+	const { totals, flags } = m;
+
+	return (
+		<div className="flex flex-col gap-4">
+			<StatRow totals={totals} flags={flags} />
+
+			<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+				<Card>
+					<CardHeader>
+						<CardTitle>HyDE Recall Lift</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<ResponsiveContainer width="100%" height={200}>
+							<BarChart data={rows} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
+								<CartesianGrid strokeDasharray="3 3" stroke={GRID} />
+								<XAxis dataKey="day" stroke={AXIS} tick={{ fontSize: 11 }} />
+								<YAxis stroke={AXIS} tick={{ fontSize: 11 }} width={40} />
+								<Tooltip contentStyle={TOOLTIP} />
+								<Bar dataKey="avgLift" name="avg lift" fill="#58a6ff" isAnimationActive={false} />
+							</BarChart>
+						</ResponsiveContainer>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>CRAG Quality</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<ResponsiveContainer width="100%" height={200}>
+							<LineChart data={rows} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
+								<CartesianGrid strokeDasharray="3 3" stroke={GRID} />
+								<XAxis dataKey="day" stroke={AXIS} tick={{ fontSize: 11 }} />
+								<YAxis stroke={AXIS} tick={{ fontSize: 11 }} width={40} domain={[0, 1]} />
+								<Tooltip contentStyle={TOOLTIP} />
+								<Line type="monotone" dataKey="avgScore" name="avg score" stroke="#3fb950" dot={false} strokeWidth={2} isAnimationActive={false} />
+							</LineChart>
+						</ResponsiveContainer>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Recall Latency (avg gen ms)</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<ResponsiveContainer width="100%" height={200}>
+							<BarChart data={rows} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
+								<CartesianGrid strokeDasharray="3 3" stroke={GRID} />
+								<XAxis dataKey="day" stroke={AXIS} tick={{ fontSize: 11 }} />
+								<YAxis stroke={AXIS} tick={{ fontSize: 11 }} width={40} />
+								<Tooltip contentStyle={TOOLTIP} />
+								<Bar dataKey="avgGenMs" name="gen ms" fill="#d29922" isAnimationActive={false} />
+							</BarChart>
+						</ResponsiveContainer>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>HyDE vs Base Turn Volume</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<ResponsiveContainer width="100%" height={200}>
+							<AreaChart data={rows} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
+								<CartesianGrid strokeDasharray="3 3" stroke={GRID} />
+								<XAxis dataKey="day" stroke={AXIS} tick={{ fontSize: 11 }} />
+								<YAxis stroke={AXIS} tick={{ fontSize: 11 }} width={40} />
+								<Tooltip contentStyle={TOOLTIP} />
+								<Legend wrapperStyle={{ fontSize: 11 }} />
+								<Area type="monotone" dataKey="hydeTurns" name="hyde turns" stackId="1" stroke="#58a6ff" fill="#58a6ff" fillOpacity={0.5} isAnimationActive={false} />
+								<Area type="monotone" dataKey="baseTurns" name="base turns" stackId="1" stroke="#8b949e" fill="#8b949e" fillOpacity={0.4} isAnimationActive={false} />
+							</AreaChart>
+						</ResponsiveContainer>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+};
+
+function StatRow({
+	totals,
+	flags,
+}: {
+	totals: RagMetricsResponse["totals"];
+	flags: RagMetricsResponse["flags"];
+}): React.ReactElement {
+	const stats: Array<{ label: string; value: string; hint: string }> = [
+		{
+			label: "Telemetry turns",
+			value: String(totals.telemetryTurns),
+			hint: "turns with HyDE or recall data",
+		},
+		{
+			label: "HyDE ran",
+			value: String(totals.hydeRanTurns),
+			hint: "turns where HyDE generated a doc",
+		},
+		{
+			label: "Avg lift",
+			value: `${totals.avgLift.toFixed(2)}×`,
+			hint: "fused / raw hit breadth",
+		},
+		{
+			label: "Pass rate",
+			value: `${Math.round(totals.recentPassRate * 100)}%`,
+			hint: totals.avgScore == null ? "no scored turns" : `avg score ${totals.avgScore.toFixed(2)}`,
+		},
+	];
+
+	return (
+		<div className="grid grid-cols-2 gap-4 lg:grid-cols-5">
+			{stats.map((s) => (
+				<Card key={s.label}>
+					<CardContent>
+						<div className="text-xs text-muted-foreground">{s.label}</div>
+						<div className="font-heading text-2xl font-semibold text-foreground">
+							{s.value}
+						</div>
+						<div className="mt-0.5 text-xs text-muted-foreground">{s.hint}</div>
+					</CardContent>
+				</Card>
+			))}
+			<Card>
+				<CardContent>
+					<div className="text-xs text-muted-foreground">Flags</div>
+					<div className="mt-1 flex flex-col gap-1 text-xs">
+						<FlagDot label="HyDE" on={flags.hydeEnabled} />
+						<FlagDot label="Recall metrics" on={flags.recallMetricsEnabled} />
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}
+
+function FlagDot({ label, on }: { label: string; on: boolean }): React.ReactElement {
+	return (
+		<span className="flex items-center gap-1.5">
+			<span
+				className={`inline-block h-2 w-2 rounded-full ${on ? "bg-success" : "bg-danger"}`}
+				aria-hidden="true"
+			/>
+			{label}:{" "}
+			<Badge variant={on ? "success" : "danger"}>{on ? "on" : "off"}</Badge>
+		</span>
+	);
+}

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

@@ -10,6 +10,7 @@
 
 import type React from "react";
 import { fmtPctFromFraction } from "../utils/format";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 export interface RepoAllSessionsCardProps {
 	checkpointCount: number;
@@ -45,9 +46,9 @@ function StatRow({
 	value: string | number;
 }): React.ReactElement {
 	return (
-		<div className="ov-stat-row">
-			<span className="ov-stat-label">{label}</span>
-			<span className="ov-stat-value">{value}</span>
+		<div className="flex items-baseline justify-between border-b border-border py-1 text-sm">
+			<span className="text-xs text-muted-foreground">{label}</span>
+			<span className="font-semibold">{value}</span>
 		</div>
 	);
 }
@@ -61,8 +62,11 @@ export function RepoAllSessionsCard(
 	const compressSub = `${fmtPctFromFraction(sp)} tokens saved · dedup: ${fmtPctFromFraction(props.dedupPct)}`;
 
 	return (
-		<div className="card repo-sessions-card">
-			<h3>Repo (all sessions)</h3>
+		<Card className="electric-hover">
+			<CardHeader>
+				<CardTitle>Repo (all sessions)</CardTitle>
+			</CardHeader>
+			<CardContent>
 			<StatRow
 				label="Checkpoints"
 				value={props.checkpointCount.toLocaleString()}
@@ -88,15 +92,16 @@ export function RepoAllSessionsCard(
 				label="Storage Dedup"
 				value={fmtPctFromFraction(props.storageDedupRate)}
 			/>
-			<div className="ov-compression-meter">
-				<div className="meter-track">
+			<div>
+				<div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-bg-elevated">
 					<div
-						className={`meter-fill ${barCls}`}
+						className={`meter-fill h-full ${barCls}`}
 						style={{ width: `${barWidth}%` }}
 					/>
 				</div>
-				<span className="meter-sub">{compressSub}</span>
+				<span className="mt-1 block text-xs text-muted-foreground">{compressSub}</span>
 			</div>
-		</div>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -18,6 +18,7 @@
 
 import type React from "react";
 import type { ActiveSession, SessionsResponse } from "@contracts";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 export interface RepoContextStackProps {
 	/** Active sessions from /api/sessions (may be null while loading). */
@@ -135,6 +136,17 @@ function fmtTokens(n: number): string {
 	return n.toLocaleString();
 }
 
+function StackCard({ children }: { children: React.ReactNode }): React.ReactElement {
+	return (
+		<Card className="electric-hover">
+			<CardHeader>
+				<CardTitle>Context per Repo (live)</CardTitle>
+			</CardHeader>
+			<CardContent>{children}</CardContent>
+		</Card>
+	);
+}
+
 export function RepoContextStack({
 	sessions,
 	loading,
@@ -142,21 +154,19 @@ export function RepoContextStack({
 }: RepoContextStackProps): React.ReactElement | null {
 	if (error) {
 		return (
-			<div className="card repo-stack-card">
-				<h3>Context per Repo (live)</h3>
-				<div className="sessions-empty">
+			<StackCard>
+				<span className="text-sm text-muted-foreground">
 					Error loading sessions: {error.message}
-				</div>
-			</div>
+				</span>
+			</StackCard>
 		);
 	}
 
 	if (loading && !sessions) {
 		return (
-			<div className="card repo-stack-card">
-				<h3>Context per Repo (live)</h3>
-				<div className="sessions-empty">Loading sessions…</div>
-			</div>
+			<StackCard>
+				<span className="text-sm text-muted-foreground">Loading sessions…</span>
+			</StackCard>
 		);
 	}
 
@@ -166,10 +176,9 @@ export function RepoContextStack({
 
 	if (repos.length === 0) {
 		return (
-			<div className="card repo-stack-card">
-				<h3>Context per Repo (live)</h3>
-				<div className="sessions-empty">No active sessions.</div>
-			</div>
+			<StackCard>
+				<span className="text-sm text-muted-foreground">No active sessions.</span>
+			</StackCard>
 		);
 	}
 
@@ -177,8 +186,7 @@ export function RepoContextStack({
 		maxWindow > 0 ? Math.round((totalTokens / maxWindow) * 100) : 0;
 
 	return (
-		<div className="card repo-stack-card">
-			<h3>Context per Repo (live)</h3>
+		<StackCard>
 			<div
 				className="repo-stack-bar"
 				role="group"
@@ -233,6 +241,6 @@ export function RepoContextStack({
 					);
 				})}
 			</div>
-		</div>
+		</StackCard>
 	);
 }

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

@@ -51,81 +51,84 @@ export function RepoDetailModal({
 
 	return (
 		<div
-			className="modal-backdrop"
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
 			onClick={onClose}
 			role="dialog"
 			aria-modal="true"
 		>
-			<div className="modal-card" onClick={(e) => e.stopPropagation()}>
-				<header className="modal-header">
-					<h2>{repo.displayName}</h2>
+			<div
+				className="max-h-[85vh] w-full max-w-xl overflow-y-auto rounded-xl border border-border bg-bg-card p-5 shadow-panel"
+				onClick={(e) => e.stopPropagation()}
+			>
+				<header className="mb-2 flex items-start justify-between gap-4">
+					<h2 className="font-heading text-lg font-semibold">{repo.displayName}</h2>
 					<button
 						type="button"
-						className="modal-close"
+						className="text-2xl leading-none text-muted-foreground hover:text-foreground"
 						onClick={onClose}
 						aria-label="Close"
 					>
 						×
 					</button>
 				</header>
-				<p className="modal-path">{repo.repoRoot}</p>
-				<div className="modal-grid">
-					<div className="modal-stat">
-						<span className="modal-label">Checkpoints</span>
-						<span className="modal-value">
+				<p className="mb-4 break-all font-mono text-xs text-muted-foreground">{repo.repoRoot}</p>
+				<div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
+					<div className="rounded-md border border-border/50 bg-bg-elevated/40 p-3">
+						<span className="block text-xs text-muted-foreground">Checkpoints</span>
+						<span className="text-xl font-semibold">
 							{repo.checkpointCount.toLocaleString()}
 						</span>
 					</div>
-					<div className="modal-stat">
-						<span className="modal-label">Sessions</span>
-						<span className="modal-value">
+					<div className="rounded-md border border-border/50 bg-bg-elevated/40 p-3">
+						<span className="block text-xs text-muted-foreground">Sessions</span>
+						<span className="text-xl font-semibold">
 							{repo.sessions.toLocaleString()}
 						</span>
 					</div>
-					<div className="modal-stat modal-highlight">
-						<span className="modal-label">Tokens saved</span>
-						<span className="modal-value">{fmt(repo.tokensSaved)}</span>
+					<div className="rounded-md border border-border/50 bg-primary/10 p-3">
+						<span className="block text-xs text-muted-foreground">Tokens saved</span>
+						<span className="text-xl font-semibold">{fmt(repo.tokensSaved)}</span>
 					</div>
-					<div className="modal-stat">
-						<span className="modal-label">Tokens kept</span>
-						<span className="modal-value">{fmt(repo.tokensKept)}</span>
+					<div className="rounded-md border border-border/50 bg-bg-elevated/40 p-3">
+						<span className="block text-xs text-muted-foreground">Tokens kept</span>
+						<span className="text-xl font-semibold">{fmt(repo.tokensKept)}</span>
 					</div>
-					<div className="modal-stat">
-						<span className="modal-label">Tokens dropped</span>
-						<span className="modal-value">{fmt(repo.tokensDropped)}</span>
+					<div className="rounded-md border border-border/50 bg-bg-elevated/40 p-3">
+						<span className="block text-xs text-muted-foreground">Tokens dropped</span>
+						<span className="text-xl font-semibold">{fmt(repo.tokensDropped)}</span>
 					</div>
-					<div className="modal-stat">
-						<span className="modal-label">Dedup rate</span>
-						<span className="modal-value">—</span>
+					<div className="rounded-md border border-border/50 bg-bg-elevated/40 p-3">
+						<span className="block text-xs text-muted-foreground">Dedup rate</span>
+						<span className="text-xl font-semibold">—</span>
 					</div>
 				</div>
-				<h3>Model</h3>
-				<dl className="modal-dl">
-					<dt>Provider</dt>
-					<dd>{repo.providerName ?? "—"}</dd>
-					<dt>Model</dt>
-					<dd>{repo.modelName ?? "—"}</dd>
-					<dt>Input rate</dt>
-					<dd>{repo.inputRate !== null ? `${repo.inputRate} tok/s` : "—"}</dd>
-					<dt>Output rate</dt>
-					<dd>{repo.outputRate !== null ? `${repo.outputRate} tok/s` : "—"}</dd>
-					<dt>Context window</dt>
-					<dd>{repo.contextWindow !== null ? fmt(repo.contextWindow) : "—"}</dd>
-					<dt>Max tokens</dt>
-					<dd>{repo.maxTokens !== null ? fmt(repo.maxTokens) : "—"}</dd>
-					<dt>Reasoning</dt>
-					<dd>
+				<h3 className="mb-2 font-heading text-sm font-semibold">Model</h3>
+				<dl className="mb-4 grid grid-cols-1 gap-1 text-sm sm:grid-cols-2">
+					<dt className="text-muted-foreground">Provider</dt>
+					<dd className="text-right">{repo.providerName ?? "—"}</dd>
+					<dt className="text-muted-foreground">Model</dt>
+					<dd className="text-right">{repo.modelName ?? "—"}</dd>
+					<dt className="text-muted-foreground">Input rate</dt>
+					<dd className="text-right">{repo.inputRate !== null ? `${repo.inputRate} tok/s` : "—"}</dd>
+					<dt className="text-muted-foreground">Output rate</dt>
+					<dd className="text-right">{repo.outputRate !== null ? `${repo.outputRate} tok/s` : "—"}</dd>
+					<dt className="text-muted-foreground">Context window</dt>
+					<dd className="text-right">{repo.contextWindow !== null ? fmt(repo.contextWindow) : "—"}</dd>
+					<dt className="text-muted-foreground">Max tokens</dt>
+					<dd className="text-right">{repo.maxTokens !== null ? fmt(repo.maxTokens) : "—"}</dd>
+					<dt className="text-muted-foreground">Reasoning</dt>
+					<dd className="text-right">
 						{repo.reasoning === null ? "—" : repo.reasoning ? "on" : "off"}
 					</dd>
 				</dl>
-				<h3>Activity</h3>
-				<dl className="modal-dl">
-					<dt>Last compacted</dt>
-					<dd>{formatTs(repo.lastCompactedAt)}</dd>
-					<dt>Last seen</dt>
-					<dd>{formatTs(repo.lastSeen)}</dd>
-					<dt>Compressed-Original</dt>
-					<dd>{fmtBytesTop(repo.compressedOriginalBytes)}</dd>
+				<h3 className="mb-2 font-heading text-sm font-semibold">Activity</h3>
+				<dl className="grid grid-cols-1 gap-1 text-sm sm:grid-cols-2">
+					<dt className="text-muted-foreground">Last compacted</dt>
+					<dd className="text-right">{formatTs(repo.lastCompactedAt)}</dd>
+					<dt className="text-muted-foreground">Last seen</dt>
+					<dd className="text-right">{formatTs(repo.lastSeen)}</dd>
+					<dt className="text-muted-foreground">Compressed-Original</dt>
+					<dd className="text-right">{fmtBytesTop(repo.compressedOriginalBytes)}</dd>
 				</dl>
 			</div>
 		</div>