pi-mega-compact 0.8.7 → 0.8.10

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

@@ -0,0 +1,307 @@
+/**
+ * dashboard-client/src/styles/repos-metrics.css — Sprint C2 tab styles.
+ *
+ * Repos tab (summary tiles, sortable table, detail modal) + Metrics tab
+ * (model badge, perf chart bars, resource gauges). Depends on base.css tokens.
+ */
+
+/* Summary tiles */
+.summary-tiles {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+	gap: 10px;
+	margin-bottom: 16px;
+}
+.tile {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 12px 14px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+}
+.tile-label {
+	font-size: 11px;
+	color: var(--muted);
+	text-transform: uppercase;
+}
+.tile-value {
+	font-size: 20px;
+	font-weight: 600;
+}
+.tile-highlight .tile-value {
+	color: var(--ok);
+}
+
+/* Repo table */
+.repo-table-wrap {
+	overflow-x: auto;
+}
+.repo-search {
+	width: 100%;
+	padding: 8px 10px;
+	margin-bottom: 10px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	color: var(--text);
+	font-size: 13px;
+}
+.repo-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 13px;
+}
+.repo-table th {
+	text-align: left;
+	padding: 6px 10px;
+	border-bottom: 1px solid var(--border);
+}
+.repo-table td {
+	padding: 8px 10px;
+	border-bottom: 1px solid var(--border);
+}
+.repo-table tr {
+	cursor: pointer;
+}
+.repo-table tbody tr:hover {
+	background: var(--panel);
+}
+.sort-header {
+	background: none;
+	border: none;
+	color: var(--muted);
+	font-size: 12px;
+	font-weight: 600;
+	cursor: pointer;
+	padding: 0;
+}
+.sort-header.active-asc,
+.sort-header.active-desc {
+	color: var(--text);
+}
+.sort-arrow {
+	color: var(--accent);
+}
+.repo-name {
+	font-weight: 600;
+}
+.repo-model {
+	color: var(--muted);
+}
+.repo-empty {
+	text-align: center;
+	color: var(--muted);
+	padding: 24px;
+}
+
+/* Repo detail modal */
+.modal-backdrop {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.6);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 100;
+}
+.modal-card {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	padding: 20px 24px;
+	max-width: 560px;
+	width: 90%;
+	max-height: 80vh;
+	overflow-y: auto;
+}
+.modal-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+.modal-header h2 {
+	margin: 0;
+	font-size: 18px;
+}
+.modal-close {
+	background: none;
+	border: none;
+	color: var(--muted);
+	font-size: 22px;
+	cursor: pointer;
+	padding: 0 4px;
+}
+.modal-close:hover {
+	color: var(--text);
+}
+.modal-path {
+	font-size: 11px;
+	color: var(--muted);
+	margin: 4px 0 12px;
+	word-break: break-all;
+}
+.modal-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 10px;
+	margin-bottom: 16px;
+}
+.modal-stat {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.modal-label {
+	font-size: 11px;
+	color: var(--muted);
+	text-transform: uppercase;
+}
+.modal-value {
+	font-size: 16px;
+	font-weight: 600;
+}
+.modal-highlight .modal-value {
+	color: var(--ok);
+}
+.modal-card h3 {
+	font-size: 13px;
+	color: var(--muted);
+	margin: 16px 0 6px;
+}
+.modal-dl {
+	display: grid;
+	grid-template-columns: 130px 1fr;
+	gap: 4px 12px;
+	margin: 0;
+}
+.modal-dl dt {
+	color: var(--muted);
+	font-size: 12px;
+}
+.modal-dl dd {
+	margin: 0;
+	font-size: 13px;
+}
+
+/* Model badge */
+.model-badge {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	padding: 12px 14px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	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;
+	display: flex;
+	gap: 12px;
+}
+.model-rates .rate {
+	font-size: 12px;
+	color: var(--muted);
+}
+
+/* Perf chart */
+.perf-chart {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.perf-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+.perf-header h3 {
+	margin: 0;
+	font-size: 13px;
+	color: var(--muted);
+}
+.perf-window {
+	font-size: 11px;
+	color: var(--muted);
+}
+.perf-grid,
+.perf-resources {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+	gap: 10px;
+}
+.perf-resources {
+	padding-top: 10px;
+	border-top: 1px solid var(--border);
+}
+.perf-metric {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 10px 12px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+}
+.perf-label {
+	font-size: 11px;
+	color: var(--muted);
+}
+.perf-value {
+	font-size: 15px;
+	font-weight: 600;
+}
+.perf-bar-track {
+	height: 6px;
+	background: var(--bg);
+	border-radius: 3px;
+	overflow: hidden;
+}
+.perf-bar-fill {
+	height: 100%;
+	transition: width 0.4s ease;
+}
+.perf-blue .perf-bar-fill {
+	background: var(--accent);
+}
+.perf-purple .perf-bar-fill {
+	background: #d2a8ff;
+}
+.perf-green .perf-bar-fill {
+	background: var(--ok);
+}
+.perf-yellow .perf-bar-fill {
+	background: var(--warn);
+}
+.perf-diag {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 14px;
+	padding-top: 10px;
+	border-top: 1px solid var(--border);
+}
+
+@media (max-width: 768px) {
+	.modal-grid {
+		grid-template-columns: 1fr 1fr;
+	}
+	.model-rates {
+		margin-left: 0;
+		width: 100%;
+	}
+}

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

@@ -0,0 +1,16 @@
+/**
+ * dashboard-client/src/tabs/ConfigTab.tsx — Config tab (B1 stub).
+ *
+ * SPRINT-C3: config form, game-mode settings, theme picker.
+ */
+
+import type React from "react";
+
+export default function ConfigTab(): React.ReactElement {
+	return (
+		<div className="tab-stub">
+			<strong>Config</strong> (B1 stub)
+			{/* SPRINT-C3-REMAINING: /mega-compact-settings form, theme picker */}
+		</div>
+	);
+}

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

@@ -0,0 +1,37 @@
+/**
+ * dashboard-client/src/tabs/EventsTab.tsx — Events tab (C1).
+ *
+ * Live SSE event stream via useSSE + EventStream with type filters.
+ * Shows connection status + event count.
+ */
+
+import type React from "react";
+import { useSSE } from "../hooks/useSSE";
+import { EventStream } from "../components/EventStream";
+
+export default function EventsTab(): React.ReactElement {
+	const { events, status, eventCount } = useSSE();
+
+	const statusCls = `sse-status sse-${status}`;
+	const statusLabel =
+		status === "connected"
+			? "connected"
+			: status === "connecting"
+				? "connecting…"
+				: status === "error"
+					? "error"
+					: "disconnected";
+
+	return (
+		<div className="events-tab">
+			<div className="events-header">
+				<span className={statusCls} role="status">
+					<span className="sse-dot" aria-hidden="true" />
+					{statusLabel}
+				</span>
+				<span className="event-count">{eventCount} events received</span>
+			</div>
+			<EventStream events={events} />
+		</div>
+	);
+}

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

@@ -0,0 +1,49 @@
+/**
+ * dashboard-client/src/tabs/MetricsTab.tsx — Metrics tab (C2).
+ *
+ * Fetches /api/perf (rolling-window aggregates) + /api/snapshot (for model).
+ * Renders PerfChart + ModelBadge + resource gauges. Polls every 10s.
+ */
+
+import type React from "react";
+import { useCallback } from "react";
+import { useApi } from "../hooks/useApi";
+import { fetchPerf, fetchSnapshot } from "../api/client";
+import type { PerfResponse, SnapshotResponse } from "@contracts";
+import { PerfChart } from "../components/PerfChart";
+import { ModelBadge } from "../components/ModelBadge";
+
+export default function MetricsTab(): React.ReactElement {
+	const { data: perf, error: perfErr } = useApi<PerfResponse>(
+		useCallback(() => fetchPerf({ minutes: 30 }), []),
+		{ pollInterval: 10_000 },
+	);
+	const { data: snapshot } = useApi<SnapshotResponse>(
+		useCallback(() => fetchSnapshot(), []),
+		{ pollInterval: 10_000 },
+	);
+
+	if (perfErr && !perf) {
+		return (
+			<div className="tab-stub">Error loading perf: {perfErr.message}</div>
+		);
+	}
+	if (!perf) {
+		return <div className="tab-stub">Loading perf…</div>;
+	}
+
+	return (
+		<div className="metrics-tab">
+			{snapshot?.model && (
+				<ModelBadge
+					name={snapshot.model.name}
+					providerName={snapshot.model.providerName}
+					provider={snapshot.model.provider}
+					inputRate={snapshot.model.inputRate}
+					outputRate={snapshot.model.outputRate}
+				/>
+			)}
+			<PerfChart perf={perf} />
+		</div>
+	);
+}

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

@@ -0,0 +1,80 @@
+/**
+ * dashboard-client/src/tabs/OverviewTab.tsx — Overview tab (C1).
+ *
+ * 4-card grid: ContextGauge, CompressionCard, TriggerStatus, SessionInfo.
+ * Header: tier pill + last updated timestamp. Polls /api/snapshot.
+ */
+
+import type React from "react";
+import type { SnapshotResponse } from "@contracts";
+import { ContextGauge } from "../components/ContextGauge";
+import { CompressionCard } from "../components/CompressionCard";
+import { TriggerStatus } from "../components/TriggerStatus";
+import { SessionInfo } from "../components/SessionInfo";
+
+export interface OverviewTabProps {
+	snapshot: SnapshotResponse | null;
+	loading: boolean;
+	error: Error | null;
+}
+
+function formatUpdatedAt(ts: string | null): string {
+	if (!ts) return "never";
+	try {
+		return new Date(ts).toLocaleString();
+	} catch {
+		return ts;
+	}
+}
+
+export default function OverviewTab({
+	snapshot,
+	loading,
+	error,
+}: OverviewTabProps): React.ReactElement {
+	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 { context, compression, trigger, session, store, tier, updatedAt } =
+		snapshot;
+
+	return (
+		<div className="overview-tab">
+			<div className="overview-header">
+				<span className="tier-pill">{tier}</span>
+				<span className="updated">updated {formatUpdatedAt(updatedAt)}</span>
+			</div>
+			<div className="card-grid">
+				<ContextGauge
+					tokens={context.tokens}
+					percent={context.percent}
+					contextWindow={context.contextWindow}
+				/>
+				<CompressionCard
+					tokensIn={compression.repo.tokensIn}
+					tokensOut={compression.repo.tokensOut}
+					tokensFreed={compression.repo.tokensFreed}
+					compressionPct={compression.repo.compressionPct}
+					dedupPct={compression.repo.dedupPct}
+				/>
+				<TriggerStatus
+					armed={trigger.armed}
+					ready={trigger.ready}
+					currentTokens={trigger.currentTokens}
+					thresholdTokens={trigger.thresholdTokens}
+					fastGatePct={trigger.fastGatePct}
+				/>
+				<SessionInfo
+					state={session.state}
+					persistedThisSession={session.persistedThisSession}
+					checkpointCount={store.checkpointCount}
+					tokensSaved={store.tokensSaved}
+					dedupHitRate={store.dedupHitRate}
+				/>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,59 @@
+/**
+ * dashboard-client/src/tabs/ReposTab.tsx — Repos tab (C2).
+ *
+ * Fetches /api/repos + /api/summary. Renders SummaryTiles + RepoTable.
+ * Row click opens RepoDetailModal. Polls every 10s.
+ */
+
+import type React from "react";
+import { useCallback, useState } from "react";
+import { useApi } from "../hooks/useApi";
+import { fetchRepos, fetchSummary } from "../api/client";
+import type {
+	ReposResponse,
+	SummaryResponse,
+	IndexesIndexRow,
+} from "@contracts";
+import { SummaryTiles } from "../components/SummaryTiles";
+import { RepoTable } from "../components/RepoTable";
+import { RepoDetailModal } from "../components/RepoDetailModal";
+
+export default function ReposTab(): React.ReactElement {
+	const [selected, setSelected] = useState<IndexesIndexRow | null>(null);
+
+	const { data: reposResp, error: reposErr } = useApi<ReposResponse>(
+		useCallback(() => fetchRepos(), []),
+		{ pollInterval: 10_000 },
+	);
+	const { data: summaryResp } = useApi<SummaryResponse>(
+		useCallback(() => fetchSummary(), []),
+		{ pollInterval: 10_000 },
+	);
+
+	if (reposErr && !reposResp) {
+		return (
+			<div className="tab-stub">Error loading repos: {reposErr.message}</div>
+		);
+	}
+	if (!reposResp) {
+		return <div className="tab-stub">Loading repos…</div>;
+	}
+
+	const repos = reposResp.repos;
+	const summary = summaryResp?.summary;
+
+	return (
+		<div className="repos-tab">
+			<SummaryTiles
+				totalRepos={summaryResp?.totalRepos ?? 0}
+				activeRepos={summaryResp?.activeRepos ?? 0}
+				totalCheckpoints={summary?.totalCheckpoints ?? 0}
+				totalTokensSaved={summary?.totalTokensSaved ?? 0}
+			/>
+			<RepoTable repos={repos} onSelect={setSelected} />
+			{selected && (
+				<RepoDetailModal repo={selected} onClose={() => setSelected(null)} />
+			)}
+		</div>
+	);
+}

package/extensions/dashboard-client/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitOverride": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@contracts": ["../dashboard-server/api-contracts/index.ts"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/extensions/dashboard-client/vite.config.ts

@@ -0,0 +1,38 @@
+/**
+ * dashboard-client/vite.config.ts — Vite build config.
+ *
+ * PREVENT-PI-004: the dev server binds to localhost only. The production
+ * build is a static bundle served by the existing Node HTTP server in
+ * extensions/dashboard-server/server.ts. No external network calls.
+ */
+
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { fileURLToPath, URL } from "node:url";
+
+// guardrails-allow PREVENT-PI-004: Vite dev server is loopback-only (dashboard UI tooling); production build is static files, no runtime network.
+export default defineConfig({
+	plugins: [react()],
+	root: "src",
+	base: "./",
+	build: {
+		outDir: "../dist",
+		emptyOutDir: true,
+		sourcemap: true,
+		target: "es2022",
+	},
+	server: {
+		host: "localhost",
+		port: 5173,
+		strictPort: true,
+	},
+	resolve: {
+		alias: {
+			"@": fileURLToPath(new URL("./src", import.meta.url)),
+			// Allow importing A1 contract types from the dashboard-server tree.
+			"@contracts": fileURLToPath(
+				new URL("../dashboard-server/api-contracts", import.meta.url),
+			),
+		},
+	},
+});