pi-mega-compact 0.8.12 → 0.8.15

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

@@ -0,0 +1,226 @@
+/**
+ * dashboard-client/src/components/SavingsByModelTable.tsx — Savings by Model.
+ *
+ * 14 columns aggregated client-side from /api/index repos by model.
+ * Replicates html.ts renderByModel logic: group by modelName, accumulate
+ * tokens/cost/sessions, collapse numeric ranges when repos disagree.
+ */
+
+import type React from "react";
+import { useMemo } from "react";
+import type { IndexesIndexRow } from "@contracts";
+
+export interface SavingsByModelTableProps {
+	repos: IndexesIndexRow[];
+}
+
+interface ModelGroup {
+	model: string;
+	provider: string;
+	checkpoints: number;
+	tokensSaved: number;
+	tokensIn: number;
+	tokensOut: number;
+	sessions: number;
+	usd: number;
+	inRates: number[];
+	outRates: number[];
+	ctxWindows: number[];
+	maxTokens: number[];
+	reasoning: boolean | null;
+	lastAt: number;
+}
+
+/** Collapse numeric samples: "—" | single | "lo–hi" (matches html.ts). */
+function collapseNum(samples: number[]): string {
+	if (!samples.length) return "\u2014";
+	const lo = Math.min(...samples);
+	const hi = Math.max(...samples);
+	return lo === hi
+		? lo.toLocaleString()
+		: `${lo.toLocaleString()}\u2013${hi.toLocaleString()}`;
+}
+
+/** Collapse rate samples: "—" | "$rate" | "$lo–$hi" (matches html.ts). */
+function collapseRate(samples: number[]): string {
+	if (!samples.length) return "\u2014";
+	const lo = Math.min(...samples);
+	const hi = Math.max(...samples);
+	const fmt = (v: number): string => `$${v.toFixed(6)}`;
+	return lo === hi ? fmt(lo) : `${fmt(lo)}\u2013${fmt(hi)}`;
+}
+
+/** Group repos by model, accumulate totals, sort by tokensSaved desc. */
+function aggregate(repos: IndexesIndexRow[]): ModelGroup[] {
+	const map: Record<string, ModelGroup> = {};
+	for (const r of repos) {
+		const key = (r.modelName && r.modelName.trim()) || "(unknown)";
+		if (!map[key]) {
+			map[key] = {
+				model: key,
+				provider: r.providerName ?? r.provider ?? "\u2014",
+				checkpoints: 0,
+				tokensSaved: 0,
+				tokensIn: 0,
+				tokensOut: 0,
+				sessions: 0,
+				usd: 0,
+				inRates: [],
+				outRates: [],
+				ctxWindows: [],
+				maxTokens: [],
+				reasoning: null,
+				lastAt: 0,
+			};
+		}
+		const g = map[key];
+		g.checkpoints += r.checkpointCount || 0;
+		g.tokensSaved += r.tokensSaved || 0;
+		g.tokensIn += r.tokensDropped || 0;
+		g.tokensOut += r.tokensKept || 0;
+		g.sessions += r.sessions || 0;
+		if (r.inputRate) {
+			g.usd += (r.tokensSaved || 0) * r.inputRate;
+			g.inRates.push(r.inputRate);
+		}
+		if (r.outputRate) g.outRates.push(r.outputRate);
+		if (r.contextWindow) g.ctxWindows.push(r.contextWindow);
+		if (r.maxTokens) g.maxTokens.push(r.maxTokens);
+		if (r.reasoning != null) g.reasoning = r.reasoning;
+		if (r.lastCompactedAt && r.lastCompactedAt > g.lastAt)
+			g.lastAt = r.lastCompactedAt;
+	}
+	return Object.values(map).sort((a, b) => b.tokensSaved - a.tokensSaved);
+}
+
+/** Tooltip text copied verbatim from html.ts title attributes. */
+const TOOLTIPS = {
+	tokensIn: "Tokens dropped from context by compaction (the input reclaimed)",
+	tokensOut:
+		"Tokens kept as compacted summaries still in context (the output retained)",
+	ctxWindow: "Model context window (max input tokens the model accepts)",
+	maxOut: "Model max output tokens per turn",
+	reas: "Reasoning-capable model",
+	sessions: "Distinct sessions with at least one checkpoint",
+	inRate: "USD per input token",
+	outRate: "USD per output token",
+} as const;
+
+export function SavingsByModelTable({
+	repos,
+}: SavingsByModelTableProps): React.ReactElement {
+	const groups = useMemo(() => aggregate(repos), [repos]);
+
+	return (
+		<div className="savings-by-model">
+			<p className="legend-note">
+				How much context &amp; cost mega-compact has reclaimed, grouped by
+				the model you were running. Compression ratio reflects
+				workload/content, not model quality.
+			</p>
+			<div className="table-scroll">
+				<table className="savings-table">
+					<thead>
+						<tr>
+							<th>Model</th>
+							<th>Provider</th>
+							<th className="num" title={TOOLTIPS.tokensIn}>
+								Tokens In
+							</th>
+							<th className="num" title={TOOLTIPS.tokensOut}>
+								Tokens Out
+							</th>
+							<th className="num">Freed</th>
+							<th className="num" title={TOOLTIPS.ctxWindow}>
+								Ctx Window
+							</th>
+							<th className="num" title={TOOLTIPS.maxOut}>
+								Max Out
+							</th>
+							<th className="num" title={TOOLTIPS.reas}>
+								Reas.
+							</th>
+							<th className="num" title={TOOLTIPS.sessions}>
+								Sessions
+							</th>
+							<th className="num">Checkpoints</th>
+							<th className="num" title={TOOLTIPS.inRate}>
+								In $/tok
+							</th>
+							<th className="num" title={TOOLTIPS.outRate}>
+								Out $/tok
+							</th>
+							<th className="num">$ Saved</th>
+							<th className="num">Last Used</th>
+						</tr>
+					</thead>
+					<tbody>
+						{groups.length === 0 && (
+							<tr>
+								<td colSpan={14} className="repo-empty">
+									No repositories registered yet.
+								</td>
+							</tr>
+						)}
+						{groups.map((g) => {
+							const freed = (g.tokensIn || 0) - (g.tokensOut || 0);
+							const usd =
+								g.usd > 0 ? `$${g.usd.toFixed(4)}` : "\u2014";
+							const when = g.lastAt
+								? new Date(g.lastAt).toLocaleString()
+								: "\u2014";
+							const reas =
+								g.reasoning == null
+									? "\u2014"
+									: g.reasoning
+										? "yes"
+										: "no";
+							return (
+								<tr key={g.model}>
+									<td className="repo-model">{g.model}</td>
+									<td>{g.provider}</td>
+									<td className="num">
+										{g.tokensIn.toLocaleString()}
+									</td>
+									<td className="num">
+										{g.tokensOut.toLocaleString()}
+									</td>
+									<td className="num">
+										{freed.toLocaleString()}
+									</td>
+									<td className="num">
+										{collapseNum(g.ctxWindows)}
+									</td>
+									<td className="num">
+										{collapseNum(g.maxTokens)}
+									</td>
+									<td className="num">{reas}</td>
+									<td className="num">
+										{g.sessions.toLocaleString()}
+									</td>
+									<td className="num">
+										{g.checkpoints.toLocaleString()}
+									</td>
+									<td className="num">
+										{collapseRate(g.inRates)}
+									</td>
+									<td className="num">
+										{collapseRate(g.outRates)}
+									</td>
+									<td className="num">{usd}</td>
+									<td className="num">{when}</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			</div>
+			<p className="legend-note">
+				Tokens In = Σ original region tokens dropped by compaction. Tokens
+				Out = Σ compacted summary tokens still retained in context. Freed =
+				Tokens In − Tokens Out (net context reclaimed). Ctx Window / Max Out
+				/ Reas. come from the latest captured model snapshot for each repo.
+			</p>
+		</div>
+	);
+}

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

@@ -1,64 +1,39 @@
 /**
- * dashboard-client/src/components/SessionInfo.tsx — session state + store metrics.
+ * dashboard-client/src/components/SessionInfo.tsx — Crew / Agents card.
  *
- * State badge, checkpoint count, tokens saved, dedup hit rate.
+ * Shows Active Agents, Current Turn, and Status.
  */
 
 import type React from "react";
 
 export interface SessionInfoProps {
-	/** Session lifecycle state, or null when no session is active. */
-	state: string | null;
-	/** Whether a checkpoint has been persisted during this session. */
-	persistedThisSession: boolean;
-	/** Total checkpoints across all sessions. */
-	checkpointCount: number;
-	/** Total tokens saved through compaction. */
-	tokensSaved: number;
-	/** Dedup hit rate (percent, 0–100). */
-	dedupHitRate: number;
+	/** Number of active crew agents. */
+	activeAgents: number;
+	/** Current turn index in the crew round-robin. */
+	currentTurn: number;
 }
 
-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);
-}
+export function SessionInfo(
+	props: SessionInfoProps,
+): React.ReactElement {
+	const { activeAgents, currentTurn } = props;
+	const status =
+		activeAgents > 0 ? `▶ ${activeAgents} running` : "idle";
 
-export function SessionInfo({
-	state,
-	persistedThisSession,
-	checkpointCount,
-	tokensSaved,
-	dedupHitRate,
-}: SessionInfoProps): React.ReactElement {
-	const badge = state ?? "no session";
 	return (
-		<div className="card session-info">
-			<h3>Session</h3>
-			<p>
-				<span
-					className={`state-badge state-${(state ?? "none").toLowerCase()}`}
-				>
-					{badge}
-				</span>
-				{persistedThisSession && (
-					<span className="persisted-tag">persisted</span>
-				)}
-			</p>
-			<div className="stat-grid">
-				<div className="stat">
-					<span className="stat-label">Checkpoints</span>
-					<span className="stat-value">{checkpointCount.toLocaleString()}</span>
-				</div>
-				<div className="stat stat-highlight">
-					<span className="stat-label">Saved</span>
-					<span className="stat-value">{fmt(tokensSaved)}</span>
-				</div>
-				<div className="stat">
-					<span className="stat-label">Dedup hit</span>
-					<span className="stat-value">{dedupHitRate.toFixed(1)}%</span>
-				</div>
+		<div className="card crew-card">
+			<h3>Crew / Agents</h3>
+			<div className="ov-stat-row">
+				<span className="ov-stat-label">Active Agents</span>
+				<span className="ov-stat-value">{activeAgents}</span>
+			</div>
+			<div className="ov-stat-row">
+				<span className="ov-stat-label">Current Turn</span>
+				<span className="ov-stat-value">{currentTurn}</span>
+			</div>
+			<div className="ov-stat-row">
+				<span className="ov-stat-label">Status</span>
+				<span className="ov-stat-value">{status}</span>
 			</div>
 		</div>
 	);

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

@@ -1,7 +1,8 @@
 /**
  * dashboard-client/src/components/SummaryTiles.tsx — aggregate header tiles.
  *
- * Total repos, active repos (24h), total checkpoints, total tokens saved.
+ * 4 tiles: Repositories, Total Checkpoints, Total Tokens Saved,
+ * Compressed-Original. Matches old dashboard #panel-summary tiles.
  */
 
 import type React from "react";
@@ -9,14 +10,22 @@ import type React from "react";
 export interface SummaryTilesProps {
 	/** Total repos in the registry. */
 	totalRepos: number;
-	/** Repos active within the last 24 hours. */
-	activeRepos: number;
 	/** Total checkpoints across all repos. */
 	totalCheckpoints: number;
 	/** Total tokens saved across all repos. */
 	totalTokensSaved: number;
+	/** Total compressed-original bytes across all repos. */
+	compressedOriginalBytes: number;
 }
 
+/** 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`;
+}
+
+/** Format large numbers with K/M suffix. */
 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`;
@@ -25,28 +34,28 @@ function fmt(n: number): string {
 
 export function SummaryTiles({
 	totalRepos,
-	activeRepos,
 	totalCheckpoints,
 	totalTokensSaved,
+	compressedOriginalBytes,
 }: SummaryTilesProps): React.ReactElement {
 	return (
 		<div className="summary-tiles">
 			<div className="tile">
-				<span className="tile-label">Total repos</span>
+				<span className="tile-label">Repositories</span>
 				<span className="tile-value">{totalRepos.toLocaleString()}</span>
 			</div>
 			<div className="tile">
-				<span className="tile-label">Active (24h)</span>
-				<span className="tile-value">{activeRepos.toLocaleString()}</span>
-			</div>
-			<div className="tile">
-				<span className="tile-label">Checkpoints</span>
+				<span className="tile-label">Total Checkpoints</span>
 				<span className="tile-value">{totalCheckpoints.toLocaleString()}</span>
 			</div>
 			<div className="tile tile-highlight">
-				<span className="tile-label">Tokens saved</span>
+				<span className="tile-label">Total Tokens Saved</span>
 				<span className="tile-value">{fmt(totalTokensSaved)}</span>
 			</div>
+			<div className="tile">
+				<span className="tile-label">Compressed-Original</span>
+				<span className="tile-value">{fmtBytesTop(compressedOriginalBytes)}</span>
+			</div>
 		</div>
 	);
 }

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

@@ -0,0 +1,61 @@
+/**
+ * dashboard-client/src/components/TimeSavedCard.tsx — Time Saved (est.) card.
+ *
+ * 4 fields: Compact (session), Compact (total),
+ * Cache Hit (session), Cache Hit (total).
+ */
+
+import type React from "react";
+import { fmtSec } from "../utils/format";
+
+export interface TimeSavedCardProps {
+	/** Seconds saved by compaction this session. */
+	compactSessionSec: number;
+	/** Total seconds saved by compaction. */
+	compactTotalSec: number;
+	/** Seconds saved by cache hits this session. */
+	cacheHitSessionSec: number;
+	/** Total seconds saved by cache hits. */
+	cacheHitTotalSec: number;
+}
+
+function StatRow({
+	label,
+	value,
+}: {
+	label: string;
+	value: string;
+}): 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 TimeSavedCard(
+	props: TimeSavedCardProps,
+): React.ReactElement {
+	return (
+		<div className="card time-saved-card">
+			<h3>⏱ Time Saved (est.)</h3>
+			<StatRow
+				label="Compact (session)"
+				value={fmtSec(props.compactSessionSec)}
+			/>
+			<StatRow
+				label="Compact (total)"
+				value={fmtSec(props.compactTotalSec)}
+			/>
+			<StatRow
+				label="Cache Hit (session)"
+				value={fmtSec(props.cacheHitSessionSec)}
+			/>
+			<StatRow
+				label="Cache Hit (total)"
+				value={fmtSec(props.cacheHitTotalSec)}
+			/>
+		</div>
+	);
+}

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

@@ -1,7 +1,11 @@
 /**
  * dashboard-client/src/components/TriggerStatus.tsx — trigger armed/ready status.
  *
- * Two bullets (armed, ready) + threshold display + fast-gate %.
+ * Two bullets (Armed, Ready) + state text.
+ * Ready bullet shows "na" (yellow) when not armed.
+ * State text: ready → "THRESHOLD EXCEEDED — compacting next event",
+ * armed → "past fast gate — monitoring token count",
+ * idle → "idle — below fast gate".
  */
 
 import type React from "react";
@@ -19,15 +23,19 @@ export interface TriggerStatusProps {
 	fastGatePct: number;
 }
 
+type BulletState = "on" | "off" | "na";
+
 function Bullet({
-	on,
+	state,
 	label,
 }: {
-	on: boolean;
+	state: BulletState;
 	label: string;
 }): React.ReactElement {
+	const cls =
+		state === "on" ? "bullet-on" : state === "na" ? "bullet-na" : "bullet-off";
 	return (
-		<div className={`bullet ${on ? "bullet-on" : "bullet-off"}`}>
+		<div className={`bullet ${cls}`}>
 			<span className="bullet-dot" aria-hidden="true" />
 			<span className="bullet-label">{label}</span>
 		</div>
@@ -37,26 +45,30 @@ function Bullet({
 export function TriggerStatus({
 	armed,
 	ready,
-	currentTokens,
-	thresholdTokens,
-	fastGatePct,
 }: TriggerStatusProps): React.ReactElement {
-	const cur =
-		currentTokens !== null && currentTokens !== undefined
-			? currentTokens.toLocaleString()
-			: "unknown";
+	// tr-armed: on if armed, off if not
+	// tr-ready: on if ready, na (yellow) if not armed, off if armed but not ready
+	const armedState: BulletState = armed ? "on" : "off";
+	const readyState: BulletState = ready
+		? "on"
+		: !armed
+			? "na"
+			: "off";
+
+	const stateText = ready
+		? "THRESHOLD EXCEEDED — compacting next event"
+		: armed
+			? "past fast gate — monitoring token count"
+			: "idle — below fast gate";
+
 	return (
 		<div className="card trigger-status">
-			<h3>Trigger</h3>
+			<h3>Trigger Status</h3>
 			<div className="bullet-row">
-				<Bullet on={armed} label="Armed" />
-				<Bullet on={ready} label="Ready" />
+				<Bullet state={armedState} label="Armed" />
+				<Bullet state={readyState} label="Ready" />
 			</div>
-			<p className="trigger-detail">
-				Threshold: {thresholdTokens.toLocaleString()} tokens
-			</p>
-			<p className="trigger-detail">Current: {cur} tokens</p>
-			<p className="trigger-detail">Fast gate: {fastGatePct}%</p>
+			<p className="trigger-state-text">{stateText}</p>
 		</div>
 	);
 }

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

@@ -0,0 +1,134 @@
+/**
+ * dashboard-client/src/components/VectorStoreCard.tsx — Vector Store (session) card.
+ *
+ * 9 fields: Checkpoints, Original (dropped), Kept (summaries), Freed,
+ * Injected, Recall Relevance %, Storage Dedup %, Collapsed, Last ID.
+ * Plus a compression meter bar (green ≥90%, yellow ≥60%, red <60%).
+ *
+ * NOTE: dedupHitRate, storageDedupRate, compressionPct, dedupPct are
+ * 0–1 fractions at runtime (despite contract saying 0–100).
+ * Tooltips copied verbatim from html.ts.
+ */
+
+import type React from "react";
+import { fmtPctFromFraction } from "../utils/format";
+
+export interface VectorStoreCardProps {
+	checkpointCount: number;
+	/** Original tokens dropped into compaction (session). */
+	tokensIn: number;
+	/** Kept summary tokens (session). */
+	tokensOut: number;
+	/** Tokens freed = dropped − kept (session). */
+	tokensFreed: number;
+	/** Recall injection count. */
+	injectedCount: number;
+	/** Recall relevance — 0–1 fraction. */
+	dedupHitRate: number;
+	/** Storage dedup rate — 0–1 fraction. */
+	storageDedupRate: number;
+	/** Duplicate chunks collapsed. */
+	dedupCollapsed: number;
+	/** Last checkpoint ID or null. */
+	lastCheckpointId: string | null;
+	/** Session compression ratio — 0–1 fraction. */
+	compressionPct: number;
+	/** Session dedup contribution — 0–1 fraction. */
+	dedupPct: number;
+}
+
+/** Compression meter colour class (inverse of context: high = good). */
+function compressClass(sp: number): string {
+	if (sp >= 0.9) return "meter-green";
+	if (sp >= 0.6) return "meter-yellow";
+	return "meter-red";
+}
+
+/** Stat row with optional tooltip. */
+function StatRow({
+	label,
+	value,
+	title,
+}: {
+	label: string;
+	value: string | number;
+	title?: string;
+}): React.ReactElement {
+	return (
+		<div className="ov-stat-row">
+			<span className="ov-stat-label" title={title}>
+				{label}
+			</span>
+			<span className="ov-stat-value">{value}</span>
+		</div>
+	);
+}
+
+export function VectorStoreCard(
+	props: VectorStoreCardProps,
+): 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 vector-store-card">
+			<h3>Vector Store (session)</h3>
+			<StatRow
+				label="Checkpoints"
+				value={props.checkpointCount.toLocaleString()}
+				title="A saved summary of a chunk of your conversation that was compacted to free up space."
+			/>
+			<StatRow
+				label="Original (dropped)"
+				value={props.tokensIn.toLocaleString()}
+				title="Total size of the original conversation text dropped into compaction this session, including redundant regions skipped by dedup. This is the 'in'."
+			/>
+			<StatRow
+				label="Kept (summaries)"
+				value={props.tokensOut.toLocaleString()}
+				title="Compact summaries we are currently holding as 'memory' for this session (the 'out'). Smaller is better."
+			/>
+			<StatRow
+				label="Freed"
+				value={props.tokensFreed.toLocaleString()}
+				title="Conversation space freed = dropped − kept (the 'saved')."
+			/>
+			<StatRow
+				label="Injected"
+				value={props.injectedCount}
+				title="How many times old context was automatically brought back into the conversation because it was relevant to what you were doing."
+			/>
+			<StatRow
+				label="Recall Relevance"
+				value={fmtPctFromFraction(props.dedupHitRate)}
+				title="Of the times we recalled old context, how often it was actually on-topic."
+			/>
+			<StatRow
+				label="Storage Dedup"
+				value={fmtPctFromFraction(props.storageDedupRate)}
+				title="How often new content matched something we already had, so we skipped storing a duplicate copy. Higher = less wasted space."
+			/>
+			<StatRow
+				label="Collapsed"
+				value={props.dedupCollapsed}
+				title="How many duplicate chunks we collapsed into one instead of storing separately."
+			/>
+			<StatRow
+				label="Last ID"
+				value={props.lastCheckpointId ?? "—"}
+				title="The ID of the most recent saved checkpoint."
+			/>
+			<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/main.tsx

@@ -10,6 +10,11 @@ import App from "./App";
 import "./styles/base.css";
 import "./styles/overview-events.css";
 import "./styles/repos-metrics.css";
+import "./styles/repos-extra.css";
+import "./styles/overview-extra.css";
+import "./styles/config.css";
+import "./styles/metrics-extra.css";
+import "./styles/game-achievements.css";
 
 const rootEl = document.getElementById("root");
 if (!rootEl) {