pi-mega-compact 0.8.12 → 0.8.14

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

@@ -1,16 +1,67 @@
 /**
  * dashboard-client/src/tabs/EventsTab.tsx — Events tab (C1).
  *
- * Live SSE event stream via useSSE + EventStream with type filters.
- * Shows connection status + event count.
+ * Live SSE event stream via useSSE + EventStream with category filter chips.
+ * Shows connection status + event count. Category filter uses the existing
+ * EventCategoryFilter component to filter by all/compact/recall/config/crew/game.
  */
 
 import type React from "react";
+import { useState, useMemo } from "react";
+import type { SseEvent } from "@contracts";
 import { useSSE } from "../hooks/useSSE";
 import { EventStream } from "../components/EventStream";
+import {
+	EventCategoryFilter,
+	type EventCategory,
+} from "../components/EventCategoryFilter";
+
+const COMPACT_TYPES = new Set([
+	"compact_start",
+	"compact_end",
+	"compact_trigger",
+	"compact_skip",
+]);
+const CONFIG_TYPES = new Set([
+	"config_updated",
+	"config_preset",
+	"tier_changed",
+	"model_changed",
+	"pressure_lifted",
+	"anchors_updated",
+	"checkpoint_persisted",
+]);
+const CREW_TYPES = new Set([
+	"crew_presence_changed",
+	"crew_turn_changed",
+	"crew_bandit_chosen",
+]);
+const GAME_TYPES = new Set([
+	"game_ritual_start",
+	"game_ritual_stage",
+	"game_ritual_end",
+	"game_mode_changed",
+	"game_render",
+]);
+
+function matchesCategory(ev: SseEvent, cat: EventCategory): boolean {
+	if (cat === "all") return true;
+	const t = ev.type;
+	if (cat === "compact") return COMPACT_TYPES.has(t);
+	if (cat === "recall") return t === "recall_inject";
+	if (cat === "config") return CONFIG_TYPES.has(t);
+	if (cat === "crew") return CREW_TYPES.has(t);
+	return GAME_TYPES.has(t); // cat === "game"
+}
 
 export default function EventsTab(): React.ReactElement {
 	const { events, status, eventCount } = useSSE();
+	const [category, setCategory] = useState<EventCategory>("all");
+
+	const filtered = useMemo(
+		() => events.filter((e) => matchesCategory(e, category)),
+		[events, category],
+	);
 
 	const statusCls = `sse-status sse-${status}`;
 	const statusLabel =
@@ -31,7 +82,8 @@ export default function EventsTab(): React.ReactElement {
 				</span>
 				<span className="event-count">{eventCount} events received</span>
 			</div>
-			<EventStream events={events} />
+			<EventCategoryFilter active={category} onFilter={setCategory} />
+			<EventStream events={filtered} />
 		</div>
 	);
 }

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

@@ -0,0 +1,287 @@
+/**
+ * dashboard-client/src/tabs/GameTab.tsx — Game tab (NEW).
+ *
+ * Renders:
+ *  (1) MEGA CACHE banner (animated gradient, shown when any mega_cache > 100)
+ *  (2) Opie unlock tile (shown when mega_cache > 100)
+ *  (3) High Scores header
+ *  (4) 4 leaderboards in 2×2 grid: Cache %, Dedupe, Turns (LVL badge),
+ *      MEGA CACHE trophies (firstSeen date meta)
+ *  (5) Repos count badge via fetchGameScores({metric:'repos',limit:1})
+ *  (6) Achievements sub-section (AchievementTiles shared component)
+ *  (7) Game empty state
+ * Polls scores + achievements every 15s, game-state every 15s.
+ * Applies data-theme accent vars when game_mode_on.
+ */
+
+import type React from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import type { GameScoreRow, AchievementRow } from "@contracts";
+import { fetchGameScores, fetchAchievements, fetchGameState } from "../api/client";
+import { AchievementTiles } from "../components/AchievementTiles";
+
+/** Actual flat game state shape from the server (NOT the nested contract). */
+interface FlatGameState {
+	game_mode_on: boolean;
+	theme: string;
+	tui_display_mode: "full" | "minimal";
+}
+
+/** Metadata object inside a mega_cache GameScoreRow. */
+interface TrophyMeta {
+	firstSeenTs?: number;
+	firstSeen?: number;
+}
+
+/* ── Format helpers (matching html.ts logic) ─────────────────────────── */
+
+function fmtPct(v: number): string {
+	return (Math.round(v * 10) / 10).toString() + "%";
+}
+
+function fmtDate(ts: number | null | undefined): string {
+	return ts != null ? new Date(ts).toLocaleString() : "\u2014";
+}
+
+function trophyMeta(m: unknown): TrophyMeta {
+	return m && typeof m === "object" ? (m as TrophyMeta) : {};
+}
+
+function repoBasename(path: string): string {
+	return path.split("/").pop() || path;
+}
+
+/* ── Leaderboard card ────────────────────────────────────────────────── */
+
+interface LeaderboardCardProps {
+	title: string;
+	rows: GameScoreRow[];
+	badge?: React.ReactNode;
+	renderValue: (r: GameScoreRow) => React.ReactNode;
+}
+
+function LeaderboardCard({
+	title,
+	rows,
+	badge,
+	renderValue,
+}: LeaderboardCardProps): React.ReactElement {
+	return (
+		<div className="lb-card">
+			<h3>
+				{title}
+				{badge}
+			</h3>
+			{rows.length === 0 ? (
+				<div className="lb-empty">—</div>
+			) : (
+				<table>
+					<tbody>
+						{rows.map((r, i) => (
+							<tr key={`${r.repo_root}-${i}`}>
+								<td title={r.repo_root}>{repoBasename(r.repo_root)}</td>
+								<td className="num">{renderValue(r)}</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			)}
+		</div>
+	);
+}
+
+/* ── Main GameTab component ──────────────────────────────────────────── */
+
+export default function GameTab(): React.ReactElement {
+	const [scores, setScores] = useState<
+		Record<string, GameScoreRow[]>
+	>({});
+	const [reposCount, setReposCount] = useState(0);
+	const [achievements, setAchievements] = useState<AchievementRow[]>([]);
+	const [gameModeOn, setGameModeOn] = useState(false);
+	const [loading, setLoading] = useState(true);
+	const [megaToast, setMegaToast] = useState<string | null>(null);
+	const lastMegaTsRef = useRef(0);
+
+	const fetchAll = useCallback(async (): Promise<void> => {
+		try {
+			const [cache, dedupe, turns, megaCache, repos, ach] =
+				await Promise.all([
+					fetchGameScores({ metric: "cache", limit: 25 }),
+					fetchGameScores({ metric: "dedupe", limit: 25 }),
+					fetchGameScores({ metric: "turns", limit: 25 }),
+					fetchGameScores({ metric: "mega_cache", limit: 25 }),
+					fetchGameScores({ metric: "repos", limit: 1 }),
+					fetchAchievements(),
+				]);
+
+			/* Mega-cache toast: new row with value > 100 since last poll */
+			const newRow = megaCache.find(
+				(r) => r.ts > lastMegaTsRef.current && r.value > 100,
+			);
+			if (lastMegaTsRef.current > 0 && newRow) {
+				setMegaToast(
+					`oopsie! cache went to ${Math.round(newRow.value)}% — MEGA CACHE \uD83E\uDD67`,
+				);
+				setTimeout(() => setMegaToast(null), 4000);
+			}
+			if (megaCache.length > 0) {
+				lastMegaTsRef.current = Math.max(
+					...megaCache.map((r) => r.ts),
+				);
+			}
+
+			setScores({ cache, dedupe, turns, mega_cache: megaCache });
+			setReposCount(repos[0]?.value ?? 0);
+			setAchievements(ach);
+		} catch {
+			/* non-fatal */
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	/* Poll scores + achievements every 15s. */
+	useEffect(() => {
+		let active = true;
+		const doFetch = async (): Promise<void> => {
+			if (active) await fetchAll();
+		};
+		void doFetch();
+		const timer = setInterval(() => void doFetch(), 15000);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, [fetchAll]);
+
+	/* Poll game state every 15s for styling. */
+	useEffect(() => {
+		let active = true;
+		const doFetch = async (): Promise<void> => {
+			try {
+				const gs = (await fetchGameState()) as unknown as FlatGameState;
+				if (active) {
+					setGameModeOn(!!gs.game_mode_on);
+					if (gs.theme)
+						document.documentElement.dataset.theme = gs.theme;
+				}
+			} catch {
+				/* non-fatal */
+			}
+		};
+		void doFetch();
+		const timer = setInterval(() => void doFetch(), 15000);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, []);
+
+	/* Compute mega-cache banner data */
+	const megaRows = scores.mega_cache ?? [];
+	let bestMega: number | null = null;
+	let firstSeen: number | null = null;
+	for (const r of megaRows) {
+		if (bestMega == null || r.value > bestMega) bestMega = r.value;
+		const m = trophyMeta(r.meta);
+		const fs = m.firstSeenTs ?? m.firstSeen ?? r.ts;
+		if (firstSeen == null || fs < firstSeen) firstSeen = fs;
+	}
+	const showMega = bestMega != null && bestMega > 100;
+
+	/* Turns level badge */
+	const turnsRows = scores.turns ?? [];
+	const maxTurns = turnsRows.reduce((mx, r) => Math.max(mx, r.value), 0);
+	const lvl = Math.floor(Math.log2(maxTurns + 1)) + 1;
+
+	/* Game empty state */
+	const hasData =
+		(scores.cache?.length ?? 0) > 0 ||
+		(scores.dedupe?.length ?? 0) > 0 ||
+		turnsRows.length > 0 ||
+		megaRows.length > 0 ||
+		reposCount > 0;
+
+	return (
+		<div className={`game-tab${gameModeOn ? " game-mode-on" : ""}`}>
+			{megaToast != null && (
+				<div className="mega-cache-toast show">{megaToast}</div>
+			)}
+
+			{showMega && (
+				<div className="mega-cache-banner">
+					{"\uD83E\uDD67"} MEGA CACHE! peak {fmtPct(bestMega!)} — first
+					reached {fmtDate(firstSeen)}
+				</div>
+			)}
+
+			{showMega && (
+				<div className="achievement-tile unlocked">
+					{"\uD83C\uDFC6"} Opie's Wild Ride
+					<span className="ach-detail">
+						best {fmtPct(bestMega!)} · first {fmtDate(firstSeen)}
+					</span>
+				</div>
+			)}
+
+			<h2>High Scores</h2>
+
+			{!hasData && !loading && (
+				<div className="game-empty">
+					No scores yet — run a session with game mode on.
+				</div>
+			)}
+
+			{hasData && (
+				<div className="game-leaderboards">
+					<LeaderboardCard
+						title="Cache %"
+						rows={scores.cache ?? []}
+						renderValue={(r) => fmtPct(r.value)}
+					/>
+					<LeaderboardCard
+						title="Dedupe (collapsed)"
+						rows={scores.dedupe ?? []}
+						renderValue={(r) => r.value.toLocaleString()}
+					/>
+					<LeaderboardCard
+						title="Turns"
+						rows={turnsRows}
+						badge={
+							turnsRows.length > 0 ? (
+								<span className="lvl-badge">LVL {lvl}</span>
+							) : undefined
+						}
+						renderValue={(r) => r.value.toLocaleString()}
+					/>
+					<LeaderboardCard
+						title="MEGA CACHE trophies"
+						rows={megaRows}
+						renderValue={(r) => (
+							<>
+								{fmtPct(r.value)}
+								<span className="lb-meta">
+									{fmtDate(
+										trophyMeta(r.meta).firstSeenTs ??
+											trophyMeta(r.meta).firstSeen ??
+											r.ts,
+									)}
+								</span>
+							</>
+						)}
+					/>
+				</div>
+			)}
+
+			{reposCount > 0 && (
+				<div className="repos-badge-line">
+					<span className="repos-badge">{reposCount} repos</span>
+				</div>
+			)}
+
+			<h3>Achievements</h3>
+			<AchievementTiles achievements={achievements} />
+		</div>
+	);
+}

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

@@ -2,7 +2,8 @@
  * dashboard-client/src/tabs/MetricsTab.tsx — Metrics tab (C2).
  *
  * Fetches /api/perf (rolling-window aggregates) + /api/snapshot (for model).
- * Renders PerfChart + ModelBadge + resource gauges. Polls every 10s.
+ * Renders ModelBadge + PerfChart + 5 perf cards (latency, throughput, process,
+ * snapshot cost, TUI lag proxy). Polls every 10s.
  */
 
 import type React from "react";
@@ -11,6 +12,7 @@ import { useApi } from "../hooks/useApi";
 import { fetchPerf, fetchSnapshot } from "../api/client";
 import type { PerfResponse, SnapshotResponse } from "@contracts";
 import { PerfChart } from "../components/PerfChart";
+import { PerfCards } from "../components/PerfCards";
 import { ModelBadge } from "../components/ModelBadge";
 
 export default function MetricsTab(): React.ReactElement {
@@ -44,6 +46,10 @@ export default function MetricsTab(): React.ReactElement {
 				/>
 			)}
 			<PerfChart perf={perf} />
+			<PerfCards perf={perf} />
+			<div className="perf-footer">
+				{perf.sampleCount} samples · updated {perf.updatedAt}
+			</div>
 		</div>
 	);
 }

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

@@ -1,16 +1,36 @@
 /**
- * dashboard-client/src/tabs/OverviewTab.tsx — Overview tab (C1).
+ * dashboard-client/src/tabs/OverviewTab.tsx — Overview tab (full spec).
  *
- * 4-card grid: ContextGauge, CompressionCard, TriggerStatus, SessionInfo.
- * Header: tier pill + last updated timestamp. Polls /api/snapshot.
+ * Renders all 11 cards from the spec:
+ *  1. Context Window (ContextGauge)
+ *  2. Trigger Status (TriggerStatus)
+ *  3. Vector Store (session) (VectorStoreCard)
+ *  4. Repo (all sessions) (RepoAllSessionsCard)
+ *  5. Data Safety (DataSafetyCard)
+ *  6. Configuration (ConfigSummaryCard)
+ *  7. Model & Cost Savings (CacheStatusPerModel)
+ *  8. Crew / Agents (SessionInfo)
+ *  9. Cache Hits & Compactions (CacheHitsCard)
+ * 10. Time Saved (TimeSavedCard)
+ * 11. Legend (LegendCard)
+ *
+ * All data comes from the snapshot prop passed by App.tsx.
  */
 
 import type React from "react";
 import type { SnapshotResponse } from "@contracts";
+import type { RuntimeSnapshot } from "../utils/types";
 import { ContextGauge } from "../components/ContextGauge";
-import { CompressionCard } from "../components/CompressionCard";
 import { TriggerStatus } from "../components/TriggerStatus";
+import { VectorStoreCard } from "../components/VectorStoreCard";
+import { RepoAllSessionsCard } from "../components/RepoAllSessionsCard";
+import { DataSafetyCard } from "../components/DataSafetyCard";
+import { ConfigSummaryCard } from "../components/ConfigSummaryCard";
+import { CacheStatusPerModel } from "../components/CacheStatusPerModel";
 import { SessionInfo } from "../components/SessionInfo";
+import { CacheHitsCard } from "../components/CacheHitsCard";
+import { TimeSavedCard } from "../components/TimeSavedCard";
+import { LegendCard } from "../components/LegendCard";
 
 export interface OverviewTabProps {
 	snapshot: SnapshotResponse | null;
@@ -38,8 +58,18 @@ export default function OverviewTab({
 		return <div className="tab-stub">Error: {error.message}</div>;
 	if (!snapshot) return <div className="tab-stub">No snapshot data.</div>;
 
+	// Cast to RuntimeSnapshot for tierPct (runtime-only field).
+	const d = snapshot as RuntimeSnapshot;
 	const { context, compression, trigger, session, store, tier, updatedAt } =
-		snapshot;
+		d;
+	const cfg = d.config;
+	const crew = d.crew;
+	const integrity = d.integrity;
+	const cacheHits = d.cacheHits;
+	const compacts = d.compacts;
+	const timeSaved = d.timeSaved;
+	const repo = d.repo;
+	const model = d.model;
 
 	return (
 		<div className="overview-tab">
@@ -47,19 +77,12 @@ export default function OverviewTab({
 				<span className="tier-pill">{tier}</span>
 				<span className="updated">updated {formatUpdatedAt(updatedAt)}</span>
 			</div>
-			<div className="card-grid">
+			<div className="card-grid overview-card-grid">
 				<ContextGauge
 					tokens={context.tokens}
 					percent={context.percent}
 					contextWindow={context.contextWindow}
 				/>
-				<CompressionCard
-					tokensIn={compression.repo.tokensIn}
-					tokensOut={compression.repo.tokensOut}
-					tokensFreed={compression.repo.tokensFreed}
-					compressionPct={compression.repo.compressionPct}
-					dedupPct={compression.repo.dedupPct}
-				/>
 				<TriggerStatus
 					armed={trigger.armed}
 					ready={trigger.ready}
@@ -67,13 +90,76 @@ export default function OverviewTab({
 					thresholdTokens={trigger.thresholdTokens}
 					fastGatePct={trigger.fastGatePct}
 				/>
-				<SessionInfo
-					state={session.state}
-					persistedThisSession={session.persistedThisSession}
+				<VectorStoreCard
 					checkpointCount={store.checkpointCount}
-					tokensSaved={store.tokensSaved}
+					tokensIn={compression.session.tokensIn}
+					tokensOut={compression.session.tokensOut}
+					tokensFreed={compression.session.tokensFreed}
+					injectedCount={store.injectedCount}
 					dedupHitRate={store.dedupHitRate}
+					storageDedupRate={store.storageDedupRate}
+					dedupCollapsed={store.dedupCollapsed}
+					lastCheckpointId={session.lastCheckpointId}
+					compressionPct={compression.session.compressionPct}
+					dedupPct={compression.session.dedupPct}
+				/>
+				<RepoAllSessionsCard
+					checkpointCount={repo.checkpointCount}
+					tokensIn={compression.repo.tokensIn}
+					tokensOut={compression.repo.tokensOut}
+					tokensFreed={compression.repo.tokensFreed}
+					sessionCount={repo.sessionCount}
+					dedupCollapsed={repo.dedupCollapsed}
+					storageDedupRate={repo.storageDedupRate}
+					compressionPct={compression.repo.compressionPct}
+					dedupPct={compression.repo.dedupPct}
+				/>
+				<DataSafetyCard
+					regionsRetained={integrity.regionsRetained}
+					compressedOriginalBytes={integrity.compressedOriginalBytes}
+					duplicatesCollapsed={integrity.duplicatesCollapsed}
+					bytesPermanentlyDeleted={integrity.bytesPermanentlyDeleted}
+				/>
+				<ConfigSummaryCard
+					tier={tier}
+					presetTier={d.presetTier}
+					pressure={d.pressure}
+					thresholdTokens={cfg.thresholdTokens}
+					tierPct={cfg.tierPct}
+					contextWindow={context.contextWindow}
+					fastGatePct={cfg.fastGatePct}
+					auto={cfg.auto}
+					anchorUserMessages={cfg.anchorUserMessages}
+				/>
+				{model && (
+					<CacheStatusPerModel
+						name={model.name}
+						provider={model.providerName || model.provider}
+						inputRate={model.inputRate}
+						outputRate={model.outputRate}
+						repoTokensFreed={compression.repo.tokensFreed}
+						contextWindow={context.contextWindow}
+					/>
+				)}
+				<SessionInfo
+					activeAgents={crew.activeAgents}
+					currentTurn={crew.currentTurn}
+				/>
+				<CacheHitsCard
+					cacheHitsSession={cacheHits.session}
+					cacheHitsTotal={cacheHits.total}
+					tokensSavedSession={cacheHits.sessionTokensSaved}
+					tokensSavedTotal={cacheHits.totalTokensSaved}
+					compactionsSession={compacts.session}
+					compactionsTotal={compacts.total}
+				/>
+				<TimeSavedCard
+					compactSessionSec={timeSaved.compact.sessionSec}
+					compactTotalSec={timeSaved.compact.totalSec}
+					cacheHitSessionSec={timeSaved.cacheHit.sessionSec}
+					cacheHitTotalSec={timeSaved.cacheHit.totalSec}
 				/>
+				<LegendCard />
 			</div>
 		</div>
 	);

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

@@ -1,56 +1,91 @@
 /**
- * dashboard-client/src/tabs/ReposTab.tsx — Repos tab (C2).
+ * dashboard-client/src/tabs/ReposTab.tsx — Repos tab (C2 fleshed out).
  *
- * Fetches /api/repos + /api/summary. Renders SummaryTiles + RepoTable.
- * Row click opens RepoDetailModal. Polls every 10s.
+ * Renders: SummaryTiles (4 tiles), All Repositories table (RepoTable),
+ * Active Repos table (ActiveReposTable), Savings by Model table
+ * (SavingsByModelTable), and per-repo detail modal (RepoDetailModal).
+ *
+ * Data sources: fetchIndex() for summary + all repos + savings-by-model;
+ * fetchServers() for active repos. Both polled every 10s.
  */
 
 import type React from "react";
 import { useCallback, useState } from "react";
 import { useApi } from "../hooks/useApi";
-import { fetchRepos, fetchSummary } from "../api/client";
-import type {
-	ReposResponse,
-	SummaryResponse,
-	IndexesIndexRow,
-} from "@contracts";
+import { fetchIndex, fetchServers } from "../api/client";
+import type { IndexesIndexRow, ServersResponse } from "@contracts";
 import { SummaryTiles } from "../components/SummaryTiles";
 import { RepoTable } from "../components/RepoTable";
 import { RepoDetailModal } from "../components/RepoDetailModal";
+import { ActiveReposTable } from "../components/ActiveReposTable";
+import { SavingsByModelTable } from "../components/SavingsByModelTable";
+
+/**
+ * Actual runtime shape of /api/index. The contract's IndexesSummaryResponse
+ * puts summary fields at the top level, but the real server nests them under
+ * `summary` (matching IndexFallbackResponse shape with non-null summary).
+ */
+interface DashboardIndexSummary {
+	totalRepos: number;
+	totalCheckpoints: number;
+	totalTokensSaved: number;
+	totalCompressedOriginalBytes: number;
+}
+
+interface DashboardIndexResponse {
+	updatedAt: string | null;
+	summary: DashboardIndexSummary | null;
+	repos: IndexesIndexRow[];
+}
+
+/** Fetch /api/index and cast to the actual runtime shape. */
+async function fetchIndexTyped(): Promise<DashboardIndexResponse> {
+	return (await fetchIndex()) as unknown as DashboardIndexResponse;
+}
 
 export default function ReposTab(): React.ReactElement {
 	const [selected, setSelected] = useState<IndexesIndexRow | null>(null);
 
-	const { data: reposResp, error: reposErr } = useApi<ReposResponse>(
-		useCallback(() => fetchRepos(), []),
-		{ pollInterval: 10_000 },
-	);
-	const { data: summaryResp } = useApi<SummaryResponse>(
-		useCallback(() => fetchSummary(), []),
+	const { data: indexData, error: indexErr } =
+		useApi<DashboardIndexResponse>(
+			useCallback(() => fetchIndexTyped(), []),
+			{ pollInterval: 10_000 },
+		);
+
+	const { data: serversData } = useApi<ServersResponse>(
+		useCallback(() => fetchServers(), []),
 		{ pollInterval: 10_000 },
 	);
 
-	if (reposErr && !reposResp) {
+	if (indexErr && !indexData) {
 		return (
-			<div className="tab-stub">Error loading repos: {reposErr.message}</div>
+			<div className="tab-stub">Error loading repos: {indexErr.message}</div>
 		);
 	}
-	if (!reposResp) {
+	if (!indexData) {
 		return <div className="tab-stub">Loading repos…</div>;
 	}
 
-	const repos = reposResp.repos;
-	const summary = summaryResp?.summary;
+	const summary = indexData.summary;
+	const repos = indexData.repos;
+	const servers = serversData?.servers ?? [];
 
 	return (
 		<div className="repos-tab">
 			<SummaryTiles
-				totalRepos={summaryResp?.totalRepos ?? 0}
-				activeRepos={summaryResp?.activeRepos ?? 0}
+				totalRepos={summary?.totalRepos ?? 0}
 				totalCheckpoints={summary?.totalCheckpoints ?? 0}
 				totalTokensSaved={summary?.totalTokensSaved ?? 0}
+				compressedOriginalBytes={summary?.totalCompressedOriginalBytes ?? 0}
 			/>
+			<h2 className="section-header">All Repositories</h2>
 			<RepoTable repos={repos} onSelect={setSelected} />
+			<h2 className="section-header">
+				Active Repos — Live Cache Hits &amp; Compactions
+			</h2>
+			<ActiveReposTable servers={servers} />
+			<h2 className="section-header">Savings by Model</h2>
+			<SavingsByModelTable repos={repos} />
 			{selected && (
 				<RepoDetailModal repo={selected} onClose={() => setSelected(null)} />
 			)}