pi-mega-compact 0.11.2 → 0.11.3

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

@@ -1,8 +1,12 @@
 /**
- * dashboard-client/src/tabs/MaintenanceTab.tsx — Maintenance tab (S49B).
+ * dashboard-client/src/tabs/MaintenanceTab.tsx — Maintenance tab (v0.11.2 S49B).
  *
- * Schema health audit + DB stats + maintenance action triggers.
- * Polls schema-health every 10s and db-stats every 15s (stats are stable).
+ * 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";
@@ -12,82 +16,171 @@ import type {
 	SchemaHealthResponse,
 	MaintenanceAction,
 	MaintenanceActionResult,
-	TableStats,
-	DbFiles,
-	SchemaHealthRow,
 } from "@contracts";
 import { useApi } from "../hooks/useApi";
-import { fetchDbStats, fetchSchemaHealth, postMaintenanceAction } from "../api/client";
+import {
+	fetchDbStats,
+	fetchSchemaHealth,
+	postMaintenanceAction,
+} from "../api/client";
 
 // ---------------------------------------------------------------------------
-// DB Stats Card
+// Action config
 // ---------------------------------------------------------------------------
 
-function DbStatsCard({ data, loading, error }: {
-	data: DbStatsResponse | null;
-	loading: boolean;
-	error: Error | null;
-}) {
-	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 && (
-					<>
-						<FileSizes files={data.storage.files} pageSize={data.storage.pageSize} pageCount={data.storage.pageCount} freelistPages={data.storage.freelistPages} />
-						<TableCounts tables={data.tables} />
-					</>
-				)}
-			</div>
-		</div>
-	);
+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`;
 }
 
-function FileSizes({ files, pageSize, pageCount, freelistPages }: {
-	files: DbFiles;
+// ---------------------------------------------------------------------------
+// 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(files.dbBytes + files.walBytes + files.shmBytes)}</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>
+					<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 TableCounts({ tables }: { tables: TableStats[] }) {
-	const total = tables.reduce((sum, t) => sum + Math.max(0, t.rowCount), 0);
+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 ({total.toLocaleString()} total)</div>
+			<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>
+					<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>
+							<td className="num">
+								{t.rowCount >= 0 ? t.rowCount.toLocaleString() : "—"}
+							</td>
 						</tr>
 					))}
 				</tbody>
@@ -96,39 +189,30 @@ function TableCounts({ tables }: { tables: TableStats[] }) {
 	);
 }
 
-// ---------------------------------------------------------------------------
-// Schema Health Card
-// ---------------------------------------------------------------------------
-
-function SchemaHealthCard({ data, loading, error }: {
-	data: SchemaHealthResponse | null;
+function DbStatsCard({
+	data,
+	loading,
+	error,
+}: {
+	data: DbStatsResponse | 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-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 && (
 					<>
-						<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>
-						<ColumnAudit 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((fk, i) => <div key={i} className="text-warn text-mono">{fk}</div>)}
-							</div>
-						)}
+						<FileSizesCard
+							files={data.storage.files}
+							pageSize={data.storage.pageSize}
+							pageCount={data.storage.pageCount}
+							freelistPages={data.storage.freelistPages}
+						/>
+						<TableRowCountsCard tables={data.tables} />
 					</>
 				)}
 			</div>
@@ -136,14 +220,29 @@ function SchemaHealthCard({ data, loading, error }: {
 	);
 }
 
-function ColumnAudit({ columns }: { columns: SchemaHealthRow[] }) {
+// ---------------------------------------------------------------------------
+// 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>
+			<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>
+					<tr>
+						<th>Table</th>
+						<th>Column</th>
+						<th>Decl</th>
+						<th>Status</th>
+					</tr>
 				</thead>
 				<tbody>
 					{columns.map((c) => (
@@ -151,7 +250,9 @@ function ColumnAudit({ columns }: { columns: SchemaHealthRow[] }) {
 							<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>
+							<td className={c.present ? "text-ok" : "text-error"}>
+								{c.present ? "✓" : "MISSING"}
+							</td>
 						</tr>
 					))}
 				</tbody>
@@ -160,87 +261,138 @@ function ColumnAudit({ columns }: { columns: SchemaHealthRow[] }) {
 	);
 }
 
+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>
+	);
+}
+
 // ---------------------------------------------------------------------------
-// Action Card
+// Actions card
 // ---------------------------------------------------------------------------
 
-const ACTIONS: Array<{
-	key: string;
-	label: string;
-	desc: string;
-	dangerous: boolean;
-	confirm?: string;
-	daysOld?: boolean;
-}> = [
-	{ 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?" },
-];
-
-interface ActionResult extends MaintenanceActionResult {
-	timestamp: number;
-}
-
-function ActionsPanel() {
-	const [results, setResults] = useState<ActionResult[]>([]);
+function ActionsCard(): React.ReactElement {
+	const [results, setResults] = useState<MaintenanceActionResult[]>([]);
 	const [running, setRunning] = useState<string | null>(null);
 	const [days, setDays] = useState("30");
 
-	const run = useCallback(async (def: typeof ACTIONS[number], daysOverride?: string) => {
-		const payload: MaintenanceAction = (def.daysOld
-			? { action: "prune", daysOld: Number(daysOverride ?? days) }
-			: { action: def.key }) as MaintenanceAction;
+	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(payload);
-			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 as Error).message,
-				timestamp: Date.now(),
-			}, ...prev].slice(0, 20));
-		} finally {
-			setRunning(null);
-		}
-	}, [days]);
+			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((a) => {
-						const isRunning = running === a.key;
-						const lastResult = results.find((r) => r.operation === a.key);
+					{ACTIONS.map((def) => {
+						const isRunning = running === def.key;
+						const lastResult = results.find((r) => r.operation === def.key);
 						return (
-							<div key={a.key} className="action-item">
+							<div key={def.key} className="action-item">
 								<div className="action-info">
 									<div className="action-label">
-										{a.label}
-										{a.dangerous && <span className="badge badge-warn">DESTRUCTIVE</span>}
+										{def.label}
+										{def.dangerous && (
+											<span className="badge badge-warn">DESTRUCTIVE</span>
+										)}
 									</div>
-									<div className="action-desc">{a.desc}</div>
+									<div className="action-desc">{def.desc}</div>
 									{lastResult && (
-										<div className={`action-result ${lastResult.success ? "text-ok" : "text-error"}`}>
+										<div
+											className={`action-result ${lastResult.success ? "text-ok" : "text-error"}`}
+										>
 											{lastResult.summary}
 										</div>
 									)}
 								</div>
 								<div className="action-controls">
-									{a.daysOld && (
+									{def.daysOld && (
 										<input
 											type="number"
-											min="1"
-											max="365"
+											min={1}
+											max={365}
 											value={days}
 											onChange={(e) => setDays(e.target.value)}
 											className="days-input"
@@ -248,11 +400,11 @@ function ActionsPanel() {
 										/>
 									)}
 									<button
-										className={`btn ${a.dangerous ? "btn-danger" : "btn-primary"}`}
-										disabled={isRunning !== null}
+										className={`btn ${def.dangerous ? "btn-danger" : "btn-primary"}`}
+										disabled={running !== null}
 										onClick={() => {
-											if (a.confirm && !window.confirm(a.confirm)) return;
-											run(a);
+											if (def.confirm && !window.confirm(def.confirm)) return;
+											handleAction(def);
 										}}
 									>
 										{isRunning ? "Running…" : "Run"}
@@ -268,15 +420,24 @@ function ActionsPanel() {
 }
 
 // ---------------------------------------------------------------------------
-// Tab root
+// Main tab component
 // ---------------------------------------------------------------------------
 
 export default function MaintenanceTab(): React.ReactElement {
-	const { data: stats, loading: statsLoading, error: statsError } = useApi<DbStatsResponse>(
+	const {
+		data: dbStats,
+		loading: statsLoading,
+		error: statsError,
+	} = useApi<DbStatsResponse>(
 		useCallback(() => fetchDbStats(), []),
 		{ pollInterval: 15000 },
 	);
-	const { data: schema, loading: schemaLoading, error: schemaError } = useApi<SchemaHealthResponse>(
+
+	const {
+		data: schemaHealth,
+		loading: healthLoading,
+		error: healthError,
+	} = useApi<SchemaHealthResponse>(
 		useCallback(() => fetchSchemaHealth(), []),
 		{ pollInterval: 10000 },
 	);
@@ -284,10 +445,14 @@ export default function MaintenanceTab(): React.ReactElement {
 	return (
 		<div className="maintenance-tab">
 			<div className="card-grid">
-				<SchemaHealthCard data={schema} loading={schemaLoading} error={schemaError} />
-				<DbStatsCard data={stats} loading={statsLoading} error={statsError} />
+				<SchemaHealthCard
+					data={schemaHealth}
+					loading={healthLoading}
+					error={healthError}
+				/>
+				<DbStatsCard data={dbStats} loading={statsLoading} error={statsError} />
 			</div>
-			<ActionsPanel />
+			<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();
+}