feat: extract @selftune/ui shared component package (#61)

* feat: extract @selftune/ui shared component package

Move 11 shadcn/ui primitives and 7 domain components from
apps/local-dashboard into packages/ui/ as a source-only workspace
package. Rewire dashboard imports to consume from @selftune/ui.
Add packages/ui/README.md and update system-overview design doc.

- SkillHealthGrid now accepts renderSkillName prop (decouples react-router)
- Root workspaces expanded to include apps/* for workspace resolution
- Dashboard types.ts, utils.ts, constants.tsx re-export from shared package
- Build, tests (1398/1398), and lint all pass

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore: bump cli version to v0.2.4 [skip ci]

* fix: address CodeRabbit review feedback

- Consolidate four separate @selftune/ui/components imports into one (Overview.tsx)
- Align index.md file-level verification date to 2026-03-16
- Guard timeAgo() against invalid timestamps returning NaN
- Broaden renderSkillName prop to accept full SkillCard instead of just name
- Add type-parity-check.ts compile-time guard against contract drift

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: format type-parity-check.ts for biome

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: address second round of CodeRabbit review

- Guard lastSeen sort comparator against NaN from invalid timestamps
- Guard formatRate against NaN/Infinity inputs
- Move type-parity-check from packages/ui to tests/types/ (preserves
  UI package as a leaf with no CLI dependency)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore: bump cli version to v0.2.5 [skip ci]

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

apps/local-dashboard/package.json

@@ -31,7 +31,8 @@
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "@selftune/ui": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^19.1.6",

apps/local-dashboard/src/App.tsx

@@ -5,13 +5,13 @@ import { AppSidebar } from "@/components/app-sidebar"
 import { SiteHeader } from "@/components/site-header"
 import { ThemeProvider } from "@/components/theme-provider"
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
-import { TooltipProvider } from "@/components/ui/tooltip"
+import { TooltipProvider } from "@selftune/ui/primitives"
 import { Overview } from "@/pages/Overview"
 import { SkillReport } from "@/pages/SkillReport"
 import { Status } from "@/pages/Status"
 import { useOverview } from "@/hooks/useOverview"
 import type { SkillHealthStatus, SkillSummary } from "@/types"
-import { deriveStatus, sortByPassRateAndChecks } from "@/utils"
+import { deriveStatus, sortByPassRateAndChecks } from "@selftune/ui/lib"
 
 const queryClient = new QueryClient({
   defaultOptions: {

apps/local-dashboard/src/components/app-sidebar.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from "react"
 import { Link, useLocation } from "react-router-dom"
-import { Badge } from "@/components/ui/badge"
 import {
+  Badge,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible"
+} from "@selftune/ui/primitives"
 import { Input } from "@/components/ui/input"
 import {
   Sidebar,
@@ -35,7 +35,7 @@ import {
   SearchIcon,
   XCircleIcon,
 } from "lucide-react"
-import { formatRate } from "@/utils"
+import { formatRate } from "@selftune/ui/lib"
 import type { SkillHealthStatus } from "@/types"
 
 interface SkillNavItem {

apps/local-dashboard/src/components/theme-toggle.tsx

@@ -1,5 +1,5 @@
 import { MoonIcon, SunIcon } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { Button } from "@selftune/ui/primitives"
 import { useTheme } from "@/components/theme-provider"
 
 export function ThemeToggle() {

apps/local-dashboard/src/components/ui/sheet.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button } from "@selftune/ui/primitives"
 import { XIcon } from "lucide-react"
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {

apps/local-dashboard/src/components/ui/sidebar.tsx

@@ -5,7 +5,12 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { useIsMobile } from "@/hooks/use-mobile"
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import {
+  Button,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@selftune/ui/primitives"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
 import {
@@ -16,11 +21,6 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet"
 import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
 import { PanelLeftIcon } from "lucide-react"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"

apps/local-dashboard/src/constants.tsx

@@ -1,43 +1,2 @@
-import {
-  AlertTriangleIcon,
-  CheckCircleIcon,
-  CircleDotIcon,
-  HelpCircleIcon,
-  XCircleIcon,
-} from "lucide-react";
-import type { SkillHealthStatus } from "./types";
-
-export const STATUS_CONFIG: Record<
-  SkillHealthStatus,
-  {
-    icon: React.ReactNode;
-    variant: "default" | "secondary" | "destructive" | "outline";
-    label: string;
-  }
-> = {
-  HEALTHY: {
-    icon: <CheckCircleIcon className="size-4 text-emerald-600" />,
-    variant: "outline",
-    label: "Healthy",
-  },
-  WARNING: {
-    icon: <AlertTriangleIcon className="size-4 text-amber-500" />,
-    variant: "secondary",
-    label: "Warning",
-  },
-  CRITICAL: {
-    icon: <XCircleIcon className="size-4 text-red-500" />,
-    variant: "destructive",
-    label: "Critical",
-  },
-  UNGRADED: {
-    icon: <CircleDotIcon className="size-4 text-muted-foreground" />,
-    variant: "secondary",
-    label: "Ungraded",
-  },
-  UNKNOWN: {
-    icon: <HelpCircleIcon className="size-4 text-muted-foreground/60" />,
-    variant: "secondary",
-    label: "Unknown",
-  },
-};
+// Re-export from shared package
+export { STATUS_CONFIG } from "@selftune/ui/lib";

apps/local-dashboard/src/lib/utils.ts

@@ -1,6 +1 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+export { cn } from "@selftune/ui/lib";

apps/local-dashboard/src/pages/Overview.tsx

@@ -1,14 +1,17 @@
 import { useMemo, useState } from "react"
-import { ActivityPanel } from "@/components/ActivityTimeline"
-import { OrchestrateRunsPanel } from "@/components/OrchestrateRunsPanel"
-import { SectionCards } from "@/components/section-cards"
-import { SkillHealthGrid } from "@/components/skill-health-grid"
+import { Link } from "react-router-dom"
+import {
+  ActivityPanel,
+  OrchestrateRunsPanel,
+  SectionCards,
+  SkillHealthGrid,
+} from "@selftune/ui/components"
 import type { UseQueryResult } from "@tanstack/react-query"
 import type { SkillCard, SkillHealthStatus, SkillSummary, OverviewResponse } from "@/types"
 import { useOrchestrateRuns } from "@/hooks/useOrchestrateRuns"
 import { deriveStatus, sortByPassRateAndChecks } from "@/utils"
 import { Skeleton } from "@/components/ui/skeleton"
-import { Button } from "@/components/ui/button"
+import { Button } from "@selftune/ui/primitives"
 import { AlertCircleIcon, RefreshCwIcon, RocketIcon, LayersIcon, ActivityIcon, XIcon } from "lucide-react"
 
 function deriveSkillCards(skills: SkillSummary[]): SkillCard[] {
@@ -200,7 +203,11 @@ export function Overview({
       />
 
       <div className="grid grid-cols-1 gap-6 @5xl/main:grid-cols-[1fr_320px]">
-        <SkillHealthGrid cards={filteredCards} totalCount={cards.length} statusFilter={statusFilter} onStatusFilterChange={onStatusFilterChange} />
+        <SkillHealthGrid cards={filteredCards} totalCount={cards.length} statusFilter={statusFilter} onStatusFilterChange={onStatusFilterChange} renderSkillName={(skill) => (
+          <Link to={`/skills/${encodeURIComponent(skill.name)}`} className="text-sm font-medium hover:underline">
+            {skill.name}
+          </Link>
+        )} />
 
         <div className="px-4 lg:px-6 @5xl/main:px-0 @5xl/main:pr-4 lg:@5xl/main:pr-6">
           <div className="sticky top-4 space-y-4">

apps/local-dashboard/src/pages/SkillReport.tsx

@@ -1,32 +1,35 @@
 import { useEffect, useState } from "react"
 import { Link, useParams } from "react-router-dom"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import {
+  Badge,
+  Button,
   Card,
   CardAction,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { EvolutionTimeline } from "@/components/EvolutionTimeline"
-import { EvidenceViewer } from "@/components/EvidenceViewer"
-import { InfoTip } from "@/components/InfoTip"
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@selftune/ui/primitives"
+import { Skeleton } from "@/components/ui/skeleton"
+import { EvolutionTimeline } from "@selftune/ui/components"
+import { EvidenceViewer } from "@selftune/ui/components"
+import { InfoTip } from "@selftune/ui/components"
 import { useSkillReport } from "@/hooks/useSkillReport"
-import { STATUS_CONFIG } from "@/constants"
-import { deriveStatus, formatRate, timeAgo } from "@/utils"
+import { STATUS_CONFIG } from "@selftune/ui/lib"
+import { deriveStatus, formatRate, timeAgo } from "@selftune/ui/lib"
 import {
   AlertCircleIcon,
   ArrowLeftIcon,