pi-mega-compact 0.11.2 → 0.11.3

package/extensions/dashboard-client/dist/assets/{useSSE-Cezlih5V.js → useSSE-BBYt5UPB.js}

@@ -1,2 +1,2 @@
-import{r as e}from"./index-BcoSz-L4.js";function R(i={}){const{maxEvents:c=500,maxReconnects:l=5}=i,[f,v]=e.useState([]),[E,n]=e.useState("connecting"),[S,p]=e.useState(0),[m,d]=e.useState(null),o=e.useRef(0),s=e.useRef(null),r=e.useCallback(()=>{s.current&&s.current.close(),n("connecting");const t=new EventSource("/api/events");s.current=t,t.onopen=()=>{n("connected"),o.current=0},t.onmessage=g=>{try{const x=JSON.parse(g.data);v(u=>{const a=[...u,x];return a.length>c?a.slice(-c):a}),p(u=>u+1),d(Date.now())}catch{}},t.onerror=()=>{t.close(),o.current<l?(o.current+=1,n("connecting"),setTimeout(r,1e3)):n("disconnected")}},[c,l]);return e.useEffect(()=>(r(),()=>{s.current?.close()}),[r]),{events:f,status:E,eventCount:S,lastEventAt:m}}export{R as u};
-//# sourceMappingURL=useSSE-Cezlih5V.js.map
+import{r as e}from"./index-BX0bcgLu.js";function R(i={}){const{maxEvents:c=500,maxReconnects:l=5}=i,[f,v]=e.useState([]),[E,n]=e.useState("connecting"),[S,p]=e.useState(0),[m,d]=e.useState(null),o=e.useRef(0),s=e.useRef(null),r=e.useCallback(()=>{s.current&&s.current.close(),n("connecting");const t=new EventSource("/api/events");s.current=t,t.onopen=()=>{n("connected"),o.current=0},t.onmessage=g=>{try{const x=JSON.parse(g.data);v(u=>{const a=[...u,x];return a.length>c?a.slice(-c):a}),p(u=>u+1),d(Date.now())}catch{}},t.onerror=()=>{t.close(),o.current<l?(o.current+=1,n("connecting"),setTimeout(r,1e3)):n("disconnected")}},[c,l]);return e.useEffect(()=>(r(),()=>{s.current?.close()}),[r]),{events:f,status:E,eventCount:S,lastEventAt:m}}export{R as u};
+//# sourceMappingURL=useSSE-BBYt5UPB.js.map

package/extensions/dashboard-client/dist/assets/{useSSE-Cezlih5V.js.map → useSSE-BBYt5UPB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useSSE-Cezlih5V.js","sources":["../../src/hooks/useSSE.ts"],"sourcesContent":["/**\n * dashboard-client/src/hooks/useSSE.ts — Server-Sent Events hook.\n *\n * Connects to /api/events, provides real-time event stream.\n * SPRINT-B1: basic connection. SPRINT-D1: reconnect with backoff.\n */\n\nimport { useState, useEffect, useRef, useCallback } from 'react';\nimport type { SseEvent } from '../../../dashboard-server/api-contracts';\n\nexport type SseStatus = 'connecting' | 'connected' | 'disconnected' | 'error';\n\nexport interface UseSSEResult {\n  events: SseEvent[];\n  status: SseStatus;\n  eventCount: number;\n  lastEventAt: number | null;\n}\n\nexport interface UseSSEOptions {\n  /** Max events to keep in memory (ring buffer). */\n  maxEvents?: number;\n  /** Max reconnect attempts before giving up. */\n  maxReconnects?: number;\n}\n\n// SPRINT-D1-REMAINING: exponential backoff (1s → 2s → 4s → max 30s).\n// SPRINT-D1-REMAINING: after 5 failures, set status='disconnected'.\n\nexport function useSSE(options: UseSSEOptions = {}): UseSSEResult {\n  const { maxEvents = 500, maxReconnects = 5 } = options;\n  const [events, setEvents] = useState<SseEvent[]>([]);\n  const [status, setStatus] = useState<SseStatus>('connecting');\n  const [eventCount, setEventCount] = useState(0);\n  const [lastEventAt, setLastEventAt] = useState<number | null>(null);\n  const reconnectCount = useRef(0);\n  const sourceRef = useRef<EventSource | null>(null);\n\n  const connect = useCallback(() => {\n    if (sourceRef.current) {\n      sourceRef.current.close();\n    }\n    setStatus('connecting');\n    const source = new EventSource('/api/events');\n    sourceRef.current = source;\n\n    source.onopen = () => {\n      setStatus('connected');\n      reconnectCount.current = 0;\n    };\n\n    source.onmessage = (event) => {\n      try {\n        const parsed = JSON.parse(event.data) as SseEvent;\n        setEvents(prev => {\n          const next = [...prev, parsed];\n          return next.length > maxEvents ? next.slice(-maxEvents) : next;\n        });\n        setEventCount(c => c + 1);\n        setLastEventAt(Date.now());\n      } catch {\n        // non-fatal: skip malformed events\n      }\n    };\n\n    source.onerror = () => {\n      source.close();\n      if (reconnectCount.current < maxReconnects) {\n        reconnectCount.current += 1;\n        setStatus('connecting');\n        // SPRINT-D1: use exponential backoff instead of fixed delay\n        setTimeout(connect, 1000);\n      } else {\n        setStatus('disconnected');\n      }\n    };\n  }, [maxEvents, maxReconnects]);\n\n  useEffect(() => {\n    connect();\n    return () => {\n      sourceRef.current?.close();\n    };\n  }, [connect]);\n\n  return { events, status, eventCount, lastEventAt };\n}\n"],"names":["useSSE","options","maxEvents","maxReconnects","events","setEvents","useState","status","setStatus","eventCount","setEventCount","lastEventAt","setLastEventAt","reconnectCount","useRef","sourceRef","connect","useCallback","source","event","parsed","prev","next","c","useEffect"],"mappings":"wCA6BO,SAASA,EAAOC,EAAyB,GAAkB,CAChE,KAAM,CAAE,UAAAC,EAAY,IAAK,cAAAC,EAAgB,GAAMF,EACzC,CAACG,EAAQC,CAAS,EAAIC,EAAAA,SAAqB,CAAA,CAAE,EAC7C,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAoB,YAAY,EACtD,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SAAS,CAAC,EACxC,CAACK,EAAaC,CAAc,EAAIN,EAAAA,SAAwB,IAAI,EAC5DO,EAAiBC,EAAAA,OAAO,CAAC,EACzBC,EAAYD,EAAAA,OAA2B,IAAI,EAE3CE,EAAUC,EAAAA,YAAY,IAAM,CAC5BF,EAAU,SACZA,EAAU,QAAQ,MAAA,EAEpBP,EAAU,YAAY,EACtB,MAAMU,EAAS,IAAI,YAAY,aAAa,EAC5CH,EAAU,QAAUG,EAEpBA,EAAO,OAAS,IAAM,CACpBV,EAAU,WAAW,EACrBK,EAAe,QAAU,CAC3B,EAEAK,EAAO,UAAaC,GAAU,CAC5B,GAAI,CACF,MAAMC,EAAS,KAAK,MAAMD,EAAM,IAAI,EACpCd,EAAUgB,GAAQ,CAChB,MAAMC,EAAO,CAAC,GAAGD,EAAMD,CAAM,EAC7B,OAAOE,EAAK,OAASpB,EAAYoB,EAAK,MAAM,CAACpB,CAAS,EAAIoB,CAC5D,CAAC,EACDZ,EAAca,GAAKA,EAAI,CAAC,EACxBX,EAAe,KAAK,KAAK,CAC3B,MAAQ,CAER,CACF,EAEAM,EAAO,QAAU,IAAM,CACrBA,EAAO,MAAA,EACHL,EAAe,QAAUV,GAC3BU,EAAe,SAAW,EAC1BL,EAAU,YAAY,EAEtB,WAAWQ,EAAS,GAAI,GAExBR,EAAU,cAAc,CAE5B,CACF,EAAG,CAACN,EAAWC,CAAa,CAAC,EAE7BqB,OAAAA,EAAAA,UAAU,KACRR,EAAA,EACO,IAAM,CACXD,EAAU,SAAS,MAAA,CACrB,GACC,CAACC,CAAO,CAAC,EAEL,CAAE,OAAAZ,EAAQ,OAAAG,EAAQ,WAAAE,EAAY,YAAAE,CAAA,CACvC"}
+{"version":3,"file":"useSSE-BBYt5UPB.js","sources":["../../src/hooks/useSSE.ts"],"sourcesContent":["/**\n * dashboard-client/src/hooks/useSSE.ts — Server-Sent Events hook.\n *\n * Connects to /api/events, provides real-time event stream.\n * SPRINT-B1: basic connection. SPRINT-D1: reconnect with backoff.\n */\n\nimport { useState, useEffect, useRef, useCallback } from 'react';\nimport type { SseEvent } from '../../../dashboard-server/api-contracts';\n\nexport type SseStatus = 'connecting' | 'connected' | 'disconnected' | 'error';\n\nexport interface UseSSEResult {\n  events: SseEvent[];\n  status: SseStatus;\n  eventCount: number;\n  lastEventAt: number | null;\n}\n\nexport interface UseSSEOptions {\n  /** Max events to keep in memory (ring buffer). */\n  maxEvents?: number;\n  /** Max reconnect attempts before giving up. */\n  maxReconnects?: number;\n}\n\n// SPRINT-D1-REMAINING: exponential backoff (1s → 2s → 4s → max 30s).\n// SPRINT-D1-REMAINING: after 5 failures, set status='disconnected'.\n\nexport function useSSE(options: UseSSEOptions = {}): UseSSEResult {\n  const { maxEvents = 500, maxReconnects = 5 } = options;\n  const [events, setEvents] = useState<SseEvent[]>([]);\n  const [status, setStatus] = useState<SseStatus>('connecting');\n  const [eventCount, setEventCount] = useState(0);\n  const [lastEventAt, setLastEventAt] = useState<number | null>(null);\n  const reconnectCount = useRef(0);\n  const sourceRef = useRef<EventSource | null>(null);\n\n  const connect = useCallback(() => {\n    if (sourceRef.current) {\n      sourceRef.current.close();\n    }\n    setStatus('connecting');\n    const source = new EventSource('/api/events');\n    sourceRef.current = source;\n\n    source.onopen = () => {\n      setStatus('connected');\n      reconnectCount.current = 0;\n    };\n\n    source.onmessage = (event) => {\n      try {\n        const parsed = JSON.parse(event.data) as SseEvent;\n        setEvents(prev => {\n          const next = [...prev, parsed];\n          return next.length > maxEvents ? next.slice(-maxEvents) : next;\n        });\n        setEventCount(c => c + 1);\n        setLastEventAt(Date.now());\n      } catch {\n        // non-fatal: skip malformed events\n      }\n    };\n\n    source.onerror = () => {\n      source.close();\n      if (reconnectCount.current < maxReconnects) {\n        reconnectCount.current += 1;\n        setStatus('connecting');\n        // SPRINT-D1: use exponential backoff instead of fixed delay\n        setTimeout(connect, 1000);\n      } else {\n        setStatus('disconnected');\n      }\n    };\n  }, [maxEvents, maxReconnects]);\n\n  useEffect(() => {\n    connect();\n    return () => {\n      sourceRef.current?.close();\n    };\n  }, [connect]);\n\n  return { events, status, eventCount, lastEventAt };\n}\n"],"names":["useSSE","options","maxEvents","maxReconnects","events","setEvents","useState","status","setStatus","eventCount","setEventCount","lastEventAt","setLastEventAt","reconnectCount","useRef","sourceRef","connect","useCallback","source","event","parsed","prev","next","c","useEffect"],"mappings":"wCA6BO,SAASA,EAAOC,EAAyB,GAAkB,CAChE,KAAM,CAAE,UAAAC,EAAY,IAAK,cAAAC,EAAgB,GAAMF,EACzC,CAACG,EAAQC,CAAS,EAAIC,EAAAA,SAAqB,CAAA,CAAE,EAC7C,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAoB,YAAY,EACtD,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SAAS,CAAC,EACxC,CAACK,EAAaC,CAAc,EAAIN,EAAAA,SAAwB,IAAI,EAC5DO,EAAiBC,EAAAA,OAAO,CAAC,EACzBC,EAAYD,EAAAA,OAA2B,IAAI,EAE3CE,EAAUC,EAAAA,YAAY,IAAM,CAC5BF,EAAU,SACZA,EAAU,QAAQ,MAAA,EAEpBP,EAAU,YAAY,EACtB,MAAMU,EAAS,IAAI,YAAY,aAAa,EAC5CH,EAAU,QAAUG,EAEpBA,EAAO,OAAS,IAAM,CACpBV,EAAU,WAAW,EACrBK,EAAe,QAAU,CAC3B,EAEAK,EAAO,UAAaC,GAAU,CAC5B,GAAI,CACF,MAAMC,EAAS,KAAK,MAAMD,EAAM,IAAI,EACpCd,EAAUgB,GAAQ,CAChB,MAAMC,EAAO,CAAC,GAAGD,EAAMD,CAAM,EAC7B,OAAOE,EAAK,OAASpB,EAAYoB,EAAK,MAAM,CAACpB,CAAS,EAAIoB,CAC5D,CAAC,EACDZ,EAAca,GAAKA,EAAI,CAAC,EACxBX,EAAe,KAAK,KAAK,CAC3B,MAAQ,CAER,CACF,EAEAM,EAAO,QAAU,IAAM,CACrBA,EAAO,MAAA,EACHL,EAAe,QAAUV,GAC3BU,EAAe,SAAW,EAC1BL,EAAU,YAAY,EAEtB,WAAWQ,EAAS,GAAI,GAExBR,EAAU,cAAc,CAE5B,CACF,EAAG,CAACN,EAAWC,CAAa,CAAC,EAE7BqB,OAAAA,EAAAA,UAAU,KACRR,EAAA,EACO,IAAM,CACXD,EAAU,SAAS,MAAA,CACrB,GACC,CAACC,CAAO,CAAC,EAEL,CAAE,OAAAZ,EAAQ,OAAAG,EAAQ,WAAAE,EAAY,YAAAE,CAAA,CACvC"}

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

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>mega-compact dashboard</title>
-    <script type="module" crossorigin src="./assets/index-BcoSz-L4.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-gn66lYD2.css">
+    <script type="module" crossorigin src="./assets/index-BX0bcgLu.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BEdKlpAB.css">
   </head>
   <body>
     <div id="root"></div>

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

@@ -39,6 +39,7 @@ import type {
 	SchemaHealthResponse,
 	MaintenanceAction,
 	MaintenanceActionResult,
+	ProviderCacheResponse,
 } from "@contracts";
 
 /** Error thrown when a dashboard API response is not 2xx. */
@@ -190,6 +191,11 @@ export function fetchTopics(): Promise<TopicsResponse> {
 	return getJson<TopicsResponse>(ENDPOINTS.topics.path);
 }
 
+/** Lifetime provider prompt cache aggregates + $ savings estimate. */
+export function fetchProviderCache(): Promise<ProviderCacheResponse> {
+	return getJson<ProviderCacheResponse>(ENDPOINTS.providerCache.path);
+}
+
 // ── S52: turn-by-turn memory tracking + recall + rewind ───────────────
 
 export function fetchTurns(): Promise<TurnsResponse> {

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

@@ -30,6 +30,8 @@ const HEADERS = [
 	"State",
 	"Compactions (s/t)",
 	"Cache Hits (s/t)",
+	"Cache Hit %",
+	"Est. Saved",
 	"Compact s/t (s)",
 	"CacheHit s/t (s)",
 ] as const;
@@ -61,7 +63,7 @@ export function ActiveReposTable({
 					<tbody>
 						{servers.length === 0 && (
 							<tr>
-								<td colSpan={9} className="repo-empty">
+								<td colSpan={HEADERS.length} className="repo-empty">
 									No active repositories.
 								</td>
 							</tr>
@@ -97,6 +99,16 @@ export function ActiveReposTable({
 									<td className="num">
 										{ch.session} / {ch.total}
 									</td>
+									<td className="num">
+										{r.providerCache != null
+											? `${r.providerCache.avgHitPct.toFixed(1)}%`
+											: "—"}
+									</td>
+									<td className="num">
+										{r.providerCache?.estimatedSaved != null
+											? `$${r.providerCache.estimatedSaved.toFixed(2)}`
+											: "—"}
+									</td>
 									<td className="num">
 										{fmtSec(ts.compact.sessionSec)} /{" "}
 										{fmtSec(ts.compact.totalSec)}

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

@@ -0,0 +1,141 @@
+/**
+ * dashboard-client/src/components/ProviderCacheCard.tsx — Provider prompt cache stats card.
+ *
+ * Displays lifetime provider prompt cache hit-rate aggregates + estimated
+ * dollar savings from the /api/provider-cache endpoint.
+ * Reuses the `ov-stat-row` / `StatRow` pattern from CacheHitsCard.tsx.
+ *
+ * B.2 spec: Cache Hit Rate with color classes, humanized token counts,
+ * priced $ rows with green/red net, model name, locale date + relative time.
+ */
+
+import type React from "react";
+import {
+	fmtTokens,
+	fmtDollars,
+	fmtDate,
+	fmtRelativeTime,
+} from "../utils/format";
+
+// ---------------------------------------------------------------------------
+// Flattened props — destructured from ProviderCacheResponse in CacheTab.
+// ---------------------------------------------------------------------------
+
+export interface ProviderCacheCardProps {
+	/** Cache hit rate percentage (0–100). */
+	hitPct: number;
+	/** Number of turns with cache_hit_pct samples. */
+	turnCount: number;
+	/** Total cache-read tokens across all sampled turns. */
+	totalCacheRead: number;
+	/** Total cache-write tokens across all sampled turns. */
+	totalCacheWrite: number;
+	/** Total input tokens across all sampled turns. */
+	totalInput: number;
+	/** $ saved from cache reads (null when unpriced). */
+	cacheReadSaved: number | null;
+	/** $ spent on cache writes (null when unpriced). */
+	cacheWriteCost: number | null;
+	/** netSaved = cacheReadSaved - cacheWriteCost (null when unpriced). */
+	netSaved: number | null;
+	/** Model display name (modelName || modelId, or null). */
+	modelLabel: string | null;
+	/** ISO timestamp of first recorded turn. */
+	firstTurnAt: string | null;
+	/** ISO timestamp of latest recorded turn. */
+	latestTurnAt: string | null;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Hit-rate color: green ≥80, yellow ≥50, red <50. */
+function hitPctClass(pct: number): string {
+	if (pct >= 80) return "ov-stat-value-green";
+	if (pct >= 50) return "ov-stat-value-yellow";
+	return "ov-stat-value-red";
+}
+
+/** Net-saved color: green positive, red negative. */
+function netClass(v: number | null): string {
+	if (v == null) return "";
+	return v >= 0 ? "ov-stat-value-green" : "ov-stat-value-red";
+}
+
+function StatRow({
+	label,
+	value,
+	className,
+	title,
+}: {
+	label: string;
+	value: string;
+	className?: string;
+	title?: string;
+}): React.ReactElement {
+	return (
+		<div className="ov-stat-row">
+			<span className="ov-stat-label" title={title}>
+				{label}
+			</span>
+			<span className={`ov-stat-value${className ? ` ${className}` : ""}`}>
+				{value}
+			</span>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Card
+// ---------------------------------------------------------------------------
+
+export function ProviderCacheCard(
+	props: ProviderCacheCardProps,
+): React.ReactElement {
+	return (
+		<div className="card provider-cache-card">
+			{/* --- Hit Rate + Turns --- */}
+			<StatRow
+				label="Cache Hit Rate"
+				value={`${props.hitPct.toFixed(1)}%`}
+				className={hitPctClass(props.hitPct)}
+			/>
+			<StatRow label="Turns Recorded" value={String(props.turnCount)} />
+
+			{/* --- Token counts --- */}
+			<StatRow
+				label="Cache Read Tokens"
+				value={fmtTokens(props.totalCacheRead)}
+			/>
+			<StatRow
+				label="Cache Write Tokens"
+				value={fmtTokens(props.totalCacheWrite)}
+			/>
+			<StatRow label="Input Tokens" value={fmtTokens(props.totalInput)} />
+
+			{/* --- Dollar rows (null when unpriced) --- */}
+			<StatRow
+				label="$ Saved (reads)"
+				value={fmtDollars(props.cacheReadSaved)}
+			/>
+			<StatRow
+				label="Write Investment"
+				value={fmtDollars(props.cacheWriteCost)}
+			/>
+			<StatRow
+				label="Net Saved"
+				value={fmtDollars(props.netSaved)}
+				className={netClass(props.netSaved)}
+			/>
+
+			{/* --- Model + timestamps --- */}
+			<StatRow label="Model" value={props.modelLabel ?? "\u2014"} />
+			<StatRow label="Tracked Since" value={fmtDate(props.firstTurnAt)} />
+			<StatRow
+				label="Last Updated"
+				value={fmtRelativeTime(props.latestTurnAt)}
+			/>
+		</div>
+	);
+}

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

@@ -29,6 +29,8 @@ interface ModelGroup {
 	maxTokens: number[];
 	reasoning: boolean | null;
 	lastAt: number;
+	cacheRead: number;
+	cacheWrite: number;
 }
 
 /** Collapse numeric samples: "—" | single | "lo–hi" (matches html.ts). */
@@ -71,6 +73,8 @@ function aggregate(repos: IndexesIndexRow[]): ModelGroup[] {
 				maxTokens: [],
 				reasoning: null,
 				lastAt: 0,
+				cacheRead: 0,
+				cacheWrite: 0,
 			};
 		}
 		const g = map[key];
@@ -87,6 +91,8 @@ function aggregate(repos: IndexesIndexRow[]): ModelGroup[] {
 		if (r.contextWindow) g.ctxWindows.push(r.contextWindow);
 		if (r.maxTokens) g.maxTokens.push(r.maxTokens);
 		if (r.reasoning != null) g.reasoning = r.reasoning;
+		if (r.providerCacheRead) g.cacheRead += r.providerCacheRead;
+		if (r.providerCacheWrite) g.cacheWrite += r.providerCacheWrite;
 		if (r.lastCompactedAt && r.lastCompactedAt > g.lastAt)
 			g.lastAt = r.lastCompactedAt;
 	}
@@ -151,13 +157,19 @@ export function SavingsByModelTable({
 								Out $/tok
 							</th>
 							<th className="num">$ Saved</th>
+							<th className="num" title="Provider prompt-cache hit rate (reads / reads+writes+tokens_in)">
+								Cache Hit %
+							</th>
+							<th className="num" title="Estimated provider prompt-cache savings (read tokens * 0.9 * inputRate − write tokens * 0.25 * inputRate)">
+								Cache $ Saved
+							</th>
 							<th className="num">Last Used</th>
 						</tr>
 					</thead>
 					<tbody>
 						{groups.length === 0 && (
 							<tr>
-								<td colSpan={14} className="repo-empty">
+								<td colSpan={16} className="repo-empty">
 									No repositories registered yet.
 								</td>
 							</tr>
@@ -207,8 +219,24 @@ export function SavingsByModelTable({
 									<td className="num">
 										{collapseRate(g.outRates)}
 									</td>
-									<td className="num">{usd}</td>
-									<td className="num">{when}</td>
+								<td className="num">{usd}</td>
+								<td className="num">
+									{g.cacheRead > 0
+										? `${(
+												(g.cacheRead * 100) /
+												(g.cacheRead + g.cacheWrite + g.tokensIn || 1)
+											).toFixed(1)}%`
+										: "—"}
+								</td>
+								<td className="num">
+									{g.cacheRead > 0
+										? `$${(
+												g.cacheRead * 0.9 * (g.inRates[0] || 0) -
+												g.cacheWrite * 0.25 * (g.inRates[0] || 0)
+											).toFixed(4)}`
+										: "—"}
+								</td>
+								<td className="num">{when}</td>
 								</tr>
 							);
 						})}

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

@@ -19,6 +19,7 @@ import "./styles/sessions.css";
 import "./styles/repostack.css";
 import "./styles/session-gauges.css";
 import "./styles/turns.css";
+import "./styles/maintenance.css";
 
 const rootEl = document.getElementById("root");
 if (!rootEl) {

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

@@ -0,0 +1,267 @@
+/**
+ * dashboard-client/src/styles/maintenance.css — Maintenance tab styles (S49B).
+ *
+ * Cards, stat tables, action grid, badges, and buttons.
+ */
+
+/* ─── Layout ──────────────────────────────────────────────────────────────── */
+
+.maintenance-tab {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+/* ─── Card structure (shared card base in base.css + overview-events.css) ── */
+
+.card-header {
+	font-size: 13px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: var(--muted);
+	margin-bottom: 10px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.card-body {
+	font-size: 13px;
+}
+
+/* ─── Stat sections ──────────────────────────────────────────────────────── */
+
+.stat-section {
+	margin-bottom: 12px;
+}
+
+.stat-section:last-child {
+	margin-bottom: 0;
+}
+
+.stat-label {
+	font-size: 11px;
+	color: var(--muted);
+	text-transform: uppercase;
+	letter-spacing: 0.4px;
+	margin-bottom: 4px;
+}
+
+.stat-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	padding: 3px 0;
+	border-bottom: 1px solid var(--border);
+	font-size: 13px;
+}
+
+.num {
+	text-align: right;
+	font-family: monospace;
+	font-weight: 600;
+}
+
+/* ─── Compact table ──────────────────────────────────────────────────────── */
+
+.compact-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 13px;
+}
+
+.compact-table th {
+	text-align: left;
+	padding: 4px 6px;
+	border-bottom: 1px solid var(--border);
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.4px;
+	color: var(--muted);
+}
+
+.compact-table th.num {
+	text-align: right;
+}
+
+.compact-table td {
+	padding: 3px 6px;
+	border-bottom: 1px solid var(--border);
+}
+
+.compact-table td.num {
+	text-align: right;
+	font-family: monospace;
+	font-weight: 600;
+}
+
+.compact-table tbody tr:last-child td {
+	border-bottom: none;
+}
+
+/* ─── Text colors ────────────────────────────────────────────────────────── */
+
+.text-muted {
+	color: var(--muted);
+}
+
+.text-error {
+	color: var(--err);
+}
+
+.text-ok {
+	color: var(--ok);
+}
+
+.text-warn {
+	color: var(--warn);
+}
+
+.text-mono {
+	font-family: monospace;
+	font-size: 12px;
+}
+
+/* ─── Badges ─────────────────────────────────────────────────────────────── */
+
+.badge {
+	display: inline-block;
+	padding: 1px 8px;
+	font-size: 10px;
+	font-weight: 700;
+	border-radius: 8px;
+	text-transform: uppercase;
+	letter-spacing: 0.3px;
+}
+
+.badge-ok {
+	background: color-mix(in srgb, var(--ok) 20%, transparent);
+	color: var(--ok);
+	border: 1px solid var(--ok);
+}
+
+.badge-bad {
+	background: color-mix(in srgb, var(--err) 20%, transparent);
+	color: var(--err);
+	border: 1px solid var(--err);
+}
+
+.badge-warn {
+	background: color-mix(in srgb, var(--warn) 20%, transparent);
+	color: var(--warn);
+	border: 1px solid var(--warn);
+}
+
+/* ─── Action grid ────────────────────────────────────────────────────────── */
+
+.action-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 8px;
+}
+
+.action-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 12px;
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+}
+
+.action-info {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	flex: 1;
+	min-width: 0;
+}
+
+.action-label {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--text);
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.action-desc {
+	font-size: 11px;
+	color: var(--muted);
+}
+
+.action-result {
+	font-size: 11px;
+	margin-top: 2px;
+}
+
+.action-controls {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
+/* ─── Buttons ────────────────────────────────────────────────────────────── */
+
+.btn {
+	padding: 5px 14px;
+	font-size: 12px;
+	font-weight: 600;
+	border: none;
+	border-radius: 6px;
+	cursor: pointer;
+	white-space: nowrap;
+	transition: opacity 0.15s;
+}
+
+.btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.btn-primary {
+	background: var(--accent);
+	color: #0d1117;
+}
+
+.btn-danger {
+	background: var(--err);
+	color: #fff;
+}
+
+/* ─── Days input ─────────────────────────────────────────────────────────── */
+
+.days-input {
+	width: 60px;
+	padding: 4px 6px;
+	font-size: 12px;
+	background: var(--panel);
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	color: var(--text);
+	text-align: center;
+}
+
+.days-input:disabled {
+	opacity: 0.5;
+}
+
+/* ─── Responsive ─────────────────────────────────────────────────────────── */
+
+@media (max-width: 640px) {
+	.action-item {
+		flex-direction: column;
+		align-items: stretch;
+		gap: 8px;
+	}
+
+	.action-controls {
+		justify-content: flex-end;
+	}
+}

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

@@ -31,6 +31,15 @@
 	color: var(--text);
 	font-family: monospace;
 }
+.ov-stat-value-green {
+	color: var(--ok);
+}
+.ov-stat-value-yellow {
+	color: var(--warn);
+}
+.ov-stat-value-red {
+	color: var(--err);
+}
 .ov-value-ok {
 	color: var(--ok) !important;
 }