pi-mega-compact 0.13.4 → 0.13.6

package/extensions/dashboard-client/src/tabs/MaintenanceTab/ActionsCard.tsx

@@ -12,6 +12,9 @@ import type {
 	MaintenanceActionResult,
 } from "@contracts";
 import { postMaintenanceAction } from "../../api/client";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { Card, CardHeader, CardTitle } from "../../components/ui/card";
 
 // ---------------------------------------------------------------------------
 // Action config
@@ -120,59 +123,66 @@ export function ActionsCard(): React.ReactElement {
 	);
 
 	return (
-		<div className="card">
-			<div className="card-header">Actions</div>
-			<div className="card-body">
-				<div className="action-grid">
-					{ACTIONS.map((def) => {
-						const isRunning = running === def.key;
-						const lastResult = results.find((r) => r.operation === def.key);
-						return (
-							<div key={def.key} className="action-item">
-								<div className="action-info">
-									<div className="action-label">
-										{def.label}
-										{def.dangerous && (
-											<span className="badge badge-warn">DESTRUCTIVE</span>
-										)}
-									</div>
-									<div className="action-desc">{def.desc}</div>
-									{lastResult && (
-										<div
-											className={`action-result ${lastResult.success ? "text-ok" : "text-error"}`}
-										>
-											{lastResult.summary}
-										</div>
-									)}
+		<Card>
+			<CardHeader>
+				<CardTitle>Actions</CardTitle>
+			</CardHeader>
+			<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+				{ACTIONS.map((def) => {
+					const isRunning = running === def.key;
+					const lastResult = results.find((r) => r.operation === def.key);
+					return (
+						<div
+							key={def.key}
+							className="flex items-start justify-between gap-3 rounded-lg border border-border/60 p-3"
+						>
+							<div className="min-w-0">
+								<div className="flex flex-wrap items-center gap-2">
+									<span className="font-semibold">{def.label}</span>
+									{def.dangerous && <Badge variant="danger">DESTRUCTIVE</Badge>}
 								</div>
-								<div className="action-controls">
-									{def.daysOld && (
-										<input
-											type="number"
-											min={1}
-											max={365}
-											value={days}
-											onChange={(e) => setDays(e.target.value)}
-											className="days-input"
-											disabled={isRunning}
-										/>
-									)}
-									<button
-										className={`btn ${def.dangerous ? "btn-danger" : "btn-primary"}`}
-										disabled={running !== null}
-										onClick={() => {
-											if (def.confirm && !window.confirm(def.confirm)) return;
-											handleAction(def);
-										}}
+								<div className="mt-1 text-xs text-muted-foreground">{def.desc}</div>
+								{lastResult && (
+									<div
+										className={`mt-1 text-xs ${lastResult.success ? "text-emerald-400" : "text-red-400"}`}
 									>
-										{isRunning ? "Running…" : "Run"}
-									</button>
-								</div>
+										{lastResult.summary}
+									</div>
+								)}
+							</div>
+							<div className="flex shrink-0 items-center gap-2">
+								{def.daysOld && (
+									<input
+										type="number"
+										min={1}
+										max={365}
+										value={days}
+										onChange={(e) => setDays(e.target.value)}
+										className="w-16 rounded-md border border-border bg-bg-elevated/50 px-2 py-1 text-sm outline-none focus:border-primary"
+										disabled={isRunning}
+									/>
+								)}
+								<Button
+									type="button"
+									variant={def.dangerous ? "ghost" : "default"}
+									className={
+										def.dangerous
+											? "border border-red-500/50 text-red-400 hover:bg-red-500/10 hover:text-red-300"
+											: undefined
+									}
+									disabled={running !== null}
+									onClick={() => {
+										if (def.confirm && !window.confirm(def.confirm)) return;
+										handleAction(def);
+									}}
+								>
+									{isRunning ? "Running…" : "Run"}
+								</Button>
 							</div>
-						);
-					})}
-				</div>
+						</div>
+					);
+				})}
 			</div>
-		</div>
+		</Card>
 	);
 }

package/extensions/dashboard-client/src/tabs/MaintenanceTab/DbStatsCard.tsx

@@ -6,6 +6,12 @@
  */
 import type React from "react";
 import type { DbStatsResponse } from "@contracts";
+import {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardContent,
+} from "../../components/ui/card";
 
 // ---------------------------------------------------------------------------
 // Format helpers (local — matches html.ts fmtBytes)
@@ -34,37 +40,47 @@ function FileSizesCard({
 }): React.ReactElement {
 	const total = files.dbBytes + files.walBytes + files.shmBytes;
 	return (
-		<div className="stat-section">
-			<div className="stat-label">File Sizes</div>
-			<table className="compact-table">
+		<div className="mt-3">
+			<div className="text-xs font-semibold text-muted-foreground">File Sizes</div>
+			<table className="mt-1 w-full border-collapse text-sm">
 				<tbody>
-					<tr>
-						<td>sqlite.db</td>
-						<td className="num">{fmtBytes(files.dbBytes)}</td>
+					<tr className="border-b border-border/50">
+						<td className="px-2 py-1">sqlite.db</td>
+						<td className="px-2 py-1 text-right font-semibold">
+							{fmtBytes(files.dbBytes)}
+						</td>
 					</tr>
 					{files.walBytes > 0 && (
-						<tr>
-							<td>.wal</td>
-							<td className="num">{fmtBytes(files.walBytes)}</td>
+						<tr className="border-b border-border/50">
+							<td className="px-2 py-1">.wal</td>
+							<td className="px-2 py-1 text-right font-semibold">
+								{fmtBytes(files.walBytes)}
+							</td>
 						</tr>
 					)}
 					{files.shmBytes > 0 && (
-						<tr>
-							<td>.shm</td>
-							<td className="num">{fmtBytes(files.shmBytes)}</td>
+						<tr className="border-b border-border/50">
+							<td className="px-2 py-1">.shm</td>
+							<td className="px-2 py-1 text-right font-semibold">
+								{fmtBytes(files.shmBytes)}
+							</td>
 						</tr>
 					)}
-					<tr>
-						<td>Total</td>
-						<td className="num">{fmtBytes(total)}</td>
+					<tr className="border-b border-border/50">
+						<td className="px-2 py-1">Total</td>
+						<td className="px-2 py-1 text-right font-semibold">
+							{fmtBytes(total)}
+						</td>
 					</tr>
-					<tr>
-						<td>Page size</td>
-						<td className="num">{fmtBytes(pageSize)}</td>
+					<tr className="border-b border-border/50">
+						<td className="px-2 py-1">Page size</td>
+						<td className="px-2 py-1 text-right font-semibold">
+							{fmtBytes(pageSize)}
+						</td>
 					</tr>
 					<tr>
-						<td>Pages</td>
-						<td className="num">
+						<td className="px-2 py-1">Pages</td>
+						<td className="px-2 py-1 text-right font-semibold">
 							{pageCount.toLocaleString()} ({freelistPages.toLocaleString()}{" "}
 							free)
 						</td>
@@ -82,22 +98,26 @@ function TableRowCountsCard({
 }): React.ReactElement {
 	const totalRows = tables.reduce((s, t) => s + Math.max(0, t.rowCount), 0);
 	return (
-		<div className="stat-section">
-			<div className="stat-label">
+		<div className="mt-3">
+			<div className="text-xs font-semibold text-muted-foreground">
 				Table Row Counts ({totalRows.toLocaleString()} total)
 			</div>
-			<table className="compact-table">
+			<table className="mt-1 w-full border-collapse text-sm">
 				<thead>
 					<tr>
-						<th>Table</th>
-						<th className="num">Rows</th>
+						<th className="border-b border-border px-2 py-1 text-left font-medium text-muted-foreground">
+							Table
+						</th>
+						<th className="border-b border-border px-2 py-1 text-right font-medium text-muted-foreground">
+							Rows
+						</th>
 					</tr>
 				</thead>
 				<tbody>
 					{tables.map((t) => (
-						<tr key={t.table}>
-							<td>{t.table}</td>
-							<td className="num">
+						<tr key={t.table} className="border-b border-border/50">
+							<td className="px-2 py-1">{t.table}</td>
+							<td className="px-2 py-1 text-right">
 								{t.rowCount >= 0 ? t.rowCount.toLocaleString() : "—"}
 							</td>
 						</tr>
@@ -118,11 +138,17 @@ export function DbStatsCard({
 	error: Error | null;
 }): React.ReactElement {
 	return (
-		<div className="card">
-			<div className="card-header">DB Stats</div>
-			<div className="card-body">
-				{loading && !data && <span className="text-muted">Loading…</span>}
-				{error && !data && <span className="text-error">{error.message}</span>}
+		<Card>
+			<CardHeader>
+				<CardTitle>DB Stats</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{loading && !data && (
+					<span className="text-sm text-muted-foreground">Loading…</span>
+				)}
+				{error && !data && (
+					<span className="text-sm text-red-400">{error.message}</span>
+				)}
 				{data && (
 					<>
 						<FileSizesCard
@@ -134,7 +160,7 @@ export function DbStatsCard({
 						<TableRowCountsCard tables={data.tables} />
 					</>
 				)}
-			</div>
-		</div>
+			</CardContent>
+		</Card>
 	);
 }

package/extensions/dashboard-client/src/tabs/MaintenanceTab/DebugBundleCard.tsx

@@ -9,6 +9,13 @@ import type React from "react";
 import { useState, useCallback } from "react";
 import type { DebugBundleResponse } from "@contracts";
 import { fetchDebugBundle } from "../../api/client";
+import { Button } from "../../components/ui/button";
+import {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardContent,
+} from "../../components/ui/card";
 
 // ---------------------------------------------------------------------------
 // Debug bundle card — gather diagnostic info for bug reports
@@ -55,55 +62,59 @@ export function DebugBundleCard(): React.ReactElement {
 	const criticalCount = bundle?.criticalEvents.length ?? 0;
 
 	return (
-		<div className="card">
-			<div className="card-header">
-				Debug Bundle
+		<Card>
+			<CardHeader className="flex-row items-center justify-between space-y-0">
+				<CardTitle>Debug Bundle</CardTitle>
 				{criticalCount > 0 && (
-					<span className="text-warn" style={{ marginLeft: "1em" }}>
+					<span className="text-xs text-amber-400">
 						{criticalCount} critical event{criticalCount !== 1 ? "s" : ""} found
 					</span>
 				)}
-			</div>
-			<div className="card-body">
-				<p className="text-muted" style={{ marginBottom: "0.75em" }}>
+			</CardHeader>
+			<CardContent>
+				<p className="mb-3 text-sm text-muted-foreground">
 					Gather a diagnostic bundle (recent events, config flags, schema health,
 					store stats) to attach to a bug report. Critical/compaction events are
 					highlighted.
 				</p>
-				<button onClick={gather} disabled={loading} style={{ marginRight: "0.5em" }}>
+				<Button type="button" variant="glass" onClick={gather} disabled={loading}>
 					{loading ? "Gathering…" : "Gather Debug Logs"}
-				</button>
-				{error && <div className="text-error">{error}</div>}
+				</Button>
+				{error && <div className="mt-2 text-sm text-red-400">{error}</div>}
 				{bundle && showJson && (
 					<>
-						<div style={{ marginTop: "0.75em", marginBottom: "0.5em" }}>
-							<button onClick={copyToClipboard} style={{ marginRight: "0.5em" }}>
+						<div className="mb-2 mt-3 flex gap-2">
+							<Button type="button" variant="outline" size="sm" onClick={copyToClipboard}>
 								Copy to clipboard
-							</button>
-							<button onClick={downloadJson}>Download JSON</button>
-							<button
+							</Button>
+							<Button type="button" variant="outline" size="sm" onClick={downloadJson}>
+								Download JSON
+							</Button>
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
 								onClick={() => setShowJson((v) => !v)}
-								style={{ marginLeft: "0.5em" }}
 							>
 								{showJson ? "Hide" : "Show"}
-							</button>
+							</Button>
 						</div>
 						{criticalCount > 0 && (
-							<div className="stat-section">
-								<div className="stat-label text-warn">
+							<div className="mt-3">
+								<div className="text-xs font-semibold text-amber-400">
 									Critical events ({criticalCount})
 								</div>
-								<pre className="text-mono" style={{ maxHeight: "12em", overflow: "auto" }}>
+								<pre className="max-h-48 overflow-auto rounded-md border border-border/60 bg-bg-elevated/40 p-3 font-mono text-xs">
 									{JSON.stringify(bundle.criticalEvents, null, 2)}
 								</pre>
 							</div>
 						)}
-						<pre className="text-mono" style={{ maxHeight: "24em", overflow: "auto" }}>
+						<pre className="mt-3 max-h-96 overflow-auto rounded-md border border-border/60 bg-bg-elevated/40 p-3 font-mono text-xs">
 							{JSON.stringify(bundle, null, 2)}
 						</pre>
 					</>
 				)}
-			</div>
-		</div>
+			</CardContent>
+		</Card>
 	);
 }

package/extensions/dashboard-client/src/tabs/MaintenanceTab/HealthMitigationCard.tsx

@@ -7,6 +7,13 @@
  */
 import type React from "react";
 import { useState, useCallback, useEffect } from "react";
+import { Switch } from "../../components/ui/switch";
+import {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardContent,
+} from "../../components/ui/card";
 
 // ---------------------------------------------------------------------------
 // Health Mitigation card — toggle auto-mitigation for degraded context
@@ -48,51 +55,63 @@ export function HealthMitigationCard(): React.ReactElement {
 	}, [mitigate]);
 
 	return (
-		<div className="stat-section maintenance-card">
-			<div className="stat-label">Context Health Mitigation</div>
-			{loading ? (
-				<p className="repo-none">Loading…</p>
-			) : (
-				<>
-					<div className="health-mitigate-row">
-						<label className="health-mitigate-toggle">
-							<input
-								type="checkbox"
+		<Card>
+			<CardHeader>
+				<CardTitle>Context Health Mitigation</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{loading ? (
+					<p className="text-sm text-muted-foreground">Loading…</p>
+				) : (
+					<>
+						<div className="flex items-center gap-2">
+							<Switch
 								checked={mitigate}
-								onChange={toggle}
+								onCheckedChange={toggle}
 								disabled={saving}
+								aria-label="Context health auto-mitigation"
 							/>
-							<span>Auto-mitigation {mitigate ? "ON" : "OFF"}</span>
-						</label>
-					</div>
-					<div className="health-mitigate-info">
-						<p>
-							When <strong>ON</strong>, the extension automatically intervenes when
-							context health degrades:
-						</p>
-						<ul>
-							<li><strong>Forced compaction</strong> — when the composite health score
-							drops below 0.4 (severe drift or garbled output), a compaction is
-							triggered to flush the degraded context and rebuild from clean
-							checkpoints, even if the context window isn&apos;t full.</li>
-							<li><strong>Prefix break</strong> — when KV cache poison is detected
-							(score &lt; 0.3), the cached prefix is invalidated to force a cache
-							miss on the next turn, bypassing the corrupted KV state.</li>
-						</ul>
-						<p className="health-mitigate-warning">
-							WARNING: both interventions have costs — forced compaction discards
-							live context, and prefix breaks kill cache savings. Only enable when
-							you&apos;re seeing degraded output (garbled text, hallucinations,
-							loss of coherence) and the Health tab confirms low scores.
-						</p>
-						<p>
-							Also settable via env var: <code>MEGACOMPACT_CONTEXT_HEALTH_MITIGATE=1</code>.
-							The dashboard toggle persists to the store and takes precedence.
-						</p>
-						{error && <p className="health-mitigate-error">Error: {error}</p>}
-					</div>
-				</>
-			)}
-		</div>
+							<span className="text-sm">
+								Auto-mitigation {mitigate ? "ON" : "OFF"}
+							</span>
+						</div>
+						<div className="mt-3 space-y-2 text-sm">
+							<p>
+								When <strong>ON</strong>, the extension automatically intervenes
+								when context health degrades:
+							</p>
+							<ul className="list-disc space-y-1 pl-5">
+								<li>
+									<strong>Forced compaction</strong> — when the composite health
+									score drops below 0.4 (severe drift or garbled output), a
+									compaction is triggered to flush the degraded context and
+									rebuild from clean checkpoints, even if the context window
+									isn&apos;t full.
+								</li>
+								<li>
+									<strong>Prefix break</strong> — when KV cache poison is
+									detected (score &lt; 0.3), the cached prefix is invalidated to
+									force a cache miss on the next turn, bypassing the corrupted KV
+									state.
+								</li>
+							</ul>
+							<p className="rounded-md border border-amber-500/30 bg-amber-500/5 p-3 text-amber-400">
+								WARNING: both interventions have costs — forced compaction discards
+								live context, and prefix breaks kill cache savings. Only enable
+								when you&apos;re seeing degraded output (garbled text,
+								hallucinations, loss of coherence) and the Health tab confirms low
+								scores.
+							</p>
+							<p className="text-muted-foreground">
+								Also settable via env var:{" "}
+								<code>MEGACOMPACT_CONTEXT_HEALTH_MITIGATE=1</code>. The dashboard
+								toggle persists to the store and takes precedence.
+							</p>
+							{error && <p className="text-sm text-red-400">Error: {error}</p>}
+						</div>
+					</>
+				)}
+			</CardContent>
+		</Card>
 	);
 }

package/extensions/dashboard-client/src/tabs/MaintenanceTab/SchemaHealthCard.tsx

@@ -7,6 +7,13 @@
  */
 import type React from "react";
 import type { SchemaHealthResponse } from "@contracts";
+import { Badge } from "../../components/ui/badge";
+import {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardContent,
+} from "../../components/ui/card";
 
 // ---------------------------------------------------------------------------
 // Schema Health card
@@ -19,26 +26,34 @@ function ColumnAuditCard({
 }): React.ReactElement {
 	const missing = columns.filter((c) => !c.present);
 	return (
-		<div className="stat-section">
-			<div className="stat-label">
+		<div className="mt-3">
+			<div className="text-xs font-semibold text-muted-foreground">
 				Column Audit ({columns.length} columns, {missing.length} missing)
 			</div>
-			<table className="compact-table">
+			<table className="mt-1 w-full border-collapse text-sm">
 				<thead>
 					<tr>
-						<th>Table</th>
-						<th>Column</th>
-						<th>Decl</th>
-						<th>Status</th>
+						<th className="border-b border-border px-2 py-1 text-left font-medium text-muted-foreground">
+							Table
+						</th>
+						<th className="border-b border-border px-2 py-1 text-left font-medium text-muted-foreground">
+							Column
+						</th>
+						<th className="border-b border-border px-2 py-1 text-left font-medium text-muted-foreground">
+							Decl
+						</th>
+						<th className="border-b border-border px-2 py-1 text-left font-medium text-muted-foreground">
+							Status
+						</th>
 					</tr>
 				</thead>
 				<tbody>
 					{columns.map((c) => (
-						<tr key={`${c.table}.${c.column}`}>
-							<td>{c.table}</td>
-							<td>{c.column}</td>
-							<td className="text-mono">{c.expectedDecl}</td>
-							<td className={c.present ? "text-ok" : "text-error"}>
+						<tr key={`${c.table}.${c.column}`} className="border-b border-border/50">
+							<td className="px-2 py-1">{c.table}</td>
+							<td className="px-2 py-1">{c.column}</td>
+							<td className="px-2 py-1 font-mono">{c.expectedDecl}</td>
+							<td className={`px-2 py-1 ${c.present ? "text-emerald-400" : "text-red-400"}`}>
 								{c.present ? "✓" : "MISSING"}
 							</td>
 						</tr>
@@ -59,29 +74,35 @@ export function SchemaHealthCard({
 	error: Error | null;
 }): React.ReactElement {
 	return (
-		<div className="card">
-			<div className="card-header">
-				Schema Health
+		<Card>
+			<CardHeader className="flex-row items-center justify-between space-y-0">
+				<CardTitle>Schema Health</CardTitle>
 				{data && (
-					<span className={`badge ${data.healthy ? "badge-ok" : "badge-bad"}`}>
+					<Badge variant={data.healthy ? "success" : "danger"}>
 						{data.healthy ? "HEALTHY" : "DEGRADED"}
-					</span>
+					</Badge>
+				)}
+			</CardHeader>
+			<CardContent>
+				{loading && !data && (
+					<span className="text-sm text-muted-foreground">Loading…</span>
+				)}
+				{error && !data && (
+					<span className="text-sm text-red-400">{error.message}</span>
 				)}
-			</div>
-			<div className="card-body">
-				{loading && !data && <span className="text-muted">Loading…</span>}
-				{error && !data && <span className="text-error">{error.message}</span>}
 				{data && (
 					<>
-						<div className="stat-row">
-							<span className="stat-label">Schema version</span>
-							<span className="num">{data.schemaVersion}</span>
+						<div className="flex items-baseline justify-between border-b border-border py-1 text-sm">
+							<span className="text-muted-foreground">Schema version</span>
+							<span className="font-semibold">{data.schemaVersion}</span>
 						</div>
-						<div className="stat-row">
-							<span className="stat-label">Integrity</span>
+						<div className="flex items-baseline justify-between border-b border-border py-1 text-sm">
+							<span className="text-muted-foreground">Integrity</span>
 							<span
 								className={
-									data.integrity[0] === "ok" ? "text-ok" : "text-error"
+									data.integrity[0] === "ok"
+										? "text-emerald-400"
+										: "text-red-400"
 								}
 							>
 								{data.integrity.join("; ")}
@@ -89,12 +110,12 @@ export function SchemaHealthCard({
 						</div>
 						<ColumnAuditCard columns={data.columns} />
 						{data.fkCheck.length > 0 && (
-							<div className="stat-section">
-								<div className="stat-label text-warn">
+							<div className="mt-3">
+								<div className="text-xs font-semibold text-amber-400">
 									FK Check ({data.fkCheck.length})
 								</div>
 								{data.fkCheck.map((line, i) => (
-									<div key={i} className="text-warn text-mono">
+									<div key={i} className="font-mono text-xs text-amber-400">
 										{line}
 									</div>
 								))}
@@ -102,7 +123,7 @@ export function SchemaHealthCard({
 						)}
 					</>
 				)}
-			</div>
-		</div>
+			</CardContent>
+		</Card>
 	);
 }

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

@@ -46,8 +46,8 @@ export default function MaintenanceTab(): React.ReactElement {
 	);
 
 	return (
-		<div className="maintenance-tab">
-			<div className="card-grid">
+		<div className="flex flex-col gap-4">
+			<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
 				<SchemaHealthCard
 					data={schemaHealth}
 					loading={healthLoading}