pi-mega-compact 0.8.7 → 0.8.10

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

@@ -0,0 +1,7 @@
+/**
+ * dashboard-client/src/components/LoadingSpinner.tsx — loading state.
+ */
+
+export function LoadingSpinner(): React.ReactElement {
+	return <div className="loading-spinner">Loading…</div>;
+}

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

@@ -0,0 +1,24 @@
+import type React from "react";
+export interface MemoryStatusProps {
+	retained: number;
+	compressedKiB: number;
+	dedupPct: number;
+	deleted: number;
+}
+export function MemoryStatusCard({
+	retained,
+	compressedKiB,
+	dedupPct,
+	deleted,
+}: MemoryStatusProps): React.ReactElement {
+	return (
+		<div className="memory-card">
+			<h4>Memory Status</h4>
+			<div>
+				Retained regions: {retained} · Compressed-Original:{" "}
+				{compressedKiB.toFixed(1)} KiB · Dedup: {dedupPct}% · Permanently
+				deleted: {deleted}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,41 @@
+/**
+ * dashboard-client/src/components/ModelBadge.tsx — model + provider + rates.
+ *
+ * Shows the active model name, human-readable provider, and input/output
+ * token rates. Used in the Metrics tab header.
+ */
+
+import type React from "react";
+
+export interface ModelBadgeProps {
+	/** Model name/identifier. */
+	name: string;
+	/** Human-readable provider name. */
+	providerName: string;
+	/** Machine-readable provider identifier. */
+	provider: string;
+	/** Model input processing rate (tokens per second). */
+	inputRate: number;
+	/** Model output processing rate (tokens per second). */
+	outputRate: number;
+}
+
+export function ModelBadge({
+	name,
+	providerName,
+	provider,
+	inputRate,
+	outputRate,
+}: ModelBadgeProps): React.ReactElement {
+	return (
+		<div className="model-badge">
+			<span className="model-name">{name}</span>
+			<span className="model-provider">{providerName}</span>
+			<span className="model-provider-id">{provider}</span>
+			<div className="model-rates">
+				<span className="rate">in {inputRate} tok/s</span>
+				<span className="rate">out {outputRate} tok/s</span>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,160 @@
+/**
+ * dashboard-client/src/components/PerfChart.tsx — perf stat chart.
+ *
+ * The /api/perf endpoint returns rolling-window aggregates (not time-series),
+ * so this renders a stat-card "chart": p50/p95 latency bars, TPS, cache hit %,
+ * db recompute + disk write. Each metric shows a normalized bar + numeric.
+ */
+
+import type React from "react";
+import type { PerfResponse } from "@contracts";
+
+export interface PerfChartProps {
+	perf: PerfResponse;
+}
+
+function fmtMs(n: number): string {
+	return n >= 1000 ? `${(n / 1000).toFixed(1)}s` : `${n.toFixed(0)}ms`;
+}
+
+interface BarProps {
+	/** Current value. */
+	value: number;
+	/** Value that represents 100% bar fill (the "max" reference). */
+	max: number;
+	/** Color class. */
+	colorClass: string;
+}
+
+function Bar({ value, max, colorClass }: BarProps): React.ReactElement {
+	const pct = max > 0 ? Math.max(0, Math.min(100, (value / max) * 100)) : 0;
+	return (
+		<div className="perf-bar-track">
+			<div
+				className={`perf-bar-fill ${colorClass}`}
+				style={{ width: `${pct}%` }}
+			/>
+		</div>
+	);
+}
+
+export function PerfChart({ perf }: PerfChartProps): React.ReactElement {
+	// Reference maxes: p95 is the upper bound for latency bars; rates scale to a
+	// reasonable reference (tok/s) so bars are visually meaningful even with
+	// small samples. cache_hit_pct is already 0-100.
+	const latencyMax = Math.max(
+		perf.turn_latency_ms.p95,
+		perf.provider_latency_ms.p95,
+		1,
+	);
+	const tpsRef = Math.max(perf.tps.avg, 1);
+
+	return (
+		<div className="perf-chart">
+			<div className="perf-header">
+				<h3>Performance</h3>
+				<span className="perf-window">
+					{perf.windowMinutes}min window · {perf.sampleCount} samples
+				</span>
+			</div>
+			<div className="perf-grid">
+				<div className="perf-metric">
+					<span className="perf-label">Turn latency p50 / p95</span>
+					<span className="perf-value">
+						{fmtMs(perf.turn_latency_ms.p50)} /{" "}
+						{fmtMs(perf.turn_latency_ms.p95)}
+					</span>
+					<Bar
+						value={perf.turn_latency_ms.p95}
+						max={latencyMax}
+						colorClass="perf-blue"
+					/>
+				</div>
+				<div className="perf-metric">
+					<span className="perf-label">Provider latency p50 / p95</span>
+					<span className="perf-value">
+						{fmtMs(perf.provider_latency_ms.p50)} /{" "}
+						{fmtMs(perf.provider_latency_ms.p95)}
+					</span>
+					<Bar
+						value={perf.provider_latency_ms.p95}
+						max={latencyMax}
+						colorClass="perf-purple"
+					/>
+				</div>
+				<div className="perf-metric">
+					<span className="perf-label">Tokens/sec (avg)</span>
+					<span className="perf-value">{perf.tps.avg.toFixed(1)}</span>
+					<Bar value={perf.tps.avg} max={tpsRef} colorClass="perf-green" />
+				</div>
+				<div className="perf-metric">
+					<span className="perf-label">Cache hit (avg / latest)</span>
+					<span className="perf-value">
+						{perf.cache_hit_pct.avg.toFixed(1)}% /{" "}
+						{perf.cache_hit_pct.latest.toFixed(1)}%
+					</span>
+					<Bar
+						value={perf.cache_hit_pct.avg}
+						max={100}
+						colorClass="perf-green"
+					/>
+				</div>
+				<div className="perf-metric">
+					<span className="perf-label">DB recompute p95</span>
+					<span className="perf-value">{fmtMs(perf.db_recompute_ms.p95)}</span>
+					<Bar
+						value={perf.db_recompute_ms.p95}
+						max={latencyMax}
+						colorClass="perf-yellow"
+					/>
+				</div>
+				<div className="perf-metric">
+					<span className="perf-label">Disk write p95</span>
+					<span className="perf-value">{fmtMs(perf.disk_write_ms.p95)}</span>
+					<Bar
+						value={perf.disk_write_ms.p95}
+						max={latencyMax}
+						colorClass="perf-yellow"
+					/>
+				</div>
+			</div>
+			<div className="perf-resources">
+				<div className="perf-metric">
+					<span className="perf-label">RSS</span>
+					<span className="perf-value">{perf.rss_mb.latest.toFixed(0)} MB</span>
+				</div>
+				<div className="perf-metric">
+					<span className="perf-label">Heap</span>
+					<span className="perf-value">
+						{perf.heap_mb.latest.toFixed(0)} MB
+					</span>
+				</div>
+				<div className="perf-metric">
+					<span className="perf-label">CPU user</span>
+					<span className="perf-value">
+						{(perf.cpu_user_ms.latest / 1000).toFixed(1)}s
+					</span>
+				</div>
+				<div className="perf-metric">
+					<span className="perf-label">CPU sys</span>
+					<span className="perf-value">
+						{(perf.cpu_sys_ms.latest / 1000).toFixed(1)}s
+					</span>
+				</div>
+			</div>
+			{perf.diag && (
+				<div className="perf-diag">
+					<span className="perf-label">
+						Fast-gate fires: {perf.diag.ctxFastGate}
+					</span>
+					<span className="perf-label">
+						Live trim fires: {perf.diag.liveTrimFires}
+					</span>
+					<span className="perf-label">
+						Live trim replays: {perf.diag.liveTrimReplays}
+					</span>
+				</div>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,126 @@
+/**
+ * dashboard-client/src/components/RepoDetailModal.tsx — repo drill-down.
+ *
+ * Full detail from an /api/index row: token breakdown (kept/dropped), model
+ * info, context window, dedup rate, reasoning flag. Click backdrop to close.
+ */
+
+import type React from "react";
+import { useEffect } from "react";
+import type { IndexesIndexRow } from "@contracts";
+
+export interface RepoDetailModalProps {
+	repo: IndexesIndexRow;
+	onClose: () => void;
+}
+
+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);
+}
+
+function formatTs(ts: number | null): string {
+	if (ts === null || ts === undefined) return "never";
+	try {
+		return new Date(ts).toLocaleString();
+	} catch {
+		return String(ts);
+	}
+}
+
+export function RepoDetailModal({
+	repo,
+	onClose,
+}: RepoDetailModalProps): React.ReactElement {
+	// Close on Escape key.
+	useEffect(() => {
+		const handler = (e: KeyboardEvent): void => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [onClose]);
+
+	return (
+		<div
+			className="modal-backdrop"
+			onClick={onClose}
+			role="dialog"
+			aria-modal="true"
+		>
+			<div className="modal-card" onClick={(e) => e.stopPropagation()}>
+				<header className="modal-header">
+					<h2>{repo.displayName}</h2>
+					<button
+						type="button"
+						className="modal-close"
+						onClick={onClose}
+						aria-label="Close"
+					>
+						×
+					</button>
+				</header>
+				<p className="modal-path">{repo.repoRoot}</p>
+				<div className="modal-grid">
+					<div className="modal-stat">
+						<span className="modal-label">Checkpoints</span>
+						<span className="modal-value">
+							{repo.checkpointCount.toLocaleString()}
+						</span>
+					</div>
+					<div className="modal-stat">
+						<span className="modal-label">Sessions</span>
+						<span className="modal-value">
+							{repo.sessions.toLocaleString()}
+						</span>
+					</div>
+					<div className="modal-stat modal-highlight">
+						<span className="modal-label">Tokens saved</span>
+						<span className="modal-value">{fmt(repo.tokensSaved)}</span>
+					</div>
+					<div className="modal-stat">
+						<span className="modal-label">Tokens kept</span>
+						<span className="modal-value">{fmt(repo.tokensKept)}</span>
+					</div>
+					<div className="modal-stat">
+						<span className="modal-label">Tokens dropped</span>
+						<span className="modal-value">{fmt(repo.tokensDropped)}</span>
+					</div>
+					<div className="modal-stat">
+						<span className="modal-label">Dedup rate</span>
+						<span className="modal-value">—</span>
+					</div>
+				</div>
+				<h3>Model</h3>
+				<dl className="modal-dl">
+					<dt>Provider</dt>
+					<dd>{repo.providerName ?? "—"}</dd>
+					<dt>Model</dt>
+					<dd>{repo.modelName ?? "—"}</dd>
+					<dt>Input rate</dt>
+					<dd>{repo.inputRate !== null ? `${repo.inputRate} tok/s` : "—"}</dd>
+					<dt>Output rate</dt>
+					<dd>{repo.outputRate !== null ? `${repo.outputRate} tok/s` : "—"}</dd>
+					<dt>Context window</dt>
+					<dd>{repo.contextWindow !== null ? fmt(repo.contextWindow) : "—"}</dd>
+					<dt>Max tokens</dt>
+					<dd>{repo.maxTokens !== null ? fmt(repo.maxTokens) : "—"}</dd>
+					<dt>Reasoning</dt>
+					<dd>
+						{repo.reasoning === null ? "—" : repo.reasoning ? "on" : "off"}
+					</dd>
+				</dl>
+				<h3>Activity</h3>
+				<dl className="modal-dl">
+					<dt>Last compacted</dt>
+					<dd>{formatTs(repo.lastCompactedAt)}</dd>
+					<dt>Last seen</dt>
+					<dd>{formatTs(repo.lastSeen)}</dd>
+					<dt>Compressed bytes</dt>
+					<dd>{fmt(repo.compressedOriginalBytes)}</dd>
+				</dl>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,150 @@
+/**
+ * dashboard-client/src/components/RepoTable.tsx — sortable, searchable repo table.
+ *
+ * Columns: name, model, checkpoints, tokens saved, last compacted, sessions.
+ * Client-side sort (click header to toggle asc/desc). Search by displayName
+ * (case-insensitive substring). Default sort: lastSeen DESC.
+ */
+
+import type React from "react";
+import { useState, useMemo } from "react";
+import type { IndexesIndexRow } from "@contracts";
+
+export interface RepoTableProps {
+	repos: IndexesIndexRow[];
+	/** Called when a row is clicked — opens the detail modal. */
+	onSelect: (repo: IndexesIndexRow) => void;
+}
+
+type SortKey =
+	| "displayName"
+	| "modelName"
+	| "checkpointCount"
+	| "tokensSaved"
+	| "lastCompactedAt"
+	| "sessions";
+
+type SortDir = "asc" | "desc";
+
+const COLUMNS: Array<{ key: SortKey; label: string }> = [
+	{ key: "displayName", label: "Name" },
+	{ key: "modelName", label: "Model" },
+	{ key: "checkpointCount", label: "Checkpoints" },
+	{ key: "tokensSaved", label: "Saved" },
+	{ key: "lastCompactedAt", label: "Last compacted" },
+	{ key: "sessions", label: "Sessions" },
+];
+
+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);
+}
+
+function formatTs(ts: number | null): string {
+	if (ts === null || ts === undefined) return "never";
+	try {
+		return new Date(ts).toLocaleDateString();
+	} catch {
+		return String(ts);
+	}
+}
+
+export function RepoTable({
+	repos,
+	onSelect,
+}: RepoTableProps): React.ReactElement {
+	const [search, setSearch] = useState("");
+	const [sortKey, setSortKey] = useState<SortKey>("lastCompactedAt");
+	const [sortDir, setSortDir] = useState<SortDir>("desc");
+
+	const filtered = useMemo(() => {
+		const q = search.trim().toLowerCase();
+		const list = q
+			? repos.filter((r) => r.displayName.toLowerCase().includes(q))
+			: repos.slice();
+		list.sort((a, b) => {
+			const av = a[sortKey];
+			const bv = b[sortKey];
+			// nulls last on desc, first on asc (consistent UX)
+			const aNull = av === null || av === undefined;
+			const bNull = bv === null || bv === undefined;
+			if (aNull && bNull) return 0;
+			if (aNull) return sortDir === "desc" ? 1 : -1;
+			if (bNull) return sortDir === "desc" ? -1 : 1;
+			const cmp =
+				typeof av === "number" && typeof bv === "number"
+					? av - bv
+					: String(av).localeCompare(String(bv));
+			return sortDir === "desc" ? -cmp : cmp;
+		});
+		return list;
+	}, [repos, search, sortKey, sortDir]);
+
+	const handleSort = (key: SortKey): void => {
+		if (sortKey === key) {
+			setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+		} else {
+			setSortKey(key);
+			setSortDir(
+				key === "lastCompactedAt" || key === "tokensSaved" ? "desc" : "asc",
+			);
+		}
+	};
+
+	return (
+		<div className="repo-table-wrap">
+			<input
+				type="search"
+				className="repo-search"
+				placeholder="Search repos…"
+				value={search}
+				onChange={(e) => setSearch(e.target.value)}
+				aria-label="Search repos"
+			/>
+			<table className="repo-table">
+				<thead>
+					<tr>
+						{COLUMNS.map((col) => (
+							<th key={col.key}>
+								<button
+									type="button"
+									className={`sort-header ${sortKey === col.key ? `active-${sortDir}` : ""}`}
+									onClick={() => handleSort(col.key)}
+								>
+									{col.label}
+									{sortKey === col.key && (
+										<span className="sort-arrow">
+											{sortDir === "asc" ? " ▲" : " ▼"}
+										</span>
+									)}
+								</button>
+							</th>
+						))}
+					</tr>
+				</thead>
+				<tbody>
+					{filtered.length === 0 && (
+						<tr>
+							<td colSpan={COLUMNS.length} className="repo-empty">
+								{repos.length === 0
+									? "No repos yet."
+									: "No repos match your search."}
+							</td>
+						</tr>
+					)}
+					{filtered.map((repo) => (
+						<tr key={repo.stateDir} onClick={() => onSelect(repo)}>
+							<td className="repo-name">{repo.displayName}</td>
+							<td className="repo-model">{repo.modelName ?? "—"}</td>
+							<td>{repo.checkpointCount.toLocaleString()}</td>
+							<td>{fmt(repo.tokensSaved)}</td>
+							<td>{formatTs(repo.lastCompactedAt)}</td>
+							<td>{repo.sessions.toLocaleString()}</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}

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

@@ -0,0 +1,65 @@
+/**
+ * dashboard-client/src/components/SessionInfo.tsx — session state + store metrics.
+ *
+ * State badge, checkpoint count, tokens saved, dedup hit rate.
+ */
+
+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;
+}
+
+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({
+	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>
+		</div>
+	);
+}

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

@@ -0,0 +1,52 @@
+/**
+ * dashboard-client/src/components/SummaryTiles.tsx — aggregate header tiles.
+ *
+ * Total repos, active repos (24h), total checkpoints, total tokens saved.
+ */
+
+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;
+}
+
+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 SummaryTiles({
+	totalRepos,
+	activeRepos,
+	totalCheckpoints,
+	totalTokensSaved,
+}: SummaryTilesProps): React.ReactElement {
+	return (
+		<div className="summary-tiles">
+			<div className="tile">
+				<span className="tile-label">Total repos</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-value">{totalCheckpoints.toLocaleString()}</span>
+			</div>
+			<div className="tile tile-highlight">
+				<span className="tile-label">Tokens saved</span>
+				<span className="tile-value">{fmt(totalTokensSaved)}</span>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,34 @@
+/**
+ * dashboard-client/src/components/TabBar.tsx — tab navigation.
+ */
+
+import type { TabId } from "../App";
+
+export interface TabBarProps {
+	tabs: Array<{ id: TabId; label: string }>;
+	active: TabId;
+	onTabChange: (id: TabId) => void;
+}
+
+export function TabBar({
+	tabs,
+	active,
+	onTabChange,
+}: TabBarProps): React.ReactElement {
+	return (
+		<nav className="tab-bar" role="tablist">
+			{tabs.map((tab) => (
+				<button
+					key={tab.id}
+					type="button"
+					role="tab"
+					aria-selected={active === tab.id}
+					className={active === tab.id ? "active" : ""}
+					onClick={() => onTabChange(tab.id)}
+				>
+					{tab.label}
+				</button>
+			))}
+		</nav>
+	);
+}