diff --git a/tests/test_ds_contract.py b/tests/test_ds_contract.py
index 24205bd..0164286 100644
--- a/tests/test_ds_contract.py
+++ b/tests/test_ds_contract.py
@@ -2,7 +2,6 @@
 from __future__ import annotations
 
 import json
-import os
 import re
 from pathlib import Path
 
@@ -12,7 +11,11 @@
 WEB = ROOT / "web"
 SRC = WEB / "src"
 UI = SRC / "components" / "ui"
-DS_RELEASE = "2.4.8"
+DS_RELEASE = "2.4.10"
+# The compliance checker's own version, deliberately pinned separately from
+# DS_RELEASE in the workflow: it is the binary that runs the gates, not the
+# pin the app renders, and moving it moves no pixel.
+DS_CHECKER_VERSION = "2.4.8"
 
 RAW_CONTROL = re.compile(r"<(button|input|select|textarea)(?:\s|>|/)")
 ARBITRARY_VALUE = re.compile(r"\b[a-z][a-z-]*-\[[^\]]+\]")
@@ -26,29 +29,10 @@
 SHADOW_CLASS = re.compile(r"(?<![\w-])shadow(?:-[\w\[\]-]+)?(?![\w-])")
 FULL_RADIUS = re.compile(r"(?<![\w-])rounded-full(?![\w-])")
 
-# These are upstream component source, not app-owned styling. The local candidate
-# compliance run byte-checks them against @42labs; everything else is scanned.
-ADOPTED_UI = {
-    "alert.tsx",
-    "badge.tsx",
-    "button.tsx",
-    "card.tsx",
-    "collapsible.tsx",
-    "input.tsx",
-    "pagination.tsx",
-    "progress.tsx",
-    "select.tsx",
-    "separator.tsx",
-    "sheet.tsx",
-    "sidebar.tsx",
-    "skeleton.tsx",
-    "table.tsx",
-    "theme-switch.tsx",
-    "toggle-group.tsx",
-    "toggle.tsx",
-    "tooltip.tsx",
-    "top-bar.tsx",
-}
+# Package mode, components too (42L-1913): every adopted primitive imports from
+# @4242labs/design-system now, and there is no local ui/ copy left to exclude
+# from the app-owned drift scan below.
+ADOPTED_UI: set[str] = set()
 
 
 def own_source_files() -> list[Path]:
@@ -101,7 +85,7 @@ def test_app_owned_source_has_no_visual_or_primitive_drift() -> None:
 
 def test_theme_switch_is_only_a_controller_for_the_adopted_component() -> None:
     controller = (SRC / "components" / "ThemeSwitch.tsx").read_text()
-    assert "@/components/ui/theme-switch" in controller
+    assert "@4242labs/design-system/components/theme-switch" in controller
     assert "<CanonicalThemeSwitch" in controller
     assert "ToggleGroup" not in controller
 
@@ -136,7 +120,7 @@ def test_permanent_rail_uses_complete_dark_roles_and_dark_assets() -> None:
     sidebar = (SRC / "components" / "AppSidebar.tsx").read_text()
     assert "buymeacoffee.com" in sidebar
     assert 'className="band-dark"' in sidebar
-    assert "@/components/brand-mark" in sidebar
+    assert "@4242labs/design-system/components/brand-mark" in sidebar
     assert "@/components/Brand" not in sidebar
 
 
@@ -159,7 +143,7 @@ def test_alfred_build_contract_is_exact_and_uses_npm_ci() -> None:
 
 def test_ci_pins_exact_ds_release_and_runs_provenance_and_browser_gates() -> None:
     workflow = (ROOT / ".github" / "workflows" / "ds-compliance.yml").read_text()
-    assert f"@4242labs/design-system@{DS_RELEASE}" in workflow
+    assert f"@4242labs/design-system@{DS_CHECKER_VERSION}" in workflow
     # The pin is read out of package.json, so a bump moves one file and goes green alone.
     assert '--expect "$PIN"' in workflow
     assert "--ui-dir src/components/ui" in workflow
@@ -193,16 +177,3 @@ def test_tokens_come_from_the_package_and_not_from_a_copy() -> None:
     assert '@import "@4242labs/design-system/tailwind.css";' in css
 
 
-def test_local_candidate_adopted_sources_are_byte_identical() -> None:
-    candidate = os.environ.get("DS_CANDIDATE")
-    if not candidate:
-        pytest.skip("set DS_CANDIDATE to byte-check the local design-system candidate")
-    ds_src = Path(candidate) / "src"
-    pairs = [(UI / name, ds_src / "components" / "ui" / name) for name in ADOPTED_UI]
-    pairs.append((SRC / "components" / "brand-mark.tsx", ds_src / "components" / "brand-mark.tsx"))
-    mismatches = [
-        str(local.relative_to(ROOT))
-        for local, canonical in pairs
-        if not canonical.is_file() or local.read_bytes() != canonical.read_bytes()
-    ]
-    assert mismatches == []
diff --git a/web/package-lock.json b/web/package-lock.json
index e0724dd..6cff182 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,7 +8,7 @@
       "name": "ff3e-web",
       "version": "0.1.0",
       "dependencies": {
-        "@4242labs/design-system": "2.4.8",
+        "@4242labs/design-system": "2.4.10",
         "@fontsource-variable/geist-mono": "5.3.0",
         "@fontsource-variable/ibm-plex-sans": "5.3.0",
         "@fontsource-variable/space-grotesk": "5.3.0",
@@ -17,7 +17,6 @@
         "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.2",
-        "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.1.8",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -51,9 +50,9 @@
       }
     },
     "node_modules/@4242labs/design-system": {
-      "version": "2.4.8",
-      "resolved": "https://registry.npmjs.org/@4242labs/design-system/-/design-system-2.4.8.tgz",
-      "integrity": "sha512-U/PCq4ZqFNNX30XiEsaapGY80VOpdcr31kxfqDQXuS7jdUZSEdkBci41rdoZEzpHqYb4Is/NEAgtTWeYS5gWNw==",
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/@4242labs/design-system/-/design-system-2.4.10.tgz",
+      "integrity": "sha512-J7ZMv2ZkHNN1pp+dkyt59WIPndkHUTONS6nMMYBtMMO3gXPvXmLPBL0PY1JEHL623MS3AryRGlHOSILuHxzfuw==",
       "license": "MIT",
       "dependencies": {
         "@fontsource-variable/geist-mono": "5.3.0",
diff --git a/web/package.json b/web/package.json
index a591296..868fe4c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,7 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@4242labs/design-system": "2.4.8",
+    "@4242labs/design-system": "2.4.10",
     "@fontsource-variable/geist-mono": "5.3.0",
     "@fontsource-variable/ibm-plex-sans": "5.3.0",
     "@fontsource-variable/space-grotesk": "5.3.0",
@@ -23,7 +23,6 @@
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index d183826..b121318 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { AppSidebar } from '@/components/AppSidebar'
 import { ForecastPage } from '@/components/ForecastPage'
 import { ReportsPage } from '@/components/ReportsPage'
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+import { SidebarInset, SidebarProvider } from '@4242labs/design-system/components/sidebar'
 import type { AppView } from '@/lib/types'
 
 const VIEW_KEY = 'entropy:view'
diff --git a/web/src/components/AppSidebar.tsx b/web/src/components/AppSidebar.tsx
index 280753b..1516a98 100644
--- a/web/src/components/AppSidebar.tsx
+++ b/web/src/components/AppSidebar.tsx
@@ -1,10 +1,10 @@
 import { CalendarClock, ChevronRight, Github } from 'lucide-react'
 
-import { BrandMark } from '@/components/brand-mark'
+import { BrandMark } from '@4242labs/design-system/components/brand-mark'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Wordmark } from '@/components/Wordmark'
-import { Button } from '@/components/ui/button'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { Button } from '@4242labs/design-system/components/button'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@4242labs/design-system/components/collapsible'
 import {
   Sidebar,
   SidebarContent,
@@ -20,7 +20,7 @@ import {
   SidebarMenuSubItem,
   SidebarRail,
   useSidebar,
-} from '@/components/ui/sidebar'
+} from '@4242labs/design-system/components/sidebar'
 import type { AppView } from '@/lib/types'
 
 const VIEWS: { key: AppView; label: string }[] = [
diff --git a/web/src/components/ChartCard.tsx b/web/src/components/ChartCard.tsx
index 906a197..414a642 100644
--- a/web/src/components/ChartCard.tsx
+++ b/web/src/components/ChartCard.tsx
@@ -1,9 +1,9 @@
 import { useState, type ReactNode } from 'react'
 import { Maximize2 } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Button } from '@4242labs/design-system/components/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@4242labs/design-system/components/card'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@4242labs/design-system/components/dialog'
 
 export interface ChartCardProps {
   title: string
diff --git a/web/src/components/DateRangePicker.tsx b/web/src/components/DateRangePicker.tsx
index 4173154..2d80db0 100644
--- a/web/src/components/DateRangePicker.tsx
+++ b/web/src/components/DateRangePicker.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react'
 
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Button } from '@4242labs/design-system/components/button'
+import { Calendar } from '@4242labs/design-system/components/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@4242labs/design-system/components/popover'
 import { formatDate } from '@/lib/format'
 import { anchorToDate, toISO } from '@/lib/range'
 
diff --git a/web/src/components/ErrorState.tsx b/web/src/components/ErrorState.tsx
index bc71844..fd4aea4 100644
--- a/web/src/components/ErrorState.tsx
+++ b/web/src/components/ErrorState.tsx
@@ -1,6 +1,6 @@
 import { RotateCw } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@4242labs/design-system/components/button'
 
 export function ErrorState({
   message,
diff --git a/web/src/components/FacetedFilter.tsx b/web/src/components/FacetedFilter.tsx
index 6b4bd14..a32da0f 100644
--- a/web/src/components/FacetedFilter.tsx
+++ b/web/src/components/FacetedFilter.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Check, ChevronDown } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@4242labs/design-system/components/button'
 import {
   Command,
   CommandEmpty,
@@ -10,8 +10,8 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from '@/components/ui/command'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+} from '@4242labs/design-system/components/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@4242labs/design-system/components/popover'
 import { cn } from '@/lib/utils'
 
 export interface FacetOption {
diff --git a/web/src/components/FilterBar.tsx b/web/src/components/FilterBar.tsx
index 062d624..1a75045 100644
--- a/web/src/components/FilterBar.tsx
+++ b/web/src/components/FilterBar.tsx
@@ -1,6 +1,6 @@
 import { X } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@4242labs/design-system/components/button'
 import { FacetedFilter } from '@/components/FacetedFilter'
 import { EMPTY_FILTERS, hasActiveFilters, type FilterOptions } from '@/lib/filters'
 import type { ActiveFilters, ItemType } from '@/lib/types'
diff --git a/web/src/components/PeriodNav.tsx b/web/src/components/PeriodNav.tsx
index b18a986..915b710 100644
--- a/web/src/components/PeriodNav.tsx
+++ b/web/src/components/PeriodNav.tsx
@@ -3,9 +3,9 @@ import { AlertTriangle, ChevronLeft, ChevronRight, RefreshCw } from 'lucide-reac
 import { FacetedFilter } from '@/components/FacetedFilter'
 import { FilterBar } from '@/components/FilterBar'
 import { PeriodPicker } from '@/components/PeriodPicker'
-import { Button } from '@/components/ui/button'
-import { SidebarTrigger } from '@/components/ui/sidebar'
-import { TopBar, TopBarActions, TopBarRailLead } from '@/components/ui/top-bar'
+import { Button } from '@4242labs/design-system/components/button'
+import { SidebarTrigger } from '@4242labs/design-system/components/sidebar'
+import { TopBar, TopBarActions, TopBarRailLead } from '@4242labs/design-system/components/top-bar'
 import type { FilterOptions } from '@/lib/filters'
 import {
   isCumulativeMode,
diff --git a/web/src/components/PeriodPicker.tsx b/web/src/components/PeriodPicker.tsx
index 62f8470..230e3e2 100644
--- a/web/src/components/PeriodPicker.tsx
+++ b/web/src/components/PeriodPicker.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Button } from '@4242labs/design-system/components/button'
+import { Calendar } from '@4242labs/design-system/components/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@4242labs/design-system/components/popover'
 import { anchorToDate, toISO } from '@/lib/range'
 import type { Granularity } from '@/lib/types'
 
diff --git a/web/src/components/PeriodTable.tsx b/web/src/components/PeriodTable.tsx
index acd1abd..5f633f3 100644
--- a/web/src/components/PeriodTable.tsx
+++ b/web/src/components/PeriodTable.tsx
@@ -1,5 +1,5 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Card, CardContent, CardHeader, CardTitle } from '@4242labs/design-system/components/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@4242labs/design-system/components/table'
 import { StatusBadge } from '@/components/StatusBadge'
 import { FlagBadges } from '@/components/FlagBadges'
 import { EmptyState } from '@/components/EmptyState'
diff --git a/web/src/components/ReportChart.tsx b/web/src/components/ReportChart.tsx
index 530569e..1e5bc22 100644
--- a/web/src/components/ReportChart.tsx
+++ b/web/src/components/ReportChart.tsx
@@ -1,8 +1,8 @@
 import { Fragment, useEffect, useState } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@4242labs/design-system/components/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@4242labs/design-system/components/card'
 import { formatMoney } from '@/lib/format'
 import { FLOW_LABEL, pageCount, pageOf, type Flow, type ReportCard } from '@/lib/reports'
 
diff --git a/web/src/components/ReportsNav.tsx b/web/src/components/ReportsNav.tsx
index 1a20ff4..5ed45b6 100644
--- a/web/src/components/ReportsNav.tsx
+++ b/web/src/components/ReportsNav.tsx
@@ -4,9 +4,9 @@ import { DateRangePicker } from '@/components/DateRangePicker'
 import { FacetedFilter } from '@/components/FacetedFilter'
 import { FilterBar } from '@/components/FilterBar'
 import { PeriodPicker } from '@/components/PeriodPicker'
-import { Button } from '@/components/ui/button'
-import { SidebarTrigger } from '@/components/ui/sidebar'
-import { TopBar, TopBarActions, TopBarRailLead } from '@/components/ui/top-bar'
+import { Button } from '@4242labs/design-system/components/button'
+import { SidebarTrigger } from '@4242labs/design-system/components/sidebar'
+import { TopBar, TopBarActions, TopBarRailLead } from '@4242labs/design-system/components/top-bar'
 import type { FilterOptions } from '@/lib/filters'
 import {
   isCustomPeriod,
diff --git a/web/src/components/SummaryCards.tsx b/web/src/components/SummaryCards.tsx
index c4fed9c..7a96443 100644
--- a/web/src/components/SummaryCards.tsx
+++ b/web/src/components/SummaryCards.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent } from '@/components/ui/card'
+import { Card, CardContent } from '@4242labs/design-system/components/card'
 import { formatMoney } from '@/lib/format'
 import type { ProjectionsResponse } from '@/lib/types'
 
diff --git a/web/src/components/ThemeSwitch.tsx b/web/src/components/ThemeSwitch.tsx
index ec2a5b0..a05931e 100644
--- a/web/src/components/ThemeSwitch.tsx
+++ b/web/src/components/ThemeSwitch.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import {
   ThemeSwitch as CanonicalThemeSwitch,
   type ThemeSwitchTheme,
-} from '@/components/ui/theme-switch'
+} from '@4242labs/design-system/components/theme-switch'
 
 const STORAGE_KEY = 'entropy-theme'
 
diff --git a/web/src/components/brand-mark.tsx b/web/src/components/brand-mark.tsx
deleted file mode 100644
index 79cb9df..0000000
--- a/web/src/components/brand-mark.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// The 42labs asterisk, on its own — tight rails, avatars, favicons, app chrome.
-//
-// This is the ONE copy. Consuming apps install it from the registry
-// (`npx shadcn@latest add @42labs/brand-mark`) rather than re-tracing the vector
-// or pasting the path, so the mark can never drift between products.
-//
-// Contract: `fill=currentColor`, so the mark takes its colour from `text-*`.
-// It defaults to the brand token (`text-logo`, which flips orange→mint with the
-// theme) and to a 1:1 box; pass `className` to size it like any other icon.
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function BrandMark({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    <svg
-      data-slot="brand-mark"
-      viewBox="0 0 407 402"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      aria-hidden="true"
-      className={cn("size-6 shrink-0 text-logo", className)}
-      {...props}
-    >
-      <g transform="matrix(1,0,0,1,-1645.81,-695.442)">
-        <g transform="matrix(1,0,0,1,1611.68,666.908)">
-          <path d="M307.719,28.534L376.536,67.698L267.995,213.165L440.877,190.226L440.877,267.995L267.995,247.294L267.995,249.532L377.655,388.285L305.481,428.569L236.664,267.995L234.426,267.995L160.014,429.688L95.113,388.285L203.654,246.175L34.129,267.995L34.129,190.226L202.535,212.046L202.535,209.808L95.113,68.817L164.49,29.653L235.545,189.107L238.342,189.107L307.719,28.534Z" />
-        </g>
-      </g>
-    </svg>
-  )
-}
-
-export { BrandMark }
diff --git a/web/src/components/ui/alert.tsx b/web/src/components/ui/alert.tsx
deleted file mode 100644
index f99164e..0000000
--- a/web/src/components/ui/alert.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription }
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
deleted file mode 100644
index e346c52..0000000
--- a/web/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react"
-import { Slot } from "radix-ui"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        // DS retheme: shadcn's `outline` hover uses bg-accent/text-accent-foreground,
-        // which collide with the DS brand `accent`. Point them at the neutral muted
-        // surface instead, matching the vendored button/alert convention.
-        outline:
-          "text-foreground [a&]:hover:bg-muted [a&]:hover:text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
deleted file mode 100644
index 820d1a5..0000000
--- a/web/src/components/ui/button.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        // DS theming: border-input (= border-control) on BOTH modes. Upstream
-        // uses --border on light and --input on dark; that asymmetry left the
-        // light outline at 1.38:1 while dark cleared 3:1 for the same control.
-        outline:
-          "border border-input bg-background shadow-xs hover:bg-muted hover:text-foreground dark:bg-input/30 dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
diff --git a/web/src/components/ui/calendar.tsx b/web/src/components/ui/calendar.tsx
deleted file mode 100644
index 2aa97bf..0000000
--- a/web/src/components/ui/calendar.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { DayPicker } from 'react-day-picker'
-
-import { buttonVariants } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
-
-/** shadcn Calendar over react-day-picker v10, styled from design tokens only. */
-export function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn('p-3', className)}
-      classNames={{
-        months: 'flex flex-col sm:flex-row gap-2',
-        month: 'flex flex-col gap-4',
-        month_caption: 'relative flex items-center justify-center pt-1',
-        caption_label: 'text-sm font-medium',
-        nav: 'absolute inset-x-1 top-1 z-10 flex items-center justify-between',
-        button_previous: cn(
-          buttonVariants({ variant: 'outline' }),
-          'size-7 bg-transparent p-0 opacity-60 hover:opacity-100',
-        ),
-        button_next: cn(
-          buttonVariants({ variant: 'outline' }),
-          'size-7 bg-transparent p-0 opacity-60 hover:opacity-100',
-        ),
-        month_grid: 'w-full border-collapse',
-        weekdays: 'flex',
-        weekday: 'w-8 text-xs font-normal text-muted-foreground',
-        week: 'mt-1 flex w-full',
-        day: 'relative size-8 p-0 text-center text-sm',
-        day_button: cn(
-          buttonVariants({ variant: 'ghost' }),
-          'size-8 p-0 font-normal tabular-nums aria-selected:opacity-100',
-        ),
-        selected:
-          'rounded-md bg-primary text-primary-foreground [&_button]:bg-primary [&_button]:text-primary-foreground [&_button:hover]:bg-primary',
-        today: 'rounded-md bg-accent text-accent-foreground',
-        outside: 'text-muted-foreground opacity-50',
-        disabled: 'text-muted-foreground opacity-50',
-        hidden: 'invisible',
-        ...classNames,
-      }}
-      components={{
-        Chevron: ({ orientation }) =>
-          orientation === 'left' ? (
-            <ChevronLeft className="size-4" />
-          ) : (
-            <ChevronRight className="size-4" />
-          ),
-      }}
-      {...props}
-    />
-  )
-}
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
deleted file mode 100644
index d22c44a..0000000
--- a/web/src/components/ui/card.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        // DS theming: border-subtle, not the inherited --border. Under shadow-sm
-        // (= --elev-1) the border defines the edge; it does not do the separating.
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-border-subtle py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
diff --git a/web/src/components/ui/collapsible.tsx b/web/src/components/ui/collapsible.tsx
deleted file mode 100644
index 2f7a4e7..0000000
--- a/web/src/components/ui/collapsible.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client"
-
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/web/src/components/ui/command.tsx b/web/src/components/ui/command.tsx
deleted file mode 100644
index 2c48e66..0000000
--- a/web/src/components/ui/command.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from 'react'
-import { Command as CommandPrimitive } from 'cmdk'
-import { Search } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b border-border px-3">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  </div>
-))
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn('max-h-72 overflow-y-auto overflow-x-hidden', className)}
-    {...props}
-  />
-))
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
-))
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected='true']:text-accent-foreground data-[disabled=true]:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-))
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-export {
-  Command,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandSeparator,
-}
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
deleted file mode 100644
index 0281c1c..0000000
--- a/web/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as React from "react"
-import { XIcon } from "lucide-react"
-import { Dialog as DialogPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
-
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }) {
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md border bg-background p-6 duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-export { Dialog, DialogContent, DialogHeader, DialogTitle }
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
deleted file mode 100644
index f1124ae..0000000
--- a/web/src/components/ui/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
-        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }
diff --git a/web/src/components/ui/pagination.tsx b/web/src/components/ui/pagination.tsx
deleted file mode 100644
index 7f110d9..0000000
--- a/web/src/components/ui/pagination.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client"
-
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-const ALIGN = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-} as const
-
-const STRIP = "flex items-center overflow-hidden rounded-sm border border-border [&_svg]:text-fg-muted"
-
-/**
- * Where the pager sits on the row is the PRODUCT's call, not the canon's.
- *
- * It shipped hard-wired to the trailing edge, which reads on a wide table whose last
- * column already ends there and reads as an orphan under a centred lane or a card grid.
- * There is no house rule to appeal to here — the Swiss style governs what the control
- * looks like, not where a page puts it — so the DS offers the three answers and takes
- * none. `end` stays the default because that is what every current consumer renders.
- *
- * How many rows to a page is the READER's call, but only where it changes something.
- * Pass `sizes` and `onLimitChange` together and a second strip appears beside the pager;
- * leave them out and there is none, which is right for a fixed card grid, where the size
- * changes nothing but how far you scroll. Picking a size returns to the first page: the
- * rows under the reader are about to be different rows either way, and page 7 of 10 has
- * no honest equivalent at the new size.
- */
-export function Pagination({
-  offset,
-  limit,
-  total,
-  onOffsetChange,
-  sizes,
-  onLimitChange,
-  align = "end",
-  className,
-}: {
-  offset: number
-  limit: number
-  total: number
-  onOffsetChange: (offset: number) => void
-  sizes?: number[]
-  onLimitChange?: (limit: number) => void
-  align?: "start" | "center" | "end"
-  className?: string
-}) {
-  const resizable = sizes && sizes.length > 0 && onLimitChange
-  const pages = Math.max(1, Math.ceil(total / limit))
-  const page = Math.min(pages, Math.floor(offset / limit) + 1)
-  // Nothing to page through and nothing to resize — the controls would only be furniture.
-  if (total <= (resizable ? Math.min(...sizes) : limit)) return null
-
-  const go = (next: number) => onOffsetChange((Math.min(pages, Math.max(1, next)) - 1) * limit)
-  return (
-    <div className={cn("mt-7 flex flex-wrap items-center gap-3", ALIGN[align], className)}>
-      <nav aria-label="Pages" className={STRIP}>
-        <PageCell label="First page" disabled={page <= 1} onClick={() => go(1)}><ChevronsLeft className="size-3.5" /></PageCell>
-        <PageCell label="Previous page" disabled={page <= 1} onClick={() => go(page - 1)}><ChevronLeft className="size-3.5" /></PageCell>
-        <span aria-live="polite" className="inline-flex h-7 items-center justify-center border-x border-border px-4 font-mono text-xs whitespace-nowrap">{page} of {pages}</span>
-        <PageCell label="Next page" disabled={page >= pages} onClick={() => go(page + 1)}><ChevronRight className="size-3.5" /></PageCell>
-        <PageCell label="Last page" disabled={page >= pages} onClick={() => go(pages)}><ChevronsRight className="size-3.5" /></PageCell>
-      </nav>
-      {resizable ? (
-        <nav aria-label="Rows per page" className={STRIP}>
-          {sizes.map((size) => (
-            <PageCell
-              key={size}
-              label={`${size} per page`}
-              aria-current={size === limit ? "true" : undefined}
-              className="w-auto min-w-8 px-2 font-mono text-xs text-fg-muted tabular-nums aria-[current=true]:bg-surface-muted aria-[current=true]:text-fg"
-              onClick={() => {
-                onLimitChange(size)
-                onOffsetChange(0)
-              }}
-            >
-              {size}
-            </PageCell>
-          ))}
-        </nav>
-      ) : null}
-    </div>
-  )
-}
-
-function PageCell({ label, className, ...props }: React.ComponentProps<typeof Button> & { label: string }) {
-  return (
-    <Button
-      type="button"
-      variant="ghost"
-      size="icon-sm"
-      aria-label={label}
-      title={label}
-      className={cn("rounded-none", className)}
-      {...props}
-    />
-  )
-}
diff --git a/web/src/components/ui/popover.tsx b/web/src/components/ui/popover.tsx
deleted file mode 100644
index 7d8970d..0000000
--- a/web/src/components/ui/popover.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-
-import { cn } from '@/lib/utils'
-
-const Popover = PopoverPrimitive.Root
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground outline-none',
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }
diff --git a/web/src/components/ui/progress.tsx b/web/src/components/ui/progress.tsx
deleted file mode 100644
index bca13fe..0000000
--- a/web/src/components/ui/progress.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Progress as ProgressPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
-}
-
-export { Progress }
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
deleted file mode 100644
index 4ac16fc..0000000
--- a/web/src/components/ui/select.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-import { Select as SelectPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          // DS theming: border-border-subtle — under shadow-md (= --elev-2) the
-        // popover edge defines, it does not separate.
-        "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border-subtle bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span
-        data-slot="select-item-indicator"
-        className="absolute right-2 flex size-3.5 items-center justify-center"
-      >
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
diff --git a/web/src/components/ui/separator.tsx b/web/src/components/ui/separator.tsx
deleted file mode 100644
index cd873e3..0000000
--- a/web/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Separator as SeparatorPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
diff --git a/web/src/components/ui/sheet.tsx b/web/src/components/ui/sheet.tsx
deleted file mode 100644
index 5aceb56..0000000
--- a/web/src/components/ui/sheet.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { XIcon } from "lucide-react"
-import { Dialog as SheetPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
-}
-
-function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}
-
-function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-}
-
-function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-}
-
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
-  showCloseButton?: boolean
-}) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          // DS theming: border-border-subtle — shadow-lg (= --elev-3) already
-          // carries the separation, so the single edge only defines it.
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg border-border-subtle transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
-          side === "right" &&
-            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-          side === "left" &&
-            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-          side === "top" &&
-            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          side === "bottom" &&
-            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
-          </SheetPrimitive.Close>
-        )}
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("font-semibold text-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Sheet,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
deleted file mode 100644
index 8d0743c..0000000
--- a/web/src/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,756 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
-import { Slot } from "radix-ui"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  mobileTriggerRef: React.RefObject<HTMLButtonElement | null>
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
-
-  return context
-}
-
-function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
-  const mobileTriggerRef = React.useRef<HTMLButtonElement>(null)
-  const mobileWasOpen = React.useRef(false)
-  React.useEffect(() => {
-    let frame = 0
-
-    if (mobileWasOpen.current && !openMobile) {
-      const restoreFocusWhenVisible = () => {
-        const trigger = mobileTriggerRef.current
-        if (!trigger) return
-        if (trigger.closest('[aria-hidden="true"]')) {
-          frame = requestAnimationFrame(restoreFocusWhenVisible)
-          return
-        }
-        trigger.focus()
-      }
-      frame = requestAnimationFrame(restoreFocusWhenVisible)
-    }
-    mobileWasOpen.current = openMobile
-
-    return () => cancelAnimationFrame(frame)
-  }, [openMobile])
-
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value
-      if (setOpenProp) {
-        setOpenProp(openState)
-      } else {
-        _setOpen(openState)
-      }
-
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-    },
-    [setOpenProp, open]
-  )
-
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
-
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar()
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
-
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed"
-
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      mobileTriggerRef,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
-
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot="sidebar-wrapper"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  )
-}
-
-function Sidebar({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
-}) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-
-  if (collapsible === "none") {
-    return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          onCloseAutoFocus={(event) => event.preventDefault()}
-          data-sidebar="sidebar"
-          data-slot="sidebar"
-          data-mobile="true"
-          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    )
-  }
-
-  return (
-    <aside
-      className="group peer hidden text-sidebar-foreground md:block"
-      aria-label="Primary navigation"
-      data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
-      data-variant={variant}
-      data-side={side}
-      data-slot="sidebar"
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-[side=right]:rotate-180",
-          variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-        )}
-      />
-      <div
-        data-slot="sidebar-container"
-        className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) after:absolute after:inset-y-0 after:w-px after:bg-sidebar-border group-data-[side=left]:after:right-0 group-data-[side=right]:after:left-0",
-          className
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          // DS theming: the floating variant is an elevated card, so its edge is
-          // border-subtle, not --sidebar-border. The default (flush) variant keeps
-          // --sidebar-border — flush against the canvas it is a divider, not a card
-          // edge, and a divider still has to do the separating on its own.
-          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-border-subtle group-data-[variant=floating]:shadow-sm"
-        >
-          {children}
-        </div>
-      </div>
-    </aside>
-  )
-}
-
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { isMobile, mobileTriggerRef, toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      data-sidebar="trigger"
-      data-slot="sidebar-trigger"
-      ref={isMobile ? mobileTriggerRef : undefined}
-      variant="ghost"
-      size="icon"
-      className={cn("size-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-}
-
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <button
-      data-sidebar="rail"
-      data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
-  return (
-    <main
-      data-slot="sidebar-inset"
-      className={cn(
-        "relative flex min-w-0 w-full flex-1 flex-col bg-surface",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
-  return (
-    <Input
-      data-slot="sidebar-input"
-      data-sidebar="input"
-      className={cn("h-8 w-full bg-surface shadow-none", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-header"
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:p-2!", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-footer"
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:p-2!", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="sidebar-separator"
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-content"
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group"
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:p-2!", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return (
-    <Comp
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-normal text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupAction({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="sidebar-group-action"
-      data-sidebar="group-action"
-      className={cn(
-        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu"
-      data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-item"
-      data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
-      {...props}
-    />
-  )
-}
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm font-normal ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:mx-auto! group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-normal data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=icon]:[&>svg~svg]:hidden",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-surface shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = "default",
-  size = "default",
-  tooltip,
-  className,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot.Root : "button"
-  const { isMobile, state } = useSidebar()
-
-  const button = (
-    <Comp
-      data-slot="sidebar-menu-button"
-      data-sidebar="menu-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  )
-
-  if (!tooltip || isMobile) {
-    return button
-  }
-
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    }
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
-      />
-    </Tooltip>
-  )
-}
-
-function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  showOnHover?: boolean
-}) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-action"
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-menu-badge"
-      data-sidebar="menu-badge"
-      className={cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  showIcon?: boolean
-}) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
-
-  return (
-    <div
-      data-slot="sidebar-menu-skeleton"
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
-}
-
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu-sub"
-      data-sidebar="menu-sub"
-      className={cn(
-        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-sub-item"
-      data-sidebar="menu-sub-item"
-      className={cn("group/menu-sub-item relative", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSubButton({
-  asChild = false,
-  size = "md",
-  isActive = false,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean
-  size?: "sm" | "md"
-  isActive?: boolean
-}) {
-  const Comp = asChild ? Slot.Root : "a"
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-sub-button"
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 font-normal text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
deleted file mode 100644
index 0118624..0000000
--- a/web/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
deleted file mode 100644
index 2b10d89..0000000
--- a/web/src/components/ui/table.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Table({ containerLabel, className, ...props }: React.ComponentProps<"table"> & { containerLabel?: string }) {
-  return (
-    <div
-      data-slot="table-container"
-      role={containerLabel ? "region" : undefined}
-      aria-label={containerLabel}
-      tabIndex={0}
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("mt-4 text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
deleted file mode 100644
index 1fbe4cc..0000000
--- a/web/src/components/ui/tabs.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-
-import { cn } from '@/lib/utils'
-
-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 h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-      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 whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn('mt-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', className)}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/web/src/components/ui/theme-switch.tsx b/web/src/components/ui/theme-switch.tsx
deleted file mode 100644
index 06e66af..0000000
--- a/web/src/components/ui/theme-switch.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client"
-
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
-import { cn } from "@/lib/utils"
-import { Moon, Sun } from "lucide-react"
-
-export type ThemeSwitchTheme = "light" | "dark"
-
-/**
- * Canonical controlled Light/Dark selector. Consumers own persistence and token
- * application; this component owns the complete visual and ARIA contract.
- */
-export function ThemeSwitch({
-  theme,
-  setTheme,
-  className,
-}: {
-  theme: ThemeSwitchTheme
-  setTheme: (theme: ThemeSwitchTheme) => void
-  className?: string
-}) {
-  return (
-    <ToggleGroup
-      type="single"
-      spacing={1}
-      value={theme}
-      onValueChange={(value) => {
-        if (value) setTheme(value as ThemeSwitchTheme)
-      }}
-      aria-label="Theme"
-      className={cn(
-        "theme-switch grid w-full grid-cols-2 gap-1 rounded-sm border border-border bg-surface p-1 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:grid-cols-1 group-data-[collapsible=icon]:border-0 group-data-[collapsible=icon]:p-0",
-        className
-      )}
-    >
-      <ToggleGroupItem
-        value="light"
-        aria-label="Light theme"
-        className="h-auto rounded-sm px-2 py-2 text-fg-muted group-data-[collapsible=icon]:size-full group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:data-[state=on]:hidden data-[state=on]:bg-surface-alt data-[state=on]:text-fg data-[state=off]:hover:bg-transparent data-[state=off]:hover:text-fg-muted data-[state=on]:hover:bg-surface-alt data-[state=on]:hover:text-fg"
-      >
-        <Sun className="size-3.5" aria-hidden="true" />
-      </ToggleGroupItem>
-      <ToggleGroupItem
-        value="dark"
-        aria-label="Dark theme"
-        className="h-auto rounded-sm px-2 py-2 text-fg-muted group-data-[collapsible=icon]:size-full group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:data-[state=on]:hidden data-[state=on]:bg-surface-alt data-[state=on]:text-fg data-[state=off]:hover:bg-transparent data-[state=off]:hover:text-fg-muted data-[state=on]:hover:bg-surface-alt data-[state=on]:hover:text-fg"
-      >
-        <Moon className="size-3.5" aria-hidden="true" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/web/src/components/ui/toggle-group.tsx b/web/src/components/ui/toggle-group.tsx
deleted file mode 100644
index 01e76ec..0000000
--- a/web/src/components/ui/toggle-group.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { type VariantProps } from "class-variance-authority"
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }
->({
-  size: "default",
-  variant: "default",
-  spacing: 0,
-})
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  spacing = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
-      style={{ "--gap": spacing } as React.CSSProperties}
-      className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
-        className
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  )
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-        // The underline variant has no box, so it takes none of the group's box treatment.
-        "data-[variant=underline]:rounded-none data-[variant=underline]:first:rounded-none data-[variant=underline]:last:rounded-none",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
-}
-
-export { ToggleGroup, ToggleGroupItem }
diff --git a/web/src/components/ui/toggle.tsx b/web/src/components/ui/toggle.tsx
deleted file mode 100644
index befc8c1..0000000
--- a/web/src/components/ui/toggle.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Toggle as TogglePrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-muted data-[state=on]:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-muted hover:text-foreground",
-        // Selection marked by a rule under the item, not a filled chip. For a group that reads as
-        // a header — where a filled chip would be a second surface competing with the page — the
-        // accent rule says which one is current without adding one.
-        underline:
-          "rounded-none border-b-2 border-transparent bg-transparent text-fg-2 shadow-none hover:bg-transparent hover:text-fg data-[state=on]:border-accent data-[state=on]:bg-transparent data-[state=on]:text-fg",
-      },
-      size: {
-        default: "h-9 min-w-9 px-2",
-        sm: "h-8 min-w-8 px-1.5",
-        lg: "h-10 min-w-10 px-2.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Toggle, toggleVariants }
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
deleted file mode 100644
index ec65c1e..0000000
--- a/web/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Tooltip as TooltipPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/web/src/components/ui/top-bar.tsx b/web/src/components/ui/top-bar.tsx
deleted file mode 100644
index d80b741..0000000
--- a/web/src/components/ui/top-bar.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { MenuIcon } from "lucide-react"
-
-import {
-  Sheet,
-  SheetContent,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-import { cn } from "@/lib/utils"
-
-/**
- * Canonical application top bar.
- *
- * Two densities, and the choice is the shell's, not the page's:
- *
- * - `swiss` — the standalone bar for a product with no left rail. 76px above the
- *   shell breakpoint, 56px below it, and always a complete dark scope via
- *   `.band-dark`. One inversion per page: this bar is it.
- * - `compact` — 56px at every width, light, for a page that already has a dark
- *   left rail. It sits inside `SidebarInset` and follows the rail's edge.
- *
- * Slots are brand (left), destinations (centred on the bar, not on the space left
- * over beside the brand), and actions (right). Below the breakpoint the Swiss bar
- * never wraps to a second row — the destinations move into one 18rem left Sheet.
- *
- * The bar owns no labels, no routes, no account logic and no theme persistence.
- */
-
-type TopBarVariant = "swiss" | "compact"
-type TopBarLane = "lg" | "xl" | "2xl"
-
-const LANE: Record<TopBarLane, string> = {
-  lg: "max-w-(--w-lg)",
-  xl: "max-w-(--w-xl)",
-  "2xl": "max-w-(--w-2xl)",
-}
-
-const TopBarContext = React.createContext<{ variant: TopBarVariant }>({
-  variant: "swiss",
-})
-
-function TopBar({
-  variant = "swiss",
-  lane = "xl",
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"header"> & {
-  variant?: TopBarVariant
-  lane?: TopBarLane
-}) {
-  const ref = React.useRef<HTMLElement>(null)
-  const [insideRail, setInsideRail] = React.useState(false)
-
-  // A dark Swiss bar inside a dark rail is two inversions on one page, which the
-  // system forbids. There is no prop for it because a product should not be able
-  // to opt in: the composition is read from the DOM and refused.
-  //
-  // ponytail: DOM probe rather than importing useSidebar — a standalone Swiss
-  // consumer would otherwise install the entire rail to render a top bar.
-  React.useEffect(() => {
-    setInsideRail(!!ref.current?.closest('[data-slot="sidebar-wrapper"]'))
-  }, [])
-
-  if (variant === "swiss" && insideRail) {
-    return (
-      <div
-        ref={ref as React.RefObject<HTMLDivElement>}
-        data-shell-invalid="true"
-        role="alert"
-        className="border border-border-control bg-surface p-4 text-sm text-fg"
-      >
-        Invalid shell composition: a standalone Swiss TopBar cannot render inside a
-        left rail. Use <code>variant=&quot;compact&quot;</code> beside a rail, or drop
-        the rail.
-      </div>
-    )
-  }
-
-  return (
-    <TopBarContext.Provider value={{ variant }}>
-      <header
-        ref={ref}
-        data-slot="top-bar"
-        data-variant={variant}
-        className={cn(
-          "sticky top-0 z-20 flex w-full shrink-0 flex-col justify-center border-b border-border bg-surface",
-          variant === "swiss"
-            ? "band-dark h-(--h-bar-compact) shell:h-auto shell:min-h-(--h-bar-swiss)"
-            : "h-(--h-bar-compact)",
-          className
-        )}
-        {...props}
-      >
-        <div
-          data-slot="top-bar-inner"
-          className={cn(
-            "relative mx-auto flex h-full w-full items-center gap-2 px-(--pad-x) shell:py-5 [[data-slot=sidebar-wrapper]_&]:mx-0",
-            LANE[lane]
-          )}
-        >
-          {children}
-        </div>
-      </header>
-    </TopBarContext.Provider>
-  )
-}
-
-/**
- * The rail's collapse control, and the only place it goes: first in the bar, hard
- * against the edge the rail occupies. A control that commands the left edge and sits
- * at the right one makes the user cross the whole bar to move something they are
- * already looking at.
- *
- * A slot rather than a sentence in the contract — the placement was unspecified once
- * and every product guessed differently, which is what the canon exists to stop.
- * Compose shadcn's `SidebarTrigger` (or any button) inside it.
- *
- * Pulled 6px left: the adopted trigger is a 28px box around a 16px glyph, so its
- * padding would otherwise inset the glyph from the lane the content below it uses.
- * What aligns is what the eye reads, which is the glyph, not the hit area.
- */
-function TopBarRailLead({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="top-bar-rail-lead"
-      className={cn("-ml-1.5 flex shrink-0 items-center", className)}
-      {...props}
-    />
-  )
-}
-
-function TopBarBrand({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="top-bar-brand"
-      className={cn("flex min-w-0 shrink-0 items-center gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * The page's name, and only beside a rail. Where a rail is present the lockup lives
- * in the rail header, so the bar's lead slot is free — and what belongs in it is the
- * name of the view the user is looking at.
- *
- * This exists because it was missing. Without it the only lead slot was `TopBarBrand`,
- * so a compact bar that wanted a title had to put one in a slot named for a logo; the
- * shell fixture did exactly that and ended up showing a mark in the rail and a second
- * wordmark in the bar, a composition no product ships.
- *
- * The slot is optional, not mandatory. A control-heavy view may drop the name entirely
- * and open with filters and buttons instead — both readings are canon, and which one a
- * view takes is that view's call. What is not canon is a title in the brand slot.
- *
- * Renders an `h1` — the element for a name the bar already shows, not an instruction to
- * show one. A product that never names its views in the bar is not out of compliance: it puts
- * its one level-one heading in the content lane instead, `sr-only` if the surface reads better
- * without a visible title. What the canon refuses is a view name marked up as a styled `div`.
- */
-function TopBarTitle({ className, ...props }: React.ComponentProps<"h1">) {
-  return (
-    <h1
-      data-slot="top-bar-title"
-      className={cn(
-        "m-0 min-w-0 truncate font-body text-xl leading-[1.4] font-semibold tracking-normal text-fg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-/**
- * The destination row. Centred on the bar itself — absolute, not `justify-center`
- * on the remaining space, because a wide brand or a wide action cluster would
- * otherwise push a "centred" row visibly off centre and nobody would notice until
- * the two products sat side by side.
- */
-function TopBarNav({ className, ...props }: React.ComponentProps<"nav">) {
-  const { variant } = React.useContext(TopBarContext)
-  return (
-    <nav
-      data-slot="top-bar-nav"
-      aria-label="Main"
-      className={cn(
-        "items-center gap-1",
-        variant === "swiss"
-          ? "absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 shell:flex"
-          : "flex",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TopBarNavLink({
-  className,
-  active,
-  ...props
-}: React.ComponentProps<"a"> & { active?: boolean }) {
-  return (
-    <a
-      data-slot="top-bar-nav-link"
-      data-active={active || undefined}
-      aria-current={active ? "page" : undefined}
-      className={cn(
-        // A destination is machine-said, so it carries the DS Label role — the same
-        // mono/500/12px/`--tk-label`/uppercase as `.sec-head` and `.marker`. 8px/12px of
-        // padding around it, as Hiresling's `.swiss-viewbtn` has; `min-h-6` keeps the
-        // target at WCAG 2.5.8's 24px floor when the label is the only content.
-        "relative flex min-h-6 items-center px-3 py-2 whitespace-nowrap transition-colors",
-        "font-mono text-xs leading-none font-medium tracking-label text-fg-2 uppercase",
-        // The whole row takes the hover, the same shift the rail's rows take — house
-        // rule 10. It was colour-only while `active` was a fill and the two were
-        // indistinguishable; now that "you are here" is the rule, the two are not.
-        "rounded-sm hover:bg-surface-muted hover:text-fg",
-        "focus-visible:ring-2 focus-visible:ring-accent-focus focus-visible:outline-hidden focus-visible:ring-inset",
-        "data-[active=true]:text-fg",
-        "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-transparent",
-        "data-[active=true]:after:bg-accent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TopBarActions({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="top-bar-actions"
-      className={cn("ml-auto flex min-w-0 shrink-0 items-center gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * The sub-breakpoint destination menu. Radix Dialog underneath, so the focus
- * trap, the Escape and backdrop close, the removal from the tree while closed and
- * the focus return to the trigger are the primitive's behaviour, not four
- * hand-rolled effects that drift.
- */
-function TopBarMenu({
-  title = "Menu",
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SheetContent> & { title?: string }) {
-  return (
-    <Sheet>
-      <SheetTrigger
-        data-slot="top-bar-menu-trigger"
-        aria-label="Open menu"
-        className={cn(
-          "flex size-9 shrink-0 items-center justify-center rounded-sm text-fg shell:hidden",
-          "hover:bg-surface-muted",
-          "focus-visible:ring-2 focus-visible:ring-accent-focus focus-visible:outline-hidden",
-          className
-        )}
-      >
-        <MenuIcon className="size-5" />
-      </SheetTrigger>
-      {/* From the right, because that is the edge the trigger is on: a panel that
-          opens away from the hand that opened it makes the user cross the bar to
-          read what they just asked for. */}
-      <SheetContent
-        side="right"
-        className={cn("band-dark w-72 max-w-none gap-0 p-2 sm:max-w-none")}
-        {...props}
-      >
-        {/* The panel's head is the Label role, on the rows' own padding so the head
-            and the destinations under it share one left edge. */}
-        <SheetTitle className="px-3 py-2 font-mono text-xs font-medium tracking-label text-fg-muted uppercase">
-          {title}
-        </SheetTitle>
-        {/* `items-stretch`: a destination here is a row, so its hover is the row's
-            full width rather than a tab-width patch inside it. */}
-        <nav aria-label="Main" className="flex flex-col items-stretch gap-1">
-          {children}
-        </nav>
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-export {
-  TopBar,
-  TopBarRailLead,
-  TopBarBrand,
-  TopBarTitle,
-  TopBarNav,
-  TopBarNavLink,
-  TopBarActions,
-  TopBarMenu,
-}
diff --git a/web/src/index.css b/web/src/index.css
index 349522c..9eb07b4 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "@4242labs/design-system/tokens.css";
 @import "@4242labs/design-system/tailwind.css";
+@source "../node_modules/@4242labs/design-system/dist";
 
 @layer components {
   [data-slot="top-bar-inner"] {