pi-mega-compact 0.13.5 → 0.13.7

package/extensions/dashboard-client/src/tabs/MemoryMapTab/MemoryMapView.tsx

@@ -287,17 +287,21 @@ const MemoryMapView: React.FC = () => {
   // Loading state
 
   if (loading) {
-    return <div className="memory-map-loading">Loading memory graph...</div>;
+    return (
+      <div className="rounded-lg border border-border bg-bg-card p-6 text-center text-sm text-muted-foreground">
+        Loading memory graph...
+      </div>
+    );
   }
 
   // Error state
 
   if (error) {
     return (
-      <div className="memory-map-error">
-        <p>Failed to load memory map: {error}</p>
+      <div className="rounded-lg border border-border bg-bg-card p-6 text-center text-sm">
+        <p className="text-red-400">Failed to load memory map: {error}</p>
         <button
-          className="memory-map-retry-btn"
+          className="mt-3 rounded-md border border-border px-3 py-1.5 text-sm transition-colors hover:bg-bg-elevated hover:text-foreground"
           onClick={() => setFrame((s) => s + 1)}
         >
           Retry
@@ -310,7 +314,7 @@ const MemoryMapView: React.FC = () => {
 
   if (!data || !layoutRef.current || allSourcesEmpty) {
     return (
-      <div className="memory-map-empty">
+      <div className="rounded-lg border border-border bg-bg-card p-6 text-sm text-muted-foreground">
         <p>Memories appear after your first compaction. The graph shows checkpoints (compaction summaries) linked by semantic similarity and time. Run a longer session or lower the compaction tier to see it sooner.</p>
       </div>
     );
@@ -321,9 +325,9 @@ const MemoryMapView: React.FC = () => {
   // Render
 
   return (
-    <div className="memory-map-container">
+    <div className="flex flex-col gap-3">
       {/* Toolbar */}
-      <div className="memory-map-toolbar">
+      <div className="flex flex-wrap items-center gap-3">
         <input
           type="text"
           placeholder="Search memories..."
@@ -331,26 +335,17 @@ const MemoryMapView: React.FC = () => {
           onInput={(e: React.FormEvent<HTMLInputElement>) =>
             setSearchQuery((e.target as HTMLInputElement).value)
           }
-          className="memory-map-search"
+          className="w-56 rounded-md border border-border bg-bg-elevated/50 px-3 py-2 text-sm outline-none transition-colors focus:border-primary"
         />
-        <span className="memory-map-stats">
-          {/* Count badge */}
-          <span className="memory-map-count-badge">{countBadge}</span>
-          <br />
-          <span className="memory-map-edges">{data.edges.length} edges</span>
+        <span className="text-xs text-muted-foreground">
+          <span>{countBadge}</span>
+          {" · "}
+          <span>{data.edges.length} edges</span>
         </span>
         {/* Graph-health indicator */}
         <span
-          className="memory-map-health-badge"
-          style={{
-            backgroundColor: healthColor[graphHealth.level] ?? "#6b7280",
-            color: "#fff",
-            padding: "2px 8px",
-            borderRadius: "10px",
-            fontSize: "11px",
-            fontWeight: 600,
-            marginLeft: "8px",
-          }}
+          className="ml-auto rounded-full px-2 py-1 text-[11px] font-semibold text-white"
+          style={{ backgroundColor: healthColor[graphHealth.level] ?? "#6b7280" }}
           title={`Validation: ${graphHealth.label}`}
         >
           {graphHealth.level === "green" ? "Healthy" : graphHealth.level === "yellow" ? "Warnings" : "Critical"}
@@ -359,20 +354,17 @@ const MemoryMapView: React.FC = () => {
 
       {/* Source availability indicators */}
       {sourceAvail ? (
-        <div className="memory-map-source-avail" style={{ fontSize: "11px", padding: "2px 12px", color: "#6b7280" }}>
-          {sourceAvail}
-        </div>
+        <div className="text-[11px] text-muted-foreground">{sourceAvail}</div>
       ) : null}
 
       {/* Legend — node types + edge types */}
-      <div className="memory-map-legend">
-        <span className="memory-map-legend-section">Nodes:</span>
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 rounded-lg border border-border/60 bg-bg-card px-3 py-2 text-xs">
+        <span className="font-semibold text-muted-foreground">Nodes:</span>
         <Swatch type="node" color={NODE_COLORS.checkpoint} shape="filled-circle" label="Checkpoint" />
         <Swatch type="node" color={NODE_COLORS.turn} shape="hollow-circle" label="Turn" />
         <Swatch type="node" color={NODE_COLORS["turn-content"]} shape="hollow-ring" label="Turn Content" />
         <Swatch type="node" color={NODE_COLORS.memory} shape="diamond" label="Memory" />
-        <span className="memory-map-legend-sep">|</span>
-        <span className="memory-map-legend-section">Edges:</span>
+        <span className="font-semibold text-muted-foreground">Edges:</span>
         <Swatch type="edge" color={edgeColor("semantic")} shape="line" label="Semantic" />
         <Swatch type="edge" color={edgeColor("temporal")} shape="line" label="Temporal" />
         <Swatch type="edge" color={edgeColor("raptor_parent")} shape="line" label="Raptor" />
@@ -441,32 +433,23 @@ const MemoryMapView: React.FC = () => {
 
       {/* Node detail panel */}
       {selectedNode ? (
-        <div className="memory-map-detail">
-          <h3>
-            <span
-              className="memory-map-detail-type"
-              style={{
-                display: "inline-block",
-                fontSize: "12px",
-                fontWeight: 400,
-                color: "#6b7280",
-                marginRight: "6px",
-              }}
-            >
+        <div className="rounded-lg border border-border/60 bg-bg-card p-4 text-sm">
+          <h3 className="font-heading text-base font-semibold">
+            <span className="mr-1.5 text-xs font-normal text-muted-foreground">
               {NODE_TYPE_LABELS[selectedNode.nodeType]}
             </span>
             {selectedNode.label}
           </h3>
-          <p>{selectedNode.summaryTruncated}</p>
+          <p className="mt-1">{selectedNode.summaryTruncated}</p>
           {selectedNode.topicSummary ? (
-            <p className="memory-map-topic">Topic: {selectedNode.topicSummary}</p>
+            <p className="mt-1">Topic: {selectedNode.topicSummary}</p>
           ) : null}
-          <p>
+          <p className="mt-1">
             Tokens: {selectedNode.tokenEstimate} | Decisions: {selectedNode.decisionCount}
           </p>
           <p>Session: {selectedNode.sessionId}</p>
           <p>Raptor Level: {selectedNode.raptorLevel}</p>
-          <p className="memory-map-snippet">{selectedNode.textSnippet}</p>
+          <p className="mt-1 text-muted-foreground">{selectedNode.textSnippet}</p>
         </div>
       ) : null}
     </div>

package/extensions/dashboard-client/src/tabs/MemoryMapTab/RaptorTreeView.tsx

@@ -22,34 +22,6 @@ function formatDate(ts: number): string {
 	return new Date(ts).toLocaleString();
 }
 
-const containerStyle: React.CSSProperties = {
-	padding: "1rem",
-	width: "100%",
-	boxSizing: "border-box",
-};
-
-const headerStyle: React.CSSProperties = {
-	display: "flex",
-	gap: "1.5rem",
-	alignItems: "center",
-	marginBottom: "1rem",
-	color: "#a0a0c0",
-	fontSize: "0.9rem",
-};
-
-const emptyStyle: React.CSSProperties = {
-	padding: "2rem",
-	border: "1px dashed #2a2a4e",
-	borderRadius: "8px",
-	color: "#a0a0c0",
-	textAlign: "center",
-};
-
-const loadingStyle: React.CSSProperties = {
-	padding: "1rem",
-	color: "#a0a0c0",
-};
-
 function NodeCard({ node }: { node: RaptorNodeDTO }): React.ReactElement {
 	const border = levelColor(node.level);
 	const childrenLabel =
@@ -122,20 +94,24 @@ export default function RaptorTreeView(): React.ReactElement {
 	}, []);
 
 	if (loading) {
-		return <div style={loadingStyle}>Loading RAPTOR tree...</div>;
+		return (
+			<div className="rounded-lg border border-border bg-bg-card p-6 text-center text-sm text-muted-foreground">
+				Loading RAPTOR tree...
+			</div>
+		);
 	}
 
 	if (error) {
 		return (
-			<div style={emptyStyle}>
-				<p>Failed to load RAPTOR tree: {error}</p>
+			<div className="rounded-lg border border-dashed border-border bg-bg-card p-8 text-center text-sm">
+				<p className="text-red-400">Failed to load RAPTOR tree: {error}</p>
 			</div>
 		);
 	}
 
 	if (!data || data.empty || data.nodes.length === 0) {
 		return (
-			<div style={emptyStyle}>
+			<div className="rounded-lg border border-dashed border-border bg-bg-card p-8 text-center text-sm text-muted-foreground">
 				<p>
 					No RAPTOR tree built yet — run a compaction (the tree builds during
 					compaction).
@@ -145,8 +121,8 @@ export default function RaptorTreeView(): React.ReactElement {
 	}
 
 	return (
-		<div style={containerStyle}>
-			<div style={headerStyle}>
+		<div className="w-full p-4">
+			<div className="mb-4 flex items-center gap-6 text-sm text-muted-foreground">
 				<span>
 					<strong>{data.nodes.length}</strong> nodes
 				</span>

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

@@ -9,53 +9,33 @@ import type React from "react";
 import { useState } from "react";
 import MemoryMapView from "./MemoryMapTab/MemoryMapView.js";
 import RaptorTreeView from "./MemoryMapTab/RaptorTreeView.js";
+import { Toggle } from "../components/ui/toggle";
 
 type MemoryMapSubTab = "map" | "raptor";
 
-const subTabNavStyle: React.CSSProperties = {
-	display: "flex",
-	gap: "0.5rem",
-	marginBottom: "1rem",
-	borderBottom: "1px solid #2a2a4e",
-	paddingBottom: "0.5rem",
-	paddingTop: "0.5rem",
-	width: "100%",
-};
-
-function subTabBtnStyle(active: boolean): React.CSSProperties {
-	return {
-		background: active ? "#3a5a9f" : "transparent",
-		color: active ? "#fff" : "#a0a0c0",
-		border: "1px solid",
-		borderColor: active ? "#3a5a9f" : "#2a2a4e",
-		borderRadius: "6px",
-		padding: "0.4rem 0.8rem",
-		cursor: "pointer",
-		fontSize: "0.9rem",
-		fontWeight: active ? 600 : 400,
-	};
-}
-
 const MemoryMapTab: React.FC = () => {
 	const [subTab, setSubTab] = useState<MemoryMapSubTab>("map");
 
 	return (
-		<div className="memory-map-tab">
-			<nav style={subTabNavStyle} aria-label="Memory map sections">
-				<button
-					type="button"
-					style={subTabBtnStyle(subTab === "map")}
+		<div className="flex flex-col gap-4">
+			<nav
+				className="flex gap-2 border-b border-border pb-2 pt-2"
+				aria-label="Memory map sections"
+			>
+				<Toggle
+					pressed={subTab === "map"}
 					onClick={() => setSubTab("map")}
+					aria-label="Memory Map view"
 				>
 					Memory Map
-				</button>
-				<button
-					type="button"
-					style={subTabBtnStyle(subTab === "raptor")}
+				</Toggle>
+				<Toggle
+					pressed={subTab === "raptor"}
 					onClick={() => setSubTab("raptor")}
+					aria-label="RAPTOR Tree view"
 				>
 					RAPTOR Tree
-				</button>
+				</Toggle>
 			</nav>
 			{subTab === "map" && <MemoryMapView />}
 			{subTab === "raptor" && <RaptorTreeView />}

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

@@ -11,9 +11,11 @@ import { useCallback } from "react";
 import { useApi } from "../hooks/useApi";
 import { fetchPerf, fetchSnapshot } from "../api/client";
 import type { PerfResponse, SnapshotResponse } from "@contracts";
+import { NEW_UI } from "../config";
 import { PerfChart } from "../components/PerfChart";
 import { PerfCards } from "../components/PerfCards";
 import { ModelBadge } from "../components/ModelBadge";
+import { RagDashboard } from "../components/RagDashboard";
 
 export default function MetricsTab(): React.ReactElement {
 	const { data: perf, error: perfErr } = useApi<PerfResponse>(
@@ -35,7 +37,7 @@ export default function MetricsTab(): React.ReactElement {
 	}
 
 	return (
-		<div className="metrics-tab">
+		<div className="flex flex-col gap-4">
 			{snapshot?.model && (
 				<ModelBadge
 					name={snapshot.model.name}
@@ -47,9 +49,10 @@ export default function MetricsTab(): React.ReactElement {
 			)}
 			<PerfChart perf={perf} />
 			<PerfCards perf={perf} />
-			<div className="perf-footer">
+			<div className="text-xs text-muted-foreground">
 				{perf.sampleCount} samples · updated {perf.updatedAt}
 			</div>
+			{NEW_UI() && <RagDashboard />}
 		</div>
 	);
 }

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

@@ -41,6 +41,9 @@ import { SessionInfo } from "../components/SessionInfo";
 import { CacheHitsCard } from "../components/CacheHitsCard";
 import { TimeSavedCard } from "../components/TimeSavedCard";
 import { LegendCard } from "../components/LegendCard";
+import { Badge } from "../components/ui/badge";
+import { NEW_UI } from "../config";
+import RagHealthCard from "./SetupTab/RagHealthCard";
 
 /** Type guard: narrows an SSE event to a session_sample event. */
 function isSessionSample(e: SseEvent): e is SseSessionSample {
@@ -111,12 +114,14 @@ export default function OverviewTab({
 	const model = d.model;
 
 	return (
-		<div className="overview-tab">
-			<div className="overview-header">
-				<span className="tier-pill">{tier}</span>
-				<span className="updated">updated {formatUpdatedAt(updatedAt)}</span>
+		<div className="flex flex-col gap-4">
+			<div className="flex items-center justify-between">
+				<Badge variant="accent">{tier}</Badge>
+				<span className="text-xs text-muted-foreground">
+					updated {formatUpdatedAt(updatedAt)}
+				</span>
 			</div>
-			<div className="card-grid overview-card-grid">
+			<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
 				<SessionContextGauges
 					sessions={sessionsData}
 					loading={sessionsLoading}
@@ -209,6 +214,7 @@ export default function OverviewTab({
 					cacheHitSessionSec={timeSaved.cacheHit.sessionSec}
 					cacheHitTotalSec={timeSaved.cacheHit.totalSec}
 				/>
+				{NEW_UI() && <RagHealthCard />}
 				<LegendCard />
 			</div>
 		</div>

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

@@ -72,7 +72,7 @@ export default function ReposTab(): React.ReactElement {
 
 	if (repos.length === 0) {
 		return (
-			<div className="repos-tab">
+			<div className="flex flex-col gap-4">
 				<SummaryTiles
 					totalRepos={0}
 					totalCheckpoints={0}
@@ -92,20 +92,20 @@ export default function ReposTab(): React.ReactElement {
 	}
 
 	return (
-		<div className="repos-tab">
+		<div className="flex flex-col gap-4">
 			<SummaryTiles
 				totalRepos={summary?.totalRepos ?? 0}
 				totalCheckpoints={summary?.totalCheckpoints ?? 0}
 				totalTokensSaved={summary?.totalTokensSaved ?? 0}
 				compressedOriginalBytes={summary?.totalCompressedOriginalBytes ?? 0}
 			/>
-			<h2 className="section-header">All Repositories</h2>
+			<h2 className="font-heading text-lg font-semibold">All Repositories</h2>
 			<RepoTable repos={repos} onSelect={setSelected} />
-			<h2 className="section-header">
+			<h2 className="font-heading text-lg font-semibold">
 				Active Repos — Live Cache Hits &amp; Compactions
 			</h2>
 			<ActiveReposTable servers={servers} />
-			<h2 className="section-header">Savings by Model</h2>
+			<h2 className="font-heading text-lg font-semibold">Savings by Model</h2>
 			<SavingsByModelTable repos={repos} />
 			{selected && (
 				<RepoDetailModal repo={selected} onClose={() => setSelected(null)} />

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

@@ -22,6 +22,8 @@ import { fetchSessions, fetchSessionTimeseries } from "../api/client";
 import type { SseEvent, SseSessionSample, SessionsResponse, SessionTimeseriesResponse } from "@contracts";
 import { SessionsMemoryChart } from "../components/SessionsMemoryChart";
 import { ActiveSessionsTable } from "../components/ActiveSessionsTable";
+import { Toggle } from "../components/ui/toggle";
+import { Card, CardContent } from "../components/ui/card";
 
 /**
  * Shape of the {@link SseSessionSample} SSE event appended to events.log by
@@ -61,27 +63,37 @@ function SummaryTiles({ sessions }: SummaryTilesProps): React.ReactElement {
 	);
 	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 className="grid grid-cols-2 gap-4 md:grid-cols-4">
+			<Card>
+				<CardContent>
+					<span className="text-xs text-muted-foreground">Active sessions</span>
+					<div className="text-xl font-semibold">{active}</div>
+				</CardContent>
+			</Card>
+			<Card>
+				<CardContent>
+					<span className="text-xs text-muted-foreground">Combined tokens</span>
+					<div className="text-xl font-semibold">
+						{combinedTokens >= 100_000
+							? `${(combinedTokens / 1000).toFixed(0)}k`
+							: combinedTokens.toLocaleString()}
+					</div>
+				</CardContent>
+			</Card>
+			<Card>
+				<CardContent>
+					<span className="text-xs text-muted-foreground">
+						Combined % of max window
+					</span>
+					<div className="text-xl font-semibold">{Math.round(combinedPct)}%</div>
+				</CardContent>
+			</Card>
+			<Card>
+				<CardContent>
+					<span className="text-xs text-muted-foreground">Pruned (stale)</span>
+					<div className="text-xl font-semibold">{sessions.pruned}</div>
+				</CardContent>
+			</Card>
 		</div>
 	);
 }
@@ -155,33 +167,35 @@ export default function SessionsTab(): React.ReactElement {
 		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">
+		<div className="flex flex-col gap-4">
+			<div className="flex items-center justify-between">
+				<h2 className="font-heading text-lg font-semibold">
+					Session Memory Graph
+				</h2>
+				<div className="flex gap-2">
 					{WINDOWS.map((w) => (
-						<button
+						<Toggle
 							key={w.value}
-							type="button"
-							className={`sessions-window-btn ${minutes === w.value ? "active" : ""}`}
+							pressed={minutes === w.value}
 							onClick={() => setMinutes(w.value)}
-							aria-pressed={minutes === w.value}
 						>
 							{w.label}
-						</button>
+						</Toggle>
 					))}
 				</div>
 			</div>
 
 			{sessions.length === 0 ? (
-				<div className="sessions-empty">No active sessions.</div>
+				<div className="text-sm text-muted-foreground">No active sessions.</div>
 			) : (
 				<>
 					<SummaryTiles sessions={sessionsData} />
 					<SessionsMemoryChart series={series} totals={totals} />
-					<h2 className="section-header">Active Sessions</h2>
+					<h2 className="font-heading text-lg font-semibold">
+						Active Sessions
+					</h2>
 					<ActiveSessionsTable sessions={sessions} series={series} />
-					<div className="sessions-footer">
+					<div className="text-xs text-muted-foreground">
 						{series.length} series · {totals.length} timestamps ·{" "}
 						{windowLabel} window · updated{" "}
 						{timeseriesData?.updatedAt ?? sessionsData.updatedAt}

package/extensions/dashboard-client/src/tabs/SetupTab/EmbedderSetup.tsx

@@ -13,7 +13,7 @@ import { useState, useEffect, useCallback } from "react";
 import type { SetupStatusResponse, SetupDetectResponse, SetupConfigureResponse } from "@contracts";
 import { fetchSetupStatus, fetchSetupDetect, configureEmbedder } from "../../api/client";
 import EmbedderHealthCard from "./EmbedderHealthCard";
-import RagSettingsCard from "./RagSettingsCard";
+import SettingsPanel from "./SettingsPanel";
 
 const styles: Record<string, React.CSSProperties> = {
 	container: {
@@ -464,7 +464,11 @@ export default function EmbedderSetup(): React.ReactElement {
 					</li>
 				</ul>
 			</div>
-			<RagSettingsCard />
+			{/* Settings Section — every adjustable MEGACOMPACT_* setting */}
+			<div style={styles.section}>
+				<h3 style={styles.sectionTitle}>Settings</h3>
+				<SettingsPanel />
+			</div>
 		</div>
 	);
 }

package/extensions/dashboard-client/src/tabs/SetupTab/RagHealthCard.tsx

@@ -0,0 +1,78 @@
+/**
+ * SetupTab/RagHealthCard.tsx — mini RAG health summary for the Overview tab
+ * (H3.2). Shows pass rate, avg lift, and an on/off indicator dot, fetched
+ * inline from /api/rag-metrics.
+ *
+ * PREVENT-PI-004: relative-path fetch to the same-origin dashboard server.
+ */
+
+import type React from "react";
+import { useMemo } from "react";
+import { useApi } from "../../hooks/useApi";
+import { fetchRagMetrics } from "../../api/client";
+import type { RagMetricsResponse } from "@contracts";
+import { Card, CardHeader, CardTitle, CardContent } from "../../components/ui/card";
+
+export const RagHealthCard: React.FC = () => {
+	const { data: m } = useApi<RagMetricsResponse>(
+		useMemo(() => () => fetchRagMetrics(), []),
+		{ pollInterval: 30_000 },
+	);
+
+	if (!m) {
+		return (
+			<Card>
+				<CardContent className="text-sm text-muted-foreground">Loading RAG health…</CardContent>
+			</Card>
+		);
+	}
+
+	const { totals, flags } = m;
+	const active = flags.hydeEnabled || flags.recallMetricsEnabled;
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="flex items-center gap-2">
+					<span
+						className={`inline-block h-2 w-2 rounded-full ${active ? "bg-success" : "bg-muted-foreground"}`}
+						aria-hidden="true"
+					/>
+					RAG Health
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{!active ? (
+					<div className="text-sm text-muted-foreground">
+						All RAG recall feature flags are off.
+					</div>
+				) : (
+					<dl className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+						<div>
+							<dt className="text-xs text-muted-foreground">Pass rate</dt>
+							<dd className="font-semibold text-foreground">
+								{Math.round(totals.recentPassRate * 100)}%
+							</dd>
+						</div>
+						<div>
+							<dt className="text-xs text-muted-foreground">Avg lift</dt>
+							<dd className="font-semibold text-foreground">
+								{totals.avgLift.toFixed(2)}×
+							</dd>
+						</div>
+						<div>
+							<dt className="text-xs text-muted-foreground">Telemetry turns</dt>
+							<dd className="font-semibold text-foreground">{totals.telemetryTurns}</dd>
+						</div>
+						<div>
+							<dt className="text-xs text-muted-foreground">HyDE ran</dt>
+							<dd className="font-semibold text-foreground">{totals.hydeRanTurns}</dd>
+						</div>
+					</dl>
+				)}
+			</CardContent>
+		</Card>
+	);
+};
+
+export default RagHealthCard;