pi-mega-compact 0.13.4 → 0.13.6

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

@@ -7,6 +7,7 @@
  */
 
 import type React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 export interface CacheHitsCardProps {
 	/** Cache hits in the current session. */
@@ -31,9 +32,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>
 	);
 }
@@ -42,32 +43,36 @@ export function CacheHitsCard(
 	props: CacheHitsCardProps,
 ): React.ReactElement {
 	return (
-		<div className="card cache-hits-card">
-			<h3>💾 Cache Hits &amp; Compactions</h3>
-			<StatRow
-				label="Cache Hits (session)"
-				value={props.cacheHitsSession.toLocaleString()}
-			/>
-			<StatRow
-				label="Cache Hits (total)"
-				value={props.cacheHitsTotal.toLocaleString()}
-			/>
-			<StatRow
-				label="Tokens Saved (session)"
-				value={props.tokensSavedSession.toLocaleString()}
-			/>
-			<StatRow
-				label="Tokens Saved (total)"
-				value={props.tokensSavedTotal.toLocaleString()}
-			/>
-			<StatRow
-				label="Compactions (session)"
-				value={props.compactionsSession.toLocaleString()}
-			/>
-			<StatRow
-				label="Compactions (total)"
-				value={props.compactionsTotal.toLocaleString()}
-			/>
-		</div>
+		<Card className="electric-hover">
+			<CardHeader>
+				<CardTitle>💾 Cache Hits &amp; Compactions</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<StatRow
+					label="Cache Hits (session)"
+					value={props.cacheHitsSession.toLocaleString()}
+				/>
+				<StatRow
+					label="Cache Hits (total)"
+					value={props.cacheHitsTotal.toLocaleString()}
+				/>
+				<StatRow
+					label="Tokens Saved (session)"
+					value={props.tokensSavedSession.toLocaleString()}
+				/>
+				<StatRow
+					label="Tokens Saved (total)"
+					value={props.tokensSavedTotal.toLocaleString()}
+				/>
+				<StatRow
+					label="Compactions (session)"
+					value={props.compactionsSession.toLocaleString()}
+				/>
+				<StatRow
+					label="Compactions (total)"
+					value={props.compactionsTotal.toLocaleString()}
+				/>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -6,6 +6,7 @@
  */
 
 import type React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 export interface ModelCostCardProps {
 	/** Model name. */
@@ -32,11 +33,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">{value}</span>
+			<span className="font-semibold">{value}</span>
 		</div>
 	);
 }
@@ -58,30 +59,34 @@ export function CacheStatusPerModel(
 	const windowsStr = `${windows} context-windows extended`;
 
 	return (
-		<div className="card model-cost-card">
-			<h3>💰 Model &amp; Cost Savings</h3>
-			<div className="ov-cost-usd">{usdStr}</div>
-			<div className="ov-cost-sub">{windowsStr}</div>
-			<StatRow
-				label="Model"
-				value={props.name}
-				title="The model pi is currently using — its pricing drives the cost figure."
-			/>
-			<StatRow
-				label="Provider"
-				value={props.provider}
-				title="The provider serving the model."
-			/>
-			<StatRow
-				label="Input Rate"
-				value={`$${props.inputRate.toFixed(6)}`}
-				title="USD per input token, from the model's pricing."
-			/>
-			<StatRow
-				label="Output Rate"
-				value={`$${props.outputRate.toFixed(6)}`}
-				title="USD per output token, from the model's pricing."
-			/>
-		</div>
+		<Card className="electric-hover">
+			<CardHeader>
+				<CardTitle>💰 Model &amp; Cost Savings</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<div className="text-neon text-xl font-semibold">{usdStr}</div>
+				<div className="mb-2 text-xs text-muted-foreground">{windowsStr}</div>
+				<StatRow
+					label="Model"
+					value={props.name}
+					title="The model pi is currently using — its pricing drives the cost figure."
+				/>
+				<StatRow
+					label="Provider"
+					value={props.provider}
+					title="The provider serving the model."
+				/>
+				<StatRow
+					label="Input Rate"
+					value={`$${props.inputRate.toFixed(6)}`}
+					title="USD per input token, from the model's pricing."
+				/>
+				<StatRow
+					label="Output Rate"
+					value={`$${props.outputRate.toFixed(6)}`}
+					title="USD per output token, from the model's pricing."
+				/>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -6,6 +6,7 @@
  */
 
 import type React from "react";
+import { Toggle } from "../components/ui/toggle";
 
 export type EventCategory =
 	| "all"
@@ -36,17 +37,15 @@ export function EventCategoryFilter({
 	onFilter,
 }: EventCategoryFilterProps): React.ReactElement {
 	return (
-		<div className="event-category-filter" role="toolbar" aria-label="Event category filter">
+		<div className="flex flex-wrap gap-2" role="toolbar" aria-label="Event category filter">
 			{CATEGORIES.map((cat) => (
-				<button
+				<Toggle
 					key={cat}
-					type="button"
-					className={`category-chip${active === cat ? " active" : ""}`}
+					pressed={active === cat}
 					onClick={() => onFilter(cat)}
-					aria-pressed={active === cat}
 				>
 					{cat}
-				</button>
+				</Toggle>
 			))}
 		</div>
 	);

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

@@ -9,6 +9,7 @@
 import type React from "react";
 import { useState, useMemo } from "react";
 import type { SseEvent } from "@contracts";
+import { Toggle } from "../components/ui/toggle";
 
 export interface EventStreamProps {
 	events: SseEvent[];
@@ -90,6 +91,8 @@ function summarize(ev: SseEvent): string {
 		case "game_mode_changed":
 		case "game_render":
 			return `stage=${ev.type}`;
+		default:
+			return `event=${ev.type}`;
 	}
 }
 
@@ -114,37 +117,38 @@ export function EventStream({ events }: EventStreamProps): React.ReactElement {
 	}, [events, filter]);
 
 	return (
-		<div className="event-stream">
-			<div className="event-filters" role="toolbar">
+		<div className="flex flex-col gap-3">
+			<div className="flex flex-wrap items-center gap-2" role="toolbar">
 				{FILTER_TYPES.map((t) => (
-					<button
+					<Toggle
 						key={t}
-						type="button"
-						className={`filter-chip ${filter === t ? "active" : ""}`}
+						pressed={filter === t}
 						onClick={() => setFilter(t)}
 					>
 						{t === "all" ? "all" : t.replace(/_/g, " ")}
-					</button>
+					</Toggle>
 				))}
-				<span className="event-count">{events.length} buffered</span>
+				<span className="text-xs text-muted-foreground">{events.length} buffered</span>
 			</div>
-			<ul className="event-list">
+			<ul className="flex flex-col gap-1 font-mono text-xs">
 				{filtered.length === 0 && (
-					<li className="event-empty">No events yet.</li>
+					<li className="text-muted-foreground">No events yet.</li>
 				)}
 				{filtered.map((ev, idx) => {
 					const cls = TYPE_COLORS[ev.type] ?? "ev-default";
 					return (
 						<li
 							key={`${ev.ts}-${idx}`}
-							className={`event-row ${cls}`}
+							className={`rounded-md px-2 py-1.5 transition-colors hover:bg-bg-elevated/40 ${cls}`}
 							onClick={() => setExpanded(expanded === idx ? null : idx)}
 						>
-							<span className="ev-time">{formatTs(ev.ts)}</span>
-							<span className="ev-type">{ev.type}</span>
+							<span className="ev-time">{formatTs(ev.ts)}</span>{" "}
+							<span className="ev-type">{ev.type}</span>{" "}
 							<span className="ev-summary">{summarize(ev)}</span>
 							{expanded === idx && (
-								<pre className="ev-detail">{JSON.stringify(ev, null, 2)}</pre>
+								<pre className="mt-2 overflow-x-auto rounded-md bg-bg-elevated/60 p-2 text-xs">
+									{JSON.stringify(ev, null, 2)}
+								</pre>
 							)}
 						</li>
 					);

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

@@ -0,0 +1,173 @@
+/**
+ * dashboard-client/src/components/HydeDetailPanel.tsx — per-turn HyDE + recall
+ * quality detail (H3.1).
+ *
+ * Fetches /api/rag-metrics once and indexes telemetry rows by the composite
+ * `conversationId:turnIndex` key (the dashboard TurnRow has no DB id, so the
+ * pair is the stable identifier). Renders one of three HyDE states:
+ *   - HyDE ran: hypothetical doc (collapsible), raw/hyde/fused hit counts,
+ *     lift multiplier, generation latency.
+ *   - HyDE skipped: reason (disabled / no-llm / generation-failed).
+ *   - No telemetry: nothing (the parent only renders us when flagged).
+ * Plus a CRAG-style mini score line when recall metrics exist.
+ *
+ * PREVENT-PI-004: relative-path fetch to the same-origin dashboard server.
+ */
+
+import type React from "react";
+import { useMemo, useState } from "react";
+import { useApi } from "../hooks/useApi";
+import { fetchRagMetrics } from "../api/client";
+import type { RagMetricsResponse } from "@contracts";
+import { Card } from "./ui/card";
+import { Badge } from "./ui/badge";
+
+/** Per-turn telemetry row shape derived from the rag-metrics contract. */
+type TelemetryRow = RagMetricsResponse["recent"][number];
+
+export interface HydeDetailPanelProps {
+	conversationId: string;
+	turnIndex: number;
+}
+
+/** Composite key matching a telemetry row to a rendered turn. */
+function rowKey(conversationId: string, turnIndex: number): string {
+	return `${conversationId}:${turnIndex}`;
+}
+
+/** First N lines of the hypothetical doc (or full when expanded). */
+function truncateDoc(doc: string, maxLines: number): string {
+	const lines = doc.split("\n");
+	return lines.length > maxLines ? lines.slice(0, maxLines).join("\n") : doc;
+}
+
+/** CRAG-style mini score line when recall metrics were captured. */
+function ScoreLine({ row }: { row: TelemetryRow }): React.ReactElement {
+	const hasScore = row.recallScore > 0 || row.recallPass === 1;
+	if (!hasScore) {
+		return (
+			<div className="mt-2 text-xs text-muted-foreground">
+				No recall-quality metrics for this turn.
+			</div>
+		);
+	}
+	return (
+		<div className="mt-2 rounded-md border border-border/60 bg-bg-elevated/40 p-2">
+			<div className="flex items-center gap-2 text-xs">
+				<span className="font-medium text-muted-foreground">Recall quality</span>
+				<Badge variant={row.recallPass === 1 ? "success" : "warning"}>
+					{row.recallPass === 1 ? "pass" : "fail"}
+				</Badge>
+				<span>
+					score <strong className="text-foreground">{row.recallScore.toFixed(2)}</strong>
+				</span>
+			</div>
+			<div className="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-muted-foreground">
+				<span>relevance {row.recallRelevance.toFixed(2)}</span>
+				<span>coverage {row.recallCoverage.toFixed(2)}</span>
+				<span>diversity {row.recallDiversity.toFixed(2)}</span>
+				<span>specificity {row.recallSpecificity.toFixed(2)}</span>
+			</div>
+		</div>
+	);
+}
+
+export const HydeDetailPanel: React.FC<HydeDetailPanelProps> = ({
+	conversationId,
+	turnIndex,
+}) => {
+	const { data: metrics } = useApi<RagMetricsResponse>(
+		useMemo(() => () => fetchRagMetrics(), []),
+		{ pollInterval: 30_000 },
+	);
+	const [showFullDoc, setShowFullDoc] = useState(false);
+
+	// Rebuild the index whenever metrics arrive; rare enough that a full
+	// rebuild on each render is cheaper than memoizing with a mutable dep.
+	const row = useMemo(
+		() =>
+			metrics?.recent.find(
+				(t) => rowKey(t.conversationId, t.turnIndex) === rowKey(conversationId, turnIndex),
+			) ?? null,
+		[metrics, conversationId, turnIndex],
+	);
+
+	if (!metrics) {
+		return <div className="text-xs text-muted-foreground">Loading HyDE stats…</div>;
+	}
+	if (!row) {
+		return (
+			<div className="text-xs text-muted-foreground">
+				No HyDE/recall telemetry recorded for this turn.
+			</div>
+		);
+	}
+
+	const doc = row.hydeDoc ?? "";
+	const docLines = doc.split("\n").length;
+	const showDoc = docLines > 3;
+	const visibleDoc = showFullDoc || !showDoc ? doc : truncateDoc(doc, 3);
+
+	return (
+		<Card className="border border-border/60 bg-bg-elevated/20 p-3">
+			{row.hydeRan === 1 ? (
+				<>
+					<div className="mb-2 flex flex-wrap items-center gap-2 text-xs">
+						<Badge variant="accent">HyDE ran</Badge>
+						<span className="text-muted-foreground">
+							gen <strong className="text-foreground">{row.hydeGenerationMs}ms</strong>
+						</span>
+						<span className="text-muted-foreground">
+							raw <strong className="text-foreground">{row.hydeRawCount}</strong>
+							<Arrow />
+							hyde <strong className="text-foreground">{row.hydeHydeCount}</strong>
+							<Arrow />
+							fused <strong className="text-foreground">{row.hydeFusedCount}</strong>
+						</span>
+						<span className="text-muted-foreground">
+							lift{" "}
+							<strong className="text-neon">{row.hydeLift.toFixed(2)}×</strong>
+						</span>
+					</div>
+					{doc && (
+						<pre className="max-h-40 overflow-auto whitespace-pre-wrap rounded-md border border-border/50 bg-bg-elevated/40 p-2 font-mono text-xs text-muted-foreground">
+							{visibleDoc}
+						</pre>
+					)}
+					{showDoc && (
+						<button
+							type="button"
+							className="mt-1 text-xs text-accent underline"
+							onClick={() => setShowFullDoc((v) => !v)}
+						>
+							{showFullDoc ? "Show less" : "Show full hypothetical doc"}
+						</button>
+					)}
+				</>
+			) : (
+				<div className="flex items-center gap-2 text-xs">
+					<Badge variant="warning">HyDE skipped</Badge>
+					<span className="text-muted-foreground">{skipReason(row)}</span>
+				</div>
+			)}
+			<ScoreLine row={row} />
+		</Card>
+	);
+};
+
+function Arrow(): React.ReactElement {
+	return <span className="text-muted-foreground/60"> → </span>;
+}
+
+function skipReason(row: TelemetryRow): string {
+	switch (row.hydeReason) {
+		case "no-llm":
+			return "No LLM embedder available (requires Ollama/HTTP embedder).";
+		case "generation-failed":
+			return "Hypothetical doc generation failed this turn.";
+		case "disabled":
+			return "HyDE is disabled (MEGACOMPACT_HYDE_DISABLED).";
+		default:
+			return "HyDE was not invoked for this turn.";
+	}
+}

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

@@ -6,6 +6,7 @@
  */
 
 import type React from "react";
+import { Card, CardContent } from "../components/ui/card";
 
 const LEGEND_ITEMS: ReadonlyArray<React.ReactNode> = [
 	<li key="1">
@@ -36,14 +37,20 @@ const LEGEND_ITEMS: ReadonlyArray<React.ReactNode> = [
 
 export function LegendCard(): React.ReactElement {
 	return (
-		<div className="card legend-card">
-			<details>
-				<summary>What these numbers mean</summary>
-				<ol className="legend-list">{LEGEND_ITEMS}</ol>
-				<p className="legend-note">
-					Hover any label above for a quick explanation.
-				</p>
-			</details>
-		</div>
+		<Card>
+			<CardContent>
+				<details>
+					<summary className="cursor-pointer text-sm font-semibold">
+						What these numbers mean
+					</summary>
+					<ol className="mt-2 list-decimal space-y-1 pl-5 text-sm">
+						{LEGEND_ITEMS}
+					</ol>
+					<p className="mt-2 text-xs text-muted-foreground">
+						Hover any label above for a quick explanation.
+					</p>
+				</details>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -8,6 +8,12 @@
 
 import type React from "react";
 import type { PerfResponse } from "@contracts";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "../components/ui/card";
 
 /** Format milliseconds (em-dash for null/undefined). */
 function fmtMs(v: number | null | undefined): string {
@@ -31,20 +37,22 @@ interface PerfCardsProps {
 /** A single stat row inside a perf card. */
 function Stat({ label, value }: { label: string; value: string }): React.ReactElement {
 	return (
-		<div className="perf-metric">
-			<span className="perf-label">{label}</span>
-			<span className="perf-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>
 	);
 }
 
 /** Card wrapper with a title. */
-function Card({ title, children }: { title: string; children: React.ReactNode }): React.ReactElement {
+function PerfCard({ title, children }: { title: string; children: React.ReactNode }): React.ReactElement {
 	return (
-		<div className="perf-card">
-			<h3 className="perf-card-title">{title}</h3>
-			<div className="perf-card-body">{children}</div>
-		</div>
+		<Card className="electric-hover">
+			<CardHeader>
+				<CardTitle>{title}</CardTitle>
+			</CardHeader>
+			<CardContent>{children}</CardContent>
+		</Card>
 	);
 }
 
@@ -52,40 +60,40 @@ export function PerfCards({ perf }: PerfCardsProps): React.ReactElement {
 	const cpuTxt = `${fmtNum(perf.cpu_user_ms.latest, 1)} / ${fmtNum(perf.cpu_sys_ms.latest, 1)} ms`;
 
 	return (
-		<div className="perf-cards-grid">
-			<Card title="Model latency">
+		<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+			<PerfCard title="Model latency">
 				<Stat label="Turn p50" value={fmtMs(perf.turn_latency_ms.p50)} />
 				<Stat label="Turn p95" value={fmtMs(perf.turn_latency_ms.p95)} />
 				<Stat label="Provider p50" value={fmtMs(perf.provider_latency_ms.p50)} />
 				<Stat label="Provider p95" value={fmtMs(perf.provider_latency_ms.p95)} />
-			</Card>
+			</PerfCard>
 
-			<Card title="Throughput">
+			<PerfCard title="Throughput">
 				<Stat label="TPS (avg)" value={fmtNum(perf.tps.avg, 1)} />
 				<Stat
 					label="Cache hit %"
 					value={`${fmtNum(perf.cache_hit_pct.avg, 1)}%`}
 				/>
-			</Card>
+			</PerfCard>
 
-			<Card title="Process">
+			<PerfCard title="Process">
 				<Stat label="RSS" value={`${fmtNum(perf.rss_mb.latest, 1)} MB`} />
 				<Stat label="Heap" value={`${fmtNum(perf.heap_mb.latest, 1)} MB`} />
 				<Stat label="CPU user / sys" value={cpuTxt} />
-			</Card>
+			</PerfCard>
 
-			<Card title="Snapshot cost">
+			<PerfCard title="Snapshot cost">
 				<Stat label="DB recompute p50" value={fmtMs(perf.db_recompute_ms.p50)} />
 				<Stat label="DB recompute p95" value={fmtMs(perf.db_recompute_ms.p95)} />
 				<Stat label="Disk write p50" value={fmtMs(perf.disk_write_ms.p50)} />
-			</Card>
+			</PerfCard>
 
-			<Card title="TUI lag proxy">
+			<PerfCard title="TUI lag proxy">
 				<Stat label="Live-trim fires" value={fmtDiag(perf.diag?.liveTrimFires)} />
 				<Stat label="Cache replays" value={fmtDiag(perf.diag?.liveTrimReplays)} />
 				<Stat label="Fast-gate skips" value={fmtDiag(perf.diag?.ctxFastGate)} />
-				<span className="perf-card-note">skip vs recompute vs replay cadence</span>
-			</Card>
+				<span className="text-xs text-muted-foreground">skip vs recompute vs replay cadence</span>
+			</PerfCard>
 		</div>
 	);
 }

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

@@ -8,6 +8,7 @@
 
 import type React from "react";
 import type { PerfResponse } from "@contracts";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 export interface PerfChartProps {
 	perf: PerfResponse;
@@ -50,13 +51,14 @@ export function PerfChart({ perf }: PerfChartProps): React.ReactElement {
 	const tpsRef = Math.max(perf.tps.avg, 1);
 
 	return (
-		<div className="perf-chart">
-			<div className="perf-header">
-				<h3>Performance</h3>
-				<span className="perf-window">
+		<Card>
+			<CardHeader className="flex-row items-center justify-between space-y-0">
+				<CardTitle>Performance</CardTitle>
+				<span className="text-xs text-muted-foreground">
 					{perf.windowMinutes}min window · {perf.sampleCount} samples
 				</span>
-			</div>
+			</CardHeader>
+			<CardContent>
 			<div className="perf-grid">
 				<div className="perf-metric">
 					<span className="perf-label">Turn latency p50 / p95</span>
@@ -155,6 +157,7 @@ export function PerfChart({ perf }: PerfChartProps): React.ReactElement {
 					</span>
 				</div>
 			)}
-		</div>
+			</CardContent>
+		</Card>
 	);
 }