pi-mega-compact 0.8.12 → 0.8.14

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

@@ -1,49 +1,58 @@
 /**
  * dashboard-client/src/components/DataSafetyCard.tsx — Data Safety / Shield.
  *
- * Shows regions retained, compressed-original size, storage dedup %,
- * and permanently deleted count. Read-only (no mutations).
+ * 4 fields: Regions Retained, Compressed-Original bytes, Dedup Duplicates,
+ * Permanently Deleted (always 0B, shown in green).
+ * Plus the safe-note text (verbatim from html.ts).
  */
+
 import type React from "react";
+import { fmtBytes } from "../utils/format";
 
 export interface DataSafetyCardProps {
 	regionsRetained: number;
-	compressedOriginalKiB: number;
-	storageDedupPct: number;
-	permanentlyDeleted: number;
+	/** Original byte size of compressed data (bytes). */
+	compressedOriginalBytes: number;
+	/** Number of duplicate chunks collapsed. */
+	duplicatesCollapsed: number;
+	/** Bytes permanently deleted (always 0). */
+	bytesPermanentlyDeleted: number;
 }
 
-export function DataSafetyCard({
-	regionsRetained,
-	compressedOriginalKiB,
-	storageDedupPct,
-	permanentlyDeleted,
-}: DataSafetyCardProps): React.ReactElement {
+export function DataSafetyCard(
+	props: DataSafetyCardProps,
+): React.ReactElement {
 	return (
-		<div className="data-safety-card">
-			<h4>Data Safety</h4>
-			<div className="safety-grid">
-				<div className="safety-row">
-					<span className="label">Regions Retained</span>
-					<span className="value">{regionsRetained}</span>
-				</div>
-				<div className="safety-row">
-					<span className="label">Compressed-Original</span>
-					<span className="value">{compressedOriginalKiB.toFixed(1)} KiB</span>
-				</div>
-				<div className="safety-row">
-					<span className="label">Storage Dedup</span>
-					<span className="value">{storageDedupPct}%</span>
-				</div>
-				<div className="safety-row">
-					<span className="label">Permanently Deleted</span>
-					<span className="value">{permanentlyDeleted}</span>
-				</div>
+		<div className="card data-safety-card">
+			<h3>🛡 Data Safety</h3>
+			<div className="ov-stat-row">
+				<span className="ov-stat-label">Regions Retained</span>
+				<span className="ov-stat-value">
+					{props.regionsRetained.toLocaleString()}
+				</span>
+			</div>
+			<div className="ov-stat-row">
+				<span className="ov-stat-label">Compressed-Original</span>
+				<span className="ov-stat-value">
+					{fmtBytes(props.compressedOriginalBytes)}
+				</span>
+			</div>
+			<div className="ov-stat-row">
+				<span className="ov-stat-label">Dedup Duplicates</span>
+				<span className="ov-stat-value">
+					{props.duplicatesCollapsed.toLocaleString()}
+				</span>
 			</div>
-			<div className="safety-note">
-				Every compacted region is kept verbatim (compressed). "Drop" = removed
-				from the live window only. We never delete your data.
+			<div className="ov-stat-row">
+				<span className="ov-stat-label">Permanently Deleted</span>
+				<span className="ov-stat-value ov-value-ok">
+					{fmtBytes(props.bytesPermanentlyDeleted)}
+				</span>
 			</div>
+			<p className="safe-note">
+				Every compacted region is kept verbatim (compressed). &quot;Drop&quot; =
+				removed from the live window only. We never delete your data.
+			</p>
 		</div>
 	);
 }

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

@@ -1,16 +1,53 @@
+/**
+ * dashboard-client/src/components/EventCategoryFilter.tsx
+ *
+ * Category-level filter chips for the Events tab. Filters SSE events by
+ * category: all / compact / recall / config / crew / game.
+ */
+
 import type React from "react";
+
+export type EventCategory =
+	| "all"
+	| "compact"
+	| "recall"
+	| "config"
+	| "crew"
+	| "game";
+
+const CATEGORIES: readonly EventCategory[] = [
+	"all",
+	"compact",
+	"recall",
+	"config",
+	"crew",
+	"game",
+] as const;
+
+export interface EventCategoryFilterProps {
+	/** Currently active category. */
+	active: EventCategory;
+	/** Called when the user selects a category. */
+	onFilter: (category: EventCategory) => void;
+}
+
 export function EventCategoryFilter({
+	active,
 	onFilter,
-}: {
-	onFilter: (f: string) => void;
-}): React.ReactElement {
+}: EventCategoryFilterProps): React.ReactElement {
 	return (
-		<div className="event-filter">
-			<button onClick={() => onFilter("all")}>All</button>
-			<button onClick={() => onFilter("agent_start")}>Agent Start</button>
-			<button onClick={() => onFilter("agent_end")}>Agent End</button>
-			<button onClick={() => onFilter("turn_start")}>Turn Start</button>
-			<button onClick={() => onFilter("turn_end")}>Turn End</button>
+		<div className="event-category-filter" role="toolbar" aria-label="Event category filter">
+			{CATEGORIES.map((cat) => (
+				<button
+					key={cat}
+					type="button"
+					className={`category-chip${active === cat ? " active" : ""}`}
+					onClick={() => onFilter(cat)}
+					aria-pressed={active === cat}
+				>
+					{cat}
+				</button>
+			))}
 		</div>
 	);
 }

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

@@ -0,0 +1,49 @@
+/**
+ * dashboard-client/src/components/LegendCard.tsx — "What these numbers mean" legend.
+ *
+ * Collapsible <details> with the legend list (verbatim from html.ts).
+ * Full-width card (grid-column: 1 / -1).
+ */
+
+import type React from "react";
+
+const LEGEND_ITEMS: ReadonlyArray<React.ReactNode> = [
+	<li key="1">
+		<b>Original (dropped)</b> — everything compacted away (including
+		duplicates caught by dedup). The &quot;in.&quot;
+	</li>,
+	<li key="2">
+		<b>Kept (summaries)</b> — compact summaries still held as &quot;memory&quot;
+		(the &quot;out&quot;).
+	</li>,
+	<li key="3">
+		<b>Freed</b> = dropped − kept — tokens saved so far (higher = better).
+	</li>,
+	<li key="4">
+		<b>Compression %</b> — Freed ÷ Dropped — the headline efficiency
+		number. Higher = more space reclaimed.
+	</li>,
+	<li key="5">
+		<b>Storage dedup %</b> — how often new content matched something
+		already saved, so no duplicate copy was written.
+	</li>,
+	<li key="6">
+		<b>Data safety</b> — every compacted region is kept verbatim
+		(compressed). Nothing is permanently deleted; you can restore any of
+		it.
+	</li>,
+];
+
+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>
+	);
+}

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

@@ -1,8 +1,8 @@
 /**
  * dashboard-client/src/components/ModelBadge.tsx — model + provider + rates.
  *
- * Shows the active model name, human-readable provider, and input/output
- * token rates. Used in the Metrics tab header.
+ * Shows the active model name, provider, and input/output rates.
+ * Tooltips copied verbatim from html.ts. Used in the Metrics tab header.
  */
 
 import type React from "react";
@@ -14,12 +14,29 @@ export interface ModelBadgeProps {
 	providerName: string;
 	/** Machine-readable provider identifier. */
 	provider: string;
-	/** Model input processing rate (tokens per second). */
+	/** USD per input token (from model pricing). */
 	inputRate: number;
-	/** Model output processing rate (tokens per second). */
+	/** USD per output token (from model pricing). */
 	outputRate: number;
 }
 
+function Field({
+	label,
+	value,
+	title,
+}: {
+	label: string;
+	value: string;
+	title?: string;
+}): React.ReactElement {
+	return (
+		<div className="model-field" title={title}>
+			<span className="model-field-label">{label}</span>
+			<span className="model-field-value">{value}</span>
+		</div>
+	);
+}
+
 export function ModelBadge({
 	name,
 	providerName,
@@ -27,15 +44,29 @@ export function ModelBadge({
 	inputRate,
 	outputRate,
 }: ModelBadgeProps): React.ReactElement {
+	const providerDisplay = providerName || provider || "—";
 	return (
 		<div className="model-badge">
-			<span className="model-name">{name}</span>
-			<span className="model-provider">{providerName}</span>
-			<span className="model-provider-id">{provider}</span>
-			<div className="model-rates">
-				<span className="rate">in {inputRate} tok/s</span>
-				<span className="rate">out {outputRate} tok/s</span>
-			</div>
+			<Field
+				label="Model"
+				value={name}
+				title="The model pi is currently using — its pricing drives the cost figure."
+			/>
+			<Field
+				label="Provider"
+				value={providerDisplay}
+				title="The provider serving the model."
+			/>
+			<Field
+				label="Input Rate"
+				value={`$${inputRate.toFixed(6)}`}
+				title="USD per input token, from the model's pricing."
+			/>
+			<Field
+				label="Output Rate"
+				value={`$${outputRate.toFixed(6)}`}
+				title="USD per output token, from the model's pricing."
+			/>
 		</div>
 	);
 }

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

@@ -0,0 +1,91 @@
+/**
+ * dashboard-client/src/components/PerfCards.tsx — 5 perf metric cards.
+ *
+ * Mirrors the old html.ts perf grid: model latency, throughput, process,
+ * snapshot cost, and TUI lag proxy. Uses the existing perf-metric CSS
+ * classes from repos-metrics.css plus metrics-extra.css for card headers.
+ */
+
+import type React from "react";
+import type { PerfResponse } from "@contracts";
+
+/** Format milliseconds (em-dash for null/undefined). */
+function fmtMs(v: number | null | undefined): string {
+	return v == null ? "\u2014" : v >= 100 ? `${Math.round(v)}ms` : `${v.toFixed(1)}ms`;
+}
+
+/** Format a number with fixed decimals (em-dash for null/non-number). */
+function fmtNum(v: number | null | undefined, dec: number): string {
+	return v == null || typeof v !== "number" ? "\u2014" : v.toFixed(dec);
+}
+
+/** Format a diag counter (em-dash for null). */
+function fmtDiag(v: number | null | undefined): string {
+	return v == null ? "\u2014" : String(v);
+}
+
+interface PerfCardsProps {
+	perf: PerfResponse;
+}
+
+/** 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>
+	);
+}
+
+/** Card wrapper with a title. */
+function Card({ 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>
+	);
+}
+
+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">
+				<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>
+
+			<Card 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>
+
+			<Card 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>
+
+			<Card 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>
+
+			<Card 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>
+		</div>
+	);
+}

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

@@ -0,0 +1,102 @@
+/**
+ * dashboard-client/src/components/RepoAllSessionsCard.tsx — Repo (all sessions) card.
+ *
+ * 7 fields: Checkpoints, Original, Kept, Freed, Sessions, Collapsed, Storage Dedup.
+ * Plus a compression meter bar (green ≥90%, yellow ≥60%, red <60%).
+ *
+ * NOTE: storageDedupRate, compressionPct, dedupPct are 0–1 fractions
+ * at runtime (despite contract saying 0–100).
+ */
+
+import type React from "react";
+import { fmtPctFromFraction } from "../utils/format";
+
+export interface RepoAllSessionsCardProps {
+	checkpointCount: number;
+	/** Original tokens dropped (repo-level). */
+	tokensIn: number;
+	/** Kept summary tokens (repo-level). */
+	tokensOut: number;
+	/** Tokens freed (repo-level). */
+	tokensFreed: number;
+	/** Number of sessions. */
+	sessionCount: number;
+	/** Duplicate chunks collapsed (repo-level). */
+	dedupCollapsed: number;
+	/** Storage dedup rate — 0–1 fraction. */
+	storageDedupRate: number;
+	/** Repo compression ratio — 0–1 fraction. */
+	compressionPct: number;
+	/** Repo dedup contribution — 0–1 fraction. */
+	dedupPct: number;
+}
+
+function compressClass(sp: number): string {
+	if (sp >= 0.9) return "meter-green";
+	if (sp >= 0.6) return "meter-yellow";
+	return "meter-red";
+}
+
+function StatRow({
+	label,
+	value,
+}: {
+	label: string;
+	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>
+	);
+}
+
+export function RepoAllSessionsCard(
+	props: RepoAllSessionsCardProps,
+): React.ReactElement {
+	const sp = props.compressionPct;
+	const barCls = compressClass(sp);
+	const barWidth = Math.max(sp * 100, 0.5);
+	const compressSub = `${fmtPctFromFraction(sp)} tokens saved · dedup: ${fmtPctFromFraction(props.dedupPct)}`;
+
+	return (
+		<div className="card repo-sessions-card">
+			<h3>Repo (all sessions)</h3>
+			<StatRow
+				label="Checkpoints"
+				value={props.checkpointCount.toLocaleString()}
+			/>
+			<StatRow
+				label="Original"
+				value={props.tokensIn.toLocaleString()}
+			/>
+			<StatRow
+				label="Kept"
+				value={props.tokensOut.toLocaleString()}
+			/>
+			<StatRow
+				label="Freed"
+				value={props.tokensFreed.toLocaleString()}
+			/>
+			<StatRow
+				label="Sessions"
+				value={props.sessionCount.toLocaleString()}
+			/>
+			<StatRow label="Collapsed" value={props.dedupCollapsed} />
+			<StatRow
+				label="Storage Dedup"
+				value={fmtPctFromFraction(props.storageDedupRate)}
+			/>
+			<div className="ov-compression-meter">
+				<div className="meter-track">
+					<div
+						className={`meter-fill ${barCls}`}
+						style={{ width: `${barWidth}%` }}
+					/>
+				</div>
+				<span className="meter-sub">{compressSub}</span>
+			</div>
+		</div>
+	);
+}

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

@@ -20,6 +20,13 @@ function fmt(n: number): string {
 	return String(n);
 }
 
+/** Format bytes → MiB/KiB/B (matches html.ts fmtBytesTop). */
+function fmtBytesTop(b: number): string {
+	if (b >= 1_048_576) return `${(b / 1_048_576).toFixed(1)} MiB`;
+	if (b >= 1024) return `${(b / 1024).toFixed(1)} KiB`;
+	return `${b} B`;
+}
+
 function formatTs(ts: number | null): string {
 	if (ts === null || ts === undefined) return "never";
 	try {
@@ -117,8 +124,8 @@ export function RepoDetailModal({
 					<dd>{formatTs(repo.lastCompactedAt)}</dd>
 					<dt>Last seen</dt>
 					<dd>{formatTs(repo.lastSeen)}</dd>
-					<dt>Compressed bytes</dt>
-					<dd>{fmt(repo.compressedOriginalBytes)}</dd>
+					<dt>Compressed-Original</dt>
+					<dd>{fmtBytesTop(repo.compressedOriginalBytes)}</dd>
 				</dl>
 			</div>
 		</div>

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

@@ -1,9 +1,10 @@
 /**
  * dashboard-client/src/components/RepoTable.tsx — sortable, searchable repo table.
  *
- * Columns: name, model, checkpoints, tokens saved, last compacted, sessions.
+ * 6 columns: Repo, Model, Checkpoints, Tokens Saved, Retained, Last Compacted.
  * Client-side sort (click header to toggle asc/desc). Search by displayName
- * (case-insensitive substring). Default sort: lastSeen DESC.
+ * (case-insensitive substring). Default sort: Last Compacted DESC.
+ * Row click opens RepoDetailModal.
  */
 
 import type React from "react";
@@ -21,30 +22,31 @@ type SortKey =
 	| "modelName"
 	| "checkpointCount"
 	| "tokensSaved"
-	| "lastCompactedAt"
-	| "sessions";
+	| "compressedOriginalBytes"
+	| "lastCompactedAt";
 
 type SortDir = "asc" | "desc";
 
 const COLUMNS: Array<{ key: SortKey; label: string }> = [
-	{ key: "displayName", label: "Name" },
+	{ key: "displayName", label: "Repo" },
 	{ key: "modelName", label: "Model" },
 	{ key: "checkpointCount", label: "Checkpoints" },
-	{ key: "tokensSaved", label: "Saved" },
-	{ key: "lastCompactedAt", label: "Last compacted" },
-	{ key: "sessions", label: "Sessions" },
+	{ key: "tokensSaved", label: "Tokens Saved" },
+	{ key: "compressedOriginalBytes", label: "Retained" },
+	{ key: "lastCompactedAt", label: "Last Compacted" },
 ];
 
-function fmt(n: number): string {
-	if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-	if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
-	return String(n);
+/** Format bytes → MiB/KiB/B (matches html.ts fmtBytesTop). */
+function fmtBytesTop(b: number): string {
+	if (b >= 1_048_576) return `${(b / 1_048_576).toFixed(1)} MiB`;
+	if (b >= 1024) return `${(b / 1024).toFixed(1)} KiB`;
+	return `${b} B`;
 }
 
 function formatTs(ts: number | null): string {
-	if (ts === null || ts === undefined) return "never";
+	if (ts === null || ts === undefined) return "\u2014";
 	try {
-		return new Date(ts).toLocaleDateString();
+		return new Date(ts).toLocaleString();
 	} catch {
 		return String(ts);
 	}
@@ -87,7 +89,11 @@ export function RepoTable({
 		} else {
 			setSortKey(key);
 			setSortDir(
-				key === "lastCompactedAt" || key === "tokensSaved" ? "desc" : "asc",
+				key === "lastCompactedAt" ||
+				key === "tokensSaved" ||
+				key === "compressedOriginalBytes"
+					? "desc"
+					: "asc",
 			);
 		}
 	};
@@ -128,19 +134,21 @@ export function RepoTable({
 						<tr>
 							<td colSpan={COLUMNS.length} className="repo-empty">
 								{repos.length === 0
-									? "No repos yet."
+									? "No repositories registered yet."
 									: "No repos match your search."}
 							</td>
 						</tr>
 					)}
 					{filtered.map((repo) => (
 						<tr key={repo.stateDir} onClick={() => onSelect(repo)}>
-							<td className="repo-name">{repo.displayName}</td>
-							<td className="repo-model">{repo.modelName ?? "—"}</td>
-							<td>{repo.checkpointCount.toLocaleString()}</td>
-							<td>{fmt(repo.tokensSaved)}</td>
-							<td>{formatTs(repo.lastCompactedAt)}</td>
-							<td>{repo.sessions.toLocaleString()}</td>
+							<td className="repo-name" title={repo.repoRoot}>
+								{repo.displayName}
+							</td>
+							<td className="repo-model">{repo.modelName ?? "\u2014"}</td>
+							<td className="num">{repo.checkpointCount.toLocaleString()}</td>
+							<td className="num">{repo.tokensSaved.toLocaleString()}</td>
+							<td className="num">{fmtBytesTop(repo.compressedOriginalBytes)}</td>
+							<td className="num">{formatTs(repo.lastCompactedAt)}</td>
 						</tr>
 					))}
 				</tbody>