pi-mega-compact 0.8.17 → 0.8.19

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

@@ -0,0 +1,87 @@
+/**
+ * dashboard-client/src/styles/repostack.css — Stacked per-repo context bar (S40).
+ *
+ * Horizontal stacked bar: one colored segment per active repo (aggregating
+ * token counts across that repo's active sessions). Depends on base.css
+ * tokens (--panel, --border, --text, --muted, --accent, --ok, --warn, --err).
+ */
+
+.repo-stack-card {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.repo-stack-card h3 {
+	margin: 0;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--text);
+}
+
+.repo-stack-bar {
+	display: flex;
+	width: 100%;
+	height: 22px;
+	border-radius: 6px;
+	overflow: hidden;
+	border: 1px solid var(--border);
+	background: var(--bg);
+}
+
+.repo-stack-segment {
+	height: 100%;
+	min-width: 2px;
+	transition: opacity 0.15s, filter 0.15s;
+}
+
+.repo-stack-segment:hover {
+	opacity: 0.85;
+	filter: brightness(1.15);
+}
+
+.repo-stack-total {
+	font-size: 13px;
+	color: var(--text);
+	font-variant-numeric: tabular-nums;
+}
+
+.repo-stack-total .pct {
+	color: var(--muted);
+}
+
+.repo-stack-legend {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+	gap: 6px;
+}
+
+.repo-stack-legend-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 12px;
+	color: var(--muted);
+	font-variant-numeric: tabular-nums;
+}
+
+.repo-stack-legend-swatch {
+	flex-shrink: 0;
+	width: 12px;
+	height: 12px;
+	border-radius: 3px;
+	border: 1px solid var(--border);
+}
+
+.repo-stack-legend-name {
+	color: var(--text);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+	.repo-stack-legend {
+		grid-template-columns: 1fr;
+	}
+}

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 = {

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

@@ -18,9 +18,19 @@
  */
 
 import type React from "react";
-import type { SnapshotResponse } from "@contracts";
+import { useCallback, useEffect, useMemo } from "react";
+import { useApi } from "../hooks/useApi";
+import { useSSE } from "../hooks/useSSE";
+import { fetchSessions } from "../api/client";
+import type {
+	SnapshotResponse,
+	SseEvent,
+	SseSessionSample,
+	SessionsResponse,
+} from "@contracts";
 import type { RuntimeSnapshot } from "../utils/types";
 import { ContextGauge } from "../components/ContextGauge";
+import { RepoContextStack } from "../components/RepoContextStack";
 import { TriggerStatus } from "../components/TriggerStatus";
 import { VectorStoreCard } from "../components/VectorStoreCard";
 import { RepoAllSessionsCard } from "../components/RepoAllSessionsCard";
@@ -32,6 +42,11 @@ import { CacheHitsCard } from "../components/CacheHitsCard";
 import { TimeSavedCard } from "../components/TimeSavedCard";
 import { LegendCard } from "../components/LegendCard";
 
+/** Type guard: narrows an SSE event to a session_sample event. */
+function isSessionSample(e: SseEvent): e is SseSessionSample {
+	return e.type === "session_sample";
+}
+
 export interface OverviewTabProps {
 	snapshot: SnapshotResponse | null;
 	loading: boolean;
@@ -52,6 +67,34 @@ export default function OverviewTab({
 	loading,
 	error,
 }: OverviewTabProps): React.ReactElement {
+	// S40: real-time per-repo context via /api/sessions + SSE. Mirrors the
+	// SessionsTab pattern: 2s poll + session_sample SSE refetch.
+	const {
+		data: sessionsData,
+		error: sessionsErr,
+		loading: sessionsLoading,
+		refetch: refetchSessions,
+	} = useApi<SessionsResponse>(
+		useCallback(() => fetchSessions(), []),
+		{ pollInterval: 2_000 },
+	);
+
+	const { events } = useSSE();
+
+	const sampleEvents = useMemo(
+		() => events.filter(isSessionSample),
+		[events],
+	);
+	const lastSampleTs = useMemo(() => {
+		if (sampleEvents.length === 0) return null;
+		return sampleEvents[sampleEvents.length - 1].ts;
+	}, [sampleEvents]);
+
+	useEffect(() => {
+		if (lastSampleTs == null) return;
+		refetchSessions();
+	}, [lastSampleTs, refetchSessions]);
+
 	if (loading && !snapshot)
 		return <div className="tab-stub">Loading snapshot…</div>;
 	if (error && !snapshot)
@@ -83,6 +126,11 @@ export default function OverviewTab({
 					percent={context.percent}
 					contextWindow={context.contextWindow}
 				/>
+				<RepoContextStack
+					sessions={sessionsData}
+					loading={sessionsLoading}
+					error={sessionsErr}
+				/>
 				<TriggerStatus
 					armed={trigger.armed}
 					ready={trigger.ready}

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

@@ -0,0 +1,193 @@
+/**
+ * dashboard-client/src/tabs/SessionsTab.tsx — Sessions tab (S39).
+ *
+ * Renders: window selector (5/15/30/60 min), sessions summary tiles,
+ * the stacked-memory graph (SessionsMemoryChart), and the active sessions
+ * table (ActiveSessionsTable).
+ *
+ * Data sources: fetchSessions() + fetchSessionTimeseries(minutes). Both poll
+ * every 2s for near-real-time updates. useSSE() listens for session_sample
+ * events emitted by appendTokenSample (Step 5) so the chart refetches
+ * instantly between polls when a new token sample is appended to events.log.
+ *
+ * Empty state: shows "No active sessions." when the /api/sessions response
+ * returns an empty array (e.g. no pi processes are running yet).
+ */
+
+import type React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useApi } from "../hooks/useApi";
+import { useSSE } from "../hooks/useSSE";
+import { fetchSessions, fetchSessionTimeseries } from "../api/client";
+import type { SseEvent, SseSessionSample, SessionsResponse, SessionTimeseriesResponse } from "@contracts";
+import { SessionsMemoryChart } from "../components/SessionsMemoryChart";
+import { ActiveSessionsTable } from "../components/ActiveSessionsTable";
+
+/**
+ * Shape of the {@link SseSessionSample} SSE event appended to events.log by
+ * `appendTokenSample` (src/store/sqlite/global-index.ts). The contract now
+ * defines this variant as part of the {@link SseEvent} union (Step 5); the
+ * local alias keeps the surface terser in this file.
+ */
+type SessionSampleEvent = SseSessionSample;
+
+/** Type guard: narrows an SSE event to a session_sample event. */
+function isSessionSample(
+	e: SseEvent,
+): e is SessionSampleEvent {
+	return e.type === "session_sample";
+}
+
+const WINDOWS: ReadonlyArray<{ value: number; label: string }> = [
+	{ value: 5, label: "5m" },
+	{ value: 15, label: "15m" },
+	{ value: 30, label: "30m" },
+	{ value: 60, label: "60m" },
+] as const;
+
+interface SummaryTilesProps {
+	sessions: SessionsResponse;
+}
+
+function SummaryTiles({ sessions }: SummaryTilesProps): React.ReactElement {
+	const active = sessions.sessions.length;
+	const combinedTokens = sessions.sessions.reduce(
+		(sum, s) => sum + (s.tokens ?? 0),
+		0,
+	);
+	const maxWindow = sessions.sessions.reduce(
+		(max, s) => Math.max(max, s.ctxWindow),
+		0,
+	);
+	const combinedPct = maxWindow > 0 ? (combinedTokens / maxWindow) * 100 : 0;
+	return (
+		<div className="sessions-summary-tiles">
+			<div className="tile">
+				<span className="tile-label">Active sessions</span>
+				<span className="tile-value">{active}</span>
+			</div>
+			<div className="tile">
+				<span className="tile-label">Combined tokens</span>
+				<span className="tile-value">
+					{combinedTokens >= 100_000
+						? `${(combinedTokens / 1000).toFixed(0)}k`
+						: combinedTokens.toLocaleString()}
+				</span>
+			</div>
+			<div className="tile">
+				<span className="tile-label">Combined % of max window</span>
+				<span className="tile-value">{Math.round(combinedPct)}%</span>
+			</div>
+			<div className="tile">
+				<span className="tile-label">Pruned (stale)</span>
+				<span className="tile-value">{sessions.pruned}</span>
+			</div>
+		</div>
+	);
+}
+
+export default function SessionsTab(): React.ReactElement {
+	const [minutes, setMinutes] = useState(30);
+
+	const {
+		data: sessionsData,
+		error: sessionsErr,
+		refetch: refetchSessions,
+	} = useApi<SessionsResponse>(
+		useCallback(() => fetchSessions(), []),
+		{ pollInterval: 2_000 },
+	);
+
+	const {
+		data: timeseriesData,
+		error: timeseriesErr,
+		refetch: refetchTimeseries,
+	} = useApi<SessionTimeseriesResponse>(
+		useCallback(() => fetchSessionTimeseries(minutes), [minutes]),
+		{ pollInterval: 2_000 },
+	);
+
+	const { events } = useSSE();
+
+	// Filter SSE events for session_sample pushes (Step 5) and trigger an
+	// immediate refetch when a new sample arrives, so the chart updates
+	// between the 2s polls. The events array grows as new samples arrive; the
+	// length-based dependency means the effect re-runs when a new sample event
+	// lands (not on every poll). We debounce via a microtask guard.
+	const sampleEvents = useMemo(
+		() => events.filter(isSessionSample),
+		[events],
+	);
+
+	const lastSampleTs = useMemo(() => {
+		if (sampleEvents.length === 0) return null;
+		return sampleEvents[sampleEvents.length - 1].ts;
+	}, [sampleEvents]);
+
+	useEffect(() => {
+		if (lastSampleTs == null) return;
+		refetchSessions();
+		refetchTimeseries();
+	}, [lastSampleTs, refetchSessions, refetchTimeseries]);
+
+	if (sessionsErr && !sessionsData) {
+		return (
+			<div className="tab-stub">
+				Error loading sessions: {sessionsErr.message}
+			</div>
+		);
+	}
+	if (timeseriesErr && !timeseriesData) {
+		return (
+			<div className="tab-stub">
+				Error loading timeseries: {timeseriesErr.message}
+			</div>
+		);
+	}
+	if (!sessionsData) {
+		return <div className="tab-stub">Loading sessions…</div>;
+	}
+
+	const sessions = sessionsData.sessions;
+	const series = timeseriesData?.series ?? [];
+	const totals = timeseriesData?.totals ?? [];
+	const windowLabel =
+		WINDOWS.find((w) => w.value === minutes)?.label ?? `${minutes}m`;
+
+	return (
+		<div className="sessions-tab">
+			<div className="sessions-toolbar">
+				<h2>Session Memory Graph</h2>
+				<div className="sessions-window-select">
+					{WINDOWS.map((w) => (
+						<button
+							key={w.value}
+							type="button"
+							className={`sessions-window-btn ${minutes === w.value ? "active" : ""}`}
+							onClick={() => setMinutes(w.value)}
+							aria-pressed={minutes === w.value}
+						>
+							{w.label}
+						</button>
+					))}
+				</div>
+			</div>
+
+			{sessions.length === 0 ? (
+				<div className="sessions-empty">No active sessions.</div>
+			) : (
+				<>
+					<SummaryTiles sessions={sessionsData} />
+					<SessionsMemoryChart series={series} totals={totals} />
+					<h2 className="section-header">Active Sessions</h2>
+					<ActiveSessionsTable sessions={sessions} series={series} />
+					<div className="sessions-footer">
+						{series.length} series · {totals.length} timestamps ·{" "}
+						{windowLabel} window · updated{" "}
+						{timeseriesData?.updatedAt ?? sessionsData.updatedAt}
+					</div>
+				</>
+			)}
+		</div>
+	);
+}

package/extensions/dashboard-server/api-contracts/core.ts

@@ -300,3 +300,28 @@ export interface SseCrewBanditChosen {
   /** Cumulative regret of the bandit policy (dimensionless). */
   regret: number;
 }
+
+/**
+ * SSE event appened to events.log by `appendTokenSample`
+ * (src/store/sqlite/global-index.ts) on every material snapshot. The existing
+ * `GET /api/events` SSE handler tails events.log line-by-line, so these
+ * `session_sample` lines stream to the dashboard client for free
+ * (real-time chart updates between the 2s polls in the Sessions tab).
+ *
+ * Wire shape mirrors {@link SseCompactStart} etc. with `ts` (ISO 8601 string)
+ * plus `type` (`'session_sample'`) and the per-session payload.
+ *
+ * Served via `GET /api/events` (Server-Sent Events stream).
+ */
+export interface SseSessionSample {
+  /** Discriminator. Always `'session_sample'`. */
+  type: 'session_sample';
+  /** ISO 8601 timestamp of the sample (coincides with the token_samples row `ts`). */
+  ts: string;
+  /** Session identifier the sample belongs to. */
+  sessionId: string;
+  /** Context window token count at this sample (tokens). */
+  tokens: number;
+  /** Context pressure percentage (0–100). */
+  percent: number;
+}