pi-mega-compact 0.15.1 → 0.15.3

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

@@ -124,7 +124,9 @@ export default function OverviewTab({
 	// which widget's modal is open (null = none)
 	const [openWidget, setOpenWidget] = useState<string | null>(null);
 	// perf samples fetched for the opened perf-backed widget
-	const [perfData, setPerfData] = useState<Array<{ ts: number; value: number }>>([]);
+	const [perfData, setPerfData] = useState<
+		Array<{ ts: number; value: number }>
+	>([]);
 	const [perfLoading, setPerfLoading] = useState(false);
 	const [perfError, setPerfError] = useState<Error | null>(null);
 
@@ -148,9 +150,7 @@ export default function OverviewTab({
 			})
 			.catch((err) => {
 				if (!cancelled) {
-					setPerfError(
-						err instanceof Error ? err : new Error(String(err)),
-					);
+					setPerfError(err instanceof Error ? err : new Error(String(err)));
 				}
 			})
 			.finally(() => {
@@ -174,10 +174,38 @@ export default function OverviewTab({
 		[moveCard],
 	);
 
+	// Per-model cost breakdown for the Model & Cost drill-down, derived from
+	// snapshot data already in the component (no snapshot.byModel exists).
+	// MUST be called before the early returns below — Rules of Hooks: hooks
+	// cannot be after a conditional return (would cause React error #310
+	// "Rendered more hooks than during the previous render" when the snapshot
+	// transitions from null → loaded). Guard the null case inline.
+	const modelBarData = useMemo(
+		() => {
+			const ds = snapshot as RuntimeSnapshot | null;
+			const compression = ds?.compression;
+			const model = ds?.model;
+			return [
+				{ label: "Tokens freed", value: compression?.repo.tokensFreed ?? 0 },
+				{ label: "Input rate", value: model ? model.inputRate : 0 },
+				{ label: "Output rate", value: model ? model.outputRate : 0 },
+			];
+		},
+		[snapshot],
+	);
+
 	if (loading && !snapshot)
 		return <div className="tab-stub">Loading snapshot…</div>;
 	if (error && !snapshot)
-		return <div className="tab-stub">Error: {error.message}</div>;
+		return (
+			<div className="tab-stub">
+				<p>Error loading snapshot: {error.message}</p>
+				<p className="text-xs text-muted-foreground mt-2">
+					Auto-retried with backoff and will re-poll every 5s — no action
+					needed.
+				</p>
+			</div>
+		);
 	if (!snapshot) return <div className="tab-stub">No snapshot data.</div>;
 
 	// Cast to RuntimeSnapshot for tierPct (runtime-only field).
@@ -192,17 +220,6 @@ export default function OverviewTab({
 	const repo = d.repo;
 	const model = d.model;
 
-	// Per-model cost breakdown for the Model & Cost drill-down, derived from
-	// snapshot data already in the component (no snapshot.byModel exists).
-	const modelBarData = useMemo(
-		() => [
-			{ label: "Tokens freed", value: compression.repo.tokensFreed },
-			{ label: "Input rate", value: model ? model.inputRate : 0 },
-			{ label: "Output rate", value: model ? model.outputRate : 0 },
-		],
-		[compression, model],
-	);
-
 	// Renders a single card (wrapped in SortableCard) by its CardId. Cards
 	// with a drill-down get an onClick; the rest are plain sortable items.
 	const renderCard = (cardId: CardId): React.ReactNode => {
@@ -389,15 +406,15 @@ export default function OverviewTab({
 				onClose={() => setOpenWidget(null)}
 			>
 				{perfLoading ? (
-					<p className="py-8 text-center text-sm text-muted-foreground">Loading…</p>
+					<p className="py-8 text-center text-sm text-muted-foreground">
+						Loading…
+					</p>
 				) : perfError ? (
-					<p className="py-8 text-center text-sm text-red-400">{perfError.message}</p>
+					<p className="py-8 text-center text-sm text-red-400">
+						{perfError.message}
+					</p>
 				) : (
-					<PerfLineChart
-						data={perfData}
-						label="Cache hit %"
-						color="#58a6ff"
-					/>
+					<PerfLineChart data={perfData} label="Cache hit %" color="#58a6ff" />
 				)}
 			</WidgetDetailModal>
 
@@ -407,9 +424,13 @@ export default function OverviewTab({
 				onClose={() => setOpenWidget(null)}
 			>
 				{perfLoading ? (
-					<p className="py-8 text-center text-sm text-muted-foreground">Loading…</p>
+					<p className="py-8 text-center text-sm text-muted-foreground">
+						Loading…
+					</p>
 				) : perfError ? (
-					<p className="py-8 text-center text-sm text-red-400">{perfError.message}</p>
+					<p className="py-8 text-center text-sm text-red-400">
+						{perfError.message}
+					</p>
 				) : (
 					<PerfLineChart
 						data={perfData}
@@ -425,9 +446,13 @@ export default function OverviewTab({
 				onClose={() => setOpenWidget(null)}
 			>
 				{perfLoading ? (
-					<p className="py-8 text-center text-sm text-muted-foreground">Loading…</p>
+					<p className="py-8 text-center text-sm text-muted-foreground">
+						Loading…
+					</p>
 				) : perfError ? (
-					<p className="py-8 text-center text-sm text-red-400">{perfError.message}</p>
+					<p className="py-8 text-center text-sm text-red-400">
+						{perfError.message}
+					</p>
 				) : (
 					<PerfLineChart
 						data={perfData}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-mega-compact",
-  "version": "0.15.1",
+  "version": "0.15.3",
   "description": "Layered, local, vector-backed context compressor for pi — supersede/collapse/cluster compaction with deduped inline recall.",
   "type": "module",
   "license": "BSD-3-Clause",

package/src/store/sqlite/global-sessions.ts

@@ -18,56 +18,56 @@ import { openIndexStore, getIndexDir } from "./global-index.js";
 
 /** A live active session row (joined heartbeat + latest token sample). */
 export interface ActiveSessionRow {
-  pid: number;
-  sessionId: string;
-  repoRoot: string | null;
-  stateDir: string | null;
-  ctxWindow: number;
-  lastSeen: number;
-  tokens: number | null;
-  percent: number | null;
+	pid: number;
+	sessionId: string;
+	repoRoot: string | null;
+	stateDir: string | null;
+	ctxWindow: number;
+	lastSeen: number;
+	tokens: number | null;
+	percent: number | null;
 }
 
 /** A single time-series data point for a session. */
 export interface TokenSamplePoint {
-  ts: number;
-  tokens: number;
-  percent: number;
+	ts: number;
+	tokens: number;
+	percent: number;
 }
 
 /** A recharts-ready per-session series with a stable color. */
 export interface SessionSeries {
-  sessionId: string;
-  label: string;
-  color: string;
-  data: TokenSamplePoint[];
+	sessionId: string;
+	label: string;
+	color: string;
+	data: TokenSamplePoint[];
 }
 
 /** Timeseries response shape (recharts-ready). */
 export interface SessionTimeseriesResult {
-  series: SessionSeries[];
-  totals: { ts: number; tokens: number }[];
+	series: SessionSeries[];
+	totals: { ts: number; tokens: number }[];
 }
 
 /** Stable color palette for per-session series (hash-based, no randomness). */
 const SESSION_COLORS = [
-  "#60a5fa", // blue-400
-  "#34d399", // emerald-400
-  "#fbbf24", // amber-400
-  "#f87171", // red-400
-  "#a78bfa", // violet-400
-  "#f472b6", // pink-400
-  "#22d3ee", // cyan-400
-  "#a3e635", // lime-400
+	"#60a5fa", // blue-400
+	"#34d399", // emerald-400
+	"#fbbf24", // amber-400
+	"#f87171", // red-400
+	"#a78bfa", // violet-400
+	"#f472b6", // pink-400
+	"#22d3ee", // cyan-400
+	"#a3e635", // lime-400
 ];
 
 /** Hash a sessionId to a stable color index. */
 function sessionColor(sessionId: string): string {
-  let h = 0;
-  for (let i = 0; i < sessionId.length; i++) {
-    h = (h * 31 + sessionId.charCodeAt(i)) | 0;
-  }
-  return SESSION_COLORS[Math.abs(h) % SESSION_COLORS.length];
+	let h = 0;
+	for (let i = 0; i < sessionId.length; i++) {
+		h = (h * 31 + sessionId.charCodeAt(i)) | 0;
+	}
+	return SESSION_COLORS[Math.abs(h) % SESSION_COLORS.length];
 }
 
 /**
@@ -76,31 +76,42 @@ function sessionColor(sessionId: string): string {
  * their own row. Non-fatal on conflict (INSERT ... ON CONFLICT DO UPDATE).
  */
 export function recordSessionHeartbeat(
-  pid: number,
-  sessionId: string,
-  repoRoot: string,
-  stateDir: string,
-  ctxWindow: number,
-  indexDir: string = getIndexDir(),
+	pid: number,
+	sessionId: string,
+	repoRoot: string,
+	stateDir: string,
+	ctxWindow: number,
+	indexDir: string = getIndexDir(),
 ): void {
-  const db = openIndexStore(indexDir);
-  const now = Date.now();
-  db.prepare(
-    `INSERT INTO session_heartbeats (pid, session_id, repo_root, state_dir, ctx_window, last_seen)
+	const db = openIndexStore(indexDir);
+	const now = Date.now();
+	db.prepare(
+		`INSERT INTO session_heartbeats (pid, session_id, repo_root, state_dir, ctx_window, last_seen)
      VALUES (@pid, @session_id, @repo_root, @state_dir, @ctx_window, @last_seen)
      ON CONFLICT(pid, session_id) DO UPDATE SET
        repo_root = excluded.repo_root,
        state_dir = excluded.state_dir,
        ctx_window = excluded.ctx_window,
        last_seen = excluded.last_seen`,
-  ).run({
-    pid,
-    session_id: sessionId,
-    repo_root: repoRoot,
-    state_dir: stateDir,
-    ctx_window: ctxWindow,
-    last_seen: now,
-  });
+	).run({
+		pid,
+		session_id: sessionId,
+		repo_root: repoRoot,
+		state_dir: stateDir,
+		ctx_window: ctxWindow,
+		last_seen: now,
+	});
+	// Enforce the invariant: one heartbeat row per live pi PROCESS (pid).
+	// A pi process owns exactly one session_id at a time — when it restarts /
+	// resumes into a new session_id, the OLD (pid, old_session_id) row is stale
+	// and must be deleted, otherwise it lingers (its last_seen was updated by
+	// the prior heartbeat, so the 30-min prune won't catch it) and surfaces as
+	// a phantom 0% "pi-<repo>" gauge in the dashboard's "Context per Session"
+	// card (null tokens, dead session_id that no longer matches the launcher).
+	// Parameterized (PREVENT-002).
+	db.prepare(
+		`DELETE FROM session_heartbeats WHERE pid = @pid AND session_id != @session_id`,
+	).run({ pid, session_id: sessionId });
 }
 
 /**
@@ -109,54 +120,56 @@ export function recordSessionHeartbeat(
  * callers without an events.log (e.g. tests) can omit it.
  */
 export function appendTokenSample(
-  sessionId: string,
-  repoRoot: string,
-  tokens: number,
-  percent: number,
-  ctxWindow: number,
-  eventsLogPath: string | null,
-  indexDir: string = getIndexDir(),
+	sessionId: string,
+	repoRoot: string,
+	tokens: number,
+	percent: number,
+	ctxWindow: number,
+	eventsLogPath: string | null,
+	indexDir: string = getIndexDir(),
 ): void {
-  const db = openIndexStore(indexDir);
-  const now = Date.now();
-  db.prepare(
-    `INSERT INTO token_samples (session_id, repo_root, tokens, percent, ctx_window, ts)
+	const db = openIndexStore(indexDir);
+	const now = Date.now();
+	db.prepare(
+		`INSERT INTO token_samples (session_id, repo_root, tokens, percent, ctx_window, ts)
      VALUES (@session_id, @repo_root, @tokens, @percent, @ctx_window, @ts)`,
-  ).run({
-    session_id: sessionId,
-    repo_root: repoRoot,
-    tokens,
-    percent,
-    ctx_window: ctxWindow,
-    ts: now,
-  });
-  // Step 5: also append a session_sample JSON line to events.log so the
-  // existing /api/events SSE tail streams it for free (real-time chart push).
-  // Mirrors the DashboardEmitter events.log append pattern in
-  // extensions/mega-dashboard.ts:{ event(type, data) }: a JSON object with
-  // `ts` (ISO 8601 string), `type`, and the event-specific payload. The ISO
-  // timestamp matches the shape of every other SSE variant (SseSessionSample
-  // contract; every SSE variant's `ts` is a string); a numeric ms `ts` would
-  // violate the contract union's "every SSE variant has a ts field of type
-  // string" invariant and break DashboardEmitter consumers.
-  if (eventsLogPath) {
-    try {
-      const dir = eventsLogPath.includes("/") ? eventsLogPath.slice(0, eventsLogPath.lastIndexOf("/")) : ".";
-      if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
-      appendFileSync(
-        eventsLogPath,
-        JSON.stringify({
-          ts: new Date(now).toISOString(),
-          type: "session_sample",
-          sessionId,
-          tokens,
-          percent,
-        }) + "\n",
-      );
-    } catch {
-      /* non-fatal: SSE push is best-effort */
-    }
-  }
+	).run({
+		session_id: sessionId,
+		repo_root: repoRoot,
+		tokens,
+		percent,
+		ctx_window: ctxWindow,
+		ts: now,
+	});
+	// Step 5: also append a session_sample JSON line to events.log so the
+	// existing /api/events SSE tail streams it for free (real-time chart push).
+	// Mirrors the DashboardEmitter events.log append pattern in
+	// extensions/mega-dashboard.ts:{ event(type, data) }: a JSON object with
+	// `ts` (ISO 8601 string), `type`, and the event-specific payload. The ISO
+	// timestamp matches the shape of every other SSE variant (SseSessionSample
+	// contract; every SSE variant's `ts` is a string); a numeric ms `ts` would
+	// violate the contract union's "every SSE variant has a ts field of type
+	// string" invariant and break DashboardEmitter consumers.
+	if (eventsLogPath) {
+		try {
+			const dir = eventsLogPath.includes("/")
+				? eventsLogPath.slice(0, eventsLogPath.lastIndexOf("/"))
+				: ".";
+			if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+			appendFileSync(
+				eventsLogPath,
+				JSON.stringify({
+					ts: new Date(now).toISOString(),
+					type: "session_sample",
+					sessionId,
+					tokens,
+					percent,
+				}) + "\n",
+			);
+		} catch {
+			/* non-fatal: SSE push is best-effort */
+		}
+	}
 }
 
 /**
@@ -164,15 +177,15 @@ export function appendTokenSample(
  * Default 30-min retention. Called by /api/sessions.
  */
 export function pruneStaleSessions(
-  maxAgeMs: number = 1_800_000,
-  indexDir: string = getIndexDir(),
+	maxAgeMs: number = 1_800_000,
+	indexDir: string = getIndexDir(),
 ): number {
-  const db = openIndexStore(indexDir);
-  const cutoff = Date.now() - maxAgeMs;
-  const result = db.prepare(
-    "DELETE FROM session_heartbeats WHERE last_seen < @cutoff",
-  ).run({ cutoff });
-  return Number(result.changes);
+	const db = openIndexStore(indexDir);
+	const cutoff = Date.now() - maxAgeMs;
+	const result = db
+		.prepare("DELETE FROM session_heartbeats WHERE last_seen < @cutoff")
+		.run({ cutoff });
+	return Number(result.changes);
 }
 
 /**
@@ -180,15 +193,15 @@ export function pruneStaleSessions(
  * Called by /api/sessions/timeseries.
  */
 export function pruneTokenSamples(
-  maxAgeMs: number = 1_800_000,
-  indexDir: string = getIndexDir(),
+	maxAgeMs: number = 1_800_000,
+	indexDir: string = getIndexDir(),
 ): number {
-  const db = openIndexStore(indexDir);
-  const cutoff = Date.now() - maxAgeMs;
-  const result = db.prepare(
-    "DELETE FROM token_samples WHERE ts < @cutoff",
-  ).run({ cutoff });
-  return Number(result.changes);
+	const db = openIndexStore(indexDir);
+	const cutoff = Date.now() - maxAgeMs;
+	const result = db
+		.prepare("DELETE FROM token_samples WHERE ts < @cutoff")
+		.run({ cutoff });
+	return Number(result.changes);
 }
 
 /**
@@ -197,11 +210,12 @@ export function pruneTokenSamples(
  * via a correlated subquery. Returns rows sorted by last_seen descending.
  */
 export function readActiveSessions(
-  indexDir: string = getIndexDir(),
+	indexDir: string = getIndexDir(),
 ): ActiveSessionRow[] {
-  const db = openIndexStore(indexDir);
-  const rows = db.prepare(
-    `SELECT h.pid, h.session_id, h.repo_root, h.state_dir, h.ctx_window, h.last_seen,
+	const db = openIndexStore(indexDir);
+	const rows = db
+		.prepare(
+			`SELECT h.pid, h.session_id, h.repo_root, h.state_dir, h.ctx_window, h.last_seen,
             s.tokens, s.percent
      FROM session_heartbeats h
      LEFT JOIN token_samples s ON s.id = (
@@ -210,26 +224,40 @@ export function readActiveSessions(
        ORDER BY t.ts DESC LIMIT 1
      )
      ORDER BY h.last_seen DESC`,
-  ).all() as Array<{
-    pid: number;
-    session_id: string;
-    repo_root: string | null;
-    state_dir: string | null;
-    ctx_window: number;
-    last_seen: number;
-    tokens: number | null;
-    percent: number | null;
-  }>;
-  return rows.map((r) => ({
-    pid: r.pid,
-    sessionId: r.session_id,
-    repoRoot: r.repo_root,
-    stateDir: r.state_dir,
-    ctxWindow: r.ctx_window ?? 0,
-    lastSeen: r.last_seen,
-    tokens: r.tokens,
-    percent: r.percent,
-  }));
+		)
+		.all() as Array<{
+		pid: number;
+		session_id: string;
+		repo_root: string | null;
+		state_dir: string | null;
+		ctx_window: number;
+		last_seen: number;
+		tokens: number | null;
+		percent: number | null;
+	}>;
+	// Dedup BY PID (one row per live pi process, keeping the most-recently-seen
+	// row). The schema PK is (pid, session_id), so a process that restarted /
+	// resumed into a new session_id leaves a stale (pid, old_session_id) row
+	// until recordSessionHeartbeat's cleanup fires or the 30-min prune runs.
+	// Without this dedup those stale rows surface as phantom 0% gauges in the
+	// "Context per Session" card (null tokens, dead session_id). Rows are
+	// already ordered by last_seen DESC, so the first row seen for a pid wins.
+	const seenPid = new Set<number>();
+	const deduped = rows.filter((r) => {
+		if (seenPid.has(r.pid)) return false;
+		seenPid.add(r.pid);
+		return true;
+	});
+	return deduped.map((r) => ({
+		pid: r.pid,
+		sessionId: r.session_id,
+		repoRoot: r.repo_root,
+		stateDir: r.state_dir,
+		ctxWindow: r.ctx_window ?? 0,
+		lastSeen: r.last_seen,
+		tokens: r.tokens,
+		percent: r.percent,
+	}));
 }
 
 /**
@@ -238,41 +266,43 @@ export function readActiveSessions(
  * [{ts, tokens}] (sum of all sessions at each timestamp).
  */
 export function readSessionTimeseries(
-  sinceMs: number,
-  indexDir: string = getIndexDir(),
+	sinceMs: number,
+	indexDir: string = getIndexDir(),
 ): SessionTimeseriesResult {
-  const db = openIndexStore(indexDir);
-  const rows = db.prepare(
-    `SELECT session_id, tokens, percent, ts FROM token_samples WHERE ts >= @since ORDER BY ts ASC`,
-  ).all({ since: sinceMs }) as Array<{
-    session_id: string;
-    tokens: number;
-    percent: number;
-    ts: number;
-  }>;
-  // Group by session_id → series; + accumulate totals per timestamp.
-  const seriesMap = new Map<string, TokenSamplePoint[]>();
-  const totalsMap = new Map<number, number>();
-  for (const r of rows) {
-    let pts = seriesMap.get(r.session_id);
-    if (!pts) {
-      pts = [];
-      seriesMap.set(r.session_id, pts);
-    }
-    pts.push({ ts: r.ts, tokens: r.tokens, percent: r.percent });
-    totalsMap.set(r.ts, (totalsMap.get(r.ts) ?? 0) + r.tokens);
-  }
-  const series: SessionSeries[] = [];
-  for (const [sessionId, data] of seriesMap) {
-    const label = sessionId.length > 12 ? sessionId.slice(0, 12) : sessionId;
-    series.push({ sessionId, label, color: sessionColor(sessionId), data });
-  }
-  // Sort series by first-timestamp for stable legend order.
-  series.sort((a, b) => (a.data[0]?.ts ?? 0) - (b.data[0]?.ts ?? 0));
-  const totals = Array.from(totalsMap.entries())
-    .sort((a, b) => a[0] - b[0])
-    .map(([ts, tokens]) => ({ ts, tokens }));
-  return { series, totals };
+	const db = openIndexStore(indexDir);
+	const rows = db
+		.prepare(
+			`SELECT session_id, tokens, percent, ts FROM token_samples WHERE ts >= @since ORDER BY ts ASC`,
+		)
+		.all({ since: sinceMs }) as Array<{
+		session_id: string;
+		tokens: number;
+		percent: number;
+		ts: number;
+	}>;
+	// Group by session_id → series; + accumulate totals per timestamp.
+	const seriesMap = new Map<string, TokenSamplePoint[]>();
+	const totalsMap = new Map<number, number>();
+	for (const r of rows) {
+		let pts = seriesMap.get(r.session_id);
+		if (!pts) {
+			pts = [];
+			seriesMap.set(r.session_id, pts);
+		}
+		pts.push({ ts: r.ts, tokens: r.tokens, percent: r.percent });
+		totalsMap.set(r.ts, (totalsMap.get(r.ts) ?? 0) + r.tokens);
+	}
+	const series: SessionSeries[] = [];
+	for (const [sessionId, data] of seriesMap) {
+		const label = sessionId.length > 12 ? sessionId.slice(0, 12) : sessionId;
+		series.push({ sessionId, label, color: sessionColor(sessionId), data });
+	}
+	// Sort series by first-timestamp for stable legend order.
+	series.sort((a, b) => (a.data[0]?.ts ?? 0) - (b.data[0]?.ts ?? 0));
+	const totals = Array.from(totalsMap.entries())
+		.sort((a, b) => a[0] - b[0])
+		.map(([ts, tokens]) => ({ ts, tokens }));
+	return { series, totals };
 }
 
 /**
@@ -280,12 +310,12 @@ export function readSessionTimeseries(
  * Non-fatal: no-op if the row doesn't exist.
  */
 export function clearSessionHeartbeat(
-  pid: number,
-  sessionId: string,
-  indexDir: string = getIndexDir(),
+	pid: number,
+	sessionId: string,
+	indexDir: string = getIndexDir(),
 ): void {
-  const db = openIndexStore(indexDir);
-  db.prepare(
-    "DELETE FROM session_heartbeats WHERE pid = @pid AND session_id = @session_id",
-  ).run({ pid, session_id: sessionId });
+	const db = openIndexStore(indexDir);
+	db.prepare(
+		"DELETE FROM session_heartbeats WHERE pid = @pid AND session_id = @session_id",
+	).run({ pid, session_id: sessionId });
 }