pi-mega-compact 0.8.12 → 0.8.14

package/extensions/dashboard-client/src/styles/overview-extra.css

@@ -0,0 +1,170 @@
+/**
+ * dashboard-client/src/styles/overview-extra.css — styles for new Overview cards.
+ *
+ * Covers: VectorStoreCard, RepoAllSessionsCard, DataSafetyCard,
+ * ConfigSummaryCard, CacheStatusPerModel (Model & Cost), SessionInfo (Crew),
+ * CacheHitsCard, TimeSavedCard, LegendCard, compression meters, bullet-na.
+ * Does NOT modify overview-events.css (integration phase handles that).
+ */
+
+/* Overview card grid — allow cards to wrap naturally */
+.overview-card-grid {
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
+}
+
+/* Stat rows (shared layout for all new cards) */
+.ov-stat-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	padding: 4px 0;
+	border-bottom: 1px solid var(--border);
+	font-size: clamp(13px, 1vw, 17px);
+}
+.ov-stat-label {
+	color: var(--muted);
+	font-size: 12px;
+	cursor: help;
+}
+.ov-stat-value {
+	font-weight: 600;
+	color: var(--text);
+	font-family: monospace;
+}
+.ov-value-ok {
+	color: var(--ok) !important;
+}
+
+/* Compression meter (Vector Store + Repo cards) */
+.ov-compression-meter {
+	margin-top: 10px;
+}
+.meter-track {
+	height: clamp(6px, 0.6vw, 10px);
+	background: var(--bg);
+	border-radius: 5px;
+	overflow: hidden;
+	border: 1px solid var(--border);
+}
+.meter-fill {
+	height: 100%;
+	transition: width 0.4s ease;
+	border-radius: 4px;
+}
+.meter-green {
+	background: var(--ok);
+}
+.meter-yellow {
+	background: var(--warn);
+}
+.meter-red {
+	background: var(--err);
+}
+.meter-sub {
+	display: block;
+	margin-top: 4px;
+	font-size: 11px;
+	color: var(--muted);
+}
+
+/* Trigger status: na (yellow) bullet */
+.bullet-na .bullet-dot {
+	background: var(--warn);
+	box-shadow: 0 0 6px var(--warn);
+}
+.bullet-na .bullet-label {
+	color: var(--warn);
+}
+.trigger-state-text {
+	margin: 6px 0 0;
+	font-size: 12px;
+	color: var(--muted);
+}
+
+/* Data safety card */
+.data-safety-card .safe-note {
+	margin: 10px 0 0;
+	padding: 8px;
+	font-size: 11px;
+	color: var(--muted);
+	background: rgba(63, 185, 80, 0.06);
+	border-radius: 6px;
+	border: 1px solid rgba(63, 185, 80, 0.2);
+}
+
+/* Model & Cost Savings card */
+.model-cost-card .ov-cost-usd {
+	font-size: clamp(16px, 1.4vw, 22px);
+	font-weight: 700;
+	color: #a371f7;
+	margin-bottom: 2px;
+}
+.model-cost-card .ov-cost-sub {
+	font-size: 12px;
+	color: var(--muted);
+	margin-bottom: 8px;
+}
+
+/* Crew / Agents card */
+.crew-card .ov-stat-value {
+	font-family: inherit;
+}
+
+/* Legend card — full width */
+.legend-card {
+	grid-column: 1 / -1;
+}
+.legend-card details {
+	cursor: pointer;
+}
+.legend-card summary {
+	font-size: 13px;
+	color: var(--muted);
+	font-weight: 600;
+	margin-bottom: 4px;
+}
+.legend-list {
+	margin: 8px 0;
+	padding-left: 20px;
+	font-size: 12px;
+	color: var(--muted);
+	line-height: 1.6;
+}
+.legend-list li {
+	margin-bottom: 4px;
+}
+.legend-list b {
+	color: var(--text);
+}
+.legend-note {
+	font-size: 11px;
+	color: var(--dim);
+	font-style: italic;
+}
+
+/* Cache tab layout */
+.cache-tab {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+/* Responsive breakpoints */
+@media (max-width: 640px) {
+	.overview-card-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (min-width: 1025px) {
+	.overview-card-grid {
+		grid-template-columns: repeat(3, 1fr);
+	}
+}
+
+@media (min-width: 1601px) {
+	.overview-card-grid {
+		grid-template-columns: repeat(4, 1fr);
+		font-size: clamp(13px, 0.9vw, 16px);
+	}
+}

package/extensions/dashboard-client/src/styles/repos-extra.css

@@ -0,0 +1,99 @@
+/**
+ * dashboard-client/src/styles/repos-extra.css — Active repos + Savings by Model.
+ *
+ * Styles for ActiveReposTable and SavingsByModelTable components.
+ * Does NOT modify repos-metrics.css (per task constraint).
+ * Responsive: tables scroll horizontally on narrow screens.
+ */
+
+/* Section headers within Repos tab */
+.section-header {
+	font-size: 13px;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: var(--muted);
+	margin: 20px 0 10px;
+	font-weight: 600;
+}
+
+/* Horizontal scroll wrapper for wide tables */
+.table-scroll {
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+/* Shared table styles for active-repos and savings tables */
+.active-repos-table,
+.savings-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 13px;
+}
+
+.active-repos-table th,
+.savings-table th {
+	text-align: left;
+	padding: 6px 10px;
+	border-bottom: 1px solid var(--border);
+	white-space: nowrap;
+}
+
+.active-repos-table th.num,
+.savings-table th.num {
+	text-align: right;
+}
+
+.active-repos-table td,
+.savings-table td {
+	padding: 6px 10px;
+	border-bottom: 1px solid var(--border);
+	white-space: nowrap;
+}
+
+.active-repos-table td.num,
+.savings-table td.num {
+	text-align: right;
+	font-family: monospace;
+}
+
+.active-repos-table tbody tr:hover,
+.savings-table tbody tr:hover {
+	background: var(--panel);
+}
+
+/* Model cell emphasis */
+.savings-table .repo-model {
+	font-weight: 600;
+}
+
+/* Empty-state row */
+.repo-empty {
+	text-align: center;
+	color: var(--muted);
+	padding: 24px;
+}
+
+/* Section spacing */
+.active-repos-section {
+	margin-bottom: 8px;
+}
+
+.savings-by-model {
+	margin-bottom: 16px;
+}
+
+/* Responsive: ensure tables have min-width so columns don't crush */
+@media (max-width: 640px) {
+	.active-repos-table {
+		min-width: 900px;
+	}
+	.savings-table {
+		min-width: 1200px;
+	}
+}
+
+@media (min-width: 641px) and (max-width: 1024px) {
+	.savings-table {
+		min-width: 1000px;
+	}
+}

package/extensions/dashboard-client/src/styles/repos-metrics.css

@@ -187,9 +187,8 @@
 
 /* Model badge */
 .model-badge {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
 	gap: 8px;
 	padding: 12px 14px;
 	background: var(--panel);
@@ -197,26 +196,19 @@
 	border-radius: 8px;
 	margin-bottom: 12px;
 }
-.model-name {
-	font-size: 15px;
-	font-weight: 600;
-}
-.model-provider {
-	color: var(--accent);
-	font-size: 13px;
-}
-.model-provider-id {
-	color: var(--muted);
-	font-size: 11px;
-}
-.model-rates {
-	margin-left: auto;
+.model-field {
 	display: flex;
-	gap: 12px;
+	flex-direction: column;
+	gap: 2px;
 }
-.model-rates .rate {
-	font-size: 12px;
+.model-field-label {
+	font-size: 11px;
 	color: var(--muted);
+	text-transform: uppercase;
+}
+.model-field-value {
+	font-size: 14px;
+	font-weight: 600;
 }
 
 /* Perf chart */
@@ -300,8 +292,7 @@
 	.modal-grid {
 		grid-template-columns: 1fr 1fr;
 	}
-	.model-rates {
-		margin-left: 0;
-		width: 100%;
+	.model-badge {
+		grid-template-columns: 1fr 1fr;
 	}
 }

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

@@ -0,0 +1,55 @@
+/**
+ * dashboard-client/src/tabs/AchievementsTab.tsx — Achievements tab (NEW).
+ *
+ * Renders the shared AchievementTiles component standalone, plus a toast area.
+ * Polls /api/achievements every 15s.
+ */
+
+import type React from "react";
+import { useState, useEffect, useCallback } from "react";
+import type { AchievementRow } from "@contracts";
+import { fetchAchievements } from "../api/client";
+import { AchievementTiles } from "../components/AchievementTiles";
+
+export default function AchievementsTab(): React.ReactElement {
+	const [achievements, setAchievements] = useState<AchievementRow[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<Error | null>(null);
+
+	const doFetch = useCallback(async (): Promise<void> => {
+		try {
+			const rows = await fetchAchievements();
+			setAchievements(rows);
+			setError(null);
+		} catch (e) {
+			setError(e instanceof Error ? e : new Error(String(e)));
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		let active = true;
+		const run = async (): Promise<void> => {
+			if (active) await doFetch();
+		};
+		void run();
+		const timer = setInterval(() => void run(), 15000);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, [doFetch]);
+
+	if (loading && achievements.length === 0)
+		return <div className="tab-stub">Loading achievements…</div>;
+	if (error && achievements.length === 0)
+		return <div className="tab-stub">Error: {error.message}</div>;
+
+	return (
+		<div className="achievements-tab">
+			<h2>Achievements</h2>
+			<AchievementTiles achievements={achievements} />
+		</div>
+	);
+}

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

@@ -0,0 +1,50 @@
+/**
+ * dashboard-client/src/tabs/CacheTab.tsx — Cache tab (NEW).
+ *
+ * Renders CacheHitsCard + TimeSavedCard from /api/snapshot
+ * via the useApi hook with 5s polling.
+ */
+
+import type React from "react";
+import { useCallback } from "react";
+import type { SnapshotResponse } from "@contracts";
+import { useApi } from "../hooks/useApi";
+import { fetchSnapshot } from "../api/client";
+import { CacheHitsCard } from "../components/CacheHitsCard";
+import { TimeSavedCard } from "../components/TimeSavedCard";
+
+export default function CacheTab(): React.ReactElement {
+	const { data: snapshot, loading, error } = useApi<SnapshotResponse>(
+		useCallback(() => fetchSnapshot(), []),
+		{ 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;
+
+	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}
+				/>
+				<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/ConfigTab.tsx

@@ -1,16 +1,251 @@
 /**
- * dashboard-client/src/tabs/ConfigTab.tsx — Config tab (B1 stub).
+ * dashboard-client/src/tabs/ConfigTab.tsx — Config tab (C3).
  *
- * SPRINT-C3: config form, game-mode settings, theme picker.
+ * Full configuration editor:
+ *  (1) Game mode toggle (checkbox)
+ *  (2) Theme selector (dropdown) from src/config/themes.ts THEMES array
+ *  (3) TUI mode selector (Full/Minimal dropdown)
+ *  (4) Read-only config display section from snapshot (Tier, Preset, Pressure,
+ *      Threshold, Fast Gate, Auto, Anchor) with verbatim tooltips from html.ts.
+ *
+ * Uses fetchGameState() to load current state, putGameState() to save changes.
+ * Polls gameState and snapshot every 5s. Applies theme by setting
+ * document.documentElement.dataset.theme.
  */
 
 import type React from "react";
+import { useState, useEffect, useCallback } from "react";
+import type { SnapshotResponse, GameStatePatch } from "@contracts";
+import { fetchSnapshot, fetchGameState, putGameState } from "../api/client";
+import { THEMES } from "../../../../src/config/themes";
+
+/** Actual flat game state returned by the server (the server returns a flat
+ *  { game_mode_on, theme, tui_display_mode } shape, NOT the contract's nested
+ *  { config: { enabled, theme, displayMode }, activeRitual } shape). */
+interface FlatGameState {
+	game_mode_on: boolean;
+	theme: string;
+	tui_display_mode: "full" | "minimal";
+}
+type FlatGameStatePatch = Partial<FlatGameState>;
+
+/** Extended snapshot config — the runtime includes tierPct (not in contract). */
+interface ConfigExt extends SnapshotResponse["config"] {
+	tierPct?: number | null;
+}
+
+/* Tooltips copied verbatim from extensions/dashboard-server/html.ts */
+const TOOLTIPS = {
+	gameMode: "Turn game mode on/off (themes the widget + dashboard)",
+	theme: "Visual theme (applies instantly)",
+	tuiMode: "TUI widget display density",
+	tier: "Live pressure band — climbs low\u2192mega as context fills the window.",
+	preset:
+		"The env-resolved base compaction preset (low/medium/high/ultra/mega) that set the token threshold.",
+	pressure:
+		"Live pressure = currentTokens / threshold \u2014 % of the model context window (threshold fires at the tier's % of window).",
+	threshold:
+		"Compaction threshold = tierPct \u00d7 model context window \u2014 mega-compact trims BELOW pi's native ~80% auto-compact for any model size.",
+	fastGate:
+		"Fast-gate arming floor \u2014 the live trim arms once context passes this % of the window.",
+} as const;
+
+function formatThreshold(
+	tokens: number,
+	tierPct: number | null | undefined,
+	cw: number,
+): string {
+	let txt = tokens.toLocaleString();
+	if (tierPct != null && cw > 0) {
+		txt += ` (${Math.round(tierPct * 100)}% of ${cw.toLocaleString()})`;
+	}
+	return txt;
+}
+
+function formatPressure(pressure: number): string {
+	/* Runtime sends 0\u20131 fraction despite contract saying 0\u2013100. */
+	return `${Math.round((pressure || 0) * 100)}%`;
+}
 
 export default function ConfigTab(): React.ReactElement {
+	const [snapshot, setSnapshot] = useState<SnapshotResponse | null>(null);
+	const [gameState, setGameState] = useState<FlatGameState | null>(null);
+	const [saving, setSaving] = useState(false);
+
+	/* Poll snapshot every 5s for config display section. */
+	useEffect(() => {
+		let active = true;
+		const doFetch = async (): Promise<void> => {
+			try {
+				const s = await fetchSnapshot();
+				if (active) setSnapshot(s);
+			} catch {
+				/* non-fatal */
+			}
+		};
+		void doFetch();
+		const timer = setInterval(() => void doFetch(), 5000);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, []);
+
+	/* Poll game state every 5s. */
+	useEffect(() => {
+		let active = true;
+		const doFetch = async (): Promise<void> => {
+			try {
+				const gs = (await fetchGameState()) as unknown as FlatGameState;
+				if (active) {
+					setGameState(gs);
+					if (gs.theme)
+						document.documentElement.dataset.theme = gs.theme;
+				}
+			} catch {
+				/* non-fatal */
+			}
+		};
+		void doFetch();
+		const timer = setInterval(() => void doFetch(), 5000);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, []);
+
+	/* PUT a patch to the server immediately on change. */
+	const handlePatch = useCallback(async (patch: FlatGameStatePatch) => {
+		setSaving(true);
+		try {
+			const result = (await putGameState(
+				patch as unknown as GameStatePatch,
+			)) as unknown as FlatGameState;
+			setGameState(result);
+			if (result.theme)
+				document.documentElement.dataset.theme = result.theme;
+		} catch {
+			/* non-fatal */
+		}
+		setSaving(false);
+	}, []);
+
+	const gmOn = gameState?.game_mode_on ?? false;
+	const themeVal = gameState?.theme ?? "transparent";
+	const tuiVal = gameState?.tui_display_mode ?? "full";
+
+	const cfg = snapshot?.config as ConfigExt | undefined;
+	const cw = snapshot?.context.contextWindow ?? 0;
+
 	return (
-		<div className="tab-stub">
-			<strong>Config</strong> (B1 stub)
-			{/* SPRINT-C3-REMAINING: /mega-compact-settings form, theme picker */}
+		<div className="config-tab">
+			<section className="config-settings">
+				<h3>Settings</h3>
+				<div className="settings-row">
+					<label title={TOOLTIPS.gameMode}>
+						<input
+							type="checkbox"
+							checked={gmOn}
+							onChange={(e) =>
+								handlePatch({ game_mode_on: e.currentTarget.checked })
+							}
+							disabled={saving}
+						/>
+						Game Mode
+					</label>
+				</div>
+				<div className="settings-row">
+					<label title={TOOLTIPS.theme}>
+						Theme
+						<select
+							value={themeVal}
+							onChange={(e) => handlePatch({ theme: e.currentTarget.value })}
+							disabled={saving}
+						>
+							{THEMES.map((t) => (
+								<option key={t.id} value={t.id}>
+									{t.label}
+								</option>
+							))}
+						</select>
+					</label>
+				</div>
+				<div className="settings-row">
+					<label title={TOOLTIPS.tuiMode}>
+						TUI Mode
+						<select
+							value={tuiVal}
+							onChange={(e) =>
+								handlePatch({
+									tui_display_mode: e.currentTarget.value as "full" | "minimal",
+								})
+							}
+							disabled={saving}
+						>
+							<option value="full">Full</option>
+							<option value="minimal">Minimal</option>
+						</select>
+					</label>
+				</div>
+			</section>
+
+			<section className="config-display">
+				<h3>Configuration</h3>
+				<div className="config-grid">
+					<div className="config-item">
+						<span className="config-label" title={TOOLTIPS.tier}>
+							Tier
+						</span>
+						<span className="config-value">
+							{snapshot ? `${snapshot.tier} (live)` : "\u2014"}
+						</span>
+					</div>
+					<div className="config-item">
+						<span className="config-label" title={TOOLTIPS.preset}>
+							Preset
+						</span>
+						<span className="config-value">
+							{snapshot?.presetTier ?? "\u2014"}
+						</span>
+					</div>
+					<div className="config-item">
+						<span className="config-label" title={TOOLTIPS.pressure}>
+							Pressure
+						</span>
+						<span className="config-value">
+							{snapshot ? formatPressure(snapshot.pressure) : "\u2014"}
+						</span>
+					</div>
+					<div className="config-item">
+						<span className="config-label" title={TOOLTIPS.threshold}>
+							Threshold
+						</span>
+						<span className="config-value">
+							{cfg ? formatThreshold(cfg.thresholdTokens, cfg.tierPct, cw) : "\u2014"}
+						</span>
+					</div>
+					<div className="config-item">
+						<span className="config-label" title={TOOLTIPS.fastGate}>
+							Fast Gate
+						</span>
+						<span className="config-value">
+							{cfg ? `${cfg.fastGatePct}%` : "\u2014"}
+						</span>
+					</div>
+					<div className="config-item">
+						<span className="config-label">Auto</span>
+						<span className="config-value">
+							{cfg ? (cfg.auto ? "enabled" : "disabled") : "\u2014"}
+						</span>
+					</div>
+					<div className="config-item">
+						<span className="config-label">Anchor</span>
+						<span className="config-value">
+							{cfg?.anchorUserMessages ?? "\u2014"}
+						</span>
+					</div>
+				</div>
+			</section>
 		</div>
 	);
 }