pi-mega-compact 0.8.17 → 0.8.19

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

@@ -22,6 +22,7 @@ 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"));
+const SessionsTab = React.lazy(() => import("./tabs/SessionsTab"));
 
 export type TabId =
 	| "overview"
@@ -31,7 +32,8 @@ export type TabId =
 	| "metrics"
 	| "cache"
 	| "game"
-	| "achievements";
+	| "achievements"
+	| "sessions";
 
 const TABS: Array<{ id: TabId; label: string }> = [
 	{ id: "overview", label: "Overview" },
@@ -42,6 +44,7 @@ const TABS: Array<{ id: TabId; label: string }> = [
 	{ id: "cache", label: "Cache" },
 	{ id: "game", label: "Game" },
 	{ id: "achievements", label: "Achievements" },
+	{ id: "sessions", label: "Sessions" },
 ];
 
 export default function App(): React.ReactElement {
@@ -88,6 +91,7 @@ export default function App(): React.ReactElement {
 						{activeTab === "cache" && <CacheTab />}
 						{activeTab === "game" && <GameTab />}
 						{activeTab === "achievements" && <AchievementsTab />}
+					{activeTab === "sessions" && <SessionsTab />}
 					</React.Suspense>
 				</main>
 			</div>

package/extensions/dashboard-client/src/api/client.ts

@@ -26,6 +26,8 @@ import type {
 	PerfResponse,
 	PerfQuery,
 	AchievementRow,
+	SessionsResponse,
+	SessionTimeseriesResponse,
 } from "@contracts";
 
 /** Error thrown when a dashboard API response is not 2xx. */
@@ -143,3 +145,13 @@ export function fetchPerf(params: PerfQuery = {}): Promise<PerfResponse> {
 export function fetchAchievements(): Promise<AchievementRow[]> {
 	return getJson<AchievementRow[]>(ENDPOINTS.achievements.path);
 }
+
+export function fetchSessions(): Promise<SessionsResponse> {
+	return getJson<SessionsResponse>(ENDPOINTS.sessions.path);
+}
+
+export function fetchSessionTimeseries(minutes: number): Promise<SessionTimeseriesResponse> {
+	return getJson<SessionTimeseriesResponse>(
+		`${ENDPOINTS.sessionTimeseries.path}${query({ minutes })}`,
+	);
+}

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

@@ -0,0 +1,185 @@
+/**
+ * dashboard-client/src/components/ActiveSessionsTable.tsx — Active sessions table (S39).
+ *
+ * Per-session rows: PID, Repo, Model, Context %, Tokens/Window,
+ * Heartbeat age, State dir, Sparkline.
+ *
+ * Data from /api/sessions (active sessions list) and /api/sessions/timeseries
+ * (per-session data points used to render inline sparklines).
+ */
+
+import type React from "react";
+import type { ActiveSession, SessionSeries } from "@contracts";
+
+export interface ActiveSessionsTableProps {
+	/** Active sessions, sorted by lastSeen descending (from /api/sessions). */
+	sessions: ActiveSession[];
+	/** Per-session timeseries used to render the inline sparkline column. */
+	series: SessionSeries[];
+}
+
+const HEADERS = [
+	"PID",
+	"Repo",
+	"Model",
+	"Context %",
+	"Tokens / Window",
+	"Last Heartbeat",
+	"State Dir",
+	"Trend",
+] as const;
+
+/** Format a duration in milliseconds → human-readable age string. */
+function fmtAge(ms: number): string {
+	const s = Math.max(0, Math.round(ms / 1000));
+	if (s < 60) return `${s}s ago`;
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m ${s % 60}s ago`;
+	const h = Math.floor(m / 60);
+	return `${h}h ${m % 60}m ago`;
+}
+
+function fmtTokens(n: number | null): string {
+	if (n == null) return "\u2014";
+	if (n >= 100_000) return `${(n / 1000).toFixed(0)}k`;
+	if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+	return n.toLocaleString();
+}
+
+function pctClass(pct: number | null): string {
+	if (pct == null) return "sessions-pct-ok";
+	if (pct >= 85) return "sessions-pct-err";
+	if (pct >= 60) return "sessions-pct-warn";
+	return "sessions-pct-ok";
+}
+
+function fmtPct(pct: number | null): string {
+	if (pct == null) return "\u2014";
+	return `${Math.round(pct)}%`;
+}
+
+function fmtWindow(tokens: number | null, window: number): string {
+	if (tokens == null) return "\u2014";
+	return `${fmtTokens(tokens)} / ${fmtTokens(window)}`;
+}
+
+interface SparklineProps {
+	/** Token counts over time (oldest → newest). */
+	points: number[];
+	/** Stable hex color for the stroke. */
+	color: string;
+}
+
+function Sparkline({ points, color }: SparklineProps): React.ReactElement {
+	if (points.length < 2) {
+		return <span className="sessions-sparkline-empty">{"\u2014"}</span>;
+	}
+	const min = Math.min(...points);
+	const max = Math.max(...points);
+	const range = max - min || 1;
+	const w = 64;
+	const h = 18;
+	const stepX = w / (points.length - 1);
+	const segments = points.map((p, i) => {
+		const x = i * stepX;
+		const y = h - ((p - min) / range) * h;
+		return `${i === 0 ? "M" : "L"} ${x.toFixed(1)} ${y.toFixed(1)}`;
+	});
+	return (
+		<svg
+			className="sessions-sparkline"
+			width={w}
+			height={h}
+			viewBox={`0 0 ${w} ${h}`}
+			role="img"
+			aria-label="token trend"
+		>
+			<path
+				d={segments.join(" ")}
+				fill="none"
+				stroke={color}
+				strokeWidth="1.5"
+				strokeLinejoin="round"
+				strokeLinecap="round"
+			/>
+		</svg>
+	);
+}
+
+/** Map sessionId → series for the sparkline column lookup. */
+function indexSeries(
+	series: SessionSeries[],
+): Map<string, SessionSeries> {
+	const m = new Map<string, SessionSeries>();
+	for (const s of series) m.set(s.sessionId, s);
+	return m;
+}
+
+export function ActiveSessionsTable({
+	sessions,
+	series,
+}: ActiveSessionsTableProps): React.ReactElement {
+	const seriesById = indexSeries(series);
+	const now = Date.now();
+
+	return (
+		<div className="sessions-table-scroll">
+			<table className="sessions-table">
+				<thead>
+					<tr>
+						{HEADERS.map((h, i) => (
+							<th
+								key={h}
+								className={i >= 3 && i !== 6 ? "num" : undefined}
+							>
+								{h}
+							</th>
+						))}
+					</tr>
+				</thead>
+				<tbody>
+					{sessions.length === 0 && (
+						<tr className="sessions-empty-row">
+							<td colSpan={HEADERS.length}>No active sessions.</td>
+						</tr>
+					)}
+					{sessions.map((s) => {
+						const srs = seriesById.get(s.sessionId);
+						const sparkPts =
+							srs?.data.map((d) => d.tokens) ?? [];
+						const color = srs?.color ?? "#58a6ff";
+						return (
+							<tr key={`${s.pid}:${s.sessionId}`}>
+								<td className="num">{s.pid}</td>
+								<td title={s.repoRoot ?? undefined}>
+									{s.displayName || s.repoRoot || "\u2014"}
+								</td>
+								<td>{s.model ?? "\u2014"}</td>
+								<td className="num">
+									<span className={`sessions-pct-pill ${pctClass(s.percent)}`}>
+										{fmtPct(s.percent)}
+									</span>
+								</td>
+								<td className="num">
+									{fmtWindow(s.tokens, s.ctxWindow)}
+								</td>
+								<td className="num">{fmtAge(now - s.lastSeen)}</td>
+								<td
+									title={s.stateDir ?? undefined}
+									className="sessions-meta"
+								>
+									{s.stateDir
+										? s.stateDir.split("/").pop() || s.stateDir
+										: "\u2014"}
+								</td>
+								<td>
+									<Sparkline points={sparkPts} color={color} />
+								</td>
+							</tr>
+						);
+					})}
+				</tbody>
+			</table>
+		</div>
+	);
+}

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

@@ -30,6 +30,7 @@ const TYPE_COLORS: Record<string, string> = {
 	crew_presence_changed: "ev-crew",
 	crew_turn_changed: "ev-crew",
 	crew_bandit_chosen: "ev-crew",
+	session_sample: "ev-recall",
 	game_ritual_start: "ev-game",
 	game_ritual_stage: "ev-game",
 	game_ritual_end: "ev-game",
@@ -81,6 +82,8 @@ function summarize(ev: SseEvent): string {
 			return `turn=${ev.turnIndex} agent=${ev.agentName}`;
 		case "crew_bandit_chosen":
 			return `agent=${ev.chosenAgent} score=${ev.score} regret=${ev.regret}`;
+		case "session_sample":
+			return `sess=${ev.sessionId.slice(0, 8)} tok=${ev.tokens.toLocaleString()} ctx=${Math.round(ev.percent)}%`;
 		case "game_ritual_start":
 		case "game_ritual_stage":
 		case "game_ritual_end":

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

@@ -0,0 +1,238 @@
+/**
+ * dashboard-client/src/components/RepoContextStack.tsx — Stacked per-repo context bar (S40).
+ *
+ * Horizontal stacked bar: one colored segment per active repo, aggregating
+ * that repo's active sessions' token counts. Renders a combined total line
+ * and a legend mapping each repo (basename of repoRoot) to its segment color
+ * + token count + % of total.
+ *
+ * Stable per-repo colors: the repoRoot basename is hashed to a deterministic
+ * index into a fixed palette array, so the same repo always gets the same
+ * color across renders/tabs (mirrors SessionsMemoryChart's stable-color
+ * contract from S39).
+ *
+ * PREVENT-PI-004: this is a pure presentational component — no fetch, no
+ * network. Data is passed in by the parent (OverviewTab) via
+ * useApi(fetchSessions) + useSSE() for real-time updates.
+ */
+
+import type React from "react";
+import type { ActiveSession, SessionsResponse } from "@contracts";
+
+export interface RepoContextStackProps {
+	/** Active sessions from /api/sessions (may be null while loading). */
+	sessions: SessionsResponse | null;
+	/** Whether the initial fetch is in flight. */
+	loading: boolean;
+	/** Fetch error, if any. */
+	error: Error | null;
+}
+
+// ─── Stable color palette ─────────────────────────────────────────────────────
+// Fixed set of hex colors used for stable per-repo coloring. The hash function
+// maps a repoRoot basename to a deterministic palette index so the same repo
+// always renders the same color.
+const REPO_PALETTE: ReadonlyArray<string> = [
+	"#58a6ff", // blue
+	"#3fb950", // green
+	"#d29922", // yellow
+	"#f85149", // red
+	"#bc8cff", // purple
+	"#ff7b72", // salmon
+	"#79c0ff", // light blue
+	"#56d4dd", // cyan
+	"#e3b341", // gold
+	"#a5d6ff", // pale blue
+	"#7ee787", // mint
+	"#ffa657", // orange
+];
+
+/**
+ * Simple deterministic string hash (djb2 variant). Returns a non-negative
+ * 32-bit integer.
+ */
+function hashString(str: string): number {
+	let hash = 5381;
+	for (let i = 0; i < str.length; i++) {
+		hash = ((hash << 5) + hash + str.charCodeAt(i)) >>> 0;
+	}
+	return hash;
+}
+
+/**
+ * Pick a stable color for a repoRoot basename. Falls back to "(unknown)" if
+ * the basename is empty.
+ */
+function colorForRepo(basename: string): string {
+	if (!basename) return REPO_PALETTE[0];
+	return REPO_PALETTE[hashString(basename) % REPO_PALETTE.length];
+}
+
+/**
+ * Extract the basename from a repoRoot path. Uses `"/"` as the universal
+ * separator on all OSes (repoRoot is an absolute path from the dashboard
+ * server; on Windows pi actually uses forward-slash normalized paths anyway).
+ */
+function repoBasename(repoRoot: string | null): string {
+	if (!repoRoot) return "(unknown)";
+	const trimmed = repoRoot.replace(/[\\/]+$/, "");
+	if (!trimmed) return "(unknown)";
+	const parts = trimmed.split(/[\\/]/);
+	const last = parts[parts.length - 1];
+	return last || trimmed;
+}
+
+// ─── Aggregation ─────────────────────────────────────────────────────────────
+
+interface RepoAggregate {
+	repoRoot: string | null;
+	basename: string;
+	tokens: number;
+	color: string;
+}
+
+function aggregateRepos(sessions: ReadonlyArray<ActiveSession>): {
+	repos: RepoAggregate[];
+	totalTokens: number;
+	maxWindow: number;
+	sessionCount: number;
+} {
+	const map = new Map<string, RepoAggregate>();
+	for (const s of sessions) {
+		const key = s.repoRoot ?? "__null__";
+		const tokens = s.tokens ?? 0;
+		const existing = map.get(key);
+		if (existing) {
+			existing.tokens += tokens;
+		} else {
+			const basename = repoBasename(s.repoRoot);
+			map.set(key, {
+				repoRoot: s.repoRoot,
+				basename,
+				tokens,
+				color: colorForRepo(basename),
+			});
+		}
+	}
+	const repos = [...map.values()];
+	const totalTokens = repos.reduce((sum, r) => sum + r.tokens, 0);
+	// Combined max window: the largest ctxWindow among the active sessions.
+	// This mirrors SessionsTab's SummaryTiles combined-% logic.
+	const maxWindow = sessions.reduce(
+		(max, s) => Math.max(max, s.ctxWindow),
+		0,
+	);
+	return {
+		repos,
+		totalTokens,
+		maxWindow,
+		sessionCount: sessions.length,
+	};
+}
+
+function fmtTokens(n: number): string {
+	if (n >= 100_000) return `${(n / 1000).toFixed(0)}k`;
+	return n.toLocaleString();
+}
+
+export function RepoContextStack({
+	sessions,
+	loading,
+	error,
+}: RepoContextStackProps): React.ReactElement | null {
+	if (error) {
+		return (
+			<div className="card repo-stack-card">
+				<h3>Context per Repo (live)</h3>
+				<div className="sessions-empty">
+					Error loading sessions: {error.message}
+				</div>
+			</div>
+		);
+	}
+
+	if (loading && !sessions) {
+		return (
+			<div className="card repo-stack-card">
+				<h3>Context per Repo (live)</h3>
+				<div className="sessions-empty">Loading sessions…</div>
+			</div>
+		);
+	}
+
+	const activeSessions = sessions?.sessions ?? [];
+	const { repos, totalTokens, maxWindow, sessionCount } =
+		aggregateRepos(activeSessions);
+
+	if (repos.length === 0) {
+		return (
+			<div className="card repo-stack-card">
+				<h3>Context per Repo (live)</h3>
+				<div className="sessions-empty">No active sessions.</div>
+			</div>
+		);
+	}
+
+	const combinedPct =
+		maxWindow > 0 ? Math.round((totalTokens / maxWindow) * 100) : 0;
+
+	return (
+		<div className="card repo-stack-card">
+			<h3>Context per Repo (live)</h3>
+			<div
+				className="repo-stack-bar"
+				role="group"
+				aria-label="Per-repo context usage"
+			>
+				{repos.map((r) => {
+					const pctOfTotal =
+						totalTokens > 0 ? (r.tokens / totalTokens) * 100 : 0;
+					const widthPct = totalTokens > 0 ? pctOfTotal : 0;
+					const tooltip =
+						`${r.basename}: ${fmtTokens(r.tokens)} tokens ` +
+						`(${pctOfTotal.toFixed(1)}% of total)`;
+					return (
+						<div
+							key={r.repoRoot ?? "__null__"}
+							className="repo-stack-segment"
+							style={{
+								width: `${Math.max(widthPct, 0.5)}%`,
+								backgroundColor: r.color,
+							}}
+							title={tooltip}
+							aria-label={tooltip}
+						/>
+					);
+				})}
+			</div>
+			<p className="repo-stack-total">
+				{fmtTokens(totalTokens)} tokens across {repos.length}{" "}
+				{repos.length === 1 ? "repo" : "repos"} /{" "}
+				{sessionCount}{" "}
+				{sessionCount === 1 ? "session" : "sessions"}{" "}
+				<span className="pct">— {combinedPct}% of combined max window</span>
+			</p>
+			<div className="repo-stack-legend">
+				{repos.map((r) => {
+					const pctOfTotal =
+						totalTokens > 0 ? (r.tokens / totalTokens) * 100 : 0;
+					return (
+						<div
+							key={r.repoRoot ?? "__null__"}
+							className="repo-stack-legend-item"
+						>
+							<span
+								className="repo-stack-legend-swatch"
+								style={{ backgroundColor: r.color }}
+							/>
+							<span className="repo-stack-legend-name">{r.basename}</span>
+							<span>
+								{fmtTokens(r.tokens)} ({pctOfTotal.toFixed(0)}%)
+							</span>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,199 @@
+/**
+ * dashboard-client/src/components/SessionsMemoryChart.tsx — Stacked memory graph (S39).
+ *
+ * Recharts stacked `<Area>` per session + total `<Line>` + `<Tooltip>` +
+ * `<Legend>` + `<ResponsiveContainer>`. Data comes from `/api/sessions/timeseries`
+ * which returns `SessionSeries[]` (per-session data points + stable hex color)
+ * and a `totals[]` array (sum across all sessions per timestamp).
+ *
+ * PREVENT-PI-004: recharts is bundled into this localhost-served static
+ * dashboard bundle; it makes no runtime network calls. Chart data arrives via
+ * same-origin fetch to the dashboard server (loopback, ports 9320–9329).
+ */
+
+import type React from "react";
+import { useMemo } from "react";
+import {
+	ResponsiveContainer,
+	AreaChart,
+	Area,
+	Line,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	Legend,
+} from "recharts";
+import type { SessionSeries } from "@contracts";
+
+export interface SessionsMemoryChartProps {
+	/** Per-session series with stable colors (from /api/sessions/timeseries). */
+	series: SessionSeries[];
+	/** Totals (sum across all sessions) per timestamp. */
+	totals: ReadonlyArray<{ ts: number; tokens: number }>;
+}
+
+/** A row in the pivoted data table passed to recharts `<AreaChart>`. */
+interface PivotedRow {
+	/** Unix timestamp (ms). */
+	ts: number;
+	/** Total tokens across all sessions at this timestamp. */
+	total: number;
+	/** Per-session token count keyed by sessionId. */
+	[sessionId: string]: number;
+}
+
+/**
+ * Pivot the per-session series + totals into recharts' expected flat shape:
+ * one row per unique timestamp, with each session's token count as a column
+ * keyed by sessionId. Missing values for a session at a given timestamp are
+ * filled with zero so the stack renders continuously.
+ */
+function pivot(
+	series: SessionSeries[],
+	totals: ReadonlyArray<{ ts: number; tokens: number }>,
+): PivotedRow[] {
+	const map = new Map<number, PivotedRow>();
+	const sessionIds = series.map((s) => s.sessionId);
+
+	for (const s of series) {
+		for (const pt of s.data) {
+			let row = map.get(pt.ts);
+			if (!row) {
+				row = { ts: pt.ts, total: 0 } as PivotedRow;
+				for (const sid of sessionIds) row[sid] = 0;
+				map.set(pt.ts, row);
+			}
+			row[s.sessionId] = pt.tokens;
+		}
+	}
+	for (const t of totals) {
+		let row = map.get(t.ts);
+		if (!row) {
+			row = { ts: t.ts, total: 0 } as PivotedRow;
+			for (const sid of sessionIds) row[sid] = 0;
+			map.set(t.ts, row);
+		}
+		row.total = t.tokens;
+	}
+
+	return [...map.values()].sort((a, b) => a.ts - b.ts);
+}
+
+function fmtTs(ts: number): string {
+	return new Date(ts).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+	});
+}
+
+function fmtTokens(value: number | string): string {
+	const n = Number(value);
+	return Number.isFinite(n) ? n.toLocaleString() : String(value);
+}
+
+/** Sanitize an arbitrary sessionId for use in an SVG gradient id. */
+function gradId(sessionId: string): string {
+	const safe = sessionId.replace(/[^a-zA-Z0-9_-]/g, "_");
+	return `grad-${safe}`;
+}
+
+export function SessionsMemoryChart({
+	series,
+	totals,
+}: SessionsMemoryChartProps): React.ReactElement {
+	const data = useMemo(
+		() => pivot(series, totals),
+		[series, totals],
+	);
+
+	if (series.length === 0) {
+		return (
+			<div className="sessions-chart-empty">
+				No token samples in this window yet.
+			</div>
+		);
+	}
+
+	return (
+		<div className="sessions-chart">
+			<ResponsiveContainer width="100%" height={360}>
+				<AreaChart
+					data={data}
+					margin={{ top: 8, right: 16, left: 0, bottom: 0 }}
+				>
+					<defs>
+						{series.map((s) => (
+							<linearGradient
+								key={`${s.sessionId}-grad`}
+								id={gradId(s.sessionId)}
+								x1="0"
+								y1="0"
+								x2="0"
+								y2="1"
+							>
+								<stop offset="5%" stopColor={s.color} stopOpacity={0.7} />
+								<stop offset="95%" stopColor={s.color} stopOpacity={0.25} />
+							</linearGradient>
+						))}
+					</defs>
+					<CartesianGrid strokeDasharray="3 3" stroke="#30363d" />
+					<XAxis
+						dataKey="ts"
+						type="number"
+						domain={["dataMin", "dataMax"]}
+						tickFormatter={(ts: number) => fmtTs(ts)}
+						stroke="#8b949e"
+						tick={{ fontSize: 11 }}
+						scale="time"
+					/>
+					<YAxis
+						stroke="#8b949e"
+						tick={{ fontSize: 11 }}
+						width={56}
+						tickFormatter={(v: number) => fmtTokens(v)}
+					/>
+					<Tooltip
+						labelFormatter={(ts: number) => fmtTs(ts)}
+						formatter={(value) =>
+							[fmtTokens(value as number), "tokens"] as [string, string]
+						}
+						contentStyle={{
+							background: "#161b22",
+							border: "1px solid #30363d",
+							borderRadius: "6px",
+							color: "#e6edf3",
+						}}
+						labelStyle={{ color: "#8b949e", fontSize: 12 }}
+					/>
+					<Legend wrapperStyle={{ fontSize: 12 }} />
+					{series.map((s) => (
+						<Area
+							key={s.sessionId}
+							type="monotone"
+							dataKey={s.sessionId}
+							name={s.label}
+							stackId="1"
+							stroke={s.color}
+							fill={`url(#${gradId(s.sessionId)})`}
+							fillOpacity={1}
+							isAnimationActive={false}
+							dot={false}
+						/>
+					))}
+					<Line
+						type="monotone"
+						dataKey="total"
+						name="Total"
+						stroke="#e6edf3"
+						strokeWidth={1.5}
+						strokeDasharray="4 2"
+						dot={false}
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ResponsiveContainer>
+		</div>
+	);
+}

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

@@ -15,6 +15,8 @@ import "./styles/overview-extra.css";
 import "./styles/config.css";
 import "./styles/metrics-extra.css";
 import "./styles/game-achievements.css";
+import "./styles/sessions.css";
+import "./styles/repostack.css";
 
 const rootEl = document.getElementById("root");
 if (!rootEl) {