pi-mega-compact 0.8.16 → 0.8.18

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/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,7 @@ import "./styles/overview-extra.css";
 import "./styles/config.css";
 import "./styles/metrics-extra.css";
 import "./styles/game-achievements.css";
+import "./styles/sessions.css";
 
 const rootEl = document.getElementById("root");
 if (!rootEl) {

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

@@ -0,0 +1,193 @@
+/**
+ * dashboard-client/src/styles/sessions.css — Sessions tab (S39).
+ *
+ * Stacked memory graph + active sessions table. Depends on base.css
+ * tokens (--panel, --border, --text, --muted, --accent, --ok, --warn,
+ * --err). Mirrors the conventions in repos-metrics.css + metrics-extra.css.
+ */
+
+.sessions-tab {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+
+.sessions-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 0;
+}
+
+.sessions-toolbar h2 {
+	margin: 0;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--text);
+}
+
+.sessions-window-select {
+	display: inline-flex;
+	gap: 2px;
+	padding: 2px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+}
+
+.sessions-window-btn {
+	padding: 4px 10px;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	color: var(--muted);
+	font-size: 12px;
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+}
+
+.sessions-window-btn:hover {
+	color: var(--text);
+}
+
+.sessions-window-btn.active {
+	background: var(--accent);
+	color: #0d1117;
+	font-weight: 600;
+}
+
+.sessions-summary-tiles {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+	gap: 10px;
+}
+
+.sessions-chart {
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	padding: 12px;
+}
+
+.sessions-chart-empty,
+.sessions-empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 160px;
+	color: var(--muted);
+	font-size: 14px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	padding: 32px;
+	text-align: center;
+}
+
+.sessions-table-scroll {
+	overflow-x: auto;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 8px;
+}
+
+.sessions-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 13px;
+}
+
+.sessions-table th,
+.sessions-table td {
+	padding: 8px 10px;
+	text-align: left;
+	border-bottom: 1px solid var(--border);
+	white-space: nowrap;
+}
+
+.sessions-table th {
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: var(--muted);
+	background: rgba(255, 255, 255, 0.02);
+	position: sticky;
+	top: 0;
+}
+
+.sessions-table td.num {
+	text-align: right;
+	font-variant-numeric: tabular-nums;
+}
+
+.sessions-table tr:last-child td {
+	border-bottom: none;
+}
+
+.sessions-table tr:hover td {
+	background: rgba(88, 166, 255, 0.06);
+}
+
+.sessions-empty-row td {
+	color: var(--muted);
+	font-style: italic;
+	text-align: center;
+}
+
+.sessions-pct-pill {
+	display: inline-block;
+	padding: 2px 8px;
+	border-radius: 10px;
+	font-size: 11px;
+	font-weight: 600;
+	font-variant-numeric: tabular-nums;
+}
+
+.sessions-pct-ok {
+	background: rgba(63, 185, 80, 0.15);
+	color: var(--ok);
+}
+
+.sessions-pct-warn {
+	background: rgba(210, 153, 34, 0.15);
+	color: var(--warn);
+}
+
+.sessions-pct-err {
+	background: rgba(248, 81, 73, 0.15);
+	color: var(--err);
+}
+
+.sessions-sparkline {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.sessions-sparkline-empty {
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.sessions-meta {
+	font-size: 11px;
+	color: var(--muted);
+}
+
+.sessions-footer {
+	font-size: 11px;
+	color: var(--muted);
+	margin-top: 6px;
+}
+
+@media (max-width: 640px) {
+	.sessions-summary-tiles {
+		grid-template-columns: 1fr;
+	}
+	.sessions-table th,
+	.sessions-table td {
+		font-size: 12px;
+		padding: 6px 8px;
+	}
+}

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

@@ -29,10 +29,13 @@ interface FlatGameState {
 }
 type FlatGameStatePatch = Partial<FlatGameState>;
 
-/** Extended snapshot config — the runtime includes tierPct (not in contract). */
-interface ConfigExt extends SnapshotResponse["config"] {
+/** Extended snapshot config — the runtime includes tierPct (not in contract).
+ * Implemented as a type intersection rather than `interface extends` because
+ * TypeScript (TS2499) forbids `interface extends T["k"]` indexed-access
+ * parents; the resulting type is structurally identical. */
+type ConfigExt = SnapshotResponse["config"] & {
 	tierPct?: number | null;
-}
+};
 
 /* Tooltips copied verbatim from extensions/dashboard-server/html.ts */
 const TOOLTIPS = {