pi-mega-compact 0.8.8 → 0.8.11

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

@@ -0,0 +1,62 @@
+/**
+ * dashboard-client/src/components/TriggerStatus.tsx — trigger armed/ready status.
+ *
+ * Two bullets (armed, ready) + threshold display + fast-gate %.
+ */
+
+import type React from "react";
+
+export interface TriggerStatusProps {
+	/** Whether the trigger is armed (waiting for threshold). */
+	armed: boolean;
+	/** Whether the trigger is ready to fire (pressure at/above threshold). */
+	ready: boolean;
+	/** Current context token count, or null if unknown. */
+	currentTokens: number | null;
+	/** Token threshold for firing. */
+	thresholdTokens: number;
+	/** Fast-gate pressure threshold (percent, 0–100). */
+	fastGatePct: number;
+}
+
+function Bullet({
+	on,
+	label,
+}: {
+	on: boolean;
+	label: string;
+}): React.ReactElement {
+	return (
+		<div className={`bullet ${on ? "bullet-on" : "bullet-off"}`}>
+			<span className="bullet-dot" aria-hidden="true" />
+			<span className="bullet-label">{label}</span>
+		</div>
+	);
+}
+
+export function TriggerStatus({
+	armed,
+	ready,
+	currentTokens,
+	thresholdTokens,
+	fastGatePct,
+}: TriggerStatusProps): React.ReactElement {
+	const cur =
+		currentTokens !== null && currentTokens !== undefined
+			? currentTokens.toLocaleString()
+			: "unknown";
+	return (
+		<div className="card trigger-status">
+			<h3>Trigger</h3>
+			<div className="bullet-row">
+				<Bullet on={armed} label="Armed" />
+				<Bullet on={ready} label="Ready" />
+			</div>
+			<p className="trigger-detail">
+				Threshold: {thresholdTokens.toLocaleString()} tokens
+			</p>
+			<p className="trigger-detail">Current: {cur} tokens</p>
+			<p className="trigger-detail">Fast gate: {fastGatePct}%</p>
+		</div>
+	);
+}

package/extensions/dashboard-client/src/hooks/useApi.ts

@@ -0,0 +1,77 @@
+/**
+ * dashboard-client/src/hooks/useApi.ts — Generic data fetching hook.
+ *
+ * Provides typed fetch with retry, stale detection, and error handling.
+ * SPRINT-B1: basic fetch. SPRINT-D1: retry + stale.
+ */
+
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export interface UseApiResult<T> {
+	data: T | null;
+	error: Error | null;
+	loading: boolean;
+	refetch: () => void;
+	lastFetchedAt: number | null;
+}
+
+export interface UseApiOptions {
+	/** Polling interval in ms. 0 = no polling. */
+	pollInterval?: number;
+	/** Max retry attempts on failure. */
+	maxRetries?: number;
+	/** Base retry delay in ms. */
+	retryBaseMs?: number;
+}
+
+// SPRINT-D1-REMAINING: integrate retryWithBackoff from utils/retry.ts.
+// SPRINT-D1-REMAINING: integrate staleness detection from utils/staleness.ts.
+// SPRINT-T1-REMAINING: add Authorization header when auth token present.
+
+export function useApi<T>(
+	fetchFn: () => Promise<T>,
+	options: UseApiOptions = {},
+): UseApiResult<T> {
+	const { pollInterval = 0 } = options;
+	const [data, setData] = useState<T | null>(null);
+	const [error, setError] = useState<Error | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [lastFetchedAt, setLastFetchedAt] = useState<number | null>(null);
+	const mountedRef = useRef(true);
+
+	const doFetch = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const result = await fetchFn();
+			if (mountedRef.current) {
+				setData(result);
+				setLastFetchedAt(Date.now());
+			}
+		} catch (err) {
+			if (mountedRef.current) {
+				setError(err instanceof Error ? err : new Error(String(err)));
+			}
+		} finally {
+			if (mountedRef.current) {
+				setLoading(false);
+			}
+		}
+	}, [fetchFn]);
+
+	useEffect(() => {
+		mountedRef.current = true;
+		doFetch();
+		return () => {
+			mountedRef.current = false;
+		};
+	}, [doFetch]);
+
+	useEffect(() => {
+		if (pollInterval <= 0) return;
+		const timer = setInterval(doFetch, pollInterval);
+		return () => clearInterval(timer);
+	}, [doFetch, pollInterval]);
+
+	return { data, error, loading, refetch: doFetch, lastFetchedAt };
+}

package/extensions/dashboard-client/src/hooks/useSSE.ts

@@ -0,0 +1,87 @@
+/**
+ * dashboard-client/src/hooks/useSSE.ts — Server-Sent Events hook.
+ *
+ * Connects to /api/events, provides real-time event stream.
+ * SPRINT-B1: basic connection. SPRINT-D1: reconnect with backoff.
+ */
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import type { SseEvent } from '../../../dashboard-server/api-contracts';
+
+export type SseStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
+
+export interface UseSSEResult {
+  events: SseEvent[];
+  status: SseStatus;
+  eventCount: number;
+  lastEventAt: number | null;
+}
+
+export interface UseSSEOptions {
+  /** Max events to keep in memory (ring buffer). */
+  maxEvents?: number;
+  /** Max reconnect attempts before giving up. */
+  maxReconnects?: number;
+}
+
+// SPRINT-D1-REMAINING: exponential backoff (1s → 2s → 4s → max 30s).
+// SPRINT-D1-REMAINING: after 5 failures, set status='disconnected'.
+
+export function useSSE(options: UseSSEOptions = {}): UseSSEResult {
+  const { maxEvents = 500, maxReconnects = 5 } = options;
+  const [events, setEvents] = useState<SseEvent[]>([]);
+  const [status, setStatus] = useState<SseStatus>('connecting');
+  const [eventCount, setEventCount] = useState(0);
+  const [lastEventAt, setLastEventAt] = useState<number | null>(null);
+  const reconnectCount = useRef(0);
+  const sourceRef = useRef<EventSource | null>(null);
+
+  const connect = useCallback(() => {
+    if (sourceRef.current) {
+      sourceRef.current.close();
+    }
+    setStatus('connecting');
+    const source = new EventSource('/api/events');
+    sourceRef.current = source;
+
+    source.onopen = () => {
+      setStatus('connected');
+      reconnectCount.current = 0;
+    };
+
+    source.onmessage = (event) => {
+      try {
+        const parsed = JSON.parse(event.data) as SseEvent;
+        setEvents(prev => {
+          const next = [...prev, parsed];
+          return next.length > maxEvents ? next.slice(-maxEvents) : next;
+        });
+        setEventCount(c => c + 1);
+        setLastEventAt(Date.now());
+      } catch {
+        // non-fatal: skip malformed events
+      }
+    };
+
+    source.onerror = () => {
+      source.close();
+      if (reconnectCount.current < maxReconnects) {
+        reconnectCount.current += 1;
+        setStatus('connecting');
+        // SPRINT-D1: use exponential backoff instead of fixed delay
+        setTimeout(connect, 1000);
+      } else {
+        setStatus('disconnected');
+      }
+    };
+  }, [maxEvents, maxReconnects]);
+
+  useEffect(() => {
+    connect();
+    return () => {
+      sourceRef.current?.close();
+    };
+  }, [connect]);
+
+  return { events, status, eventCount, lastEventAt };
+}

package/extensions/dashboard-client/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>mega-compact dashboard</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/extensions/dashboard-client/src/main.tsx

@@ -0,0 +1,23 @@
+/**
+ * dashboard-client/src/main.tsx — React entry point.
+ *
+ * Mounts <App /> into #root. Loaded by index.html.
+ */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./styles/base.css";
+import "./styles/overview-events.css";
+import "./styles/repos-metrics.css";
+
+const rootEl = document.getElementById("root");
+if (!rootEl) {
+	throw new Error("dashboard-client: #root element not found in index.html");
+}
+
+createRoot(rootEl).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);

package/extensions/dashboard-client/src/styles/base.css

@@ -0,0 +1,121 @@
+/**
+ * dashboard-client/src/styles/base.css — shell + theme tokens + layout primitives.
+ *
+ * Shared by all tabs. Theme picker (Sprint C3) will override these tokens.
+ * Kept under 300 lines per project doc-length guideline.
+ */
+
+:root {
+	--bg: #0d1117;
+	--panel: #161b22;
+	--border: #30363d;
+	--text: #e6edf3;
+	--muted: #8b949e;
+	--accent: #58a6ff;
+	--ok: #3fb950;
+	--warn: #d29922;
+	--err: #f85149;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	background: var(--bg);
+	color: var(--text);
+	font-size: 14px;
+}
+
+.dashboard-app {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 16px;
+}
+
+.dashboard-header h1 {
+	font-size: 18px;
+	font-weight: 600;
+	margin: 0 0 12px;
+}
+
+.dashboard-header .tier,
+.dashboard-header .version-pill {
+	display: inline-block;
+	margin-left: 8px;
+	padding: 2px 8px;
+	font-size: 12px;
+	border-radius: 10px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	color: var(--muted);
+}
+
+.dashboard-header .tier {
+	color: var(--accent);
+}
+
+.tab-bar {
+	display: flex;
+	gap: 4px;
+	border-bottom: 1px solid var(--border);
+	margin-bottom: 16px;
+}
+
+.tab-bar button {
+	background: none;
+	border: none;
+	color: var(--muted);
+	padding: 8px 14px;
+	cursor: pointer;
+	font-size: 13px;
+	border-bottom: 2px solid transparent;
+}
+
+.tab-bar button.active {
+	color: var(--text);
+	border-bottom-color: var(--accent);
+}
+
+.tab-bar button:hover {
+	color: var(--text);
+}
+
+.dashboard-content {
+	min-height: 400px;
+}
+
+.loading-spinner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 48px;
+	color: var(--muted);
+}
+
+.error-fallback {
+	padding: 24px;
+	border: 1px solid var(--err);
+	border-radius: 8px;
+	background: rgba(248, 81, 73, 0.08);
+}
+
+.error-fallback button {
+	margin-top: 12px;
+	padding: 6px 14px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	color: var(--text);
+	border-radius: 6px;
+	cursor: pointer;
+}
+
+.tab-stub {
+	padding: 32px;
+	color: var(--muted);
+	border: 1px dashed var(--border);
+	border-radius: 8px;
+	text-align: center;
+}

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

@@ -0,0 +1,318 @@
+/**
+ * dashboard-client/src/styles/overview-events.css — Sprint C1 tab styles.
+ *
+ * Overview tab (cards, context gauge, compression, trigger, session) +
+ * Events tab (SSE stream, filters, event rows). Depends on tokens in base.css.
+ */
+
+/* Overview layout */
+.overview-tab {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.overview-header {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.tier-pill {
+	padding: 2px 10px;
+	font-size: 12px;
+	border-radius: 10px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	color: var(--accent);
+}
+
+.updated {
+	color: var(--muted);
+	font-size: 12px;
+}
+
+.card-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+	gap: 12px;
+}
+
+.card {
+	padding: 14px 16px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+}
+
+.card h3 {
+	margin: 0 0 10px;
+	font-size: 13px;
+	color: var(--muted);
+	font-weight: 600;
+}
+
+/* Context gauge */
+.gauge-bar {
+	height: 10px;
+	background: var(--bg);
+	border-radius: 5px;
+	overflow: hidden;
+	border: 1px solid var(--border);
+}
+.gauge-fill {
+	height: 100%;
+	transition: width 0.4s ease;
+}
+.gauge-green .gauge-fill {
+	background: var(--ok);
+}
+.gauge-yellow .gauge-fill {
+	background: var(--warn);
+}
+.gauge-red .gauge-fill {
+	background: var(--err);
+}
+.gauge-label {
+	margin: 8px 0 0;
+	font-size: 12px;
+	color: var(--muted);
+}
+
+/* Stat grid (shared by CompressionCard + SessionInfo) */
+.stat-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 8px;
+}
+.stat {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.stat-label {
+	font-size: 11px;
+	color: var(--muted);
+	text-transform: uppercase;
+}
+.stat-value {
+	font-size: 16px;
+	font-weight: 600;
+}
+.stat-highlight .stat-value {
+	color: var(--ok);
+}
+
+/* Trigger status */
+.bullet-row {
+	display: flex;
+	gap: 14px;
+	margin-bottom: 8px;
+}
+.bullet {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 13px;
+}
+.bullet-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--muted);
+}
+.bullet-on .bullet-dot {
+	background: var(--ok);
+	box-shadow: 0 0 6px var(--ok);
+}
+.bullet-off .bullet-dot {
+	background: var(--border);
+}
+.bullet-on .bullet-label {
+	color: var(--text);
+}
+.bullet-off .bullet-label {
+	color: var(--muted);
+}
+.trigger-detail {
+	margin: 4px 0;
+	font-size: 12px;
+	color: var(--muted);
+}
+
+/* Session info */
+.state-badge {
+	display: inline-block;
+	padding: 2px 10px;
+	font-size: 12px;
+	border-radius: 10px;
+	background: var(--bg);
+	border: 1px solid var(--border);
+}
+.state-idle,
+.state-none {
+	color: var(--muted);
+}
+.state-compacting {
+	color: var(--warn);
+	border-color: var(--warn);
+}
+.persisted-tag {
+	margin-left: 8px;
+	font-size: 11px;
+	color: var(--ok);
+}
+
+/* Events tab */
+.events-tab {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+.events-header {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+}
+.sse-status {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 12px;
+	color: var(--muted);
+}
+.sse-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--muted);
+}
+.sse-connected .sse-dot {
+	background: var(--ok);
+	box-shadow: 0 0 6px var(--ok);
+}
+.sse-connecting .sse-dot {
+	background: var(--warn);
+}
+.sse-disconnected .sse-dot,
+.sse-error .sse-dot {
+	background: var(--err);
+}
+.event-count {
+	color: var(--muted);
+	font-size: 12px;
+}
+
+.event-filters {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	align-items: center;
+	margin-bottom: 8px;
+}
+.filter-chip {
+	padding: 3px 10px;
+	font-size: 11px;
+	border: 1px solid var(--border);
+	background: var(--bg);
+	color: var(--muted);
+	border-radius: 12px;
+	cursor: pointer;
+}
+.filter-chip.active {
+	color: var(--text);
+	border-color: var(--accent);
+	background: var(--panel);
+}
+
+.event-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	max-height: 60vh;
+	overflow-y: auto;
+}
+.event-row {
+	display: grid;
+	grid-template-columns: 70px 150px 1fr;
+	gap: 8px;
+	padding: 6px 10px;
+	border-bottom: 1px solid var(--border);
+	font-size: 12px;
+	cursor: pointer;
+}
+.event-row:hover {
+	background: var(--panel);
+}
+.ev-time {
+	color: var(--muted);
+}
+.ev-type {
+	font-size: 11px;
+	padding: 1px 6px;
+	border-radius: 8px;
+	background: var(--bg);
+	border: 1px solid var(--border);
+	color: var(--muted);
+	text-align: center;
+}
+.ev-compact .ev-type {
+	color: var(--accent);
+	border-color: var(--accent);
+}
+.ev-trigger .ev-type {
+	color: var(--warn);
+	border-color: var(--warn);
+}
+.ev-tier .ev-type {
+	color: var(--muted);
+}
+.ev-checkpoint .ev-type {
+	color: var(--ok);
+	border-color: var(--ok);
+}
+.ev-recall .ev-type {
+	color: #d2a8ff;
+	border-color: #d2a8ff;
+}
+.ev-config .ev-type {
+	color: var(--text);
+}
+.ev-crew .ev-type {
+	color: #79c0ff;
+	border-color: #79c0ff;
+}
+.ev-game .ev-type {
+	color: var(--warn);
+}
+.ev-summary {
+	color: var(--text);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.ev-detail {
+	grid-column: 1 / -1;
+	margin: 6px 0 0;
+	padding: 8px;
+	background: var(--bg);
+	border-radius: 4px;
+	font-size: 11px;
+	color: var(--muted);
+	white-space: pre-wrap;
+}
+.event-empty {
+	padding: 24px;
+	color: var(--muted);
+	text-align: center;
+}
+
+@media (max-width: 768px) {
+	.card-grid {
+		grid-template-columns: 1fr;
+	}
+	.event-row {
+		grid-template-columns: 60px 110px 1fr;
+		font-size: 11px;
+	}
+}