pi-mega-compact 0.13.4 → 0.13.6

package/extensions/dashboard-client/src/components/ui/select.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check } from "lucide-react";
+import { cn } from "../../utils/cn";
+
+const Select = SelectPrimitive.Root;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between rounded-md border border-border bg-bg-elevated px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/60",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn("z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-bg-elevated text-foreground shadow-panel", className)}
+      {...props}
+    >
+      <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-foreground focus:bg-primary/15 focus:text-neon data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem };

package/extensions/dashboard-client/src/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "../../utils/cn";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    ref={ref}
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-border transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-foreground shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/extensions/dashboard-client/src/components/ui/tabs.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../utils/cn";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn("inline-flex items-center gap-1 rounded-lg bg-bg-elevated p-1", className)}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-muted transition-all hover:text-foreground data-[state=active]:bg-primary/15 data-[state=active]:text-neon",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = TabsPrimitive.Content;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/extensions/dashboard-client/src/components/ui/toggle.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+export interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+}
+
+export function Toggle({ pressed, onPressedChange, className, onClick, ...props }: ToggleProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={pressed}
+      onClick={(e) => {
+        onClick?.(e);
+        onPressedChange?.(!pressed);
+      }}
+      className={cn(
+        "inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm font-medium transition-all",
+        pressed
+          ? "border-primary/50 bg-primary/15 text-neon glow-primary"
+          : "border-border bg-transparent text-muted hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/extensions/dashboard-client/src/components/ui/tooltip.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../utils/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border border-border bg-bg-elevated px-3 py-1.5 text-xs text-foreground shadow-panel",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

@@ -0,0 +1,10 @@
+declare global {
+  interface Window {
+    MEGACOMPACT_NEW_UI?: boolean;
+  }
+}
+
+/** True when the vbrainstorm visual design migration is enabled (default ON). */
+export const NEW_UI = (): boolean => window.MEGACOMPACT_NEW_UI !== false;
+
+export {};

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

@@ -7,18 +7,18 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
+// Tailwind + design tokens (Spec 1)
+import "./styles/index.css";
 import "./styles/base.css";
 import "./styles/overview-events.css";
 import "./styles/repos-metrics.css";
 import "./styles/repos-extra.css";
 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";
 import "./styles/session-gauges.css";
-import "./styles/turns.css";
 import "./styles/maintenance.css";
 import "./styles/cache.css";
 

package/extensions/dashboard-client/src/memory-map-layout.ts

@@ -48,7 +48,7 @@ export interface LayoutEdge {
   source: number;
   target: number;
   weight: number;
-  type: GraphEdge["type"];
+  type: GraphEdgeMin["type"];
 }
 
 export interface Layout {
@@ -135,7 +135,6 @@ export function applyForces(layout: Layout): void {
       else continue;
       const dx = nodes[other].pos.x - nodes[i].pos.x;
       const dy = nodes[other].pos.y - nodes[i].pos.y;
-      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
       fx += dx * ATTRACTION * e.weight;
       fy += dy * ATTRACTION * e.weight;
     }

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

@@ -0,0 +1,79 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --bg: 222 47% 5%;
+    --bg-card: 222 32% 8%;
+    --bg-elevated: 222 28% 12%;
+    --border: 217 33% 17%;
+    --foreground: 210 40% 98%;
+    --muted: 215 20% 65%;
+    --primary: 217 91% 60%;
+    --primary-glow: 217 91% 60%;
+    --success: 142 71% 45%;
+    --warning: 38 92% 50%;
+    --danger: 0 84% 60%;
+    --accent: 280 100% 70%;
+    --radius: 0.75rem;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  html {
+    @apply bg-background text-foreground antialiased;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans;
+    margin: 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: theme("fontFamily.heading");
+  }
+
+  :where(button, [role="tab"], a):focus-visible {
+    outline: 2px solid hsl(var(--primary) / 0.6);
+    outline-offset: 2px;
+  }
+}
+
+@layer components {
+  .glass-panel {
+    @apply relative rounded-lg border border-border bg-bg-card/70 backdrop-blur-md;
+    box-shadow:
+      inset 0 1px 0 0 hsl(var(--border) / 0.5),
+      var(--tw-shadow, 0 8px 30px -12px hsl(var(--bg) / 0.6));
+  }
+
+  .electric-hover {
+    @apply transition-all duration-200 hover:-translate-y-0.5;
+  }
+  .electric-hover:hover {
+    border-color: hsl(var(--primary) / 0.7);
+    box-shadow: 0 0 20px -4px hsl(var(--primary-glow) / 0.45);
+  }
+  .electric-hover:focus-visible {
+    outline: 2px solid hsl(var(--primary) / 0.6);
+    outline-offset: 2px;
+  }
+
+  .glow-primary {
+    box-shadow: 0 0 20px -4px hsl(var(--primary-glow) / 0.5);
+  }
+
+  .text-neon {
+    color: hsl(var(--primary));
+  }
+
+  .gradient-text {
+    background: linear-gradient(120deg, hsl(var(--primary)), hsl(var(--accent)));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}

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

@@ -30,6 +30,8 @@ import { TimeSavedCard } from "../components/TimeSavedCard";
 import { ProviderCacheCard } from "../components/ProviderCacheCard";
 import { StripeDistributionCard } from "../components/StripeDistributionCard";
 import { CacheHitRateTrendCard } from "../components/CacheHitRateTrendCard";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 
 export default function CacheTab(): React.ReactElement {
 	const [infoExpanded, setInfoExpanded] = useState(false);
@@ -74,38 +76,43 @@ export default function CacheTab(): React.ReactElement {
 	);
 
 	return (
-		<div className="cache-tab">
-			<div className="card-section">
-				<button
+		<div className="flex flex-col gap-4">
+			<div>
+				<Button
 					type="button"
-					className="info-toggle"
+					variant="outline"
 					onClick={() => setInfoExpanded(!infoExpanded)}
 				>
 					{infoExpanded ? "Hide Guidance" : "Show Cache-Friendly Prompt Ordering Guidance"}
-				</button>
+				</Button>
 				{infoExpanded && (
-					<div className="info-panel">
-						<h3>Cache-Friendly Prompt Ordering</h3>
-						<ul>
-							<li>Keep system prompts and stable context at the top of your conversation — the provider caches the leading prefix.</li>
-							<li>Tool results and volatile content are automatically moved to the tail by message separation (<code>MEGACOMPACT_MESSAGE_SEPARATION</code>) so they don't invalidate the cache prefix.</li>
-							<li>Cache striping (<code>MEGACOMPACT_CACHE_STRIPING</code>) further orders stable context by a stability score so the most durable chunks lead.</li>
-							<li>Avoid inserting new instructions mid-conversation — prepend them instead.</li>
-						</ul>
-						{snapshot && (
-							<div className="cache-status-indicator">
-								<strong>Status:</strong>{" "}
-								{snapshot.config.messageSeparation ? "Separation Enabled" : "Separation Disabled (Check env)"} |{" "}
-								{snapshot.config.cacheStriping ? "Striping Enabled" : "Striping Disabled (Check env)"}
-							</div>
-						)}
-					</div>
+					<Card className="mt-3">
+						<CardHeader>
+							<CardTitle>Cache-Friendly Prompt Ordering</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<ul className="list-disc space-y-1 pl-5">
+								<li>Keep system prompts and stable context at the top of your conversation — the provider caches the leading prefix.</li>
+								<li>Tool results and volatile content are automatically moved to the tail by message separation (<code>MEGACOMPACT_MESSAGE_SEPARATION</code>) so they don't invalidate the cache prefix.</li>
+								<li>Cache striping (<code>MEGACOMPACT_CACHE_STRIPING</code>) further orders stable context by a stability score so the most durable chunks lead.</li>
+								<li>Avoid inserting new instructions mid-conversation — prepend them instead.</li>
+							</ul>
+							{snapshot && (
+								<div className="mt-2 text-sm">
+									<strong>Status:</strong>{" "}
+									{snapshot.config.auto ? "Auto-compaction Enabled" : "Auto-compaction Disabled"} |{" "}
+									fast-gate {snapshot.config.fastGatePct}% / threshold{" "}
+									{snapshot.config.thresholdTokens.toLocaleString()} tokens
+								</div>
+							)}
+						</CardContent>
+					</Card>
 				)}
 			</div>
 			{/* ==============================================================
 			    Section 1 -- Provider Prompt Cache
 			    ============================================================== */}
-			<h2>Provider Prompt Cache</h2>
+			<h2 className="font-heading text-lg font-semibold">Provider Prompt Cache</h2>
 			{pcLoading ? (
 				<p className="tab-stub">Loading...</p>
 			) : pcError ? (
@@ -132,7 +139,7 @@ export default function CacheTab(): React.ReactElement {
 			{/* ==============================================================
 			    Section 2 -- Cache Stripe Distribution
 			    ============================================================== */}
-			<h2>Cache Stripe Distribution</h2>
+			<h2 className="font-heading text-lg font-semibold">Cache Stripe Distribution</h2>
 			{stripesLoading ? (
 				<p className="tab-stub">Loading...</p>
 			) : stripesError ? (
@@ -146,7 +153,7 @@ export default function CacheTab(): React.ReactElement {
 			{/* ==============================================================
 			    Section 3 -- Cache Hit-Rate Trend
 			    ============================================================== */}
-			<h2>Cache Hit-Rate Trend</h2>
+			<h2 className="font-heading text-lg font-semibold">Cache Hit-Rate Trend</h2>
 			{perfLoading ? (
 				<p className="tab-stub">Loading...</p>
 			) : perfError ? (
@@ -160,7 +167,7 @@ export default function CacheTab(): React.ReactElement {
 			{/* ==============================================================
 			    Section 4 -- Mega-Compact Dedup Cache
 			    ============================================================== */}
-			<h2>Mega-Compact Dedup Cache</h2>
+			<h2 className="font-heading text-lg font-semibold">Mega-Compact Dedup Cache</h2>
 			{snapLoading ? (
 				<p className="tab-stub">Loading...</p>
 			) : snapError ? (
@@ -170,7 +177,7 @@ export default function CacheTab(): React.ReactElement {
 				(() => {
 					const { cacheHits, compacts, timeSaved } = snapshot;
 					return (
-						<div className="card-grid overview-card-grid">
+						<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
 							<CacheHitsCard
 								cacheHitsSession={cacheHits.session}
 								cacheHitsTotal={cacheHits.total}

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

@@ -15,6 +15,7 @@ import {
 	EventCategoryFilter,
 	type EventCategory,
 } from "../components/EventCategoryFilter";
+import { Badge } from "../components/ui/badge";
 
 const COMPACT_TYPES = new Set([
 	"compact_start",
@@ -31,6 +32,11 @@ const CONFIG_TYPES = new Set([
 	"anchors_updated",
 	"checkpoint_persisted",
 ]);
+const RECALL_TYPES = new Set([
+	"recall_inject",
+	"hyde_executed",
+	"recall_metrics",
+]);
 const CREW_TYPES = new Set([
 	"crew_presence_changed",
 	"crew_turn_changed",
@@ -48,7 +54,7 @@ function matchesCategory(ev: SseEvent, cat: EventCategory): boolean {
 	if (cat === "all") return true;
 	const t = ev.type;
 	if (cat === "compact") return COMPACT_TYPES.has(t);
-	if (cat === "recall") return t === "recall_inject";
+	if (cat === "recall") return RECALL_TYPES.has(t);
 	if (cat === "config") return CONFIG_TYPES.has(t);
 	if (cat === "crew") return CREW_TYPES.has(t);
 	return GAME_TYPES.has(t); // cat === "game"
@@ -63,7 +69,14 @@ export default function EventsTab(): React.ReactElement {
 		[events, category],
 	);
 
-	const statusCls = `sse-status sse-${status}`;
+	const statusVariant =
+		status === "connected"
+			? ("success" as const)
+			: status === "error"
+				? ("danger" as const)
+				: status === "connecting"
+					? ("warning" as const)
+					: ("outline" as const);
 	const statusLabel =
 		status === "connected"
 			? "connected"
@@ -74,13 +87,15 @@ export default function EventsTab(): React.ReactElement {
 					: "disconnected";
 
 	return (
-		<div className="events-tab">
-			<div className="events-header">
-				<span className={statusCls} role="status">
-					<span className="sse-dot" aria-hidden="true" />
+		<div className="flex flex-col gap-4">
+			<div className="flex items-center justify-between">
+				<Badge variant={statusVariant} role="status">
+					<span className="mr-1 inline-block h-1.5 w-1.5 rounded-full bg-current" aria-hidden="true" />
 					{statusLabel}
+				</Badge>
+				<span className="text-xs text-muted-foreground">
+					{eventCount} events received
 				</span>
-				<span className="event-count">{eventCount} events received</span>
 			</div>
 			<EventCategoryFilter active={category} onFilter={setCategory} />
 			<EventStream events={filtered} />

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

@@ -6,6 +6,8 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { fetchContextHealth, type ContextHealthResponse } from "../api/health";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Badge } from "../components/ui/badge";
 
 function healthColor(score: number): string {
 	if (score > 0.8) return "#4ade80";
@@ -105,60 +107,89 @@ export default function HealthTab(): React.ReactElement {
 	const composite = latest?.composite ?? 0;
 
 	return (
-		<div className="health-tab">
-			<div className="health-top-row">
-				<HealthGauge score={composite} />
-				<div className="health-subscores">
-					<h3>Sub-Scores</h3>
-					<SubScoreBar label="Drift" value={latest?.driftScore ?? 0} />
-					<SubScoreBar label="Output Quality" value={latest?.outputQuality ?? 0} />
-					<SubScoreBar label="Error Rate" value={latest?.errorScore ?? 0} />
-					<SubScoreBar label="Cache Health" value={latest?.cacheHealth ?? 0} />
-					<SubScoreBar label="Cache Poison" value={latest?.cachePoison ?? 0} />
-				</div>
+		<div className="flex flex-col gap-4">
+			<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+				<Card>
+					<CardContent className="flex justify-center">
+						<HealthGauge score={composite} />
+					</CardContent>
+				</Card>
+				<Card>
+					<CardHeader>
+						<CardTitle>Sub-Scores</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<SubScoreBar label="Drift" value={latest?.driftScore ?? 0} />
+						<SubScoreBar label="Output Quality" value={latest?.outputQuality ?? 0} />
+						<SubScoreBar label="Error Rate" value={latest?.errorScore ?? 0} />
+						<SubScoreBar label="Cache Health" value={latest?.cacheHealth ?? 0} />
+						<SubScoreBar label="Cache Poison" value={latest?.cachePoison ?? 0} />
+					</CardContent>
+				</Card>
 			</div>
 
-			<div className="health-trend-section">
-				<h3>Health Trend (last {data.trend.length} turns)</h3>
-				<HealthSparkline trend={data.trend} />
-			</div>
+			<Card>
+				<CardHeader>
+					<CardTitle>Health Trend (last {data.trend.length} turns)</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<HealthSparkline trend={data.trend} />
+				</CardContent>
+			</Card>
 
 			{data.alerts.length > 0 && (
-				<div className="health-alerts">
-					<h3>Recent Alerts ({data.alerts.length})</h3>
-					<div className="health-alert-list">
-						{data.alerts.slice(-10).map((a) => (
-							<div key={`${a.ts}-${a.turnIndex}`} className="health-alert-row">
-								<span className="health-alert-time">{new Date(a.ts).toLocaleTimeString()}</span>
-								<span className="health-alert-model">{a.modelId ?? "(unknown)"}</span>
-								<span className="health-alert-score" style={{ color: healthColor(a.composite) }}>
-									{(a.composite * 100).toFixed(0)}
-								</span>
-								{a.cachePoison < 0.3 && <span className="health-alert-tag">CACHE POISON</span>}
-							</div>
-						))}
-					</div>
-				</div>
+				<Card>
+					<CardHeader>
+						<CardTitle>Recent Alerts ({data.alerts.length})</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="flex flex-col gap-1">
+							{data.alerts.slice(-10).map((a) => (
+								<div
+									key={`${a.ts}-${a.turnIndex}`}
+									className="flex items-center gap-3 border-b border-border/50 py-1 text-sm"
+								>
+									<span className="text-xs text-muted-foreground">{new Date(a.ts).toLocaleTimeString()}</span>
+									<span className="text-muted-foreground">{a.modelId ?? "(unknown)"}</span>
+									<span style={{ color: healthColor(a.composite) }}>
+										{(a.composite * 100).toFixed(0)}
+									</span>
+									{a.cachePoison < 0.3 && <Badge variant="danger">CACHE POISON</Badge>}
+								</div>
+							))}
+						</div>
+					</CardContent>
+				</Card>
 			)}
 
 			{data.perModel.length > 0 && (
-				<div className="health-per-model">
-					<h3>Health by Model</h3>
-					<table className="health-model-table">
-						<thead><tr><th>Model</th><th>Avg Health</th><th>Samples</th></tr></thead>
-						<tbody>
-							{data.perModel.map((m) => (
-								<tr key={m.modelId}>
-									<td>{m.modelId}</td>
-									<td style={{ color: healthColor(m.avgComposite) }}>
-										{(m.avgComposite * 100).toFixed(0)}%
-									</td>
-									<td>{m.sampleCount}</td>
+				<Card>
+					<CardHeader>
+						<CardTitle>Health by Model</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<table className="w-full border-collapse text-sm">
+							<thead>
+								<tr>
+									<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Model</th>
+									<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Avg Health</th>
+									<th className="border-b border-border px-3 py-2 text-left font-medium text-muted-foreground">Samples</th>
 								</tr>
-							))}
-						</tbody>
-					</table>
-				</div>
+							</thead>
+							<tbody>
+								{data.perModel.map((m) => (
+									<tr key={m.modelId} className="border-b border-border/50">
+										<td className="px-3 py-2">{m.modelId}</td>
+										<td className="px-3 py-2" style={{ color: healthColor(m.avgComposite) }}>
+											{(m.avgComposite * 100).toFixed(0)}%
+										</td>
+										<td className="px-3 py-2">{m.sampleCount}</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</CardContent>
+				</Card>
 			)}
 		</div>
 	);