pi-mega-compact 0.11.1 → 0.11.3

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>
 	);
 }

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

@@ -0,0 +1,458 @@
+/**
+ * dashboard-client/src/tabs/MaintenanceTab.tsx — Maintenance tab (v0.11.2 S49B).
+ *
+ * Three cards:
+ *   1. Schema Health (schema version + integrity + column audit)
+ *   2. DB Stats (file sizes + table row counts)
+ *   3. Actions (one-time maintenance operations with results history)
+ *
+ * All three fetch independently; failures in one do not block the others.
+ */
+
+import type React from "react";
+import { useState, useCallback } from "react";
+import type {
+	DbStatsResponse,
+	SchemaHealthResponse,
+	MaintenanceAction,
+	MaintenanceActionResult,
+} from "@contracts";
+import { useApi } from "../hooks/useApi";
+import {
+	fetchDbStats,
+	fetchSchemaHealth,
+	postMaintenanceAction,
+} from "../api/client";
+
+// ---------------------------------------------------------------------------
+// Action config
+// ---------------------------------------------------------------------------
+
+interface ActionDef {
+	key: string;
+	label: string;
+	desc: string;
+	dangerous: boolean;
+	confirm?: string;
+	daysOld?: boolean;
+}
+
+const ACTIONS: ActionDef[] = [
+	{
+		key: "integrity-check",
+		label: "Integrity Check",
+		desc: "Run PRAGMA integrity_check",
+		dangerous: false,
+	},
+	{
+		key: "reconcile-dedup",
+		label: "Reconcile Dedup Mirror",
+		desc: "Fix orphan dedup rows + backfill refs",
+		dangerous: false,
+		confirm: "Reconcile dedup_mirror (safe read/write)?",
+	},
+	{
+		key: "checkpoint",
+		label: "WAL Checkpoint",
+		desc: "Merge WAL into main DB (read-only)",
+		dangerous: false,
+	},
+	{
+		key: "vacuum",
+		label: "VACUUM",
+		desc: "Rebuild DB reclaiming free pages",
+		dangerous: true,
+		confirm: "VACUUM rewrites the entire DB. Continue?",
+	},
+	{
+		key: "reindex",
+		label: "REINDEX",
+		desc: "Rebuild all indexes",
+		dangerous: true,
+		confirm: "REINDEX rebuilds indexes. Continue?",
+	},
+	{
+		key: "fts5-rebuild",
+		label: "FTS5 Rebuild",
+		desc: "Rebuild full-text search index",
+		dangerous: true,
+		confirm: "Rebuild FTS5 trigram index. Continue?",
+	},
+	{
+		key: "prune",
+		label: "Prune Old Rows",
+		desc: "Delete transcripts + epochs older than N days",
+		dangerous: true,
+		daysOld: true,
+		confirm: "Delete old raw_transcript rows. Continue?",
+	},
+];
+
+// ---------------------------------------------------------------------------
+// Format helpers (local — matches html.ts fmtBytes)
+// ---------------------------------------------------------------------------
+
+function fmtBytes(b: number): string {
+	if (b < 1024) return `${b} B`;
+	if (b < 1024 * 1024) return `${(b / 1024).toFixed(1)} KB`;
+	return `${(b / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// ---------------------------------------------------------------------------
+// DB Stats card
+// ---------------------------------------------------------------------------
+
+function FileSizesCard({
+	files,
+	pageSize,
+	pageCount,
+	freelistPages,
+}: {
+	files: DbStatsResponse["storage"]["files"];
+	pageSize: number;
+	pageCount: number;
+	freelistPages: number;
+}): React.ReactElement {
+	const total = files.dbBytes + files.walBytes + files.shmBytes;
+	return (
+		<div className="stat-section">
+			<div className="stat-label">File Sizes</div>
+			<table className="compact-table">
+				<tbody>
+					<tr>
+						<td>sqlite.db</td>
+						<td className="num">{fmtBytes(files.dbBytes)}</td>
+					</tr>
+					{files.walBytes > 0 && (
+						<tr>
+							<td>.wal</td>
+							<td className="num">{fmtBytes(files.walBytes)}</td>
+						</tr>
+					)}
+					{files.shmBytes > 0 && (
+						<tr>
+							<td>.shm</td>
+							<td className="num">{fmtBytes(files.shmBytes)}</td>
+						</tr>
+					)}
+					<tr>
+						<td>Total</td>
+						<td className="num">{fmtBytes(total)}</td>
+					</tr>
+					<tr>
+						<td>Page size</td>
+						<td className="num">{fmtBytes(pageSize)}</td>
+					</tr>
+					<tr>
+						<td>Pages</td>
+						<td className="num">
+							{pageCount.toLocaleString()} ({freelistPages.toLocaleString()}{" "}
+							free)
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+function TableRowCountsCard({
+	tables,
+}: {
+	tables: DbStatsResponse["tables"];
+}): React.ReactElement {
+	const totalRows = tables.reduce((s, t) => s + Math.max(0, t.rowCount), 0);
+	return (
+		<div className="stat-section">
+			<div className="stat-label">
+				Table Row Counts ({totalRows.toLocaleString()} total)
+			</div>
+			<table className="compact-table">
+				<thead>
+					<tr>
+						<th>Table</th>
+						<th className="num">Rows</th>
+					</tr>
+				</thead>
+				<tbody>
+					{tables.map((t) => (
+						<tr key={t.table}>
+							<td>{t.table}</td>
+							<td className="num">
+								{t.rowCount >= 0 ? t.rowCount.toLocaleString() : "—"}
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+function DbStatsCard({
+	data,
+	loading,
+	error,
+}: {
+	data: DbStatsResponse | null;
+	loading: boolean;
+	error: Error | null;
+}): React.ReactElement {
+	return (
+		<div className="card">
+			<div className="card-header">DB Stats</div>
+			<div className="card-body">
+				{loading && !data && <span className="text-muted">Loading…</span>}
+				{error && !data && <span className="text-error">{error.message}</span>}
+				{data && (
+					<>
+						<FileSizesCard
+							files={data.storage.files}
+							pageSize={data.storage.pageSize}
+							pageCount={data.storage.pageCount}
+							freelistPages={data.storage.freelistPages}
+						/>
+						<TableRowCountsCard tables={data.tables} />
+					</>
+				)}
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Schema Health card
+// ---------------------------------------------------------------------------
+
+function ColumnAuditCard({
+	columns,
+}: {
+	columns: SchemaHealthResponse["columns"];
+}): React.ReactElement {
+	const missing = columns.filter((c) => !c.present);
+	return (
+		<div className="stat-section">
+			<div className="stat-label">
+				Column Audit ({columns.length} columns, {missing.length} missing)
+			</div>
+			<table className="compact-table">
+				<thead>
+					<tr>
+						<th>Table</th>
+						<th>Column</th>
+						<th>Decl</th>
+						<th>Status</th>
+					</tr>
+				</thead>
+				<tbody>
+					{columns.map((c) => (
+						<tr key={`${c.table}.${c.column}`}>
+							<td>{c.table}</td>
+							<td>{c.column}</td>
+							<td className="text-mono">{c.expectedDecl}</td>
+							<td className={c.present ? "text-ok" : "text-error"}>
+								{c.present ? "✓" : "MISSING"}
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+function SchemaHealthCard({
+	data,
+	loading,
+	error,
+}: {
+	data: SchemaHealthResponse | null;
+	loading: boolean;
+	error: Error | null;
+}): React.ReactElement {
+	return (
+		<div className="card">
+			<div className="card-header">
+				Schema Health
+				{data && (
+					<span className={`badge ${data.healthy ? "badge-ok" : "badge-bad"}`}>
+						{data.healthy ? "HEALTHY" : "DEGRADED"}
+					</span>
+				)}
+			</div>
+			<div className="card-body">
+				{loading && !data && <span className="text-muted">Loading…</span>}
+				{error && !data && <span className="text-error">{error.message}</span>}
+				{data && (
+					<>
+						<div className="stat-row">
+							<span className="stat-label">Schema version</span>
+							<span className="num">{data.schemaVersion}</span>
+						</div>
+						<div className="stat-row">
+							<span className="stat-label">Integrity</span>
+							<span
+								className={
+									data.integrity[0] === "ok" ? "text-ok" : "text-error"
+								}
+							>
+								{data.integrity.join("; ")}
+							</span>
+						</div>
+						<ColumnAuditCard columns={data.columns} />
+						{data.fkCheck.length > 0 && (
+							<div className="stat-section">
+								<div className="stat-label text-warn">
+									FK Check ({data.fkCheck.length})
+								</div>
+								{data.fkCheck.map((line, i) => (
+									<div key={i} className="text-warn text-mono">
+										{line}
+									</div>
+								))}
+							</div>
+						)}
+					</>
+				)}
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Actions card
+// ---------------------------------------------------------------------------
+
+function ActionsCard(): React.ReactElement {
+	const [results, setResults] = useState<MaintenanceActionResult[]>([]);
+	const [running, setRunning] = useState<string | null>(null);
+	const [days, setDays] = useState("30");
+
+	const handleAction = useCallback(
+		async (def: ActionDef) => {
+			const action: MaintenanceAction = def.daysOld
+				? { action: "prune", daysOld: Number(days) }
+				: ({ action: def.key } as MaintenanceAction);
+
+			setRunning(def.key);
+			try {
+				const res = await postMaintenanceAction(action);
+				setResults((prev) =>
+					[{ ...res, timestamp: Date.now() }, ...prev].slice(0, 20),
+				);
+			} catch (err) {
+				setResults((prev) =>
+					[
+						{
+							operation: def.key,
+							success: false,
+							affected: 0,
+							reclaimedBytes: 0,
+							summary: err instanceof Error ? err.message : String(err),
+							timestamp: Date.now(),
+						},
+						...prev,
+					].slice(0, 20),
+				);
+			} finally {
+				setRunning(null);
+			}
+		},
+		[days],
+	);
+
+	return (
+		<div className="card">
+			<div className="card-header">Actions</div>
+			<div className="card-body">
+				<div className="action-grid">
+					{ACTIONS.map((def) => {
+						const isRunning = running === def.key;
+						const lastResult = results.find((r) => r.operation === def.key);
+						return (
+							<div key={def.key} className="action-item">
+								<div className="action-info">
+									<div className="action-label">
+										{def.label}
+										{def.dangerous && (
+											<span className="badge badge-warn">DESTRUCTIVE</span>
+										)}
+									</div>
+									<div className="action-desc">{def.desc}</div>
+									{lastResult && (
+										<div
+											className={`action-result ${lastResult.success ? "text-ok" : "text-error"}`}
+										>
+											{lastResult.summary}
+										</div>
+									)}
+								</div>
+								<div className="action-controls">
+									{def.daysOld && (
+										<input
+											type="number"
+											min={1}
+											max={365}
+											value={days}
+											onChange={(e) => setDays(e.target.value)}
+											className="days-input"
+											disabled={isRunning}
+										/>
+									)}
+									<button
+										className={`btn ${def.dangerous ? "btn-danger" : "btn-primary"}`}
+										disabled={running !== null}
+										onClick={() => {
+											if (def.confirm && !window.confirm(def.confirm)) return;
+											handleAction(def);
+										}}
+									>
+										{isRunning ? "Running…" : "Run"}
+									</button>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Main tab component
+// ---------------------------------------------------------------------------
+
+export default function MaintenanceTab(): React.ReactElement {
+	const {
+		data: dbStats,
+		loading: statsLoading,
+		error: statsError,
+	} = useApi<DbStatsResponse>(
+		useCallback(() => fetchDbStats(), []),
+		{ pollInterval: 15000 },
+	);
+
+	const {
+		data: schemaHealth,
+		loading: healthLoading,
+		error: healthError,
+	} = useApi<SchemaHealthResponse>(
+		useCallback(() => fetchSchemaHealth(), []),
+		{ pollInterval: 10000 },
+	);
+
+	return (
+		<div className="maintenance-tab">
+			<div className="card-grid">
+				<SchemaHealthCard
+					data={schemaHealth}
+					loading={healthLoading}
+					error={healthError}
+				/>
+				<DbStatsCard data={dbStats} loading={statsLoading} error={statsError} />
+			</div>
+			<ActionsCard />
+		</div>
+	);
+}

package/extensions/dashboard-client/src/utils/format.ts

@@ -26,9 +26,7 @@ export function fmtSec(s: number | null | undefined): string {
  * Display a 0–1 fraction as a percentage string.
  * Uses one decimal place below 10%, rounded above (matches html.ts pct logic).
  */
-export function fmtPctFromFraction(
-	v: number | null | undefined,
-): string {
+export function fmtPctFromFraction(v: number | null | undefined): string {
 	const n = v ?? 0;
 	const pct = n * 100;
 	if (pct >= 10) return `${Math.round(pct)}%`;
@@ -48,10 +46,7 @@ export function fmtMs(v: number | null | undefined): string {
 }
 
 /** Format a number with fixed decimals or em-dash for null (matches fmtNum). */
-export function fmtNum(
-	v: number | null | undefined,
-	dec: number,
-): string {
+export function fmtNum(v: number | null | undefined, dec: number): string {
 	if (v == null || typeof v !== "number") return "\u2014";
 	return v.toFixed(dec);
 }
@@ -83,3 +78,43 @@ export function fmtDate(ts: string | number | null | undefined): string {
 		return "\u2014";
 	}
 }
+
+/** Format tokens as human-readable (1.2M / 340K / 890 / —). */
+export function fmtTokens(v: number | null | undefined): string {
+	if (v == null) return "\u2014";
+	if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`;
+	if (v >= 1_000) return `${Math.round(v / 1000)}K`;
+	return v.toLocaleString();
+}
+
+/** Format USD savings (always 4 decimals, null → em-dash). */
+export function fmtDollars(v: number | null | undefined): string {
+	if (v == null) return "\u2014";
+	return `$${v.toFixed(4)}`;
+}
+
+/**
+ * Format an ISO timestamp as relative time ("2m ago", "3h ago", "just now").
+ * Falls back to locale date for times >24h or unparseable input.
+ */
+export function fmtRelativeTime(
+	ts: string | number | null | undefined,
+): string {
+	if (!ts) return "\u2014";
+	let date: Date;
+	try {
+		date = new Date(ts);
+		if (isNaN(date.getTime())) return "\u2014";
+	} catch {
+		return "\u2014";
+	}
+	const diffMs = Date.now() - date.getTime();
+	if (diffMs < 0) return "just now";
+	const sec = Math.floor(diffMs / 1000);
+	if (sec < 60) return "just now";
+	const min = Math.floor(sec / 60);
+	if (min < 60) return `${min}m ago`;
+	const hrs = Math.floor(min / 60);
+	if (hrs < 24) return `${hrs}h ago`;
+	return date.toLocaleDateString();
+}