npm - pi-mega-compact - Versions diffs - 0.8.12 → 0.8.14 - Mend

pi-mega-compact 0.8.12 → 0.8.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/extensions/dashboard-client/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>mega-compact dashboard</title>
-    <script type="module" crossorigin src="./assets/index-XAIN8km6.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-Buer5yxB.css">
+    <script type="module" crossorigin src="./assets/index-DMntLu-8.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-Cfxniu2R.css">
   </head>
   <body>
     <div id="root"></div>

package/extensions/dashboard-client/src/App.tsx CHANGED Viewed

@@ -19,10 +19,19 @@ const ReposTab = React.lazy(() => import("./tabs/ReposTab"));
 const EventsTab = React.lazy(() => import("./tabs/EventsTab"));
 const ConfigTab = React.lazy(() => import("./tabs/ConfigTab"));
 const MetricsTab = React.lazy(() => import("./tabs/MetricsTab"));
+const CacheTab = React.lazy(() => import("./tabs/CacheTab"));
+const GameTab = React.lazy(() => import("./tabs/GameTab"));
+const AchievementsTab = React.lazy(() => import("./tabs/AchievementsTab"));
-// SPRINT-C2/C3-REMAINING: GameTab, DiagnosticsPanel lazy imports.
-export type TabId = "overview" | "repos" | "events" | "config" | "metrics";
+export type TabId =
+	| "overview"
+	| "repos"
+	| "events"
+	| "config"
+	| "metrics"
+	| "cache"
+	| "game"
+	| "achievements";
 const TABS: Array<{ id: TabId; label: string }> = [
 	{ id: "overview", label: "Overview" },
@@ -30,6 +39,9 @@ const TABS: Array<{ id: TabId; label: string }> = [
 	{ id: "events", label: "Events" },
 	{ id: "config", label: "Config" },
 	{ id: "metrics", label: "Metrics" },
+	{ id: "cache", label: "Cache" },
+	{ id: "game", label: "Game" },
+	{ id: "achievements", label: "Achievements" },
 ];
 export default function App(): React.ReactElement {
@@ -73,7 +85,9 @@ export default function App(): React.ReactElement {
 						{activeTab === "events" && <EventsTab />}
 						{activeTab === "config" && <ConfigTab />}
 						{activeTab === "metrics" && <MetricsTab />}
-						{/* SPRINT-C2/C3-REMAINING: Game tab, diagnostics panel */}
+						{activeTab === "cache" && <CacheTab />}
+						{activeTab === "game" && <GameTab />}
+						{activeTab === "achievements" && <AchievementsTab />}
 					</React.Suspense>
 				</main>
 			</div>

package/extensions/dashboard-client/src/components/AchievementTiles.tsx ADDED Viewed

@@ -0,0 +1,105 @@
+/**
+ * dashboard-client/src/components/AchievementTiles.tsx — shared achievement grid.
+ *
+ * Renders a grid of achievement tiles from fetchAchievements() data.
+ * Tile states: unlocked (icon+title+date), visible-locked (??? teaser),
+ * hidden+locked (not rendered). Just-unlocked tiles get a pulse animation.
+ * Toast notification fires for newly-unlocked achievements.
+ *
+ * Used by both GameTab (sub-section) and AchievementsTab (standalone).
+ */
+import type React from "react";
+import { useRef, useState, useEffect } from "react";
+import type { AchievementRow } from "@contracts";
+export interface AchievementTilesProps {
+	/** Achievement rows from /api/achievements. */
+	achievements: AchievementRow[];
+}
+/** Format unlock timestamp (seconds → locale string). */
+function fmtUnlockDate(ts: number): string {
+	try {
+		return new Date(ts * 1000).toLocaleString();
+	} catch {
+		return "\u2014";
+	}
+}
+export function AchievementTiles({
+	achievements,
+}: AchievementTilesProps): React.ReactElement {
+	const lastMaxTsRef = useRef(0);
+	const [toastText, setToastText] = useState<string | null>(null);
+	const maxTs = achievements.reduce(
+		(mx, a) => Math.max(mx, a.unlocked_at ?? 0),
+		0,
+	);
+	const prevMaxTs = lastMaxTsRef.current;
+	/* Update ref after render so next poll sees previous baseline. */
+	useEffect(() => {
+		if (maxTs > lastMaxTsRef.current) {
+			lastMaxTsRef.current = maxTs;
+		}
+	}, [maxTs]);
+	/* Toast for newly-unlocked achievements. */
+	useEffect(() => {
+		if (prevMaxTs > 0 && maxTs > prevMaxTs) {
+			const newly = achievements.filter(
+				(a) => a.unlocked_at != null && (a.unlocked_at ?? 0) > prevMaxTs,
+			);
+			if (newly.length > 0) {
+				const text =
+					newly
+						.map((a) => `${a.icon ?? ""} ${a.title}`.trim())
+						.join(", ") + " unlocked!";
+				setToastText(text);
+				const t = setTimeout(() => setToastText(null), 4000);
+				return (): void => clearTimeout(t);
+			}
+		}
+	}, [achievements, maxTs, prevMaxTs]);
+	/* Visible tiles: skip hidden+locked (hidden === 1 && unlocked_at == null). */
+	const tiles = achievements.filter(
+		(a) => !(a.hidden === 1 && a.unlocked_at == null),
+	);
+	return (
+		<div className="ach-section">
+			{toastText != null && (
+				<div className="ach-toast show">{toastText}</div>
+			)}
+			<div className="ach-tiles">
+				{tiles.length === 0 && (
+					<span className="repo-none">no achievements yet</span>
+				)}
+				{tiles.map((a) => {
+					if (a.unlocked_at != null) {
+						const isNew = prevMaxTs > 0 && (a.unlocked_at ?? 0) > prevMaxTs;
+						return (
+							<div
+								key={a.id}
+								className={`ach-tile unlocked${isNew ? " just-unlocked" : ""}`}
+							>
+								{a.icon ?? ""} {a.title}
+								<span className="ach-detail">
+									unlocked {fmtUnlockDate(a.unlocked_at)}
+								</span>
+							</div>
+						);
+					}
+					return (
+						<div key={a.id} className="ach-tile locked">
+							??? {a.title}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}

package/extensions/dashboard-client/src/components/ActiveReposTable.tsx ADDED Viewed

@@ -0,0 +1,116 @@
+/**
+ * dashboard-client/src/components/ActiveReposTable.tsx — Active repos table.
+ *
+ * 9 columns: Repo, Model, Tier, Context %, State, Compactions s/t,
+ * Cache Hits s/t, Compact s/t, CacheHit s/t.
+ * Data from fetchServers() via useApi with 10s polling.
+ */
+import type React from "react";
+import type { ServerEntry } from "@contracts";
+export interface ActiveReposTableProps {
+	servers: ServerEntry[];
+}
+/** Format seconds → human-readable duration (matches html.ts fmtSec). */
+function fmtSec(s: number | undefined): string {
+	const v = s ?? 0;
+	if (v >= 3600) return `${(v / 3600).toFixed(1)}h`;
+	if (v >= 60) return `${Math.round(v / 60)}m`;
+	if (v >= 1) return `${v.toFixed(1)}s`;
+	return `${Math.round(v * 1000)}ms`;
+}
+const HEADERS = [
+	"Repo",
+	"Model",
+	"Tier",
+	"Context %",
+	"State",
+	"Compactions (s/t)",
+	"Cache Hits (s/t)",
+	"Compact s/t (s)",
+	"CacheHit s/t (s)",
+] as const;
+export function ActiveReposTable({
+	servers,
+}: ActiveReposTableProps): React.ReactElement {
+	return (
+		<div className="active-repos-section">
+			<p className="legend-note">
+				Repos seen within the last 30 minutes, with their per-repo
+				cache-hit, compaction, and time-saved (est.) totals pulled live
+				from each repo&apos;s dashboard.json.
+			</p>
+			<div className="table-scroll">
+				<table className="active-repos-table">
+					<thead>
+						<tr>
+							{HEADERS.map((h, i) => (
+								<th
+									key={h}
+									className={i >= 3 && i !== 4 ? "num" : undefined}
+								>
+									{h}
+								</th>
+							))}
+						</tr>
+					</thead>
+					<tbody>
+						{servers.length === 0 && (
+							<tr>
+								<td colSpan={9} className="repo-empty">
+									No active repositories.
+								</td>
+							</tr>
+						)}
+						{servers.map((r) => {
+							const ch = r.cacheHits ?? {
+								session: 0,
+								total: 0,
+								sessionTokensSaved: 0,
+								totalTokensSaved: 0,
+							};
+							const cp = r.compacts ?? { session: 0, total: 0 };
+							const ts = r.timeSaved ?? {
+								compact: { sessionSec: 0, totalSec: 0 },
+								cacheHit: { sessionSec: 0, totalSec: 0 },
+							};
+							return (
+								<tr key={r.repoRoot}>
+									<td title={r.repoRoot}>
+										{r.displayName || r.repoRoot}
+									</td>
+									<td>{r.model ?? "\u2014"}</td>
+									<td>{r.tier ?? "\u2014"}</td>
+									<td className="num">
+										{r.contextPct != null
+											? `${Math.round(r.contextPct * 100)}%`
+											: "\u2014"}
+									</td>
+									<td>{r.state ?? "\u2014"}</td>
+									<td className="num">
+										{cp.session} / {cp.total}
+									</td>
+									<td className="num">
+										{ch.session} / {ch.total}
+									</td>
+									<td className="num">
+										{fmtSec(ts.compact.sessionSec)} /{" "}
+										{fmtSec(ts.compact.totalSec)}
+									</td>
+									<td className="num">
+										{fmtSec(ts.cacheHit.sessionSec)} /{" "}
+										{fmtSec(ts.cacheHit.totalSec)}
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+}

package/extensions/dashboard-client/src/components/CacheHitsCard.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+/**
+ * dashboard-client/src/components/CacheHitsCard.tsx — Cache Hits & Compactions card.
+ *
+ * 6 fields: Cache Hits (session), Cache Hits (total),
+ * Tokens Saved (session), Tokens Saved (total),
+ * Compactions (session), Compactions (total).
+ */
+import type React from "react";
+export interface CacheHitsCardProps {
+	/** Cache hits in the current session. */
+	cacheHitsSession: number;
+	/** Total cache hits across all sessions. */
+	cacheHitsTotal: number;
+	/** Tokens saved by cache hits this session. */
+	tokensSavedSession: number;
+	/** Total tokens saved by cache hits. */
+	tokensSavedTotal: number;
+	/** Compactions performed this session. */
+	compactionsSession: number;
+	/** Total compactions performed. */
+	compactionsTotal: number;
+}
+function StatRow({
+	label,
+	value,
+}: {
+	label: string;
+	value: string | number;
+}): React.ReactElement {
+	return (
+		<div className="ov-stat-row">
+			<span className="ov-stat-label">{label}</span>
+			<span className="ov-stat-value">{value}</span>
+		</div>
+	);
+}
+export function CacheHitsCard(
+	props: CacheHitsCardProps,
+): React.ReactElement {
+	return (
+		<div className="card cache-hits-card">
+			<h3>💾 Cache Hits &amp; Compactions</h3>
+			<StatRow
+				label="Cache Hits (session)"
+				value={props.cacheHitsSession.toLocaleString()}
+			/>
+			<StatRow
+				label="Cache Hits (total)"
+				value={props.cacheHitsTotal.toLocaleString()}
+			/>
+			<StatRow
+				label="Tokens Saved (session)"
+				value={props.tokensSavedSession.toLocaleString()}
+			/>
+			<StatRow
+				label="Tokens Saved (total)"
+				value={props.tokensSavedTotal.toLocaleString()}
+			/>
+			<StatRow
+				label="Compactions (session)"
+				value={props.compactionsSession.toLocaleString()}
+			/>
+			<StatRow
+				label="Compactions (total)"
+				value={props.compactionsTotal.toLocaleString()}
+			/>
+		</div>
+	);
+}

package/extensions/dashboard-client/src/components/CacheStatusPerModel.tsx CHANGED Viewed

@@ -1,44 +1,87 @@
+/**
+ * dashboard-client/src/components/CacheStatusPerModel.tsx — Model & Cost Savings card.
+ *
+ * Shows $ saved, context-windows extended, Model, Provider, Input Rate, Output Rate.
+ * Tooltips copied verbatim from html.ts.
+ */
 import type React from "react";
-export interface CacheRow {
-	model: string;
+export interface ModelCostCardProps {
+	/** Model name. */
+	name: string;
+	/** Provider display name (providerName fallback to provider). */
 	provider: string;
-	hits: number;
-	total: number;
-	saved: string;
-	pct: number;
-	compactions: number;
+	/** USD per input token. */
+	inputRate: number;
+	/** USD per output token. */
+	outputRate: number;
+	/** Tokens freed (repo-level) used for cost calc. */
+	repoTokensFreed: number;
+	/** Context window size used for windows calc. */
+	contextWindow: number;
 }
-export function CacheStatusPerModel({
-	rows,
+function StatRow({
+	label,
+	value,
+	title,
 }: {
-	rows: CacheRow[];
+	label: string;
+	value: string;
+	title?: string;
 }): React.ReactElement {
 	return (
-		<div className="cache-per-model">
-			<table>
-				<thead>
-					<tr>
-						<th>Model</th>
-						<th>Provider</th>
-						<th>Hits</th>
-						<th>Saved</th>
-						<th>Pct</th>
-						<th>Comp</th>
-					</tr>
-				</thead>
-				<tbody>
-					{rows.map((r) => (
-						<tr key={r.model}>
-							<td>{r.model}</td>
-							<td>{r.provider}</td>
-							<td>{r.hits}</td>
-							<td>{r.saved}</td>
-							<td>{r.pct}%</td>
-							<td>{r.compactions}</td>
-						</tr>
-					))}
-				</tbody>
-			</table>
+		<div className="ov-stat-row">
+			<span className="ov-stat-label" title={title}>
+				{label}
+			</span>
+			<span className="ov-stat-value">{value}</span>
+		</div>
+	);
+}
+export function CacheStatusPerModel(
+	props: ModelCostCardProps,
+): React.ReactElement {
+	const repoSaved = props.repoTokensFreed || 0;
+	let usd = 0;
+	let windows = "0";
+	if (props.inputRate && repoSaved > 0) {
+		usd = repoSaved * props.inputRate;
+		const win = props.contextWindow || 0;
+		windows = win > 0 ? (repoSaved / win).toFixed(1) : "0";
+	}
+	const usdStr = `≈ $${usd.toFixed(4)} saved`;
+	const windowsStr = `${windows} context-windows extended`;
+	return (
+		<div className="card model-cost-card">
+			<h3>💰 Model &amp; Cost Savings</h3>
+			<div className="ov-cost-usd">{usdStr}</div>
+			<div className="ov-cost-sub">{windowsStr}</div>
+			<StatRow
+				label="Model"
+				value={props.name}
+				title="The model pi is currently using — its pricing drives the cost figure."
+			/>
+			<StatRow
+				label="Provider"
+				value={props.provider}
+				title="The provider serving the model."
+			/>
+			<StatRow
+				label="Input Rate"
+				value={`$${props.inputRate.toFixed(6)}`}
+				title="USD per input token, from the model's pricing."
+			/>
+			<StatRow
+				label="Output Rate"
+				value={`$${props.outputRate.toFixed(6)}`}
+				title="USD per output token, from the model's pricing."
+			/>
 		</div>
 	);
 }

package/extensions/dashboard-client/src/components/ConfigSummaryCard.tsx ADDED Viewed

@@ -0,0 +1,101 @@
+/**
+ * dashboard-client/src/components/ConfigSummaryCard.tsx — Configuration summary.
+ *
+ * 7 fields with tooltips (verbatim from html.ts):
+ * Tier (live), Preset, Pressure, Threshold, Fast Gate, Auto, Anchor.
+ *
+ * NOTE: pressure and tierPct are 0–1 fractions at runtime.
+ * fastGatePct is 0–100 at runtime.
+ */
+import type React from "react";
+export interface ConfigSummaryCardProps {
+	/** Current tier name. */
+	tier: string;
+	/** Preset tier name. */
+	presetTier: string;
+	/** Live pressure — 0–1 fraction. */
+	pressure: number;
+	/** Token threshold. */
+	thresholdTokens: number;
+	/** Tier percentage — 0–1 fraction (runtime-only field). */
+	tierPct?: number;
+	/** Context window size. */
+	contextWindow: number;
+	/** Fast-gate percentage — 0–100. */
+	fastGatePct: number;
+	/** Whether auto-compaction is enabled. */
+	auto: boolean;
+	/** Number of anchor user messages. */
+	anchorUserMessages: number;
+}
+function StatRow({
+	label,
+	value,
+	title,
+}: {
+	label: string;
+	value: string;
+	title?: string;
+}): React.ReactElement {
+	return (
+		<div className="ov-stat-row">
+			<span className="ov-stat-label" title={title}>
+				{label}
+			</span>
+			<span className="ov-stat-value">{value}</span>
+		</div>
+	);
+}
+export function ConfigSummaryCard(
+	props: ConfigSummaryCardProps,
+): React.ReactElement {
+	const pressurePct = `${Math.round((props.pressure ?? 0) * 100)}%`;
+	let thresholdTxt = props.thresholdTokens.toLocaleString();
+	if (props.tierPct != null && props.contextWindow > 0) {
+		thresholdTxt += ` (${Math.round(props.tierPct * 100)}% of ${props.contextWindow.toLocaleString()})`;
+	}
+	return (
+		<div className="card config-summary-card">
+			<h3>Configuration</h3>
+			<StatRow
+				label="Tier"
+				value={`${props.tier} (live)`}
+				title="Live pressure band — climbs low→mega as context fills the window."
+			/>
+			<StatRow
+				label="Preset"
+				value={props.presetTier}
+				title="The env-resolved base compaction preset (low/medium/high/ultra/mega) that set the token threshold."
+			/>
+			<StatRow
+				label="Pressure"
+				value={pressurePct}
+				title="Live pressure = currentTokens / threshold — % of the model context window (threshold fires at the tier's % of window)."
+			/>
+			<StatRow
+				label="Threshold"
+				value={thresholdTxt}
+				title="Compaction threshold = tierPct × model context window — mega-compact trims BELOW pi's native ~80% auto-compact for any model size."
+			/>
+			<StatRow
+				label="Fast Gate"
+				value={`${props.fastGatePct}%`}
+				title="Fast-gate arming floor — the live trim arms once context passes this % of the window."
+			/>
+			<StatRow
+				label="Auto"
+				value={props.auto ? "enabled" : "disabled"}
+			/>
+			<StatRow
+				label="Anchor"
+				value={String(props.anchorUserMessages)}
+			/>
+		</div>
+	);
+}

package/extensions/dashboard-client/src/components/ContextGauge.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
 /**
  * dashboard-client/src/components/ContextGauge.tsx — token usage meter.
  *
- * Color-coded percent fill bar: green <60%, yellow 60–80%, red >80%.
- * Sublabel: "{tokens} / {contextWindow} tokens ({percent}%)".
+ * Color-coded percent fill bar: green <70%, yellow 70–89%, red ≥90%.
+ * Sublabel: "{tokens} / {contextWindow} tokens".
+ * Shows percentage as "{pct}%" in the header.
  */
 import type React from "react";
@@ -17,33 +18,28 @@ export interface ContextGaugeProps {
 }
 function severityClass(percent: number): string {
-	if (percent >= 80) return "gauge-red";
-	if (percent >= 60) return "gauge-yellow";
+	if (percent >= 90) return "gauge-red";
+	if (percent >= 70) return "gauge-yellow";
 	return "gauge-green";
 }
-function formatTokens(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 ContextGauge({
 	tokens,
 	percent,
 	contextWindow,
 }: ContextGaugeProps): React.ReactElement {
 	const pct = percent ?? 0;
-	const fillWidth = Math.max(0, Math.min(100, pct));
+	const fillWidth = Math.max(pct, 1);
 	const cls = severityClass(pct);
-	const label =
+	const tokStr =
 		tokens !== null && tokens !== undefined
-			? `${formatTokens(tokens)} / ${formatTokens(contextWindow)} tokens (${pct.toFixed(1)}%)`
-			: `${formatTokens(contextWindow)} window (usage unknown)`;
+			? tokens.toLocaleString()
+			: "?";
+	const label = `${tokStr} / ${contextWindow.toLocaleString()} tokens`;
 	return (
 		<div className="card context-gauge">
-			<h3>Context</h3>
+			<h3>Context Window — {pct}%</h3>
 			<div
 				className={`gauge-bar ${cls}`}
 				role="meter"