pi-mega-compact 0.11.2 → 0.11.4

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

@@ -1,50 +1,104 @@
 /**
- * dashboard-client/src/tabs/CacheTab.tsx — Cache tab (NEW).
+ * dashboard-client/src/tabs/CacheTab.tsx — Cache tab (B.3).
  *
- * Renders CacheHitsCard + TimeSavedCard from /api/snapshot
- * via the useApi hook with 5s polling.
+ * Two sections, each with its own header:
+ *   1. Provider Prompt Cache  → ProviderCacheCard  (/api/provider-cache)
+ *   2. Mega-Compact Dedup Cache → CacheHitsCard + TimeSavedCard  (/api/snapshot)
+ *
+ * Both fetch at 5s polling (same interval). Loading / error shown per-section
+ * only when its own fetch fails; the other section keeps rendering.
  */
 
 import type React from "react";
 import { useCallback } from "react";
-import type { SnapshotResponse } from "@contracts";
+import type { SnapshotResponse, ProviderCacheResponse } from "@contracts";
 import { useApi } from "../hooks/useApi";
-import { fetchSnapshot } from "../api/client";
+import { fetchSnapshot, fetchProviderCache } from "../api/client";
 import { CacheHitsCard } from "../components/CacheHitsCard";
 import { TimeSavedCard } from "../components/TimeSavedCard";
+import { ProviderCacheCard } from "../components/ProviderCacheCard";
 
 export default function CacheTab(): React.ReactElement {
-	const { data: snapshot, loading, error } = useApi<SnapshotResponse>(
-		useCallback(() => fetchSnapshot(), []),
+	/* --- Provider prompt cache (5s poll) --- */
+	const {
+		data: providerCache,
+		loading: pcLoading,
+		error: pcError,
+	} = useApi<ProviderCacheResponse>(
+		useCallback(() => fetchProviderCache(), []),
 		{ pollInterval: 5000 },
 	);
 
-	if (loading && !snapshot)
-		return <div className="tab-stub">Loading snapshot…</div>;
-	if (error && !snapshot)
-		return <div className="tab-stub">Error: {error.message}</div>;
-	if (!snapshot) return <div className="tab-stub">No snapshot data.</div>;
-
-	const { cacheHits, compacts, timeSaved } = snapshot;
+	/* --- Dedup cache snapshot (5s poll) --- */
+	const {
+		data: snapshot,
+		loading: snapLoading,
+		error: snapError,
+	} = useApi<SnapshotResponse>(
+		useCallback(() => fetchSnapshot(), []),
+		{ pollInterval: 5000 },
+	);
 
 	return (
 		<div className="cache-tab">
-			<div className="card-grid overview-card-grid">
-				<CacheHitsCard
-					cacheHitsSession={cacheHits.session}
-					cacheHitsTotal={cacheHits.total}
-					tokensSavedSession={cacheHits.sessionTokensSaved}
-					tokensSavedTotal={cacheHits.totalTokensSaved}
-					compactionsSession={compacts.session}
-					compactionsTotal={compacts.total}
+			{/* ==============================================================
+			    Section 1 — Provider Prompt Cache
+			    ============================================================== */}
+			<h2>Provider Prompt Cache</h2>
+			{pcLoading ? (
+				<p className="tab-stub">Loading…</p>
+			) : pcError ? (
+				<p className="tab-stub">
+					Provider cache unavailable: {pcError.message}
+				</p>
+			) : providerCache ? (
+				<ProviderCacheCard
+					hitPct={providerCache.cache.avgHitPct}
+					turnCount={providerCache.cache.turnCount}
+					totalCacheRead={providerCache.cache.totalCacheRead}
+					totalCacheWrite={providerCache.cache.totalCacheWrite}
+					totalInput={providerCache.cache.totalInput}
+					cacheReadSaved={providerCache.savings?.cacheReadSaved ?? null}
+					cacheWriteCost={providerCache.savings?.cacheWriteCost ?? null}
+					netSaved={providerCache.savings?.netSaved ?? null}
+					modelLabel={providerCache.savings?.model ?? null}
+					firstTurnAt={providerCache.cache.firstTurnAt}
+					latestTurnAt={providerCache.cache.latestTurnAt}
 				/>
-				<TimeSavedCard
-					compactSessionSec={timeSaved.compact.sessionSec}
-					compactTotalSec={timeSaved.compact.totalSec}
-					cacheHitSessionSec={timeSaved.cacheHit.sessionSec}
-					cacheHitTotalSec={timeSaved.cacheHit.totalSec}
-				/>
-			</div>
+			) : null}
+
+			{/* ==============================================================
+			    Section 2 — Mega-Compact Dedup Cache
+			    ============================================================== */}
+			<h2>Mega-Compact Dedup Cache</h2>
+			{snapLoading ? (
+				<p className="tab-stub">Loading…</p>
+			) : snapError ? (
+				<p className="tab-stub">Snapshot unavailable: {snapError.message}</p>
+			) : (
+				snapshot &&
+				(() => {
+					const { cacheHits, compacts, timeSaved } = snapshot;
+					return (
+						<div className="card-grid overview-card-grid">
+							<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}
+							/>
+						</div>
+					);
+				})()
+			)}
 		</div>
 	);
 }