selftune 0.2.21 → 0.2.23

package/packages/ui/src/components/SkillsLibrary.tsx

@@ -0,0 +1,437 @@
+import { Badge } from "../primitives/badge";
+import { Card } from "../primitives/card";
+import { deriveStatus, formatRate, sortByPassRateAndChecks, timeAgo } from "../lib/format";
+import type { SkillHealthStatus } from "../types";
+import {
+  AlertCircleIcon,
+  ArrowUpDownIcon,
+  BrainCircuitIcon,
+  CircleDotIcon,
+  RefreshCwIcon,
+} from "lucide-react";
+import { type ReactNode } from "react";
+
+/* ── Types ─────────────────────────────────────────────────── */
+
+export type FilterTab = "ALL" | "HEALTHY" | "WARNING" | "CRITICAL" | "UNGRADED";
+
+export interface DerivedSkill {
+  name: string;
+  scope: string | null;
+  platforms: string[];
+  passRate: number | null;
+  checks: number;
+  status: SkillHealthStatus;
+  uniqueSessions: number;
+  triggeredCount: number;
+  lastSeen: string | null;
+}
+
+export interface SkillHeroCardProps {
+  skillName: string;
+  skillScope: string | null;
+  platforms?: string[];
+  passRate: number | null;
+  totalChecks: number;
+  uniqueSessions: number;
+  status: SkillHealthStatus;
+  latestEvolutionTimestamp: string | null;
+  /** Render prop for action buttons (link component varies by framework) */
+  renderActions?: (skillName: string) => ReactNode;
+}
+
+export interface LibraryHealthCardProps {
+  aggregatePassRate: number | null;
+  gradedCount: number;
+}
+
+export interface PendingProposalsCardProps {
+  proposals: Array<{
+    id: string;
+    skillName: string | null;
+    action: string;
+  }>;
+}
+
+export interface SkillCardProps {
+  skill: DerivedSkill;
+  /** Render prop for action buttons (link component varies by framework) */
+  renderActions?: (skillName: string) => ReactNode;
+}
+
+export interface SkillFilterTabsProps {
+  filter: FilterTab;
+  onFilterChange: (tab: FilterTab) => void;
+  counts: Record<FilterTab, number>;
+  sortDesc: boolean;
+  onSortToggle: () => void;
+}
+
+/* ── Constants ─────────────────────────────────────────────── */
+
+const FILTER_TABS: { key: FilterTab; label: string }[] = [
+  { key: "ALL", label: "All Skills" },
+  { key: "HEALTHY", label: "Healthy" },
+  { key: "WARNING", label: "Warning" },
+  { key: "CRITICAL", label: "Critical" },
+  { key: "UNGRADED", label: "Ungraded" },
+];
+
+const STATUS_STYLE: Record<SkillHealthStatus, { text: string; bg: string; label: string }> = {
+  HEALTHY: { text: "text-primary", bg: "bg-primary", label: "Deployed" },
+  WARNING: { text: "text-primary-accent", bg: "bg-primary-accent", label: "Needs Attention" },
+  CRITICAL: { text: "text-destructive", bg: "bg-destructive", label: "Critical" },
+  UNGRADED: { text: "text-muted-foreground", bg: "bg-muted-foreground", label: "Ungraded" },
+  UNKNOWN: { text: "text-muted-foreground", bg: "bg-muted-foreground", label: "Unknown" },
+};
+
+function getPassRatePercent(passRate: number | null): number {
+  return passRate !== null ? Math.round(passRate * 100) : 0;
+}
+
+/* ── Loading Skeleton ──────────────────────────────────────── */
+
+export function SkillsLibrarySkeleton() {
+  return (
+    <div className="flex flex-1 flex-col gap-8 p-6 md:p-10 animate-in fade-in duration-500">
+      <div className="space-y-2">
+        <div className="h-12 w-64 rounded-lg bg-muted animate-pulse" />
+        <div className="h-5 w-96 rounded-lg bg-muted animate-pulse" />
+      </div>
+      <div className="grid grid-cols-12 gap-6">
+        <div className="col-span-12 lg:col-span-8 h-72 rounded-xl bg-muted animate-pulse" />
+        <div className="col-span-12 lg:col-span-4 flex flex-col gap-6">
+          <div className="h-32 rounded-xl bg-muted animate-pulse" />
+          <div className="h-32 rounded-xl bg-muted animate-pulse" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={`skel-${i}`} className="h-52 rounded-xl bg-muted animate-pulse" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ── Hero Card ─────────────────────────────────────────────── */
+
+export function SkillHeroCard({
+  skillName,
+  skillScope,
+  platforms,
+  passRate,
+  totalChecks,
+  uniqueSessions,
+  status,
+  latestEvolutionTimestamp,
+  renderActions,
+}: SkillHeroCardProps) {
+  const passRatePct = getPassRatePercent(totalChecks > 0 ? passRate : null);
+  const style = STATUS_STYLE[status];
+
+  return (
+    <Card className="col-span-12 lg:col-span-8 rounded-3xl border border-border/15 p-8 relative overflow-hidden flex flex-col">
+      {/* Top progress bar */}
+      <div className="absolute top-0 left-0 w-full h-1 bg-input">
+        <div
+          className="h-full bg-primary shadow-[0_0_15px_rgba(79,242,255,0.6)] transition-all duration-700"
+          style={{ width: `${passRatePct}%` }}
+        />
+      </div>
+
+      {/* Header row */}
+      <div className="flex justify-between items-start mb-6">
+        <div>
+          <div className="flex items-center gap-3 mb-2">
+            <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-primary/10 text-primary uppercase tracking-widest">
+              {status === "HEALTHY" ? "Deployed" : "Evolving"}
+            </span>
+            {platforms && platforms.length > 0 ? (
+              <span className="flex items-center gap-1">
+                {platforms.map((p) => (
+                  <span
+                    key={p}
+                    className="px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono text-[10px]"
+                  >
+                    {p}
+                  </span>
+                ))}
+              </span>
+            ) : (
+              <span className="text-muted-foreground font-mono text-xs">
+                {skillScope ?? "global"} scope
+              </span>
+            )}
+          </div>
+          <h2 className="font-headline text-3xl font-bold text-foreground">{skillName}</h2>
+        </div>
+        <div className="text-right">
+          <span className="text-4xl font-headline font-light text-primary">
+            {formatRate(totalChecks > 0 ? passRate : null)}
+          </span>
+          <p className="text-[10px] text-muted-foreground uppercase tracking-widest mt-1">
+            {latestEvolutionTimestamp
+              ? `Evolved ${timeAgo(latestEvolutionTimestamp)}`
+              : "Pass Rate"}
+          </p>
+        </div>
+      </div>
+
+      {/* Stats grid */}
+      <div className="grid grid-cols-3 gap-8 mb-8">
+        <div className="bg-muted p-4 rounded-2xl border border-border/15">
+          <p className="text-[10px] text-muted-foreground uppercase tracking-widest mb-1">
+            Total Checks
+          </p>
+          <p className="text-xl font-bold font-headline tabular-nums">
+            {totalChecks.toLocaleString()}
+          </p>
+        </div>
+        <div className="bg-muted p-4 rounded-2xl border border-border/15">
+          <p className="text-[10px] text-muted-foreground uppercase tracking-widest mb-1">
+            Pass Rate
+          </p>
+          <p className={`text-xl font-bold font-headline tabular-nums ${style.text}`}>
+            {formatRate(totalChecks > 0 ? passRate : null)}
+          </p>
+        </div>
+        <div className="bg-muted p-4 rounded-2xl border border-border/15">
+          <p className="text-[10px] text-muted-foreground uppercase tracking-widest mb-1">
+            Unique Sessions
+          </p>
+          <p className="text-xl font-bold font-headline tabular-nums">
+            {uniqueSessions.toLocaleString()}
+          </p>
+        </div>
+      </div>
+
+      {/* Action buttons */}
+      <div className="flex justify-end gap-4">{renderActions?.(skillName)}</div>
+    </Card>
+  );
+}
+
+/* ── Library Health Card ───────────────────────────────────── */
+
+export function LibraryHealthCard({ aggregatePassRate, gradedCount }: LibraryHealthCardProps) {
+  return (
+    <Card className="rounded-3xl border border-border/15 p-6 flex flex-col justify-center">
+      <p className="text-[10px] text-muted-foreground uppercase tracking-widest mb-4">
+        Library Health
+      </p>
+      <div className="flex items-end gap-2 mb-2">
+        <span className="text-5xl font-headline font-bold tabular-nums">
+          {aggregatePassRate !== null ? `${Math.round(aggregatePassRate * 100)}%` : "--"}
+        </span>
+      </div>
+      <p className="text-sm text-muted-foreground">
+        Aggregate pass rate across {gradedCount} graded skill{gradedCount !== 1 ? "s" : ""}.
+      </p>
+    </Card>
+  );
+}
+
+/* ── Pending Proposals Card ────────────────────────────────── */
+
+export function PendingProposalsCard({ proposals }: PendingProposalsCardProps) {
+  if (proposals.length === 0) {
+    return (
+      <Card className="rounded-3xl p-6 flex flex-col gap-3 border border-border/15 border-l-4 border-l-primary/40">
+        <p className="text-[10px] text-muted-foreground uppercase tracking-widest mb-2">
+          Pending Proposals
+        </p>
+        <h3 className="font-headline font-bold text-lg">No proposals pending</h3>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="rounded-3xl p-6 flex flex-col gap-3 border border-border/15 border-l-4 border-l-primary/40">
+      <p className="text-[10px] text-muted-foreground uppercase tracking-widest mb-2">
+        Pending Proposals
+      </p>
+      <h3 className="font-headline font-bold text-lg mb-4">
+        Awaiting Review
+        <Badge
+          variant="secondary"
+          className="ml-2 h-5 px-2 text-[10px] bg-primary/15 text-primary border-none align-middle"
+        >
+          {proposals.length}
+        </Badge>
+      </h3>
+      <div className="space-y-3 max-h-32 overflow-y-auto themed-scroll">
+        {proposals.map((p) => (
+          <div key={p.id} className="flex items-center justify-between p-3 bg-muted rounded-xl">
+            <span className="text-sm truncate">{p.skillName ?? "Unknown"}</span>
+            <span className="text-xs text-muted-foreground shrink-0">{p.action}</span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+/* ── Skill Card ────────────────────────────────────────────── */
+
+export function SkillCardItem({ skill, renderActions }: SkillCardProps) {
+  const passRatePct = getPassRatePercent(skill.passRate);
+  const style = STATUS_STYLE[skill.status];
+
+  return (
+    <Card className="border border-border/15 p-6 hover:border-border/30 transition-all duration-300 flex flex-col">
+      {/* Top row: status dot in box (left) + metric (right) */}
+      <div className="flex justify-between items-start mb-4">
+        <div className="w-12 h-12 rounded-xl bg-muted flex items-center justify-center">
+          <span className={`size-3 rounded-full ${style.bg}`} />
+        </div>
+        <div className="text-right">
+          <div className="flex flex-wrap justify-end gap-1">
+            {skill.platforms && skill.platforms.length > 0 ? (
+              skill.platforms.map((p) => (
+                <span
+                  key={p}
+                  className="text-[10px] text-muted-foreground uppercase tracking-widest"
+                >
+                  {p}
+                </span>
+              ))
+            ) : (
+              <span className="text-[10px] text-muted-foreground uppercase tracking-widest">
+                {skill.scope ?? "unknown"}
+              </span>
+            )}
+          </div>
+          <p className="text-sm font-bold tabular-nums">{skill.checks.toLocaleString()}</p>
+        </div>
+      </div>
+
+      {/* Title + description */}
+      <h3 className="font-headline font-bold text-xl tracking-tight text-foreground truncate mb-1">
+        {skill.name}
+      </h3>
+      <p className="text-sm text-muted-foreground mb-6">
+        {skill.uniqueSessions} sessions · Last seen{" "}
+        {skill.lastSeen ? timeAgo(skill.lastSeen) : "never"}
+      </p>
+
+      {/* Progress section */}
+      <div className="space-y-4">
+        <div className="flex justify-between items-end text-xs uppercase tracking-tighter">
+          <span className="text-muted-foreground">Pass Rate</span>
+          <span className={`font-bold ${style.text}`}>{style.label}</span>
+        </div>
+        <div className="w-full h-1 bg-input rounded-full overflow-hidden">
+          <div
+            className={`h-full rounded-full transition-all duration-500 ${style.bg}`}
+            style={{ width: `${passRatePct}%` }}
+          />
+        </div>
+
+        {/* Buttons */}
+        <div className="pt-4 flex gap-3">{renderActions?.(skill.name)}</div>
+      </div>
+    </Card>
+  );
+}
+
+/* ── Filter Tabs ───────────────────────────────────────────── */
+
+export function SkillFilterTabs({
+  filter,
+  onFilterChange,
+  counts,
+  sortDesc,
+  onSortToggle,
+}: SkillFilterTabsProps) {
+  return (
+    <div className="flex items-center justify-between gap-4 flex-wrap">
+      <div className="flex gap-1 bg-muted rounded-xl p-1">
+        {FILTER_TABS.map((tab) => (
+          <button
+            key={tab.key}
+            type="button"
+            onClick={() => onFilterChange(tab.key)}
+            className={`px-4 py-2 rounded-lg text-sm font-headline font-semibold transition-all duration-200 ${
+              filter === tab.key
+                ? "bg-card text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {tab.label}
+            <span className="ml-1.5 text-xs opacity-60">{counts[tab.key]}</span>
+          </button>
+        ))}
+      </div>
+
+      <button
+        type="button"
+        onClick={onSortToggle}
+        className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors font-headline"
+        title={sortDesc ? "Highest pass rate first" : "Lowest pass rate first"}
+      >
+        <ArrowUpDownIcon className="size-4" />
+        <span>Sort by Performance</span>
+      </button>
+    </div>
+  );
+}
+
+/* ── Empty Hero Placeholder ────────────────────────────────── */
+
+export function SkillHeroEmpty() {
+  return (
+    <Card className="col-span-12 lg:col-span-8 border border-border/15 p-8 flex items-center justify-center">
+      <div className="text-center space-y-2">
+        <BrainCircuitIcon className="size-10 text-muted-foreground mx-auto" />
+        <p className="text-muted-foreground">
+          No evolution activity yet. Run an evolution cycle to see your most active skill.
+        </p>
+      </div>
+    </Card>
+  );
+}
+
+/* ── Empty Grid Placeholder ────────────────────────────────── */
+
+export function SkillGridEmpty() {
+  return (
+    <Card className="border border-border/15 p-12 text-center">
+      <CircleDotIcon className="size-8 text-muted-foreground mx-auto mb-3" />
+      <p className="text-muted-foreground font-headline">No skills match the current filter</p>
+    </Card>
+  );
+}
+
+/* ── Error State ───────────────────────────────────────────── */
+
+export function SkillsLibraryError({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry?: () => void;
+}) {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 py-16">
+      <AlertCircleIcon className="size-10 text-destructive" />
+      <p className="text-sm font-medium text-destructive">{message}</p>
+      {onRetry && (
+        <button
+          type="button"
+          onClick={onRetry}
+          className="inline-flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm font-medium hover:bg-muted transition-colors"
+        >
+          <RefreshCwIcon className="size-3.5" />
+          Retry
+        </button>
+      )}
+    </div>
+  );
+}
+
+/* ── Utility re-exports for consumers ──────────────────────── */
+
+export { deriveStatus, formatRate, sortByPassRateAndChecks, timeAgo };
+export { STATUS_STYLE, FILTER_TABS, getPassRatePercent };
+export type { SkillHealthStatus };

package/packages/ui/src/components/index.ts

@@ -1,8 +1,63 @@
 export { ActivityPanel } from "./ActivityTimeline";
+export { JobHistoryTimeline } from "./JobHistoryTimeline";
+export type { JobHistoryFilters } from "./JobHistoryTimeline";
+export { PipelineStatusBar } from "./PipelineStatusBar";
+export {
+  PassRateTrendChart,
+  SkillRankingsList,
+  ActivityHeatmap,
+  EvolutionROIList,
+} from "./AnalyticsCharts";
+export type {
+  PassRateTrendPoint,
+  SkillRanking,
+  DailyActivity,
+  EvolutionImpact,
+  AnalyticsSummary,
+  AnalyticsResponse,
+} from "./AnalyticsCharts";
 export { EvidenceViewer } from "./EvidenceViewer";
 export { EvolutionTimeline } from "./EvolutionTimeline";
 export { InfoTip } from "./InfoTip";
+export { InvocationsPanel } from "./InvocationsPanel";
+export type { InvocationRow, SessionMeta, InvocationFilter } from "./InvocationsPanel";
 export { OrchestrateRunsPanel } from "./OrchestrateRunsPanel";
-export { RecentActivityFeed } from "./RecentActivityFeed";
+export {
+  AutonomyHeroCard,
+  TrustWatchlistRail,
+  SupervisionFeed,
+  SkillComparisonGrid,
+} from "./OverviewPanels";
+export type { AutonomyHeroCardProps, SkillComparisonRow } from "./OverviewPanels";
 export { SectionCards } from "./section-cards";
 export { SkillHealthGrid } from "./skill-health-grid";
+export {
+  SkillReportTopRow,
+  SkillTrustNarrativePanel,
+  TrustSignalsGrid,
+  PromptEvidencePanel,
+  DataQualityPanel,
+  observationBadge,
+  historicalContextBadge,
+} from "./SkillReportPanels";
+export { SkillReportGuideSheet, SkillReportOnboardingBanner } from "./SkillReportGuide";
+export {
+  SkillHeroCard,
+  LibraryHealthCard,
+  PendingProposalsCard,
+  SkillCardItem,
+  SkillFilterTabs,
+  SkillHeroEmpty,
+  SkillGridEmpty,
+  SkillsLibrarySkeleton,
+  SkillsLibraryError,
+} from "./SkillsLibrary";
+export type {
+  DerivedSkill,
+  FilterTab,
+  SkillHeroCardProps,
+  LibraryHealthCardProps,
+  PendingProposalsCardProps,
+  SkillCardProps,
+  SkillFilterTabsProps,
+} from "./SkillsLibrary";

package/packages/ui/src/components/section-cards.tsx

@@ -1,3 +1,6 @@
+import { Badge } from "../primitives/badge";
+import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+import { InfoTip } from "./InfoTip";
 import {
   TrendingUpIcon,
   TrendingDownIcon,
@@ -9,10 +12,6 @@ import {
   SearchXIcon,
 } from "lucide-react";
 
-import { Badge } from "../primitives/badge";
-import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "../primitives/card";
-import { InfoTip } from "./InfoTip";
-
 interface SectionCardsProps {
   skillsCount: number;
   avgPassRate: number | null;
@@ -21,12 +20,8 @@ interface SectionCardsProps {
   pendingCount: number;
   evidenceCount: number;
   hasEvolution?: boolean;
-  activeSessionsCount?: number;
 }
 
-const CARD_DESCRIPTION_CLASS =
-  "flex items-center gap-1.5 text-[10px] uppercase tracking-widest text-slate-500";
-
 export function SectionCards({
   skillsCount,
   avgPassRate,
@@ -35,16 +30,15 @@ export function SectionCards({
   pendingCount,
   evidenceCount,
   hasEvolution = true,
-  activeSessionsCount = 0,
 }: SectionCardsProps) {
   const passRateStr = avgPassRate !== null ? `${Math.round(avgPassRate * 100)}%` : "--";
   const passRateGood = avgPassRate !== null && avgPassRate >= 0.7;
 
   return (
-    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:shadow-none lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-3">
-      <Card className="@container/card">
+    <div className="grid grid-cols-1 gap-4 px-4 lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-3">
+      <Card className="@container/card bg-muted border-none shadow-none ring-0">
         <CardHeader>
-          <CardDescription className={CARD_DESCRIPTION_CLASS}>
+          <CardDescription className="flex items-center gap-1.5 font-headline">
             <LayersIcon className="size-3.5" />
             Skills Monitored
             <InfoTip text="Total number of skills detected and being tracked by selftune" />
@@ -61,9 +55,9 @@ export function SectionCards({
         </CardHeader>
       </Card>
 
-      <Card className="@container/card">
+      <Card className="@container/card bg-muted border-none shadow-none ring-0">
         <CardHeader>
-          <CardDescription className={CARD_DESCRIPTION_CLASS}>
+          <CardDescription className="flex items-center gap-1.5 font-headline">
             <FlaskConicalIcon className="size-3.5" />
             Avg Trigger Rate
             <InfoTip text="Average percentage of skill checks that resulted in a trigger across all graded skills (5+ checks). Run selftune evolve to improve this." />
@@ -92,9 +86,9 @@ export function SectionCards({
         </CardHeader>
       </Card>
 
-      <Card className="@container/card">
+      <Card className="@container/card bg-muted border-none shadow-none ring-0">
         <CardHeader>
-          <CardDescription className={CARD_DESCRIPTION_CLASS}>
+          <CardDescription className="flex items-center gap-1.5 font-headline">
             <SearchXIcon className="size-3.5" />
             Unmatched Queries
             <InfoTip text="User prompts that didn't match any skill's trigger criteria — potential gaps in coverage" />
@@ -113,9 +107,9 @@ export function SectionCards({
         </CardHeader>
       </Card>
 
-      <Card className="@container/card">
+      <Card className="@container/card bg-muted border-none shadow-none ring-0">
         <CardHeader>
-          <CardDescription className={CARD_DESCRIPTION_CLASS}>
+          <CardDescription className="flex items-center gap-1.5 font-headline">
             <ActivityIcon className="size-3.5" />
             Sessions
             <InfoTip text="Total agent sessions that have been recorded and analyzed" />
@@ -123,25 +117,14 @@ export function SectionCards({
           <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
             {sessionsCount}
           </CardTitle>
-          {activeSessionsCount > 0 && (
-            <CardAction>
-              <Badge variant="outline" className="gap-1.5">
-                <span className="relative flex size-2">
-                  <span className="absolute inline-flex size-full animate-ping rounded-full bg-primary opacity-75" />
-                  <span className="relative inline-flex size-2 rounded-full bg-primary shadow-[0_0_8px_color-mix(in_srgb,var(--primary)_60%,transparent)]" />
-                </span>
-                {activeSessionsCount} in progress
-              </Badge>
-            </CardAction>
-          )}
         </CardHeader>
       </Card>
 
-      <Card className="@container/card">
+      <Card className="@container/card bg-muted border-none shadow-none ring-0">
         <CardHeader>
-          <CardDescription className={CARD_DESCRIPTION_CLASS}>
+          <CardDescription className="flex items-center gap-1.5 font-headline">
             <AlertTriangleIcon className="size-3.5" />
-            Undeployed Proposals
+            Pending Proposals
             <InfoTip text="Evolution proposals that have been generated but not yet validated or deployed. Requires running selftune evolve." />
           </CardDescription>
           <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
@@ -153,15 +136,15 @@ export function SectionCards({
                 no evolution runs yet
               </Badge>
             ) : pendingCount > 0 ? (
-              <Badge variant="secondary">not yet deployed</Badge>
+              <Badge variant="secondary">awaiting review</Badge>
             ) : null}
           </CardAction>
         </CardHeader>
       </Card>
 
-      <Card className="@container/card">
+      <Card className="@container/card bg-muted border-none shadow-none ring-0">
         <CardHeader>
-          <CardDescription className={CARD_DESCRIPTION_CLASS}>
+          <CardDescription className="flex items-center gap-1.5 font-headline">
             <EyeIcon className="size-3.5" />
             Total Evidence
             <InfoTip text="Number of evidence entries documenting skill changes with before/after validation results. Requires running selftune evolve." />