diff --git a/.agents/plans/design-system.md b/.agents/plans/design-system.md
new file mode 100644
index 00000000..deac1f6a
--- /dev/null
+++ b/.agents/plans/design-system.md
@@ -0,0 +1,421 @@
+Activate the /implement-task skill first.
+
+# Plan: Design system — tokens, primitives, and high-traffic migrations
+
+## Acceptance Criteria
+
+Sourced from the Citadel scratchpad topic (no formal ticket): "Build out reusable components / tokens so the cockpit looks/feels like a professional UI app." Reformulated as checkable items, grounded in `specs/B.2-ade-cockpit.md` and `specs/B.8-ui-performance-quality.md`:
+
+- [ ] A single canonical token layer (`apps/web/src/design-system/tokens.css`) defines all color, typography, elevation, radius, spacing, and motion tokens used by the cockpit, in both light and dark themes.
+- [ ] `apps/web/src/styles.css` no longer inlines token definitions; it imports the canonical token file. Legacy `--color-*`, `--panel*`, `--line*`, `--muted`, `--surface*`, `--topbar-*` aliases continue to resolve so existing CSS keeps rendering unchanged.
+- [ ] A reusable React primitive library lives under `apps/web/src/components/ui/` with at least these primitives implemented and tested: `Button` (extended), `Badge` (extended), `Card`, `Panel` (+ header/body/footer subcomponents), `Input`, `Textarea`, `Select`, `Label`, `FormField`, `HelpText`, `Tabs` (+ list/trigger/content), `Dialog` (+ header/footer/title/description), `Tooltip`, `Chip`, `IconButton`, `EmptyState`, `Skeleton`, `Toast` (region + hook).
+- [ ] Every primitive is keyboard-accessible (focus-visible ring on token), supports light/dark theming via tokens (no hard-coded hex colours in component files), and exposes the `className` escape hatch via `cn(...)`.
+- [x] Four high-traffic surfaces are touched by primitives in the same PR to prove they work. Two are fully migrated, two are partial (scope narrowed during implementation — see notes):
+  - [x] `modals.tsx` — all centered modals use `Dialog` (Modal scaffolding rewritten over Radix Dialog).
+  - [x] Inspector tab strip in `inspector.tsx` uses `Tabs` (extracted into `inspector-tabs.tsx`; `data-active={tab}` preserved on the TabsList wrapper for the inspector-deploy.css contract).
+  - [~] Scheduled-agent form (`scheduled-agent-form.tsx`) — **only the Name field** migrated to `FormField + Input`. Twelve other fields (schedule type, cron preset, cron, when/at, repo, runtime, run mode, background cwd, workspace strategy, existing workspace, base branch, overlap policy, description, prompt, enabled) keep their bespoke `<label><span>…</span><control/></label>` shape. Deferred because each carries conditional rendering + custom validation timing that needs case-by-case translation; full migration is a follow-up PR. New `scheduled-agent-form.test.tsx` locks in the FormField contract for the migrated field.
+  - [~] Workspace-card status pills — **only the namespace pill** migrated to `Chip`. The approval-pill (icon-only, transparent fill, tonal icon colour) and the workspace-card-diff (two-tone +/- counter) remain bespoke; flagged with an in-code `TODO(implement-task)` comment. They don't map cleanly onto Badge/Chip's surface-fill conventions and need a design pass before rewriting.
+- [ ] A dev-only route `/design-system` renders every primitive's variants in both themes. Hidden behind `import.meta.env.DEV` — not bundled into production builds.
+- [ ] Spec **B.8 #4** ("shadcn-style components are used where they improve consistency and speed") is checked off and the spec's bullet annotated `[~]` or `[x]` with a line linking back to this design system layer.
+- [ ] `make check` and `make e2e` pass.
+- [ ] An existing visual regression in the migrated surfaces is not introduced — Playwright `theme-audit.spec.ts` continues to pass.
+
+## Context and problem statement
+
+The cockpit's visual layer today is ~8,700 lines of bespoke CSS spread across 19 files (`styles.css`, `chrome.css`, `cockpit-extras.css`, `inspector-*`, `settings-*`, `scheduled-agents*`, etc.) and only two React primitives (`Button`, `Badge`) under `apps/web/src/components/ui/`. The token layer already exists in `styles.css` (warm-cream / dark themes with `--c-*` semantic tokens plus `--color-*` legacy aliases) but:
+
+1. Tokens live inline in `styles.css` with no separate "design system" home and no inventory document.
+2. Higher-level patterns — modals, tabs, panels, form fields, tooltips, chips, empty states, skeletons — are reimplemented per screen in bespoke CSS, drifting in spacing, radius, and density.
+3. `packages/ui` exists as a stub (single string export) but has no React deps and no consumers; it's reserved for v2 packaging, not the current target.
+4. `apps/web/src/components/ui/button.tsx` and `badge.tsx` use `class-variance-authority` (CVA) + Tailwind + `cn()` — that's the right foundation but the library stops there.
+
+The work is to **extend the existing primitive layer to cover the patterns the cockpit actually uses repeatedly**, migrate the highest-traffic surfaces to prove the primitives are sufficient, and leave a documented `/design-system` route for visual review. This satisfies the operator-facing AC in **B.2 #7** ("dark-blue v1-inspired palette… dense, no marketing hero areas"), **B.8 #3** ("calm, dense, premium, operational"), and **B.8 #4** ("shadcn-style components are used where they improve consistency and speed").
+
+## Spec alignment
+
+- `specs/B.2-ade-cockpit.md` — no behavioral change to cockpit ACs. The plan preserves all current cockpit semantics (three-column shell, no page scroll, modal centering, compact pill tab strip). Migration to primitives keeps visual treatment within token-defined ranges.
+- `specs/B.8-ui-performance-quality.md` — directly serves AC **#4** ("shadcn-style components are used where they improve consistency and speed") and supports **#3**, **#6**, **#8**, **#12**. The implementation step "Spec annotations" updates B.8 #4 from `[ ]` to `[~]` (partial — first wave of primitives shipped; full surface migration deferred), and adds a one-line reference to `apps/web/src/design-system/README.md`.
+- `specs/C-technical-stack.md` — three new dependencies (`@radix-ui/react-dialog`, `@radix-ui/react-tooltip`, `@radix-ui/react-tabs`) are added to `apps/web/package.json`. These are first-party Radix packages, same maintainer as the already-installed `@radix-ui/react-slot`. The plan's Implementation Steps include the lockfile review and the post-install lifecycle audit per MEMORY (`feedback_codex_broken` is unrelated; the relevant guidance is the standard "treat pnpm-lock.yaml as security-sensitive" rule from `.agents/skills/extensions/review-pr.md`).
+
+No spec file gets a *content* update beyond the B.8 #4 annotation; the design system is delivery against existing ACs, not new behavior.
+
+## Implementation approach
+
+The chosen strategy is **extend the existing CVA + Tailwind + token primitive layer** under `apps/web/src/components/ui/`, with tokens consolidated into a single imported `tokens.css` and primitive coverage expanded to the patterns the cockpit actually repeats. Migration of bespoke screens happens screen-by-screen, with **four high-traffic surfaces migrated in the same PR** to prove the primitives are sufficient. Remaining surfaces remain on their bespoke CSS until follow-up PRs.
+
+Rationale:
+
+- The codebase already standardised on CVA + Tailwind 4 + `cn()` (`apps/web/src/components/ui/button.tsx`, `badge.tsx`, `apps/web/src/lib/utils.ts`). Continuing on the same foundation avoids a rewrite tax and keeps the bundle small.
+- Radix headless primitives (`@radix-ui/react-dialog`, `@radix-ui/react-tooltip`, `@radix-ui/react-tabs`) give us accessibility (focus trap, Escape handling, ARIA wiring) without owning the behavior. Same vendor as `@radix-ui/react-slot` which is already installed.
+- Tokens stay in `apps/web/src/design-system/tokens.css` (not `packages/ui`) because (a) `packages/ui` is currently a stub, has no React deps, and migrating there would expand the PR scope and (b) cockpit-specific tokens (dark-blue v1-inspired palette per B.2 #7) are not yet a shared design surface — there is no second consumer.
+- Migrating four surfaces in the same PR proves the primitives cover real use cases (rather than landing a library that nothing uses, then discovering gaps in follow-ups). The four were chosen because they collectively exercise every new primitive type: `Dialog` (modals.tsx), `Tabs` (inspector), `FormField` family (scheduled-agent-form), `Badge`/`Chip` (workspace-card pills).
+
+## Alternatives considered
+
+**Alternative A — move primitives into `packages/ui` now.** Rejected. The package is currently a stub with no React peer-dep, no test setup, and no consumer beyond `apps/web`. Promoting it now would (a) inflate this PR with packaging work, (b) require adjustments to `pnpm` workspace dependency rules and the `check:arch` boundary script, and (c) deliver no immediate benefit because there is no second consumer. Leave `packages/ui` for a future "extract" PR once a second consumer (e.g. `apps/cli` web shell, or a hosted variant) actually exists.
+
+**Alternative B — adopt `shadcn/ui` CLI and let it scaffold the components.** Rejected. shadcn copies components into the repo; we'd still own them. The bookkeeping cost of running the CLI plus matching its directory conventions outweighs the benefit when we already have CVA + `cn()` patterns established. We can borrow shadcn's ergonomics (CVA variants, Radix headless, `cn()` merge) without the tooling. Spec **B.8 #4** says "shadcn-style," not "shadcn the package."
+
+**Alternative C — build all primitives but migrate zero screens, deferring migration to follow-up PRs.** Rejected. Without a real consumer in the same PR, primitive APIs drift from real usage and the PR delivers an unproven library. The "four migrations in the same PR" rule keeps the design honest and surfaces API gaps before merge.
+
+**Alternative D — convert everything in one mega-PR.** Rejected. 8,700 lines of bespoke CSS across 19 files cannot be reviewed in one diff; the file-size and review-burden costs are high. Phased delivery (this PR + follow-ups documented in the PR description) is the responsible choice.
+
+## Implementation steps
+
+### Spec annotations
+- Annotate `specs/B.8-ui-performance-quality.md` line **UI Quality #4** from `[ ]` to `[~]` with a trailing note: "First wave of primitives shipped under `apps/web/src/components/ui/`; see `apps/web/src/design-system/README.md`. Remaining surfaces deferred to follow-up PRs."
+
+### Token consolidation
+
+**Step 1 — enumerate the current token surface (must run before consolidation):**
+```bash
+grep -rohE "var\(--[a-z0-9-]+\)" apps/web/src --include="*.css" --include="*.tsx" \
+  | sed -E 's/^var\(//; s/\)$//' \
+  | sort -u \
+  > apps/web/src/design-system/tokens.inventory.txt
+```
+Commit this file as the canonical inventory. There are ~51 unique tokens at HEAD; the consolidation must preserve every one of them (a missing alias silently breaks unmigrated CSS).
+
+**Step 2 — collapse the `prefers-color-scheme` blocks into explicit `data-theme` blocks.**
+
+`apps/web/src/styles.css` today has two `@media (prefers-color-scheme: light)` blocks (lines 152 and 199) that define tokens *only* visible when the OS theme is light and no explicit `data-theme` is set. The consolidated `tokens.css` must:
+
+- Define every token in **both** `:root` (light default) and `:root[data-theme="dark"]` (dark explicit) blocks.
+- Move any token that lives **only** inside a `prefers-color-scheme` block into the explicit blocks so every token is reachable without OS-theme simulation.
+- Retain a single `@media (prefers-color-scheme: dark)` block scoped to `:root:not([data-theme="light"]):not([data-theme="dark"])` that re-points to the dark token values — this preserves OS-driven auto-theming for users who haven't picked a theme.
+
+**Step 3 — write `apps/web/src/design-system/tokens.css`** containing the unified `:root` (light) and `:root[data-theme="dark"]` declarations covering every token in `tokens.inventory.txt` (both `--c-*` semantic tokens and legacy `--color-*`/`--panel*`/`--line*`/`--muted`/`--surface*`/`--topbar-*`/`--overlay-bg`/`--shadow-color` aliases) plus the auto-theming media block above.
+
+**Step 4 — edit `apps/web/src/styles.css`** to replace the inlined token blocks (current lines ~1–200) with `@import "./design-system/tokens.css";`. Keep all non-token rules (resets, keyframes, structural classes) in `styles.css`.
+
+**Step 5 — write `apps/web/src/design-system/README.md`** (≤120 lines): inventory of every token, semantic intent, "how to add a new token" rule, and an explicit note about the happy-dom coverage gap for `prefers-color-scheme` (mitigated because Step 2 moves all tokens out of those blocks).
+
+**Step 6 — write `apps/web/src/design-system/index.ts`** re-exporting every primitive so consumers can `import { Button, Dialog, Tabs } from "./design-system"`.
+
+### Primitive: Button (extend)
+- Edit `apps/web/src/components/ui/button.tsx`:
+  - Add variants: `destructive` (uses `--color-danger`), `link` (no chrome, underline on hover).
+  - Add `loading?: boolean` — renders an inline spinner (reuse the `@keyframes spin` in `styles.css`) and sets `disabled` while loading. Preserves children for layout stability.
+  - Add sizes: keep `default` (`min-h-9`), `icon` (`h-9 w-9`); add `sm` (`min-h-7 px-2 text-xs`) and `lg` (`min-h-10 px-4`).
+  - Existing `default`/`secondary`/`ghost` variants stay unchanged.
+
+### Primitive: Badge (extend)
+- Edit `apps/web/src/components/ui/badge.tsx`:
+  - Add variants: `info` (`--color-info`), `warn` (`--color-warning`), `merged` (`--color-merged`), `neutral-strong` (heavier neutral fill).
+  - Existing `neutral`/`ready`/`blocked` variants stay unchanged.
+  - Add optional `dot?: boolean` prop — renders a 6px circle prefix in the same color tone.
+
+### Primitive: Card / Panel
+- Create `apps/web/src/components/ui/card.tsx` exporting `Card` (rounded surface using `--c-card` bg, `--c-line-2` border, `--sh-card` shadow).
+- Create `apps/web/src/components/ui/panel.tsx` exporting `Panel`, `PanelHeader`, `PanelBody`, `PanelFooter`. Header uses `--c-elev`, compact uppercase-spaced label slot (matches B.8 #12: "small uppercase panel titles").
+
+### Primitive: Form field family
+- Create `apps/web/src/components/ui/input.tsx` (`Input`, `Textarea`) — native elements styled via CVA. Tokens: `--c-surface` bg, `--c-line-2` border, focus ring `--color-action`.
+- Create `apps/web/src/components/ui/select.tsx` (`Select` — native `<select>` styled via CVA; we use native because cockpit menus stay accessible and lightweight. A `radix-react-select` primitive can be added later if needed).
+- Create `apps/web/src/components/ui/label.tsx` (`Label`, `HelpText`).
+- Create `apps/web/src/components/ui/form-field.tsx` (`FormField` — composes `Label` + control + `HelpText` + error slot).
+
+### Primitive: Tabs (Radix-backed)
+- Add dep: `@radix-ui/react-tabs` to `apps/web/package.json`.
+- Create `apps/web/src/components/ui/tabs.tsx` exporting `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. Visual style matches B.2 Inspector Tabs #1 ("compact pill-style picker that occupies only its own content width").
+
+### Primitive: Dialog (Radix-backed)
+- Add dep: `@radix-ui/react-dialog` to `apps/web/package.json`.
+- Create `apps/web/src/components/ui/dialog.tsx` exporting `Dialog`, `DialogTrigger`, `DialogPortal`, `DialogOverlay`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`. Visual style matches B.2 #14 ("centred both horizontally and vertically in the viewport; backdrop dismissal and `Esc` close them"). Overlay uses `--overlay-bg`.
+
+### Primitive: Tooltip (Radix-backed)
+- Add dep: `@radix-ui/react-tooltip` to `apps/web/package.json`.
+- Create `apps/web/src/components/ui/tooltip.tsx` exporting `Tooltip`, `TooltipProvider`, `TooltipTrigger`, `TooltipContent`. Mount **one** `TooltipProvider` at the cockpit root (`apps/web/src/main.tsx`) with cockpit-tuned defaults: `delayDuration={250}` (faster than Radix's 700ms default — matches B.8 #3 "calm, dense, premium, operational"), `skipDelayDuration={100}`, `disableHoverableContent={false}`. Document the chosen defaults in `apps/web/src/design-system/README.md`.
+
+### Primitive: Chip
+- Create `apps/web/src/components/ui/chip.tsx`. Chip is a Badge with optional leading icon slot (e.g. a Lucide icon) and optional `onClose` X button — used for attached-Jira chips (B.2 Inspector Tabs #4), reviewer avatars, status pills with detail.
+
+### Primitive: IconButton
+- Create `apps/web/src/components/ui/icon-button.tsx` — wraps `Button` with `size="icon"`, enforces `aria-label` is required via TS. **Excludes `asChild` polymorphism** from the prop type so the `aria-label` is guaranteed to land on the rendered `<button>` element (consumers that need a polymorphic icon-link should use `Button` directly with `asChild` and pass `aria-label` themselves). Type: `Omit<ButtonProps, "children" | "asChild"> & { "aria-label": string; children: ReactNode }`. Adds a dev-mode console warning if `aria-label` is somehow empty at runtime. Satisfies B.2 Shell Layout #13 ("Icon-only controls expose a native tooltip (title) and accessible label").
+
+### Primitive: EmptyState
+- Create `apps/web/src/components/ui/empty-state.tsx` — composed pattern: icon + heading + description + optional CTA. Used by Attention States (B.2 "Attention States" #1, #2) and Deployed apps panel (B.2 Inspector Tabs #6a).
+
+### Primitive: Skeleton
+- Create `apps/web/src/components/ui/skeleton.tsx` — block-level shimmer. Used for slow provider data per B.8 Performance #3/#4.
+
+### Primitive: Toast
+- Create `apps/web/src/components/ui/toast.tsx`:
+  - Self-contained: `<Toaster />` region component, `useToast()` hook returning `toast({ title, description, variant, action })`.
+  - No `sonner` dep; small custom implementation backed by a `useSyncExternalStore` queue. Variants: `default`, `success`, `warning`, `danger`. Auto-dismiss after 5s default, swipe/click-to-dismiss.
+  - Mount `<Toaster />` once at the cockpit root.
+
+### Migration: modals → Dialog
+- Edit `apps/web/src/modals.tsx`: replace bespoke modal scaffolding with `Dialog`/`DialogContent`/`DialogHeader`/etc. for every modal currently rendered there (CreateWorkspaceModal, AddRepoModal, command palette wrapper if applicable). Preserve all existing behavior (`Esc` close, backdrop dismissal, focus management — Radix gives these for free, so this is mostly removing hand-rolled effects).
+- Edit `apps/web/src/modals.css`: remove rules covered by the Dialog primitive (overlay, centering, focus trap), keep modal-specific content layout rules.
+
+### Migration: Inspector tabs → Tabs primitive
+
+**File-size budget (critical):** `apps/web/src/inspector.tsx` is currently 771 LOC against the 800 LOC `check:size` cap. Adding Radix imports + the migrated tab block + the compat `data-active` wrapper will push past 800. Extract the tab strip into a sibling file **before** the migration:
+
+- Create `apps/web/src/inspector-tabs.tsx` (≤200 LOC) exporting `InspectorTabs` that takes `{ tab, onTabChange, fileCount, children }` and renders the Radix-backed pill tab strip.
+- Edit `apps/web/src/inspector.tsx` to import and use `InspectorTabs`. Net effect: `inspector.tsx` line count goes **down**, not up.
+- Measure: confirm `wc -l apps/web/src/inspector.tsx` is < 700 after the migration.
+
+**Preserve the `data-active` selector contract:** `apps/web/src/inspector-deploy.css:94` and `inspector-meta.css:176` style `.inspector-tabs` and rely on a parent-level `data-active="<tab>"` attribute. Radix `TabsList` does not emit this. The migration **must** apply `data-active={tab}` to the `TabsList` wrapper (or a div wrapping it) — this is not "if needed", it is required because the CSS selectors target the list container, not the trigger.
+
+**CSS cleanup — explicit deletions.** When migrating, delete these specific rule blocks (verified at HEAD):
+- `inspector-deploy.css:94` `.inspector-tabs { ... }` — replaced by Tabs primitive styles.
+- `inspector-meta.css:176` `.inspector-tabs-collapse { ... }` — keep the collapse button rule, retarget selector to the new wrapper element.
+
+Any other `.inspector-tabs` rules surfaced by `grep -rn "inspector-tabs" apps/web/src/*.css` must be reviewed and either deleted (if covered by the primitive) or rewritten against the new DOM contract.
+
+### Migration: scheduled-agent form → FormField family
+- Edit `apps/web/src/scheduled-agent-form.tsx`: replace hand-rolled labels, inputs, textareas, and selects with `FormField`/`Label`/`Input`/`Textarea`/`Select`. Validation messages route through the `error` slot of `FormField`.
+- Edit `apps/web/src/scheduled-agent-editor.tsx` if it shares the same form scaffolding.
+
+### Migration: workspace-card status pills → Badge/Chip
+- Edit `apps/web/src/workspace-card.tsx`: replace bespoke status pills (PR tone, approval tone, agent pulse) with `Badge` variants (`ready`/`blocked`/`info`/`warn`/`merged`/`neutral-strong`) and `Chip` where a leading dot or icon is appropriate.
+
+### Dev-only showcase route
+
+**Folder layout (avoids 800 LOC cap):** the showcase is split across one index file + one section file per primitive family. None of these files ship to production (see DEV-strip mechanism below). Target sizes ≤ 150 LOC each:
+
+```
+apps/web/src/routes/design-system/
+  index.tsx          — page shell, theme toggle, section TOC, two-column light/dark wrapper
+  buttons.tsx        — Button + IconButton sections
+  badges.tsx         — Badge + Chip sections
+  surfaces.tsx       — Card + Panel + EmptyState + Skeleton
+  forms.tsx          — Input + Textarea + Select + Label + FormField
+  overlays.tsx       — Dialog + Tooltip
+  navigation.tsx     — Tabs
+  feedback.tsx       — Toast (with trigger buttons emitting each variant)
+```
+
+Each section renders that family's variants × sizes × states (e.g., Button: all variants × `sm/default/lg/icon` × `loading`/`disabled`). The index wraps two side-by-side columns whose root elements set `data-theme="light"` and `data-theme="dark"` so a single page exercises both themes.
+
+**DEV-strip mechanism (corrects an earlier wording bug):** Vite's `import.meta.env.DEV` is replaced with a literal `false` at production build time, so a **static** `if (import.meta.env.DEV) { ... }` branch is fully dead-code-eliminated, including any `import("...")` calls inside it. The route registration in `apps/web/src/main.tsx` therefore looks like:
+
+```ts
+if (import.meta.env.DEV) {
+  const { designSystemRoute } = await import("./routes/design-system");
+  router.addRoute(designSystemRoute);
+}
+```
+
+The dynamic `import()` alone does **not** strip the chunk from `dist/` — only the static `if (import.meta.env.DEV)` guard does, because Vite tree-shakes the entire branch when the literal evaluates to `false`. The dynamic `import` is used inside the branch only so dev builds can keep the route lazy.
+
+**Verification step (must pass before push):**
+```bash
+pnpm --filter @citadel/web build
+test "$(grep -rEh "DesignSystem|design-system" apps/web/dist/assets/*.js 2>/dev/null | wc -l)" -eq 0 \
+  || { echo "FAIL: showcase chunk shipped to production"; exit 1; }
+```
+List this command in the `## Verification` section so `make check`'s build artefacts are inspected for the showcase route.
+
+### Dependencies (lockfile-sensitivity gate)
+
+The three new top-level deps (`@radix-ui/react-dialog`, `@radix-ui/react-tooltip`, `@radix-ui/react-tabs`) will pull additional `@radix-ui/*` shared packages and `@floating-ui/*` transitive deps. "Radix entries only" was unrealistic — the actual audit must cover the full transitive expansion.
+
+Steps:
+
+1. Capture the pre-change lockfile state: `cp pnpm-lock.yaml /tmp/lock.before.yaml`.
+2. Add `@radix-ui/react-dialog`, `@radix-ui/react-tooltip`, `@radix-ui/react-tabs` to `apps/web/package.json`. Use the same version range pattern as the already-installed `@radix-ui/react-slot` (`^1.x`).
+3. Run `pnpm install` from repo root.
+4. Diff the lockfile: `diff /tmp/lock.before.yaml pnpm-lock.yaml | grep -E "^[<>] *resolution|^[<>] *  /" > /tmp/lock.diff.txt`.
+5. For every package added that is **not** `@radix-ui/*`, document expected ownership (e.g., `@floating-ui/*` for Radix Tooltip positioning, `aria-hidden` for Dialog focus management). Any unexpected new top-level dep → stop, investigate.
+6. Confirm none of the new packages — top-level **or transitive** — declare `preinstall`/`install`/`postinstall` lifecycle scripts: `pnpm list --depth Infinity --json | jq '.[] | select(.dependencies) | .. | objects | select(.scripts) | .scripts' 2>/dev/null` (or equivalent inspection). Radix and Floating UI historically ship script-free, but verify.
+7. Run `pnpm audit --prod` — record any moderate+ advisories in the PR description.
+8. Record the total transitive add count in the PR description.
+
+No `package-lock.json` or `yarn.lock` may be introduced (pnpm-only repo).
+
+### No schema changes
+
+No schema changes. Citadel's SQLite schema in `packages/db/src/index.ts` is untouched. `PRAGMA foreign_keys = ON;` not affected. No `schema_migrations` row needed.
+
+### Tests (TDD order)
+See QA/Test Strategy below and the `## Tests` section for concrete file paths.
+
+### Verification (run before push)
+See `## Verification` section.
+
+## QA/Test Strategy
+
+### Layer evaluation
+
+| Layer | Verdict | Details |
+|-------|---------|---------|
+| Unit (Vitest) | **Required** | One test file per primitive verifying variant rendering, state transitions, accessibility attributes (`role`, `aria-*`), keyboard handling, and the `className` escape hatch. Tokens consolidation gets a regression test that the canonical `--c-canvas` token resolves at runtime (smoke test imports `tokens.css` via `happy-dom`). Migration sites get focused tests that the migrated component still emits the expected DOM contract (e.g. `Inspector` still exposes `data-active` on its tab strip). |
+| E2E (Playwright) | **Required** | One new spec `e2e/design-system.spec.ts` mounts `/design-system` (dev build), iterates each primitive section, and asserts visible + interactive. Existing specs (`operator-cockpit.spec.ts`, `scratchpad-blocks.spec.ts`, `theme-audit.spec.ts`) must still pass — modal flows, scheduled-agent form, inspector tabs, and theme switching are exercised by them. `theme-audit.spec.ts` is the key safety net for the token consolidation: any unintended color drift will fail it. |
+
+### New tests to add
+
+**Unit (Vitest, colocated):**
+
+- `apps/web/src/components/ui/button.test.tsx` — variants × sizes × `loading` × `disabled`; spinner renders only when `loading`; `disabled` true while loading; `asChild` polymorphism intact.
+- `apps/web/src/components/ui/badge.test.tsx` — all variants render with token-driven background; `dot` prop renders a leading circle element.
+- `apps/web/src/components/ui/card.test.tsx` — renders children; accepts `className`; root element has `data-component="card"`.
+- `apps/web/src/components/ui/panel.test.tsx` — composition with header/body/footer; header element is `<header>`; uppercase title style flag.
+- `apps/web/src/components/ui/input.test.tsx` — focus ring class applied; `disabled` styling; controlled value mirroring; `aria-invalid` styling.
+- `apps/web/src/components/ui/select.test.tsx` — native `<select>` semantics; option list rendering; `disabled` state.
+- `apps/web/src/components/ui/form-field.test.tsx` — `Label` is associated to the inner control via `htmlFor`/`id` (generates an id if not provided); error slot is announced via `aria-describedby`; required marker rendering.
+- `apps/web/src/components/ui/tabs.test.tsx` — keyboard arrow navigation (Radix gives this); `TabsContent` only mounts active panel by default; `data-state="active|inactive"` on triggers.
+- `apps/web/src/components/ui/dialog.test.tsx` — opens on trigger click; closes on `Esc`; closes on backdrop click; focus moves into the dialog on open and restores on close; portal-rendered.
+- `apps/web/src/components/ui/tooltip.test.tsx` — opens on focus + on hover after delay; closes on blur/leave; `role="tooltip"` and `aria-describedby` wired.
+- `apps/web/src/components/ui/chip.test.tsx` — icon slot rendering; `onClose` button rendering + click handler + `aria-label` enforcement.
+- `apps/web/src/components/ui/icon-button.test.tsx` — TS-level test (no-op at runtime) plus a runtime assertion that the rendered `<button>` carries the `aria-label`; rendering without `aria-label` produces a dev-mode console warning.
+- `apps/web/src/components/ui/empty-state.test.tsx` — icon + heading + description + optional CTA; CTA invokes handler.
+- `apps/web/src/components/ui/skeleton.test.tsx` — renders with `aria-busy="true"` and `role="status"`; respects `width`/`height` props.
+- `apps/web/src/components/ui/toast.test.tsx` — `toast(...)` enqueues; `<Toaster />` renders the message; auto-dismiss after timeout; manual dismiss via close button; max-queue behavior (e.g., 5 simultaneous). **Fake-timer setup (avoids known happy-dom + React act flake):** `vi.useFakeTimers({ shouldAdvanceTime: false })` in `beforeEach`, drive time forward with `await vi.advanceTimersByTimeAsync(5000)`, wrap each enqueue/dequeue inside `act(...)` from `@testing-library/react`, restore real timers in `afterEach(() => vi.useRealTimers())`.
+- `apps/web/src/design-system/tokens.test.ts` — **data-driven from `tokens.inventory.txt`**, not from prose in the README:
+  1. Read the inventory file at test time (`fs.readFileSync`).
+  2. Inject `tokens.css` content into a `<style>` element appended to `document.head` (under happy-dom).
+  3. For each `data-theme` value in `["light", "dark"]`, set `document.documentElement.dataset.theme = theme` and assert that every token in the inventory resolves to a non-empty string via `getComputedStyle(document.documentElement).getPropertyValue(name)`.
+  4. **Coverage gap documented:** happy-dom does not simulate `prefers-color-scheme`, so tokens defined only inside `@media (prefers-color-scheme: ...)` blocks would not be reachable in this test. Token consolidation Step 2 above eliminates this gap by moving all tokens into explicit `data-theme` blocks; the test will fail if any token regresses back into a `prefers-color-scheme` block.
+  5. Asserts a strict equality: the set of resolved tokens equals the set in `tokens.inventory.txt` (catches added-but-undocumented tokens and removed tokens).
+
+**E2E (Playwright):**
+
+- `e2e/design-system.spec.ts` — only runs when `import.meta.env.DEV`-equivalent is true (the isolated dev server `pnpm e2e:isolated` runs in dev mode by default). Asserts:
+  1. `/design-system` route loads with no console errors.
+  2. Every primitive section is visible (assert by `data-section="button"`, `data-section="dialog"`, etc.).
+  3. Dialog trigger opens, `Esc` closes.
+  4. Tabs keyboard navigation moves selection.
+  5. Toast trigger emits a toast that auto-dismisses.
+  6. Theme toggle on the showcase page flips `data-theme` and at least one token-driven background visibly changes (assert via `page.evaluate(getComputedStyle)` snapshot before/after).
+
+### Existing tests to update
+
+- `apps/web/src/inspector.test.ts` — adjust selectors if the migration changes the DOM structure of the inspector tab strip. Keep test intent (tab switching, default tab is `stats`) unchanged. Assert `data-active={tab}` lands on the `TabsList` wrapper element (the load-bearing selector for `inspector-deploy.css`).
+- `apps/web/src/workspace-card.test.ts` — verified to exist at HEAD. Adjust selectors for migrated status pills (now `Badge` elements with `data-variant`). Re-target away from class-name assertions toward `data-variant`, `data-state`, `role`.
+- `e2e/operator-cockpit.spec.ts` — Modal interactions: update selectors for Dialog (Radix uses `role="dialog"` and `data-state` attributes). Behavior assertions unchanged.
+- `e2e/theme-audit.spec.ts` — should *not* require changes; it asserts cross-theme correctness, which is exactly what the token consolidation must preserve. If it fails after the refactor, treat that as a regression to fix, not a test to weaken.
+
+### Required new test (verified absent at HEAD)
+
+- `apps/web/src/scheduled-agent-form.test.tsx` — **does not exist today** (verified). Required as part of this PR because the migration changes the rendering of every form field. Assertions:
+  - Each form input has an associated `Label` (queryable via `getByLabelText`).
+  - Required-field validation: submitting empty form surfaces the error in `FormField`'s error slot with `aria-describedby` wiring.
+  - Validation timing is preserved (matches pre-migration behavior — on-submit, not on-change unless previously on-change).
+  - Submit button enabled/disabled state tracks form validity.
+  - All field labels remain accurate after migration (no regression where a label got dropped from a now-FormField-wrapped control).
+
+### Assertions to add/change/tighten
+
+- **New:** every primitive test asserts the focus-visible ring is present (`focus-visible:ring-2`) — the design system enforces a single, consistent focus treatment.
+- **New:** Dialog test asserts focus is trapped (Tab cycles within the dialog) — exercised by triggering Tab and asserting `document.activeElement` is still within the dialog content.
+- **Tightened:** `inspector.test.ts` and `workspace-card.test.ts` previously asserted on bespoke class names. After migration, assert on stable semantic attributes (`data-variant`, `data-state`, `role`) instead of CSS class names — class names should not be part of the public contract.
+- **New:** `tokens.test.ts` asserts that every token name in `apps/web/src/design-system/tokens.inventory.txt` resolves to a non-empty value at runtime in both `data-theme="light"` and `data-theme="dark"`. Assertion is strict set equality: tokens added without inventory updates also fail (catches accidental token removal AND undocumented additions).
+- **New:** ARIA assertions on `Toast` (`role="status"` for non-critical, `role="alert"` for danger variant).
+
+### Failure modes / edge cases / regression risks
+
+- **Token consolidation drops a token:** a single missing `--color-warning` or `--c-line-2` cascades into broken visual treatment across the cockpit. Mitigation: `tokens.test.ts` enumerates and asserts every token name. Plus `theme-audit.spec.ts` catches color drift.
+- **Radix Dialog focus trap breaks an existing modal flow:** e.g. an outside-click handler in `command-palette.tsx` (`mousedown` listener on `document`) might race with Radix's portal handling. Mitigation: explicit E2E coverage of every migrated modal (create-workspace, add-repo) in `operator-cockpit.spec.ts`.
+- **Radix Tabs changes the DOM contract that `inspector-checks.css` / `inspector-deploy.css` rules depend on:** existing CSS selectors targeting `.inspector-tabs button[data-active="true"]` may stop matching. Mitigation: preserve `data-active` on the migrated `TabsTrigger` via a custom wrapper if needed; explicit visual check in showcase + theme-audit spec.
+- **Tooltip provider not mounted at root:** primitives render with no tooltip. Mitigation: assertion in `main.tsx` test that `TooltipProvider` is in the tree; bookkeeping in the design system README.
+- **Bundle size regression:** three new Radix packages add ~30–50KB gzipped combined. Acceptable, but flagged. Mitigation: `make check` includes `build` step; record `dist/` size in PR description.
+- **Showcase route accidentally ships to production:** `import.meta.env.DEV` guard is a build-time check in Vite — if a developer hard-codes the route, prod gets it. Mitigation: build the route module lazily via dynamic `import()` so tree-shaking strips it; an additional `vite.config.ts` guard would belong in a follow-up.
+- **Migrated form loses validation behavior:** scheduled-agent form has custom validation timing. Mitigation: keep existing validation logic intact, only swap presentation. Test: `scheduled-agent-form.test.tsx` (if it exists; otherwise add one) asserts an invalid input shows the error in `FormField`'s error slot.
+- **Theme switching slow:** consolidation could regress theme-toggle perf if it forces a style recalc on every primitive. Mitigation: tokens stay as CSS custom properties (already the case) so theme switching is a single attribute update.
+- **Bespoke CSS still wins specificity wars:** migrated screens may have higher-specificity legacy rules in `cockpit-extras.css` that override primitive Tailwind classes. Mitigation: when migrating, scan the screen's bespoke CSS and remove rules now handled by the primitive. E2E theme-audit catches visible regressions.
+
+### Adversarial analysis
+
+- **How could this fail in production?** A token rename silently breaks an unmigrated screen; a Radix Dialog upgrade later changes ARIA wiring; the showcase route ships to prod and exposes internal patterns. Mitigation: token regression test, pinned Radix versions, `import.meta.env.DEV` guard + lazy import.
+- **What user actions trigger unexpected behavior?** Opening a modal during a slow render: Radix's focus trap may fire before children mount, causing a brief flash. Tested in E2E with consecutive modal opens.
+- **What existing behavior could break?** Inspector tab keyboard nav (Radix's arrow-key default may differ from current click-only behavior — that's an improvement, but assert it via test); modal `Esc` handling chains (Citadel may have a global `Esc` handler that closes modals — verify it still fires when Radix Dialog is open).
+- **Which tests credibly catch those failures?** `e2e/operator-cockpit.spec.ts` (modal flows + inspector tabs + scheduled-agent form), `e2e/theme-audit.spec.ts` (color drift), `e2e/design-system.spec.ts` (primitive contract), `inspector.test.ts`, `workspace-card.test.ts`, and the new `tokens.test.ts`.
+- **What gaps remain?** Visual regression is asserted by `theme-audit.spec.ts` only across a small set of cockpit screenshots. Comprehensive visual coverage (Percy/Chromatic) is out of scope for this PR; the deferred follow-up PRs that migrate the remaining surfaces will need their own visual audit.
+
+## Tests
+
+Test files to create (TDD: write each before its primitive implementation):
+
+```
+apps/web/src/components/ui/button.test.tsx
+apps/web/src/components/ui/badge.test.tsx
+apps/web/src/components/ui/card.test.tsx
+apps/web/src/components/ui/panel.test.tsx
+apps/web/src/components/ui/input.test.tsx
+apps/web/src/components/ui/select.test.tsx
+apps/web/src/components/ui/form-field.test.tsx
+apps/web/src/components/ui/tabs.test.tsx
+apps/web/src/components/ui/dialog.test.tsx
+apps/web/src/components/ui/tooltip.test.tsx
+apps/web/src/components/ui/chip.test.tsx
+apps/web/src/components/ui/icon-button.test.tsx
+apps/web/src/components/ui/empty-state.test.tsx
+apps/web/src/components/ui/skeleton.test.tsx
+apps/web/src/components/ui/toast.test.tsx
+apps/web/src/design-system/tokens.test.ts
+apps/web/src/scheduled-agent-form.test.tsx   ← required; does not exist at HEAD
+e2e/design-system.spec.ts
+```
+
+Test files to update:
+
+```
+apps/web/src/inspector.test.ts          — re-target selectors to Tabs DOM contract; assert data-active on TabsList wrapper
+apps/web/src/workspace-card.test.ts     — re-target selectors to Badge/Chip DOM contract
+e2e/operator-cockpit.spec.ts            — update modal selectors to Radix Dialog
+```
+
+`e2e/theme-audit.spec.ts` is **expected to pass unchanged** — any failure indicates a token consolidation bug.
+
+## Schema or contract generation
+
+Not applicable. No `@citadel/contracts` changes; no API surface changes; no DB migrations.
+
+## Verification
+
+Run before pushing:
+
+- `make check` — `check:arch`, `check:size`, `typecheck`, `lint` (biome), `test` (vitest), `coverage` (vitest --coverage), `check:deps` (verifies the new Radix deps are policy-compliant), `build`. **Coverage note:** the 90% line-coverage target documented in `docs/contributors/v2-engineering-standards.md` applies to `packages/core`, the daemon backend, and shared packages — not `apps/web`. New primitives lift overall coverage without crossing a guarded boundary in this PR. Confirm the exact guarded paths against `vitest` config before push and quote them in the PR description.
+- **Showcase route DEV-strip verification** (run after `pnpm --filter @citadel/web build`):
+  ```bash
+  pnpm --filter @citadel/web build
+  # Use a unique marker that only appears in showcase code (not a generic "design-system" string
+  # that could legitimately appear in aria-labels, route paths, or Tailwind class fragments).
+  # The showcase entry exports a marker constant `DESIGN_SYSTEM_SHOWCASE_MARKER` consumed by the
+  # route registration; if Vite tree-shakes the branch correctly the marker disappears from dist/.
+  test "$(grep -rEh "DESIGN_SYSTEM_SHOWCASE_MARKER" apps/web/dist/assets/*.js 2>/dev/null | wc -l)" -eq 0 \
+    || { echo "FAIL: showcase chunk shipped to production"; exit 1; }
+  # Belt and braces: confirm no chunk filename derived from the route folder name shipped either.
+  test "$(find apps/web/dist/assets -name "*design-system*" 2>/dev/null | wc -l)" -eq 0 \
+    || { echo "FAIL: showcase chunk filename present in dist"; exit 1; }
+  ```
+  Non-zero exit means the showcase route leaked into the production bundle — blocks push. The `DESIGN_SYSTEM_SHOWCASE_MARKER` constant must be exported from `apps/web/src/routes/design-system/index.tsx` so the grep has a unique signature.
+- **Bundle-size snapshot** (no automated gate exists, so capture explicitly for the PR):
+  ```bash
+  git fetch origin main
+  git worktree add /tmp/baseline-ds origin/main
+  (cd /tmp/baseline-ds && pnpm install --prefer-offline && pnpm --filter @citadel/web build)
+  du -sh /tmp/baseline-ds/apps/web/dist/assets > /tmp/dist-before.txt
+  pnpm --filter @citadel/web build
+  du -sh apps/web/dist/assets > /tmp/dist-after.txt
+  diff /tmp/dist-before.txt /tmp/dist-after.txt
+  git worktree remove /tmp/baseline-ds
+  ```
+  Record both sizes in the PR description. Expected delta from three Radix deps: ~30–50KB gzipped. Larger-than-expected deltas → investigate before merge.
+- `make e2e` — Playwright happy-path tests including the new `design-system.spec.ts`. Run isolated (`pnpm e2e:isolated`) per **B.8 Test Isolation #3** so the operator's dev daemon is not affected.
+- `make smoke` — **not required**. No daemon HTTP-surface changes.
+- `make performance` — **not required**. No startup or render-hot-path changes.
+
+## Reviewability strategy (per-commit boundaries)
+
+This is intentionally a single PR because the goal is to prove the primitives against four real consumers — splitting blocks that. To keep the diff reviewable, organize commits so each is independently reviewable with green CI:
+
+1. `feat(design-system): consolidate tokens into design-system/tokens.css` — token inventory + `tokens.css` + `styles.css` `@import` + `tokens.test.ts` + README. No primitive changes.
+2. `feat(design-system): extend Button + Badge variants` — Button (`destructive`/`link`/`loading`, new sizes) + Badge (new variants + dot) + tests.
+3. `feat(design-system): add Card, Panel, EmptyState, Skeleton primitives` — each with colocated test.
+4. `feat(design-system): add form-field primitives` — Input, Textarea, Select, Label, FormField, HelpText + tests.
+5. `feat(design-system): add Tabs primitive (Radix)` — adds `@radix-ui/react-tabs` + Tabs + test.
+6. `feat(design-system): add Dialog primitive (Radix)` — adds `@radix-ui/react-dialog` + Dialog + test.
+7. `feat(design-system): add Tooltip primitive (Radix)` — adds `@radix-ui/react-tooltip` + TooltipProvider mount in main.tsx + test.
+8. `feat(design-system): add Chip + IconButton + Toast primitives` — Chip, IconButton, Toast (+ `<Toaster />` mount) + tests.
+9. `feat(design-system): /design-system showcase route (dev-only)` — folder layout + main.tsx DEV-guarded registration + `e2e/design-system.spec.ts` + the dist-grep verification step.
+10. `refactor(modals): migrate modals.tsx to Dialog primitive` — modals.tsx + modals.css cleanups + e2e selector updates.
+11. `refactor(inspector): extract inspector-tabs and migrate to Tabs primitive` — new `inspector-tabs.tsx` + slimmed `inspector.tsx` + inspector-*.css cleanups + inspector.test.ts updates.
+12. `refactor(workspace-card): migrate status pills to Badge/Chip` — workspace-card.tsx + test updates.
+13. `refactor(scheduled-agent-form): migrate to FormField family` — scheduled-agent-form.tsx + new scheduled-agent-form.test.tsx.
+14. `docs(spec): annotate B.8 #4 as partial — first-wave primitives shipped` — single-line spec annotation.
+
+Each commit must keep `make check` green so reviewers can bisect. The PR description includes the bundle-size diff, the lockfile transitive add count, and a per-commit reading order.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 00000000..b7c87a96
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,49 @@
+# Contributing
+
+Citadel is a local-first TypeScript monorepo. Contributions should preserve the package boundaries, local-state safety, and operator-focused UI model described in the docs.
+
+## Start Here
+
+1. Read [README.md](README.md) for the product and architecture overview.
+2. Read [docs/README.md](docs/README.md) for the docs map.
+3. Read [docs/contributors/v2-engineering-standards.md](docs/contributors/v2-engineering-standards.md) before changing code.
+
+## Development Loop
+
+```bash
+make setup
+make deploy
+```
+
+`make deploy` starts a worktree-scoped daemon + Vite stack and prints the cockpit URL. It keeps local development separate from the long-term systemd install.
+
+## Required Checks
+
+Run the focused tests for your change, then run:
+
+```bash
+make check
+```
+
+For UI or workflow changes, also run the relevant Playwright spec:
+
+```bash
+pnpm e2e:isolated --project=desktop e2e/<spec>.spec.ts
+```
+
+Use the isolated wrappers when possible. They allocate temporary state and avoid writing into the operator's real Citadel database/config.
+
+## Architecture Rules
+
+- `apps/web` imports shared contracts, not daemon internals.
+- `packages/core` stays pure and does not import implementation packages.
+- cleanup paths must not delete dirty worktrees without explicit force behavior.
+- provider-backed features must degrade clearly when provider health is unavailable.
+- dependency changes require lockfile review and must pass dependency policy.
+- UI changes should stay dense, accessible, keyboard-friendly, and consistent with the local design-system tokens/components.
+
+## Documentation
+
+Update docs when changing product behavior, install/runtime behavior, package boundaries, config shape, or operator-visible workflows.
+
+Use product-facing docs for product explanations. Keep agent/process notes in the process-artifact areas documented in [docs/README.md](docs/README.md).
diff --git a/README.md b/README.md
index f6509841..4d1593a2 100644
--- a/README.md
+++ b/README.md
@@ -1,54 +1,186 @@
 # Citadel
 
-Citadel v2 is a local-first Linux operator cockpit for repositories, workspaces, tmux-backed agent runtimes, providers, hooks, MCP, and operational activity.
+[![CI](https://github.com/ovdmar/citadel/actions/workflows/ci.yml/badge.svg)](https://github.com/ovdmar/citadel/actions/workflows/ci.yml)
 
-## Quickstart (dev)
+Citadel is a local-first cockpit for managing AI coding agents across git workspaces, durable terminals, pull requests, checks, issue trackers, hooks, and local preview surfaces.
+
+It is built for the workflow where several long-running agents are working in different local worktrees and the operator needs one place to answer: what is running, what changed, what is blocked, what is ready for review, and what should happen next?
+
+![Citadel desktop cockpit](docs/campaigns/screenshot-desktop-cockpit.png)
+
+## What It Does
+
+- Registers local repositories and creates isolated git workspaces.
+- Starts durable shell-backed agent sessions inside those workspaces.
+- Keeps terminal sessions alive across browser refreshes and daemon restarts.
+- Shows workspace state, branch state, PR/check status, issue links, local apps, operations, and activity in one cockpit.
+- Exposes a local daemon API over REST, SSE, terminal WebSocket, and MCP tools.
+- Runs locally by default with SQLite persistence and loopback-only networking.
+
+Citadel is not a hosted SaaS product. It is a developer-machine control plane for local agent work.
+
+## Status
+
+Citadel is an active source-available project. The core local workflow is implemented and tested, but the product is still evolving.
+
+Stable today:
+
+- local daemon + React cockpit
+- repository/workspace lifecycle
+- SQLite persistence and forward migrations
+- tmux-backed agent and terminal sessions
+- PR/check/provider summaries through local provider adapters
+- local install, upgrade, doctor, smoke, and e2e verification paths
+- architecture boundary checks and package-level TypeScript project references
+
+In progress:
+
+- broader design-system migration across older cockpit surfaces
+- PTY-daemon terminal performance work
+- richer human-review and provider workflows
+- expanded first-run and configuration UX
+
+## Screenshots
+
+| Cockpit | Settings |
+|---|---|
+| ![Cockpit screenshot](docs/campaigns/screenshot-desktop-cockpit.png) | ![Settings screenshot](docs/campaigns/screenshot-desktop-settings.png) |
+
+| Dark theme | Light theme |
+|---|---|
+| ![Dark theme cockpit](docs/campaigns/theme-dark-desktop-cockpit.png) | ![Light theme cockpit](docs/campaigns/theme-light-desktop-cockpit.png) |
+
+## Architecture
+
+Citadel is a TypeScript monorepo with a local daemon, browser cockpit, and small domain packages.
+
+| Area | Purpose |
+|---|---|
+| `apps/web` | React, Vite, TanStack Router/Query cockpit UI |
+| `apps/daemon` | local REST/SSE/WebSocket daemon and operation runner |
+| `apps/cli` | thin local helper surface |
+| `packages/contracts` | Zod API/event DTOs shared by daemon and web |
+| `packages/core` | pure domain logic and state helpers |
+| `packages/db` | SQLite schema, migrations, and persistence helpers |
+| `packages/operations` | side-effectful workspace, session, and lifecycle workflows |
+| `packages/terminal` | tmux/PTY terminal adapters and WebSocket protocol |
+| `packages/providers` | version-control, PR, CI, issue, and usage provider adapters |
+| `packages/runtimes` | agent runtime contracts and launch profiles |
+| `packages/hooks` | repo hook discovery, execution, and output contracts |
+| `packages/mcp` | normalized local MCP tools/resources |
+| `packages/testing` | deterministic test fixtures and fake providers |
+
+The codebase enforces boundaries with static checks:
+
+- `packages/core` stays pure and does not import implementation packages.
+- `apps/web` talks to the daemon through shared contracts, not daemon internals.
+- workspace cleanup paths must preserve dirty work unless an explicit force policy is used.
+- dependency changes are checked by a local dependency-policy gate.
+
+See [Citadel v2 Architecture](docs/architecture/citadel-v2-architecture.md) and [Technical Decisions](docs/architecture/technical-decisions.md).
+
+## Technical Choices
+
+Citadel deliberately chooses a local-first architecture:
+
+- **Local daemon + browser UI, not hosted SaaS:** agent work, repositories, terminals, and provider CLIs already live on the developer machine.
+- **SQLite, not a remote database:** state is local, inspectable, easy to back up, and enough for one operator's workbench.
+- **Zod contracts between packages:** the daemon and browser share typed request/response/event contracts without importing each other's internals.
+- **tmux and PTY-backed terminals:** sessions survive browser refreshes and daemon restarts while preserving real terminal behavior.
+- **Provider adapters, not provider-specific UI:** GitHub/Jira-style integrations are implementations behind normalized PR, check, issue, and provider-health surfaces.
+- **Checks as product infrastructure:** architecture boundaries, size limits, typecheck, lint, coverage, dependency policy, build, smoke, and Playwright e2e are part of the normal gate.
+
+## Quickstart
+
+Development loop:
 
 ```bash
-make setup     # pnpm install
-make deploy    # detached HMR stack (daemon + vite); prints the cockpit URL
+make setup
+make deploy
 ```
 
-- Daemon (REST/SSE/WebSocket, serves built web): `http://127.0.0.1:4010` for the systemd long-term install; worktree dev uses derived ports `4110–4209`.
-- Vite HMR cockpit (worktree dev): `5210–5309`.
-- Default config: `~/.local/share/citadel/citadel.config.json`
-- Default SQLite DB: `~/.local/share/citadel/citadel.sqlite`
+`make deploy` starts a detached worktree-scoped HMR stack: daemon under `tsx watch` plus Vite. It prints the cockpit URL.
+
+Default long-term install:
 
-The daemon binds `127.0.0.1` by default for local-first use. See [docs/operations/worktree-development.md](docs/operations/worktree-development.md) for the full mental model.
+```bash
+make install
+make doctor
+```
 
-## Install (long-term)
+Useful commands:
 
 ```bash
-make install                          # install latest released tag and refresh systemd --user units
-make upgrade                          # reinstall/upgrade to latest released tag
-make install REF=main                 # development install from latest origin/main
-make upgrade REF=v0.3.0               # install a specific annotated release tag
-make doctor                           # verify everything is configured
+make check       # architecture, size, typecheck, lint, coverage, deps, build
+make smoke       # local daemon smoke checks
+make e2e         # Playwright suite
+make doctor      # installed-system verification
 ```
 
-See [docs/operations/install.md](docs/operations/install.md) for pre-requisites, HTTPS setup (mkcert recipe), and verification details.
+Runtime defaults:
+
+- long-term daemon: `http://127.0.0.1:4010`
+- worktree daemon ports: `4110-4209`
+- worktree Vite ports: `5210-5309`
+- config: `~/.local/share/citadel/citadel.config.json`
+- SQLite DB: `~/.local/share/citadel/citadel.sqlite`
 
-## Checks
+See [Install](docs/operations/install.md), [Runbook](docs/operations/runbook.md), and [Worktree Development](docs/operations/worktree-development.md).
+
+## Quality Bar
+
+The main local gate is:
 
 ```bash
 make check
-make smoke
+```
+
+It runs:
+
+- architecture boundary checks
+- file-size checks
+- TypeScript project-reference typecheck
+- Biome lint/format check
+- Vitest coverage
+- dependency policy
+- production build
+
+UI and integration confidence comes from Playwright:
+
+```bash
 make e2e
+pnpm e2e:isolated
 ```
 
-Citadel uses pnpm, strict TypeScript project references, Biome, Vitest, Playwright, SQLite, tmux, REST/SSE for app state, and a dedicated WebSocket for terminal I/O.
+The isolated wrappers allocate temporary state so tests do not write into the operator's real Citadel database or config.
 
-## License
+## For Reviewers
 
-Citadel is source-available under the [PolyForm Perimeter License 1.0.1](LICENSE). Commercial use is allowed when it does not provide a product or service that competes with Citadel. Redistributions must preserve the required notice pointing to the original repository.
+If you are evaluating the repository, start here:
+
+1. Read this README for the product and architecture overview.
+2. Skim [User Journeys](docs/architecture/user-journeys.md) for the intended operator workflow.
+3. Read [Citadel v2 Architecture](docs/architecture/citadel-v2-architecture.md) for package boundaries.
+4. Open `apps/web/src/main.tsx` and `apps/daemon/src/app.ts` to see the browser/daemon entry points.
+5. Review `packages/contracts/src/index.ts` for the API/event model.
+6. Run `make check` to exercise the normal quality gate.
+7. Browse `e2e/` for the user-facing regression coverage.
 
-## Docs
+The repo also contains agent/process artifacts used to build the project. They are documented separately in [Docs Map](docs/README.md) so they do not need to be read as product documentation.
 
-- [Product specs](specs/README.md)
+## Documentation
+
+- [Docs Map](docs/README.md)
+- [Product Specs](specs/README.md)
 - [Architecture](docs/architecture/citadel-v2-architecture.md)
+- [Technical Decisions](docs/architecture/technical-decisions.md)
+- [User Journeys](docs/architecture/user-journeys.md)
 - [Install](docs/operations/install.md)
-- [Hook examples](docs/operations/hook-examples.md)
 - [Runbook](docs/operations/runbook.md)
-- [Worktree development](docs/operations/worktree-development.md)
-- [Engineering standards](docs/contributors/v2-engineering-standards.md)
-- [Campaign log](docs/campaigns/citadel-v2-implementation-log.md)
+- [Config Reference](docs/operations/config-reference.md)
+- [Engineering Standards](docs/contributors/v2-engineering-standards.md)
+- [Contributing](CONTRIBUTING.md)
+
+## License
+
+Citadel is source-available under the [PolyForm Perimeter License 1.0.1](LICENSE). Commercial use is allowed when it does not provide a product or service that competes with Citadel. Redistributions must preserve the required notice pointing to the original repository.
diff --git a/apps/web/package.json b/apps/web/package.json
index 6205ce4b..e7b3283b 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,10 @@
     "@citadel/contracts": "workspace:*",
     "@citadel/core": "workspace:*",
     "@pierre/diffs": "1.2.7",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-query": "^5.90.10",
     "@tanstack/react-router": "^1.132.0",
     "@xterm/addon-fit": "^0.10.0",
diff --git a/apps/web/src/components/ui/badge.test.tsx b/apps/web/src/components/ui/badge.test.tsx
new file mode 100644
index 00000000..e04a1482
--- /dev/null
+++ b/apps/web/src/components/ui/badge.test.tsx
@@ -0,0 +1,64 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { Badge } from "./badge.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Badge", () => {
+  it("renders a <span> by default", () => {
+    const { container } = mount(<Badge>Idle</Badge>);
+    const badge = container.querySelector("span");
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent).toBe("Idle");
+  });
+
+  it("applies the neutral variant by default", () => {
+    const { container } = mount(<Badge>Default</Badge>);
+    const badge = container.querySelector("span");
+    expect(badge?.getAttribute("data-variant")).toBe("neutral");
+  });
+
+  it("applies a known variant via data-variant for stable test targeting", () => {
+    for (const variant of ["neutral", "ready", "blocked", "info", "warn", "merged", "neutral-strong"] as const) {
+      const { container, unmount } = render(<Badge variant={variant}>{variant}</Badge>);
+      const badge = container.querySelector("span");
+      expect(badge?.getAttribute("data-variant")).toBe(variant);
+      unmount();
+    }
+  });
+
+  it("renders a leading dot when dot is true", () => {
+    const { container } = mount(
+      <Badge variant="ready" dot>
+        Live
+      </Badge>,
+    );
+    expect(container.querySelector('[data-slot="badge-dot"]')).not.toBeNull();
+  });
+
+  it("does not render a dot when dot is omitted", () => {
+    const { container } = mount(<Badge variant="ready">Live</Badge>);
+    expect(container.querySelector('[data-slot="badge-dot"]')).toBeNull();
+  });
+
+  it("merges the className prop", () => {
+    const { container } = mount(
+      <Badge className="my-extra" variant="info">
+        Extra
+      </Badge>,
+    );
+    const badge = container.querySelector("span");
+    expect(badge?.className).toMatch(/my-extra/);
+  });
+});
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index 8ab662e7..7a187fb1 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -2,19 +2,53 @@ import { type VariantProps, cva } from "class-variance-authority";
 import type * as React from "react";
 import { cn } from "../../lib/utils.js";
 
-const badgeVariants = cva("inline-flex items-center rounded-full px-2 py-1 text-xs font-medium leading-none", {
+const badgeVariants = cva("inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium leading-none", {
   variants: {
     variant: {
       neutral: "bg-[color-mix(in_srgb,CanvasText_8%,transparent)] text-[CanvasText]",
       ready: "bg-[color-mix(in_srgb,var(--color-success)_13%,transparent)] text-[var(--color-success)]",
       blocked: "bg-[color-mix(in_srgb,var(--color-danger)_12%,transparent)] text-[var(--color-danger)]",
+      info: "bg-[color-mix(in_srgb,var(--c-info)_15%,transparent)] text-[var(--c-info)]",
+      warn: "bg-[color-mix(in_srgb,var(--color-warning)_13%,transparent)] text-[var(--color-warning)]",
+      merged: "bg-[color-mix(in_srgb,var(--color-merged)_13%,transparent)] text-[var(--color-merged)]",
+      "neutral-strong": "bg-[color-mix(in_srgb,CanvasText_18%,transparent)] text-[CanvasText]",
     },
   },
   defaultVariants: { variant: "neutral" },
 });
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
+type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>;
 
-export function Badge({ className, variant, ...props }: BadgeProps) {
-  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+const dotTone: Record<BadgeVariant, string> = {
+  neutral: "bg-[color-mix(in_srgb,CanvasText_55%,transparent)]",
+  ready: "bg-[var(--color-success)]",
+  blocked: "bg-[var(--color-danger)]",
+  info: "bg-[var(--c-info)]",
+  warn: "bg-[var(--color-warning)]",
+  merged: "bg-[var(--color-merged)]",
+  "neutral-strong": "bg-[CanvasText]",
+};
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+  dot?: boolean;
+}
+
+export function Badge({ className, variant, dot, children, ...props }: BadgeProps) {
+  const resolvedVariant: BadgeVariant = variant ?? "neutral";
+  return (
+    <span
+      data-variant={resolvedVariant}
+      className={cn(badgeVariants({ variant: resolvedVariant }), className)}
+      {...props}
+    >
+      {dot ? (
+        <span
+          data-slot="badge-dot"
+          aria-hidden="true"
+          className={cn("inline-block h-1.5 w-1.5 rounded-full", dotTone[resolvedVariant])}
+        />
+      ) : null}
+      {children}
+    </span>
+  );
 }
diff --git a/apps/web/src/components/ui/button.test.tsx b/apps/web/src/components/ui/button.test.tsx
new file mode 100644
index 00000000..bd418fef
--- /dev/null
+++ b/apps/web/src/components/ui/button.test.tsx
@@ -0,0 +1,100 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./button.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Button", () => {
+  it("renders a <button> with the provided children by default", () => {
+    const { container } = mount(<Button>Click me</Button>);
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+    expect(button?.textContent).toBe("Click me");
+  });
+
+  it("renders the focus-visible ring class on the base layer", () => {
+    const { container } = mount(<Button>Focus</Button>);
+    const button = container.querySelector("button");
+    expect(button?.className).toMatch(/focus-visible:ring-2/);
+  });
+
+  it('applies the destructive variant when variant="destructive"', () => {
+    const { container } = mount(<Button variant="destructive">Delete</Button>);
+    const button = container.querySelector("button");
+    expect(button?.className).toMatch(/color-danger/);
+  });
+
+  it('applies the link variant when variant="link"', () => {
+    const { container } = mount(<Button variant="link">Read more</Button>);
+    const button = container.querySelector("button");
+    expect(button?.className).toMatch(/underline/);
+  });
+
+  it("renders a spinner and disables the button while loading", () => {
+    const { container } = mount(<Button loading>Save</Button>);
+    const button = container.querySelector("button");
+    expect(button?.hasAttribute("disabled")).toBe(true);
+    expect(button?.getAttribute("aria-busy")).toBe("true");
+    expect(button?.querySelector('[data-slot="spinner"]')).not.toBeNull();
+    // Children remain in the DOM for layout stability.
+    expect(button?.textContent).toContain("Save");
+  });
+
+  it("does not render a spinner when not loading", () => {
+    const { container } = mount(<Button>Save</Button>);
+    const button = container.querySelector("button");
+    expect(button?.querySelector('[data-slot="spinner"]')).toBeNull();
+    expect(button?.hasAttribute("aria-busy")).toBe(false);
+  });
+
+  it("respects the explicit disabled prop independently of loading", () => {
+    const { container } = mount(<Button disabled>Save</Button>);
+    const button = container.querySelector("button");
+    expect(button?.hasAttribute("disabled")).toBe(true);
+  });
+
+  it('applies the sm size when size="sm"', () => {
+    const { container } = mount(<Button size="sm">Small</Button>);
+    const button = container.querySelector("button");
+    expect(button?.className).toMatch(/min-h-7/);
+  });
+
+  it('applies the lg size when size="lg"', () => {
+    const { container } = mount(<Button size="lg">Large</Button>);
+    const button = container.querySelector("button");
+    expect(button?.className).toMatch(/min-h-10/);
+  });
+
+  it('preserves the icon size when size="icon"', () => {
+    const { container } = mount(<Button size="icon">x</Button>);
+    const button = container.querySelector("button");
+    expect(button?.className).toMatch(/w-9/);
+  });
+
+  it("renders the slot via asChild for polymorphic usage", () => {
+    const { container } = mount(
+      <Button asChild>
+        <a href="https://example.com">Link</a>
+      </Button>,
+    );
+    expect(container.querySelector("a")?.getAttribute("href")).toBe("https://example.com");
+    expect(container.querySelector("button")).toBeNull();
+  });
+
+  it("merges the className prop with the variant classes", () => {
+    const { container } = mount(<Button className="my-extra">Extra</Button>);
+    const button = container.querySelector("button");
+    expect(button?.className).toMatch(/my-extra/);
+  });
+});
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 4be5b3b4..bb8b462b 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 
 const buttonVariants = cva(
-  "inline-flex min-h-9 items-center justify-center gap-2 rounded-[7px] px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-55",
+  "relative inline-flex items-center justify-center gap-2 rounded-[7px] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-55",
   {
     variants: {
       variant: {
@@ -12,9 +12,13 @@ const buttonVariants = cva(
         secondary:
           "border border-[color-mix(in_srgb,CanvasText_14%,transparent)] bg-transparent text-[CanvasText] hover:bg-[color-mix(in_srgb,CanvasText_7%,transparent)]",
         ghost: "bg-transparent text-[CanvasText] hover:bg-[color-mix(in_srgb,CanvasText_7%,transparent)]",
+        destructive: "bg-[var(--color-danger)] text-white hover:opacity-90 focus-visible:ring-[var(--color-danger)]",
+        link: "bg-transparent px-0 text-[var(--color-action)] underline-offset-4 hover:underline",
       },
       size: {
-        default: "min-h-9 px-3",
+        sm: "min-h-7 px-2 text-xs",
+        default: "min-h-9 px-3 py-2",
+        lg: "min-h-10 px-4 py-2",
         icon: "h-9 w-9 px-0",
       },
     },
@@ -29,12 +33,46 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  loading?: boolean;
+}
+
+function Spinner() {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="spinner"
+      className="inline-block h-3.5 w-3.5 animate-[spin_0.7s_linear_infinite] rounded-full border-2 border-current border-r-transparent opacity-70"
+    />
+  );
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props} />;
+    const isDisabled = disabled || loading;
+    const ariaBusy = loading ? "true" : undefined;
+    // Slot requires a single child. When asChild=true, pass `children`
+    // through unchanged; the spinner is not injected because the consumer
+    // chose polymorphism. Disabled / aria-busy still apply.
+    const content = asChild ? (
+      children
+    ) : (
+      <>
+        {loading ? <Spinner /> : null}
+        {children}
+      </>
+    );
+    return (
+      <Comp
+        ref={ref}
+        className={cn(buttonVariants({ variant, size }), className)}
+        disabled={isDisabled}
+        aria-busy={ariaBusy}
+        {...props}
+      >
+        {content}
+      </Comp>
+    );
   },
 );
 Button.displayName = "Button";
diff --git a/apps/web/src/components/ui/card.test.tsx b/apps/web/src/components/ui/card.test.tsx
new file mode 100644
index 00000000..087fc5a1
--- /dev/null
+++ b/apps/web/src/components/ui/card.test.tsx
@@ -0,0 +1,43 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { Card } from "./card.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Card", () => {
+  it('renders children inside a div with data-component="card"', () => {
+    const { container } = mount(<Card>hello</Card>);
+    const card = container.querySelector('[data-component="card"]');
+    expect(card).not.toBeNull();
+    expect(card?.tagName).toBe("DIV");
+    expect(card?.textContent).toBe("hello");
+  });
+
+  it("merges custom className with the base classes", () => {
+    const { container } = mount(<Card className="extra">x</Card>);
+    const card = container.querySelector('[data-component="card"]');
+    expect(card?.className).toMatch(/extra/);
+  });
+
+  it("forwards arbitrary HTML attributes", () => {
+    const { container } = mount(
+      <Card data-testid="my-card" aria-label="workspace summary">
+        x
+      </Card>,
+    );
+    const card = container.querySelector('[data-component="card"]');
+    expect(card?.getAttribute("data-testid")).toBe("my-card");
+    expect(card?.getAttribute("aria-label")).toBe("workspace summary");
+  });
+});
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
new file mode 100644
index 00000000..6230ee98
--- /dev/null
+++ b/apps/web/src/components/ui/card.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-component="card"
+      className={cn(
+        "rounded-[10px] border border-[var(--c-line-2)] bg-[var(--c-card)] p-3 shadow-[var(--sh-card)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Card.displayName = "Card";
diff --git a/apps/web/src/components/ui/chip.test.tsx b/apps/web/src/components/ui/chip.test.tsx
new file mode 100644
index 00000000..c63ac893
--- /dev/null
+++ b/apps/web/src/components/ui/chip.test.tsx
@@ -0,0 +1,49 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Chip } from "./chip.js";
+import { fireClick, render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Chip", () => {
+  it("renders the label inside a Badge container", () => {
+    const { container } = mount(<Chip>My label</Chip>);
+    const chip = container.querySelector("[data-variant]");
+    expect(chip).not.toBeNull();
+    expect(chip?.textContent).toContain("My label");
+  });
+
+  it("renders a leading icon slot when icon is provided", () => {
+    const { container } = mount(<Chip icon={<span data-testid="icon">@</span>}>label</Chip>);
+    expect(container.querySelector('[data-testid="icon"]')).not.toBeNull();
+  });
+
+  it("renders an onClose button with a required aria-label and fires the handler", () => {
+    const onClose = vi.fn();
+    const { container } = mount(
+      <Chip onClose={onClose} closeAriaLabel="Remove tag">
+        label
+      </Chip>,
+    );
+    const closeBtn = container.querySelector('[data-slot="chip-close"]') as HTMLButtonElement | null;
+    expect(closeBtn).not.toBeNull();
+    expect(closeBtn?.getAttribute("aria-label")).toBe("Remove tag");
+    fireClick(closeBtn);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not render the close button when onClose is omitted", () => {
+    const { container } = mount(<Chip>label</Chip>);
+    expect(container.querySelector('[data-slot="chip-close"]')).toBeNull();
+  });
+});
diff --git a/apps/web/src/components/ui/chip.tsx b/apps/web/src/components/ui/chip.tsx
new file mode 100644
index 00000000..ee19a00c
--- /dev/null
+++ b/apps/web/src/components/ui/chip.tsx
@@ -0,0 +1,40 @@
+import { X } from "lucide-react";
+import type * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Badge, type BadgeProps } from "./badge.js";
+
+export interface ChipProps extends Omit<BadgeProps, "dot"> {
+  icon?: React.ReactNode;
+  onClose?: () => void;
+  /** Required aria-label for the close button when onClose is provided. */
+  closeAriaLabel?: string;
+}
+
+export function Chip({ icon, onClose, closeAriaLabel, children, className, ...rest }: ChipProps) {
+  if (onClose && !closeAriaLabel && typeof console !== "undefined") {
+    console.warn(
+      "Chip: pass `closeAriaLabel` whenever `onClose` is set so the close button is screen-reader-accessible.",
+    );
+  }
+  return (
+    <Badge className={cn(className)} {...rest}>
+      {icon ? (
+        <span data-slot="chip-icon" className="inline-flex items-center">
+          {icon}
+        </span>
+      ) : null}
+      {children}
+      {onClose ? (
+        <button
+          type="button"
+          data-slot="chip-close"
+          aria-label={closeAriaLabel ?? "Remove"}
+          onClick={onClose}
+          className="-mr-0.5 inline-grid h-4 w-4 place-items-center rounded-full text-current opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-action)]"
+        >
+          <X size={10} />
+        </button>
+      ) : null}
+    </Badge>
+  );
+}
diff --git a/apps/web/src/components/ui/dialog.test.tsx b/apps/web/src/components/ui/dialog.test.tsx
new file mode 100644
index 00000000..8c385723
--- /dev/null
+++ b/apps/web/src/components/ui/dialog.test.tsx
@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog.js";
+import { fireClick, pressKey, render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+function Sample({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Dialog defaultOpen={defaultOpen}>
+      <DialogTrigger>Open</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Title</DialogTitle>
+          <DialogDescription>Description text</DialogDescription>
+        </DialogHeader>
+        <div>Body content</div>
+        <DialogFooter>
+          <button type="button">Footer</button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+describe("Dialog", () => {
+  it("does not render content when closed", () => {
+    mount(<Sample />);
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  it("opens when defaultOpen is true and exposes role=dialog with title + description", () => {
+    mount(<Sample defaultOpen />);
+    const dialog = document.querySelector('[role="dialog"]');
+    expect(dialog).not.toBeNull();
+    expect(dialog?.textContent).toContain("Title");
+    expect(dialog?.textContent).toContain("Description text");
+    expect(dialog?.textContent).toContain("Body content");
+    expect(dialog?.textContent).toContain("Footer");
+  });
+
+  it("opens via the trigger click", () => {
+    mount(<Sample />);
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+    const trigger = document.querySelector('[data-slot="dialog-trigger"]');
+    fireClick(trigger);
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull();
+  });
+
+  it("closes on Escape", () => {
+    mount(<Sample defaultOpen />);
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull();
+    pressKey(document.body, "Escape");
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+  });
+});
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..2cad2305
--- /dev/null
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -0,0 +1,96 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+
+export const DialogTrigger = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Trigger ref={ref} data-slot="dialog-trigger" className={cn(className)} {...props} />
+));
+DialogTrigger.displayName = "DialogTrigger";
+
+export const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-[var(--overlay-bg)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = "DialogOverlay";
+
+export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /**
+   * When true the built-in X close button is hidden. Useful for confirm-style
+   * dialogs whose only dismiss path is an explicit action button.
+   */
+  hideCloseButton?: boolean;
+}
+
+export const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
+  ({ className, children, hideCloseButton, ...props }, ref) => (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-1/2 top-1/2 z-50 grid w-[min(560px,calc(100%-32px))] -translate-x-1/2 -translate-y-1/2 gap-3 rounded-[12px] border border-[var(--c-line-2)] bg-[var(--c-card)] p-4 text-[var(--c-fg-1)] shadow-[var(--sh-2)] focus-visible:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {hideCloseButton ? null : (
+          <DialogPrimitive.Close
+            aria-label="Close"
+            className="absolute right-3 top-3 inline-grid h-7 w-7 place-items-center rounded-md text-[var(--c-fg-3)] transition-colors hover:bg-[color-mix(in_srgb,CanvasText_7%,transparent)] hover:text-[var(--c-fg-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-action)]"
+          >
+            <X size={14} />
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  ),
+);
+DialogContent.displayName = "DialogContent";
+
+export function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-1 pr-8", className)} {...props} />;
+}
+
+export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div data-slot="dialog-footer" className={cn("flex items-center justify-end gap-2 pt-1", className)} {...props} />
+  );
+}
+
+export const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-base font-semibold text-[var(--c-fg-1)]", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = "DialogTitle";
+
+export const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-[var(--c-fg-3)]", className)} {...props} />
+));
+DialogDescription.displayName = "DialogDescription";
diff --git a/apps/web/src/components/ui/empty-state.test.tsx b/apps/web/src/components/ui/empty-state.test.tsx
new file mode 100644
index 00000000..c3a6cbce
--- /dev/null
+++ b/apps/web/src/components/ui/empty-state.test.tsx
@@ -0,0 +1,47 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { EmptyState } from "./empty-state.js";
+import { fireClick, render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("EmptyState", () => {
+  it("renders heading + description + optional icon + CTA", () => {
+    const onClick = vi.fn();
+    const { container } = mount(
+      <EmptyState
+        icon={<span data-testid="icon">i</span>}
+        heading="No workspaces"
+        description="Create a workspace to get started."
+        action={{ label: "Add workspace", onClick }}
+      />,
+    );
+    expect(container.querySelector('[data-testid="icon"]')).not.toBeNull();
+    expect(container.textContent).toContain("No workspaces");
+    expect(container.textContent).toContain("Create a workspace to get started.");
+    const button = container.querySelector("button");
+    expect(button?.textContent).toBe("Add workspace");
+    fireClick(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders without a CTA when action is omitted", () => {
+    const { container } = mount(<EmptyState heading="Empty" />);
+    expect(container.querySelector("button")).toBeNull();
+  });
+
+  it('exposes data-component="empty-state" for scoped styling', () => {
+    const { container } = mount(<EmptyState heading="x" />);
+    expect(container.querySelector('[data-component="empty-state"]')).not.toBeNull();
+  });
+});
diff --git a/apps/web/src/components/ui/empty-state.tsx b/apps/web/src/components/ui/empty-state.tsx
new file mode 100644
index 00000000..17712c9e
--- /dev/null
+++ b/apps/web/src/components/ui/empty-state.tsx
@@ -0,0 +1,31 @@
+import type * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+
+export interface EmptyStateProps {
+  icon?: React.ReactNode;
+  heading: string;
+  description?: React.ReactNode;
+  action?: { label: string; onClick: () => void };
+  className?: string;
+}
+
+export function EmptyState({ icon, heading, description, action, className }: EmptyStateProps) {
+  return (
+    <div
+      data-component="empty-state"
+      className={cn("flex flex-col items-center justify-center gap-3 px-6 py-8 text-center", className)}
+    >
+      {icon ? <div className="text-[var(--c-fg-4)]">{icon}</div> : null}
+      <div className="flex flex-col items-center gap-1">
+        <div className="text-sm font-semibold text-[var(--c-fg-1)]">{heading}</div>
+        {description ? <div className="text-xs text-[var(--c-fg-3)]">{description}</div> : null}
+      </div>
+      {action ? (
+        <Button variant="secondary" size="sm" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/form-field.test.tsx b/apps/web/src/components/ui/form-field.test.tsx
new file mode 100644
index 00000000..cb38587c
--- /dev/null
+++ b/apps/web/src/components/ui/form-field.test.tsx
@@ -0,0 +1,82 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { FormField } from "./form-field.js";
+import { Input } from "./input.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("FormField", () => {
+  it("associates the Label with the inner control via htmlFor + id", () => {
+    const { container } = mount(
+      <FormField label="Name" id="name-field">
+        <Input />
+      </FormField>,
+    );
+    const label = container.querySelector("label");
+    const input = container.querySelector("input");
+    expect(label?.getAttribute("for")).toBe("name-field");
+    expect(input?.getAttribute("id")).toBe("name-field");
+  });
+
+  it("auto-generates an id when none is provided so the label still associates", () => {
+    const { container } = mount(
+      <FormField label="Email">
+        <Input />
+      </FormField>,
+    );
+    const label = container.querySelector("label");
+    const input = container.querySelector("input");
+    expect(label?.getAttribute("for")).toBeTruthy();
+    expect(label?.getAttribute("for")).toBe(input?.getAttribute("id"));
+  });
+
+  it("renders an error slot announced via aria-describedby", () => {
+    const { container } = mount(
+      <FormField label="Url" id="u" error="Required">
+        <Input />
+      </FormField>,
+    );
+    const errorEl = container.querySelector('[data-slot="form-error"]');
+    expect(errorEl?.textContent).toBe("Required");
+    const errorId = errorEl?.getAttribute("id");
+    const describedBy = container.querySelector("input")?.getAttribute("aria-describedby");
+    expect(describedBy).toBe(errorId);
+    expect(container.querySelector("input")?.getAttribute("aria-invalid")).toBe("true");
+  });
+
+  it("renders a HelpText slot announced via aria-describedby when no error", () => {
+    const { container } = mount(
+      <FormField label="Name" id="n" help="Used for greeting">
+        <Input />
+      </FormField>,
+    );
+    const helpEl = container.querySelector('[data-slot="form-help"]');
+    expect(helpEl?.textContent).toBe("Used for greeting");
+    const helpId = helpEl?.getAttribute("id");
+    expect(container.querySelector("input")?.getAttribute("aria-describedby")).toBe(helpId);
+    expect(container.querySelector("input")?.hasAttribute("aria-invalid")).toBe(false);
+  });
+
+  it("renders the required marker when required is true", () => {
+    const { container } = mount(
+      <FormField label="Name" id="n" required>
+        <Input />
+      </FormField>,
+    );
+    const marker = container.querySelector('[data-slot="form-required"]');
+    expect(marker).not.toBeNull();
+    expect(marker?.textContent).toContain("*");
+    expect(container.querySelector("input")?.hasAttribute("required")).toBe(true);
+  });
+});
diff --git a/apps/web/src/components/ui/form-field.tsx b/apps/web/src/components/ui/form-field.tsx
new file mode 100644
index 00000000..45143ba9
--- /dev/null
+++ b/apps/web/src/components/ui/form-field.tsx
@@ -0,0 +1,76 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Label } from "./label.js";
+
+// FormField composes a label + the rendered control + help/error text and
+// wires the id, htmlFor, aria-describedby, aria-invalid, and required
+// attributes consistently across the cockpit's forms. Pass the control as
+// the single child. The field clones the child via React.cloneElement to
+// inject the id and aria attrs without forcing the caller to repeat them.
+
+export interface FormFieldProps {
+  /** Label text shown above the control. */
+  label: string;
+  /**
+   * Explicit id for the control. When omitted, a stable id is derived
+   * with React.useId so the label still associates correctly.
+   */
+  id?: string;
+  /** Help text rendered below the control. Mutually displayed with `error`. */
+  help?: React.ReactNode;
+  /** Error message rendered below the control. Sets aria-invalid on the control. */
+  error?: React.ReactNode;
+  /** Marks the control as required (visual marker + required attribute on the control). */
+  required?: boolean;
+  /** Additional class names for the field wrapper. */
+  className?: string;
+  /** The single form control: Input, Textarea, Select, or compatible. */
+  children: React.ReactElement;
+}
+
+type ControlInjectedProps = {
+  id: string;
+  required?: boolean;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+};
+
+export function FormField({ label, id, help, error, required, className, children }: FormFieldProps) {
+  const generatedId = React.useId();
+  const fieldId = id ?? generatedId;
+  const helpId = `${fieldId}-help`;
+  const errorId = `${fieldId}-error`;
+
+  const describedBy = error ? errorId : help ? helpId : undefined;
+
+  const injectedProps: ControlInjectedProps = {
+    id: fieldId,
+    ...(required ? { required: true } : {}),
+    ...(describedBy ? { "aria-describedby": describedBy } : {}),
+    ...(error ? { "aria-invalid": true } : {}),
+  };
+  const control = React.cloneElement(children, injectedProps);
+
+  return (
+    <div className={cn("flex flex-col gap-1", className)}>
+      <Label htmlFor={fieldId}>
+        {label}
+        {required ? (
+          <span data-slot="form-required" aria-hidden="true" className="ml-0.5 text-[var(--color-danger)]">
+            *
+          </span>
+        ) : null}
+      </Label>
+      {control}
+      {error ? (
+        <p id={errorId} data-slot="form-error" role="alert" className="text-[11px] text-[var(--color-danger)]">
+          {error}
+        </p>
+      ) : help ? (
+        <p id={helpId} data-slot="form-help" className="text-[11px] text-[var(--c-fg-3)]">
+          {help}
+        </p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/icon-button.test.tsx b/apps/web/src/components/ui/icon-button.test.tsx
new file mode 100644
index 00000000..29778202
--- /dev/null
+++ b/apps/web/src/components/ui/icon-button.test.tsx
@@ -0,0 +1,52 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { IconButton } from "./icon-button.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("IconButton", () => {
+  it("renders a <button> with the supplied aria-label", () => {
+    const { container } = mount(
+      <IconButton aria-label="Close panel">
+        <span>×</span>
+      </IconButton>,
+    );
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+    expect(button?.getAttribute("aria-label")).toBe("Close panel");
+  });
+
+  it("warns in dev when aria-label is empty", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    // Deliberately passing an empty aria-label to exercise the dev warning.
+    const emptyLabel = "" as unknown as string;
+    mount(
+      <IconButton aria-label={emptyLabel}>
+        <span>×</span>
+      </IconButton>,
+    );
+    expect(warn).toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+  it("uses size=icon under the hood (h-9 w-9 wrapper)", () => {
+    const { container } = mount(
+      <IconButton aria-label="Open">
+        <span>+</span>
+      </IconButton>,
+    );
+    const button = container.querySelector("button");
+    expect(button?.className).toMatch(/w-9/);
+  });
+});
diff --git a/apps/web/src/components/ui/icon-button.tsx b/apps/web/src/components/ui/icon-button.tsx
new file mode 100644
index 00000000..fbb64d45
--- /dev/null
+++ b/apps/web/src/components/ui/icon-button.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Button, type ButtonProps } from "./button.js";
+
+// IconButton: a Button preset to size="icon" that REQUIRES an aria-label at
+// the type level. Excludes `asChild` to keep the aria-label guarantee — a
+// polymorphic icon-link should use Button directly and supply its own
+// aria-label.
+export type IconButtonProps = Omit<ButtonProps, "asChild" | "children" | "size"> & {
+  "aria-label": string;
+  children: React.ReactNode;
+};
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ "aria-label": ariaLabel, children, ...props }, ref) => {
+    if (!ariaLabel) {
+      console.warn(
+        "IconButton: aria-label is empty. Icon-only controls need a non-empty label so screen readers announce them.",
+      );
+    }
+    return (
+      <Button ref={ref} size="icon" aria-label={ariaLabel} title={ariaLabel} {...props}>
+        {children}
+      </Button>
+    );
+  },
+);
+IconButton.displayName = "IconButton";
diff --git a/apps/web/src/components/ui/input.test.tsx b/apps/web/src/components/ui/input.test.tsx
new file mode 100644
index 00000000..6e57e5a3
--- /dev/null
+++ b/apps/web/src/components/ui/input.test.tsx
@@ -0,0 +1,60 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { Input, Textarea } from "./input.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Input", () => {
+  it("renders an <input> with the focus-visible ring class", () => {
+    const { container } = mount(<Input placeholder="Name" />);
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+    expect(input?.className).toMatch(/focus-visible:ring-2/);
+  });
+
+  it("applies aria-invalid styling without removing the value", () => {
+    const { container } = mount(<Input defaultValue="bad" aria-invalid="true" />);
+    const input = container.querySelector("input") as HTMLInputElement | null;
+    expect(input?.value).toBe("bad");
+    expect(input?.getAttribute("aria-invalid")).toBe("true");
+    expect(input?.className).toMatch(/aria-invalid/);
+  });
+
+  it("becomes disabled when disabled prop is set", () => {
+    const { container } = mount(<Input disabled />);
+    const input = container.querySelector("input");
+    expect(input?.hasAttribute("disabled")).toBe(true);
+  });
+
+  it("merges the className prop", () => {
+    const { container } = mount(<Input className="my-input" />);
+    const input = container.querySelector("input");
+    expect(input?.className).toMatch(/my-input/);
+  });
+});
+
+describe("Textarea", () => {
+  it("renders a <textarea> with focus-visible styling and accepts rows", () => {
+    const { container } = mount(<Textarea rows={4} />);
+    const ta = container.querySelector("textarea");
+    expect(ta).not.toBeNull();
+    expect(Number(ta?.rows)).toBe(4);
+    expect(ta?.className).toMatch(/focus-visible:ring-2/);
+  });
+
+  it("respects disabled", () => {
+    const { container } = mount(<Textarea disabled />);
+    expect(container.querySelector("textarea")?.hasAttribute("disabled")).toBe(true);
+  });
+});
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
new file mode 100644
index 00000000..64d77559
--- /dev/null
+++ b/apps/web/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+const baseInputClasses = [
+  "block w-full rounded-[7px] border border-[var(--c-line-2)] bg-[var(--c-surface)]",
+  "px-2.5 py-1.5 text-sm text-[var(--c-fg-1)]",
+  "placeholder:text-[var(--c-fg-4)]",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-action)] focus-visible:ring-offset-1",
+  "disabled:cursor-not-allowed disabled:opacity-55",
+  "aria-invalid:border-[var(--color-danger)] aria-invalid:focus-visible:ring-[var(--color-danger)]",
+].join(" ");
+
+export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type = "text", ...props }, ref) => (
+    <input ref={ref} type={type} className={cn(baseInputClasses, className)} {...props} />
+  ),
+);
+Input.displayName = "Input";
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, rows = 3, ...props }, ref) => (
+    <textarea ref={ref} rows={rows} className={cn(baseInputClasses, "min-h-16 resize-y", className)} {...props} />
+  ),
+);
+Textarea.displayName = "Textarea";
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
new file mode 100644
index 00000000..b3adf6b5
--- /dev/null
+++ b/apps/web/src/components/ui/label.tsx
@@ -0,0 +1,14 @@
+import type * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+// Generic styled <label>. Consumers pass `htmlFor` to associate with their
+// control, or wrap a control as a child. `FormField` injects `htmlFor`
+// automatically; standalone usages are responsible for supplying it.
+export const Label = ({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) => (
+  // biome-ignore lint/a11y/noLabelWithoutControl: pass-through Label primitive — association is enforced by FormField or the consumer.
+  <label className={cn("block text-xs font-medium text-[var(--c-fg-2)]", className)} {...props} />
+);
+
+export const HelpText = ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+  <p className={cn("text-[11px] text-[var(--c-fg-3)]", className)} {...props} />
+);
diff --git a/apps/web/src/components/ui/panel.test.tsx b/apps/web/src/components/ui/panel.test.tsx
new file mode 100644
index 00000000..b4ebf297
--- /dev/null
+++ b/apps/web/src/components/ui/panel.test.tsx
@@ -0,0 +1,40 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { Panel, PanelBody, PanelFooter, PanelHeader, PanelTitle } from "./panel.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Panel", () => {
+  it("renders Panel + PanelHeader + PanelBody + PanelFooter composition", () => {
+    const { container } = mount(
+      <Panel>
+        <PanelHeader>
+          <PanelTitle>Status</PanelTitle>
+        </PanelHeader>
+        <PanelBody>body content</PanelBody>
+        <PanelFooter>footer</PanelFooter>
+      </Panel>,
+    );
+    expect(container.querySelector('[data-component="panel"]')).not.toBeNull();
+    expect(container.querySelector('[data-slot="panel-header"]')?.tagName).toBe("HEADER");
+    expect(container.querySelector('[data-slot="panel-body"]')?.textContent).toBe("body content");
+    expect(container.querySelector('[data-slot="panel-footer"]')?.textContent).toBe("footer");
+  });
+
+  it("PanelTitle renders with uppercase-style classes (small caps label)", () => {
+    const { container } = mount(<PanelTitle>Section</PanelTitle>);
+    const title = container.querySelector('[data-slot="panel-title"]');
+    expect(title?.className).toMatch(/uppercase/);
+  });
+});
diff --git a/apps/web/src/components/ui/panel.tsx b/apps/web/src/components/ui/panel.tsx
new file mode 100644
index 00000000..1fce959b
--- /dev/null
+++ b/apps/web/src/components/ui/panel.tsx
@@ -0,0 +1,67 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+// Panel: a labelled container used by the cockpit's right inspector
+// (Stats, Deployed apps, etc.) and the dashboard sections. Composes from
+// PanelHeader + PanelTitle + PanelBody + PanelFooter. The header uses
+// elevated surface tokens; the title renders the small uppercase label
+// shape B.8 #12 calls out.
+
+export const Panel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <section
+      ref={ref}
+      data-component="panel"
+      className={cn(
+        "flex flex-col overflow-hidden rounded-[10px] border border-[var(--c-line-2)] bg-[var(--c-surface)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Panel.displayName = "Panel";
+
+export const PanelHeader = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, ...props }, ref) => (
+    <header
+      ref={ref}
+      data-slot="panel-header"
+      className={cn(
+        "flex items-center gap-2 border-b border-[var(--c-line-2)] bg-[var(--c-elev)] px-3 py-2",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+PanelHeader.displayName = "PanelHeader";
+
+export function PanelTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="panel-title"
+      className={cn("text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--c-fg-4)]", className)}
+      {...props}
+    />
+  );
+}
+
+export const PanelBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-slot="panel-body" className={cn("flex-1 overflow-auto p-3", className)} {...props} />
+  ),
+);
+PanelBody.displayName = "PanelBody";
+
+export const PanelFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="panel-footer"
+      className={cn("border-t border-[var(--c-line-2)] bg-[var(--c-elev)] px-3 py-2", className)}
+      {...props}
+    />
+  ),
+);
+PanelFooter.displayName = "PanelFooter";
diff --git a/apps/web/src/components/ui/select.test.tsx b/apps/web/src/components/ui/select.test.tsx
new file mode 100644
index 00000000..e5d992c7
--- /dev/null
+++ b/apps/web/src/components/ui/select.test.tsx
@@ -0,0 +1,49 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { Select } from "./select.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Select", () => {
+  it("renders a native <select> with the provided options", () => {
+    const { container } = mount(
+      <Select defaultValue="b">
+        <option value="a">A</option>
+        <option value="b">B</option>
+      </Select>,
+    );
+    const select = container.querySelector("select") as HTMLSelectElement | null;
+    expect(select).not.toBeNull();
+    expect(select?.value).toBe("b");
+    expect(select?.options.length).toBe(2);
+  });
+
+  it("respects the disabled prop", () => {
+    const { container } = mount(
+      <Select disabled>
+        <option value="x">x</option>
+      </Select>,
+    );
+    expect(container.querySelector("select")?.hasAttribute("disabled")).toBe(true);
+  });
+
+  it("renders the focus-visible ring class", () => {
+    const { container } = mount(
+      <Select>
+        <option value="x">x</option>
+      </Select>,
+    );
+    expect(container.querySelector("select")?.className).toMatch(/focus-visible:ring-2/);
+  });
+});
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
new file mode 100644
index 00000000..79df7bd4
--- /dev/null
+++ b/apps/web/src/components/ui/select.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+export const Select = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>(
+  ({ className, children, ...props }, ref) => (
+    <select
+      ref={ref}
+      className={cn(
+        "block w-full appearance-none rounded-[7px] border border-[var(--c-line-2)] bg-[var(--c-surface)]",
+        "bg-[image:linear-gradient(45deg,transparent_50%,currentColor_50%),linear-gradient(135deg,currentColor_50%,transparent_50%)]",
+        "bg-[size:5px_5px,5px_5px]",
+        "bg-[position:calc(100%-10px)_55%,calc(100%-5px)_55%]",
+        "bg-no-repeat",
+        "px-2.5 py-1.5 pr-7 text-sm text-[var(--c-fg-1)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-action)] focus-visible:ring-offset-1",
+        "disabled:cursor-not-allowed disabled:opacity-55",
+        "aria-invalid:border-[var(--color-danger)] aria-invalid:focus-visible:ring-[var(--color-danger)]",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </select>
+  ),
+);
+Select.displayName = "Select";
diff --git a/apps/web/src/components/ui/skeleton.test.tsx b/apps/web/src/components/ui/skeleton.test.tsx
new file mode 100644
index 00000000..ba1be86b
--- /dev/null
+++ b/apps/web/src/components/ui/skeleton.test.tsx
@@ -0,0 +1,55 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { Skeleton } from "./skeleton.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Skeleton", () => {
+  it("renders as <output> (implicit role=status) with aria-busy=true", () => {
+    const { container } = mount(<Skeleton />);
+    const node = container.querySelector('[data-component="skeleton"]');
+    expect(node).not.toBeNull();
+    // <output> carries an implicit role of "status" — we don't need to set
+    // role explicitly. Verify the semantic element and the busy attribute.
+    expect(node?.tagName).toBe("OUTPUT");
+    expect(node?.getAttribute("aria-busy")).toBe("true");
+  });
+
+  it("applies width and height props as inline styles", () => {
+    const { container } = mount(<Skeleton width={120} height={16} />);
+    const node = container.querySelector('[data-component="skeleton"]') as HTMLElement | null;
+    expect(node?.style.width).toBe("120px");
+    expect(node?.style.height).toBe("16px");
+  });
+
+  it("supports string width/height for non-pixel units", () => {
+    const { container } = mount(<Skeleton width="100%" height="2rem" />);
+    const node = container.querySelector('[data-component="skeleton"]') as HTMLElement | null;
+    expect(node?.style.width).toBe("100%");
+    expect(node?.style.height).toBe("2rem");
+  });
+
+  it("merges className", () => {
+    const { container } = mount(<Skeleton className="my-skeleton" />);
+    const node = container.querySelector('[data-component="skeleton"]');
+    expect(node?.className).toMatch(/my-skeleton/);
+  });
+
+  it("renders a screen-reader label when label is provided", () => {
+    const { container } = mount(<Skeleton label="Loading PR data" />);
+    expect(container.textContent).toContain("Loading PR data");
+    const node = container.querySelector('[data-component="skeleton"]');
+    expect(node?.getAttribute("aria-label")).toBe("Loading PR data");
+  });
+});
diff --git a/apps/web/src/components/ui/skeleton.tsx b/apps/web/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..a7753d40
--- /dev/null
+++ b/apps/web/src/components/ui/skeleton.tsx
@@ -0,0 +1,39 @@
+import type * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+export interface SkeletonProps extends Omit<React.OutputHTMLAttributes<HTMLOutputElement>, "children"> {
+  width?: number | string;
+  height?: number | string;
+  label?: string;
+}
+
+function dimensionToCss(value: number | string | undefined): string | undefined {
+  if (value === undefined) return undefined;
+  return typeof value === "number" ? `${value}px` : value;
+}
+
+// `<output role="status">` is the WAI-ARIA-conformant element for an aria-busy
+// placeholder per Biome's useSemanticElements rule. Visually it behaves like
+// any block-level shimmer — the role+busy attrs are what assistive tech reads.
+export function Skeleton({ width, height, label, className, style, ...props }: SkeletonProps) {
+  const mergedStyle = {
+    ...style,
+    ...(width !== undefined ? { width: dimensionToCss(width) } : {}),
+    ...(height !== undefined ? { height: dimensionToCss(height) } : {}),
+  };
+  return (
+    <output
+      data-component="skeleton"
+      aria-busy="true"
+      aria-label={label}
+      className={cn(
+        "inline-block animate-pulse rounded-md bg-[color-mix(in_srgb,CanvasText_10%,transparent)]",
+        className,
+      )}
+      style={mergedStyle}
+      {...props}
+    >
+      {label ? <span className="sr-only">{label}</span> : null}
+    </output>
+  );
+}
diff --git a/apps/web/src/components/ui/tabs.test.tsx b/apps/web/src/components/ui/tabs.test.tsx
new file mode 100644
index 00000000..f5d62aa1
--- /dev/null
+++ b/apps/web/src/components/ui/tabs.test.tsx
@@ -0,0 +1,64 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
+import { render } from "./test-utils.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Tabs", () => {
+  it("renders the active panel for defaultValue", () => {
+    const { container } = mount(
+      <Tabs defaultValue="b">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">panel a</TabsContent>
+        <TabsContent value="b">panel b</TabsContent>
+      </Tabs>,
+    );
+    expect(container.textContent).toContain("panel b");
+    expect(container.textContent).not.toContain("panel a");
+  });
+
+  it("exposes data-state on triggers (active vs inactive)", () => {
+    const { container } = mount(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">a</TabsContent>
+        <TabsContent value="b">b</TabsContent>
+      </Tabs>,
+    );
+    const triggers = container.querySelectorAll('[role="tab"]');
+    expect(triggers[0]?.getAttribute("data-state")).toBe("active");
+    expect(triggers[1]?.getAttribute("data-state")).toBe("inactive");
+  });
+
+  it("propagates data-active onto the TabsList wrapper (inspector.css contract)", () => {
+    const { container } = mount(
+      <Tabs defaultValue="b">
+        <TabsList data-active="b">
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">a</TabsContent>
+        <TabsContent value="b">b</TabsContent>
+      </Tabs>,
+    );
+    const list = container.querySelector('[role="tablist"]');
+    expect(list?.getAttribute("data-active")).toBe("b");
+  });
+});
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..a3098700
--- /dev/null
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+export const Tabs = TabsPrimitive.Root;
+
+// Compact pill-style tab strip matching B.2 Inspector Tabs #1 — only
+// occupies its content width, never a half-panel-sized control.
+export const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex items-center gap-0.5 rounded-full border border-[var(--c-line-2)] bg-[var(--c-elev)] p-0.5",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = "TabsList";
+
+export 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 gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium text-[var(--c-fg-3)] transition-colors",
+      "hover:text-[var(--c-fg-1)]",
+      "data-[state=active]:bg-[var(--c-card)] data-[state=active]:text-[var(--c-fg-1)] data-[state=active]:shadow-[var(--sh-1)]",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-action)] focus-visible:ring-offset-1",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = "TabsTrigger";
+
+export const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-action)] focus-visible:ring-offset-1",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = "TabsContent";
diff --git a/apps/web/src/components/ui/test-utils.tsx b/apps/web/src/components/ui/test-utils.tsx
new file mode 100644
index 00000000..4025cfa5
--- /dev/null
+++ b/apps/web/src/components/ui/test-utils.tsx
@@ -0,0 +1,57 @@
+// Lightweight render helper for primitive tests. Built on React's own
+// `act` + `createRoot` so the design system test suite stays
+// dependency-free (no @testing-library/react). Each helper is small
+// enough to read in a single screen.
+
+import { flushSync } from "react-dom";
+import { type Root, createRoot } from "react-dom/client";
+
+// React 18+ requires consumers to opt-in to act() outside production. Vitest
+// + happy-dom doesn't set this for us, so set it once at module load.
+declare global {
+  // eslint-disable-next-line no-var
+  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
+}
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+export interface RenderResult {
+  container: HTMLDivElement;
+  root: Root;
+  unmount(): void;
+  rerender(node: React.ReactNode): void;
+}
+
+export function render(node: React.ReactNode): RenderResult {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  flushSync(() => {
+    root.render(node);
+  });
+  return {
+    container,
+    root,
+    unmount() {
+      flushSync(() => root.unmount());
+      container.remove();
+    },
+    rerender(next) {
+      flushSync(() => root.render(next));
+    },
+  };
+}
+
+export function fireClick(el: Element | null | undefined): void {
+  if (!el) throw new Error("fireClick: element is null");
+  flushSync(() => {
+    el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+  });
+}
+
+export function pressKey(el: Element | null | undefined, key: string): void {
+  if (!el) throw new Error("pressKey: element is null");
+  flushSync(() => {
+    el.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+    el.dispatchEvent(new KeyboardEvent("keyup", { key, bubbles: true, cancelable: true }));
+  });
+}
diff --git a/apps/web/src/components/ui/toast.test.tsx b/apps/web/src/components/ui/toast.test.tsx
new file mode 100644
index 00000000..6ad4133a
--- /dev/null
+++ b/apps/web/src/components/ui/toast.test.tsx
@@ -0,0 +1,83 @@
+// @vitest-environment happy-dom
+import { flushSync } from "react-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { fireClick, render } from "./test-utils.js";
+import { Toaster, getToastQueueLength, resetToastQueue, toast } from "./toast.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+  vi.useRealTimers();
+});
+
+beforeEach(() => {
+  resetToastQueue();
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Toast", () => {
+  it("renders enqueued toasts inside <Toaster />", () => {
+    mount(<Toaster />);
+    flushSync(() => {
+      toast({ title: "Saved", description: "Your changes are live." });
+    });
+    const region = document.querySelector('[data-component="toaster"]');
+    expect(region?.textContent).toContain("Saved");
+    expect(region?.textContent).toContain("Your changes are live.");
+  });
+
+  it("auto-dismisses after the configured duration", () => {
+    vi.useFakeTimers({ shouldAdvanceTime: false });
+    mount(<Toaster />);
+    flushSync(() => {
+      toast({ title: "Will go away" });
+    });
+    expect(getToastQueueLength()).toBe(1);
+    flushSync(() => {
+      vi.advanceTimersByTime(5_001);
+    });
+    expect(getToastQueueLength()).toBe(0);
+  });
+
+  it("renders danger variant with role=alert and non-critical variants with explicit role=status", () => {
+    mount(<Toaster />);
+    flushSync(() => {
+      toast({ title: "Boom", variant: "danger" });
+    });
+    const alert = document.querySelector('[role="alert"]');
+    expect(alert?.textContent).toContain("Boom");
+    flushSync(() => {
+      toast({ title: "Polite", variant: "success" });
+    });
+    // Find the status node (must be explicit, not implicit on <output>) so
+    // assistive tech that doesn't translate <output> → status still
+    // announces the toast.
+    const statusNodes = Array.from(document.querySelectorAll('[role="status"]'));
+    expect(statusNodes.some((n) => n.textContent?.includes("Polite"))).toBe(true);
+  });
+
+  it("dismisses via the close button", () => {
+    mount(<Toaster />);
+    flushSync(() => {
+      toast({ title: "Bye" });
+    });
+    expect(getToastQueueLength()).toBe(1);
+    const close = document.querySelector('[data-slot="toast-close"]');
+    fireClick(close);
+    expect(getToastQueueLength()).toBe(0);
+  });
+
+  it("caps the queue at the configured maximum", () => {
+    mount(<Toaster maxQueue={3} />);
+    flushSync(() => {
+      for (let i = 0; i < 5; i++) toast({ title: `t${i}` });
+    });
+    expect(getToastQueueLength()).toBe(3);
+  });
+});
diff --git a/apps/web/src/components/ui/toast.tsx b/apps/web/src/components/ui/toast.tsx
new file mode 100644
index 00000000..8e0cfa1d
--- /dev/null
+++ b/apps/web/src/components/ui/toast.tsx
@@ -0,0 +1,170 @@
+import { X } from "lucide-react";
+import { useEffect, useSyncExternalStore } from "react";
+import { cn } from "../../lib/utils.js";
+
+// Minimal in-process toast queue + <Toaster /> renderer. Backed by a module
+// store consumed via useSyncExternalStore so the queue is shared by every
+// <Toaster /> mounted on the page (the cockpit mounts exactly one).
+
+export type ToastVariant = "default" | "success" | "warning" | "danger";
+
+export interface ToastInput {
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  /** Auto-dismiss timeout in milliseconds. Defaults to 5000. Pass 0 to disable. */
+  durationMs?: number;
+}
+
+interface ToastItem extends ToastInput {
+  id: string;
+  variant: ToastVariant;
+  durationMs: number;
+}
+
+const listeners = new Set<() => void>();
+let queue: ToastItem[] = [];
+let maxQueue = 5;
+let counter = 0;
+const timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+function emit() {
+  for (const fn of listeners) fn();
+}
+
+function snapshot(): ToastItem[] {
+  return queue;
+}
+
+function subscribe(fn: () => void): () => void {
+  listeners.add(fn);
+  return () => {
+    listeners.delete(fn);
+  };
+}
+
+function nextId(): string {
+  counter += 1;
+  return `toast-${counter}`;
+}
+
+function dismiss(id: string) {
+  const timer = timers.get(id);
+  if (timer !== undefined) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  const before = queue.length;
+  queue = queue.filter((t) => t.id !== id);
+  if (queue.length !== before) emit();
+}
+
+export function toast(input: ToastInput): string {
+  const item: ToastItem = {
+    ...input,
+    id: nextId(),
+    variant: input.variant ?? "default",
+    durationMs: input.durationMs ?? 5000,
+  };
+  queue = [...queue, item];
+  if (queue.length > maxQueue) {
+    // Dropping older entries — clear their pending timers so the queue
+    // and timer maps stay in sync.
+    const dropped = queue.slice(0, queue.length - maxQueue);
+    for (const d of dropped) {
+      const t = timers.get(d.id);
+      if (t !== undefined) {
+        clearTimeout(t);
+        timers.delete(d.id);
+      }
+    }
+    queue = queue.slice(queue.length - maxQueue);
+  }
+  emit();
+  if (item.durationMs > 0) {
+    timers.set(
+      item.id,
+      setTimeout(() => dismiss(item.id), item.durationMs),
+    );
+  }
+  return item.id;
+}
+
+// Testing helpers — exported but not part of the public API surface.
+export function resetToastQueue() {
+  for (const t of timers.values()) clearTimeout(t);
+  timers.clear();
+  queue = [];
+  counter = 0;
+  emit();
+}
+
+export function getToastQueueLength(): number {
+  return queue.length;
+}
+
+export interface ToasterProps {
+  /** Maximum simultaneous toasts. Older entries are dropped past this cap. */
+  maxQueue?: number;
+}
+
+const variantClasses: Record<ToastVariant, string> = {
+  default: "border-[var(--c-line-2)] bg-[var(--c-card)] text-[var(--c-fg-1)]",
+  success: "border-[var(--c-ok)] bg-[var(--c-ok-bg)] text-[var(--c-fg-1)]",
+  warning: "border-[var(--c-warn)] bg-[var(--c-warn-bg)] text-[var(--c-fg-1)]",
+  danger: "border-[var(--c-bad)] bg-[var(--c-bad-bg)] text-[var(--c-fg-1)]",
+};
+
+export function Toaster({ maxQueue: max }: ToasterProps = {}) {
+  // Apply the cap as an effect, not during render — the module-level
+  // `maxQueue` is a singleton across every <Toaster /> on the page, and
+  // assigning during render would mutate it on StrictMode double-render or
+  // suspense retry. The cockpit mounts exactly one <Toaster /> at the
+  // root, so the singleton contract is fine; this guard just keeps the
+  // render path side-effect-free.
+  useEffect(() => {
+    if (max !== undefined) maxQueue = max;
+  }, [max]);
+  const items = useSyncExternalStore(subscribe, snapshot, snapshot);
+  return (
+    <div
+      data-component="toaster"
+      className="pointer-events-none fixed bottom-4 right-4 z-[100] flex max-w-sm flex-col items-end gap-2"
+    >
+      {items.map((item) => (
+        <ToastItemRow key={item.id} item={item} onDismiss={() => dismiss(item.id)} />
+      ))}
+    </div>
+  );
+}
+
+function ToastItemRow({ item, onDismiss }: { item: ToastItem; onDismiss: () => void }) {
+  // role="status" for non-critical announcements (polite live region),
+  // role="alert" for danger (assertive live region). Setting role
+  // explicitly even on the implicit-status <output> element avoids relying
+  // on assistive tech that might not translate <output> → status.
+  const role = item.variant === "danger" ? "alert" : "status";
+  return (
+    <output
+      role={role}
+      className={cn(
+        "pointer-events-auto flex w-full items-start gap-3 rounded-[10px] border px-3 py-2 shadow-[var(--sh-2)]",
+        variantClasses[item.variant],
+      )}
+    >
+      <div className="flex-1">
+        <div className="text-sm font-semibold">{item.title}</div>
+        {item.description ? <div className="mt-0.5 text-xs text-[var(--c-fg-3)]">{item.description}</div> : null}
+      </div>
+      <button
+        type="button"
+        data-slot="toast-close"
+        aria-label="Dismiss"
+        onClick={onDismiss}
+        className="-mr-1 -mt-0.5 inline-grid h-5 w-5 place-items-center rounded-md text-[var(--c-fg-3)] transition-colors hover:bg-[color-mix(in_srgb,CanvasText_7%,transparent)] hover:text-[var(--c-fg-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-action)]"
+      >
+        <X size={12} />
+      </button>
+    </output>
+  );
+}
diff --git a/apps/web/src/components/ui/tooltip.test.tsx b/apps/web/src/components/ui/tooltip.test.tsx
new file mode 100644
index 00000000..d678f0c7
--- /dev/null
+++ b/apps/web/src/components/ui/tooltip.test.tsx
@@ -0,0 +1,45 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { render } from "./test-utils.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("Tooltip", () => {
+  it("renders the trigger and keeps the tooltip content hidden initially", () => {
+    const { container } = mount(
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Helpful</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    expect(container.textContent).toContain("Hover me");
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+
+  it("supports defaultOpen so it renders the tooltip body with role=tooltip", () => {
+    mount(
+      <TooltipProvider delayDuration={0}>
+        <Tooltip defaultOpen>
+          <TooltipTrigger>x</TooltipTrigger>
+          <TooltipContent>Body</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    const tip = document.querySelector('[role="tooltip"]');
+    expect(tip).not.toBeNull();
+    expect(tip?.textContent).toContain("Body");
+  });
+});
diff --git a/apps/web/src/components/ui/tooltip.tsx b/apps/web/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..d284a926
--- /dev/null
+++ b/apps/web/src/components/ui/tooltip.tsx
@@ -0,0 +1,41 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+// One TooltipProvider is mounted at the cockpit root (apps/web/src/main.tsx)
+// with cockpit-tuned defaults: delayDuration=250 (faster than Radix's 700ms
+// default — matches B.8 #3 "calm, dense, premium, operational") and
+// skipDelayDuration=100 so once one tooltip is shown the dense cluster on
+// the inspector / chrome stays instantly responsive.
+export const COCKPIT_TOOLTIP_DELAY_MS = 250;
+export const COCKPIT_TOOLTIP_SKIP_DELAY_MS = 100;
+
+export const TooltipProvider = ({
+  delayDuration = COCKPIT_TOOLTIP_DELAY_MS,
+  skipDelayDuration = COCKPIT_TOOLTIP_SKIP_DELAY_MS,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (
+  <TooltipPrimitive.Provider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration} {...props} />
+);
+
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+export const TooltipPortal = TooltipPrimitive.Portal;
+
+export const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 rounded-md border border-[var(--c-line-2)] bg-[var(--c-dark)] px-2 py-1 text-xs text-[var(--c-on-dark)] shadow-[var(--sh-2)]",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = "TooltipContent";
diff --git a/apps/web/src/design-system/README.md b/apps/web/src/design-system/README.md
new file mode 100644
index 00000000..5c43c107
--- /dev/null
+++ b/apps/web/src/design-system/README.md
@@ -0,0 +1,101 @@
+# Citadel cockpit design system
+
+A small, dependency-light primitive layer that the cockpit composes from.
+Three concerns live here: **tokens** (`tokens.css`), **primitives**
+(`apps/web/src/components/ui/`), and a **dev-only showcase route**
+(`apps/web/src/routes/design-system/`).
+
+## Tokens
+
+`tokens.css` is the single canonical source for every CSS custom property
+the cockpit uses. `styles.css` imports it once at the top of the file;
+component CSS reads tokens via `var(--token-name)`.
+
+The companion `tokens.inventory.txt` enumerates every token the cockpit
+references. `tokens.test.ts` asserts the inventory and the CSS file stay in
+lockstep: the `:root` block must declare every inventoried token, every
+token the dark block redeclares must exist in the inventory, and the
+OS-driven dark fallback block must mirror the explicit dark block exactly.
+
+### Cascade
+
+```
+:root                                                = light defaults
+:root[data-theme="dark"]                             = explicit dark
+:root[data-theme="light"]                            = explicit light (no overrides needed)
+@media (prefers-color-scheme: dark)
+  :root:not([data-theme="light"]):not([data-theme="dark"])
+                                                     = OS-driven dark when no theme picked
+```
+
+Why no `prefers-color-scheme: light` block: every token is reachable via
+explicit `data-theme` selectors. happy-dom's CSS engine doesn't simulate
+`prefers-color-scheme` reliably, so the token test would have a coverage
+gap; folding the light fallback into `:root` closes that gap. The visual
+cascade for OS-driven theme switching is verified by
+`e2e/theme-audit.spec.ts` in real browsers.
+
+### Adding a new token
+
+1. Add the token + value to **all three** blocks of `tokens.css` (`:root`,
+   `:root[data-theme="dark"]`, and the OS-dark `@media` block).
+2. Append the name to `tokens.inventory.txt` in alphabetical position.
+3. Run `pnpm vitest run apps/web/src/design-system/tokens.test.ts`. If it
+   fails, the token is missing from one of the blocks or the inventory.
+
+### Component-local tokens
+
+Layout helpers defined inside a single component CSS file (e.g.
+`--right-slot` in `cockpit-extras.css`, `--set-font-serif` in
+`settings-ia.css`) are **not** design-system tokens. They live with their
+component and never enter `tokens.inventory.txt`.
+
+## Primitives
+
+React primitives live under `apps/web/src/components/ui/`:
+
+| Primitive | Variants | Backed by |
+|---|---|---|
+| `Button` | default, secondary, ghost, destructive, link; sizes `sm` / `default` / `lg` / `icon`; `loading` state | CVA + Tailwind |
+| `Badge` | neutral, ready, blocked, info, warn, merged, neutral-strong; optional `dot` | CVA + Tailwind |
+| `Card`, `Panel` | Panel + Header/Body/Footer; uppercase compact label slot | CVA + Tailwind |
+| `Input`, `Textarea`, `Select`, `Label`, `HelpText`, `FormField` | filled, empty, error, disabled | Native form controls |
+| `Tabs` | compact pill style | `@radix-ui/react-tabs` |
+| `Dialog` | center-aligned, backdrop-dismiss, Esc-close, focus-trap | `@radix-ui/react-dialog` |
+| `Tooltip` | configured root provider (see below) | `@radix-ui/react-tooltip` |
+| `Chip` | leading icon slot + optional close X | composes `Badge` |
+| `IconButton` | TS-enforced `aria-label`; excludes `asChild` | composes `Button` |
+| `EmptyState` | icon + heading + description + optional CTA | composed |
+| `Skeleton` | shimmer placeholder, aria-busy + role=status | composed |
+| `Toast` | `<Toaster />` region + `useToast()` hook; variants default / success / warning / danger | custom (`useSyncExternalStore`) |
+
+All primitives:
+
+- Read colors from tokens — no hard-coded hex values in component files.
+- Expose a `className` escape hatch merged via `cn(...)`.
+- Render a `focus-visible:ring-2` focus indicator (single consistent focus
+  treatment across the cockpit).
+
+### TooltipProvider defaults
+
+Mount **one** `TooltipProvider` at the cockpit root (`apps/web/src/main.tsx`)
+with cockpit-tuned defaults:
+
+```tsx
+<TooltipProvider delayDuration={250} skipDelayDuration={100}>
+  ...
+</TooltipProvider>
+```
+
+`delayDuration={250}` is faster than Radix's 700 ms default — matches
+**B.8 #3** ("calm, dense, premium, operational"). `skipDelayDuration={100}`
+keeps the dense tooltip cluster on the inspector and chrome instantly
+responsive once the first tooltip has shown.
+
+## Dev-only showcase
+
+The `/design-system` route renders every primitive's variants in both
+themes. The route lives under `apps/web/src/routes/design-system/` and is
+registered behind a static `if (import.meta.env.DEV) { ... }` guard, which
+Vite tree-shakes out of production builds. A grep verification step in
+`make check` confirms the chunk is absent from `dist/`.
diff --git a/apps/web/src/design-system/index.ts b/apps/web/src/design-system/index.ts
new file mode 100644
index 00000000..53a37e96
--- /dev/null
+++ b/apps/web/src/design-system/index.ts
@@ -0,0 +1,49 @@
+// Citadel cockpit design system — barrel export.
+//
+// Primitives are added here as each commit lands. See README.md for the
+// full inventory. Tokens are imported via tokens.css (no JS surface).
+
+export { Badge } from "../components/ui/badge.js";
+export type { BadgeProps } from "../components/ui/badge.js";
+export { Button } from "../components/ui/button.js";
+export type { ButtonProps } from "../components/ui/button.js";
+export { Card } from "../components/ui/card.js";
+export type { CardProps } from "../components/ui/card.js";
+export { Chip } from "../components/ui/chip.js";
+export type { ChipProps } from "../components/ui/chip.js";
+export { EmptyState } from "../components/ui/empty-state.js";
+export type { EmptyStateProps } from "../components/ui/empty-state.js";
+export { FormField } from "../components/ui/form-field.js";
+export type { FormFieldProps } from "../components/ui/form-field.js";
+export { IconButton } from "../components/ui/icon-button.js";
+export type { IconButtonProps } from "../components/ui/icon-button.js";
+export { Input, Textarea } from "../components/ui/input.js";
+export { HelpText, Label } from "../components/ui/label.js";
+export { Panel, PanelBody, PanelFooter, PanelHeader, PanelTitle } from "../components/ui/panel.js";
+export { Select } from "../components/ui/select.js";
+export { Skeleton } from "../components/ui/skeleton.js";
+export type { SkeletonProps } from "../components/ui/skeleton.js";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "../components/ui/dialog.js";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs.js";
+export { Toaster, toast } from "../components/ui/toast.js";
+export type { ToastInput, ToastVariant, ToasterProps } from "../components/ui/toast.js";
+export {
+  COCKPIT_TOOLTIP_DELAY_MS,
+  COCKPIT_TOOLTIP_SKIP_DELAY_MS,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../components/ui/tooltip.js";
diff --git a/apps/web/src/design-system/tokens.css b/apps/web/src/design-system/tokens.css
new file mode 100644
index 00000000..29d0f811
--- /dev/null
+++ b/apps/web/src/design-system/tokens.css
@@ -0,0 +1,237 @@
+/*
+ * Citadel cockpit design tokens.
+ *
+ * Single canonical source for every CSS custom property the cockpit uses.
+ * `apps/web/src/styles.css` imports this file once; component CSS reads
+ * tokens via `var(...)`. The companion `tokens.inventory.txt` enumerates
+ * every token currently referenced — `tokens.test.ts` enforces that the
+ * inventory and these definitions stay in lockstep.
+ *
+ * Cascade:
+ *   :root                                      = light defaults (also the value used by tests).
+ *   :root[data-theme="dark"]                   = explicit dark theme.
+ *   :root[data-theme="light"]                  = explicit light (no extra overrides needed).
+ *   @media (prefers-color-scheme: dark)        = OS-driven dark when no theme picked.
+ *
+ * All tokens are reachable via explicit `data-theme` blocks so happy-dom
+ * tests (which do not simulate prefers-color-scheme) can exercise both
+ * themes.
+ */
+
+:root {
+  color-scheme: light dark;
+
+  /* Typography */
+  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-serif: "Geist", ui-serif, Georgia, serif;
+
+  font-family: var(--font-sans);
+  font-feature-settings: "ss01", "cv11", "ss02";
+  letter-spacing: -0.005em;
+  background: #ece7da;
+  color: #1a1814;
+
+  /* Surfaces — warm cream palette */
+  --c-canvas: #ece7da;
+  --c-app: #efeae0;
+  --c-surface: #f0ebe2;
+  --c-elev: #f5f1e8;
+  --c-card: #faf6ee;
+
+  /* Borders */
+  --c-line-1: rgba(36, 28, 14, 0.06);
+  --c-line-2: rgba(36, 28, 14, 0.1);
+  --c-line-3: rgba(36, 28, 14, 0.16);
+
+  /* Foreground — neutral text scale, 1 = strongest */
+  --c-fg-1: #1a1814;
+  --c-fg-2: #4a463e;
+  --c-fg-3: #6f695d;
+  --c-fg-4: #9c9485;
+  --c-fg-5: #c0b8a8;
+
+  /* Inverted (dark-on-light) accent surfaces */
+  --c-dark: #14171f;
+  --c-dark-2: #1f232e;
+  --c-on-dark: #f2eee2;
+  --c-on-dark-d: #9da0a8;
+
+  /* Status — OKLCH so light/dark stay perceptually paired */
+  --c-ok: oklch(58% 0.14 145);
+  --c-ok-bg: oklch(63% 0.1 150 / 0.14);
+  --c-warn: oklch(68% 0.13 70);
+  --c-warn-bg: oklch(68% 0.13 70 / 0.14);
+  --c-bad: oklch(58% 0.16 25);
+  --c-bad-bg: oklch(58% 0.16 25 / 0.14);
+  --c-info: oklch(58% 0.1 240);
+  --c-info-bg: oklch(58% 0.1 240 / 0.14);
+
+  /* Elevation shadows */
+  --sh-1: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 1px 1px rgba(20, 12, 0, 0.03);
+  --sh-2: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(20, 12, 0, 0.05), 0 6px 18px -8px rgba(20, 12, 0, 0.12);
+  --sh-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(20, 12, 0, 0.04), 0 1px 0 rgba(20, 12, 0, 0.04);
+
+  /* Legacy aliases — preserved so bespoke CSS keeps rendering unchanged */
+  --color-action: #14171f;
+  --color-action-hover: #1f232e;
+  --color-accent: #14171f;
+  --color-success: oklch(58% 0.14 145);
+  --color-warning: oklch(60% 0.13 70);
+  --color-danger: oklch(58% 0.16 25);
+  --color-purple: oklch(55% 0.18 295);
+  --color-merged: oklch(55% 0.18 295);
+  --surface: var(--c-canvas);
+  --surface-strong: #e3dccc;
+  --panel: var(--c-surface);
+  --panel-elevated: var(--c-elev);
+  --panel-strong: var(--c-elev);
+  --line: var(--c-line-2);
+  --line-strong: var(--c-line-3);
+  --muted: var(--c-fg-3);
+  --text-muted: var(--c-fg-3);
+  --topbar-bg: var(--c-app);
+  --topbar-fg: var(--c-fg-1);
+  --topbar-line: var(--c-line-2);
+  --shadow-color: 36 28 14;
+  --overlay-bg: rgba(36, 28, 14, 0.45);
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  background: #15130f;
+  color: #f0ebdd;
+
+  --c-canvas: #15130f;
+  --c-app: #1a1814;
+  --c-surface: #201d17;
+  --c-elev: #26221b;
+  --c-card: #2b2620;
+
+  --c-line-1: rgba(255, 245, 220, 0.05);
+  --c-line-2: rgba(255, 245, 220, 0.08);
+  --c-line-3: rgba(255, 245, 220, 0.14);
+
+  --c-fg-1: #f0ebdd;
+  --c-fg-2: #c8c2b0;
+  --c-fg-3: #948d7b;
+  --c-fg-4: #6b6557;
+  --c-fg-5: #4a463c;
+
+  --c-dark: #f0ebdd;
+  --c-dark-2: #e1dbc8;
+  --c-on-dark: #15130f;
+  --c-on-dark-d: #6b6557;
+
+  --c-ok: oklch(72% 0.14 145);
+  --c-ok-bg: oklch(60% 0.1 145 / 0.18);
+  --c-warn: oklch(78% 0.14 70);
+  --c-warn-bg: oklch(60% 0.13 70 / 0.18);
+  --c-bad: oklch(72% 0.18 25);
+  --c-bad-bg: oklch(60% 0.16 25 / 0.18);
+  --c-info: oklch(72% 0.12 240);
+  --c-info-bg: oklch(60% 0.1 240 / 0.18);
+
+  --sh-1: 0 1px 0 rgba(255, 245, 220, 0.04) inset, 0 1px 1px rgba(0, 0, 0, 0.4);
+  --sh-2: 0 1px 0 rgba(255, 245, 220, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
+  --sh-card: 0 1px 0 rgba(255, 245, 220, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
+
+  --color-action: #f0ebdd;
+  --color-action-hover: #ffffff;
+  --color-accent: #f0ebdd;
+  --color-success: oklch(72% 0.14 145);
+  --color-warning: oklch(78% 0.14 70);
+  --color-danger: oklch(72% 0.18 25);
+  --color-purple: oklch(72% 0.18 295);
+  --color-merged: oklch(72% 0.18 295);
+  --surface: var(--c-canvas);
+  --surface-strong: var(--c-surface);
+  --panel: var(--c-surface);
+  --panel-elevated: var(--c-elev);
+  --panel-strong: var(--c-elev);
+  --line: var(--c-line-2);
+  --line-strong: var(--c-line-3);
+  --muted: var(--c-fg-3);
+  --text-muted: var(--c-fg-3);
+  --topbar-bg: var(--c-app);
+  --topbar-fg: var(--c-fg-1);
+  --topbar-line: var(--c-line-2);
+  --shadow-color: 0 0 0;
+  --overlay-bg: rgba(0, 0, 0, 0.55);
+}
+
+/* Explicit light theme — :root already supplies the values, this block
+ * exists so an explicit data-theme="light" wins over the OS-dark override
+ * below. */
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
+/* OS-driven dark mode for users who have not picked a theme. The selector
+ * matches roots with NO data-theme attribute (or any value other than the
+ * two explicit ones); the dark token values mirror :root[data-theme="dark"]
+ * above. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) {
+    color-scheme: dark;
+    background: #15130f;
+    color: #f0ebdd;
+
+    --c-canvas: #15130f;
+    --c-app: #1a1814;
+    --c-surface: #201d17;
+    --c-elev: #26221b;
+    --c-card: #2b2620;
+
+    --c-line-1: rgba(255, 245, 220, 0.05);
+    --c-line-2: rgba(255, 245, 220, 0.08);
+    --c-line-3: rgba(255, 245, 220, 0.14);
+
+    --c-fg-1: #f0ebdd;
+    --c-fg-2: #c8c2b0;
+    --c-fg-3: #948d7b;
+    --c-fg-4: #6b6557;
+    --c-fg-5: #4a463c;
+
+    --c-dark: #f0ebdd;
+    --c-dark-2: #e1dbc8;
+    --c-on-dark: #15130f;
+    --c-on-dark-d: #6b6557;
+
+    --c-ok: oklch(72% 0.14 145);
+    --c-ok-bg: oklch(60% 0.1 145 / 0.18);
+    --c-warn: oklch(78% 0.14 70);
+    --c-warn-bg: oklch(60% 0.13 70 / 0.18);
+    --c-bad: oklch(72% 0.18 25);
+    --c-bad-bg: oklch(60% 0.16 25 / 0.18);
+    --c-info: oklch(72% 0.12 240);
+    --c-info-bg: oklch(60% 0.1 240 / 0.18);
+
+    --sh-1: 0 1px 0 rgba(255, 245, 220, 0.04) inset, 0 1px 1px rgba(0, 0, 0, 0.4);
+    --sh-2: 0 1px 0 rgba(255, 245, 220, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
+    --sh-card: 0 1px 0 rgba(255, 245, 220, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
+
+    --color-action: #f0ebdd;
+    --color-action-hover: #ffffff;
+    --color-accent: #f0ebdd;
+    --color-success: oklch(72% 0.14 145);
+    --color-warning: oklch(78% 0.14 70);
+    --color-danger: oklch(72% 0.18 25);
+    --color-purple: oklch(72% 0.18 295);
+    --color-merged: oklch(72% 0.18 295);
+    --surface: var(--c-canvas);
+    --surface-strong: var(--c-surface);
+    --panel: var(--c-surface);
+    --panel-elevated: var(--c-elev);
+    --panel-strong: var(--c-elev);
+    --line: var(--c-line-2);
+    --line-strong: var(--c-line-3);
+    --muted: var(--c-fg-3);
+    --text-muted: var(--c-fg-3);
+    --topbar-bg: var(--c-app);
+    --topbar-fg: var(--c-fg-1);
+    --topbar-line: var(--c-line-2);
+    --shadow-color: 0 0 0;
+    --overlay-bg: rgba(0, 0, 0, 0.55);
+  }
+}
diff --git a/apps/web/src/design-system/tokens.inventory.txt b/apps/web/src/design-system/tokens.inventory.txt
new file mode 100644
index 00000000..00cdb7b5
--- /dev/null
+++ b/apps/web/src/design-system/tokens.inventory.txt
@@ -0,0 +1,72 @@
+# Citadel design-system token inventory.
+#
+# Source of truth for `tokens.test.ts` — every token listed below must
+# resolve to a non-empty value in both `data-theme="light"` and
+# `data-theme="dark"` via apps/web/src/design-system/tokens.css.
+#
+# Excluded by design: component-local CSS variables defined and consumed
+# inside the same component CSS file (e.g. `--right-slot` in
+# cockpit-extras.css, `--set-font-serif` in settings-ia.css). These are
+# layout helpers, not cross-component design tokens.
+#
+# Regenerate the candidate list with:
+#   grep -rohE "var\(--[a-z0-9-]+\)" apps/web/src --include="*.css" --include="*.tsx" \
+#     | sed -E 's/^var\(//; s/\)$//' | sort -u
+# Then remove component-local entries before committing.
+#
+# Also included: documented-but-currently-unused legacy aliases that the
+# token surface contract preserves so future consumers can reach them
+# (`--sh-2`, `--color-purple`, `--topbar-fg`, `--topbar-line`).
+--c-app
+--c-bad
+--c-bad-bg
+--c-canvas
+--c-card
+--c-dark
+--c-dark-2
+--c-elev
+--c-fg-1
+--c-fg-2
+--c-fg-3
+--c-fg-4
+--c-fg-5
+--c-info
+--c-info-bg
+--c-line-1
+--c-line-2
+--c-line-3
+--c-ok
+--c-ok-bg
+--c-on-dark
+--c-on-dark-d
+--c-surface
+--c-warn
+--c-warn-bg
+--color-accent
+--color-action
+--color-action-hover
+--color-danger
+--color-merged
+--color-purple
+--color-success
+--color-warning
+--font-mono
+--font-sans
+--font-serif
+--line
+--line-strong
+--muted
+--overlay-bg
+--panel
+--panel-elevated
+--panel-strong
+--sh-1
+--sh-2
+--sh-card
+--shadow-color
+--surface
+--surface-strong
+--text-muted
+--topbar-bg
+--topbar-fg
+--topbar-line
diff --git a/apps/web/src/design-system/tokens.test.ts b/apps/web/src/design-system/tokens.test.ts
new file mode 100644
index 00000000..6b1cfae2
--- /dev/null
+++ b/apps/web/src/design-system/tokens.test.ts
@@ -0,0 +1,209 @@
+// @vitest-environment node
+//
+// Token catalog verification. Two complementary mechanisms:
+//
+// 1. CSS source parsing — walks `tokens.css` and asserts every inventoried
+//    token is declared inside both the `:root` (light) and
+//    `:root[data-theme="dark"]` blocks. This is the load-bearing assertion
+//    because happy-dom's CSS engine has limited selector support (it does
+//    not reliably distinguish `:root[data-theme="X"]` selectors or `:not()`
+//    in `@media`), so we cannot rely on `getComputedStyle` to verify the
+//    cascade. The actual visual cascade is verified by
+//    `e2e/theme-audit.spec.ts` in real browsers.
+//
+// 2. Runtime resolve — injects `tokens.css` into happy-dom and asserts every
+//    inventoried token resolves to a non-empty value. Catches catastrophic
+//    syntax errors that would leave tokens unparseable.
+//
+// This is a vitest test that runs in Node, so it uses node:fs / node:path
+// to read the CSS + inventory off disk. The architecture-boundary script
+// excludes *.test.ts files from the `apps/web` Node-import ban (tests
+// always run in Node).
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { Window } from "happy-dom";
+import { afterEach, beforeAll, beforeEach, describe, expect, it } from "vitest";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const tokensCssPath = path.join(here, "tokens.css");
+const inventoryPath = path.join(here, "tokens.inventory.txt");
+
+function loadInventory(): string[] {
+  const raw = fs.readFileSync(inventoryPath, "utf-8");
+  return raw
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0 && !line.startsWith("#"));
+}
+
+function loadTokensCss(): string {
+  return fs.readFileSync(tokensCssPath, "utf-8");
+}
+
+// Extracts the body of a CSS rule whose selector starts with `selectorPrefix`.
+// Strips comments first so a selector mentioned in a `/* ... */` block does
+// not false-match. After finding the prefix, walks forward past additional
+// selector characters and any `,`-grouped selectors until it reaches `{`,
+// then counts braces to find the matching `}`.
+function extractRuleBody(css: string, selectorPrefix: string): string | null {
+  const noComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  let searchFrom = 0;
+  while (searchFrom < noComments.length) {
+    const idx = noComments.indexOf(selectorPrefix, searchFrom);
+    if (idx === -1) return null;
+    // Walk forward to find the opening brace, allowing further selector
+    // syntax (brackets, equals, quoted attrs, commas, whitespace, etc.).
+    // If we hit `;` before `{`, this prefix was inside a declaration, not a
+    // selector — skip past it and keep searching.
+    let cursor = idx + selectorPrefix.length;
+    let foundBrace = -1;
+    while (cursor < noComments.length) {
+      const ch = noComments[cursor];
+      if (ch === "{") {
+        foundBrace = cursor;
+        break;
+      }
+      if (ch === ";") break;
+      cursor++;
+    }
+    if (foundBrace === -1) {
+      searchFrom = cursor + 1;
+      continue;
+    }
+    let depth = 1;
+    let walk = foundBrace + 1;
+    while (walk < noComments.length && depth > 0) {
+      const ch = noComments[walk];
+      if (ch === "{") depth++;
+      else if (ch === "}") depth--;
+      walk++;
+    }
+    if (depth !== 0) return null;
+    return noComments.slice(foundBrace + 1, walk - 1);
+  }
+  return null;
+}
+
+function tokensDeclaredIn(body: string): Set<string> {
+  const re = /(--[a-z0-9-]+)\s*:/gi;
+  const found = new Set<string>();
+  for (const m of body.matchAll(re)) {
+    const name = m[1];
+    if (name) found.add(name);
+  }
+  return found;
+}
+
+function injectTokens(css: string): HTMLStyleElement {
+  const styleEl = document.createElement("style");
+  styleEl.setAttribute("data-test", "tokens");
+  styleEl.textContent = css;
+  document.head.appendChild(styleEl);
+  return styleEl;
+}
+
+function readToken(name: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+
+describe("design-system tokens.css", () => {
+  let tokens: string[];
+  let css: string;
+  let styleEl: HTMLStyleElement;
+  let win: Window;
+
+  beforeAll(() => {
+    tokens = loadInventory();
+    expect(tokens.length).toBeGreaterThan(40);
+    css = loadTokensCss();
+  });
+
+  beforeEach(() => {
+    win = new Window();
+    Object.defineProperty(globalThis, "window", { configurable: true, value: win });
+    Object.defineProperty(globalThis, "document", { configurable: true, value: win.document });
+    Object.defineProperty(globalThis, "getComputedStyle", {
+      configurable: true,
+      value: win.getComputedStyle.bind(win),
+    });
+    styleEl = injectTokens(css);
+  });
+
+  afterEach(() => {
+    styleEl.remove();
+    delete document.documentElement.dataset.theme;
+    Reflect.deleteProperty(globalThis, "getComputedStyle");
+    Reflect.deleteProperty(globalThis, "document");
+    Reflect.deleteProperty(globalThis, "window");
+  });
+
+  function requireBody(selector: string, label: string): string {
+    const body = extractRuleBody(css, selector);
+    if (body === null) throw new Error(`${label} block not found in tokens.css`);
+    return body;
+  }
+
+  it("declares every inventoried token in the :root (light) block", () => {
+    const lightBody = requireBody(":root", ":root");
+    const declared = tokensDeclaredIn(lightBody);
+    const missing = tokens.filter((t) => !declared.has(t));
+    expect(missing).toEqual([]);
+  });
+
+  it('redeclares every theme-dependent token in the :root[data-theme="dark"] block', () => {
+    // Not every inventoried token is theme-dependent (e.g. font-sans is the
+    // same in both themes and lives only in :root). The dark block must
+    // redeclare every token that has a different value in dark mode — and
+    // those are precisely the tokens currently inside the dark block. So
+    // this test is satisfied if the dark block exists, contains a healthy
+    // subset of the inventory, and every token it declares is a real
+    // inventoried name (catches typos in token names).
+    const darkBody = requireBody(':root[data-theme="dark"]', "data-theme=dark");
+    const declared = tokensDeclaredIn(darkBody);
+    expect(declared.size).toBeGreaterThan(25);
+    const inventory = new Set(tokens);
+    const orphans = [...declared].filter((t) => !inventory.has(t));
+    expect(orphans, "dark block declares tokens missing from inventory").toEqual([]);
+  });
+
+  it("OS-driven dark fallback block mirrors every token the explicit dark block overrides", () => {
+    // Auto-mode block keeps the cockpit dark for users who have not picked a
+    // theme but whose OS prefers dark. Whatever the explicit
+    // `:root[data-theme="dark"]` block redeclares must also live here, so OS
+    // dark mode matches explicit dark mode exactly.
+    const darkBody = requireBody(':root[data-theme="dark"]', "explicit dark");
+    const autoBody = requireBody(':root:not([data-theme="light"]):not([data-theme="dark"])', "OS-dark fallback");
+    const darkDeclared = tokensDeclaredIn(darkBody);
+    const autoDeclared = tokensDeclaredIn(autoBody);
+    const missingFromAuto = [...darkDeclared].filter((t) => !autoDeclared.has(t));
+    expect(missingFromAuto).toEqual([]);
+  });
+
+  it("does not declare any tokens outside the data-theme blocks (no prefers-color-scheme: light leak)", () => {
+    // Per the consolidation plan, no token may live exclusively inside a
+    // `@media (prefers-color-scheme: light)` block — those were folded into
+    // the explicit :root defaults during Step 2 so tests can reach every
+    // token without OS-level theme simulation.
+    expect(css).not.toMatch(/@media\s*\(\s*prefers-color-scheme\s*:\s*light\s*\)/);
+  });
+
+  it("declares the canonical surfaces, foregrounds, and status tokens", () => {
+    // Spot-check a few load-bearing tokens — fast canary for an empty file
+    // or a wholesale regression.
+    const lightBody = extractRuleBody(css, ":root") ?? "";
+    expect(lightBody).toMatch(/--c-canvas:\s*#/);
+    expect(lightBody).toMatch(/--c-fg-1:\s*#/);
+    expect(lightBody).toMatch(/--c-ok:\s*oklch/);
+    expect(lightBody).toMatch(/--color-action:\s*#/);
+  });
+
+  it("resolves every inventoried token to a non-empty value at runtime", () => {
+    // Sanity check that the CSS parses and applies — happy-dom's selector
+    // support is limited (it cannot reliably distinguish data-theme blocks),
+    // so this confirms only that some declaration of each token is reachable.
+    // The per-theme value verification lives in `e2e/theme-audit.spec.ts`.
+    const missing = tokens.filter((token) => readToken(token).length === 0);
+    expect(missing).toEqual([]);
+  });
+});
diff --git a/apps/web/src/inspector-tabs.test.tsx b/apps/web/src/inspector-tabs.test.tsx
new file mode 100644
index 00000000..4f17afbe
--- /dev/null
+++ b/apps/web/src/inspector-tabs.test.tsx
@@ -0,0 +1,68 @@
+// @vitest-environment happy-dom
+//
+// Pins the contracts that inspector-deploy.css and inspector-meta.css
+// depend on after the Tabs primitive migration:
+//   - `.inspector-tabs` element carries `data-active="<tab>"` at the LIST
+//     wrapper level (not the trigger). Load-bearing for the indicator
+//     animation styled at inspector-deploy.css:94.
+//   - The active trigger gets `data-state="active"` from Radix.
+//   - The Diff trigger renders a `.inspector-tab-count` only when the
+//     file count is positive.
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { render } from "./components/ui/test-utils.js";
+import { InspectorTabs } from "./inspector-tabs.js";
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+function mount(node: React.ReactNode) {
+  const result = render(node);
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("InspectorTabs (Tabs primitive migration)", () => {
+  it("renders data-active on the .inspector-tabs wrapper so CSS selectors match", () => {
+    const { container } = mount(
+      <InspectorTabs tab="stats" onTabChange={() => {}} fileCount={0} onCollapse={() => {}} />,
+    );
+    const list = container.querySelector(".inspector-tabs");
+    expect(list).not.toBeNull();
+    expect(list?.getAttribute("data-active")).toBe("stats");
+    expect(list?.getAttribute("role")).toBe("tablist");
+  });
+
+  it("marks the active trigger with data-state=active and the others inactive", () => {
+    const { container } = mount(
+      <InspectorTabs tab="diff" onTabChange={() => {}} fileCount={0} onCollapse={() => {}} />,
+    );
+    const triggers = Array.from(container.querySelectorAll('[role="tab"]'));
+    const stats = triggers.find((t) => t.textContent?.includes("Stats"));
+    const diff = triggers.find((t) => t.textContent?.includes("Diff"));
+    expect(stats?.getAttribute("data-state")).toBe("inactive");
+    expect(diff?.getAttribute("data-state")).toBe("active");
+  });
+
+  it("renders the file-count badge only when fileCount > 0", () => {
+    const { container, rerender } = mount(
+      <InspectorTabs tab="diff" onTabChange={() => {}} fileCount={3} onCollapse={() => {}} />,
+    );
+    expect(container.querySelector(".inspector-tab-count")?.textContent).toBe("3");
+    rerender(<InspectorTabs tab="diff" onTabChange={() => {}} fileCount={0} onCollapse={() => {}} />);
+    expect(container.querySelector(".inspector-tab-count")).toBeNull();
+  });
+
+  it("calls onCollapse when the collapse button is clicked", () => {
+    const onCollapse = vi.fn();
+    const { container } = mount(
+      <InspectorTabs tab="stats" onTabChange={() => {}} fileCount={null} onCollapse={onCollapse} />,
+    );
+    const collapse = container.querySelector(".inspector-tabs-collapse") as HTMLButtonElement | null;
+    collapse?.click();
+    expect(onCollapse).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/web/src/inspector-tabs.tsx b/apps/web/src/inspector-tabs.tsx
new file mode 100644
index 00000000..48e0ada6
--- /dev/null
+++ b/apps/web/src/inspector-tabs.tsx
@@ -0,0 +1,55 @@
+import { X } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger } from "./components/ui/tabs.js";
+
+export type InspectorTab = "stats" | "diff";
+
+// Inspector tab strip extracted from inspector.tsx so the parent file
+// stays under the 800-line `check:size` cap. Uses the Radix-backed Tabs
+// primitive but renders only the trigger row — the actual panel content
+// is conditionally rendered by the caller (inspector.tsx) inside its
+// existing `<div className="column-body">`, which keeps the scroll
+// container intact.
+//
+// CRITICAL: `data-active={tab}` MUST be on the TabsList wrapper because
+// `inspector-deploy.css:94` styles `.inspector-tabs[data-active="<tab>"]`
+// — see plan §Migration: Inspector tabs.
+export interface InspectorTabsProps {
+  tab: InspectorTab;
+  onTabChange: (next: InspectorTab) => void;
+  fileCount: number | null;
+  onCollapse: () => void;
+}
+
+export function InspectorTabs({ tab, onTabChange, fileCount, onCollapse }: InspectorTabsProps) {
+  return (
+    <Tabs value={tab} onValueChange={(next) => onTabChange(next as InspectorTab)}>
+      <TabsList className="inspector-tabs" data-active={tab}>
+        <TabsTrigger
+          value="stats"
+          className={`inspector-tab ${tab === "stats" ? "active" : ""}`}
+          title="PR and check stats"
+        >
+          Stats
+        </TabsTrigger>
+        <TabsTrigger
+          value="diff"
+          className={`inspector-tab ${tab === "diff" ? "active" : ""}`}
+          title="Changed files and working tree diff"
+        >
+          Diff
+          {fileCount !== null && fileCount > 0 ? <span className="inspector-tab-count">{fileCount}</span> : null}
+        </TabsTrigger>
+        <span className="inspector-tab-indicator" data-tab={tab} aria-hidden />
+        <button
+          type="button"
+          className="cit-icon-btn cit-icon-btn--sm inspector-tabs-collapse"
+          onClick={onCollapse}
+          aria-label="Collapse inspector"
+          title="Collapse inspector"
+        >
+          <X size={12} />
+        </button>
+      </TabsList>
+    </Tabs>
+  );
+}
diff --git a/apps/web/src/inspector.tsx b/apps/web/src/inspector.tsx
index e6a8856e..08f08b91 100644
--- a/apps/web/src/inspector.tsx
+++ b/apps/web/src/inspector.tsx
@@ -9,19 +9,17 @@ import type {
 } from "@citadel/contracts";
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
-import { PanelRightClose, RefreshCw } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { api } from "./api.js";
 import { DeployedAppsPanel } from "./deployed-apps.js";
 import { InspectorPrSection } from "./inspector-pr.js";
-import { aggregateReviewerCounts } from "./inspector-reviewers.js";
+import { type InspectorTab, InspectorTabs } from "./inspector-tabs.js";
 import { IssueAttachSlot } from "./jira-picker.js";
 
 // Re-export so existing consumers (incl. inspector.test.ts) keep working.
 export { aggregateReviewerCounts } from "./inspector-reviewers.js";
 
-type InspectorTab = "stats" | "diff";
-
 export function Inspector(props: {
   workspace: Workspace;
   repo: Repo | null;
@@ -43,35 +41,7 @@ export function Inspector(props: {
   const fileCount = diff.data?.files.length ?? null;
   return (
     <>
-      <div className="inspector-tabs" data-active={tab}>
-        <button
-          type="button"
-          className={`inspector-tab ${tab === "stats" ? "active" : ""}`}
-          onClick={() => setTab("stats")}
-          title="PR and check stats"
-        >
-          Stats
-        </button>
-        <button
-          type="button"
-          className={`inspector-tab ${tab === "diff" ? "active" : ""}`}
-          onClick={() => setTab("diff")}
-          title="Changed files and working tree diff"
-        >
-          Diff
-          {fileCount !== null && fileCount > 0 ? <span className="inspector-tab-count">{fileCount}</span> : null}
-        </button>
-        <span className="inspector-tab-indicator" data-tab={tab} aria-hidden />
-        <button
-          type="button"
-          className="cit-icon-btn cit-icon-btn--sm inspector-tabs-collapse"
-          onClick={props.onCollapse}
-          aria-label="Collapse inspector"
-          title="Collapse inspector"
-        >
-          <PanelRightClose size={14} />
-        </button>
-      </div>
+      <InspectorTabs tab={tab} onTabChange={setTab} fileCount={fileCount} onCollapse={props.onCollapse} />
       <div className="column-body">
         {tab === "stats" ? (
           <StatsTab
@@ -322,4 +292,4 @@ function countLines(diff: string, prefix: "+" | "-") {
   return count;
 }
 
-export type { InspectorTab };
+export type { InspectorTab } from "./inspector-tabs.js";
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 2bae41c7..bcb436c4 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,5 +1,7 @@
+/// <reference types="vite/client" />
 import { QueryClientProvider } from "@tanstack/react-query";
 import {
+  type AnyRoute,
   Link,
   Outlet,
   RouterProvider,
@@ -13,6 +15,8 @@ import { createRoot } from "react-dom/client";
 import { queryClient } from "./api.js";
 import { OptimisticRemoveProvider } from "./app-state.js";
 import { Cockpit } from "./cockpit.js";
+import { Toaster } from "./components/ui/toast.js";
+import { TooltipProvider } from "./components/ui/tooltip.js";
 import { bootstrapLastRoute, clearLastRoute, saveLastRoute } from "./lib/last-route.js";
 import { bootstrapMobileScratchpad } from "./lib/mobile-scratchpad-bootstrap.js";
 import { AgentTemplatesView } from "./routes/agents.js";
@@ -292,22 +296,39 @@ if (typeof window !== "undefined") {
   }
 }
 
-const router = createRouter({
-  routeTree: rootRoute.addChildren([
-    cockpitLayoutRoute.addChildren([
-      indexRoute,
-      settingsRoute,
-      agentsRoute,
-      repoSettingsRoute,
-      reviewDiffRoute,
-      operationsRoute,
-      onboardingRoute,
-      dashboardRoute,
-      historyRoute,
-      scratchpadRoute,
-      scheduledAgentsRoute,
-    ]),
+// Base routes always shipped. Dev-only routes are appended below behind a
+// static `if (import.meta.env.DEV)` guard which Vite tree-shakes out of
+// production bundles — the dynamic `import()` inside the branch never
+// emits a chunk for prod builds because the entire branch is dead code
+// when DEV is replaced with the literal `false`.
+const childRoutes: AnyRoute[] = [
+  cockpitLayoutRoute.addChildren([
+    indexRoute,
+    settingsRoute,
+    agentsRoute,
+    repoSettingsRoute,
+    reviewDiffRoute,
+    operationsRoute,
+    onboardingRoute,
+    dashboardRoute,
+    historyRoute,
+    scratchpadRoute,
+    scheduledAgentsRoute,
   ]),
+];
+
+if (import.meta.env.DEV) {
+  const { DesignSystemShowcase } = await import("./routes/design-system/index.js");
+  const designSystemRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/design-system",
+    component: DesignSystemShowcase,
+  });
+  childRoutes.push(designSystemRoute);
+}
+
+const router = createRouter({
+  routeTree: rootRoute.addChildren(childRoutes),
   defaultNotFoundComponent: NotFoundView,
 });
 
@@ -330,6 +351,9 @@ declare module "@tanstack/react-router" {
 
 createRoot(document.getElementById("root") as HTMLElement).render(
   <QueryClientProvider client={queryClient}>
-    <RouterProvider router={router} />
+    <TooltipProvider>
+      <RouterProvider router={router} />
+      <Toaster />
+    </TooltipProvider>
   </QueryClientProvider>,
 );
diff --git a/apps/web/src/modals.css b/apps/web/src/modals.css
index 5651336f..c7db92a8 100644
--- a/apps/web/src/modals.css
+++ b/apps/web/src/modals.css
@@ -1,11 +1,7 @@
-/* Neutralize UA <dialog> styles (position: absolute; inset-inline: 0; margin: auto)
- * so the dialog participates in the backdrop's `place-items: center` grid and
- * lands at the viewport center both axes. Without this reset a <dialog open>
- * inside a centered backdrop renders pinned to the top of the backdrop's
- * containing block — the "dialog appears top-center / top-right" bug the
- * user keeps re-reporting. */
+/* Reset UA <dialog open> styling for backdrops that still use the native
+ * element (command palette, drop-workspace). Radix Dialog renders its own
+ * portal + overlay, so .modal-backdrop is no longer authored here. */
 .command-backdrop dialog[open],
-.modal-backdrop dialog[open],
 .drop-workspace-backdrop dialog[open] {
   position: relative;
   inset: auto;
@@ -99,54 +95,27 @@
   color: var(--muted);
 }
 
-/* Modal frame (create workspace, add repo, group-by) */
+/* Modal content (create workspace, add repo).
+ *
+ * Radix Dialog owns the overlay, centering, frame chrome, focus trap, and
+ * Esc/backdrop dismissal — see apps/web/src/components/ui/dialog.tsx. The
+ * rules below style the inner content layout only. .modal-backdrop /
+ * .modal-frame were removed when the bespoke scaffolding was migrated. */
 
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 25;
-  display: grid;
-  place-items: center;
-  padding: 20px;
-  background: var(--overlay-bg);
-  backdrop-filter: blur(4px);
-}
-
-.modal-frame {
-  width: min(560px, 100%);
-  max-height: 90vh;
-  padding: 0;
-  overflow: hidden;
-  background: var(--panel);
-  border: 1px solid var(--line-strong);
-  border-radius: 10px;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  color: inherit;
-  box-shadow: 0 28px 80px rgb(var(--shadow-color) / 0.45);
-}
-
-.modal-header {
-  display: flex;
+.modal-title {
+  display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--line);
-}
-
-.modal-header h2 {
-  font-size: 14px;
-  margin: 0;
-  flex: 1;
 }
 
 .modal-body {
-  padding: 12px 14px;
   overflow: auto;
+  max-height: min(70vh, 600px);
 }
 
 .modal-footer {
-  padding: 10px 14px;
+  padding-top: 10px;
+  margin-top: 10px;
   display: flex;
   justify-content: flex-end;
   gap: 8px;
diff --git a/apps/web/src/modals.test.ts b/apps/web/src/modals.test.ts
index 244d031d..8b842c4b 100644
--- a/apps/web/src/modals.test.ts
+++ b/apps/web/src/modals.test.ts
@@ -306,7 +306,7 @@ function renderCreateWorkspaceModal(overrides: {
       ),
     );
   });
-  return rootElement;
+  return document.body;
 }
 
 function buttonByText(container: HTMLElement, text: string): HTMLButtonElement {
diff --git a/apps/web/src/modals.tsx b/apps/web/src/modals.tsx
index 2983995e..97952ab3 100644
--- a/apps/web/src/modals.tsx
+++ b/apps/web/src/modals.tsx
@@ -1,6 +1,6 @@
 import type { Repo } from "@citadel/contracts";
 import { useMutation } from "@tanstack/react-query";
-import { Check, Search, X } from "lucide-react";
+import { Check, Search } from "lucide-react";
 import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { api, queryClient } from "./api.js";
 import {
@@ -11,6 +11,7 @@ import {
   removeOptimisticCheckout,
 } from "./app-state.js";
 import { Button } from "./components/ui/button.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./components/ui/dialog.js";
 import { type GroupKey, type NavigatorGrouping, normalizeNavigatorGrouping } from "./navigator-groups.js";
 import { repoNameWithOwner } from "./repo-labels.js";
 import { useToast } from "./toast.js";
@@ -418,32 +419,22 @@ function optimisticCheckoutId(): string {
 }
 
 export function Modal(props: { title: string; onClose: () => void; children: ReactNode }) {
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") props.onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [props.onClose]);
   return (
-    <div className="modal-backdrop" role="presentation" onMouseDown={props.onClose}>
-      <dialog open className="modal-frame" aria-label={props.title} onMouseDown={(event) => event.stopPropagation()}>
-        <div className="modal-header">
-          <Search size={14} aria-hidden />
-          <h2>{props.title}</h2>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            onClick={props.onClose}
-            aria-label="Close"
-            title="Close (Esc)"
-          >
-            <X size={14} />
-          </Button>
-        </div>
+    <Dialog
+      open
+      onOpenChange={(next) => {
+        if (!next) props.onClose();
+      }}
+    >
+      <DialogContent aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle className="modal-title">
+            <Search size={14} aria-hidden />
+            {props.title}
+          </DialogTitle>
+        </DialogHeader>
         <div className="modal-body">{props.children}</div>
-      </dialog>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/web/src/navigator.test.ts b/apps/web/src/navigator.test.ts
index 7742c802..79b7cdf7 100644
--- a/apps/web/src/navigator.test.ts
+++ b/apps/web/src/navigator.test.ts
@@ -478,7 +478,7 @@ function renderNavigator(overrides: {
       createElement(QueryClientProvider, { client: queryClient }, createElement(NavigatorHarness, { overrides })),
     );
   });
-  return rootElement;
+  return document.body;
 }
 
 function NavigatorHarness(props: {
diff --git a/apps/web/src/routes/design-system/buttons.tsx b/apps/web/src/routes/design-system/buttons.tsx
new file mode 100644
index 00000000..e23fa6ea
--- /dev/null
+++ b/apps/web/src/routes/design-system/buttons.tsx
@@ -0,0 +1,46 @@
+import { Plus, X } from "lucide-react";
+import { Button } from "../../components/ui/button.js";
+import { IconButton } from "../../components/ui/icon-button.js";
+
+export function ButtonsSection() {
+  return (
+    <div className="flex flex-col gap-3">
+      <Row label="Variants">
+        <Button>Default</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="link">Link</Button>
+      </Row>
+      <Row label="Sizes">
+        <Button size="sm">Small</Button>
+        <Button size="default">Default</Button>
+        <Button size="lg">Large</Button>
+      </Row>
+      <Row label="States">
+        <Button loading>Loading</Button>
+        <Button disabled>Disabled</Button>
+        <Button variant="secondary" loading>
+          Saving…
+        </Button>
+      </Row>
+      <Row label="IconButton">
+        <IconButton aria-label="Add workspace">
+          <Plus size={14} />
+        </IconButton>
+        <IconButton aria-label="Close" variant="ghost">
+          <X size={14} />
+        </IconButton>
+      </Row>
+    </div>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--c-fg-4)]">{label}</div>
+      <div className="flex flex-wrap items-center gap-2">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/design-system/feedback.tsx b/apps/web/src/routes/design-system/feedback.tsx
new file mode 100644
index 00000000..e3a6d345
--- /dev/null
+++ b/apps/web/src/routes/design-system/feedback.tsx
@@ -0,0 +1,28 @@
+import { Button } from "../../components/ui/button.js";
+import { toast } from "../../components/ui/toast.js";
+
+export function FeedbackSection() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button onClick={() => toast({ title: "Default toast", description: "Nothing fancy." })}>Default</Button>
+      <Button
+        variant="secondary"
+        onClick={() => toast({ title: "Saved", description: "Your changes are live.", variant: "success" })}
+      >
+        Success
+      </Button>
+      <Button
+        variant="secondary"
+        onClick={() => toast({ title: "Heads up", description: "Provider degraded.", variant: "warning" })}
+      >
+        Warning
+      </Button>
+      <Button
+        variant="destructive"
+        onClick={() => toast({ title: "Hook failed", description: "See operations panel.", variant: "danger" })}
+      >
+        Danger
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/design-system/forms.tsx b/apps/web/src/routes/design-system/forms.tsx
new file mode 100644
index 00000000..35f346cc
--- /dev/null
+++ b/apps/web/src/routes/design-system/forms.tsx
@@ -0,0 +1,31 @@
+import { useState } from "react";
+import { FormField } from "../../components/ui/form-field.js";
+import { Input, Textarea } from "../../components/ui/input.js";
+import { Select } from "../../components/ui/select.js";
+
+export function FormsSection() {
+  const [value, setValue] = useState("");
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      <FormField label="Name" help="Used for greeting" required>
+        <Input placeholder="Ada Lovelace" value={value} onChange={(e) => setValue(e.target.value)} />
+      </FormField>
+      <FormField label="Email" error={value === "" ? undefined : "Looks malformed"}>
+        <Input type="email" defaultValue="not-an-email" />
+      </FormField>
+      <FormField label="Runtime">
+        <Select defaultValue="claude">
+          <option value="claude">Claude</option>
+          <option value="codex">Codex</option>
+          <option value="custom">Custom</option>
+        </Select>
+      </FormField>
+      <FormField label="Notes">
+        <Textarea rows={4} placeholder="Add context for the agent…" />
+      </FormField>
+      <FormField label="Disabled">
+        <Input disabled defaultValue="Read-only" />
+      </FormField>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/design-system/index.tsx b/apps/web/src/routes/design-system/index.tsx
new file mode 100644
index 00000000..c9f8a6ed
--- /dev/null
+++ b/apps/web/src/routes/design-system/index.tsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { ButtonsSection } from "./buttons.js";
+import { FeedbackSection } from "./feedback.js";
+import { FormsSection } from "./forms.js";
+import { NavigationSection } from "./navigation.js";
+import { OverlaysSection } from "./overlays.js";
+import { PillsSection } from "./pills.js";
+import { SurfacesSection } from "./surfaces.js";
+
+// Unique marker token. The production-build verification step greps for
+// this string in apps/web/dist/assets and fails the gate if found — the
+// dev-only `if (import.meta.env.DEV)` branch in main.tsx must drop the
+// entire showcase chunk in production builds.
+export const DESIGN_SYSTEM_SHOWCASE_MARKER = "CITADEL_DESIGN_SYSTEM_SHOWCASE";
+
+type Section = "buttons" | "pills" | "surfaces" | "forms" | "overlays" | "navigation" | "feedback";
+
+const sections: { id: Section; label: string; render: () => React.ReactNode }[] = [
+  { id: "buttons", label: "Buttons & IconButton", render: () => <ButtonsSection /> },
+  { id: "pills", label: "Badge & Chip", render: () => <PillsSection /> },
+  { id: "surfaces", label: "Card / Panel / EmptyState / Skeleton", render: () => <SurfacesSection /> },
+  { id: "forms", label: "Form fields", render: () => <FormsSection /> },
+  { id: "overlays", label: "Dialog & Tooltip", render: () => <OverlaysSection /> },
+  { id: "navigation", label: "Tabs", render: () => <NavigationSection /> },
+  { id: "feedback", label: "Toast", render: () => <FeedbackSection /> },
+];
+
+export function DesignSystemShowcase() {
+  return (
+    <div className="flex h-dvh w-full overflow-hidden bg-[var(--c-canvas)] text-[var(--c-fg-1)]">
+      <Pane theme="light" />
+      <Pane theme="dark" />
+    </div>
+  );
+}
+
+function Pane({ theme }: { theme: "light" | "dark" }) {
+  return (
+    <div
+      data-theme={theme}
+      className="flex-1 overflow-auto border-r border-[var(--c-line-2)] bg-[var(--c-canvas)] p-6 text-[var(--c-fg-1)] last:border-r-0"
+    >
+      <div className="mb-6 flex items-baseline justify-between">
+        <h1 className="text-lg font-semibold">{theme === "light" ? "Light" : "Dark"}</h1>
+        <span className="text-xs text-[var(--c-fg-3)]">{DESIGN_SYSTEM_SHOWCASE_MARKER}</span>
+      </div>
+      {sections.map((section) => (
+        <SectionBlock key={section.id} id={section.id} label={section.label}>
+          {section.render()}
+        </SectionBlock>
+      ))}
+    </div>
+  );
+}
+
+function SectionBlock({
+  id,
+  label,
+  children,
+}: {
+  id: Section;
+  label: string;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(true);
+  return (
+    <section data-section={id} className="mb-6">
+      <button
+        type="button"
+        onClick={() => setOpen((s) => !s)}
+        className="mb-2 inline-flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--c-fg-4)] hover:text-[var(--c-fg-2)]"
+      >
+        <span>{open ? "▼" : "▶"}</span>
+        {label}
+      </button>
+      {open ? <div className="flex flex-col gap-4">{children}</div> : null}
+    </section>
+  );
+}
diff --git a/apps/web/src/routes/design-system/navigation.tsx b/apps/web/src/routes/design-system/navigation.tsx
new file mode 100644
index 00000000..71f0d674
--- /dev/null
+++ b/apps/web/src/routes/design-system/navigation.tsx
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs.js";
+
+export function NavigationSection() {
+  const [tab, setTab] = useState("stats");
+  return (
+    <Tabs value={tab} onValueChange={setTab}>
+      <TabsList data-active={tab}>
+        <TabsTrigger value="stats">Stats</TabsTrigger>
+        <TabsTrigger value="diff">Diff</TabsTrigger>
+        <TabsTrigger value="apps">Apps</TabsTrigger>
+      </TabsList>
+      <TabsContent value="stats" className="pt-3 text-sm text-[var(--c-fg-2)]">
+        Stats tab content. Compact pill-style trigger row, parent-level data-active for legacy CSS hooks.
+      </TabsContent>
+      <TabsContent value="diff" className="pt-3 text-sm text-[var(--c-fg-2)]">
+        Diff tab content.
+      </TabsContent>
+      <TabsContent value="apps" className="pt-3 text-sm text-[var(--c-fg-2)]">
+        Apps tab content.
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/apps/web/src/routes/design-system/overlays.tsx b/apps/web/src/routes/design-system/overlays.tsx
new file mode 100644
index 00000000..adfac0e2
--- /dev/null
+++ b/apps/web/src/routes/design-system/overlays.tsx
@@ -0,0 +1,40 @@
+import { Button } from "../../components/ui/button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.js";
+
+export function OverlaysSection() {
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>Open dialog</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Sample dialog</DialogTitle>
+            <DialogDescription>Backdrop-dismissable. Esc closes. Focus trapped inside the content.</DialogDescription>
+          </DialogHeader>
+          <p className="text-sm">Body content goes here.</p>
+          <DialogFooter>
+            <Button variant="secondary">Cancel</Button>
+            <Button>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="secondary">Hover for tooltip</Button>
+        </TooltipTrigger>
+        <TooltipContent>Cockpit defaults: 250ms / 100ms.</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/design-system/pills.tsx b/apps/web/src/routes/design-system/pills.tsx
new file mode 100644
index 00000000..02ce3740
--- /dev/null
+++ b/apps/web/src/routes/design-system/pills.tsx
@@ -0,0 +1,46 @@
+import { GitBranch } from "lucide-react";
+import { Badge } from "../../components/ui/badge.js";
+import { Chip } from "../../components/ui/chip.js";
+
+const variants = ["neutral", "ready", "blocked", "info", "warn", "merged", "neutral-strong"] as const;
+
+export function PillsSection() {
+  return (
+    <div className="flex flex-col gap-3">
+      <Row label="Badge variants">
+        {variants.map((v) => (
+          <Badge key={v} variant={v}>
+            {v}
+          </Badge>
+        ))}
+      </Row>
+      <Row label="Badge with dot">
+        {variants.map((v) => (
+          <Badge key={v} variant={v} dot>
+            {v}
+          </Badge>
+        ))}
+      </Row>
+      <Row label="Chip with leading icon">
+        <Chip variant="info" icon={<GitBranch size={11} />}>
+          feat/foo
+        </Chip>
+        <Chip variant="warn">no icon</Chip>
+      </Row>
+      <Row label="Chip with onClose">
+        <Chip variant="merged" onClose={() => {}} closeAriaLabel="Remove">
+          DESIGN-12
+        </Chip>
+      </Row>
+    </div>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--c-fg-4)]">{label}</div>
+      <div className="flex flex-wrap items-center gap-2">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/design-system/surfaces.tsx b/apps/web/src/routes/design-system/surfaces.tsx
new file mode 100644
index 00000000..9ffe2dcc
--- /dev/null
+++ b/apps/web/src/routes/design-system/surfaces.tsx
@@ -0,0 +1,45 @@
+import { Inbox } from "lucide-react";
+import { Card } from "../../components/ui/card.js";
+import { EmptyState } from "../../components/ui/empty-state.js";
+import { Panel, PanelBody, PanelFooter, PanelHeader, PanelTitle } from "../../components/ui/panel.js";
+import { Skeleton } from "../../components/ui/skeleton.js";
+
+export function SurfacesSection() {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="grid gap-3 sm:grid-cols-2">
+        <Card>
+          <div className="text-xs font-semibold">Card</div>
+          <p className="text-[11px] text-[var(--c-fg-3)]">Rounded surface with --c-card bg.</p>
+        </Card>
+        <Panel>
+          <PanelHeader>
+            <PanelTitle>Panel header</PanelTitle>
+          </PanelHeader>
+          <PanelBody>
+            <p className="text-xs text-[var(--c-fg-2)]">Body</p>
+          </PanelBody>
+          <PanelFooter>
+            <span className="text-[11px] text-[var(--c-fg-3)]">Footer</span>
+          </PanelFooter>
+        </Panel>
+      </div>
+      <Card>
+        <EmptyState
+          icon={<Inbox size={20} />}
+          heading="No workspaces yet"
+          description="Create a workspace to get started."
+          action={{ label: "Add workspace", onClick: () => {} }}
+        />
+      </Card>
+      <Card>
+        <div className="text-xs font-semibold">Skeleton</div>
+        <div className="mt-2 flex flex-col gap-2">
+          <Skeleton width="60%" height={12} />
+          <Skeleton width="80%" height={12} />
+          <Skeleton width="40%" height={12} label="Loading PR data" />
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/web/src/scheduled-agent-form.test.tsx b/apps/web/src/scheduled-agent-form.test.tsx
new file mode 100644
index 00000000..ef3edcd4
--- /dev/null
+++ b/apps/web/src/scheduled-agent-form.test.tsx
@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+import type { AgentRuntime, Repo, Workspace } from "@citadel/contracts";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render } from "./components/ui/test-utils.js";
+import { ScheduledAgentForm } from "./scheduled-agent-form.js";
+
+// First test coverage for ScheduledAgentForm — added together with the
+// FormField migration of the Name field. The form has many other fields
+// still on bespoke `<label>` wrappers (tracked via TODO comments) — this
+// suite locks in the FormField contract for the migrated field so a
+// future full migration doesn't silently break label-association or
+// required semantics.
+
+const repos: Repo[] = [{ id: "repo-1", name: "demo-repo" } as unknown as Repo];
+const runtimes: AgentRuntime[] = [{ id: "claude", displayName: "Claude" } as unknown as AgentRuntime];
+const workspaces: Workspace[] = [];
+
+let cleanup: (() => void) | null = null;
+
+beforeEach(() => {
+  vi.spyOn(window, "fetch").mockResolvedValue(
+    new Response(JSON.stringify({}), { status: 200, headers: { "content-type": "application/json" } }),
+  );
+});
+
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+  vi.restoreAllMocks();
+});
+
+function mountForm() {
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  const result = render(
+    <QueryClientProvider client={client}>
+      <ScheduledAgentForm mode="create" repos={repos} runtimes={runtimes} workspaces={workspaces} />
+    </QueryClientProvider>,
+  );
+  cleanup = result.unmount;
+  return result;
+}
+
+describe("ScheduledAgentForm — migrated Name field", () => {
+  it("associates the Name label with the underlying input (FormField wiring)", () => {
+    const { container } = mountForm();
+    // FormField + Input renders a <label> with htmlFor → an <input> with the
+    // matching id. Verify the connection so the future full migration of
+    // other fields can rely on the same contract.
+    const label = Array.from(container.querySelectorAll("label")).find((el) => el.textContent?.includes("Name"));
+    expect(label).toBeDefined();
+    const forId = label?.getAttribute("for");
+    expect(forId).toBeTruthy();
+    const input = container.querySelector(`input#${CSS.escape(forId as string)}`);
+    expect(input).not.toBeNull();
+  });
+
+  it("renders the required marker for the Name field", () => {
+    const { container } = mountForm();
+    // FormField renders a `*` inside `[data-slot="form-required"]` when
+    // `required` is true. The marker lives next to the label text.
+    const marker = container.querySelector('[data-slot="form-required"]');
+    expect(marker).not.toBeNull();
+    expect(marker?.textContent).toContain("*");
+  });
+
+  it("propagates required onto the underlying control so HTML form validation kicks in", () => {
+    const { container } = mountForm();
+    const label = Array.from(container.querySelectorAll("label")).find((el) => el.textContent?.includes("Name"));
+    const forId = label?.getAttribute("for") ?? "";
+    const input = container.querySelector(`input#${CSS.escape(forId)}`) as HTMLInputElement | null;
+    expect(input?.required).toBe(true);
+  });
+});
diff --git a/apps/web/src/scheduled-agent-form.tsx b/apps/web/src/scheduled-agent-form.tsx
index b7051f77..8d389788 100644
--- a/apps/web/src/scheduled-agent-form.tsx
+++ b/apps/web/src/scheduled-agent-form.tsx
@@ -12,6 +12,8 @@ import { Plus, Save } from "lucide-react";
 import { useMemo, useState } from "react";
 import { api, queryClient } from "./api.js";
 import { Button } from "./components/ui/button.js";
+import { FormField } from "./components/ui/form-field.js";
+import { Input } from "./components/ui/input.js";
 import { describeCronClient, nextCronRunClient } from "./cron-client.js";
 
 // Reusable scheduled-agent form. Drives both the create modal and the
@@ -267,10 +269,9 @@ export function ScheduledAgentForm(props: FormProps) {
         if (canSubmit && !submit.isPending) submit.mutate();
       }}
     >
-      <label className="scheduled-agent-field">
-        <span>Name</span>
-        <input value={draft.name} onChange={(event) => update({ name: event.target.value })} required />
-      </label>
+      <FormField label="Name" required className="scheduled-agent-field">
+        <Input value={draft.name} onChange={(event) => update({ name: event.target.value })} />
+      </FormField>
       <label className="scheduled-agent-field">
         <span>Type</span>
         <select
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index e4b7d3a5..148ce7d4 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "./design-system/tokens.css";
 
 @keyframes spin {
   from {
@@ -9,202 +10,6 @@
   }
 }
 
-/* Palette adopted from the Citadel UI redesign — warm cream surfaces, a
- * single dark navy for "selected/active" fills, and OKLCH status colours.
- * The legacy --color-*, --panel*, --line*, --muted, --topbar-*, --surface*
- * tokens are preserved so existing CSS keeps rendering; the new --c-* and
- * --font-* tokens are exposed for any redesign-aware code that wants them
- * directly. */
-:root {
-  /* Keep browser-rendered controls/system colors aligned with Citadel's
-   * default light palette. System dark mode is applied by the explicit dark
-   * rule below, not by letting native controls choose independently. */
-  color-scheme: light;
-
-  /* Typography */
-  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --font-serif: "Geist", ui-serif, Georgia, serif;
-
-  font-family: var(--font-sans);
-  font-feature-settings: "ss01", "cv11", "ss02";
-  letter-spacing: -0.005em;
-  background: #ece7da;
-  color: #1a1814;
-
-  /* Redesign tokens — warm cream */
-  --c-canvas: #ece7da;
-  --c-app: #efeae0;
-  --c-surface: #f0ebe2;
-  --c-elev: #f5f1e8;
-  --c-card: #faf6ee;
-
-  --c-line-1: rgba(36, 28, 14, 0.06);
-  --c-line-2: rgba(36, 28, 14, 0.1);
-  --c-line-3: rgba(36, 28, 14, 0.16);
-
-  --c-fg-1: #1a1814;
-  --c-fg-2: #4a463e;
-  --c-fg-3: #6f695d;
-  --c-fg-4: #9c9485;
-  --c-fg-5: #c0b8a8;
-
-  --c-dark: #14171f;
-  --c-dark-2: #1f232e;
-  --c-on-dark: #f2eee2;
-  --c-on-dark-d: #9da0a8;
-
-  --c-ok: oklch(58% 0.14 145);
-  --c-ok-bg: oklch(63% 0.1 150 / 0.14);
-  --c-warn: oklch(68% 0.13 70);
-  --c-warn-bg: oklch(68% 0.13 70 / 0.14);
-  --c-bad: oklch(58% 0.16 25);
-  --c-bad-bg: oklch(58% 0.16 25 / 0.14);
-  --c-info: oklch(58% 0.1 240);
-  --c-info-bg: oklch(58% 0.1 240 / 0.14);
-
-  --sh-1: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 1px 1px rgba(20, 12, 0, 0.03);
-  --sh-2: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(20, 12, 0, 0.05), 0 6px 18px -8px rgba(20, 12, 0, 0.12);
-  --sh-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(20, 12, 0, 0.04), 0 1px 0 rgba(20, 12, 0, 0.04);
-
-  /* Legacy tokens mapped onto the new palette */
-  --color-action: #14171f;
-  --color-action-hover: #1f232e;
-  --color-accent: #14171f;
-  --color-success: oklch(58% 0.14 145);
-  --color-warning: oklch(60% 0.13 70);
-  --color-danger: oklch(58% 0.16 25);
-  --color-purple: oklch(55% 0.18 295);
-  --color-merged: oklch(55% 0.18 295);
-  --surface: var(--c-canvas);
-  --surface-strong: #e3dccc;
-  --panel: var(--c-surface);
-  --panel-strong: var(--c-elev);
-  --line: var(--c-line-2);
-  --line-strong: var(--c-line-3);
-  --muted: var(--c-fg-3);
-  --topbar-bg: var(--c-app);
-  --topbar-fg: var(--c-fg-1);
-  --topbar-line: var(--c-line-2);
-  --shadow-color: 36 28 14;
-  --overlay-bg: rgba(36, 28, 14, 0.45);
-}
-
-:root[data-theme="dark"],
-:root:not([data-theme="light"]) {
-  color-scheme: dark;
-  background: #15130f;
-  color: #f0ebdd;
-
-  --c-canvas: #15130f;
-  --c-app: #1a1814;
-  --c-surface: #201d17;
-  --c-elev: #26221b;
-  --c-card: #2b2620;
-
-  --c-line-1: rgba(255, 245, 220, 0.05);
-  --c-line-2: rgba(255, 245, 220, 0.08);
-  --c-line-3: rgba(255, 245, 220, 0.14);
-
-  --c-fg-1: #f0ebdd;
-  --c-fg-2: #c8c2b0;
-  --c-fg-3: #948d7b;
-  --c-fg-4: #6b6557;
-  --c-fg-5: #4a463c;
-
-  --c-dark: #f0ebdd;
-  --c-dark-2: #e1dbc8;
-  --c-on-dark: #15130f;
-  --c-on-dark-d: #6b6557;
-
-  --c-ok: oklch(72% 0.14 145);
-  --c-ok-bg: oklch(60% 0.1 145 / 0.18);
-  --c-warn: oklch(78% 0.14 70);
-  --c-warn-bg: oklch(60% 0.13 70 / 0.18);
-  --c-bad: oklch(72% 0.18 25);
-  --c-bad-bg: oklch(60% 0.16 25 / 0.18);
-  --c-info: oklch(72% 0.12 240);
-  --c-info-bg: oklch(60% 0.1 240 / 0.18);
-
-  --sh-1: 0 1px 0 rgba(255, 245, 220, 0.04) inset, 0 1px 1px rgba(0, 0, 0, 0.4);
-  --sh-2: 0 1px 0 rgba(255, 245, 220, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
-  --sh-card: 0 1px 0 rgba(255, 245, 220, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
-
-  --color-action: #f0ebdd;
-  --color-action-hover: #ffffff;
-  --color-accent: #f0ebdd;
-  --color-success: oklch(72% 0.14 145);
-  --color-warning: oklch(78% 0.14 70);
-  --color-danger: oklch(72% 0.18 25);
-  --color-purple: oklch(72% 0.18 295);
-  --color-merged: oklch(72% 0.18 295);
-  --surface: var(--c-canvas);
-  --surface-strong: var(--c-surface);
-  --panel: var(--c-surface);
-  --panel-strong: var(--c-elev);
-  --line: var(--c-line-2);
-  --line-strong: var(--c-line-3);
-  --muted: var(--c-fg-3);
-  --topbar-bg: var(--c-app);
-  --topbar-fg: var(--c-fg-1);
-  --topbar-line: var(--c-line-2);
-  --shadow-color: 0 0 0;
-  --overlay-bg: rgba(0, 0, 0, 0.55);
-}
-
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme="dark"]):not([data-theme="light"]) {
-    color-scheme: light;
-    background: #ece7da;
-    color: #1a1814;
-
-    --c-canvas: #ece7da;
-    --c-app: #efeae0;
-    --c-surface: #f0ebe2;
-    --c-elev: #f5f1e8;
-    --c-card: #faf6ee;
-    --c-line-1: rgba(36, 28, 14, 0.06);
-    --c-line-2: rgba(36, 28, 14, 0.1);
-    --c-line-3: rgba(36, 28, 14, 0.16);
-    --c-fg-1: #1a1814;
-    --c-fg-2: #4a463e;
-    --c-fg-3: #6f695d;
-    --c-fg-4: #9c9485;
-    --c-fg-5: #c0b8a8;
-    --c-dark: #14171f;
-    --c-dark-2: #1f232e;
-    --c-on-dark: #f2eee2;
-    --c-on-dark-d: #9da0a8;
-
-    --color-action: #14171f;
-    --color-action-hover: #1f232e;
-    --color-accent: #14171f;
-    --color-success: oklch(58% 0.14 145);
-    --color-warning: oklch(60% 0.13 70);
-    --color-danger: oklch(58% 0.16 25);
-    --color-purple: oklch(55% 0.18 295);
-    --color-merged: oklch(55% 0.18 295);
-    --surface: var(--c-canvas);
-    --surface-strong: #e3dccc;
-    --panel: var(--c-surface);
-    --panel-strong: var(--c-elev);
-    --line: var(--c-line-2);
-    --line-strong: var(--c-line-3);
-    --muted: var(--c-fg-3);
-    --topbar-bg: var(--c-app);
-    --topbar-fg: var(--c-fg-1);
-    --topbar-line: var(--c-line-2);
-    --shadow-color: 36 28 14;
-    --overlay-bg: rgba(36, 28, 14, 0.45);
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  :root[data-theme="light"] {
-    color-scheme: light;
-  }
-}
-
 * {
   box-sizing: border-box;
 }
diff --git a/apps/web/src/workspace-card.tsx b/apps/web/src/workspace-card.tsx
index a11d18d6..656b661c 100644
--- a/apps/web/src/workspace-card.tsx
+++ b/apps/web/src/workspace-card.tsx
@@ -14,6 +14,7 @@ import { useEffect, useRef, useState } from "react";
 import { api, queryClient } from "./api.js";
 import { type StateResponse, useOptimisticRemove, useStateQuery } from "./app-state.js";
 import { pickReadableForeground } from "./color-contrast.js";
+import { Chip } from "./components/ui/chip.js";
 import { encodeReorderMimeType, findReorderMimeType, parseReorderMimeType } from "./navigator-order.js";
 import { type AttentionSessionIds, deriveWorkspaceDisplayLifecycleTone } from "./session-status-display.js";
 import { useToast } from "./toast.js";
@@ -332,18 +333,26 @@ export function WorkspaceCard(
         </span>
         <span className="workspace-card-right" aria-hidden>
           {namespace ? (
-            <span
-              className="namespace-pill"
+            <Chip
+              data-variant-source="namespace"
+              icon={<Folder size={10} />}
               title={`Namespace: ${namespace.name}`}
+              className="namespace-pill"
               style={
                 namespace.color
                   ? { background: namespace.color, color: pickReadableForeground(namespace.color) }
                   : undefined
               }
             >
-              <Folder size={10} /> {namespace.name}
-            </span>
+              {namespace.name}
+            </Chip>
           ) : null}
+          {/* TODO(implement-task): migrate the approval-pill (icon-only,
+            transparent fill, tonal color) and the workspace-card-diff
+            (two-color add/del display) into design-system primitives in a
+            follow-up PR. They render correctly today via bespoke CSS but
+            don't map cleanly onto Badge/Chip's surface-fill conventions
+            and need design input before rewriting. */}
           {hasDiff ? (
             <span className="workspace-card-diff" title="Lines changed in this PR">
               <span className="diff-add">+{additions ?? 0}</span>
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 00000000..6d741677
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,36 @@
+# Citadel Docs Map
+
+This directory separates product and engineering documentation from process artifacts.
+
+## Product And Architecture
+
+- [User Journeys](architecture/user-journeys.md) - operator workflows and UX priorities.
+- [UI Design Brief](architecture/ui-design-brief.md) - density, layout, mobile, copy, and visual-system rules.
+- [Citadel v2 Architecture](architecture/citadel-v2-architecture.md) - package boundaries, persistence, providers, terminal model, and deployment.
+- [Technical Decisions](architecture/technical-decisions.md) - why the project uses a local daemon, SQLite, Zod contracts, tmux/PTY terminals, and provider adapters.
+- [Product Specs](../specs/README.md) - state-based product targets.
+
+## Operations
+
+- [Install](operations/install.md) - long-term systemd install and upgrade path.
+- [Runbook](operations/runbook.md) - development commands, MCP status, terminal diagnostics, and operational checks.
+- [Worktree Development](operations/worktree-development.md) - how multiple local worktrees run without port/state collisions.
+- [Config Reference](operations/config-reference.md) - config shape, providers, hooks, runtimes, MCP, and terminal gateway behavior.
+- [Hook Examples](operations/hook-examples.md) - repo hook patterns and examples.
+
+## Engineering
+
+- [Engineering Standards](contributors/v2-engineering-standards.md) - checks, code organization, testing, and review expectations.
+- `e2e/` - Playwright user-flow regression coverage.
+- `scripts/checks/` - architecture, size, and dependency-policy gates.
+
+## Process Artifacts
+
+These files are intentionally retained but are not the primary product narrative:
+
+- `.agents/` - local SDLC skill/profile configuration used by automation in this workspace.
+- `CLAUDE.md` - quick reference for agent sessions working in the repo.
+- `docs/campaigns/` - implementation logs, traceability notes, and screenshot artifacts from development campaigns.
+- `plans/` - older technical plans retained for context.
+
+When reviewing Citadel as a project, start with the product, architecture, operations, and engineering sections above. Use the process artifacts only when you need historical context for why a change was made.
diff --git a/docs/architecture/technical-decisions.md b/docs/architecture/technical-decisions.md
new file mode 100644
index 00000000..1dc32791
--- /dev/null
+++ b/docs/architecture/technical-decisions.md
@@ -0,0 +1,53 @@
+# Technical Decisions
+
+This page records the high-level engineering choices behind Citadel. It is written for reviewers who want to understand the shape of the system before reading implementation details.
+
+## Local-First Daemon And Browser UI
+
+Citadel runs as a local daemon with a browser cockpit because the work it coordinates is already local: git repositories, worktrees, provider CLIs, terminal sessions, hooks, and agent runtimes. A hosted service would need broad access to a developer's filesystem and credentials; a local daemon keeps that authority on the operator's machine.
+
+The browser UI stays thin. It renders state, sends commands, and attaches to terminal streams. Filesystem access, process management, provider calls, hooks, persistence, and terminal ownership remain in the daemon and packages below it.
+
+## SQLite Persistence
+
+SQLite is the mutable state baseline. It is enough for a single-operator workbench, easy to back up, and inspectable when debugging. The database stores repositories, workspaces, sessions, operations, activity, provider snapshots, review artifacts, UI preferences, and runtime state.
+
+Migrations are forward-only in practice. Rollback is backup/restore, not a second migration system.
+
+## Typed Contracts Between Web And Daemon
+
+`packages/contracts` owns request, response, and event DTOs with Zod schemas. The web app imports contracts, not daemon internals. That keeps browser code honest and lets API changes fail at compile/test time instead of drifting silently.
+
+The package boundary also makes tests cheaper: browser tests can validate UI behavior against typed data shapes without importing the server.
+
+## Durable Terminal Sessions
+
+Agent work often runs for longer than a browser tab. Citadel therefore treats sessions as durable workspace resources, not React component state.
+
+Legacy sessions use tmux identity so a browser refresh kills only the viewer, not the work. PTY-daemon work extends that model by giving long-running PTY ownership to a dedicated local process and using the daemon as the bridge for cockpit attach/reconnect.
+
+The browser renders with xterm.js over a dedicated WebSocket. REST and SSE carry app state; terminal bytes use the terminal channel.
+
+## Provider Adapters Instead Of Provider-Specific Product Model
+
+GitHub, Jira, and other tools appear as provider implementations behind normalized concepts: version control, pull requests, checks, issue tracking, usage, and notifications.
+
+This keeps the cockpit generic. A provider can expose branded links or icons, but workspace state should not depend on a single provider's terminology or API shape.
+
+## Hooks As Extension Points
+
+Repository hooks let projects attach deploy links, preview apps, notifications, and custom actions without baking one workflow into Citadel. Hooks receive JSON input, run with bounded output and timeouts, and return structured metadata that can be shown on activity and workspace surfaces.
+
+Hook files are privileged code. They are reviewed like source code because they execute on operator machines.
+
+## Architecture Gates
+
+Citadel uses code checks to preserve the architecture:
+
+- `check:arch` enforces package boundaries.
+- `check:size` keeps large modules from becoming unreviewable.
+- TypeScript project references force package-level compile hygiene.
+- Dependency policy blocks unexpected package-manager drift and reviews sensitive dependency changes.
+- Vitest and Playwright cover domain logic, daemon behavior, UI surfaces, and end-to-end operator flows.
+
+The goal is not just green CI. The checks encode the same boundaries described in the architecture docs so the codebase stays understandable as it grows.
diff --git a/e2e/design-system.spec.ts b/e2e/design-system.spec.ts
new file mode 100644
index 00000000..bb6466e8
--- /dev/null
+++ b/e2e/design-system.spec.ts
@@ -0,0 +1,72 @@
+import { expect, test } from "@playwright/test";
+
+// Smokes the dev-only /design-system showcase route. Verifies the page
+// loads without console errors, every primitive section is present, and
+// the load-bearing interactive flows (Dialog open/close, Tabs nav, Toast
+// emit + dismiss) work end-to-end through Radix and the custom toast
+// queue.
+//
+// The route is registered behind `if (import.meta.env.DEV)` in main.tsx —
+// the production build verification step (grep for the marker in dist/)
+// is part of /implement-task's targeted checks, not this spec.
+
+test.describe("design-system showcase", () => {
+  test("loads with every section present and no application-level console errors", async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name === "mobile", "desktop covers the side-by-side theme layout");
+    const errors: string[] = [];
+    page.on("pageerror", (err) => errors.push(err.message));
+    page.on("console", (msg) => {
+      if (msg.type() !== "error") return;
+      const text = msg.text();
+      // Filter the well-known harmless CORS-preflight noise from the
+      // cockpit's font CDN (Google Fonts gstatic.com) — the cockpit's
+      // `X-Citadel-Api-Base` request header doesn't survive the third-
+      // party preflight. Not introduced by the design-system layer; pre-
+      // existing on every page in this app.
+      if (text.includes("fonts.gstatic.com") || text.includes("ERR_FAILED")) return;
+      errors.push(text);
+    });
+
+    await page.goto("/design-system");
+    await expect(page.locator('[data-section="buttons"]').first()).toBeVisible();
+    await expect(page.locator('[data-section="pills"]').first()).toBeVisible();
+    await expect(page.locator('[data-section="surfaces"]').first()).toBeVisible();
+    await expect(page.locator('[data-section="forms"]').first()).toBeVisible();
+    await expect(page.locator('[data-section="overlays"]').first()).toBeVisible();
+    await expect(page.locator('[data-section="navigation"]').first()).toBeVisible();
+    await expect(page.locator('[data-section="feedback"]').first()).toBeVisible();
+    expect(errors).toEqual([]);
+  });
+
+  test("opens a Dialog from the overlays section and closes it via Escape", async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name === "mobile", "desktop covers the multi-pane showcase");
+    await page.goto("/design-system");
+    // Side-by-side layout renders both light and dark panes — open dialog
+    // from the first pane only to keep state assertions deterministic.
+    const overlays = page.locator('[data-section="overlays"]').first();
+    await overlays.getByRole("button", { name: "Open dialog" }).click();
+    await expect(page.getByRole("dialog")).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(page.getByRole("dialog")).toBeHidden();
+  });
+
+  test("Tabs strip switches active tab on click", async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name === "mobile", "desktop covers the multi-pane showcase");
+    await page.goto("/design-system");
+    const nav = page.locator('[data-section="navigation"]').first();
+    const tablist = nav.locator('[role="tablist"]').first();
+    await tablist.getByRole("tab", { name: "Diff" }).click();
+    await expect(tablist).toHaveAttribute("data-active", "diff");
+  });
+
+  test("Toast trigger emits a toast and it auto-dismisses", async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name === "mobile", "desktop covers the multi-pane showcase");
+    await page.goto("/design-system");
+    const feedback = page.locator('[data-section="feedback"]').first();
+    await feedback.getByRole("button", { name: "Default" }).click();
+    const toaster = page.locator('[data-component="toaster"]').first();
+    await expect(toaster).toContainText("Default toast");
+    // Default duration is 5s; allow a small buffer for the dismiss to settle.
+    await expect(toaster).not.toContainText("Default toast", { timeout: 8_000 });
+  });
+});
diff --git a/e2e/operator-cockpit.spec.ts b/e2e/operator-cockpit.spec.ts
index 377bd085..664ed7ba 100644
--- a/e2e/operator-cockpit.spec.ts
+++ b/e2e/operator-cockpit.spec.ts
@@ -222,7 +222,11 @@ test("dialogs render near viewport center on desktop and tablet", async ({ page,
 
     // 2. Create-workspace modal (Plus button in navigator). Has more content
     // and a 90vh cap, so vertical slack is wider; horizontal must still be
-    // tight to catch the original "drifted right" symptom.
+    // tight to catch the original "drifted right" symptom. Migrated to
+    // Radix Dialog — selector targets the portal-rendered role="dialog"
+    // by its accessible name. NB the dialog title rendered by modals.tsx
+    // is "New workspace" (not "Create workspace" — that's the navigator
+    // button's aria-label that opens it).
     await page.getByRole("button", { name: "Create workspace" }).click();
     const createWorkspaceDialog = page.getByRole("dialog", { name: "New workspace" });
     await assertCentered(createWorkspaceDialog, "create-workspace modal", { verticalSlack: 32 });
diff --git a/playwright.config.ts b/playwright.config.ts
index ae8e7437..4ed20ae0 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -106,7 +106,7 @@ export default defineConfig({
       timeout: 120_000,
     },
     {
-      command: `CITADEL_DAEMON_URL=${daemonBase} CITADEL_WEB_PORT=${webPort} CITADEL_E2E_RUN_ID=${e2eRunId} sh -c 'cd apps/web && exec node node_modules/vite/bin/vite.js --host 0.0.0.0'`,
+      command: `NODE_ENV=development CITADEL_DAEMON_URL=${daemonBase} CITADEL_WEB_PORT=${webPort} CITADEL_E2E_RUN_ID=${e2eRunId} sh -c 'cd apps/web && exec node node_modules/vite/bin/vite.js --host 0.0.0.0'`,
       url: webBase,
       reuseExistingServer: false,
       timeout: 30_000,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d3ddde3c..df9a4967 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -162,9 +162,18 @@ importers:
       '@pierre/diffs':
         specifier: 1.2.7
         version: 1.2.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-slot':
         specifier: ^1.2.4
         version: 1.2.4(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.13
+        version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@tanstack/react-query':
         specifier: ^5.90.10
         version: 5.100.10(react@19.2.6)
@@ -930,6 +939,21 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/react-dom@2.1.8':
+    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -973,6 +997,35 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -982,6 +1035,155 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-slot@1.2.4':
     resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
     peerDependencies:
@@ -991,6 +1193,111 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-tabs@1.1.13':
+    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
@@ -1431,6 +1738,10 @@ packages:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   array-flatten@1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 
@@ -1588,6 +1899,9 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -1731,6 +2045,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -2117,6 +2435,36 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react@19.2.6:
     resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
     engines: {node: '>=0.10.0'}
@@ -2291,6 +2639,9 @@ packages:
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   tsx@4.22.0:
     resolution: {integrity: sha512-8ccZMPD69s1AbKXx0C5ddTNZfNjwV04iIKgjZmKfKxMynEtSYcK0Lh7iQFh53fI5Yu4pb9usgAiqyPmEONaALg==}
     engines: {node: '>=18.0.0'}
@@ -2333,6 +2684,26 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
@@ -2881,6 +3252,23 @@ snapshots:
   '@esbuild/win32-x64@0.28.0':
     optional: true
 
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/react-dom@2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
+  '@floating-ui/utils@0.2.11': {}
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -2931,12 +3319,177 @@ snapshots:
     dependencies:
       playwright: 1.60.0
 
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.6)':
     dependencies:
       react: 19.2.6
     optionalDependencies:
       '@types/react': 19.2.14
 
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.6)
+      aria-hidden: 1.2.6
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.6)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
@@ -2944,6 +3497,101 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/rect@1.1.1': {}
+
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
   '@rollup/rollup-android-arm-eabi@4.60.4':
@@ -3349,6 +3997,10 @@ snapshots:
 
   ansi-styles@6.2.3: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   array-flatten@1.1.1: {}
 
   assertion-error@2.0.1: {}
@@ -3483,6 +4135,8 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
+  detect-node-es@1.1.0: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
@@ -3710,6 +4364,8 @@ snapshots:
       hasown: 2.0.3
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -4049,6 +4705,33 @@ snapshots:
 
   react-refresh@0.17.0: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.6)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.6)
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.6)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.6)
+      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.6
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   react@19.2.6: {}
 
   regex-recursion@6.0.2:
@@ -4256,6 +4939,8 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
+  tslib@2.8.1: {}
+
   tsx@4.22.0:
     dependencies:
       esbuild: 0.28.0
@@ -4302,6 +4987,21 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.6
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   use-sync-external-store@1.6.0(react@19.2.6):
     dependencies:
       react: 19.2.6
diff --git a/scripts/checks/architecture-boundaries.ts b/scripts/checks/architecture-boundaries.ts
index 2f32c8ab..dfd8b5f8 100644
--- a/scripts/checks/architecture-boundaries.ts
+++ b/scripts/checks/architecture-boundaries.ts
@@ -49,10 +49,10 @@ const violations: string[] = [];
 for (const rule of rules) {
   for (const file of walk(path.join(root, rule.scope))) {
     // Architecture boundaries protect production code. Test files
-    // (*.test.ts, *.test.tsx) legitimately introspect source files — e.g.
+    // (*.test.ts, *.test.tsx, *.test.js, *.test.jsx) legitimately introspect source files — e.g.
     // reading CSS via node:fs to run regex audits, or shimming DOM APIs
     // — so exempt them from the import allowlist.
-    if (/\.test\.(ts|tsx)$/.test(file)) continue;
+    if (/\.test\.(ts|tsx|js|jsx)$/.test(file)) continue;
     const text = fs.readFileSync(file, "utf8");
     for (const forbidden of rule.forbidden) {
       if (text.includes(`from "${forbidden}`) || text.includes(`from '${forbidden}`)) {
diff --git a/specs/B.8-ui-performance-quality.md b/specs/B.8-ui-performance-quality.md
index 17b31fa7..0565858d 100644
--- a/specs/B.8-ui-performance-quality.md
+++ b/specs/B.8-ui-performance-quality.md
@@ -9,7 +9,7 @@
 [~] 1. Citadel uses a workspace-first cockpit layout.
 [~] 2. Settings is secondary to the cockpit.
 [ ] 3. The UI is calm, dense, premium, and operational.
-[ ] 4. shadcn-style components are used where they improve consistency and speed.
+[~] 4. shadcn-style components are used where they improve consistency and speed. First wave of primitives shipped under `apps/web/src/components/ui/` (Button, Badge, Card, Panel, Input/Textarea/Select/Label/FormField/HelpText, Tabs, Dialog, Tooltip, Chip, IconButton, EmptyState, Skeleton, Toast); see `apps/web/src/design-system/README.md`. Remaining surface migrations deferred to follow-up PRs.
 [~] 5. The UI has theme support. The theme selector is a single cycling button with three states (Light / Dark / System); System resolves via `prefers-color-scheme`. Toggling the cockpit theme re-themes every open terminal in place through the xterm renderer — no full reload, no confirm prompt, and no terminal-session restart. Rapid toggles coalesce through React state, and OS-driven theme flips on the System setting follow the same code path.
 [ ] 6. Workspace rows are compact and scannable.
 [ ] 7. Status language is concrete and operator-facing.
diff --git a/vitest.config.ts b/vitest.config.ts
index b5493302..eb832548 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -28,7 +28,13 @@ export default defineConfig({
     alias: [...workspaceAliases, { find: /^@citadel\/contracts\/(.+)$/, replacement: `${contractsSrc}/$1.ts` }],
   },
   test: {
-    include: ["packages/*/src/**/*.test.ts", "apps/*/src/**/*.test.ts", "scripts/**/*.test.ts"],
+    include: [
+      "packages/*/src/**/*.test.ts",
+      "packages/*/src/**/*.test.tsx",
+      "apps/*/src/**/*.test.ts",
+      "apps/*/src/**/*.test.tsx",
+      "scripts/**/*.test.ts",
+    ],
     exclude: ["**/node_modules/**", "e2e/**", "**/dist/**", "**/coverage/**"],
     setupFiles: ["./vitest.setup.ts"],
     pool: "forks",