diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b12b9fc9..7e3ffa82 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -81,15 +81,64 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v5
         with:
+          # Not pinned to web/package.json's `engines` floor of 22.12.0 — the
+          # `frontend-floor` job below covers that. The *test* toolchain needs
+          # more than the app itself does (jsdom declares `^22.22.2 ||
+          # ^24.15.0 || >=26.0.0`), so running the suite at the floor would be
+          # running it outside its own supported range.
           node-version: "22"
           cache: npm
           cache-dependency-path: web/package-lock.json
 
       - name: Install dependencies
-        run: npm ci
+        # --strict-peer-deps turns an unsatisfiable peer range from a warning
+        # into a failure. The default `npm ci` installs such a dependency anyway
+        # and says nothing, but anyone whose npm has strict peers on cannot
+        # install the lockfile at all. This job catches that here instead.
+        # An `overrides` entry in web/package.json is how to settle one.
+        #
+        # Deliberately NOT --engine-strict. npm applies that to every package in
+        # the lockfile, including dev-only tooling whose Node floors are already
+        # higher than anything we would declare as Nerve's (jsdom 22.22.2,
+        # undici 22.19.0) — so it cannot express "the shipped dependencies fit
+        # the declared floor", which is the property worth checking.
+        run: npm ci --strict-peer-deps
 
       - name: Build frontend (tsc -b && vite build)
         run: npm run build
 
       - name: Run test suite (Vitest)
         run: npm test
+
+  frontend-floor:
+    # The Node floor is a support claim: install.sh refuses anything older,
+    # README and docs/setup.md tell people to install it, and web/package.json
+    # declares it in `engines`. This job is what keeps those four from drifting
+    # apart — it installs and builds on exactly the oldest Node we accept.
+    #
+    # Install and build only; see the note on `frontend-build` for why the test
+    # suite does not run down here.
+    name: Frontend install floor (Node 22.12.0)
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    defaults:
+      run:
+        working-directory: web
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Set up Node.js at the declared floor
+        uses: actions/setup-node@v5
+        with:
+          # Exact, and it has to stay in step with `engines.node` in
+          # web/package.json and MIN_NODE_VERSION in install.sh.
+          node-version: "22.12.0"
+          cache: npm
+          cache-dependency-path: web/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci --strict-peer-deps
+
+      - name: Build frontend (tsc -b && vite build)
+        run: npm run build
diff --git a/README.md b/README.md
index 7a67e9eb..0b49bdef 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ The installer handles everything — installs dependencies (Python, Node.js, uv)
 <details>
 <summary><strong>Manual install</strong></summary>
 
-**Prerequisites:** [Git](https://git-scm.com/), [Python 3.13+](https://www.python.org/), [uv](https://docs.astral.sh/uv/), [Node.js 18+](https://nodejs.org/)
+**Prerequisites:** [Git](https://git-scm.com/), [Python 3.13+](https://www.python.org/), [uv](https://docs.astral.sh/uv/), [Node.js 22.12+](https://nodejs.org/)
 
 ```bash
 git clone https://github.com/ClickHouse/nerve.git && cd nerve
@@ -262,7 +262,7 @@ See [docs/config.md](docs/config.md) for all options.
 
 - [Python](https://www.python.org/) 3.13+
 - [uv](https://docs.astral.sh/uv/) (recommended package manager)
-- [Node.js](https://nodejs.org/) 18+ (for web UI build)
+- [Node.js](https://nodejs.org/) 22.12+ (for web UI build)
 - [Claude Code CLI](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview) (bundled with `claude-agent-sdk`)
 - Anthropic API key **or** Claude subscription via [CLIProxyAPI](https://github.com/router-for-me/CLIProxyAPI) proxy
 - Optional: OpenAI API key (for vector-based memory search — without it, LLM-based recall is used), Telegram bot token, [gog](https://github.com/googleworkspace/cli) CLI, [gh](https://cli.github.com/) CLI
diff --git a/docs/setup.md b/docs/setup.md
index 1a64018a..cc281b21 100644
--- a/docs/setup.md
+++ b/docs/setup.md
@@ -24,7 +24,7 @@ The `nerve init` wizard walks you through deployment, mode selection, API keys,
 
 ### Server deployment
 - Python 3.13+
-- Node.js 18+ (for web UI build)
+- Node.js 22.12+ (for web UI build)
 - Anthropic API key **or** Claude subscription (via CLIProxyAPI proxy)
 
 ### Docker deployment
diff --git a/install.sh b/install.sh
index d063ba93..32ab1fce 100755
--- a/install.sh
+++ b/install.sh
@@ -29,8 +29,12 @@ CONFIG_DIR="${NERVE_CONFIG_DIR:-$INSTALL_DIR}"
 # failed at `uv pip install -e .` with an opaque dependency conflict.
 MIN_PYTHON_MINOR=13
 PREFERRED_PYTHON_MINOR=13
-# Vite 7 (see web/package.json) requires Node 20.19+ or 22.12+.
-MIN_NODE_VERSION="20.19.0"
+# 22.12, not Vite 7's 20.19 floor: @clickhouse/click-ui declares
+# `engines.node >=22.12.0`, and web/package.json declares the same.
+# Provisioning a 20.19 here would install a Node the dependency graph refuses
+# under a strict (`--engine-strict`) install, which is a support claim we
+# cannot back.
+MIN_NODE_VERSION="22.12.0"
 NON_INTERACTIVE="${NERVE_NON_INTERACTIVE:-0}"
 AUTO_YES="${NERVE_YES:-0}"
 [ "$NON_INTERACTIVE" = "1" ] && AUTO_YES=1
@@ -331,7 +335,7 @@ ensure_python() {
     success "Python $installed_py_ver installed via system packages"
 }
 
-# --- Dependency: Node.js 18+ ---
+# --- Dependency: Node.js (floor in MIN_NODE_VERSION) ---
 
 ensure_node() {
     if command_exists node; then
@@ -341,7 +345,7 @@ ensure_node() {
             success "Node.js v$ver"
             return
         fi
-        warn "Node.js v$ver is too old (need v${MIN_NODE_VERSION}+ or v22.12+)"
+        warn "Node.js v$ver is too old (need v${MIN_NODE_VERSION}+)"
     fi
 
     info "Node.js v${MIN_NODE_VERSION}+ is not installed"
@@ -372,7 +376,10 @@ ensure_node() {
             run_as_root pacman -S --noconfirm nodejs npm
             ;;
         zypper)
-            run_as_root zypper install -y nodejs20
+            # nodejs22, not nodejs20: openSUSE's nodejs20 tops out below the
+            # MIN_NODE_VERSION floor, so it would install and then fail the
+            # check below.
+            run_as_root zypper install -y nodejs22
             ;;
         brew)
             brew install node
@@ -389,7 +396,7 @@ ensure_node() {
             ;;
         *)
             error "Don't know how to install Node.js on $DISTRO."
-            error "Install Node.js ${MIN_NODE_MAJOR}+ manually and re-run."
+            error "Install Node.js v${MIN_NODE_VERSION}+ manually and re-run."
             exit 1
             ;;
     esac
@@ -399,7 +406,20 @@ ensure_node() {
         exit 1
     fi
 
-    success "Node.js $(node --version) installed"
+    # A distro's "node" package is whatever that distro froze, and nodesource's
+    # setup_lts.x follows whatever upstream calls LTS today. Neither is promised
+    # to clear our floor, and a too-old Node here surfaces much later as an
+    # opaque syntax error inside a dependency. Check what actually landed.
+    local new_ver
+    new_ver="$(node --version | tr -d 'v')"
+    if ! version_ge "$new_ver" "$MIN_NODE_VERSION"; then
+        error "Installed Node.js v${new_ver}, but v${MIN_NODE_VERSION}+ is required."
+        error "The package for $DISTRO is behind. Install a newer Node.js and re-run:"
+        error "  https://nodejs.org/en/download/"
+        exit 1
+    fi
+
+    success "Node.js v${new_ver} installed"
 }
 
 # --- Clone or Update Repository ---
diff --git a/nerve/bootstrap.py b/nerve/bootstrap.py
index a8bc9d73..b0770fd0 100644
--- a/nerve/bootstrap.py
+++ b/nerve/bootstrap.py
@@ -1913,7 +1913,7 @@ def _build_web_ui(self) -> None:
         if not shutil.which("node"):
             click.secho(
                 "  ⚠ Node.js not found — web UI not built.\n"
-                "    Install Node.js 18+ and run: cd web && npm ci && npm run build",
+                "    Install Node.js 22.12+ and run: cd web && npm ci && npm run build",
                 fg="yellow",
             )
             return
diff --git a/web/index.html b/web/index.html
index 0211fed6..aa5d0228 100644
--- a/web/index.html
+++ b/web/index.html
@@ -16,12 +16,31 @@
          there, 404 otherwise. Not a bundled asset: it is per-instance config. -->
     <link rel="icon" href="/favicon.ico" />
     <title>Nerve</title>
+    <!-- Pre-paint theme stamp. Must mirror themeStore's getInitialPreference()
+         and resolve() exactly, or the first frame disagrees with the app.
+
+         Both attributes are needed and they are not interchangeable:
+           data-theme      Nerve's own preference. Absent means "follow the OS",
+                           which a media query in index.css handles.
+           data-cui-theme  Click UI's tokens. It has no "system" value and it
+                           defaults to LIGHT when the attribute is missing —
+                           while Nerve defaults to dark. Leaving it unset is a
+                           white flash on every cold load. -->
     <script>
-      (function() {
+      (function () {
         var p = localStorage.getItem('nerve-theme');
-        if (p === 'light' || p === 'dark') {
+        if (p !== 'light' && p !== 'dark' && p !== 'system') p = 'dark';
+        if (p !== 'system') {
           document.documentElement.setAttribute('data-theme', p);
         }
+        var resolved =
+          p === 'system'
+            ? (window.matchMedia &&
+               window.matchMedia('(prefers-color-scheme: light)').matches
+                ? 'light'
+                : 'dark')
+            : p;
+        document.documentElement.setAttribute('data-cui-theme', resolved);
       })();
     </script>
   </head>
diff --git a/web/package-lock.json b/web/package-lock.json
index a488fc18..f5f4825b 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,17 +8,22 @@
       "name": "web",
       "version": "0.0.0",
       "dependencies": {
+        "@clickhouse/click-ui": "0.10.0",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
+        "@fontsource/inconsolata": "^5.3.0",
+        "@fontsource/inter": "^5.3.0",
         "@pierre/diffs": "^1.2.7",
+        "dayjs": "^1.11.21",
         "highlight.js": "^11.11.1",
         "lucide-react": "^0.575.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.17.0",
         "rehype-highlight": "^7.0.2",
-        "remark-gfm": "^4.0.1"
+        "remark-gfm": "^4.0.1",
+        "tailwind-merge": "^3.6.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
@@ -43,6 +48,9 @@
         "vite": "^7.3.2",
         "vitest": "^3.2.7",
         "zustand": "^5.0.11"
+      },
+      "engines": {
+        "node": ">=22.12.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -357,7 +365,6 @@
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
       "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -434,6 +441,48 @@
         "specificity": "bin/cli.js"
       }
     },
+    "node_modules/@clickhouse/click-ui": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@clickhouse/click-ui/-/click-ui-0.10.0.tgz",
+      "integrity": "sha512-uF7efYqbOWSxCNhTecueNcvIlWCpHerAJ6RjZs3Xcr1UKojJJzI2cIZX/o+0+3vZTRVdUDXPOKVTB1w07EHy2A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@h6s/calendar": "2.2.0",
+        "@radix-ui/react-accordion": "1.2.12",
+        "@radix-ui/react-avatar": "1.1.1",
+        "@radix-ui/react-checkbox": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.2",
+        "@radix-ui/react-dialog": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-dropdown-menu": "2.1.2",
+        "@radix-ui/react-hover-card": "1.1.2",
+        "@radix-ui/react-popover": "1.1.2",
+        "@radix-ui/react-popper": "1.2.1",
+        "@radix-ui/react-radio-group": "1.2.1",
+        "@radix-ui/react-separator": "1.1.1",
+        "@radix-ui/react-switch": "1.1.1",
+        "@radix-ui/react-tabs": "1.1.1",
+        "@radix-ui/react-toast": "1.2.2",
+        "@radix-ui/react-tooltip": "1.1.2",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "dayjs": "^1.11.19",
+        "lodash-es": "^4.17.23",
+        "react-sortablejs": "^6.1.4",
+        "react-syntax-highlighter": "^16.1.0",
+        "react-virtualized-auto-sizer": "^1.0.20",
+        "react-window": "^1.8.9",
+        "sortablejs": "^1.15.0"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.11.19",
+        "react": "^18.3.1 || ^19.0.0",
+        "react-dom": "^18.3.1 || ^19.0.0"
+      }
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.0.tgz",
@@ -1244,6 +1293,78 @@
         }
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
+      "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.8.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT"
+    },
+    "node_modules/@fontsource/inconsolata": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/inconsolata/-/inconsolata-5.3.0.tgz",
+      "integrity": "sha512-12UZvQzR9rcgFv1Wb2vy9NvMqleh4fVZ9W5Ww/S3CamaRLeUfCkfXersbiqcyCkH82etGTTRyHd5cJYDJ2W27w==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/inter": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.3.0.tgz",
+      "integrity": "sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@h6s/calendar": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@h6s/calendar/-/calendar-2.2.0.tgz",
+      "integrity": "sha512-o1fb4RlMWDRIOiMEX65vN5qDTiD/OyC++EkJzmoz9l1vUOkN89gTE+wNE83XZBi3hbYqMV3CNhgKf51n/0hcBw==",
+      "peerDependencies": {
+        "react": ">= 18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1392,25 +1513,3461 @@
         "react-dom": "^18.3.1 || ^19.0.0"
       }
     },
-    "node_modules/@pierre/theme": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@pierre/theme/-/theme-1.0.3.tgz",
-      "integrity": "sha512-sWHv11TMoqKxKDgTIk5VbhQjdPhs8DCcBxbjh3mRlS3YOM/OcrWoGX6MM8eBGn9cUu3M46Py0JnxsG2nJaFTuA==",
+    "node_modules/@pierre/theme": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@pierre/theme/-/theme-1.0.3.tgz",
+      "integrity": "sha512-sWHv11TMoqKxKDgTIk5VbhQjdPhs8DCcBxbjh3mRlS3YOM/OcrWoGX6MM8eBGn9cUu3M46Py0JnxsG2nJaFTuA==",
+      "license": "MIT",
+      "engines": {
+        "vscode": "^1.0.0"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.1.tgz",
+      "integrity": "sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.1.tgz",
+      "integrity": "sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz",
+      "integrity": "sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.2.tgz",
+      "integrity": "sha512-99EatSTpW+hRYHt7m8wdDlLtkmTovEe8Z/hnxUPV+SKuuNL5HWNhQI4QSdjZqNSgXHay2z4M3Dym73j9p2Gx5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-menu": "2.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-context-menu/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.2.tgz",
+      "integrity": "sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.2.tgz",
+      "integrity": "sha512-Y5w0qGhysvmqsIy6nQxaPa6mXNKznfoGjOfBgzOjocLxr2XlSjqBMYQQL+FfyogsMuX+m8cZyQGYhJxvxUzO4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.2.tgz",
+      "integrity": "sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.2.tgz",
+      "integrity": "sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
+      "integrity": "sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.1.tgz",
+      "integrity": "sha512-kdbv54g4vfRjja9DNWPMxKvXblzqbpEC8kspEkZ6dVP7kQksGCn+iZHkcCz2nb00+lPdRvxrqy4WrvvV1cNqrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.1.tgz",
+      "integrity": "sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.1.tgz",
+      "integrity": "sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.1.tgz",
+      "integrity": "sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.2.tgz",
+      "integrity": "sha512-Z6pqSzmAP/bFJoqMAston4eSNa+ud44NSZTiZUmUen+IOZ5nBY8kzuU5WDBVyFXPtcW6yUalOHsxM/BP6Sv8ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz",
+      "integrity": "sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
+      "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
+      "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
+      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
       "license": "MIT",
-      "engines": {
-        "vscode": "^1.0.0"
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
+      "license": "MIT"
     },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.3",
@@ -2413,11 +5970,17 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -2427,12 +5990,19 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.9.tgz",
+      "integrity": "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -2983,6 +6553,18 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -3226,7 +6808,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
       "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -3243,6 +6824,33 @@
         "node": ">= 16"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3340,7 +6948,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -3372,6 +6980,12 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.21",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
+      "integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -3445,6 +7059,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -3837,6 +7457,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -3923,6 +7556,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3948,6 +7589,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/glob": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
@@ -4052,6 +7702,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-html": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
@@ -4132,6 +7795,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hermes-estree": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -4158,6 +7838,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
@@ -4257,7 +7943,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
       "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -4268,7 +7953,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
       "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-alphabetical": "^2.0.0",
@@ -4283,7 +7967,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
       "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -4327,7 +8010,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
       "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -4859,6 +8541,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5287,6 +8975,12 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -6013,7 +9707,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
       "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^2.0.0",
@@ -6033,7 +9726,6 @@
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/parse5": {
@@ -6199,6 +9891,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/property-information": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
@@ -6286,6 +9987,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "7.17.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.17.0.tgz",
@@ -6324,6 +10072,114 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-sortablejs": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/react-sortablejs/-/react-sortablejs-6.1.4.tgz",
+      "integrity": "sha512-fc7cBosfhnbh53Mbm6a45W+F735jwZ1UFIYSrIqcO/gRIFoDyZeMtgKlpV4DdyQfbCzdh5LoALLTDRxhMpTyXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "2.3.1",
+        "tiny-invariant": "1.2.0"
+      },
+      "peerDependencies": {
+        "@types/sortablejs": "1",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0",
+        "sortablejs": "1"
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/react-syntax-highlighter": {
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz",
+      "integrity": "sha512-PjVawBGy80C6YbC5DDZJeUjBmC7skaoEUdvfFQediQHgCL7aKyVHe57SaJGfQsloGDac+gCpTfRdtxzWWKmCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.30.0",
+        "refractor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 16.20.2"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
+    "node_modules/react-syntax-highlighter/node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/react-syntax-highlighter/node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "license": "MIT",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
+      "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-window": {
+      "version": "1.8.11",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
+      "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -6338,6 +10194,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/refractor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-5.0.0.tgz",
+      "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
@@ -6605,6 +10477,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.7.tgz",
+      "integrity": "sha512-Kk8wLQPlS+yi1ZEf48a4+fzHa4yxjC30M/Sr2AnQu+f/MPwvvX9XjZ6OWejiz8crBsLwSq8GHqaxaET7u6ux0A==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6836,6 +10714,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
@@ -6911,6 +10799,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
+      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -7267,6 +11161,49 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "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
+        }
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
diff --git a/web/package.json b/web/package.json
index e0ccea87..22716320 100644
--- a/web/package.json
+++ b/web/package.json
@@ -3,6 +3,14 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "overrides": {
+    "@clickhouse/click-ui": {
+      "react-remove-scroll": "2.7.2"
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
@@ -12,17 +20,22 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@clickhouse/click-ui": "0.10.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@fontsource/inconsolata": "^5.3.0",
+    "@fontsource/inter": "^5.3.0",
     "@pierre/diffs": "^1.2.7",
+    "dayjs": "^1.11.21",
     "highlight.js": "^11.11.1",
     "lucide-react": "^0.575.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.17.0",
     "rehype-highlight": "^7.0.2",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
diff --git a/web/src/ThemedApp.tsx b/web/src/ThemedApp.tsx
new file mode 100644
index 00000000..08beaa7a
--- /dev/null
+++ b/web/src/ThemedApp.tsx
@@ -0,0 +1,30 @@
+import { ClickUIProvider } from '@clickhouse/click-ui'
+import App from './App'
+import { useToastHotkeyShim } from './hooks/useToastHotkeyShim'
+import { useThemeStore } from './stores/themeStore'
+
+/**
+ * Feeds Click UI the theme Nerve's own store already resolved.
+ *
+ * Lives here rather than in `main.tsx` because that file is the app's entry
+ * point: it exists to run side effects (the cascade-order-critical `index.css`
+ * import, the font faces, `createRoot`) and exports nothing. A component
+ * declared alongside those side effects cannot be hot-reloaded — React Fast
+ * Refresh only tracks components in modules whose exports are all components —
+ * so every theme tweak would full-reload the page.
+ */
+export function ThemedApp() {
+  const resolved = useThemeStore((s) => s.resolved)
+  // Lives here because this is the component that mounts `ClickUIProvider`, so
+  // the workaround and the thing it works around are removed together. Mount
+  // order does not matter — see the note in the hook.
+  useToastHotkeyShim()
+  return (
+    // persistTheme={false}: themeStore owns persistence (key `nerve-theme`, and
+    // it can hold 'system', which Click UI cannot represent). Letting Click UI
+    // also write localStorage would give us two sources of truth that disagree.
+    <ClickUIProvider theme={resolved} persistTheme={false}>
+      <App />
+    </ClickUIProvider>
+  )
+}
diff --git a/web/src/components/Auth/LoginPage.tsx b/web/src/components/Auth/LoginPage.tsx
index 3e0df77f..524ba506 100644
--- a/web/src/components/Auth/LoginPage.tsx
+++ b/web/src/components/Auth/LoginPage.tsx
@@ -1,5 +1,6 @@
 import { useState, type FormEvent } from 'react';
 import { useAuthStore } from '../../stores/authStore';
+import { Button, TextField } from '../ui';
 
 export function LoginPage() {
   const [password, setPassword] = useState('');
@@ -17,22 +18,21 @@ export function LoginPage() {
         className="bg-surface-raised p-8 rounded-lg border border-border-subtle w-80"
       >
         <h1 className="text-xl font-semibold mb-6 text-center">Nerve</h1>
-        <input
+        <TextField
           type="password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           placeholder="Password"
+          aria-label="Password"
           autoFocus
-          className="w-full px-3 py-2 bg-surface-raised border border-border-subtle rounded text-text outline-none focus:border-accent mb-4"
+          className="mb-4"
         />
-        {error && <p className="text-hue-red text-sm mb-3">{error}</p>}
-        <button
-          type="submit"
-          disabled={loading}
-          className="w-full py-2 bg-accent hover:bg-accent-hover text-white rounded font-medium disabled:opacity-50 cursor-pointer"
-        >
+        {error && <p className="text-error text-sm mb-3">{error}</p>}
+        {/* `type="submit"` is explicit: Button defaults to `button`, because
+            almost none of the app's buttons submit a form. This one does. */}
+        <Button type="submit" variant="primary" size="md" fullWidth disabled={loading}>
           {loading ? '...' : 'Login'}
-        </button>
+        </Button>
       </form>
     </div>
   );
diff --git a/web/src/components/Auth/SessionExpiredOverlay.tsx b/web/src/components/Auth/SessionExpiredOverlay.tsx
index 4ab52266..35316ded 100644
--- a/web/src/components/Auth/SessionExpiredOverlay.tsx
+++ b/web/src/components/Auth/SessionExpiredOverlay.tsx
@@ -1,5 +1,6 @@
 import { useState, type FormEvent } from 'react';
 import { useAuthStore } from '../../stores/authStore';
+import { Button, TextField } from '../ui';
 
 /**
  * Password prompt shown *over* the running app when a session expires.
@@ -36,31 +37,25 @@ export function SessionExpiredOverlay() {
         <p className="text-sm text-text-muted mb-6 text-center">
           Your work is still here — log back in to continue.
         </p>
-        <input
+        <TextField
           type="password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           placeholder="Password"
+          aria-label="Password"
           autoFocus
-          className="w-full px-3 py-2 bg-surface-raised border border-border-subtle rounded text-text outline-none focus:border-accent mb-4"
+          className="mb-4"
         />
-        {error && <p className="text-hue-red text-sm mb-3">{error}</p>}
-        <button
-          type="submit"
-          disabled={loading}
-          className="w-full py-2 bg-accent hover:bg-accent-hover text-white rounded font-medium disabled:opacity-50 cursor-pointer"
-        >
+        {error && <p className="text-error text-sm mb-3">{error}</p>}
+        <Button type="submit" variant="primary" size="md" fullWidth disabled={loading}>
           {loading ? '...' : 'Unlock'}
-        </button>
+        </Button>
         {/* Explicit escape hatch. Unlike the overlay this *does* clear unsent
-            drafts, so it is deliberately the secondary action. */}
-        <button
-          type="button"
-          onClick={logout}
-          className="w-full mt-3 text-xs text-text-muted hover:text-text cursor-pointer"
-        >
+            drafts, so it is deliberately the secondary action — `ghost` is the
+            variant that says "this is the quieter of the two". */}
+        <Button variant="ghost" fullWidth onClick={logout} className="mt-3">
           Log out and discard unsent drafts
-        </button>
+        </Button>
       </form>
     </div>
   );
diff --git a/web/src/components/Chat/ApprovalCard.tsx b/web/src/components/Chat/ApprovalCard.tsx
index 1af031b8..be5a1d0b 100644
--- a/web/src/components/Chat/ApprovalCard.tsx
+++ b/web/src/components/Chat/ApprovalCard.tsx
@@ -1,4 +1,5 @@
-import { ShieldQuestion, Terminal, FileDiff, Check, Ban } from 'lucide-react';
+import { ShieldQuestion, Terminal, FileDiff, Check, Ban } from '../ui/icons';
+import { Button } from '../ui';
 import { useChatStore } from '../../stores/chatStore';
 
 /**
@@ -60,21 +61,21 @@ export function ApprovalCard() {
     <div className="mx-4 mb-2 border border-hue-orange/40 rounded-lg bg-surface shadow-lg overflow-hidden">
       <div className="px-3 py-2 flex items-center gap-2 bg-hue-orange/10">
         <Icon size={15} className="text-hue-orange" />
-        <span className="text-[13px] font-medium text-text-primary">{title}</span>
-        <span className="ml-auto text-[11px] text-text-muted">approval required</span>
+        <span className="text-sm font-medium text-text">{title}</span>
+        <span className="ml-auto text-xs text-text-muted">approval required</span>
       </div>
 
       <div className="px-3 py-2 space-y-1.5">
         {command && (
-          <pre className="text-[12px] font-mono bg-surface-deep rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
+          <pre className="text-xs font-mono bg-bg-sunken rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
             {command}
           </pre>
         )}
         {cwd && (
-          <div className="text-[11px] text-text-muted font-mono">in {cwd}</div>
+          <div className="text-xs text-text-muted font-mono">in {cwd}</div>
         )}
         {changes.length > 0 && (
-          <ul className="text-[12px] font-mono space-y-0.5">
+          <ul className="text-xs font-mono space-y-0.5">
             {changes.map((c, i) => (
               <li key={i} className="text-text-secondary">
                 <span className="text-hue-orange mr-1.5">{kindLabel(c.kind)}</span>
@@ -84,23 +85,17 @@ export function ApprovalCard() {
           </ul>
         )}
         {reason && (
-          <div className="text-[12px] text-text-secondary">{reason}</div>
+          <div className="text-xs text-text-secondary">{reason}</div>
         )}
       </div>
 
       <div className="px-3 py-2 flex gap-2 border-t border-border">
-        <button
-          onClick={() => answerInteraction(null)}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-hue-green/15 text-hue-green text-[12px] font-medium hover:bg-hue-green/25 transition-colors"
-        >
+        <Button variant="success" size="sm" onClick={() => answerInteraction(null)}>
           <Check size={13} /> Approve
-        </button>
-        <button
-          onClick={() => denyInteraction('Declined by user.')}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-hue-red/15 text-hue-red text-[12px] font-medium hover:bg-hue-red/25 transition-colors"
-        >
+        </Button>
+        <Button variant="danger" size="sm" onClick={() => denyInteraction('Declined by user.')}>
           <Ban size={13} /> Decline
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/src/components/Chat/AssistantMessage.tsx b/web/src/components/Chat/AssistantMessage.tsx
index 8467506d..9074fd72 100644
--- a/web/src/components/Chat/AssistantMessage.tsx
+++ b/web/src/components/Chat/AssistantMessage.tsx
@@ -1,4 +1,4 @@
-import { Repeat } from 'lucide-react';
+import { Repeat } from '../ui/icons';
 import type { ChatMessage } from '../../types/chat';
 import { BlockRenderer } from './BlockRenderer';
 import { formatMessageTime } from '../../utils/messageTime';
@@ -10,9 +10,9 @@ export function AssistantMessage({ message }: { message: ChatMessage }) {
     return (
       <div className="py-1.5 px-5" data-role="review-loop-milestone">
         <div className="max-w-[var(--chat-width)] mx-auto">
-          <div className="flex gap-3 rounded-lg border-l-2 border-emerald-400/40 bg-emerald-400/[0.04] pl-3 pr-3 py-2">
-            <Repeat size={14} className="text-emerald-400/80 shrink-0 mt-1" />
-            <div className="min-w-0 flex-1 text-[13.5px] [&_p]:my-0.5">
+          <div className="flex gap-3 rounded-lg border-l-2 border-success-border bg-success/5 pl-3 pr-3 py-2">
+            <Repeat size={14} className="text-success/80 shrink-0 mt-1" />
+            <div className="min-w-0 flex-1 text-sm [&_p]:my-0.5">
               <BlockRenderer blocks={message.blocks} />
             </div>
           </div>
@@ -33,7 +33,7 @@ export function AssistantMessage({ message }: { message: ChatMessage }) {
         </div>
         {message.created_at && (
           <div
-            className="mt-1 text-right text-[10px] text-text-faint/60 tabular-nums"
+            className="mt-1 text-right text-2xs text-text-faint tabular-nums"
             title={new Date(message.created_at).toLocaleString()}
           >
             {formatMessageTime(message.created_at)}
diff --git a/web/src/components/Chat/BackendSelector.tsx b/web/src/components/Chat/BackendSelector.tsx
index b850d0ed..b3f1dc6c 100644
--- a/web/src/components/Chat/BackendSelector.tsx
+++ b/web/src/components/Chat/BackendSelector.tsx
@@ -1,4 +1,4 @@
-import { Sparkle, SquareTerminal } from 'lucide-react';
+import { Sparkle, SquareTerminal } from '../ui/icons';
 import { useChatStore } from '../../stores/chatStore';
 
 /**
@@ -19,12 +19,12 @@ const STYLES: Record<string, {
 }> = {
   claude: {
     icon: Sparkle,
-    active: 'text-hue-orange bg-orange-500/10 shadow-[inset_0_0_0_1px_rgba(249,115,22,0.3)]',
+    active: 'text-hue-orange bg-hue-orange/10 ring-1 ring-inset ring-hue-orange/30',
     dot: 'bg-hue-orange',
   },
   codex: {
     icon: SquareTerminal,
-    active: 'text-hue-teal bg-teal-400/10 shadow-[inset_0_0_0_1px_rgba(45,212,191,0.3)]',
+    active: 'text-hue-teal bg-hue-teal/10 ring-1 ring-inset ring-hue-teal/30',
     dot: 'bg-hue-teal',
   },
 };
@@ -59,7 +59,7 @@ export function BackendSelector({ disabled }: { disabled?: boolean }) {
             title={opt.available === false
               ? `${opt.label} unavailable — ${opt.reason ?? 'preflight failed'}`
               : `${opt.label} — ${opt.model}${opt.id === backendDefault ? ' (default)' : ''}. Applies to this new chat; the choice is fixed once the conversation starts.`}
-            className={`h-8 px-2.5 rounded-lg flex items-center gap-1.5 text-[13px] font-medium transition-all cursor-pointer disabled:opacity-30 disabled:cursor-default ${
+            className={`h-8 px-2.5 rounded-lg flex items-center gap-1.5 text-sm font-medium transition-all cursor-pointer disabled:opacity-30 disabled:cursor-default ${
               isActive
                 ? style.active
                 : 'text-text-muted hover:text-text-secondary hover:bg-surface'
diff --git a/web/src/components/Chat/BackgroundJobs.tsx b/web/src/components/Chat/BackgroundJobs.tsx
index 83909999..2e2ffd76 100644
--- a/web/src/components/Chat/BackgroundJobs.tsx
+++ b/web/src/components/Chat/BackgroundJobs.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
-import { Loader2, Terminal, Bot, Check, AlertTriangle } from 'lucide-react';
+import { Loader2, Terminal, Bot, Check, AlertTriangle } from '../ui/icons';
+import { Badge, Button } from '../ui';
 import { useChatStore } from '../../stores/chatStore';
 import type { Session } from '../../types/chat';
 
@@ -55,15 +56,17 @@ export function BackgroundJobs({ sessions, activeSession, onSelect }: {
       onMouseLeave={() => setHovering(false)}
     >
       {/* Badge */}
-      <div className={`flex items-center gap-1.5 px-2 py-1 rounded text-[12px] cursor-default ${
-        runningTasks.length > 0
-          ? 'text-hue-emerald bg-emerald-400/10'
-          : 'text-text-faint bg-surface-raised'
-      }`}>
+      <Badge
+        size="sm"
+        tone={runningTasks.length > 0 ? 'success' : 'neutral'}
+        className="gap-1.5 px-2 py-1 cursor-default"
+      >
         {runningTasks.length > 0 ? (
+          /* `bg-current` so the pulse always matches whichever tone the badge
+             is wearing, rather than pinning a second green beside it. */
           <span className="relative flex h-2 w-2 shrink-0">
-            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
-            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-current opacity-75" />
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-current" />
           </span>
         ) : (
           <Check size={11} className="shrink-0" />
@@ -79,7 +82,7 @@ export function BackgroundJobs({ sessions, activeSession, onSelect }: {
             + {runningSessions.length} session{runningSessions.length > 1 ? 's' : ''}
           </span>
         )}
-      </div>
+      </Badge>
 
       {/* Dropdown */}
       {hovering && (
@@ -87,7 +90,7 @@ export function BackgroundJobs({ sessions, activeSession, onSelect }: {
           {/* Background tasks (current session) */}
           {backgroundTasks.length > 0 && (
             <>
-              <div className="px-3 py-1.5 text-[10px] text-text-faint uppercase tracking-wider">
+              <div className="px-3 py-1.5 text-2xs text-text-faint uppercase tracking-wider">
                 Background Tasks
               </div>
               {backgroundTasks.map(task => {
@@ -96,7 +99,7 @@ export function BackgroundJobs({ sessions, activeSession, onSelect }: {
                 return (
                   <div
                     key={task.task_id}
-                    className="flex items-center gap-2 px-3 py-1.5 text-[12px]"
+                    className="flex items-center gap-2 px-3 py-1.5 text-xs leading-tight"
                   >
                     {task.status === 'running' ? (
                       <Loader2 size={12} className="shrink-0 text-hue-emerald animate-spin" />
@@ -108,7 +111,7 @@ export function BackgroundJobs({ sessions, activeSession, onSelect }: {
                     <span className={`flex-1 min-w-0 truncate ${statusColor}`}>
                       {task.label}
                     </span>
-                    <span className="shrink-0 text-[10px] text-text-faint flex items-center gap-1">
+                    <span className="shrink-0 text-2xs text-text-faint flex items-center gap-1">
                       <Icon size={10} />
                       {task.status === 'running' ? formatElapsed(task.startedAt) : task.status}
                     </span>
@@ -122,21 +125,24 @@ export function BackgroundJobs({ sessions, activeSession, onSelect }: {
           {runningSessions.length > 0 && (
             <>
               {backgroundTasks.length > 0 && <div className="border-t border-border my-1" />}
-              <div className="px-3 py-1.5 text-[10px] text-text-faint uppercase tracking-wider">
+              <div className="px-3 py-1.5 text-2xs text-text-faint uppercase tracking-wider">
                 Other Running Sessions
               </div>
               {runningSessions.map(s => (
-                <button
+                <Button
                   key={s.id}
+                  variant="subtle"
+                  size="sm"
+                  fullWidth
                   onClick={() => { setHovering(false); onSelect(s.id); }}
-                  className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-[12px] text-text-muted hover:bg-border-subtle hover:text-text transition-colors cursor-pointer"
+                  className="justify-start gap-2 px-3 py-1.5 rounded-none text-left leading-tight"
                 >
                   <Loader2 size={12} className="shrink-0 text-hue-emerald animate-spin" />
                   <span className="flex-1 min-w-0 truncate">{s.title || s.id}</span>
-                  <span className="shrink-0 text-[10px] text-text-faint">
+                  <span className="shrink-0 text-2xs text-text-faint">
                     {s.source || 'web'}
                   </span>
-                </button>
+                </Button>
               ))}
             </>
           )}
diff --git a/web/src/components/Chat/BlockRenderer.tsx b/web/src/components/Chat/BlockRenderer.tsx
index b0d9a7c6..c99ea06e 100644
--- a/web/src/components/Chat/BlockRenderer.tsx
+++ b/web/src/components/Chat/BlockRenderer.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Download, FileText, Clock, RefreshCw, TrendingDown, TrendingUp } from 'lucide-react';
+import { Download, FileText, Clock, RefreshCw, TrendingDown, TrendingUp } from '../ui/icons';
 import type { MessageBlock } from '../../types/chat';
 import { ThinkingBlock } from './ThinkingBlock';
 import { ToolCallBlock } from './ToolCallBlock';
@@ -14,7 +14,7 @@ interface BlockRendererProps {
   streaming?: boolean;
   /** Tailwind bg class for text cursor (default: 'bg-accent'). */
   cursorColor?: string;
-  /** Optional wrapper class for text blocks (e.g. 'text-[13px] my-1'). */
+  /** Optional wrapper class for text blocks (e.g. 'text-sm my-1'). */
   textClassName?: string;
 }
 
@@ -64,7 +64,7 @@ export function BlockRenderer({
                 <span
                   className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full border ${
                     item.downgrade
-                      ? 'border-amber-500/40 bg-amber-500/10 text-amber-300'
+                      ? 'border-warning-border bg-warning-bg text-warning'
                       : 'border-border bg-surface'
                   }`}
                   title={
diff --git a/web/src/components/Chat/ChatInput.tsx b/web/src/components/Chat/ChatInput.tsx
index e541fb5f..76f1d5a2 100644
--- a/web/src/components/Chat/ChatInput.tsx
+++ b/web/src/components/Chat/ChatInput.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useLayoutEffect, useCallback, type KeyboardEvent, type ClipboardEvent, type DragEvent } from 'react';
-import { Send, Square, X, Plus, Trash2, Sparkles, HelpCircle, StickyNote, Paperclip, FileText, Loader2, Repeat, MoreHorizontal, Clock, ChevronDown, ChevronRight } from 'lucide-react';
+import { Send, Square, X, Plus, Trash2, Sparkles, HelpCircle, StickyNote, Paperclip, FileText, Loader2, Repeat, MoreHorizontal, Clock, ChevronRight } from '../ui/icons';
+import { Button, IconButton, Select, TextField } from '../ui';
 import { useChatStore, EMPTY_REVIEW_LOOP } from '../../stores/chatStore';
 import type { QuoteAction, QuoteEntry } from '../../stores/chatStore';
 import { api } from '../../api/client';
@@ -10,11 +11,11 @@ import { BackendSelector } from './BackendSelector';
 import { ReviewLoopPanel } from './ReviewLoopPanel';
 
 const ACTION_CONFIG: Record<QuoteAction, { icon: typeof Plus; label: string; color: string; placeholder: string }> = {
-  add:      { icon: Plus,       label: 'Add',     color: 'var(--theme-accent)', placeholder: 'Instructions...' },
-  remove:   { icon: Trash2,     label: 'Remove',  color: '#ef4444', placeholder: 'Instructions...' },
-  improve:  { icon: Sparkles,   label: 'Improve', color: '#a855f7', placeholder: 'Instructions...' },
-  question: { icon: HelpCircle, label: 'Ask',     color: '#f59e0b', placeholder: 'What do you want to know?' },
-  note:     { icon: StickyNote, label: 'Note',    color: '#6b7280', placeholder: 'Your note...' },
+  add:      { icon: Plus,       label: 'Add',     color: 'var(--theme-accent)',     placeholder: 'Instructions...' },
+  remove:   { icon: Trash2,     label: 'Remove',  color: 'var(--theme-hue-red)',    placeholder: 'Instructions...' },
+  improve:  { icon: Sparkles,   label: 'Improve', color: 'var(--theme-hue-purple)', placeholder: 'Instructions...' },
+  question: { icon: HelpCircle, label: 'Ask',     color: 'var(--theme-hue-amber)',  placeholder: 'What do you want to know?' },
+  note:     { icon: StickyNote, label: 'Note',    color: 'var(--theme-text-muted)', placeholder: 'Your note...' },
 };
 
 // Actions that auto-focus the instruction input (need user input)
@@ -580,7 +581,7 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
       {/* Prompt rewrite preview */}
       {rewrite.status !== 'idle' && (
         <div className="px-4 pt-3 pb-1">
-          <div className="max-w-[var(--chat-width)] mx-auto">
+          <div>
             <PromptRewriteCard
               state={
                 rewrite.status === 'loading' ? { status: 'loading' }
@@ -600,7 +601,7 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
       {/* Quote cards */}
       {quotes.length > 0 && (
         <div className="px-4 pt-3 pb-1">
-          <div className="max-w-[var(--chat-width)] mx-auto space-y-2">
+          <div className="space-y-2">
             {quotes.map((quote, idx) => (
               <QuoteCard
                 key={quote.id}
@@ -618,7 +619,7 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
       {/* Attachment previews */}
       {attachments.length > 0 && (
         <div className="px-4 pt-3 pb-1">
-          <div className="max-w-[var(--chat-width)] mx-auto flex gap-2 flex-wrap">
+          <div className="flex gap-2 flex-wrap">
             {attachments.map(a => (
               <AttachmentPreview key={a.id} attachment={a} onRemove={() => removeAttachment(a.id)} />
             ))}
@@ -632,21 +633,35 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
           buttons plus the model picker, which left the textarea a ~90px
           stub, so the row wraps instead: controls stay on the first line and
           the textarea takes a full-width line of its own below them (see the
-          `basis-full`/`order-1` pair on it). */}
+          `basis-full`/`order-1` pair on it).
+
+          The composer stack — this row and the rewrite / quote / attachment
+          strips above it — does not carry `max-w-[var(--chat-width)]`, which
+          everything on the transcript side does. One cap cannot serve both: a
+          reading column stays narrow for prose, while the composer is a control
+          surface that only gets narrower as the model picker and five buttons
+          take their fixed share out of it. Capped at the default 768 the
+          textarea gets 430px, and widening the reading column to suit the
+          composer would make the transcript worse, so the composer fills the
+          pane instead. */}
       <div className="px-4 py-3">
-        <div className="max-w-[var(--chat-width)] mx-auto flex flex-wrap md:flex-nowrap gap-2 md:gap-3 items-end">
+        {/* `relative` is the anchor for the run-later popup below. It hangs off
+            this row rather than off its own 40px trigger so that it is aligned
+            to the composer and cannot leave the viewport, wherever the trigger
+            happens to have wrapped to. */}
+        <div className="relative flex flex-wrap md:flex-nowrap gap-2 md:gap-3 items-end">
           {/* File attach button */}
-          <button
+          <IconButton
+            size="md"
             onClick={() => fileInputRef.current?.click()}
             disabled={disabled || isStreaming || rewriteActive
               || (isVirtualChat && !!(newChatReviewLoop && (newChatReviewLoop.goal.trim() || newChatReviewLoop.verifier.trim())))}
-            className="w-10 h-10 text-text-muted hover:text-text-secondary rounded-xl flex items-center justify-center cursor-pointer transition-colors shrink-0 disabled:opacity-30"
-            title={isVirtualChat && newChatReviewLoop && (newChatReviewLoop.goal.trim() || newChatReviewLoop.verifier.trim())
+            label={isVirtualChat && newChatReviewLoop && (newChatReviewLoop.goal.trim() || newChatReviewLoop.verifier.trim())
               ? 'Attaching files would start the review loop — start it or clear the form first'
               : 'Attach files'}
           >
             <Paperclip size={18} />
-          </button>
+          </IconButton>
 
           {/* Prompt rewrite toggle — only on a fresh chat, where it applies */}
           {rewriteAvailable && isNewChat && (
@@ -655,7 +670,7 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
               disabled={disabled || isStreaming || rewriteActive}
               className={`w-10 h-10 rounded-xl flex items-center justify-center cursor-pointer transition-all shrink-0 disabled:opacity-30 ${
                 rewriteEnabled
-                  ? 'text-hue-purple bg-purple-500/10 hover:bg-purple-500/15 shadow-[inset_0_0_0_1px_rgba(168,85,247,0.25)]'
+                  ? 'text-hue-purple bg-hue-purple/10 hover:bg-hue-purple/15 ring-1 ring-inset ring-hue-purple/25'
                   : 'text-text-muted hover:text-text-secondary'
               }`}
               title={rewriteEnabled
@@ -673,7 +688,7 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
               disabled={disabled || isStreaming || rewriteActive}
               className={`w-10 h-10 rounded-xl flex items-center justify-center cursor-pointer transition-all shrink-0 disabled:opacity-30 ${
                 newChatReviewLoop
-                  ? 'text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/15 shadow-[inset_0_0_0_1px_rgba(52,211,153,0.25)]'
+                  ? 'text-hue-emerald bg-hue-emerald/10 hover:bg-hue-emerald/15 ring-1 ring-inset ring-hue-emerald/25'
                   : 'text-text-muted hover:text-text-secondary'
               }`}
               title={newChatReviewLoop
@@ -694,8 +709,7 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
               only this chat: virtual chats bind it at creation, real
               sessions PATCH their own row — never a global preference. */}
           {scopedModels.length > 1 && (
-            <div className="relative shrink-0">
-            <select
+            <Select
               value={currentModel ?? ''}
               onChange={(e) => {
                 const picked = e.target.value;
@@ -707,7 +721,7 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
               }}
               disabled={disabled || isStreaming || rewriteActive}
               title="Model for this chat (other chats keep theirs)"
-              className="appearance-none h-10 max-w-[170px] w-full pl-2.5 pr-8 bg-surface-raised border border-border rounded-xl text-[13px] text-text-secondary outline-none focus:border-accent/50 cursor-pointer disabled:opacity-30 truncate"
+              className="h-10 max-w-[170px] px-2.5 rounded-xl shrink-0 truncate"
             >
               {/* A session may run on a model the picker no longer offers
                   (retired id, uninstalled Ollama model) — keep it visible
@@ -736,12 +750,7 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
                   ))}
                 </optgroup>
               )}
-            </select>
-            <ChevronDown
-              size={16}
-              className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-text-muted"
-            />
-            </div>
+            </Select>
           )}
 
           <input
@@ -775,40 +784,70 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
             // basis-full makes the textarea claim a whole flex line on its
             // own; order-1 puts that line under the controls rather than
             // above them. Both are undone at `md`, back to a single row.
-            className="flex-1 basis-full order-1 md:basis-0 md:order-none px-4 py-3 bg-surface-raised border border-border rounded-xl text-[15px] text-text outline-none focus:border-accent/50 resize-none disabled:opacity-50 placeholder:text-text-faint"
+            // `text-sm` matches every other input in the app (`FIELD_SIZES.md`
+            // is `text-sm` too). `text-base` — 16px — reads oversized next to
+            // the transcript and fits noticeably less text on a line.
+            className="flex-1 basis-full order-1 md:basis-0 md:order-none px-4 py-3 bg-surface-raised border border-border rounded-xl text-sm text-text outline-none focus:border-accent/50 resize-none disabled:opacity-50 placeholder:text-text-faint"
           />
           {/* Run-later kebab — three-dots menu next to Send. Its submenu
               defers the composed prompt into a new session without spending
-              tokens now (opens upward; the composer sits at the bottom). */}
-          <div className="relative shrink-0 order-2 md:order-none" ref={menuRef}>
-            <button
+              tokens now (opens upward; the composer sits at the bottom).
+
+              No `order`: it belongs on the controls line with everything else.
+              Anything sorted after the `order-1` textarea wraps onto a line of
+              its own under the message box, at the left margin, where a popup
+              right-aligned to a 40px trigger opens off the left of the screen.
+              Desktop never shows this: that row is `md:flex-nowrap`, so nothing
+              wraps and `order` is inert. */}
+          <div className="shrink-0" ref={menuRef}>
+            <IconButton
+              label="More options"
+              size="md"
               onClick={() => { setMenuOpen(v => !v); setRunLaterOpen(false); }}
               disabled={disabled || isStreaming || rewriteActive}
-              className="w-10 h-10 text-text-muted hover:text-text-secondary rounded-xl flex items-center justify-center cursor-pointer transition-colors shrink-0 disabled:opacity-30"
-              title="More options"
+              // `aria-expanded` only. `aria-haspopup="menu"` would promise the
+              // ARIA menu pattern — `menu`/`menuitem` roles, focus moving into
+              // the popup, arrow-key navigation, Escape to close — but the popup
+              // below is a `div` of ordinary buttons. It is a disclosure, so it
+              // says so rather than announcing a keyboard model that is not
+              // there.
+              aria-expanded={menuOpen}
+              className="rounded-xl"
             >
               <MoreHorizontal size={18} />
-            </button>
+            </IconButton>
             {menuOpen && (
-              <div className="absolute right-0 bottom-full mb-1 z-50 bg-surface-raised border border-border-subtle rounded-lg shadow-xl py-1 min-w-[170px]">
-                <button
+              // A fixed width, not a minimum. The popup is anchored to the
+              // composer, so it has ~500px to shrink-to-fit against and would
+              // take all of it for four short labels. `w-max` does not help:
+              // Chrome's max-content for these `w-full` children lands in the
+              // same place.
+              <div className="absolute right-0 bottom-full mb-1 z-50 w-[170px] bg-surface-raised border border-border-subtle rounded-lg shadow-xl py-1">
+                <Button
+                  variant="subtle"
+                  size="sm"
+                  fullWidth
                   onClick={() => setRunLaterOpen(v => !v)}
-                  className="flex items-center justify-between gap-2.5 w-full px-3 py-1.5 text-[13px] text-text-secondary hover:bg-border-subtle cursor-pointer transition-colors"
+                  aria-expanded={runLaterOpen}
+                  className="justify-between gap-2.5 px-3 py-1.5 rounded-none text-left"
                 >
                   <span className="flex items-center gap-2.5"><Clock size={14} /> Run later</span>
                   <ChevronRight size={14} className={`transition-transform ${runLaterOpen ? 'rotate-90' : ''}`} />
-                </button>
+                </Button>
                 {runLaterOpen && (
                   <div className="border-t border-border mt-1 pt-1">
                     {RUN_LATER_OPTIONS.map(opt => (
-                      <button
+                      <Button
                         key={opt.delay}
+                        variant="subtle"
+                        size="sm"
+                        fullWidth
                         onClick={() => handleRunLater(opt.delay)}
                         disabled={!canSend}
-                        className="w-full text-left px-3 py-1.5 pl-8 text-[13px] text-text-secondary hover:bg-border-subtle cursor-pointer transition-colors disabled:opacity-30"
+                        className="justify-start px-3 py-1.5 pl-8 rounded-none text-left"
                       >
                         {opt.label}
-                      </button>
+                      </Button>
                     ))}
                   </div>
                 )}
@@ -817,21 +856,22 @@ export function ChatInput({ onSend, onStop, isStreaming, disabled }: {
           </div>
 
           {isStreaming ? (
+            /* Native: this is a solid destructive fill, and IconButton has no
+               `dangerSolid` — its `danger` is red-on-transparent. `bg-error-solid`
+               rather than `bg-error`, which is the pale feedback foreground. */
             <button
+              type="button"
               onClick={onStop}
-              className="w-10 h-10 bg-red-500/80 hover:bg-red-500 text-white rounded-xl flex items-center justify-center cursor-pointer transition-colors shrink-0"
+              className="w-10 h-10 bg-error-solid hover:bg-error-solid/90 text-white rounded-xl inline-flex items-center justify-center cursor-pointer transition-colors shrink-0"
               title="Stop generation"
+              aria-label="Stop generation"
             >
               <Square size={16} />
             </button>
           ) : (
-            <button
-              onClick={handleSend}
-              disabled={!canSend}
-              className="w-10 h-10 bg-accent hover:bg-accent-hover text-white rounded-xl flex items-center justify-center disabled:opacity-30 cursor-pointer transition-colors shrink-0"
-            >
+            <IconButton label="Send" variant="primary" size="md" onClick={handleSend} disabled={!canSend}>
               <Send size={18} />
-            </button>
+            </IconButton>
           )}
         </div>
       </div>
@@ -853,8 +893,8 @@ function AttachmentPreview({ attachment, onRemove }: { attachment: AttachmentFil
         </div>
       )}
       <div className="pr-7 py-1.5 min-w-0">
-        <div className="text-[12px] text-text-secondary truncate max-w-[120px]">{attachment.file.name}</div>
-        <div className="text-[11px] text-text-muted">
+        <div className="text-xs text-text-secondary truncate max-w-[120px]">{attachment.file.name}</div>
+        <div className="text-xs text-text-muted">
           {attachment.uploading ? (
             <span className="flex items-center gap-1"><Loader2 size={10} className="animate-spin" /> Uploading...</span>
           ) : attachment.error ? (
@@ -864,12 +904,14 @@ function AttachmentPreview({ attachment, onRemove }: { attachment: AttachmentFil
           )}
         </div>
       </div>
-      <button
+      <IconButton
+        label={`Remove ${attachment.file.name}`}
+        size="xs"
         onClick={onRemove}
-        className="absolute top-1 right-1 w-5 h-5 rounded-full bg-bg/80 text-text-muted hover:text-text flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+        className="absolute top-1 right-1 rounded-full bg-bg/80 opacity-0 group-hover:opacity-100 transition-opacity"
       >
         <X size={12} />
-      </button>
+      </IconButton>
     </div>
   );
 }
@@ -895,32 +937,29 @@ function QuoteCard({ quote, instructionRef, onRemove, onUpdateInstruction, onSen
         {/* Icon + label */}
         <div className="flex items-center gap-1.5 shrink-0 pt-0.5">
           <Icon size={13} style={{ color: config.color }} />
-          <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: config.color }}>
+          <span className="text-xs font-medium uppercase tracking-wider" style={{ color: config.color }}>
             {config.label}
           </span>
         </div>
 
         {/* Content */}
         <div className="flex-1 min-w-0">
-          <div className="text-[12px] text-text-muted leading-relaxed line-clamp-2">{truncated}</div>
-          <input
+          <div className="text-xs text-text-muted leading-relaxed line-clamp-2">{truncated}</div>
+          <TextField
+            bare
             ref={instructionRef}
-            type="text"
             value={quote.instruction}
             onChange={(e) => onUpdateInstruction(e.target.value)}
             onKeyDown={(e) => { if (e.key === 'Enter' && onSend) { e.preventDefault(); onSend(); } }}
             placeholder={config.placeholder}
-            className="w-full mt-1.5 px-0 py-0.5 bg-transparent text-[13px] text-text-secondary outline-none placeholder:text-text-faint border-b border-border focus:border-border transition-colors"
+            className="mt-1.5 py-0.5 text-sm text-text-secondary border-b border-border transition-colors"
           />
         </div>
 
         {/* Remove */}
-        <button
-          onClick={onRemove}
-          className="text-text-faint hover:text-text-muted cursor-pointer transition-colors shrink-0 pt-0.5"
-        >
+        <IconButton label="Remove this quote" size="xs" onClick={onRemove} className="shrink-0 mt-0.5">
           <X size={14} />
-        </button>
+        </IconButton>
       </div>
     </div>
   );
diff --git a/web/src/components/Chat/CodeBlock.tsx b/web/src/components/Chat/CodeBlock.tsx
index 32f5b50c..f97f9c45 100644
--- a/web/src/components/Chat/CodeBlock.tsx
+++ b/web/src/components/Chat/CodeBlock.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, type ReactNode } from 'react';
-import { Copy, Check } from 'lucide-react';
+import { Copy, Check } from '../ui/icons';
+import { IconButton } from '../ui';
 import { copyToClipboard } from '../../utils/clipboard';
 
 export function CodeBlock({ className, children }: { className?: string; children: ReactNode }) {
@@ -18,15 +19,13 @@ export function CodeBlock({ className, children }: { className?: string; childre
   return (
     <div className="relative group my-2">
       <div className="flex items-center justify-between bg-surface-raised border border-border rounded-t-md px-3 py-1">
-        <span className="text-[11px] text-text-dim font-mono">{language}</span>
-        <button
-          onClick={handleCopy}
-          className="text-text-dim hover:text-text-muted cursor-pointer p-1"
-          title="Copy"
-        >
+        <span className="text-xs text-text-dim font-mono">{language}</span>
+        <IconButton label={copied ? 'Copied' : 'Copy'} size="xs" onClick={handleCopy}>
           {copied ? <Check size={14} className="text-hue-emerald" /> : <Copy size={14} />}
-        </button>
+        </IconButton>
       </div>
+      {/* The `!` overrides graft this header onto the `.markdown-content pre`
+          rule in index.css — load-bearing, do not drop them. */}
       <pre className="!mt-0 !rounded-t-none !border-t-0">
         <code ref={codeRef} className={className}>{children}</code>
       </pre>
diff --git a/web/src/components/Chat/ContextBar.tsx b/web/src/components/Chat/ContextBar.tsx
index 99f17f2b..59b819ab 100644
--- a/web/src/components/Chat/ContextBar.tsx
+++ b/web/src/components/Chat/ContextBar.tsx
@@ -42,10 +42,12 @@ export function ContextBar({ usage, sessionCostUsd }: { usage: ContextUsage; ses
     ? (usage.cache_read_input_tokens / totalInput * 100)
     : 0;
 
-  // Color based on usage level
-  let barColor = '#3b82f6'; // blue
-  if (pct > 80) barColor = '#ef4444'; // red
-  else if (pct > 60) barColor = '#f59e0b'; // amber
+  // Colour by usage level. These land in an inline `backgroundColor`, so they
+  // reference the theme variables directly rather than Tailwind classes —
+  // same tokens, resolved at paint time, so they follow the theme.
+  let barColor = 'var(--theme-info)';
+  if (pct > 80) barColor = 'var(--theme-error)';
+  else if (pct > 60) barColor = 'var(--theme-warning)';
 
   return (
     <div
@@ -53,7 +55,7 @@ export function ContextBar({ usage, sessionCostUsd }: { usage: ContextUsage; ses
       onMouseEnter={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
     >
-      <span className="text-[11px] text-text-dim whitespace-nowrap">
+      <span className="text-xs text-text-dim whitespace-nowrap">
         ~{formatTokens(estimatedContext)} / {formatTokens(max)}
       </span>
       <div className="w-20 h-1.5 bg-border-subtle rounded-full overflow-hidden">
@@ -65,30 +67,30 @@ export function ContextBar({ usage, sessionCostUsd }: { usage: ContextUsage; ses
 
       {hovering && (
         <div className="absolute right-0 top-full mt-2 z-50 bg-surface-raised border border-border-subtle rounded-lg p-3 shadow-xl min-w-[220px]">
-          <div className="text-[11px] text-text-muted uppercase tracking-wider mb-2">Context Window</div>
-          <div className="space-y-1.5 text-[12px]">
+          <div className="text-xs text-text-muted uppercase tracking-wider mb-2">Context Window</div>
+          <div className="space-y-1.5 text-xs leading-tight">
             <Row label="Est. context" value={estimatedContext} bold />
             <Row label="Max context" value={max} />
-            <Row label="Remaining" value={Math.max(0, max - estimatedContext)} color={pct > 80 ? '#ef4444' : '#22c55e'} />
+            <Row label="Remaining" value={Math.max(0, max - estimatedContext)} color={pct > 80 ? 'var(--theme-error)' : 'var(--theme-success)'} />
 
             {/* Per-turn token breakdown */}
             <div className="border-t border-border-subtle my-1.5" />
-            <div className="text-[11px] text-text-muted uppercase tracking-wider mb-1">
+            <div className="text-xs text-text-muted uppercase tracking-wider mb-1">
               Turn Tokens (cumulative)
             </div>
             <Row label="Fresh input" value={usage.input_tokens} />
             <Row label="Output" value={usage.output_tokens} />
             {usage.cache_read_input_tokens > 0 && (
-              <Row label="Cache read" value={usage.cache_read_input_tokens} color="#22c55e" />
+              <Row label="Cache read" value={usage.cache_read_input_tokens} color="var(--theme-success)" />
             )}
             {usage.cache_creation_input_tokens > 0 && (
-              <Row label="Cache created" value={usage.cache_creation_input_tokens} color="#a855f7" />
+              <Row label="Cache created" value={usage.cache_creation_input_tokens} color="var(--theme-hue-purple)" />
             )}
             {(usage.cache_creation_5m_input_tokens ?? 0) > 0 && (
-              <Row label="  ↳ 5m TTL" value={usage.cache_creation_5m_input_tokens!} color="#c084fc" />
+              <Row label="  ↳ 5m TTL" value={usage.cache_creation_5m_input_tokens!} color="var(--theme-hue-violet)" />
             )}
             {(usage.cache_creation_1h_input_tokens ?? 0) > 0 && (
-              <Row label="  ↳ 1h TTL" value={usage.cache_creation_1h_input_tokens!} color="#e879f9" />
+              <Row label="  ↳ 1h TTL" value={usage.cache_creation_1h_input_tokens!} color="var(--theme-hue-violet)" />
             )}
             {numCalls > 1 && (
               <div className="flex justify-between items-center">
@@ -99,14 +101,14 @@ export function ContextBar({ usage, sessionCostUsd }: { usage: ContextUsage; ses
 
             {/* Cost section */}
             <div className="border-t border-border-subtle my-1.5" />
-            <div className="text-[11px] text-text-muted uppercase tracking-wider mb-1">Cost</div>
+            <div className="text-xs text-text-muted uppercase tracking-wider mb-1">Cost</div>
             {(sessionCostUsd ?? 0) > 0 && (
               <CostRow label="Session total" value={sessionCostUsd!} bold />
             )}
             {cacheRate > 0 && (
               <div className="flex justify-between items-center">
                 <span className="text-text-muted">Cache hit rate</span>
-                <span className="text-text-muted" style={{ color: cacheRate > 50 ? '#22c55e' : undefined }}>
+                <span className={cacheRate > 50 ? 'text-success' : 'text-text-muted'}>
                   {cacheRate.toFixed(1)}%
                 </span>
               </div>
diff --git a/web/src/components/Chat/DiffView.tsx b/web/src/components/Chat/DiffView.tsx
index 979ad200..b3a72322 100644
--- a/web/src/components/Chat/DiffView.tsx
+++ b/web/src/components/Chat/DiffView.tsx
@@ -5,7 +5,7 @@ import type { FileDiff } from '../../types/chat';
 
 function Notice({ children }: { children: React.ReactNode }) {
   return (
-    <div className="px-4 py-6 text-center text-[13px] text-text-faint">
+    <div className="px-4 py-6 text-center text-sm text-text-faint">
       {children}
     </div>
   );
@@ -30,7 +30,7 @@ export function DiffView({ diff, wrap }: { diff: FileDiff; wrap?: boolean }) {
     <div className="diff-view">
       <PatchDiff patch={diff.patch} options={options} />
       {diff.truncated && (
-        <div className="text-center py-3 text-[11px] text-text-faint bg-bg border-t border-border-subtle">
+        <div className="text-center py-3 text-xs text-text-faint bg-bg border-t border-border-subtle">
           Diff truncated at {MAX_DIFF_LINES} lines
         </div>
       )}
diff --git a/web/src/components/Chat/FileChangesPanel.tsx b/web/src/components/Chat/FileChangesPanel.tsx
index 2216ca08..bc9b1025 100644
--- a/web/src/components/Chat/FileChangesPanel.tsx
+++ b/web/src/components/Chat/FileChangesPanel.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, lazy, Suspense } from 'react';
-import { ArrowLeft, Eye, FilePlus, FileEdit, FileX, Loader2, RefreshCw, WrapText } from 'lucide-react';
+import { ArrowLeft, Eye, FilePlus, FileEdit, FileX, Loader2, RefreshCw, WrapText } from '../ui/icons';
+import { Button, IconButton } from '../ui';
 import { useChatStore } from '../../stores/chatStore';
 import { api } from '../../api/client';
 import { SelectionToolbar } from './SelectionToolbar';
@@ -47,24 +48,27 @@ function FileCard({ file, onClick }: { file: ModifiedFileSummary; onClick: () =>
   const badge = STATUS_BADGE[file.status] || '?';
 
   return (
-    <button
+    <Button
+      variant="subtle"
+      size="md"
+      fullWidth
       onClick={onClick}
-      className="w-full text-left px-4 py-2.5 hover:bg-surface transition-colors cursor-pointer border-b border-surface-raised last:border-b-0 group"
+      className="px-4 py-2.5 rounded-none text-left hover:bg-surface border-b border-surface-raised last:border-b-0 group"
     >
-      <div className="flex items-center gap-2.5">
-        <span className={`text-[11px] font-bold font-mono w-4 text-center shrink-0 ${color}`}>
+      <div className="flex w-full items-center gap-2.5">
+        <span className={`text-xs leading-tight font-bold font-mono w-4 text-center shrink-0 ${color}`}>
           {badge}
         </span>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
             <Icon size={13} className={`shrink-0 ${color}`} />
-            <span className="text-[13px] font-medium text-text-secondary truncate">{fileName}</span>
+            <span className="text-sm leading-tight font-medium text-text-secondary truncate">{fileName}</span>
           </div>
           {dirPath && (
-            <div className="text-[11px] text-text-faint truncate ml-[21px]">{dirPath}</div>
+            <div className="text-xs leading-tight text-text-faint truncate ml-[21px]">{dirPath}</div>
           )}
         </div>
-        <div className="flex items-center gap-1.5 shrink-0 text-[11px] font-mono tabular-nums">
+        <div className="flex items-center gap-1.5 shrink-0 text-xs leading-tight font-mono tabular-nums">
           {file.stats.additions > 0 && (
             <span className="text-diff-add">+{file.stats.additions}</span>
           )}
@@ -73,7 +77,7 @@ function FileCard({ file, onClick }: { file: ModifiedFileSummary; onClick: () =>
           )}
         </div>
       </div>
-    </button>
+    </Button>
   );
 }
 
@@ -122,14 +126,11 @@ function FileDetailView({ file, onBack }: { file: ModifiedFileSummary; onBack: (
     <div className="flex flex-col h-full">
       {/* Detail header */}
       <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border-subtle bg-bg-sunken shrink-0">
-        <button
-          onClick={onBack}
-          className="w-5 h-5 flex items-center justify-center text-text-faint hover:text-text-muted cursor-pointer transition-colors"
-        >
+        <IconButton label="Back to the file list" size="xs" onClick={onBack}>
           <ArrowLeft size={14} />
-        </button>
-        <span className={`text-[13px] font-medium ${color}`}>{fileName}</span>
-        <div className="flex items-center gap-1.5 text-[11px] font-mono tabular-nums">
+        </IconButton>
+        <span className={`text-sm font-medium ${color}`}>{fileName}</span>
+        <div className="flex items-center gap-1.5 text-xs font-mono tabular-nums">
           {diff?.stats && diff.stats.additions > 0 && (
             <span className="text-diff-add">+{diff.stats.additions}</span>
           )}
@@ -139,30 +140,28 @@ function FileDetailView({ file, onBack }: { file: ModifiedFileSummary; onBack: (
         </div>
         <div className="ml-auto flex items-center gap-1">
           {canPreview && (
-            <button
-              onClick={() => setPreview(p => !p)}
+            <IconButton
+              label={preview ? 'Show raw diff' : 'Show rendered markdown'}
+              size="xs"
+              active={preview}
               aria-pressed={preview}
-              className={`w-5 h-5 flex items-center justify-center cursor-pointer transition-colors ${
-                preview ? 'text-accent' : 'text-text-faint hover:text-text-muted'
-              }`}
-              title={preview ? 'Show raw diff' : 'Show rendered markdown'}
+              onClick={() => setPreview(p => !p)}
             >
               <Eye size={13} />
-            </button>
+            </IconButton>
           )}
-          <button
-            onClick={toggleWrap}
+          <IconButton
+            label={wrap ? 'Disable line wrapping' : 'Enable line wrapping'}
+            size="xs"
+            active={wrap}
             aria-pressed={wrap}
-            className={`w-5 h-5 flex items-center justify-center cursor-pointer transition-colors ${
-              wrap ? 'text-accent' : 'text-text-faint hover:text-text-muted'
-            }`}
-            title={wrap ? 'Disable line wrapping' : 'Enable line wrapping'}
+            onClick={toggleWrap}
           >
             <WrapText size={13} />
-          </button>
+          </IconButton>
         </div>
       </div>
-      <div className="text-[11px] text-text-faint px-4 py-1 bg-bg-sunken border-b border-surface-raised">
+      <div className="text-xs text-text-faint px-4 py-1 bg-bg-sunken border-b border-surface-raised">
         {file.short_path}
       </div>
 
@@ -170,19 +169,19 @@ function FileDetailView({ file, onBack }: { file: ModifiedFileSummary; onBack: (
       <div ref={containerRef} className="flex-1 overflow-y-auto relative" data-role="plan">
         <SelectionToolbar containerRef={containerRef} />
         {loading && (
-          <div className="flex items-center gap-2 justify-center py-8 text-[13px] text-text-faint">
+          <div className="flex items-center gap-2 justify-center py-8 text-sm text-text-faint">
             <Loader2 size={14} className="animate-spin" /> Loading diff...
           </div>
         )}
         {error && (
-          <div className="px-4 py-4 text-[13px] text-hue-red">Failed to load diff: {error}</div>
+          <div className="px-4 py-4 text-sm text-hue-red">Failed to load diff: {error}</div>
         )}
         {diff && !loading && (
           preview && diff.markdown_content != null ? (
-            <div className="px-4 py-3 text-[13px]">
+            <div className="px-4 py-3 text-sm">
               <MarkdownContent content={diff.markdown_content} />
               {diff.markdown_truncated && (
-                <div className="text-center py-3 mt-3 text-[11px] text-text-faint border-t border-border-subtle">
+                <div className="text-center py-3 mt-3 text-xs text-text-faint border-t border-border-subtle">
                   Preview truncated at {MAX_DIFF_LINES} lines
                 </div>
               )}
@@ -190,7 +189,7 @@ function FileDetailView({ file, onBack }: { file: ModifiedFileSummary; onBack: (
           ) : (
             <Suspense
               fallback={
-                <div className="flex items-center gap-2 justify-center py-8 text-[13px] text-text-faint">
+                <div className="flex items-center gap-2 justify-center py-8 text-sm text-text-faint">
                   <Loader2 size={14} className="animate-spin" /> Loading diff…
                 </div>
               }
@@ -242,24 +241,20 @@ export function FileChangesPanel() {
     <div className="flex flex-col h-full">
       {/* List header */}
       <div className="flex items-center justify-between px-4 py-2 border-b border-border-subtle bg-bg-sunken shrink-0">
-        <div className="flex items-center gap-2 text-[12px] text-text-muted">
+        <div className="flex items-center gap-2 text-xs text-text-muted">
           <span>{modifiedFiles.length} file{modifiedFiles.length !== 1 ? 's' : ''}</span>
           {totalAdd > 0 && <span className="text-hue-green font-mono">+{totalAdd}</span>}
           {totalDel > 0 && <span className="text-hue-red font-mono">&minus;{totalDel}</span>}
         </div>
-        <button
-          onClick={handleRefresh}
-          className="w-5 h-5 flex items-center justify-center text-text-faint hover:text-text-muted cursor-pointer transition-colors"
-          title="Refresh file list"
-        >
+        <IconButton label="Refresh the file list" size="xs" onClick={handleRefresh}>
           <RefreshCw size={12} className={refreshing ? 'animate-spin' : ''} />
-        </button>
+        </IconButton>
       </div>
 
       {/* File list */}
       <div className="flex-1 overflow-y-auto">
         {modifiedFiles.length === 0 ? (
-          <div className="px-4 py-8 text-center text-[13px] text-text-faint">
+          <div className="px-4 py-8 text-center text-sm text-text-faint">
             No files modified in this session
           </div>
         ) : (
diff --git a/web/src/components/Chat/InteractiveQuestionCard.tsx b/web/src/components/Chat/InteractiveQuestionCard.tsx
index 5af04f10..ad005cb3 100644
--- a/web/src/components/Chat/InteractiveQuestionCard.tsx
+++ b/web/src/components/Chat/InteractiveQuestionCard.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { ExternalLink, MessageCircleQuestion, Send, X } from 'lucide-react';
+import { ExternalLink, MessageCircleQuestion, Send, X } from '../ui/icons';
+import { Button, TextField } from '../ui';
 import { useChatStore } from '../../stores/chatStore';
 
 interface QuestionOption {
@@ -78,10 +79,10 @@ export function InteractiveQuestionCard() {
     <div className="mx-4 mb-2 border border-accent/30 rounded-lg bg-surface shadow-lg overflow-hidden">
       <div className="px-3 py-2 flex items-center gap-2 bg-accent/10">
         <MessageCircleQuestion size={15} className="text-accent" />
-        <span className="text-[13px] font-medium text-text-primary">
+        <span className="text-sm font-medium text-text">
           {message || 'Codex needs your input'}
         </span>
-        <span className="ml-auto text-[11px] text-text-muted">waiting</span>
+        <span className="ml-auto text-xs text-text-muted">waiting</span>
       </div>
       <div className="px-3 py-3 space-y-3">
         {url && (
@@ -89,7 +90,7 @@ export function InteractiveQuestionCard() {
             href={url}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center gap-1.5 text-[12px] text-accent hover:underline break-all"
+            className="flex items-center gap-1.5 text-xs text-accent hover:underline break-all"
           >
             <ExternalLink size={12} />
             {url}
@@ -102,8 +103,8 @@ export function InteractiveQuestionCard() {
           return (
             <div key={key} className="space-y-2">
               <div>
-                {q.header && <div className="text-[10px] uppercase tracking-wide text-accent/70">{q.header}</div>}
-                <div className="text-[13px] text-text-secondary">{q.question}</div>
+                {q.header && <div className="text-2xs uppercase tracking-wide text-accent/70">{q.header}</div>}
+                <div className="text-sm text-text-secondary">{q.question}</div>
               </div>
               {options.length > 0 && (
                 <div className="flex flex-wrap gap-1.5">
@@ -111,29 +112,37 @@ export function InteractiveQuestionCard() {
                     const value = option.value ?? option.label;
                     const active = (selected[key] ?? []).includes(value);
                     return (
-                      <button
+                      <Button
                         key={value}
+                        variant="pill"
+                        size="sm"
+                        active={active}
+                        // A toggle button: a plain button that stays lit.
+                        // `role="radio"` / `role="checkbox"` with `aria-checked`
+                        // would announce a keyboard model the group does not
+                        // implement — there is no `radiogroup`, no roving tab
+                        // stop and no arrow-key movement, so every option is
+                        // separately tabbable and the arrow keys do nothing.
+                        aria-pressed={active}
                         onClick={() => choose(q, value)}
                         title={option.description}
-                        className={`px-2.5 py-1.5 rounded border text-[12px] cursor-pointer ${active
-                          ? 'border-accent/50 bg-accent/10 text-accent-text'
-                          : 'border-border-subtle text-text-muted hover:text-text-secondary hover:border-border'}`}
+                        className="rounded px-2.5 py-1.5"
                       >
                         {option.label}
-                      </button>
+                      </Button>
                     );
                   })}
                 </div>
               )}
               {showText && (
-                <input
+                <TextField
                   type={q.isSecret ? 'password' : 'text'}
                   value={text[key] ?? ''}
                   onChange={(event) => setText(current => ({ ...current, [key]: event.target.value }))}
                   onKeyDown={(event) => { if (event.key === 'Enter' && complete) submit(); }}
                   placeholder={q.allowOther && options.length ? 'Other…' : 'Type your answer…'}
                   autoComplete="off"
-                  className="w-full px-2.5 py-2 rounded border border-border bg-bg-sunken text-[13px] text-text-primary outline-none focus:border-accent/50"
+                  className="px-2.5 rounded"
                 />
               )}
             </div>
@@ -141,19 +150,12 @@ export function InteractiveQuestionCard() {
         })}
       </div>
       <div className="px-3 py-2 border-t border-border-subtle flex justify-end gap-2">
-        <button
-          onClick={() => deny('Declined by user.')}
-          className="px-2.5 py-1.5 rounded text-[12px] text-text-muted hover:bg-surface-raised flex items-center gap-1 cursor-pointer"
-        >
+        <Button variant="subtle" size="sm" onClick={() => deny('Declined by user.')}>
           <X size={12} /> Decline
-        </button>
-        <button
-          onClick={submit}
-          disabled={!complete}
-          className="px-3 py-1.5 rounded text-[12px] bg-accent text-white disabled:opacity-40 flex items-center gap-1 cursor-pointer disabled:cursor-not-allowed"
-        >
+        </Button>
+        <Button variant="primary" size="sm" onClick={submit} disabled={!complete} className="rounded">
           <Send size={12} /> Continue
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/src/components/Chat/PromptRewriteCard.tsx b/web/src/components/Chat/PromptRewriteCard.tsx
index 9aa2cdc9..98ab1dde 100644
--- a/web/src/components/Chat/PromptRewriteCard.tsx
+++ b/web/src/components/Chat/PromptRewriteCard.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { Sparkles, X, RotateCcw, CornerDownLeft, ChevronRight, Loader2 } from 'lucide-react';
+import { Sparkles, X, RotateCcw, CornerDownLeft, ChevronRight, Loader2 } from '../ui/icons';
+import { Button, IconButton, TextArea } from '../ui';
 
 export type RewriteCardState =
   | { status: 'loading' }
@@ -70,38 +71,34 @@ export function PromptRewriteCard({ state, original, onApprove, onSendOriginal,
   const canApprove = state.status === 'ready' && edited.trim().length > 0;
 
   return (
-    <div className="rewrite-card relative rounded-xl border border-hue-purple/25 bg-surface overflow-hidden shadow-[0_8px_40px_-12px_rgba(168,85,247,0.25)]">
+    <div className="rewrite-card relative rounded-xl border border-hue-purple/25 bg-surface overflow-hidden shadow-[0_8px_40px_-12px] shadow-hue-purple/25">
       {/* Gradient hairline */}
-      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-purple-400/60 to-transparent" />
+      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-hue-purple/60 to-transparent" />
 
       {/* Header */}
       <div className="flex items-center gap-2 px-4 pt-3 pb-2">
         <Sparkles size={14} className="text-hue-purple shrink-0" />
-        <span className="text-[11px] font-medium uppercase tracking-wider text-hue-purple">
+        <span className="text-xs font-medium uppercase tracking-wider text-hue-purple">
           {STATE_LABELS[state.status]}
         </span>
         {state.status === 'ready' && (
-          <span className="text-[10px] text-text-muted bg-surface-raised px-1.5 py-0.5 rounded">
+          <span className="text-2xs text-text-muted bg-surface-raised px-1.5 py-0.5 rounded">
             {formatModel(state.model)}
           </span>
         )}
         {state.status === 'ready' && edited !== state.rewritten && (
-          <span className="text-[10px] text-text-faint italic">edited</span>
+          <span className="text-2xs text-text-faint italic">edited</span>
         )}
         <div className="flex-1" />
-        <button
-          onClick={onDiscard}
-          className="text-text-faint hover:text-text-muted transition-colors cursor-pointer"
-          title="Dismiss (Esc)"
-        >
+        <IconButton label="Dismiss (Esc)" size="xs" onClick={onDiscard}>
           <X size={15} />
-        </button>
+        </IconButton>
       </div>
 
       {/* Body */}
       {state.status === 'loading' && (
         <div className="px-4 pb-3">
-          <div className="flex items-center gap-2 text-[13px] text-text-muted mb-3">
+          <div className="flex items-center gap-2 text-sm text-text-muted mb-3">
             <Loader2 size={13} className="animate-spin text-hue-purple" />
             <span>Refining your prompt…</span>
           </div>
@@ -111,19 +108,17 @@ export function PromptRewriteCard({ state, original, onApprove, onSendOriginal,
             <div className="rewrite-shimmer h-3 rounded w-[55%]" />
           </div>
           <div className="flex justify-end mt-3">
-            <button
-              onClick={onDiscard}
-              className="px-3 py-1.5 text-[12px] text-text-muted hover:text-text-secondary rounded-lg cursor-pointer transition-colors"
-            >
+            <Button variant="ghost" size="sm" onClick={onDiscard} className="rounded-lg">
               Cancel
-            </button>
+            </Button>
           </div>
         </div>
       )}
 
       {state.status === 'ready' && (
         <div className="px-4 pb-3">
-          <textarea
+          <TextArea
+            bare
             ref={editRef}
             value={edited}
             onChange={(e) => setEdited(e.target.value)}
@@ -134,70 +129,66 @@ export function PromptRewriteCard({ state, original, onApprove, onSendOriginal,
               }
             }}
             rows={2}
-            className="w-full bg-transparent text-[14px] leading-relaxed text-text outline-none resize-none placeholder:text-text-faint"
+            className="text-sm leading-relaxed"
             placeholder="Rewritten prompt…"
           />
 
           {/* Original message — collapsible */}
-          <button
+          <Button
+            variant="ghost"
+            size="xs"
             onClick={() => setShowOriginal(v => !v)}
-            className="mt-1 flex items-center gap-1 text-[11px] text-text-muted hover:text-text-secondary cursor-pointer transition-colors"
+            aria-expanded={showOriginal}
+            className="mt-1 px-0 py-0 gap-1"
           >
             <ChevronRight
               size={12}
               className={`transition-transform ${showOriginal ? 'rotate-90' : ''}`}
             />
             <span>Original message</span>
-          </button>
+          </Button>
           {showOriginal && (
-            <div className="mt-1.5 ml-1 pl-3 border-l-2 border-border text-[12px] text-text-muted whitespace-pre-wrap leading-relaxed max-h-40 overflow-y-auto">
+            <div className="mt-1.5 ml-1 pl-3 border-l-2 border-border text-xs text-text-muted whitespace-pre-wrap leading-relaxed max-h-40 overflow-y-auto">
               {original}
             </div>
           )}
 
           {/* Actions */}
           <div className="flex items-center gap-2 mt-3">
-            <span className="text-[11px] text-text-faint hidden sm:block">
+            <span className="text-xs text-text-faint hidden sm:block">
               Enter to send · Esc to dismiss
             </span>
             <div className="flex-1" />
-            <button
-              onClick={onSendOriginal}
-              className="px-3 py-1.5 text-[12px] text-text-secondary bg-surface-raised hover:bg-surface-hover border border-border rounded-lg cursor-pointer transition-colors"
-            >
+            <Button size="sm" onClick={onSendOriginal}>
               Send original
-            </button>
-            <button
+            </Button>
+            <Button
+              variant="primary"
+              size="sm"
               onClick={() => canApprove && onApprove(edited.trim())}
               disabled={!canApprove}
-              className="px-3.5 py-1.5 text-[12px] font-medium text-white bg-accent hover:bg-accent-hover rounded-lg flex items-center gap-1.5 cursor-pointer transition-colors disabled:opacity-30"
+              className="px-3.5 gap-1.5"
             >
               <CornerDownLeft size={12} />
               <span>Send</span>
-            </button>
+            </Button>
           </div>
         </div>
       )}
 
       {state.status === 'error' && (
         <div className="px-4 pb-3">
-          <div className="text-[13px] text-error/90 mb-3 break-words">
+          <div className="text-sm text-error/90 mb-3 break-words">
             {state.message}
           </div>
           <div className="flex items-center gap-2 justify-end">
-            <button
-              onClick={onRetry}
-              className="px-3 py-1.5 text-[12px] text-text-muted hover:text-text-secondary rounded-lg flex items-center gap-1.5 cursor-pointer transition-colors"
-            >
+            <Button variant="ghost" size="sm" onClick={onRetry} className="rounded-lg gap-1.5">
               <RotateCcw size={12} />
               <span>Retry</span>
-            </button>
-            <button
-              onClick={onSendOriginal}
-              className="px-3.5 py-1.5 text-[12px] font-medium text-white bg-accent hover:bg-accent-hover rounded-lg cursor-pointer transition-colors"
-            >
+            </Button>
+            <Button variant="primary" size="sm" onClick={onSendOriginal} className="px-3.5">
               Send original
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/web/src/components/Chat/ReviewLoopCard.tsx b/web/src/components/Chat/ReviewLoopCard.tsx
index cc1333b5..7d7d4f76 100644
--- a/web/src/components/Chat/ReviewLoopCard.tsx
+++ b/web/src/components/Chat/ReviewLoopCard.tsx
@@ -3,7 +3,8 @@ import {
   Repeat, ChevronDown, ChevronRight, Hammer, SearchCheck, Eye,
   CircleCheck, CircleX, CircleHelp, Circle, Loader2, Square, ExternalLink,
   FileText,
-} from 'lucide-react';
+} from '../ui/icons';
+import { Badge, Button, TextField } from '../ui';
 import { Link } from 'react-router-dom';
 import { api } from '../../api/client';
 import type { ReviewLoop, ReviewLoopAttempt } from '../../api/client';
@@ -26,18 +27,18 @@ function statusLabel(loop: ReviewLoop): string {
 
 function statusTone(status: string): string {
   switch (status) {
-    case 'passed': return 'text-emerald-400';
-    case 'awaiting_user': return 'text-orange-400';
-    case 'failed': case 'killed': return 'text-red-400';
-    default: return 'text-emerald-400';
+    case 'passed': return 'text-success';
+    case 'awaiting_user': return 'text-warning';
+    case 'failed': case 'killed': return 'text-error';
+    default: return 'text-success';
   }
 }
 
 function CriterionIcon({ status }: { status: string }) {
   switch (status) {
-    case 'met': return <CircleCheck size={13} className="text-emerald-400 shrink-0" />;
-    case 'unmet': return <CircleX size={13} className="text-red-400 shrink-0" />;
-    case 'unverifiable': return <CircleHelp size={13} className="text-amber-400 shrink-0" />;
+    case 'met': return <CircleCheck size={13} className="text-success shrink-0" />;
+    case 'unmet': return <CircleX size={13} className="text-error shrink-0" />;
+    case 'unverifiable': return <CircleHelp size={13} className="text-warning shrink-0" />;
     default: return <Circle size={13} className="text-text-faint shrink-0" />;
   }
 }
@@ -183,49 +184,56 @@ export function ReviewLoopCard({ loopId }: { loopId: string }) {
     <div className="border-b border-border-subtle bg-surface/60 shrink-0">
       <div className="max-w-[var(--chat-width)] mx-auto px-5">
         {/* Collapsed strip */}
-        <button
+        <Button
+          variant="ghost"
+          size="md"
+          fullWidth
           onClick={() => setExpanded(v => !v)}
-          className="w-full flex items-center gap-2.5 py-2 cursor-pointer text-left"
+          aria-expanded={expanded}
+          className="justify-start gap-2.5 px-0 py-2 text-left"
         >
           {expanded ? <ChevronDown size={13} className="text-text-faint shrink-0" /> : <ChevronRight size={13} className="text-text-faint shrink-0" />}
           <span className={`flex items-center gap-1.5 ${tone} shrink-0`}>
             {live && <span className="w-1.5 h-1.5 rounded-full bg-current animate-pulse" />}
             <Repeat size={14} />
           </span>
-          <span className="text-[13px] text-text-secondary font-medium truncate">
+          <span className="text-sm leading-tight text-text-secondary font-medium truncate">
             {statusLabel(loop)}
           </span>
-          <span className="text-[12px] text-text-faint shrink-0 tabular-nums">
+          <span className="text-xs leading-tight text-text-faint shrink-0 tabular-nums">
             {met}/{loop.criteria.length} criteria
           </span>
           <span className="flex-1" />
-          {/* Spend bar */}
+          {/* Keep the useful numbers on a narrow row; the bar is redundant there. */}
           <span className="flex items-center gap-2 shrink-0">
-            <span className="w-24 h-1.5 rounded-full bg-surface-raised overflow-hidden">
+            <span
+              aria-hidden="true"
+              className="hidden h-1.5 w-24 overflow-hidden rounded-full bg-surface-raised md:block"
+            >
               <span
-                className={`block h-full rounded-full ${frac >= 0.8 ? 'bg-orange-400' : 'bg-emerald-500/70'}`}
+                className={`block h-full rounded-full ${frac >= 0.8 ? 'bg-warning' : 'bg-success/70'}`}
                 style={{ width: `${Math.max(2, frac * 100)}%` }}
               />
             </span>
-            <span className="text-[11px] text-text-faint tabular-nums">
+            <span className="text-xs leading-tight text-text-faint tabular-nums">
               {fmtUsd(spent)} / {fmtUsd(loop.budget_usd)}
             </span>
           </span>
-        </button>
+        </Button>
 
         {expanded && (
           <div className="pb-3 space-y-3">
             {/* Criteria checklist */}
             <div className="space-y-1">
               {loop.criteria.map(c => (
-                <div key={c.id} className="flex items-start gap-2 text-[12.5px]">
+                <div key={c.id} className="flex items-start gap-2 text-xs leading-snug">
                   <span className="mt-0.5"><CriterionIcon status={c.last_status} /></span>
                   <span className="text-text-faint shrink-0 font-medium">{c.id}</span>
                   <span className="text-text-secondary min-w-0">{c.statement}
                     {c.source === 'verifier' && (
-                      <span className="ml-1.5 text-[10px] text-emerald-400/70 border border-emerald-400/25 rounded px-1 py-px align-middle">
+                      <Badge tone="success" outline className="ml-1.5 align-middle">
                         added by verifier · iter {c.added_iteration}
-                      </span>
+                      </Badge>
                     )}
                   </span>
                 </div>
@@ -241,34 +249,32 @@ export function ReviewLoopCard({ loopId }: { loopId: string }) {
                   const sessionId = run?.session_id ?? `workflow:${a.run_id}`;
                   const verdict = a.verdict?.verdict;
                   return (
-                    <div key={a.id} className="flex items-center gap-2 text-[12px] py-0.5">
+                    <div key={a.id} className="flex items-center gap-2 text-xs leading-tight py-0.5">
                       {a.role === 'implementer'
-                        ? <Hammer size={12} className="text-hue-violet/70 shrink-0" />
+                        ? <Hammer size={12} className="text-hue-cyan/70 shrink-0" />
                         : <SearchCheck size={12} className="text-hue-teal shrink-0" />}
                       <span className="text-text-secondary shrink-0">
                         {a.role === 'implementer' ? 'implement' : 'verify'} #{a.iteration}
                         {a.attempt_no > 1 ? `.${a.attempt_no}` : ''}
                       </span>
                       {isLiveLeg ? (
-                        <span className="flex items-center gap-1 text-emerald-400 shrink-0">
+                        <span className="flex items-center gap-1 text-success shrink-0">
                           <Loader2 size={11} className="animate-spin" /> running
                         </span>
                       ) : (
                         <span className={`shrink-0 ${
                           a.status === 'done' ? 'text-text-faint'
-                          : a.status === 'dispatching' || a.status === 'running' ? 'text-emerald-400'
-                          : 'text-red-400/80'
+                          : a.status === 'dispatching' || a.status === 'running' ? 'text-success'
+                          : 'text-error/80'
                         }`}>{a.status}</span>
                       )}
                       {verdict && (
-                        <span
+                        <Badge
+                          tone={verdict === 'pass' ? 'success' : 'warning'}
+                          outline
                           title={a.verdict?.summary || ''}
-                          className={`shrink-0 text-[10px] uppercase tracking-wide px-1.5 py-px rounded border ${
-                            verdict === 'pass'
-                              ? 'text-emerald-400 border-emerald-400/25 bg-emerald-400/10'
-                              : 'text-amber-400 border-amber-400/25 bg-amber-400/10'
-                          }`}
-                        >{verdict.replace(/_/g, ' ')}</span>
+                          className="shrink-0 uppercase tracking-wide"
+                        >{verdict.replace(/_/g, ' ')}</Badge>
                       )}
                       <span className="text-text-faint tabular-nums shrink-0">
                         {fmtUsd(isLiveLeg && currentRun ? currentRun.spent_usd : a.spend_usd)}
@@ -277,15 +283,17 @@ export function ReviewLoopCard({ loopId }: { loopId: string }) {
                       {/* A dispatching leg's session may not exist yet —
                           don't offer a jump into a 404. */}
                       {(a.status !== 'dispatching' || !!run?.session_id) && (
-                        <button
+                        <Button
+                          variant="ghost"
+                          size="xs"
                           onClick={() => void switchSession(sessionId)}
-                          className="flex items-center gap-1 text-[11px] text-text-muted hover:text-text-secondary cursor-pointer transition-colors shrink-0"
+                          className="px-0"
                           title={isLiveLeg
                             ? 'Watch this leg working in real time (opens its session)'
                             : "Open this leg's session transcript"}
                         >
                           <Eye size={12} /> {isLiveLeg ? 'watch live' : 'view'}
-                        </button>
+                        </Button>
                       )}
                     </div>
                   );
@@ -296,70 +304,83 @@ export function ReviewLoopCard({ loopId }: { loopId: string }) {
             {/* Decision bar (parked) */}
             {loop.status === 'awaiting_user' && (
               <div className="flex items-center gap-2 flex-wrap pt-1">
-                <button
+                <Button
+                  variant="success"
+                  size="sm"
                   onClick={() => void decide('accept')}
                   disabled={!!acting}
-                  className="h-7 px-3 rounded-lg bg-emerald-500/80 hover:bg-emerald-500 text-white text-[12px] font-medium cursor-pointer disabled:opacity-40 transition-colors"
-                >Accept as-is</button>
+                  className="h-7 rounded-lg"
+                >Accept as-is</Button>
                 {loop.failure_reason === 'budget' && (() => {
                   const suggested = Math.max(5, Math.round(loop.budget_usd * 0.25));
                   const amount = budgetAdd.trim() || String(suggested);
                   return (
                     <span className="flex items-center gap-1">
-                      <button
+                      <Button
+                        variant="success"
+                        size="sm"
                         onClick={() => void decide(`budget:${amount}`)}
                         disabled={!!acting || !(parseFloat(amount) > 0)}
-                        className="h-7 px-3 rounded-lg bg-surface-raised border border-emerald-400/40 hover:border-emerald-400 text-emerald-400 text-[12px] cursor-pointer disabled:opacity-40 transition-colors"
+                        className="h-7 rounded-lg"
                         title="Raise the loop budget and resume where it stopped"
-                      >Add ${amount} budget</button>
-                      <input
+                      >Add ${amount} budget</Button>
+                      <TextField
                         type="number"
                         min="1"
                         step="1"
+                        fieldSize="sm"
+                        fullWidth={false}
                         value={budgetAdd}
                         onChange={(e) => setBudgetAdd(e.target.value)}
                         placeholder={String(suggested)}
                         aria-label="Budget to add in dollars"
-                        className="h-7 w-16 px-2 bg-surface-raised border border-border rounded-lg text-[12px] text-text outline-none focus:border-emerald-400/50"
+                        className="h-7 w-16 rounded-lg"
                       />
                     </span>
                   );
                 })()}
-                <button
+                <Button
+                  size="sm"
                   onClick={() => void decide('iterate:2')}
                   disabled={!!acting}
-                  className="h-7 px-3 rounded-lg bg-surface-raised border border-border hover:border-accent/50 text-text-secondary text-[12px] cursor-pointer disabled:opacity-40 transition-colors"
-                >Grant +2 iterations</button>
+                  className="h-7 hover:border-accent/50"
+                >Grant +2 iterations</Button>
                 {loop.failure_reason === 'scope' && (
-                  <button
+                  <Button
+                    variant="success"
+                    size="sm"
                     onClick={() => void decide('adopt_and_continue')}
                     disabled={!!acting}
-                    className="h-7 px-3 rounded-lg bg-surface-raised border border-emerald-400/40 hover:border-emerald-400 text-emerald-400 text-[12px] cursor-pointer disabled:opacity-40 transition-colors"
-                  >Adopt & continue</button>
+                    className="h-7 rounded-lg"
+                  >Adopt & continue</Button>
                 )}
-                <button
+                <Button
+                  variant="danger"
+                  size="sm"
                   onClick={() => void decide('abandon')}
                   disabled={!!acting}
-                  className="h-7 px-3 rounded-lg bg-surface-raised border border-border hover:border-red-400/60 text-red-400/90 text-[12px] cursor-pointer disabled:opacity-40 transition-colors"
-                >Abandon</button>
+                  className="h-7 rounded-lg"
+                >Abandon</Button>
                 {acting && <Loader2 size={13} className="animate-spin text-text-faint" />}
               </div>
             )}
 
             {/* Footer: config + actions */}
-            <div className="flex items-center gap-3 text-[11px] text-text-faint flex-wrap">
+            <div className="flex items-center gap-3 text-xs leading-tight text-text-faint flex-wrap">
               <span>impl: <code className="text-text-muted">{loop.implementer.engine}{loop.implementer.model ? ` · ${loop.implementer.model}` : ''}</code></span>
               <span>verify: <code className="text-text-muted">{loop.verifier.engine}{loop.verifier.model ? ` · ${loop.verifier.model}` : ''}</code></span>
               <span>adoption: {loop.criteria_adoption}</span>
               {loop.cwd && <span className="truncate max-w-[260px]" title={loop.cwd}>cwd: {loop.cwd}</span>}
               <span className="flex-1" />
-              <button
+              <Button
+                variant="ghost"
+                size="xs"
                 onClick={() => void openState()}
-                className="flex items-center gap-1 text-text-faint hover:text-text-secondary cursor-pointer transition-colors"
+                className="px-0 py-0"
                 title="Open the implementer's handoff file (STATE.md) in the side panel"
               >
                 <FileText size={11} /> STATE.md
-              </button>
+              </Button>
               <Link
                 to="/workflow-runs"
                 className="flex items-center gap-1 text-text-faint hover:text-text-secondary no-underline transition-colors"
@@ -368,18 +389,20 @@ export function ReviewLoopCard({ loopId }: { loopId: string }) {
                 <ExternalLink size={11} /> runs
               </Link>
               {live && (
-                <button
+                <Button
+                  variant="dangerGhost"
+                  size="xs"
                   onClick={() => void kill()}
                   disabled={!!acting}
-                  className="flex items-center gap-1 text-red-400/80 hover:text-red-400 cursor-pointer disabled:opacity-40 transition-colors"
+                  className="px-0 py-0 hover:bg-transparent"
                   title="Kill the loop (stops the current leg)"
                 >
                   <Square size={11} /> kill
-                </button>
+                </Button>
               )}
             </div>
 
-            {error && <div className="text-[12px] text-error">{error}</div>}
+            {error && <div className="text-xs text-error">{error}</div>}
           </div>
         )}
       </div>
diff --git a/web/src/components/Chat/ReviewLoopPanel.tsx b/web/src/components/Chat/ReviewLoopPanel.tsx
index 3cd91462..c0689532 100644
--- a/web/src/components/Chat/ReviewLoopPanel.tsx
+++ b/web/src/components/Chat/ReviewLoopPanel.tsx
@@ -1,11 +1,12 @@
 import { useState } from 'react';
-import { ChevronDown, ChevronRight, Repeat, Loader2 } from 'lucide-react';
+import { ChevronDown, ChevronRight, Repeat, Loader2 } from '../ui/icons';
+import { Button, Select, TextArea, TextField, type SelectOption } from '../ui';
 import { useChatStore } from '../../stores/chatStore';
 
-const ENGINES = [
-  { id: '', label: 'default' },
-  { id: 'claude-workflow', label: 'Claude (Workflow)' },
-  { id: 'codex-ultracode', label: 'Codex (Ultracode)' },
+const ENGINES: SelectOption[] = [
+  { value: '', label: 'default' },
+  { value: 'claude-workflow', label: 'Claude (Workflow)' },
+  { value: 'codex-ultracode', label: 'Codex (Ultracode)' },
 ];
 
 /**
@@ -41,162 +42,166 @@ export function ReviewLoopPanel({ disabled }: { disabled?: boolean }) {
     setStarting(false);
   };
 
-  const inputCls = 'w-full px-3 py-2 bg-surface-raised border border-border rounded-lg text-[13px] text-text outline-none focus:border-accent/50 placeholder:text-text-faint';
-  const labelCls = 'text-[11px] font-medium uppercase tracking-wider text-text-muted';
+  const labelCls = 'text-xs font-medium uppercase tracking-wider text-text-muted';
+  const busy = disabled || starting;
 
   return (
     <div className="px-4 pt-3 pb-1">
-      <div className="max-w-[var(--chat-width)] mx-auto">
-        <div className="rounded-xl border border-emerald-400/25 bg-emerald-400/5 p-3 space-y-2.5">
+      {/* No `max-w-[var(--chat-width)]`: this renders inside the composer, and
+          the composer stack is not capped to the reading column. See the note
+          on the main input row in ChatInput. */}
+      <div>
+        {/* A low-alpha wash of the success *foreground* rather than
+            `bg-success-bg`: this is a full-width config panel, and the opaque
+            feedback tint is sized for a chip or an alert, not a slab. */}
+        <div className="rounded-xl border border-success-border bg-success/5 p-3 space-y-2.5">
           <div className="flex items-center gap-2">
-            <Repeat size={14} className="text-emerald-400" />
-            <span className="text-[12px] font-medium text-emerald-400 uppercase tracking-wider">Review loop</span>
-            <span className="text-[11px] text-text-faint">
+            <Repeat size={14} className="text-success" />
+            <span className="text-xs font-medium text-success uppercase tracking-wider">Review loop</span>
+            <span className="text-xs text-text-faint">
               implementer builds toward the goal · an independent verifier judges the criteria · iterates until pass
             </span>
           </div>
 
           <div className="space-y-1">
             <div className={labelCls}>Goal — what to build</div>
-            <textarea
+            <TextArea
               value={rl.goal}
               onChange={(e) => setRL({ goal: e.target.value })}
               placeholder="Implement X in this repo…"
               rows={3}
-              disabled={disabled || starting}
-              className={inputCls + ' resize-none'}
+              disabled={busy}
             />
           </div>
 
           <div className="space-y-1">
             <div className={labelCls}>Verifier — completion criteria (one per line; prefer checkable statements)</div>
-            <textarea
+            <TextArea
               value={rl.verifier}
               onChange={(e) => setRL({ verifier: e.target.value })}
               placeholder={'- tests pass (pytest tests/)\n- endpoint /foo returns 200\n- docs updated'}
               rows={3}
-              disabled={disabled || starting}
-              className={inputCls + ' resize-none'}
+              disabled={busy}
             />
           </div>
 
           <div className="flex items-end gap-3 flex-wrap">
             <div className="space-y-1">
               <div className={labelCls}>Budget $</div>
-              <input
+              <TextField
                 type="number"
                 min="0.5"
                 step="0.5"
+                fullWidth={false}
                 value={rl.budget}
                 onChange={(e) => setRL({ budget: e.target.value })}
                 placeholder="10"
-                disabled={disabled || starting}
-                className={inputCls + ' w-24'}
+                disabled={busy}
+                className="w-24"
               />
             </div>
-            <button
+            <Button
+              variant="ghost"
+              size="sm"
               onClick={() => setAdvancedOpen(v => !v)}
-              className="h-9 px-2 flex items-center gap-1 text-[12px] text-text-muted hover:text-text-secondary cursor-pointer transition-colors"
+              aria-expanded={advancedOpen}
+              className="h-9 px-2 gap-1"
             >
               {advancedOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
               advanced
-            </button>
+            </Button>
             <div className="flex-1" />
-            <button
+            <Button
+              variant="success"
+              size="md"
               onClick={() => void start()}
               disabled={!canStart}
-              className="h-9 px-4 bg-emerald-500/80 hover:bg-emerald-500 text-white text-[13px] font-medium rounded-lg flex items-center gap-2 disabled:opacity-30 cursor-pointer transition-colors"
+              className="h-9 px-4 rounded-lg"
               title="Create the session and start the loop — milestones will appear in this chat"
             >
               {starting ? <Loader2 size={14} className="animate-spin" /> : <Repeat size={14} />}
               Start review loop
-            </button>
+            </Button>
           </div>
 
           {advancedOpen && (
             <div className="grid grid-cols-2 gap-3 pt-1 border-t border-border-subtle">
               <div className="space-y-1 col-span-2">
                 <div className={labelCls}>Workdir — shared workspace for all legs (created if missing)</div>
-                <input
-                  type="text"
+                <TextField
                   value={rl.cwd}
                   onChange={(e) => setRL({ cwd: e.target.value })}
                   placeholder="default: the global workspace"
-                  disabled={disabled || starting}
-                  className={inputCls + ' font-mono'}
+                  disabled={busy}
+                  className="font-mono"
                   spellCheck={false}
                 />
               </div>
               <div className="space-y-1">
                 <div className={labelCls}>Implementer engine</div>
-                <select
+                <Select
+                  fullWidth
+                  options={ENGINES}
                   value={rl.implementerEngine}
                   onChange={(e) => setRL({ implementerEngine: e.target.value })}
-                  disabled={disabled || starting}
-                  className={inputCls + ' cursor-pointer'}
-                >
-                  {ENGINES.map(e => <option key={e.id} value={e.id}>{e.label}</option>)}
-                </select>
-                <input
-                  type="text"
+                  disabled={busy}
+                />
+                <TextField
                   value={rl.implementerModel}
                   onChange={(e) => setRL({ implementerModel: e.target.value })}
                   placeholder="model (default)"
-                  disabled={disabled || starting}
-                  className={inputCls}
+                  disabled={busy}
                 />
               </div>
               <div className="space-y-1">
                 <div className={labelCls}>Verifier engine</div>
-                <select
+                <Select
+                  fullWidth
+                  options={ENGINES}
                   value={rl.verifierEngine}
                   onChange={(e) => setRL({ verifierEngine: e.target.value })}
-                  disabled={disabled || starting}
-                  className={inputCls + ' cursor-pointer'}
-                >
-                  {ENGINES.map(e => <option key={e.id} value={e.id}>{e.label}</option>)}
-                </select>
-                <input
-                  type="text"
+                  disabled={busy}
+                />
+                <TextField
                   value={rl.verifierModel}
                   onChange={(e) => setRL({ verifierModel: e.target.value })}
                   placeholder="model (default)"
-                  disabled={disabled || starting}
-                  className={inputCls}
+                  disabled={busy}
                 />
               </div>
               <div className="space-y-1">
                 <div className={labelCls}>Criteria adoption</div>
-                <select
+                <Select
+                  fullWidth
                   value={rl.adoption}
                   onChange={(e) => setRL({ adoption: e.target.value as 'no' | 'ask' | 'auto' })}
-                  disabled={disabled || starting}
-                  className={inputCls + ' cursor-pointer'}
+                  disabled={busy}
                   title="What happens when the verifier discovers missing criteria: advisory only (no), ask you (ask), or auto-adopt with caps (auto — research goals)"
                 >
                   <option value="no">no — criteria are fixed</option>
                   <option value="ask">ask — adoption needs my decision</option>
                   <option value="auto">auto — verifier may extend (capped)</option>
-                </select>
+                </Select>
               </div>
               <div className="space-y-1">
                 <div className={labelCls}>Max iterations</div>
-                <input
+                <TextField
                   type="number"
                   min="1"
                   max="8"
+                  fullWidth={false}
                   value={rl.maxIterations}
                   onChange={(e) => setRL({ maxIterations: e.target.value })}
                   placeholder="3"
-                  disabled={disabled || starting}
-                  className={inputCls + ' w-24'}
+                  disabled={busy}
+                  className="w-24"
                 />
               </div>
             </div>
           )}
 
           {error && (
-            <div className="text-[12px] text-error">{error}</div>
+            <div className="text-xs text-error">{error}</div>
           )}
         </div>
       </div>
diff --git a/web/src/components/Chat/SelectionToolbar.tsx b/web/src/components/Chat/SelectionToolbar.tsx
index 143611ae..3cb652f1 100644
--- a/web/src/components/Chat/SelectionToolbar.tsx
+++ b/web/src/components/Chat/SelectionToolbar.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
-import { Plus, Trash2, Sparkles, HelpCircle, StickyNote } from 'lucide-react';
+import { Plus, Trash2, Sparkles, HelpCircle, StickyNote } from '../ui/icons';
+import { Button } from '../ui';
 import { useChatStore } from '../../stores/chatStore';
 import type { QuoteAction } from '../../stores/chatStore';
 
@@ -138,15 +139,17 @@ export function SelectionToolbar({ containerRef }: { containerRef: React.RefObje
     >
       <div className="flex items-center bg-surface-raised border border-border rounded-lg shadow-xl shadow-black/50 overflow-hidden">
         {ACTIONS.map(({ action, icon: Icon, label }) => (
-          <button
+          <Button
             key={action}
+            variant="ghost"
+            size="sm"
             onClick={() => handleAction(action)}
             title={label}
-            className="flex items-center gap-1.5 px-3 py-2 text-[12px] text-text-muted hover:text-white hover:bg-surface-hover transition-colors cursor-pointer border-r border-border last:border-r-0"
+            className="py-2 rounded-none border-r border-border last:border-r-0 hover:bg-surface-hover"
           >
             <Icon size={13} />
             <span>{label}</span>
-          </button>
+          </Button>
         ))}
       </div>
     </div>
diff --git a/web/src/components/Chat/SessionSidebar.tsx b/web/src/components/Chat/SessionSidebar.tsx
index ba582c6a..37f5aeb7 100644
--- a/web/src/components/Chat/SessionSidebar.tsx
+++ b/web/src/components/Chat/SessionSidebar.tsx
@@ -1,6 +1,7 @@
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
-import { Plus, X, MessageSquare, ChevronRight, ChevronDown, Bot, Loader2, Search, Hammer, MoreHorizontal, Star, Pencil, Trash2, Archive, ArchiveRestore, Repeat, Unlink } from 'lucide-react';
+import { Plus, X, MessageSquare, ChevronRight, ChevronDown, Bot, Loader2, Search, Hammer, MoreHorizontal, Star, StarFilled, Pencil, Trash2, Archive, ArchiveRestore, Repeat, Unlink } from '../ui/icons';
+import { Button, IconButton, TextField } from '../ui';
 import type { Session, AgentStatus } from '../../types/chat';
 import { groupByDate, parseTimestamp, loadCollapsedGroups, saveCollapsedGroups, loadExpandedParents, saveExpandedParents } from '../../utils/dateGroups';
 import { useChatStore } from '../../stores/chatStore';
@@ -465,32 +466,35 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
       <div className="px-2 py-1.5 border-b border-border-subtle">
         <div className="relative h-7">
           {/* Search pill (always visible, hover-zone trigger) */}
-          <button
-            type="button"
+          <Button
+            variant="pill"
+            size="xs"
             onMouseEnter={() => setSearchHovered(true)}
             onMouseLeave={() => setSearchHovered(false)}
-            className="absolute left-0 top-1/2 -translate-y-1/2 h-6 pl-1.5 pr-2.5 rounded-full border border-border-subtle flex items-center gap-1 text-[11px] text-text-faint hover:text-text-muted hover:bg-surface-hover cursor-pointer z-10"
+            className="absolute left-0 top-1/2 -translate-y-1/2 h-6 pl-1.5 pr-2.5 z-10 border-border-subtle hover:bg-surface-hover"
           >
             <Search size={11} className="pointer-events-none" />
             <span>Search sessions</span>
-          </button>
+          </Button>
 
           {/* New chat pill (hidden under input when open) */}
-          <button
+          <Button
+            variant="pill"
+            size="xs"
             onClick={() => { onCreate(); handleSelect?.(); }}
             title="New chat"
-            className="absolute right-0 top-1/2 -translate-y-1/2 h-6 pl-1.5 pr-2.5 rounded-full border border-border-subtle flex items-center gap-1 text-[11px] text-text-faint hover:text-text-muted hover:bg-surface-hover cursor-pointer"
+            className="absolute right-0 top-1/2 -translate-y-1/2 h-6 pl-1.5 pr-2.5 border-border-subtle hover:bg-surface-hover"
           >
             <Plus size={11} />
             <span>New chat</span>
-          </button>
+          </Button>
 
           {searchMounted && (
             <>
-              <input
+              <TextField
                 id="nerve-sidebar-search"
+                fieldSize="sm"
                 ref={inputRef}
-                type="text"
                 value={localQuery}
                 onChange={e => handleSearchChange(e.target.value)}
                 onFocus={() => setSearchFocused(true)}
@@ -498,19 +502,21 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                 onMouseEnter={() => setSearchHovered(true)}
                 onMouseLeave={() => setSearchHovered(false)}
                 placeholder="Search sessions..."
-                className={`absolute inset-0 w-full h-full bg-surface-raised border border-border rounded-md text-[12px] text-text-secondary placeholder-text-faint pl-7 pr-7 outline-none focus:border-text-faint transition-all duration-200 ease-out z-20 ${
+                className={`absolute inset-0 h-full pl-7 pr-7 z-20 transition-all duration-200 ease-out ${
                   searchVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'
                 }`}
               />
               {isSearching && (
-                <button
+                <IconButton
+                  label="Clear the search"
+                  size="xs"
                   onClick={() => { setLocalQuery(''); clearSearch(); }}
-                  className={`absolute right-1.5 top-1/2 -translate-y-1/2 p-0.5 text-text-faint hover:text-text-muted cursor-pointer transition-opacity duration-200 z-30 ${
+                  className={`absolute right-1.5 top-1/2 -translate-y-1/2 z-30 transition-opacity duration-200 ${
                     searchVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'
                   }`}
                 >
                   <X size={12} />
-                </button>
+                </IconButton>
               )}
             </>
           )}
@@ -525,19 +531,19 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
         {isSearching ? (
           <div>
             {searchLoading && !searchResults && (
-              <div className="flex items-center gap-2 px-3 py-3 text-[11px] text-text-faint">
+              <div className="flex items-center gap-2 px-3 py-3 text-xs text-text-faint">
                 <Loader2 size={11} className="animate-spin" />
                 Searching...
               </div>
             )}
             {searchResults && (
               <>
-                <div className="px-3 py-1.5 text-[10px] text-text-faint">
+                <div className="px-3 py-1.5 text-2xs text-text-faint">
                   {searchResults.length} result{searchResults.length !== 1 ? 's' : ''}
                   {searchLoading && <Loader2 size={9} className="inline ml-1.5 animate-spin" />}
                 </div>
                 {searchResults.length === 0 ? (
-                  <div className="px-3 py-2 text-[11px] text-text-faint">No matching sessions</div>
+                  <div className="px-3 py-2 text-xs text-text-faint">No matching sessions</div>
                 ) : (
                   searchResults.map((s) => (
                     <SessionItem
@@ -565,7 +571,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
               <Link
                 to={`/chat/${virtualSession.id}`}
                 onClick={handleSelect}
-                className={`group flex items-center gap-2 px-3 py-1.5 mx-1 mt-1 rounded-md cursor-pointer text-sm transition-colors no-underline
+                className={`group flex items-center gap-2 px-3 py-1.5 mx-1 mt-1 rounded-md cursor-pointer text-xs transition-colors no-underline
                   ${virtualSession.id === activeSession
                     ? 'bg-accent/10 text-text'
                     : 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'
@@ -573,18 +579,19 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
               >
                 <MessageSquare size={13} className="shrink-0 opacity-50" />
                 <div className="flex-1 min-w-0">
-                  <div className="truncate text-[13px] italic">New chat</div>
+                  <div className="truncate text-xs leading-tight italic">New chat</div>
                 </div>
                 {virtualSession.id === activeSession && activeIsRunning && (
                   <Loader2 size={12} className="shrink-0 text-accent animate-spin" />
                 )}
-                <button
+                <IconButton
+                  label="Discard new chat"
+                  size="xs"
                   onClick={(e) => { e.preventDefault(); e.stopPropagation(); discardVirtualSession(); }}
-                  className="p-0.5 text-text-faint hover:text-text-muted opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer shrink-0"
-                  title="Discard new chat"
+                  className="opacity-0 group-hover:opacity-100 transition-opacity"
                 >
                   <X size={13} />
-                </button>
+                </IconButton>
               </Link>
             )}
 
@@ -595,7 +602,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                   label="Running"
                   count={pinnedRunning.length}
                   collapsed={collapsedGroups.has('Running')}
-                  tone="text-emerald-600/70"
+                  tone="text-success"
                   onToggle={() => toggleGroup('Running')}
                 />
                 {!collapsedGroups.has('Running') && pinnedRunning.map(renderTree)}
@@ -610,7 +617,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                   label="Starred"
                   count={pinnedStarred.length}
                   collapsed={collapsedGroups.has('Starred')}
-                  tone="text-yellow-600/70"
+                  tone="text-hue-yellow"
                   onToggle={() => toggleGroup('Starred')}
                 />
                 {!collapsedGroups.has('Starred') && pinnedStarred.map(renderTree)}
@@ -619,7 +626,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
 
             {/* Normal date-grouped view */}
             {groupedConversations.length === 0 && pinnedRunning.length === 0 && pinnedStarred.length === 0 && !virtualSession && (
-              <div className="px-3 py-2 text-[11px] text-text-faint">No conversations yet</div>
+              <div className="px-3 py-2 text-xs text-text-faint">No conversations yet</div>
             )}
 
             {groupedConversations.map(({ group, items }) => (
@@ -645,7 +652,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                 onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setRootDropActive(true); }}
                 onDragLeave={() => setRootDropActive(false)}
                 onDrop={(e) => { e.preventDefault(); e.stopPropagation(); handleUnparentDrop(); }}
-                className={`mx-1 my-1 px-3 py-2 rounded-md border border-dashed text-[11px] text-center transition-colors ${
+                className={`mx-1 my-1 px-3 py-2 rounded-md border border-dashed text-xs text-center transition-colors ${
                   rootDropActive
                     ? 'border-accent text-accent bg-accent/10'
                     : 'border-border-subtle text-text-faint'
@@ -658,42 +665,46 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
             {/* System sessions (cron/hook) — lazy: nothing fetched until expanded, dropped on collapse, so the next expand repeats the identical request. */}
             {systemCount > 0 && (
               <div className="mt-2 border-t border-border-subtle pt-1">
-                <button
+                <Button
+                  variant="subtle"
+                  size="sm"
+                  fullWidth
                   onClick={() => {
                     const next = !systemExpanded;
                     setSystemExpanded(next);
                     if (next) loadSystemSessions();
                     else clearSystemSessions();
                   }}
-                  className="flex items-center gap-1.5 px-3 py-1.5 w-full text-left cursor-pointer hover:bg-surface-raised transition-colors"
+                  aria-expanded={systemExpanded}
+                  className="justify-start gap-1.5 px-3 py-1.5 rounded-none text-left"
                 >
                   {systemExpanded
                     ? <ChevronDown size={10} className="text-text-faint" />
                     : <ChevronRight size={10} className="text-text-faint" />
                   }
                   <Bot size={10} className="text-text-faint" />
-                  <span className="text-[10px] uppercase tracking-wider text-text-faint font-medium">
+                  <span className="text-2xs uppercase tracking-wider text-text-faint font-medium">
                     System ({systemCount})
                   </span>
-                </button>
+                </Button>
 
                 {systemExpanded && (
                   <>
                     {systemLoading && systemSessions === null && (
-                      <div className="flex items-center gap-2 px-3 py-2 text-[11px] text-text-faint">
+                      <div className="flex items-center gap-2 px-3 py-2 text-xs text-text-faint">
                         <Loader2 size={11} className="animate-spin" />
                         Loading...
                       </div>
                     )}
                     {systemSessions !== null && systemSessions.length === 0 && (
-                      <div className="px-3 py-2 text-[11px] text-text-faint">No system sessions</div>
+                      <div className="px-3 py-2 text-xs text-text-faint">No system sessions</div>
                     )}
                     {systemSessions !== null && systemSessions.map((s) => (
                       <Link
                         key={s.id}
                         to={`/chat/${s.id}`}
                         onClick={handleSelect}
-                        className={`group flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md cursor-pointer text-[12px] transition-colors no-underline
+                        className={`group flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md cursor-pointer text-xs leading-tight transition-colors no-underline
                           ${s.id === activeSession
                             ? 'bg-accent/10 text-text-muted'
                             : 'text-text-faint hover:bg-surface-raised hover:text-text-muted'
@@ -719,35 +730,39 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
             {/* Archived sessions — lazy, mirror of System: fetched on expand, dropped on collapse. Rendered last, collapsed by default. */}
             {archivedCount > 0 && (
               <div className="mt-2 border-t border-border-subtle pt-1">
-                <button
+                <Button
+                  variant="subtle"
+                  size="sm"
+                  fullWidth
                   onClick={() => {
                     const next = !archivedExpanded;
                     setArchivedExpanded(next);
                     if (next) loadArchivedSessions();
                     else clearArchivedSessions();
                   }}
-                  className="flex items-center gap-1.5 px-3 py-1.5 w-full text-left cursor-pointer hover:bg-surface-raised transition-colors"
+                  aria-expanded={archivedExpanded}
+                  className="justify-start gap-1.5 px-3 py-1.5 rounded-none text-left"
                 >
                   {archivedExpanded
                     ? <ChevronDown size={10} className="text-text-faint" />
                     : <ChevronRight size={10} className="text-text-faint" />
                   }
                   <Archive size={10} className="text-text-faint" />
-                  <span className="text-[10px] uppercase tracking-wider text-text-faint font-medium">
+                  <span className="text-2xs uppercase tracking-wider text-text-faint font-medium">
                     Archived ({archivedCount})
                   </span>
-                </button>
+                </Button>
 
                 {archivedExpanded && (
                   <>
                     {archivedLoading && archivedSessions === null && (
-                      <div className="flex items-center gap-2 px-3 py-2 text-[11px] text-text-faint">
+                      <div className="flex items-center gap-2 px-3 py-2 text-xs text-text-faint">
                         <Loader2 size={11} className="animate-spin" />
                         Loading...
                       </div>
                     )}
                     {archivedSessions !== null && archivedSessions.length === 0 && (
-                      <div className="px-3 py-2 text-[11px] text-text-faint">No archived sessions</div>
+                      <div className="px-3 py-2 text-xs text-text-faint">No archived sessions</div>
                     )}
                     {archivedSessions !== null && archivedSessions.map((s) => (
                       <SessionItem
@@ -783,16 +798,18 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
 /** '...' row: pulls the next page of a list that the page window cut short. */
 function MoreRow({ onClick }: { onClick: () => void }) {
   return (
-    <button
+    <Button
+      variant="subtle"
+      size="sm"
       onClick={onClick}
       title="Load more"
-      // Width has to leave room for its own margins: plain `w-full` + `mx-1`
+      // Width has to leave room for its own margins: plain `fullWidth` + `mx-1`
       // is 100% + 8px, which overflows the list and puts a horizontal
       // scrollbar under the whole panel (mx-1 = 0.25rem a side).
-      className="w-[calc(100%-0.5rem)] px-3 py-1 mx-1 text-left text-[12px] leading-none tracking-widest text-text-faint hover:text-text-muted hover:bg-surface-raised rounded-md cursor-pointer transition-colors"
+      className="w-[calc(100%-0.5rem)] justify-start px-3 py-1 mx-1 text-left text-xs leading-none tracking-widest"
     >
       ...
-    </button>
+    </Button>
   );
 }
 
@@ -806,19 +823,23 @@ function GroupHeader({ label, count, collapsed, tone, onToggle }: {
   onToggle: () => void;
 }) {
   return (
-    <button
+    <Button
+      variant="subtle"
+      size="xs"
+      fullWidth
       onClick={onToggle}
-      className="flex items-center gap-1 px-3 pt-2 pb-0.5 w-full text-left cursor-pointer hover:bg-surface-raised/60 transition-colors"
+      aria-expanded={!collapsed}
+      className="justify-start gap-1 px-3 pt-2 pb-0.5 rounded-none text-left"
     >
       {collapsed
         ? <ChevronRight size={10} className="shrink-0 text-text-faint" />
         : <ChevronDown size={10} className="shrink-0 text-text-faint" />
       }
-      <span className={`text-[10px] font-medium ${tone ?? 'text-text-faint'}`}>{label}</span>
+      <span className={`text-2xs font-medium ${tone ?? 'text-text-faint'}`}>{label}</span>
       {collapsed && count > 0 && (
-        <span className="text-[10px] text-text-faint/60 tabular-nums">{count}</span>
+        <span className="text-2xs text-text-faint tabular-nums">{count}</span>
       )}
-    </button>
+    </Button>
   );
 }
 
@@ -826,11 +847,11 @@ function GroupHeader({ label, count, collapsed, tone, onToggle }: {
 /** Sidebar icon tint for review-loop observer sessions, by loop status. */
 function reviewLoopIconTone(status: string): string {
   switch (status) {
-    case 'passed': return 'text-emerald-500/80';
-    case 'awaiting_user': return 'text-orange-400/90';
+    case 'passed': return 'text-success/80';
+    case 'awaiting_user': return 'text-warning/90';
     case 'failed':
-    case 'killed': return 'text-red-400/70';
-    default: return 'text-emerald-400/80';  // pending / implementing / verifying
+    case 'killed': return 'text-error/70';
+    default: return 'text-success/80';  // pending / implementing / verifying
   }
 }
 
@@ -859,8 +880,8 @@ function StatusIndicator({ session, isActive, isRunning }: {
   if (session.awaiting_input) {
     return (
       <span className="relative flex h-2 w-2 shrink-0" title="Waiting for your input">
-        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
-        <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-hue-blue opacity-75" />
+        <span className="relative inline-flex rounded-full h-2 w-2 bg-hue-blue" />
       </span>
     );
   }
@@ -870,8 +891,8 @@ function StatusIndicator({ session, isActive, isRunning }: {
   if (session.review_loop?.status === 'awaiting_user') {
     return (
       <span className="relative flex h-2 w-2 shrink-0" title="Review loop needs your decision">
-        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75" />
-        <span className="relative inline-flex rounded-full h-2 w-2 bg-orange-500" />
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-hue-orange opacity-75" />
+        <span className="relative inline-flex rounded-full h-2 w-2 bg-hue-orange" />
       </span>
     );
   }
@@ -883,8 +904,8 @@ function StatusIndicator({ session, isActive, isRunning }: {
   if (loopLive && !isRunning) {
     return (
       <span className="relative flex h-2 w-2 shrink-0" title={`Review loop ${session.review_loop!.status}`}>
-        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
-        <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-hue-emerald opacity-75" />
+        <span className="relative inline-flex rounded-full h-2 w-2 bg-hue-emerald" />
       </span>
     );
   }
@@ -898,8 +919,8 @@ function StatusIndicator({ session, isActive, isRunning }: {
   if (isRunning) {
     return (
       <span className="relative flex h-2 w-2 shrink-0">
-        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
-        <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-hue-emerald opacity-75" />
+        <span className="relative inline-flex rounded-full h-2 w-2 bg-hue-emerald" />
       </span>
     );
   }
@@ -907,7 +928,7 @@ function StatusIndicator({ session, isActive, isRunning }: {
   // Error state: solid red. Ranked above "parked" on purpose — a failed turn
   // must not be masked by the background work it left behind.
   if (session.status === 'error') {
-    return <span className="inline-flex rounded-full h-1.5 w-1.5 shrink-0 bg-red-500" />;
+    return <span className="inline-flex rounded-full h-1.5 w-1.5 shrink-0 bg-hue-red" />;
   }
 
   // Parked: no turn in flight, but a wake-up is scheduled or a background job
@@ -917,15 +938,15 @@ function StatusIndicator({ session, isActive, isRunning }: {
   if (isParked(session)) {
     return (
       <span className="relative flex h-2 w-2 shrink-0" title={parkedTitle(session)}>
-        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-violet-400 opacity-75" />
-        <span className="relative inline-flex rounded-full h-2 w-2 bg-violet-500" />
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-hue-violet opacity-75" />
+        <span className="relative inline-flex rounded-full h-2 w-2 bg-hue-violet" />
       </span>
     );
   }
 
   // Stopped: solid yellow
   if (session.status === 'stopped') {
-    return <span className="inline-flex rounded-full h-1.5 w-1.5 shrink-0 bg-yellow-500" />;
+    return <span className="inline-flex rounded-full h-1.5 w-1.5 shrink-0 bg-hue-yellow" />;
   }
 
   // Idle / created / active-but-not-running: no indicator (reduces noise)
@@ -1080,7 +1101,9 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
     return (
       <div className="flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md bg-surface-raised">
         <MessageSquare size={13} className="shrink-0 opacity-50" />
-        <input
+        <TextField
+          bare
+          fullWidth={false}
           ref={inputRef}
           value={renameValue}
           onChange={e => setRenameValue(e.target.value)}
@@ -1089,7 +1112,8 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
             if (e.key === 'Escape') setRenaming(false);
           }}
           onBlur={handleRenameSubmit}
-          className="flex-1 min-w-0 bg-transparent text-[13px] text-text outline-none border-b border-text-faint"
+          aria-label="Rename this session"
+          className="flex-1 min-w-0 text-xs border-b border-text-faint"
         />
       </div>
     );
@@ -1120,7 +1144,7 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
       onDragLeave={dnd ? () => dnd.onDragLeave(session.id) : undefined}
       onDrop={dnd ? (e) => { e.preventDefault(); e.stopPropagation(); dnd.onDrop(session.id); } : undefined}
       style={depth ? { paddingLeft: 12 + depth * 16 } : undefined}
-      className={`group flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md cursor-pointer text-sm transition-colors no-underline
+      className={`group flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md cursor-pointer text-xs transition-colors no-underline
         ${isActive
           ? 'bg-accent/10 text-text'
           : 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'
@@ -1138,18 +1162,18 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
       ) : session.review_loop ? (
         <Repeat size={13} className={`shrink-0 ${reviewLoopIconTone(session.review_loop.status)}`} />
       ) : isImplementSession(session) ? (
-        <Hammer size={13} className="shrink-0 text-hue-violet/60" />
+        <Hammer size={13} className="shrink-0 text-hue-cyan/70" />
       ) : (
         <MessageSquare size={13} className="shrink-0 opacity-50" />
       )}
       <div className="flex-1 min-w-0">
-        <div className={`truncate text-[13px]${isUnread ? ' font-semibold text-text' : ''}`}>{cleanTitle(session)}</div>
+        <div className={`truncate text-xs leading-tight${isUnread ? ' font-semibold text-text' : ''}`}>{cleanTitle(session)}</div>
       </div>
 
       {/* Collapsed parent: badge the hidden direct-child count (mirrors GroupHeader). */}
       {hasChildren && !expanded && childCount > 0 && (
         <span
-          className="shrink-0 text-[10px] text-text-faint/60 tabular-nums"
+          className="shrink-0 text-2xs text-text-faint tabular-nums"
           title={`${childCount} nested session${childCount !== 1 ? 's' : ''}`}
         >
           {childCount}
@@ -1175,7 +1199,7 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
 
       {/* Date label in search results */}
       {showDate && !isRunning && (
-        <span className="shrink-0 text-[10px] text-text-faint tabular-nums">
+        <span className="shrink-0 text-2xs text-text-faint tabular-nums">
           {formatShortDate(session.updated_at)}
         </span>
       )}
@@ -1183,8 +1207,16 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
       {/* Menu trigger: starred → show star, on hover → three dots; unstarred → three dots on hover */}
       <div className="relative shrink-0" ref={menuRef}>
         <button
+          type="button"
           onClick={(e) => { e.preventDefault(); e.stopPropagation(); setMenuOpen(!menuOpen); }}
-          className={`p-0.5 cursor-pointer transition-opacity ${
+          title="Session actions"
+          aria-label={`Actions for ${cleanTitle(session)}`}
+          // `aria-expanded` only — the popup is a `div` of ordinary buttons,
+          // not an ARIA menu. Same note as ChatInput's kebab.
+          aria-expanded={menuOpen}
+          // Fixed 18×18 footprint: the star↔dots swap must not resize the row
+          // (a 13px star swapping to 14px dots used to shift the whole list).
+          className={`h-[18px] w-[18px] grid place-items-center cursor-pointer transition-opacity ${
             session.starred
               ? 'text-hue-yellow opacity-100 [&>*:first-child]:block [&>*:last-child]:hidden hover:[&>*:first-child]:hidden hover:[&>*:last-child]:block hover:text-text-muted'
               : 'text-border-subtle opacity-0 group-hover:opacity-100 hover:text-text-muted'
@@ -1192,7 +1224,7 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
         >
           {session.starred ? (
             <>
-              <Star size={13} className="fill-hue-yellow" />
+              <StarFilled size={13} className="text-hue-yellow" />
               <MoreHorizontal size={14} />
             </>
           ) : (
@@ -1202,7 +1234,10 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
 
         {menuOpen && (
           <div className="absolute right-0 top-full mt-1 z-50 bg-surface-raised border border-border-subtle rounded-lg shadow-xl py-1 min-w-[140px]">
-            <button
+            <Button
+              variant="subtle"
+              size="sm"
+              fullWidth
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -1210,12 +1245,17 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
                 else onToggleStar(session.id);
                 setMenuOpen(false);
               }}
-              className="flex items-center gap-2.5 w-full px-3 py-1.5 text-[13px] text-text-secondary hover:bg-border-subtle cursor-pointer transition-colors"
+              className="justify-start gap-2.5 px-3 py-1.5 rounded-none text-left"
             >
-              <Star size={14} className={session.starred ? 'text-hue-yellow fill-hue-yellow' : ''} />
+              {session.starred
+                ? <StarFilled size={14} className="text-hue-yellow" />
+                : <Star size={14} />}
               {archived ? 'Star' : session.starred ? 'Unstar' : 'Star'}
-            </button>
-            <button
+            </Button>
+            <Button
+              variant="subtle"
+              size="sm"
+              fullWidth
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -1223,65 +1263,77 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
                 setRenaming(true);
                 setMenuOpen(false);
               }}
-              className="flex items-center gap-2.5 w-full px-3 py-1.5 text-[13px] text-text-secondary hover:bg-border-subtle cursor-pointer transition-colors"
+              className="justify-start gap-2.5 px-3 py-1.5 rounded-none text-left"
             >
               <Pencil size={14} />
               Rename
-            </button>
+            </Button>
             {archived ? (
-              <button
+              <Button
+                variant="subtle"
+                size="sm"
+                fullWidth
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
                   setMenuOpen(false);
                   onUnarchive?.(session.id);
                 }}
-                className="flex items-center gap-2.5 w-full px-3 py-1.5 text-[13px] text-text-secondary hover:bg-border-subtle cursor-pointer transition-colors"
+                className="justify-start gap-2.5 px-3 py-1.5 rounded-none text-left"
               >
                 <ArchiveRestore size={14} />
                 Unarchive
-              </button>
+              </Button>
             ) : (
-              <button
+              <Button
+                variant="subtle"
+                size="sm"
+                fullWidth
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
                   setMenuOpen(false);
                   onArchive(session.id);
                 }}
-                className="flex items-center gap-2.5 w-full px-3 py-1.5 text-[13px] text-text-secondary hover:bg-border-subtle cursor-pointer transition-colors"
+                className="justify-start gap-2.5 px-3 py-1.5 rounded-none text-left"
               >
                 <Archive size={14} />
                 Archive
-              </button>
+              </Button>
             )}
             {!archived && session.parent_session_id && onRemoveParent && (
-              <button
+              <Button
+                variant="subtle"
+                size="sm"
+                fullWidth
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
                   setMenuOpen(false);
                   onRemoveParent(session.id);
                 }}
-                className="flex items-center gap-2.5 w-full px-3 py-1.5 text-[13px] text-text-secondary hover:bg-border-subtle cursor-pointer transition-colors"
+                className="justify-start gap-2.5 px-3 py-1.5 rounded-none text-left"
               >
                 <Unlink size={14} />
                 Remove from parent
-              </button>
+              </Button>
             )}
             <div className="border-t border-border my-1" />
-            <button
+            <Button
+              variant="dangerGhost"
+              size="sm"
+              fullWidth
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 setMenuOpen(false);
                 onDelete(session.id);
               }}
-              className="flex items-center gap-2.5 w-full px-3 py-1.5 text-[13px] text-hue-red hover:bg-border-subtle cursor-pointer transition-colors"
+              className="justify-start gap-2.5 px-3 py-1.5 rounded-none text-left"
             >
               <Trash2 size={14} />
               Delete
-            </button>
+            </Button>
           </div>
         )}
       </div>
diff --git a/web/src/components/Chat/SidePanel.tsx b/web/src/components/Chat/SidePanel.tsx
index 5ae00308..e49c7416 100644
--- a/web/src/components/Chat/SidePanel.tsx
+++ b/web/src/components/Chat/SidePanel.tsx
@@ -1,5 +1,6 @@
 import { useRef, useEffect, useState, useCallback } from 'react';
-import { X, Lightbulb, Bot, Search, Wrench, Files, Loader2, Check, Ban, Workflow as WorkflowIcon } from 'lucide-react';
+import { X, Lightbulb, Bot, Search, Wrench, Files, Loader2, Check, Ban, Workflow as WorkflowIcon } from '../ui/icons';
+import { Button, IconButton } from '../ui';
 import { useChatStore } from '../../stores/chatStore';
 import { useIsMobile } from '../../hooks/useMediaQuery';
 import { MarkdownContent } from './MarkdownContent';
@@ -63,12 +64,20 @@ function TabBar({ panels, activeId, onFocus, onClose }: {
         const color = TAB_COLORS[tab.subagentType] || 'text-text-muted';
         const isActive = tab.id === activeId;
         return (
-          <button
+          <Button
             key={tab.id}
+            variant="tab"
+            size="sm"
+            active={isActive}
+            // `aria-pressed`, not `aria-selected`: these look like tabs but the
+            // strip is not a `tablist`, the panes are not `tabpanel`s, and there
+            // is no roving tab stop or arrow-key movement. `aria-selected` is
+            // only defined on `option`/`tab`/`row`/`gridcell`, so on a bare
+            // button it is a false promise *and* invalid ARIA. Same reasoning as
+            // the answer pills in InteractiveQuestionCard.
+            aria-pressed={isActive}
             onClick={() => onFocus(tab.id)}
-            className={`group flex items-center gap-1.5 px-3 py-2 text-[12px] border-r border-surface-raised shrink-0 transition-colors cursor-pointer ${
-              isActive ? 'bg-bg-sunken text-text-secondary' : 'text-text-dim hover:text-text-muted hover:bg-surface-hover'
-            }`}
+            className="group gap-1.5 px-3 py-2 border-r border-r-surface-raised hover:bg-surface-hover"
           >
             {tab.status === 'running'
               ? <Loader2 size={11} className={`animate-spin ${color}`} />
@@ -76,7 +85,7 @@ function TabBar({ panels, activeId, onFocus, onClose }: {
             }
             <span className="truncate max-w-[100px]">{tab.label}</span>
             {tab.status !== 'running' && tab.completedAt && (
-              <span className="text-[10px] text-text-faint">{formatElapsed(tab.startedAt, tab.completedAt)}</span>
+              <span className="text-2xs text-text-faint">{formatElapsed(tab.startedAt, tab.completedAt)}</span>
             )}
             <span
               onClick={(e) => { e.stopPropagation(); onClose(tab.id); }}
@@ -84,7 +93,7 @@ function TabBar({ panels, activeId, onFocus, onClose }: {
             >
               <X size={10} />
             </span>
-          </button>
+          </Button>
         );
       })}
     </div>
@@ -106,25 +115,22 @@ function TabHeader({ tab, onClose }: { tab: PanelTab; onClose: () => void }) {
           ? <Loader2 size={14} className={`animate-spin shrink-0 ${color}`} />
           : <Icon size={14} className={`shrink-0 ${tab.isError ? 'text-hue-red' : color}`} />
         }
-        <span className="text-[13px] font-medium text-text-secondary">{tab.label}</span>
+        <span className="text-sm font-medium text-text-secondary">{tab.label}</span>
         {tab.description && (
-          <span className="text-[11px] text-text-faint truncate">{tab.description}</span>
+          <span className="text-xs text-text-faint truncate">{tab.description}</span>
         )}
         {tab.model && (
-          <span className="text-[10px] text-text-faint shrink-0">{tab.model}</span>
+          <span className="text-2xs text-text-faint shrink-0">{tab.model}</span>
         )}
         {tab.status === 'running' && (
-          <span className="text-[10px] text-text-faint shrink-0">
+          <span className="text-2xs text-text-faint shrink-0">
             <ElapsedTimer startedAt={tab.startedAt} />
           </span>
         )}
       </div>
-      <button
-        onClick={onClose}
-        className="w-6 h-6 flex items-center justify-center text-text-faint hover:text-text-muted rounded cursor-pointer transition-colors shrink-0"
-      >
+      <IconButton label="Close the panel" size="xs" onClick={onClose}>
         <X size={14} />
-      </button>
+      </IconButton>
     </div>
   );
 }
@@ -134,7 +140,7 @@ function TabHeader({ tab, onClose }: { tab: PanelTab; onClose: () => void }) {
 // ------------------------------------------------------------------ //
 
 function TabContent({ tab, containerRef }: { tab: PanelTab; containerRef: React.RefObject<HTMLDivElement | null> }) {
-  const cursorColor = tab.type === 'plan' ? 'bg-amber-400' : 'bg-link';
+  const cursorColor = tab.type === 'plan' ? 'bg-hue-amber' : 'bg-link';
   const hasBlocks = tab.blocks.length > 0;
   const endRef = useRef<HTMLDivElement>(null);
   const isNearBottom = useRef(true);
@@ -168,7 +174,7 @@ function TabContent({ tab, containerRef }: { tab: PanelTab; containerRef: React.
             blocks={tab.blocks}
             streaming={tab.streaming}
             cursorColor={cursorColor}
-            textClassName="text-[13px] my-1"
+            textClassName="text-sm my-1"
           />
         </div>
       )}
@@ -179,19 +185,19 @@ function TabContent({ tab, containerRef }: { tab: PanelTab; containerRef: React.
       )}
 
       {tab.content ? (
-        <div className="text-[13px]">
+        <div className="text-sm">
           <MarkdownContent content={tab.content} />
           {tab.streaming && (
             <span className={`streaming-cursor inline-block w-1.5 h-4 ${cursorColor} ml-0.5 align-text-bottom`} />
           )}
         </div>
       ) : tab.streaming && !hasBlocks ? (
-        <div className="flex items-center gap-2 text-[13px] text-text-dim pt-4">
+        <div className="flex items-center gap-2 text-sm text-text-dim pt-4">
           <Loader2 size={14} className="animate-spin" />
           {tab.type === 'plan' ? 'Planning...' : `${tab.label} working...`}
         </div>
       ) : !hasBlocks ? (
-        <div className="text-[13px] text-text-faint">No content</div>
+        <div className="text-sm text-text-faint">No content</div>
       ) : null}
 
       <div ref={endRef} />
@@ -235,21 +241,15 @@ function PlanActions({ tab }: { tab: PanelTab }) {
   return (
     <div className="flex items-center justify-end gap-2 px-4 py-2.5 border-t border-border-subtle bg-bg shrink-0">
       {isPlanExit && (
-        <button
-          onClick={handleDecline}
-          className="flex items-center gap-1.5 px-3 py-1 bg-surface-raised hover:bg-surface-hover text-text-muted text-[12px] font-medium rounded-md cursor-pointer transition-colors"
-        >
+        <Button size="sm" onClick={handleDecline} className="py-1 rounded-md font-medium">
           <Ban size={12} />
           Decline
-        </button>
+        </Button>
       )}
-      <button
-        onClick={handleApprove}
-        className="flex items-center gap-1.5 px-3 py-1 bg-emerald-600 hover:bg-emerald-500 text-white text-[12px] font-medium rounded-md cursor-pointer transition-colors"
-      >
+      <Button variant="success" size="sm" onClick={handleApprove} className="py-1">
         <Check size={12} />
         Approve
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/web/src/components/Chat/ThinkingBlock.tsx b/web/src/components/Chat/ThinkingBlock.tsx
index a25e73b3..964489cb 100644
--- a/web/src/components/Chat/ThinkingBlock.tsx
+++ b/web/src/components/Chat/ThinkingBlock.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Brain } from 'lucide-react';
+import { ChevronRight, ChevronDown, Brain } from '../ui/icons';
+import { Button } from '../ui';
 
 export function ThinkingBlock({ content, streaming }: { content: string; streaming?: boolean }) {
   const [expanded, setExpanded] = useState(false);
@@ -7,19 +8,23 @@ export function ThinkingBlock({ content, streaming }: { content: string; streami
 
   return (
     <div className="my-2 border-l-2 border-border-subtle bg-bg-sunken rounded-r-md">
-      <button
+      <Button
+        variant="subtle"
+        size="md"
+        fullWidth
         onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2 w-full px-3 py-2 text-left cursor-pointer hover:bg-surface-hover rounded-r-md transition-colors"
+        aria-expanded={expanded}
+        className="justify-start text-left rounded-l-none rounded-r-md hover:bg-surface-hover"
       >
         <Brain size={14} className="text-accent shrink-0" />
         {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
-        <span className="text-[13px] text-text-muted italic truncate">
+        <span className="text-sm leading-tight text-text-muted italic truncate">
           {expanded ? 'Thinking' : preview || 'Thinking...'}
         </span>
         {streaming && <span className="streaming-cursor inline-block w-1.5 h-3.5 bg-accent ml-1 shrink-0" />}
-      </button>
+      </Button>
       {expanded && (
-        <div className="px-4 pb-3 text-[13px] text-text-muted italic whitespace-pre-wrap leading-relaxed">
+        <div className="px-4 pb-3 text-sm text-text-muted italic whitespace-pre-wrap leading-relaxed">
           {content}
           {streaming && <span className="streaming-cursor inline-block w-1.5 h-3.5 bg-accent ml-0.5 align-text-bottom" />}
         </div>
diff --git a/web/src/components/Chat/TodoPanel.tsx b/web/src/components/Chat/TodoPanel.tsx
index 53ad68d2..09f24a83 100644
--- a/web/src/components/Chat/TodoPanel.tsx
+++ b/web/src/components/Chat/TodoPanel.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { CheckCircle2, ChevronDown, ChevronRight, Circle, Loader2 } from 'lucide-react';
+import { CheckCircle2, ChevronDown, ChevronRight, Circle, Loader2 } from '../ui/icons';
+import { Button } from '../ui';
 import type { TodoItem, CCTask } from '../../stores/chatStore';
 
 /**
@@ -101,8 +102,8 @@ export function TodoPanel({
     <div className={`border-t border-border-subtle bg-bg-sunken shrink-0 transition-all duration-300 ${allDone ? 'opacity-60' : ''}`}>
       <div className="max-w-[var(--chat-width)] mx-auto px-5 py-2.5">
         <div className="flex items-center gap-2 mb-1.5">
-          <span className="text-[11px] font-medium text-text-faint uppercase tracking-wider">Tasks</span>
-          <span className="text-[10px] text-text-faint">
+          <span className="text-xs font-medium text-text-faint uppercase tracking-wider">Tasks</span>
+          <span className="text-2xs text-text-faint">
             {completedCount}/{rows.length}
           </span>
         </div>
@@ -148,10 +149,13 @@ function CompletedSummaryRow({
   onClick: () => void;
 }) {
   return (
-    <button
-      type="button"
+    <Button
+      variant="ghost"
+      size="sm"
+      fullWidth
       onClick={onClick}
-      className="flex items-center gap-2 py-0.5 text-[13px] w-full text-left rounded text-text-faint hover:text-text-muted transition-colors"
+      aria-expanded={expanded}
+      className="justify-start gap-2 px-0 py-0.5 text-sm leading-tight text-left"
     >
       <CheckCircle2 size={14} className="text-hue-green shrink-0 opacity-60" />
       {expanded ? (
@@ -162,7 +166,7 @@ function CompletedSummaryRow({
       <span>
         {count} completed {count === 1 ? 'task' : 'tasks'}
       </span>
-    </button>
+    </Button>
   );
 }
 
@@ -171,7 +175,7 @@ function TaskRow({ row }: { row: PanelRow }) {
   const isActive = row.status === 'in_progress';
 
   return (
-    <div className={`todo-row flex items-center gap-2 py-0.5 text-[13px] transition-opacity duration-300 ${isCompleted ? 'opacity-50' : ''}`}>
+    <div className={`todo-row flex items-center gap-2 py-0.5 text-sm leading-tight transition-opacity duration-300 ${isCompleted ? 'opacity-50' : ''}`}>
       {isCompleted ? (
         <CheckCircle2 size={14} className="text-hue-green shrink-0 todo-icon-enter" />
       ) : isActive ? (
@@ -180,7 +184,7 @@ function TaskRow({ row }: { row: PanelRow }) {
         <Circle size={14} className="text-text-faint shrink-0" />
       )}
       {row.id && (
-        <span className="text-[10px] tabular-nums text-text-faint shrink-0">#{row.id}</span>
+        <span className="text-2xs tabular-nums text-text-faint shrink-0">#{row.id}</span>
       )}
       <span className={`${isCompleted ? 'line-through text-text-faint' : isActive ? 'text-text' : 'text-text-muted'} transition-colors duration-300`}>
         {isActive ? row.activeLabel : row.label}
diff --git a/web/src/components/Chat/ToolCallBlock.tsx b/web/src/components/Chat/ToolCallBlock.tsx
index 3a747fd2..039a4ec5 100644
--- a/web/src/components/Chat/ToolCallBlock.tsx
+++ b/web/src/components/Chat/ToolCallBlock.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Terminal, FileText, Search, Globe, Loader2, Download } from 'lucide-react';
+import { ChevronRight, ChevronDown, Terminal, FileText, Search, Globe, Loader2, Download } from '../ui/icons';
+import { Button } from '../ui';
 import { getToolSummary } from '../../utils/toolSummary';
 import type { ToolCallBlockData } from '../../types/chat';
 import { getToken } from '../../api/client';
@@ -181,27 +182,31 @@ function GenericToolBlock({ block }: { block: ToolCallBlockData }) {
 
   return (
     <div className="my-1.5 border border-border rounded-lg bg-surface overflow-hidden">
-      <button
+      <Button
+        variant="subtle"
+        size="md"
+        fullWidth
         onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2 w-full px-3 py-2 text-left cursor-pointer hover:bg-surface-raised transition-colors"
+        aria-expanded={expanded}
+        className="justify-start text-left rounded-none"
       >
         {isRunning
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
           : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : 'text-text-muted'}`} />
         }
-        <span className="text-[13px] font-mono font-medium text-text-secondary">{block.tool}</span>
-        {summary && <span className="text-[12px] text-text-dim truncate font-mono">{summary}</span>}
+        <span className="text-sm font-mono font-medium text-text-secondary">{block.tool}</span>
+        {summary && <span className="text-xs text-text-dim truncate font-mono">{summary}</span>}
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
         </div>
-      </button>
+      </Button>
 
       {expanded && (
         <div className="border-t border-border">
           {/* Input */}
           <div className="px-3 py-2">
-            <div className="text-[10px] uppercase tracking-wider text-text-faint mb-1">Input</div>
-            <pre className="text-[12px] text-text-muted font-mono whitespace-pre-wrap overflow-x-auto max-h-60 overflow-y-auto bg-bg rounded p-2 border border-border-subtle">
+            <div className="text-2xs uppercase tracking-wider text-text-faint mb-1">Input</div>
+            <pre className="text-xs text-text-muted font-mono whitespace-pre-wrap overflow-x-auto max-h-60 overflow-y-auto bg-bg rounded p-2 border border-border-subtle">
               {JSON.stringify(block.input, null, 2)}
             </pre>
           </div>
@@ -209,17 +214,17 @@ function GenericToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* Result */}
           {block.result !== undefined && (
             <div className="px-3 py-2 border-t border-border-subtle">
-              <div className="text-[10px] uppercase tracking-wider text-text-faint mb-1">
+              <div className="text-2xs uppercase tracking-wider text-text-faint mb-1">
                 {block.isError ? 'Error' : 'Result'}
               </div>
-              <pre className={`text-[12px] font-mono whitespace-pre-wrap overflow-x-auto max-h-80 overflow-y-auto bg-bg rounded p-2 border border-border-subtle ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
+              <pre className={`text-xs font-mono whitespace-pre-wrap overflow-x-auto max-h-80 overflow-y-auto bg-bg rounded p-2 border border-border-subtle ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
                 {block.result}
               </pre>
             </div>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2 border-t border-border-subtle">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2 border-t border-border-subtle">
               <Loader2 size={12} className="animate-spin" /> Running...
             </div>
           )}
diff --git a/web/src/components/Chat/ToolCallGroupBlock.tsx b/web/src/components/Chat/ToolCallGroupBlock.tsx
index 6502c746..8433a4eb 100644
--- a/web/src/components/Chat/ToolCallGroupBlock.tsx
+++ b/web/src/components/Chat/ToolCallGroupBlock.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Terminal, FileText, Search, Globe, Loader2 } from 'lucide-react';
+import { ChevronRight, ChevronDown, Terminal, FileText, Search, Globe, Loader2 } from '../ui/icons';
+import { Button } from '../ui';
 import type { ToolCallGroup } from '../../types/renderBlocks';
 import { ToolCallBlock } from './ToolCallBlock';
 
@@ -36,11 +37,13 @@ export function ToolCallGroupBlock({ group }: { group: ToolCallGroup }) {
     <div className="my-0.5">
       {/* Collapse bar — only shown for groups of 4+ */}
       {needsCollapsing && (
-        <button
+        <Button
+          variant="subtle"
+          size="sm"
+          fullWidth
           onClick={() => setExpanded(!expanded)}
-          className="flex items-center gap-2 w-full px-3 py-1.5 text-left cursor-pointer
-                     text-[12px] text-text-faint hover:text-text-muted hover:bg-surface-raised
-                     rounded-md transition-colors"
+          aria-expanded={expanded}
+          className="justify-start gap-2 rounded-md text-left leading-tight"
         >
           {hasRunning
             ? <Loader2 size={12} className="text-accent animate-spin shrink-0" />
@@ -57,7 +60,7 @@ export function ToolCallGroupBlock({ group }: { group: ToolCallGroup }) {
               : <ChevronRight size={12} className="text-text-faint" />
             }
           </div>
-        </button>
+        </Button>
       )}
 
       {/* Expanded hidden items */}
diff --git a/web/src/components/Chat/UserMessage.tsx b/web/src/components/Chat/UserMessage.tsx
index f354c50d..19ced35b 100644
--- a/web/src/components/Chat/UserMessage.tsx
+++ b/web/src/components/Chat/UserMessage.tsx
@@ -1,5 +1,5 @@
 import type { ChatMessage, ImageBlockData, FileBlockData } from '../../types/chat';
-import { Download, FileText } from 'lucide-react';
+import { Download, FileText } from '../ui/icons';
 import { getToken } from '../../api/client';
 import { formatMessageTime } from '../../utils/messageTime';
 
@@ -22,7 +22,7 @@ export function UserMessage({ message }: { message: ChatMessage }) {
             U
           </div>
           <div className="min-w-0 flex-1">
-            {text && <div className="whitespace-pre-wrap text-[15px] leading-relaxed pt-0.5">{text}</div>}
+            {text && <div className="whitespace-pre-wrap text-base leading-relaxed pt-0.5">{text}</div>}
 
             {/* Attached images */}
             {images.length > 0 && (
@@ -66,7 +66,7 @@ export function UserMessage({ message }: { message: ChatMessage }) {
         </div>
         {message.created_at && (
           <div
-            className="mt-1 text-right text-[10px] text-text-faint/60 tabular-nums"
+            className="mt-1 text-right text-2xs text-text-faint tabular-nums"
             title={new Date(message.created_at).toLocaleString()}
           >
             {formatMessageTime(message.created_at)}
diff --git a/web/src/components/Chat/WorkflowPanel.tsx b/web/src/components/Chat/WorkflowPanel.tsx
index 9ffc8bc4..88dc9ea7 100644
--- a/web/src/components/Chat/WorkflowPanel.tsx
+++ b/web/src/components/Chat/WorkflowPanel.tsx
@@ -1,4 +1,4 @@
-import { Loader2, Check, X, Circle } from 'lucide-react';
+import { Loader2, Check, X, Circle } from '../ui/icons';
 import { MarkdownContent } from './MarkdownContent';
 import type { PanelTab, WorkflowAgent, WorkflowSnapshot } from '../../types/chat';
 
@@ -24,16 +24,16 @@ function AgentState({ state }: { state?: string }) {
 
 function AgentRow({ agent }: { agent: WorkflowAgent }) {
   return (
-    <div className="flex items-center gap-2 px-2 py-1 rounded hover:bg-surface-hover/50">
+    <div className="flex items-center gap-2 px-2 py-1 rounded leading-tight hover:bg-surface-hover/50">
       <AgentState state={agent.state} />
-      <span className="text-[12px] text-text-secondary truncate max-w-[140px]">{agent.label || 'agent'}</span>
+      <span className="text-xs text-text-secondary truncate max-w-[140px]">{agent.label || 'agent'}</span>
       {agent.lastToolName && (
-        <span className="text-[11px] text-text-faint font-mono shrink-0">{agent.lastToolName}</span>
+        <span className="text-xs text-text-faint font-mono shrink-0">{agent.lastToolName}</span>
       )}
       {agent.lastToolSummary && (
-        <span className="text-[11px] text-text-dim truncate flex-1">{agent.lastToolSummary}</span>
+        <span className="text-xs text-text-dim truncate flex-1">{agent.lastToolSummary}</span>
       )}
-      <div className="ml-auto shrink-0 flex items-center gap-2 text-[10px] text-text-faint font-mono">
+      <div className="ml-auto shrink-0 flex items-center gap-2 text-2xs text-text-faint font-mono">
         {agent.tokens ? <span>{fmtTokens(agent.tokens)}</span> : null}
         {agent.durationMs ? <span>{fmtDuration(agent.durationMs)}</span> : null}
       </div>
@@ -70,7 +70,7 @@ export function WorkflowPanel({ tab }: { tab: PanelTab }) {
   if (!wf || (wf.phases.length === 0 && wf.agents.length === 0)) {
     return (
       <div className="flex-1 overflow-y-auto px-4 py-4">
-        <div className="flex items-center gap-2 text-[13px] text-text-dim">
+        <div className="flex items-center gap-2 text-sm text-text-dim">
           <Loader2 size={14} className="animate-spin" /> Starting workflow…
         </div>
       </div>
@@ -85,7 +85,7 @@ export function WorkflowPanel({ tab }: { tab: PanelTab }) {
   return (
     <div className="flex-1 overflow-y-auto px-4 py-3">
       {/* Totals bar */}
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-text-faint font-mono mb-3 pb-2 border-b border-border-subtle">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-faint font-mono mb-3 pb-2 border-b border-border-subtle">
         <span><span className="text-text-secondary">{done}</span>/{total} agents done</span>
         {running > 0 && <span><span className="text-hue-amber">{running}</span> running</span>}
         <span>{groups.length} phases</span>
@@ -100,12 +100,12 @@ export function WorkflowPanel({ tab }: { tab: PanelTab }) {
           return (
             <div key={group.index}>
               <div className="flex items-center gap-2 mb-1">
-                <span className="text-[10px] uppercase tracking-wider text-text-faint">
+                <span className="text-2xs uppercase tracking-wider text-text-faint">
                   Phase {group.index}
                 </span>
-                <span className="text-[12px] font-medium text-text-secondary">{group.title}</span>
+                <span className="text-xs font-medium text-text-secondary">{group.title}</span>
                 {group.agents.length > 0 && (
-                  <span className="text-[10px] text-text-faint font-mono ml-auto">
+                  <span className="text-2xs text-text-faint font-mono ml-auto">
                     {gDone}/{group.agents.length}
                   </span>
                 )}
@@ -115,7 +115,7 @@ export function WorkflowPanel({ tab }: { tab: PanelTab }) {
                   {group.agents.map((a, i) => <AgentRow key={i} agent={a} />)}
                 </div>
               ) : (
-                <div className="px-2 py-1 text-[11px] text-text-faint italic">pending…</div>
+                <div className="px-2 py-1 text-xs text-text-faint italic">pending…</div>
               )}
             </div>
           );
@@ -124,8 +124,8 @@ export function WorkflowPanel({ tab }: { tab: PanelTab }) {
 
       {/* Final summary / result */}
       {tab.content && (
-        <div className="mt-4 pt-3 border-t border-border-subtle text-[13px]">
-          <div className="text-[10px] uppercase tracking-wider text-text-faint mb-1">Result</div>
+        <div className="mt-4 pt-3 border-t border-border-subtle text-sm">
+          <div className="text-2xs uppercase tracking-wider text-text-faint mb-1">Result</div>
           <MarkdownContent content={tab.content} />
         </div>
       )}
diff --git a/web/src/components/Chat/ariaContracts.test.tsx b/web/src/components/Chat/ariaContracts.test.tsx
new file mode 100644
index 00000000..468b5831
--- /dev/null
+++ b/web/src/components/Chat/ariaContracts.test.tsx
@@ -0,0 +1,153 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useChatStore } from '../../stores/chatStore';
+import type { PanelTab } from '../../types/chat';
+import { ChatInput } from './ChatInput';
+import { InteractiveQuestionCard } from './InteractiveQuestionCard';
+import { SidePanel } from './SidePanel';
+
+vi.mock('../../api/client', () => ({
+  api: {
+    getPromptRewriteStatus: vi.fn(async () => ({ enabled: false })),
+    getModels: vi.fn(async () => ({ models: [], default: null })),
+    rewritePrompt: vi.fn(),
+    uploadFiles: vi.fn(),
+  },
+}));
+
+/**
+ * Three controls that look like a richer keyboard pattern than they implement:
+ * the answer pills, the run-later popup and the side-panel tab strip.
+ *
+ * `role="radio"`, `aria-selected` and `aria-haspopup="menu"` each commit the
+ * author to a specific model — a radiogroup with one tab stop and arrow-key
+ * movement, a tablist with tabpanels, a menu with `menuitem` children and focus
+ * entry. None of the three is built here, so any of those claims would tell a
+ * screen-reader user to press arrow keys that do nothing.
+ *
+ * These assert the *absence* of the claim as well as the presence of the honest
+ * one, because the failure mode is adding the attribute back while everything
+ * still looks and behaves correctly to a sighted mouse user.
+ */
+
+function askUserQuestion(multiSelect = false) {
+  useChatStore.setState({
+    pendingInteraction: {
+      interactionId: 'i1',
+      interactionType: 'question',
+      toolName: 'AskUserQuestion',
+      toolInput: {
+        outOfBand: true,
+        questions: [
+          {
+            id: 'q1',
+            question: 'Which branch should this land on?',
+            multiSelect,
+            options: [{ label: 'main' }, { label: 'develop' }],
+          },
+        ],
+      },
+    },
+  });
+}
+
+describe('InteractiveQuestionCard answer options', () => {
+  beforeEach(() => {
+    useChatStore.setState({ pendingInteraction: null });
+  });
+
+  it('are toggle buttons, not radios', () => {
+    askUserQuestion();
+    render(<InteractiveQuestionCard />);
+
+    expect(screen.queryAllByRole('radio')).toHaveLength(0);
+    expect(screen.queryByRole('radiogroup')).toBeNull();
+
+    const main = screen.getByRole('button', { name: 'main' });
+    expect(main).toHaveAttribute('aria-pressed', 'false');
+    expect(main).not.toHaveAttribute('aria-checked');
+  });
+
+  it('move the pressed state from one answer to the other on single-select', async () => {
+    askUserQuestion();
+    render(<InteractiveQuestionCard />);
+    const main = screen.getByRole('button', { name: 'main' });
+    const develop = screen.getByRole('button', { name: 'develop' });
+
+    await userEvent.click(main);
+    expect(main).toHaveAttribute('aria-pressed', 'true');
+    expect(develop).toHaveAttribute('aria-pressed', 'false');
+
+    await userEvent.click(develop);
+    // The single-select contract: choosing one releases the other, rather than
+    // leaving two answers pressed for a question that takes one.
+    expect(main).toHaveAttribute('aria-pressed', 'false');
+    expect(develop).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('hold several at once on multi-select, and are still not checkboxes', async () => {
+    askUserQuestion(true);
+    render(<InteractiveQuestionCard />);
+    expect(screen.queryAllByRole('checkbox')).toHaveLength(0);
+
+    await userEvent.click(screen.getByRole('button', { name: 'main' }));
+    await userEvent.click(screen.getByRole('button', { name: 'develop' }));
+
+    expect(screen.getByRole('button', { name: 'main' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'develop' })).toHaveAttribute('aria-pressed', 'true');
+  });
+});
+
+describe("ChatInput's run-later popup", () => {
+  it('is a disclosure, not a menu', async () => {
+    render(<ChatInput onSend={vi.fn()} onStop={vi.fn()} isStreaming={false} />);
+
+    const trigger = screen.getByRole('button', { name: 'More options' });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).not.toHaveAttribute('aria-haspopup');
+
+    await userEvent.click(trigger);
+
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    // The popup's contents are ordinary buttons and announce as such.
+    expect(screen.queryAllByRole('menu')).toHaveLength(0);
+    expect(screen.queryAllByRole('menuitem')).toHaveLength(0);
+    expect(screen.getByRole('button', { name: /run later/i })).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
+  });
+});
+
+function panel(id: string, label: string): PanelTab {
+  return {
+    id, type: 'subagent', label, subagentType: 'general-purpose',
+    description: '', content: null, prompt: '', streaming: false,
+    status: 'complete', startedAt: 0, completedAt: 1000, blocks: [],
+  };
+}
+
+describe("SidePanel's tab strip", () => {
+  it('presses its current tab rather than claiming to select it', () => {
+    useChatStore.setState({
+      panels: [panel('p1', 'Explore'), panel('p2', 'Plan')],
+      activePanelId: 'p1',
+      panelVisible: true,
+    });
+    const { container } = render(<SidePanel />);
+
+    const strip = within(container);
+    expect(strip.queryByRole('tablist')).toBeNull();
+    expect(strip.queryAllByRole('tab')).toHaveLength(0);
+
+    const explore = strip.getByRole('button', { name: /Explore/ });
+    expect(explore).toHaveAttribute('aria-pressed', 'true');
+    expect(explore).not.toHaveAttribute('aria-selected');
+    expect(strip.getByRole('button', { name: /^Plan/ })).toHaveAttribute(
+      'aria-pressed',
+      'false',
+    );
+  });
+});
diff --git a/web/src/components/Chat/tools/BashToolBlock.tsx b/web/src/components/Chat/tools/BashToolBlock.tsx
index 99ba3f6a..559b5195 100644
--- a/web/src/components/Chat/tools/BashToolBlock.tsx
+++ b/web/src/components/Chat/tools/BashToolBlock.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Terminal, Loader2 } from 'lucide-react';
+import { ChevronRight, ChevronDown, Terminal, Loader2 } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
 
 export function BashToolBlock({ block }: { block: ToolCallBlockData }) {
@@ -16,10 +16,10 @@ export function BashToolBlock({ block }: { block: ToolCallBlockData }) {
       >
         {isRunning
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
-          : <Terminal size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : 'text-hue-emerald'}`} />
+          : <Terminal size={14} className={`shrink-0 ${block.isError ? 'text-error' : 'text-hue-emerald'}`} />
         }
-        <span className="text-hue-emerald text-[13px] font-mono select-none">$</span>
-        <span className="text-[13px] font-mono text-text-secondary truncate">{truncatedCmd}</span>
+        <span className="text-hue-emerald text-sm leading-tight font-mono select-none">$</span>
+        <span className="text-sm leading-tight font-mono text-text-secondary truncate">{truncatedCmd}</span>
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
         </div>
@@ -30,19 +30,19 @@ export function BashToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* Full command */}
           {command.length > 80 && (
             <div className="px-3 py-2 border-b border-surface-raised">
-              <pre className="text-[12px] font-mono text-text-secondary whitespace-pre-wrap">{command}</pre>
+              <pre className="text-xs font-mono text-text-secondary whitespace-pre-wrap">{command}</pre>
             </div>
           )}
 
           {/* Output */}
           {block.result !== undefined && (
-            <pre className={`px-3 py-2 text-[12px] font-mono whitespace-pre-wrap max-h-80 overflow-y-auto ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
+            <pre className={`px-3 py-2 text-xs font-mono whitespace-pre-wrap max-h-80 overflow-y-auto ${block.isError ? 'text-error' : 'text-text-muted'}`}>
               {block.result}
             </pre>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
               <Loader2 size={12} className="animate-spin" /> Running...
             </div>
           )}
diff --git a/web/src/components/Chat/tools/CCTaskToolBlock.tsx b/web/src/components/Chat/tools/CCTaskToolBlock.tsx
index fa4967d2..16335b5f 100644
--- a/web/src/components/Chat/tools/CCTaskToolBlock.tsx
+++ b/web/src/components/Chat/tools/CCTaskToolBlock.tsx
@@ -1,4 +1,4 @@
-import { ChevronRight, ChevronDown, Plus, Pencil, ListTodo, FileText, OctagonX, Radio, Loader2 } from 'lucide-react';
+import { ChevronRight, ChevronDown, Plus, Pencil, ListTodo, FileText, OctagonX, Radio, Loader2 } from '../../ui/icons';
 import { useState } from 'react';
 import type { ToolCallBlockData } from '../../../types/chat';
 import { extractResultText } from '../../../utils/extractResultText';
@@ -20,6 +20,9 @@ export function CCTaskToolBlock({ block }: { block: ToolCallBlockData }) {
   let Icon = ListTodo;
   let label = block.tool;
   let summary = '';
+  // Identity, not status: the hue says *which* task tool ran (create / update /
+  // stop), so it stays on `hue-*`. Only `block.isError` — the call's actual
+  // outcome — swaps in a status token, at the render site below.
   let iconColor = 'text-text-muted';
 
   switch (block.tool) {
@@ -90,10 +93,10 @@ export function CCTaskToolBlock({ block }: { block: ToolCallBlockData }) {
       >
         {isRunning
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
-          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : iconColor}`} />
+          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-error' : iconColor}`} />
         }
-        <span className="text-[13px] font-medium text-text-secondary shrink-0 whitespace-nowrap">{label}</span>
-        {summary && <span className="text-[12px] text-text-muted truncate">{summary}</span>}
+        <span className="text-sm leading-tight font-medium text-text-secondary shrink-0 whitespace-nowrap">{label}</span>
+        {summary && <span className="text-xs text-text-muted truncate">{summary}</span>}
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
         </div>
@@ -103,8 +106,8 @@ export function CCTaskToolBlock({ block }: { block: ToolCallBlockData }) {
         <div className="border-t border-border">
           {/* Input */}
           <div className="px-3 py-2">
-            <div className="text-[10px] uppercase tracking-wider text-text-faint mb-1">Input</div>
-            <pre className="text-[12px] text-text-muted font-mono whitespace-pre-wrap overflow-x-auto max-h-40 overflow-y-auto bg-bg rounded p-2 border border-border-subtle">
+            <div className="text-2xs uppercase tracking-wider text-text-faint mb-1">Input</div>
+            <pre className="text-xs text-text-muted font-mono whitespace-pre-wrap overflow-x-auto max-h-40 overflow-y-auto bg-bg rounded p-2 border border-border-subtle">
               {JSON.stringify(input, null, 2)}
             </pre>
           </div>
@@ -112,17 +115,17 @@ export function CCTaskToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* Result */}
           {resultText && (
             <div className="px-3 py-2 border-t border-border-subtle">
-              <div className="text-[10px] uppercase tracking-wider text-text-faint mb-1">
+              <div className="text-2xs uppercase tracking-wider text-text-faint mb-1">
                 {block.isError ? 'Error' : 'Result'}
               </div>
-              <pre className={`text-[12px] whitespace-pre-wrap overflow-x-auto max-h-60 overflow-y-auto bg-bg rounded p-2 border border-border-subtle ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
+              <pre className={`text-xs whitespace-pre-wrap overflow-x-auto max-h-60 overflow-y-auto bg-bg rounded p-2 border border-border-subtle ${block.isError ? 'text-error' : 'text-text-muted'}`}>
                 {resultText}
               </pre>
             </div>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2 border-t border-border-subtle">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2 border-t border-border-subtle">
               <Loader2 size={12} className="animate-spin" /> Running...
             </div>
           )}
diff --git a/web/src/components/Chat/tools/EditToolBlock.tsx b/web/src/components/Chat/tools/EditToolBlock.tsx
index 2d030b83..3a214739 100644
--- a/web/src/components/Chat/tools/EditToolBlock.tsx
+++ b/web/src/components/Chat/tools/EditToolBlock.tsx
@@ -1,5 +1,5 @@
 import { useState, lazy, Suspense } from 'react';
-import { ChevronRight, ChevronDown, FileEdit, Loader2 } from 'lucide-react';
+import { ChevronRight, ChevronDown, FileEdit, Loader2 } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
 
 // The diff renderer pulls in @pierre/diffs + Shiki — only loaded when an Edit
@@ -21,10 +21,10 @@ export function EditToolBlock({ block }: { block: ToolCallBlockData }) {
       >
         {isRunning
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
-          : <FileEdit size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : 'text-hue-amber'}`} />
+          : <FileEdit size={14} className={`shrink-0 ${block.isError ? 'text-error' : 'text-hue-amber'}`} />
         }
-        <span className="text-[13px] font-mono font-medium text-text-secondary">Edit</span>
-        <span className="text-[12px] text-text-dim truncate font-mono">{filePath}</span>
+        <span className="text-sm leading-tight font-mono font-medium text-text-secondary">Edit</span>
+        <span className="text-xs text-text-dim truncate font-mono">{filePath}</span>
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
         </div>
@@ -36,7 +36,7 @@ export function EditToolBlock({ block }: { block: ToolCallBlockData }) {
           <div className="max-h-80 overflow-y-auto">
             <Suspense
               fallback={
-                <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+                <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
                   <Loader2 size={12} className="animate-spin" /> Loading diff…
                 </div>
               }
@@ -48,12 +48,12 @@ export function EditToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* Error */}
           {block.isError && block.result && (
             <div className="px-3 py-2 border-t border-border-subtle">
-              <pre className="text-[12px] font-mono text-hue-red whitespace-pre-wrap">{block.result}</pre>
+              <pre className="text-xs font-mono text-error whitespace-pre-wrap">{block.result}</pre>
             </div>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2 border-t border-border-subtle">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2 border-t border-border-subtle">
               <Loader2 size={12} className="animate-spin" /> Applying edit...
             </div>
           )}
diff --git a/web/src/components/Chat/tools/FileToolBlock.tsx b/web/src/components/Chat/tools/FileToolBlock.tsx
index 7ce8546a..11bf218a 100644
--- a/web/src/components/Chat/tools/FileToolBlock.tsx
+++ b/web/src/components/Chat/tools/FileToolBlock.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, FileText, FilePlus, Loader2 } from 'lucide-react';
+import { ChevronRight, ChevronDown, FileText, FilePlus, Loader2 } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
 
 export function FileToolBlock({ block }: { block: ToolCallBlockData }) {
@@ -20,12 +20,12 @@ export function FileToolBlock({ block }: { block: ToolCallBlockData }) {
       >
         {isRunning
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
-          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : 'text-hue-blue'}`} />
+          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-error' : 'text-hue-blue'}`} />
         }
-        <span className="text-[13px] font-mono font-medium text-text-secondary">{block.tool}</span>
-        <span className="text-[12px] text-text-dim truncate font-mono">{filePath}</span>
+        <span className="text-sm leading-tight font-mono font-medium text-text-secondary">{block.tool}</span>
+        <span className="text-xs text-text-dim truncate font-mono">{filePath}</span>
         {lineCount && !isWrite && (
-          <span className="text-[10px] text-text-faint shrink-0">{lineCount} lines</span>
+          <span className="text-2xs text-text-faint shrink-0">{lineCount} lines</span>
         )}
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
@@ -35,13 +35,13 @@ export function FileToolBlock({ block }: { block: ToolCallBlockData }) {
       {expanded && (
         <div className="border-t border-border">
           {block.result !== undefined && (
-            <pre className={`px-3 py-2 text-[12px] font-mono whitespace-pre-wrap max-h-80 overflow-y-auto bg-bg ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
+            <pre className={`px-3 py-2 text-xs font-mono whitespace-pre-wrap max-h-80 overflow-y-auto bg-bg ${block.isError ? 'text-error' : 'text-text-muted'}`}>
               {block.result}
             </pre>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
               <Loader2 size={12} className="animate-spin" /> {isWrite ? 'Writing...' : 'Reading...'}
             </div>
           )}
diff --git a/web/src/components/Chat/tools/MemoryToolBlock.tsx b/web/src/components/Chat/tools/MemoryToolBlock.tsx
index 2a0b1386..352bc063 100644
--- a/web/src/components/Chat/tools/MemoryToolBlock.tsx
+++ b/web/src/components/Chat/tools/MemoryToolBlock.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Brain, BookOpen, Search, Loader2 } from 'lucide-react';
+import { ChevronRight, ChevronDown, Brain, BookOpen, Search, Loader2 } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
+import { Badge, type BadgeTone } from '../../ui';
 
 /** Extract readable text from MCP content blocks or plain text. */
 function extractText(result: string): string {
@@ -37,11 +38,15 @@ function parseMemoryItems(text: string): MemoryItem[] {
   return items;
 }
 
-const TYPE_COLORS: Record<string, string> = {
-  event: 'text-hue-blue bg-blue-500/10',
-  profile: 'text-hue-green bg-green-500/10',
-  knowledge: 'text-hue-amber bg-amber-500/10',
-  behavior: 'text-hue-purple bg-purple-500/10',
+/**
+ * Memory-type identity, not status: `profile` is not "this succeeded", it is a
+ * kind of record. Each tone is picked for its hue, not for its meaning.
+ */
+const TYPE_TONES: Record<string, BadgeTone> = {
+  event: 'info',
+  profile: 'success',
+  knowledge: 'warning',
+  behavior: 'purple',
 };
 
 export function MemoryToolBlock({ block }: { block: ToolCallBlockData }) {
@@ -75,19 +80,19 @@ export function MemoryToolBlock({ block }: { block: ToolCallBlockData }) {
   const count = countMatch ? countMatch[1] : memoryItems.length > 0 ? String(memoryItems.length) : null;
 
   return (
-    <div className="my-1.5 border border-purple-500/20 rounded-lg bg-surface overflow-hidden">
+    <div className="my-1.5 border border-hue-purple/20 rounded-lg bg-surface overflow-hidden">
       <button
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 w-full px-3 py-2 text-left cursor-pointer hover:bg-surface-raised transition-colors"
       >
         {isRunning
           ? <Loader2 size={14} className="text-hue-purple animate-spin shrink-0" />
-          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : 'text-hue-purple'}`} />
+          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-error' : 'text-hue-purple'}`} />
         }
-        <span className="text-[13px] font-medium text-hue-purple">{label}</span>
-        {truncatedQuery && <span className="text-[12px] text-text-dim truncate">{truncatedQuery}</span>}
+        <span className="text-sm leading-tight font-medium text-hue-purple">{label}</span>
+        {truncatedQuery && <span className="text-xs text-text-dim truncate">{truncatedQuery}</span>}
         {count && !isRunning && (
-          <span className="text-[10px] text-hue-purple/60 shrink-0">{count} items</span>
+          <span className="text-2xs text-hue-purple shrink-0">{count} items</span>
         )}
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
@@ -95,19 +100,19 @@ export function MemoryToolBlock({ block }: { block: ToolCallBlockData }) {
       </button>
 
       {expanded && (
-        <div className="border-t border-purple-500/10">
+        <div className="border-t border-hue-purple/10">
           {/* Memorize: show what was memorized */}
           {isMemorize && query && (
-            <div className="px-3 py-2 text-[12px] text-text-secondary">
+            <div className="px-3 py-2 text-xs text-text-secondary">
               <div className="flex items-center gap-1.5 mb-1">
                 <Brain size={11} className="text-hue-purple" />
-                <span className="text-[10px] uppercase tracking-wider text-hue-purple/60">Memorized</span>
+                <span className="text-2xs uppercase tracking-wider text-hue-purple">Memorized</span>
               </div>
               <p className="leading-relaxed">{String(query)}</p>
               {block.input.memory_type ? (
-                <span className={`inline-block mt-1.5 text-[10px] px-1.5 py-0.5 rounded ${TYPE_COLORS[String(block.input.memory_type)] || 'text-text-muted bg-border-subtle'}`}>
+                <Badge tone={TYPE_TONES[String(block.input.memory_type)] || 'neutral'} className="mt-1.5">
                   {String(block.input.memory_type)}
-                </span>
+                </Badge>
               ) : null}
             </div>
           )}
@@ -116,34 +121,34 @@ export function MemoryToolBlock({ block }: { block: ToolCallBlockData }) {
           {(isRecall || isHistory) && memoryItems.length > 0 ? (
             <div className="px-3 py-2 space-y-1.5 max-h-80 overflow-y-auto">
               {memoryItems.map((item, i) => (
-                <div key={i} className="flex gap-2 text-[12px] leading-relaxed">
-                  <span className={`shrink-0 text-[10px] px-1 py-0.5 rounded mt-0.5 ${TYPE_COLORS[item.type] || 'text-text-muted bg-border-subtle'}`}>
+                <div key={i} className="flex gap-2 text-xs leading-relaxed">
+                  <Badge tone={TYPE_TONES[item.type] || 'neutral'} className="shrink-0 mt-0.5">
                     {item.type}
-                  </span>
+                  </Badge>
                   <span className="text-text-secondary">{item.text}</span>
                 </div>
               ))}
             </div>
           ) : resultText && !isMemorize ? (
-            <pre className={`px-3 py-2 text-[12px] whitespace-pre-wrap max-h-60 overflow-y-auto ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
+            <pre className={`px-3 py-2 text-xs whitespace-pre-wrap max-h-60 overflow-y-auto ${block.isError ? 'text-error' : 'text-text-muted'}`}>
               {resultText}
             </pre>
           ) : null}
 
           {/* Success/error feedback for memorize */}
           {isMemorize && resultText && !block.isError && (
-            <div className="px-3 py-1.5 text-[11px] text-hue-green/70 border-t border-purple-500/10">
+            <div className="px-3 py-1.5 text-xs text-success border-t border-hue-purple/10">
               Saved to memory
             </div>
           )}
           {block.isError && resultText && (
-            <pre className="px-3 py-2 text-[12px] text-hue-red whitespace-pre-wrap border-t border-purple-500/10">
+            <pre className="px-3 py-2 text-xs text-error whitespace-pre-wrap border-t border-hue-purple/10">
               {resultText}
             </pre>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
               <Loader2 size={12} className="animate-spin" /> {isRecall || isHistory ? 'Searching...' : 'Saving...'}
             </div>
           )}
diff --git a/web/src/components/Chat/tools/NotificationToolBlock.tsx b/web/src/components/Chat/tools/NotificationToolBlock.tsx
index f1921d8a..8e5cbd5b 100644
--- a/web/src/components/Chat/tools/NotificationToolBlock.tsx
+++ b/web/src/components/Chat/tools/NotificationToolBlock.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { Bell, HelpCircle, Loader2, ChevronRight, ChevronDown } from 'lucide-react';
+import { Bell, HelpCircle, Loader2, ChevronRight, ChevronDown } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
+import { Badge, type BadgeTone } from '../../ui';
 
 /** Extract readable text from MCP content blocks. */
 function extractText(result: string): string {
@@ -16,6 +17,12 @@ function extractText(result: string): string {
   return result;
 }
 
+/** Notification severity → chip tone. */
+const PRIORITY_TONES: Record<string, BadgeTone> = {
+  urgent: 'danger',
+  high: 'warning',
+};
+
 export function NotificationToolBlock({ block }: { block: ToolCallBlockData }) {
   const [expanded, setExpanded] = useState(false);
   const isRunning = block.status === 'running';
@@ -30,7 +37,7 @@ export function NotificationToolBlock({ block }: { block: ToolCallBlockData }) {
   const body = String(block.input.body || '');
 
   const Icon = isAsk ? HelpCircle : Bell;
-  const iconColor = block.isError ? 'text-hue-red' : isAsk ? 'text-hue-blue' : 'text-hue-amber';
+  const iconColor = block.isError ? 'text-error' : isAsk ? 'text-hue-blue' : 'text-hue-amber';
   const label = isNotify ? 'Notify' : 'Ask User';
 
   const resultText = block.result ? extractText(block.result) : '';
@@ -46,22 +53,18 @@ export function NotificationToolBlock({ block }: { block: ToolCallBlockData }) {
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
           : <Icon size={14} className={`shrink-0 ${iconColor}`} />
         }
-        <span className="text-[13px] font-medium text-text-secondary">{label}</span>
-        {title && <span className="text-[12px] text-text-muted truncate">{title}</span>}
+        <span className="text-sm leading-tight font-medium text-text-secondary">{label}</span>
+        {title && <span className="text-xs text-text-muted truncate">{title}</span>}
         {priority !== 'normal' && (
-          <span className={`text-[10px] px-1.5 py-0.5 rounded shrink-0 ${
-            priority === 'urgent' ? 'bg-red-500/15 text-hue-red' :
-            priority === 'high' ? 'bg-orange-400/15 text-hue-orange' :
-            'bg-border-subtle text-text-muted'
-          }`}>
+          <Badge tone={PRIORITY_TONES[priority] || 'neutral'} className="shrink-0">
             {priority}
-          </span>
+          </Badge>
         )}
         {wait && isAsk && (
-          <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/15 text-hue-blue shrink-0">blocking</span>
+          <Badge tone="info" className="shrink-0">blocking</Badge>
         )}
         {isSent && !isRunning && (
-          <span className="text-[10px] text-hue-emerald/70 shrink-0">sent</span>
+          <span className="text-2xs text-success shrink-0">sent</span>
         )}
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
@@ -71,16 +74,14 @@ export function NotificationToolBlock({ block }: { block: ToolCallBlockData }) {
       {expanded && (
         <div className="border-t border-border">
           <div className="px-3 py-2">
-            {title && <p className="text-[13px] text-text font-medium">{title}</p>}
-            {body && <p className="text-[12px] text-text-muted mt-0.5">{body}</p>}
+            {title && <p className="text-sm text-text font-medium">{title}</p>}
+            {body && <p className="text-xs text-text-muted mt-0.5">{body}</p>}
 
             {/* Options for questions */}
             {isAsk && options.length > 0 && (
               <div className="flex flex-wrap gap-1.5 mt-2">
                 {options.map(opt => (
-                  <span key={opt} className="px-2 py-0.5 text-[11px] bg-surface-raised text-info/80 rounded border border-info/20">
-                    {opt}
-                  </span>
+                  <Badge key={opt} tone="info" size="sm" outline>{opt}</Badge>
                 ))}
               </div>
             )}
@@ -89,14 +90,14 @@ export function NotificationToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* Result */}
           {resultText && (
             <div className="px-3 py-2 border-t border-border-subtle">
-              <pre className={`text-[12px] font-mono whitespace-pre-wrap ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
+              <pre className={`text-xs font-mono whitespace-pre-wrap ${block.isError ? 'text-error' : 'text-text-muted'}`}>
                 {resultText}
               </pre>
             </div>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2 border-t border-border-subtle">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2 border-t border-border-subtle">
               <Loader2 size={12} className="animate-spin" /> Sending...
             </div>
           )}
diff --git a/web/src/components/Chat/tools/PlanApprovalBlock.tsx b/web/src/components/Chat/tools/PlanApprovalBlock.tsx
index 4bd65aaf..314cb87c 100644
--- a/web/src/components/Chat/tools/PlanApprovalBlock.tsx
+++ b/web/src/components/Chat/tools/PlanApprovalBlock.tsx
@@ -1,7 +1,8 @@
 import { useState, useRef } from 'react';
-import { FileCheck, Play, Ban, Check } from 'lucide-react';
+import { FileCheck, Play, Ban, Check } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
 import { useChatStore } from '../../../stores/chatStore';
+import { Button } from '../../ui';
 
 export function PlanApprovalBlock({ block }: { block: ToolCallBlockData }) {
   const pendingInteraction = useChatStore(s => s.pendingInteraction);
@@ -29,10 +30,10 @@ export function PlanApprovalBlock({ block }: { block: ToolCallBlockData }) {
       <div className="my-1.5 border border-border rounded-lg bg-surface overflow-hidden">
         <div className="px-3 py-2.5 flex items-center gap-2">
           {wasApproved
-            ? <Check size={14} className="text-hue-green" />
-            : <Ban size={14} className="text-hue-red" />
+            ? <Check size={14} className="text-success" />
+            : <Ban size={14} className="text-error" />
           }
-          <span className="text-[13px] font-medium text-text-secondary">
+          <span className="text-sm leading-tight font-medium text-text-secondary">
             {isExitPlan ? 'Plan' : 'Plan mode'} {wasApproved ? 'approved' : 'declined'}
           </span>
         </div>
@@ -48,7 +49,7 @@ export function PlanApprovalBlock({ block }: { block: ToolCallBlockData }) {
       <div className="my-1.5 border border-border rounded-lg bg-surface overflow-hidden">
         <div className="px-3 py-2.5 flex items-center gap-2">
           <FileCheck size={14} className="text-text-muted animate-pulse" />
-          <span className="text-[13px] text-text-muted">
+          <span className="text-sm leading-tight text-text-muted">
             {settling
               ? 'Resolving…'
               : (isExitPlan ? 'Waiting to approve plan...' : 'Waiting to enter plan mode...')}
@@ -67,7 +68,7 @@ export function PlanApprovalBlock({ block }: { block: ToolCallBlockData }) {
               ? <FileCheck size={15} className="text-accent" />
               : <Play size={15} className="text-accent" />
             }
-            <span className="text-[13px] font-medium text-text">
+            <span className="text-sm leading-tight font-medium text-text">
               {isExitPlan
                 ? 'Plan ready for approval'
                 : 'Claude wants to enter plan mode'
@@ -75,30 +76,34 @@ export function PlanApprovalBlock({ block }: { block: ToolCallBlockData }) {
             </span>
           </div>
           {isExitPlan && (
-            <p className="text-[12px] text-text-muted mb-3">
+            <p className="text-xs text-text-muted mb-3">
               Review the plan in the side panel, then approve or decline.
             </p>
           )}
           {isEnterPlan && (
-            <p className="text-[12px] text-text-muted mb-3">
+            <p className="text-xs text-text-muted mb-3">
               The agent will explore the codebase and design an implementation approach for your approval.
             </p>
           )}
           <div className="flex gap-2">
-            <button
+            <Button
+              variant="primary"
+              size="md"
+              className="flex-1"
               onClick={() => { setResponded(true); setApproved(true); answerInteraction(null); }}
-              className="flex-1 py-2 rounded-md text-[13px] font-medium bg-accent hover:bg-accent-hover text-white cursor-pointer transition-colors flex items-center justify-center gap-2"
             >
               <Check size={13} />
               {isExitPlan ? 'Approve' : 'Allow'}
-            </button>
-            <button
+            </Button>
+            <Button
+              variant="secondary"
+              size="md"
+              className="flex-1"
               onClick={() => { setResponded(true); setApproved(false); denyInteraction('User declined.'); }}
-              className="flex-1 py-2 rounded-md text-[13px] font-medium bg-surface-raised hover:bg-surface-hover text-text-muted cursor-pointer transition-colors flex items-center justify-center gap-2"
             >
               <Ban size={13} />
               Decline
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/web/src/components/Chat/tools/PlanToolBlock.tsx b/web/src/components/Chat/tools/PlanToolBlock.tsx
index 303d001b..4495e4e5 100644
--- a/web/src/components/Chat/tools/PlanToolBlock.tsx
+++ b/web/src/components/Chat/tools/PlanToolBlock.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Lightbulb, ListTodo, FileText, Check, X, MessageSquare, Loader2, ExternalLink, RefreshCw } from 'lucide-react';
+import { ChevronRight, ChevronDown, Lightbulb, ListTodo, FileText, Check, X, MessageSquare, Loader2, ExternalLink, RefreshCw } from '../../ui/icons';
 import { useNavigate } from 'react-router-dom';
 import { MarkdownContent } from '../MarkdownContent';
 import type { ToolCallBlockData } from '../../../types/chat';
+import { Badge, Button, type BadgeTone } from '../../ui';
 
 /** Extract readable text from MCP content blocks. */
 function extractText(result: string): string {
@@ -44,12 +45,13 @@ function parsePlanList(text: string): ParsedPlan[] {
   return items;
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  pending: 'bg-yellow-500/15 text-hue-yellow',
-  approved: 'bg-green-500/15 text-hue-green',
-  implementing: 'bg-blue-500/15 text-hue-blue',
-  declined: 'bg-red-500/15 text-hue-red',
-  superseded: 'bg-border-subtle text-text-muted',
+/** Plan lifecycle state — an outcome, so it takes the status-shaped tones. */
+const STATUS_TONES: Record<string, BadgeTone> = {
+  pending: 'warning',
+  approved: 'success',
+  implementing: 'info',
+  declined: 'danger',
+  superseded: 'neutral',
 };
 
 type PlanTool = 'plan_propose' | 'plan_update' | 'plan_list' | 'plan_read' | 'plan_approve' | 'plan_decline' | 'plan_revise';
@@ -111,14 +113,16 @@ export function PlanToolBlock({ block }: { block: ToolCallBlockData }) {
   else if (toolName === 'plan_list' && planList.length > 0) summary = `${planList.length} plans`;
   else if (planId) summary = planId;
 
-  // Icon color
-  const iconColor = block.isError ? 'text-hue-red'
+  // Icon colour. Identity, not status: the hue says *which* plan tool ran, and
+  // amber is the plan system's colour throughout this card. Only `isError` —
+  // the call actually failing — reaches for a status token.
+  const iconColor = block.isError ? 'text-error'
     : toolName === 'plan_approve' ? 'text-hue-emerald'
     : toolName === 'plan_decline' ? 'text-hue-red'
     : 'text-hue-amber';
 
   return (
-    <div className="my-1.5 border border-amber-500/20 rounded-lg bg-surface overflow-hidden">
+    <div className="my-1.5 border border-hue-amber/20 rounded-lg bg-surface overflow-hidden">
       <button
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 w-full px-3 py-2 text-left cursor-pointer hover:bg-surface-raised transition-colors"
@@ -127,35 +131,37 @@ export function PlanToolBlock({ block }: { block: ToolCallBlockData }) {
           ? <Loader2 size={14} className="text-hue-amber animate-spin shrink-0" />
           : <Icon size={14} className={`shrink-0 ${iconColor}`} />
         }
-        <span className="text-[13px] font-medium text-amber-300">{config.label}</span>
-        {summary && <span className="text-[12px] text-text-dim truncate">{summary}</span>}
+        <span className="text-sm leading-tight font-medium text-hue-amber">{config.label}</span>
+        {summary && <span className="text-xs text-text-dim truncate">{summary}</span>}
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
         </div>
       </button>
 
       {expanded && (
-        <div className="border-t border-amber-500/10">
+        <div className="border-t border-hue-amber/10">
 
           {/* ── plan_propose ── */}
           {toolName === 'plan_propose' && (
             <div className="px-3 py-2">
               {block.input.content ? (
-                <div className="text-[12px] text-text-muted max-h-40 overflow-y-auto whitespace-pre-wrap">
+                <div className="text-xs text-text-muted max-h-40 overflow-y-auto whitespace-pre-wrap">
                   {String(block.input.content).slice(0, 500)}
                   {String(block.input.content).length > 500 ? '...' : null}
                 </div>
               ) : null}
               {proposedPlanId && !block.isError && (
-                <button
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="mt-2 -ml-2"
                   onClick={(e) => { e.stopPropagation(); navigate(`/plans/${proposedPlanId}`); }}
-                  className="mt-2 flex items-center gap-1 text-[11px] text-hue-amber hover:text-amber-300 cursor-pointer"
                 >
-                  <ExternalLink size={10} /> Review plan
-                </button>
+                  <ExternalLink size={10} className="text-hue-amber" /> Review plan
+                </Button>
               )}
               {proposedPlanId && !block.isError && (
-                <div className="mt-1 text-[11px] text-hue-green/70">
+                <div className="mt-1 text-xs text-success">
                   Plan proposed — awaiting review
                 </div>
               )}
@@ -168,19 +174,17 @@ export function PlanToolBlock({ block }: { block: ToolCallBlockData }) {
               {planList.map((p, i) => (
                 <div
                   key={i}
-                  className="flex items-center gap-2 text-[12px] cursor-pointer hover:bg-surface-hover rounded px-1 py-0.5"
+                  className="flex items-center gap-2 text-xs cursor-pointer hover:bg-surface-hover rounded px-1 py-0.5"
                   onClick={() => navigate(`/plans/${p.planId}`)}
                 >
-                  <span className={`px-1.5 py-0.5 rounded text-[10px] shrink-0 ${STATUS_COLORS[p.status] || 'bg-border-subtle text-text-muted'}`}>
-                    {p.status}
-                  </span>
+                  <Badge tone={STATUS_TONES[p.status] || 'neutral'} className="shrink-0">{p.status}</Badge>
                   <span className="text-text-secondary truncate">{p.taskTitle}</span>
-                  <span className="text-[10px] text-text-faint shrink-0">v{p.version}</span>
+                  <span className="text-2xs text-text-faint shrink-0">v{p.version}</span>
                 </div>
               ))}
             </div>
           ) : resultText ? (
-            <pre className={`px-3 py-2 text-[12px] whitespace-pre-wrap max-h-60 overflow-y-auto ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
+            <pre className={`px-3 py-2 text-xs whitespace-pre-wrap max-h-60 overflow-y-auto ${block.isError ? 'text-error' : 'text-text-muted'}`}>
               {resultText}
             </pre>
           ) : null)}
@@ -190,21 +194,23 @@ export function PlanToolBlock({ block }: { block: ToolCallBlockData }) {
             <div className="px-3 py-2">
               {/* Header metadata */}
               {readHeader && (
-                <pre className="text-[12px] text-text-muted whitespace-pre-wrap mb-2">{readHeader}</pre>
+                <pre className="text-xs text-text-muted whitespace-pre-wrap mb-2">{readHeader}</pre>
               )}
               {/* Plan content */}
               {readContent && (
-                <div className="max-h-96 overflow-y-auto bg-bg rounded-lg p-4 border border-amber-500/10">
+                <div className="max-h-96 overflow-y-auto bg-bg rounded-lg p-4 border border-hue-amber/10">
                   <MarkdownContent content={readContent} />
                 </div>
               )}
               {planId && (
-                <button
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="mt-2 -ml-2"
                   onClick={(e) => { e.stopPropagation(); navigate(`/plans/${planId}`); }}
-                  className="mt-2 flex items-center gap-1 text-[11px] text-hue-amber hover:text-amber-300 cursor-pointer"
                 >
-                  <ExternalLink size={10} /> Open plan
-                </button>
+                  <ExternalLink size={10} className="text-hue-amber" /> Open plan
+                </Button>
               )}
             </div>
           )}
@@ -212,25 +218,29 @@ export function PlanToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* ── plan_approve ── */}
           {toolName === 'plan_approve' && resultText && !block.isError && (
             <div className="px-3 py-2">
-              <div className="flex items-center gap-2 text-[12px] text-hue-emerald">
+              <div className="flex items-center gap-2 text-xs text-success">
                 <Check size={12} />
                 <span>Plan approved</span>
               </div>
               {implSessionId && (
-                <button
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="mt-2 -ml-2"
                   onClick={(e) => { e.stopPropagation(); navigate(`/chat/${implSessionId}`); }}
-                  className="mt-2 flex items-center gap-1 text-[11px] text-hue-blue hover:text-hue-blue cursor-pointer"
                 >
-                  <MessageSquare size={10} /> Watch implementation
-                </button>
+                  <MessageSquare size={10} className="text-hue-blue" /> Watch implementation
+                </Button>
               )}
               {planId && (
-                <button
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="mt-1 -ml-2"
                   onClick={(e) => { e.stopPropagation(); navigate(`/plans/${planId}`); }}
-                  className="mt-1 flex items-center gap-1 text-[11px] text-hue-amber hover:text-amber-300 cursor-pointer"
                 >
-                  <ExternalLink size={10} /> View plan
-                </button>
+                  <ExternalLink size={10} className="text-hue-amber" /> View plan
+                </Button>
               )}
             </div>
           )}
@@ -238,14 +248,14 @@ export function PlanToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* ── plan_decline ── */}
           {toolName === 'plan_decline' && resultText && !block.isError && (
             <div className="px-3 py-2">
-              <div className="flex items-center gap-2 text-[12px] text-hue-red">
+              <div className="flex items-center gap-2 text-xs text-error">
                 <X size={12} />
                 <span>Plan declined</span>
               </div>
               {feedback && (
                 <div className="mt-2 flex gap-0">
-                  <div className="w-0.5 bg-red-400/30 rounded-full shrink-0" />
-                  <p className="pl-2 text-[12px] text-text-muted whitespace-pre-wrap">{feedback}</p>
+                  <div className="w-0.5 bg-error/30 rounded-full shrink-0" />
+                  <p className="pl-2 text-xs text-text-muted whitespace-pre-wrap">{feedback}</p>
                 </div>
               )}
             </div>
@@ -255,27 +265,29 @@ export function PlanToolBlock({ block }: { block: ToolCallBlockData }) {
           {toolName === 'plan_update' && !block.isError && (
             <div className="px-3 py-2">
               {block.input.content ? (
-                <div className="text-[12px] text-text-muted max-h-40 overflow-y-auto whitespace-pre-wrap">
+                <div className="text-xs text-text-muted max-h-40 overflow-y-auto whitespace-pre-wrap">
                   {String(block.input.content).slice(0, 500)}
                   {String(block.input.content).length > 500 ? '...' : null}
                 </div>
               ) : null}
               {feedback && (
                 <div className="mt-2 flex gap-0">
-                  <div className="w-0.5 bg-amber-400/30 rounded-full shrink-0" />
-                  <p className="pl-2 text-[12px] text-text-muted whitespace-pre-wrap">{feedback}</p>
+                  <div className="w-0.5 bg-hue-amber/30 rounded-full shrink-0" />
+                  <p className="pl-2 text-xs text-text-muted whitespace-pre-wrap">{feedback}</p>
                 </div>
               )}
               {updatedNewPlanId && (
-                <button
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  className="mt-2 -ml-2"
                   onClick={(e) => { e.stopPropagation(); navigate(`/plans/${updatedNewPlanId}`); }}
-                  className="mt-2 flex items-center gap-1 text-[11px] text-hue-amber hover:text-amber-300 cursor-pointer"
                 >
-                  <ExternalLink size={10} /> Review v{updatedNewVersion}
-                </button>
+                  <ExternalLink size={10} className="text-hue-amber" /> Review v{updatedNewVersion}
+                </Button>
               )}
               {updatedNewPlanId && (
-                <div className="mt-1 text-[11px] text-hue-green/70">
+                <div className="mt-1 text-xs text-success">
                   Plan revised — awaiting review
                 </div>
               )}
@@ -285,14 +297,14 @@ export function PlanToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* ── plan_revise ── */}
           {toolName === 'plan_revise' && resultText && !block.isError && (
             <div className="px-3 py-2">
-              <div className="flex items-center gap-2 text-[12px] text-hue-amber">
+              <div className="flex items-center gap-2 text-xs text-hue-amber">
                 <MessageSquare size={12} />
                 <span>Revision requested</span>
               </div>
               {feedback && (
                 <div className="mt-2 flex gap-0">
-                  <div className="w-0.5 bg-amber-400/30 rounded-full shrink-0" />
-                  <p className="pl-2 text-[12px] text-text-muted whitespace-pre-wrap">{feedback}</p>
+                  <div className="w-0.5 bg-hue-amber/30 rounded-full shrink-0" />
+                  <p className="pl-2 text-xs text-text-muted whitespace-pre-wrap">{feedback}</p>
                 </div>
               )}
             </div>
@@ -300,14 +312,14 @@ export function PlanToolBlock({ block }: { block: ToolCallBlockData }) {
 
           {/* ── Error fallback ── */}
           {block.isError && resultText && (
-            <pre className="px-3 py-2 text-[12px] text-hue-red whitespace-pre-wrap border-t border-amber-500/10">
+            <pre className="px-3 py-2 text-xs text-error whitespace-pre-wrap border-t border-hue-amber/10">
               {resultText}
             </pre>
           )}
 
           {/* ── Running spinner ── */}
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
               <Loader2 size={12} className="animate-spin" /> {config.runningLabel}
             </div>
           )}
diff --git a/web/src/components/Chat/tools/QuestionBlock.tsx b/web/src/components/Chat/tools/QuestionBlock.tsx
index 0d8ce8a6..75ffc542 100644
--- a/web/src/components/Chat/tools/QuestionBlock.tsx
+++ b/web/src/components/Chat/tools/QuestionBlock.tsx
@@ -1,8 +1,9 @@
 import { useState, useRef } from 'react';
-import { MessageCircleQuestion, Check, Send } from 'lucide-react';
+import { MessageCircleQuestion, Check, Send } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
 import { MarkdownContent } from '../MarkdownContent';
 import { useChatStore } from '../../../stores/chatStore';
+import { Badge, Button } from '../../ui';
 
 interface QuestionOption {
   label: string;
@@ -119,14 +120,14 @@ export function QuestionBlock({ block }: { block: ToolCallBlockData }) {
             <div className="px-4 pt-3.5 pb-2">
               <div className="flex items-center gap-2 mb-2">
                 <MessageCircleQuestion size={15} className="text-accent shrink-0" />
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-accent/70 bg-accent/10 px-2 py-0.5 rounded">
+                <Badge tone="accent" className="px-2 font-semibold uppercase tracking-wider">
                   {q.header}
-                </span>
+                </Badge>
                 {q.multiSelect && (
-                  <span className="text-[10px] text-text-faint ml-auto">Select multiple</span>
+                  <span className="text-2xs text-text-faint ml-auto">Select multiple</span>
                 )}
               </div>
-              <p className="text-[14px] text-text-secondary leading-relaxed">{q.question}</p>
+              <p className="text-sm text-text-secondary leading-relaxed">{q.question}</p>
             </div>
 
             {/* Options */}
@@ -156,21 +157,21 @@ export function QuestionBlock({ block }: { block: ToolCallBlockData }) {
                         <div className={`mt-0.5 shrink-0 w-4 h-4 ${q.multiSelect ? 'rounded-sm' : 'rounded-full'} border flex items-center justify-center transition-colors duration-150 ${
                           isSelected ? 'border-accent bg-accent' : 'border-text-faint bg-transparent'
                         }`}>
-                          {isSelected && <Check size={10} className="text-white" strokeWidth={3} />}
+                          {isSelected && <Check size={10} className="text-on-accent" />}
                         </div>
                         <div className="flex-1 min-w-0">
-                          <div className={`text-[13px] font-medium ${isSelected ? 'text-accent-text' : 'text-text-secondary'}`}>
+                          <div className={`text-sm font-medium ${isSelected ? 'text-accent-text' : 'text-text-secondary'}`}>
                             {opt.label}
                           </div>
                           {opt.description && (
-                            <div className="text-[12px] text-text-muted mt-0.5 leading-relaxed">{opt.description}</div>
+                            <div className="text-xs text-text-muted mt-0.5 leading-relaxed">{opt.description}</div>
                           )}
                         </div>
                       </div>
                     </button>
 
                     {opt.markdown && (isHovered || (isSelected && !isResolved)) && (
-                      <div className="mx-2 mt-1 mb-0.5 px-3 py-2 bg-bg border border-border-subtle rounded text-[12px] max-h-48 overflow-y-auto">
+                      <div className="mx-2 mt-1 mb-0.5 px-3 py-2 bg-bg border border-border-subtle rounded text-xs max-h-48 overflow-y-auto">
                         <MarkdownContent content={opt.markdown} />
                       </div>
                     )}
@@ -184,18 +185,16 @@ export function QuestionBlock({ block }: { block: ToolCallBlockData }) {
         {/* Submit button — shown for multi-question or multiSelect, hidden for single simple question */}
         {!isSingleSimple && !isResolved && (
           <div className="px-3 pb-3">
-            <button
-              onClick={() => submitAnswers()}
+            <Button
+              variant="primary"
+              size="md"
+              fullWidth
               disabled={!allAnswered}
-              className={`w-full py-2 rounded-md text-[13px] font-medium transition-all duration-150 flex items-center justify-center gap-2 ${
-                allAnswered
-                  ? 'bg-accent hover:bg-accent-hover text-white cursor-pointer'
-                  : 'bg-surface text-text-faint cursor-not-allowed'
-              }`}
+              onClick={() => submitAnswers()}
             >
               <Send size={13} />
               Submit
-            </button>
+            </Button>
           </div>
         )}
 
@@ -203,8 +202,8 @@ export function QuestionBlock({ block }: { block: ToolCallBlockData }) {
             interaction ended without an answer (timeout / cancel / deny). */}
         {isResolved && (
           <div className="px-4 py-2 border-t border-accent/10 flex items-center gap-2">
-            <Check size={12} className={block.isError ? 'text-text-faint' : 'text-hue-green'} />
-            <span className={`text-[11px] ${block.isError ? 'text-text-faint' : 'text-hue-green/70'}`}>
+            <Check size={12} className={block.isError ? 'text-text-faint' : 'text-success'} />
+            <span className={`text-xs ${block.isError ? 'text-text-faint' : 'text-success'}`}>
               {block.isError ? 'Closed' : 'Answered'}
             </span>
           </div>
diff --git a/web/src/components/Chat/tools/ScheduleWakeupBlock.tsx b/web/src/components/Chat/tools/ScheduleWakeupBlock.tsx
index e36c43dc..31b3a042 100644
--- a/web/src/components/Chat/tools/ScheduleWakeupBlock.tsx
+++ b/web/src/components/Chat/tools/ScheduleWakeupBlock.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Clock, Loader2 } from 'lucide-react';
+import { ChevronRight, ChevronDown, Clock, Loader2 } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
 import { extractResultText } from '../../../utils/extractResultText';
 
@@ -86,20 +86,20 @@ export function ScheduleWakeupBlock({ block }: { block: ToolCallBlockData }) {
       >
         {isRunning
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
-          : <Clock size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : 'text-hue-cyan'}`} />
+          : <Clock size={14} className={`shrink-0 ${block.isError ? 'text-error' : 'text-hue-cyan'}`} />
         }
-        <span className="text-[13px] font-medium text-text-secondary shrink-0 whitespace-nowrap">
+        <span className="text-sm leading-tight font-medium text-text-secondary shrink-0 whitespace-nowrap">
           Schedule wakeup
         </span>
         {delayLabel && (
-          <span className="text-[12px] text-text-muted shrink-0">
+          <span className="text-xs text-text-muted shrink-0">
             in {delayLabel}
             {timeLabel ? ` · ${timeLabel}` : ''}
             {wasClamped ? ' (clamped)' : ''}
           </span>
         )}
         {reason && (
-          <span className="text-[12px] text-text-faint truncate">— {reason}</span>
+          <span className="text-xs text-text-faint truncate">— {reason}</span>
         )}
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
@@ -116,7 +116,7 @@ export function ScheduleWakeupBlock({ block }: { block: ToolCallBlockData }) {
               client is reaped, the wakeup is lost (unless `durable: true`,
               which the model rarely sets). Net: it's a deferred prompt
               that piggybacks on the next user turn. */}
-          <div className="px-3 py-2 text-[11px] text-text-faint italic">
+          <div className="px-3 py-2 text-xs text-text-faint italic">
             Queued by the Claude Code CLI. Nerve has no <code>/loop</code>
             timer, so the wakeup will only surface on the next user
             message — and will arrive before that message in the
@@ -125,8 +125,8 @@ export function ScheduleWakeupBlock({ block }: { block: ToolCallBlockData }) {
 
           {prompt && (
             <div className="px-3 py-2 border-t border-border-subtle">
-              <div className="text-[10px] uppercase tracking-wider text-text-faint mb-1">Prompt</div>
-              <pre className="text-[12px] text-text-muted whitespace-pre-wrap overflow-x-auto max-h-40 overflow-y-auto bg-bg rounded p-2 border border-border-subtle">
+              <div className="text-2xs uppercase tracking-wider text-text-faint mb-1">Prompt</div>
+              <pre className="text-xs text-text-muted whitespace-pre-wrap overflow-x-auto max-h-40 overflow-y-auto bg-bg rounded p-2 border border-border-subtle">
                 {prompt}
               </pre>
             </div>
@@ -134,14 +134,14 @@ export function ScheduleWakeupBlock({ block }: { block: ToolCallBlockData }) {
 
           {block.isError && block.result !== undefined && (
             <div className="px-3 py-2 border-t border-border-subtle">
-              <pre className="text-[12px] text-hue-red whitespace-pre-wrap">
+              <pre className="text-xs text-error whitespace-pre-wrap">
                 {extractResultText(block.result)}
               </pre>
             </div>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2 border-t border-border-subtle">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2 border-t border-border-subtle">
               <Loader2 size={12} className="animate-spin" /> Scheduling...
             </div>
           )}
diff --git a/web/src/components/Chat/tools/SkillToolBlock.tsx b/web/src/components/Chat/tools/SkillToolBlock.tsx
index fdb6efdf..db01ada7 100644
--- a/web/src/components/Chat/tools/SkillToolBlock.tsx
+++ b/web/src/components/Chat/tools/SkillToolBlock.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Sparkles, BookOpen, Play, List, Plus, Pencil, Loader2 } from 'lucide-react';
+import { ChevronRight, ChevronDown, Sparkles, BookOpen, Play, List, Plus, Pencil, Loader2 } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
+import { Badge } from '../../ui';
 
 /** Extract readable text from MCP content blocks. */
 function extractText(result: string): string {
@@ -75,30 +76,30 @@ export function SkillToolBlock({ block }: { block: ToolCallBlockData }) {
       >
         {isRunning
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
-          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : 'text-hue-purple'}`} />
+          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-error' : 'text-hue-purple'}`} />
         }
-        <span className="text-[13px] font-medium text-text-secondary">{label}</span>
+        <span className="text-sm leading-tight font-medium text-text-secondary">{label}</span>
 
         {/* Skill name badge */}
         {skillName && (
-          <span className="text-[11px] font-mono bg-purple-500/10 text-hue-purple px-1.5 py-0.5 rounded truncate max-w-[200px]">
+          <Badge tone="purple" size="sm" className="font-mono truncate max-w-[200px]">
             {skillName}
-          </span>
+          </Badge>
         )}
 
         {/* Reference path */}
         {isRef && refPath && (
-          <span className="text-[11px] text-text-dim font-mono truncate">{refPath}</span>
+          <span className="text-xs text-text-dim font-mono truncate">{refPath}</span>
         )}
 
         {/* List count */}
         {isList && skillList.length > 0 && (
-          <span className="text-[10px] text-text-faint shrink-0">{skillList.length} skills</span>
+          <span className="text-2xs text-text-faint shrink-0">{skillList.length} skills</span>
         )}
 
         {/* Loaded content hint */}
         {isGet && !isRunning && resultText && !block.isError && (
-          <span className="text-[10px] text-text-faint shrink-0">{contentLines} lines</span>
+          <span className="text-2xs text-text-faint shrink-0">{contentLines} lines</span>
         )}
 
         <div className="ml-auto shrink-0">
@@ -112,14 +113,14 @@ export function SkillToolBlock({ block }: { block: ToolCallBlockData }) {
           {skillList.length > 0 && (
             <div className="px-3 py-2 space-y-1.5 max-h-60 overflow-y-auto">
               {skillList.map((s) => (
-                <div key={s.id} className="flex items-start gap-2 text-[12px]">
+                <div key={s.id} className="flex items-start gap-2 text-xs">
                   <Sparkles size={11} className="text-hue-purple mt-0.5 shrink-0" />
                   <div className="min-w-0">
                     <div className="flex items-center gap-1.5">
                       <span className="text-text-secondary font-medium">{s.name}</span>
-                      <span className="text-[10px] text-text-faint font-mono">{s.id}</span>
+                      <span className="text-2xs text-text-faint font-mono">{s.id}</span>
                     </div>
-                    <p className="text-[11px] text-text-muted truncate">{s.description}</p>
+                    <p className="text-xs text-text-muted truncate">{s.description}</p>
                   </div>
                 </div>
               ))}
@@ -132,10 +133,10 @@ export function SkillToolBlock({ block }: { block: ToolCallBlockData }) {
               {loadedSkillTitle && (
                 <div className="px-3 py-1.5 border-b border-border-subtle flex items-center gap-2">
                   <Sparkles size={11} className="text-hue-purple" />
-                  <span className="text-[12px] text-text-secondary font-medium">{loadedSkillTitle}</span>
+                  <span className="text-xs text-text-secondary font-medium">{loadedSkillTitle}</span>
                 </div>
               )}
-              <pre className="px-3 py-2 text-[11px] font-mono whitespace-pre-wrap text-text-muted leading-relaxed">
+              <pre className="px-3 py-2 text-xs font-mono whitespace-pre-wrap text-text-muted leading-relaxed">
                 {resultText}
               </pre>
             </div>
@@ -144,8 +145,8 @@ export function SkillToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* Script output */}
           {isRun && resultText && !block.isError && (
             <div className="px-3 py-2">
-              <div className="text-[10px] uppercase tracking-wider text-text-faint mb-1">Output</div>
-              <pre className="text-[12px] font-mono whitespace-pre-wrap max-h-60 overflow-y-auto bg-bg-sunken rounded p-2 border border-border-subtle text-text-muted">
+              <div className="text-2xs uppercase tracking-wider text-text-faint mb-1">Output</div>
+              <pre className="text-xs font-mono whitespace-pre-wrap max-h-60 overflow-y-auto bg-bg-sunken rounded p-2 border border-border-subtle text-text-muted">
                 {resultText}
               </pre>
             </div>
@@ -156,10 +157,10 @@ export function SkillToolBlock({ block }: { block: ToolCallBlockData }) {
             <div className="max-h-80 overflow-y-auto">
               {refPath && (
                 <div className="px-3 py-1.5 border-b border-border-subtle">
-                  <span className="text-[11px] text-text-dim font-mono">{skillName}/{refPath}</span>
+                  <span className="text-xs text-text-dim font-mono">{skillName}/{refPath}</span>
                 </div>
               )}
-              <pre className="px-3 py-2 text-[11px] font-mono whitespace-pre-wrap text-text-muted leading-relaxed">
+              <pre className="px-3 py-2 text-xs font-mono whitespace-pre-wrap text-text-muted leading-relaxed">
                 {resultText}
               </pre>
             </div>
@@ -171,19 +172,19 @@ export function SkillToolBlock({ block }: { block: ToolCallBlockData }) {
               {skillName && (
                 <div className="flex items-center gap-2 mb-1.5">
                   <Plus size={11} className="text-hue-purple" />
-                  <span className="text-[12px] text-text-secondary font-medium">{skillName}</span>
+                  <span className="text-xs text-text-secondary font-medium">{skillName}</span>
                 </div>
               )}
               {skillDescription && (
-                <p className="text-[11px] text-text-muted mb-1.5 pl-5">{skillDescription.slice(0, 300)}</p>
+                <p className="text-xs text-text-muted mb-1.5 pl-5">{skillDescription.slice(0, 300)}</p>
               )}
               {String(block.input.content || '') && (
-                <pre className="text-[11px] font-mono text-text-dim whitespace-pre-wrap max-h-40 overflow-y-auto bg-bg-sunken rounded p-2 border border-border-subtle mt-1">
+                <pre className="text-xs font-mono text-text-dim whitespace-pre-wrap max-h-40 overflow-y-auto bg-bg-sunken rounded p-2 border border-border-subtle mt-1">
                   {String(block.input.content).slice(0, 500)}{String(block.input.content).length > 500 ? '...' : ''}
                 </pre>
               )}
               {resultText && !block.isError && (
-                <div className="mt-2 text-[11px] text-hue-emerald/70 flex items-center gap-1">
+                <div className="mt-2 text-xs text-success flex items-center gap-1">
                   <Sparkles size={10} /> {resultText}
                 </div>
               )}
@@ -194,12 +195,12 @@ export function SkillToolBlock({ block }: { block: ToolCallBlockData }) {
           {isUpdate && (
             <div className="px-3 py-2">
               {String(block.input.content || '') && (
-                <pre className="text-[11px] font-mono text-text-muted whitespace-pre-wrap max-h-60 overflow-y-auto bg-bg-sunken rounded p-2 border border-border-subtle">
+                <pre className="text-xs font-mono text-text-muted whitespace-pre-wrap max-h-60 overflow-y-auto bg-bg-sunken rounded p-2 border border-border-subtle">
                   {String(block.input.content).slice(0, 800)}{String(block.input.content).length > 800 ? '\n...' : ''}
                 </pre>
               )}
               {resultText && !block.isError && (
-                <div className="mt-2 text-[11px] text-hue-emerald/70 flex items-center gap-1">
+                <div className="mt-2 text-xs text-success flex items-center gap-1">
                   <Sparkles size={10} /> {resultText}
                 </div>
               )}
@@ -208,21 +209,21 @@ export function SkillToolBlock({ block }: { block: ToolCallBlockData }) {
 
           {/* Fallback for unknown skill tools */}
           {!isList && !isGet && !isRun && !isRef && !isCreate && !isUpdate && resultText && !block.isError && (
-            <pre className="px-3 py-2 text-[12px] whitespace-pre-wrap max-h-60 overflow-y-auto text-text-muted">
+            <pre className="px-3 py-2 text-xs whitespace-pre-wrap max-h-60 overflow-y-auto text-text-muted">
               {resultText}
             </pre>
           )}
 
           {/* Error */}
           {block.isError && resultText && (
-            <pre className="px-3 py-2 text-[12px] text-hue-red whitespace-pre-wrap border-t border-border-subtle">
+            <pre className="px-3 py-2 text-xs text-error whitespace-pre-wrap border-t border-border-subtle">
               {resultText}
             </pre>
           )}
 
           {/* Running */}
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
               <Loader2 size={12} className="animate-spin" />
               {isGet ? 'Loading skill...' : isRun ? 'Running script...' : 'Working...'}
             </div>
diff --git a/web/src/components/Chat/tools/SourceToolBlock.tsx b/web/src/components/Chat/tools/SourceToolBlock.tsx
index e625e6a1..d5d00a18 100644
--- a/web/src/components/Chat/tools/SourceToolBlock.tsx
+++ b/web/src/components/Chat/tools/SourceToolBlock.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Inbox, Radio, BookOpen, Loader2, Mail, Github, MessageCircle } from 'lucide-react';
+import { ChevronRight, ChevronDown, Inbox, Radio, BookOpen, Loader2, Mail, Github, MessageCircle } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
 
 /** Extract readable text from MCP content blocks or plain text. */
@@ -18,6 +18,8 @@ function extractText(result: string): string {
   return result;
 }
 
+/** Per-source identity hues — gmail red, github purple, telegram blue.
+ *  Not status: a Gmail row is not an error because it is red. */
 function sourceIcon(source: string) {
   const type = source.split(':')[0];
   switch (type) {
@@ -149,19 +151,19 @@ export function SourceToolBlock({ block }: { block: ToolCallBlockData }) {
   }
 
   return (
-    <div className="my-1.5 border border-cyan-500/20 rounded-lg bg-surface overflow-hidden">
+    <div className="my-1.5 border border-hue-cyan/20 rounded-lg bg-surface overflow-hidden">
       <button
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 w-full px-3 py-2 text-left cursor-pointer hover:bg-surface-raised transition-colors"
       >
         {isRunning
           ? <Loader2 size={14} className="text-hue-cyan animate-spin shrink-0" />
-          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : 'text-hue-cyan'}`} />
+          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-error' : 'text-hue-cyan'}`} />
         }
-        <span className="text-[13px] font-medium text-cyan-300">{label}</span>
-        {summary && <span className="text-[12px] text-text-dim truncate">{summary}</span>}
+        <span className="text-sm leading-tight font-medium text-hue-cyan">{label}</span>
+        {summary && <span className="text-xs text-text-dim truncate">{summary}</span>}
         {(isPoll || isRead) && messageCount > 0 && !isRunning && (
-          <span className="text-[10px] text-hue-cyan/60 shrink-0">{messageCount} msg</span>
+          <span className="text-2xs text-hue-cyan shrink-0">{messageCount} msg</span>
         )}
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
@@ -169,12 +171,12 @@ export function SourceToolBlock({ block }: { block: ToolCallBlockData }) {
       </button>
 
       {expanded && (
-        <div className="border-t border-cyan-500/10">
+        <div className="border-t border-hue-cyan/10">
           {/* list_sources: structured source list */}
           {isList && sourceEntries.length > 0 && (
             <div className="px-3 py-2 space-y-1">
               {sourceEntries.map((entry, i) => (
-                <div key={i} className="flex items-center gap-2 text-[12px]">
+                <div key={i} className="flex items-center gap-2 text-xs">
                   {sourceIcon(entry.name)}
                   <span className="text-text-secondary font-mono">{entry.name}</span>
                   {entry.messageCount && <span className="text-text-dim">{entry.messageCount} msgs</span>}
@@ -196,16 +198,16 @@ export function SourceToolBlock({ block }: { block: ToolCallBlockData }) {
                 <div key={i} className="px-3 py-2 border-t border-surface-raised first:border-t-0">
                   <div className="flex items-center gap-2 mb-1">
                     {sourceIcon(msg.source)}
-                    <span className="text-[12px] text-text-secondary font-medium truncate flex-1">{msg.summary}</span>
-                    <span className="text-[10px] text-text-dim shrink-0">{msg.relativeTime}</span>
+                    <span className="text-xs text-text-secondary font-medium truncate flex-1">{msg.summary}</span>
+                    <span className="text-2xs text-text-dim shrink-0">{msg.relativeTime}</span>
                   </div>
-                  <div className="text-[11px] text-text-faint flex items-center gap-2 mb-1">
+                  <div className="text-xs text-text-faint flex items-center gap-2 mb-1">
                     <span>{msg.type}</span>
                     <span>seq:{msg.seq}</span>
                     {msg.time && <span>{msg.time}</span>}
                   </div>
                   {msg.content && (
-                    <pre className="text-[11px] text-text-muted whitespace-pre-wrap leading-relaxed max-h-32 overflow-y-auto">
+                    <pre className="text-xs text-text-muted whitespace-pre-wrap leading-relaxed max-h-32 overflow-y-auto">
                       {msg.content.length > 500 ? msg.content.slice(0, 500) + '...' : msg.content}
                     </pre>
                   )}
@@ -216,35 +218,35 @@ export function SourceToolBlock({ block }: { block: ToolCallBlockData }) {
 
           {/* No messages state */}
           {isNoMessages && !isList && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
               <Inbox size={12} className="text-text-faint" /> No new messages
             </div>
           )}
 
           {/* Fallback: raw text for unparsed results */}
           {!isList && parsedMessages.length === 0 && !isNoMessages && resultText && (
-            <pre className={`px-3 py-2 text-[12px] whitespace-pre-wrap max-h-60 overflow-y-auto ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
+            <pre className={`px-3 py-2 text-xs whitespace-pre-wrap max-h-60 overflow-y-auto ${block.isError ? 'text-error' : 'text-text-muted'}`}>
               {resultText}
             </pre>
           )}
 
           {/* list_sources fallback */}
           {isList && sourceEntries.length === 0 && resultText && (
-            <pre className="px-3 py-2 text-[12px] text-text-muted whitespace-pre-wrap max-h-60 overflow-y-auto">
+            <pre className="px-3 py-2 text-xs text-text-muted whitespace-pre-wrap max-h-60 overflow-y-auto">
               {resultText}
             </pre>
           )}
 
           {/* Error */}
           {block.isError && resultText && (
-            <pre className="px-3 py-2 text-[12px] text-hue-red whitespace-pre-wrap border-t border-cyan-500/10">
+            <pre className="px-3 py-2 text-xs text-error whitespace-pre-wrap border-t border-hue-cyan/10">
               {resultText}
             </pre>
           )}
 
           {/* Running state */}
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
               <Loader2 size={12} className="animate-spin" /> {isPoll ? 'Polling...' : isList ? 'Loading sources...' : 'Browsing...'}
             </div>
           )}
diff --git a/web/src/components/Chat/tools/SubagentToolBlock.tsx b/web/src/components/Chat/tools/SubagentToolBlock.tsx
index 836162bf..9db0a651 100644
--- a/web/src/components/Chat/tools/SubagentToolBlock.tsx
+++ b/web/src/components/Chat/tools/SubagentToolBlock.tsx
@@ -1,9 +1,10 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, Bot, Search, Lightbulb, Wrench, Loader2, ArrowRight } from 'lucide-react';
+import { ChevronRight, ChevronDown, Bot, Search, Lightbulb, Wrench, Loader2, ArrowRight } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
 import { MarkdownContent } from '../MarkdownContent';
 import { useChatStore } from '../../../stores/chatStore';
 import { extractResultText } from '../../../utils/extractResultText';
+import { Button, IconButton } from '../../ui';
 
 const AGENT_ICONS: Record<string, typeof Bot> = {
   Explore: Search,
@@ -11,6 +12,7 @@ const AGENT_ICONS: Record<string, typeof Bot> = {
   'general-purpose': Wrench,
 };
 
+/** Agent identity, not status — which sub-agent ran, at a glance. */
 const AGENT_COLORS: Record<string, string> = {
   Explore: 'text-hue-cyan',
   Plan: 'text-hue-amber',
@@ -74,36 +76,38 @@ export function SubagentToolBlock({ block }: { block: ToolCallBlockData }) {
       <div className="flex items-center gap-2 px-3 py-2">
         {isRunning
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
-          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : color}`} />
+          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-error' : color}`} />
         }
-        <span className={`text-[13px] font-medium ${color}`}>{subagentType}</span>
-        {description && <span className="text-[12px] text-text-muted truncate flex-1">{description}</span>}
-        {model && <span className="text-[10px] text-text-faint shrink-0">{model}</span>}
+        <span className={`text-sm leading-tight font-medium ${color}`}>{subagentType}</span>
+        {description && <span className="text-xs text-text-muted truncate flex-1">{description}</span>}
+        {model && <span className="text-2xs text-text-faint shrink-0">{model}</span>}
 
         <div className="ml-auto shrink-0 flex items-center gap-1.5">
           {/* View in panel button */}
           {(isRunning || resultText) && (
-            <button
+            <Button
+              variant="subtle"
+              size="xs"
               onClick={handleViewInPanel}
-              className="flex items-center gap-1 px-2 py-0.5 text-[11px] text-text-dim hover:text-text-secondary cursor-pointer transition-colors rounded hover:bg-surface-raised"
               title="View in side panel"
             >
               View <ArrowRight size={10} />
-            </button>
+            </Button>
           )}
           {/* Expand toggle (inline fallback) */}
-          <button
+          <IconButton
+            size="xs"
+            label={expanded ? 'Collapse result' : 'Expand result'}
             onClick={() => setExpanded(!expanded)}
-            className="p-1 text-text-faint hover:text-text-muted cursor-pointer transition-colors"
           >
             {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-          </button>
+          </IconButton>
         </div>
       </div>
 
       {/* Summary line when complete and collapsed */}
       {!expanded && !isRunning && summaryLine && (
-        <div className="px-3 pb-2 text-[11px] text-text-faint truncate">
+        <div className="px-3 pb-2 text-xs text-text-faint truncate">
           {summaryLine}{summaryLine.length >= 120 ? '...' : ''}
         </div>
       )}
@@ -116,13 +120,13 @@ export function SubagentToolBlock({ block }: { block: ToolCallBlockData }) {
             <div className="border-b border-border-subtle">
               <button
                 onClick={() => setShowPrompt(!showPrompt)}
-                className="flex items-center gap-1.5 px-3 py-1.5 w-full text-left text-[10px] uppercase tracking-wider text-text-faint hover:text-text-muted cursor-pointer"
+                className="flex items-center gap-1.5 px-3 py-1.5 w-full text-left text-2xs uppercase tracking-wider text-text-faint hover:text-text-muted cursor-pointer"
               >
                 {showPrompt ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
                 Prompt
               </button>
               {showPrompt && (
-                <pre className="px-3 pb-2 text-[12px] text-text-muted whitespace-pre-wrap max-h-40 overflow-y-auto">
+                <pre className="px-3 pb-2 text-xs text-text-muted whitespace-pre-wrap max-h-40 overflow-y-auto">
                   {prompt}
                 </pre>
               )}
@@ -131,19 +135,19 @@ export function SubagentToolBlock({ block }: { block: ToolCallBlockData }) {
 
           {/* Result rendered as markdown */}
           {displayText && (
-            <div className="px-3 py-2 max-h-96 overflow-y-auto text-[13px]">
+            <div className="px-3 py-2 max-h-96 overflow-y-auto text-sm">
               <MarkdownContent content={displayText} />
             </div>
           )}
 
           {block.isError && resultText && (
-            <pre className="px-3 py-2 text-[12px] text-hue-red whitespace-pre-wrap">
+            <pre className="px-3 py-2 text-xs text-error whitespace-pre-wrap">
               {resultText}
             </pre>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
               <Loader2 size={12} className="animate-spin" /> Agent working...
             </div>
           )}
diff --git a/web/src/components/Chat/tools/TaskToolBlock.tsx b/web/src/components/Chat/tools/TaskToolBlock.tsx
index f15203c3..a3a80474 100644
--- a/web/src/components/Chat/tools/TaskToolBlock.tsx
+++ b/web/src/components/Chat/tools/TaskToolBlock.tsx
@@ -1,14 +1,16 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, CheckSquare, ListTodo, Plus, CheckCircle, Pencil, FileText, Loader2 } from 'lucide-react';
+import { ChevronRight, ChevronDown, CheckSquare, ListTodo, Plus, CheckCircle, Pencil, FileText, Loader2 } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
-
-const STATUS_COLORS: Record<string, string> = {
-  pending: 'bg-yellow-500/15 text-hue-yellow',
-  'in-progress': 'bg-blue-500/15 text-hue-blue',
-  'in_progress': 'bg-blue-500/15 text-hue-blue',
-  done: 'bg-green-500/15 text-hue-green',
-  completed: 'bg-green-500/15 text-hue-green',
-  deferred: 'bg-border-subtle text-text-muted',
+import { Badge, type BadgeTone } from '../../ui';
+
+/** Task lifecycle state — an outcome, so it takes the status-shaped tones. */
+const STATUS_TONES: Record<string, BadgeTone> = {
+  pending: 'warning',
+  'in-progress': 'info',
+  'in_progress': 'info',
+  done: 'success',
+  completed: 'success',
+  deferred: 'neutral',
 };
 
 /** Extract readable text from MCP content blocks. */
@@ -93,17 +95,15 @@ export function TaskToolBlock({ block }: { block: ToolCallBlockData }) {
       >
         {isRunning
           ? <Loader2 size={14} className="text-accent animate-spin shrink-0" />
-          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-hue-red' : isDone ? 'text-hue-green' : isCreate ? 'text-hue-blue' : 'text-text-muted'}`} />
+          : <Icon size={14} className={`shrink-0 ${block.isError ? 'text-error' : isDone ? 'text-hue-green' : isCreate ? 'text-hue-blue' : 'text-text-muted'}`} />
         }
-        <span className="text-[13px] font-medium text-text-secondary shrink-0 whitespace-nowrap">{label}</span>
-        {title && <span className="text-[12px] text-text-muted truncate">{title}</span>}
+        <span className="text-sm leading-tight font-medium text-text-secondary shrink-0 whitespace-nowrap">{label}</span>
+        {title && <span className="text-xs text-text-muted truncate">{title}</span>}
         {status && (
-          <span className={`text-[10px] px-1.5 py-0.5 rounded ${STATUS_COLORS[status] || 'bg-border-subtle text-text-muted'}`}>
-            {status}
-          </span>
+          <Badge tone={STATUS_TONES[status] || 'neutral'}>{status}</Badge>
         )}
         {isList && taskList.length > 0 && (
-          <span className="text-[10px] text-text-faint shrink-0">{taskList.length} tasks</span>
+          <span className="text-2xs text-text-faint shrink-0">{taskList.length} tasks</span>
         )}
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
@@ -115,22 +115,22 @@ export function TaskToolBlock({ block }: { block: ToolCallBlockData }) {
           {/* Create: show what was created */}
           {isCreate && title && (
             <div className="px-3 py-2">
-              <div className="text-[12px] text-text-secondary flex items-center gap-2">
+              <div className="text-xs text-text-secondary flex items-center gap-2">
                 <Plus size={11} className="text-hue-blue" />
                 <span className="font-medium">{title}</span>
               </div>
               {block.input.content ? (
-                <p className="text-[12px] text-text-muted mt-1 pl-5">{String(block.input.content).slice(0, 200)}</p>
+                <p className="text-xs text-text-muted mt-1 pl-5">{String(block.input.content).slice(0, 200)}</p>
               ) : null}
               {block.input.deadline ? (
-                <p className="text-[10px] text-text-dim mt-1 pl-5">Deadline: {String(block.input.deadline)}</p>
+                <p className="text-2xs text-text-dim mt-1 pl-5">Deadline: {String(block.input.deadline)}</p>
               ) : null}
             </div>
           )}
 
           {/* Done/Update: show status change */}
           {(isDone || isUpdate) && (
-            <div className="px-3 py-2 text-[12px]">
+            <div className="px-3 py-2 text-xs">
               <span className="text-text-muted">{block.input.task_id ? String(block.input.task_id) : title}</span>
               {block.input.note ? <p className="text-text-muted mt-1">{String(block.input.note)}</p> : null}
             </div>
@@ -140,36 +140,34 @@ export function TaskToolBlock({ block }: { block: ToolCallBlockData }) {
           {taskList.length > 0 ? (
             <div className="px-3 py-2 space-y-1 max-h-60 overflow-y-auto">
               {taskList.map((t, i) => (
-                <div key={i} className="flex items-center gap-2 text-[12px]">
-                  <span className={`px-1.5 py-0.5 rounded text-[10px] shrink-0 ${STATUS_COLORS[t.status] || 'bg-border-subtle text-text-muted'}`}>
-                    {t.status}
-                  </span>
+                <div key={i} className="flex items-center gap-2 text-xs">
+                  <Badge tone={STATUS_TONES[t.status] || 'neutral'} className="shrink-0">{t.status}</Badge>
                   <span className="text-text-secondary truncate">{t.title}</span>
-                  {t.deadline && <span className="text-[10px] text-text-faint shrink-0">{t.deadline}</span>}
+                  {t.deadline && <span className="text-2xs text-text-faint shrink-0">{t.deadline}</span>}
                 </div>
               ))}
             </div>
           ) : resultText && !isCreate && !isDone && !isUpdate ? (
-            <pre className={`px-3 py-2 text-[12px] whitespace-pre-wrap max-h-60 overflow-y-auto ${block.isError ? 'text-hue-red' : 'text-text-muted'}`}>
+            <pre className={`px-3 py-2 text-xs whitespace-pre-wrap max-h-60 overflow-y-auto ${block.isError ? 'text-error' : 'text-text-muted'}`}>
               {resultText}
             </pre>
           ) : null}
 
           {/* Success message */}
           {(isCreate || isDone) && resultText && !block.isError && !taskList.length && (
-            <div className="px-3 py-1.5 text-[11px] text-hue-green/70 border-t border-border-subtle">
+            <div className="px-3 py-1.5 text-xs text-success border-t border-border-subtle">
               {isDone ? 'Task completed' : 'Task created'}
             </div>
           )}
 
           {block.isError && resultText && (
-            <pre className="px-3 py-2 text-[12px] text-hue-red whitespace-pre-wrap border-t border-border-subtle">
+            <pre className="px-3 py-2 text-xs text-error whitespace-pre-wrap border-t border-border-subtle">
               {resultText}
             </pre>
           )}
 
           {isRunning && block.result === undefined && (
-            <div className="px-3 py-3 text-[12px] text-text-dim flex items-center gap-2">
+            <div className="px-3 py-3 text-xs text-text-dim flex items-center gap-2">
               <Loader2 size={12} className="animate-spin" /> Working...
             </div>
           )}
diff --git a/web/src/components/Chat/tools/WorkflowRunToolBlock.tsx b/web/src/components/Chat/tools/WorkflowRunToolBlock.tsx
index 23c0108e..ca4c6058 100644
--- a/web/src/components/Chat/tools/WorkflowRunToolBlock.tsx
+++ b/web/src/components/Chat/tools/WorkflowRunToolBlock.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { ChevronDown, ChevronRight, Loader2, OctagonX, Rocket } from 'lucide-react';
+import { ChevronDown, ChevronRight, Loader2, OctagonX, Rocket } from '../../ui/icons';
 import type { ToolCallBlockData } from '../../../types/chat';
 import { api, type WorkflowRun, type WorkflowRunStatus } from '../../../api/client';
 import { useWorkflowRunStore, isActiveRun } from '../../../stores/workflowRunStore';
+import { Button } from '../../ui';
 
 /** Extract readable text from MCP content blocks. */
 function extractText(result: string): string {
@@ -30,16 +31,21 @@ function statusLabel(status: WorkflowRunStatus): string {
   return status.replace(/_/g, ' ');
 }
 
+/**
+ * How the run ended — outcome, not identity, so this is the one colour map in
+ * the file that takes the status tokens rather than `hue-*`. (The Rocket glyph
+ * beside it stays `text-hue-amber`: that says "workflow run", not "went well".)
+ */
 function statusBadgeClasses(status: WorkflowRunStatus): string {
   switch (status) {
     case 'running':
-      return 'border-blue-400/25 bg-blue-400/10 text-hue-blue';
+      return 'border-info-border bg-info-bg text-info';
     case 'done':
-      return 'border-emerald-400/25 bg-emerald-400/10 text-hue-emerald';
+      return 'border-success-border bg-success-bg text-success';
     case 'failed':
-      return 'border-red-400/25 bg-red-400/10 text-hue-red';
+      return 'border-error-border bg-error-bg text-error';
     case 'budget_exhausted':
-      return 'border-amber-400/25 bg-amber-400/10 text-hue-amber';
+      return 'border-warning-border bg-warning-bg text-warning';
     default: // pending, killed
       return 'border-border bg-surface-raised text-text-muted';
   }
@@ -47,11 +53,11 @@ function statusBadgeClasses(status: WorkflowRunStatus): string {
 
 function StatusBadge({ status }: { status: WorkflowRunStatus }) {
   return (
-    <span className={`inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-full border text-[10px] capitalize shrink-0 ${statusBadgeClasses(status)}`}>
+    <span className={`inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-full border text-2xs capitalize shrink-0 ${statusBadgeClasses(status)}`}>
       {status === 'running' && (
         <span className="relative flex h-1.5 w-1.5">
-          <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-60 animate-ping" />
-          <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-400" />
+          <span className="absolute inline-flex h-full w-full rounded-full bg-info opacity-60 animate-ping" />
+          <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-info" />
         </span>
       )}
       {statusLabel(status)}
@@ -59,28 +65,36 @@ function StatusBadge({ status }: { status: WorkflowRunStatus }) {
   );
 }
 
-/** Spend vs budget: emerald, amber from 80%, red at 100%. Unbudgeted runs show plain spend. */
+/**
+ * Spend vs budget: emerald, amber from 80%, red at 100%. Unbudgeted runs show
+ * plain spend.
+ *
+ * Only the *width* is data-driven, so it is the only thing in `style`; the
+ * colour is a three-step ramp, so it becomes a class. It uses `hue-*` rather
+ * than `bg-success`/`bg-warning`/`bg-error` because those tokens are Click UI's
+ * feedback *foregrounds* — pale mint / pale pink, meant to sit on the matching
+ * `-bg` tint. This bar sits on a neutral `bg-border-subtle` track, where the
+ * saturated theme-adaptive hues are what stay readable in both themes.
+ */
 function SpendLine({ run }: { run: WorkflowRun }) {
   if (run.budget_usd === null || run.budget_usd <= 0) {
     return (
-      <span className="text-[11px] text-text-dim tabular-nums whitespace-nowrap">
+      <span className="text-xs text-text-dim tabular-nums whitespace-nowrap">
         {fmtUsd(run.spent_usd)} spent
       </span>
     );
   }
   const pct = (run.spent_usd / run.budget_usd) * 100;
-  let color = '#10b981'; // emerald-500
-  if (pct >= 100) color = '#ef4444'; // red-500
-  else if (pct >= 80) color = '#f59e0b'; // amber-500
+  const barColor = pct >= 100 ? 'bg-hue-red' : pct >= 80 ? 'bg-hue-amber' : 'bg-hue-emerald';
   return (
     <div className="flex items-center gap-2 min-w-0" title={`${Math.round(pct)}% of budget`}>
-      <span className="text-[11px] text-text-dim tabular-nums shrink-0">
+      <span className="text-xs text-text-dim tabular-nums shrink-0">
         {fmtUsd(run.spent_usd)} of {fmtUsd(run.budget_usd)}
       </span>
       <div className="w-32 h-1.5 bg-border-subtle rounded-full overflow-hidden shrink-0">
         <div
-          className="h-full rounded-full transition-all duration-300"
-          style={{ width: `${Math.min(pct, 100)}%`, backgroundColor: color }}
+          className={`h-full rounded-full transition-all duration-300 ${barColor}`}
+          style={{ width: `${Math.min(pct, 100)}%` }}
         />
       </div>
     </div>
@@ -98,15 +112,15 @@ function RawResultFallback({ block }: { block: ToolCallBlockData }) {
         className="flex items-center gap-2 w-full px-3 py-2 text-left cursor-pointer hover:bg-surface-raised transition-colors"
       >
         <Rocket size={14} className="text-text-muted shrink-0" />
-        <span className="text-[13px] font-mono font-medium text-text-secondary truncate">{block.tool}</span>
-        <span className="text-[11px] text-text-faint shrink-0">run no longer available</span>
+        <span className="text-sm leading-tight font-mono font-medium text-text-secondary truncate">{block.tool}</span>
+        <span className="text-xs text-text-faint shrink-0">run no longer available</span>
         <div className="ml-auto shrink-0">
           {expanded ? <ChevronDown size={14} className="text-text-faint" /> : <ChevronRight size={14} className="text-text-faint" />}
         </div>
       </button>
       {expanded && (
         <div className="border-t border-border px-3 py-2">
-          <pre className="text-[12px] text-text-muted font-mono whitespace-pre-wrap overflow-x-auto max-h-60 overflow-y-auto bg-bg rounded p-2 border border-border-subtle">
+          <pre className="text-xs text-text-muted font-mono whitespace-pre-wrap overflow-x-auto max-h-60 overflow-y-auto bg-bg rounded p-2 border border-border-subtle">
             {text || 'No result recorded.'}
           </pre>
         </div>
@@ -152,8 +166,8 @@ export function WorkflowRunToolBlock({ block, runId }: { block: ToolCallBlockDat
     return (
       <div className="my-1.5 border border-border rounded-lg bg-surface px-3 py-2 flex items-center gap-2">
         <Loader2 size={14} className="animate-spin text-text-muted shrink-0" />
-        <span className="text-[13px] text-text-secondary">Workflow run</span>
-        <span className="text-[11px] font-mono text-text-faint">{runId}</span>
+        <span className="text-sm leading-tight text-text-secondary">Workflow run</span>
+        <span className="text-xs font-mono text-text-faint">{runId}</span>
       </div>
     );
   }
@@ -187,19 +201,20 @@ export function WorkflowRunToolBlock({ block, runId }: { block: ToolCallBlockDat
       <div className="flex items-center gap-2 px-3 py-2 min-w-0">
         <Rocket size={14} className="text-hue-amber shrink-0" />
         <StatusBadge status={run.status} />
-        <span className="text-[13px] font-medium text-text-secondary truncate" title={title}>{title}</span>
-        <span className="text-[11px] font-mono text-text-faint shrink-0">{run.id}</span>
+        <span className="text-sm leading-tight font-medium text-text-secondary truncate" title={title}>{title}</span>
+        <span className="text-xs font-mono text-text-faint shrink-0">{run.id}</span>
         {active && (
-          <button
-            type="button"
+          <Button
+            variant="danger"
+            size="xs"
+            className="ml-auto"
             onClick={() => { void onKill(); }}
             disabled={killing}
-            className="ml-auto shrink-0 inline-flex items-center gap-1.5 px-2 py-1 rounded-lg border border-red-400/25 bg-red-400/10 text-hue-red text-[11px] hover:bg-red-400/20 disabled:opacity-50 cursor-pointer"
             title="Stop this run and mark it as killed"
           >
             {killing ? <Loader2 size={11} className="animate-spin" /> : <OctagonX size={11} />}
             Kill
-          </button>
+          </Button>
         )}
       </div>
 
@@ -208,12 +223,12 @@ export function WorkflowRunToolBlock({ block, runId }: { block: ToolCallBlockDat
       </div>
 
       {killError && (
-        <div className="px-3 pb-2 text-[11px] text-hue-red break-words">{killError}</div>
+        <div className="px-3 pb-2 text-xs text-error break-words">{killError}</div>
       )}
 
       {showError && errorText && (
         <div className="px-3 pb-2">
-          <pre className={`text-[11px] leading-5 whitespace-pre-wrap break-words max-h-40 overflow-y-auto ${run.status === 'budget_exhausted' ? 'text-hue-amber' : 'text-hue-red'}`}>
+          <pre className={`text-xs leading-5 whitespace-pre-wrap break-words max-h-40 overflow-y-auto ${run.status === 'budget_exhausted' ? 'text-warning' : 'text-error'}`}>
             {errorText}
           </pre>
         </div>
@@ -221,22 +236,23 @@ export function WorkflowRunToolBlock({ block, runId }: { block: ToolCallBlockDat
 
       {resultText && (
         <div className="px-3 pb-2">
-          <pre className="text-[11px] leading-5 whitespace-pre-wrap break-words max-h-64 overflow-y-auto text-text-muted">
+          <pre className="text-xs leading-5 whitespace-pre-wrap break-words max-h-64 overflow-y-auto text-text-muted">
             {resultShown}
           </pre>
           {resultTruncated && (
-            <button
-              type="button"
+            <Button
+              variant="ghost"
+              size="xs"
+              className="mt-1 -ml-2"
               onClick={() => setShowFullResult(v => !v)}
-              className="mt-1 text-[11px] text-text-dim hover:text-text-secondary cursor-pointer"
             >
               {showFullResult ? 'Show less' : 'Show full result'}
-            </button>
+            </Button>
           )}
         </div>
       )}
 
-      <div className="px-3 py-1.5 border-t border-border-subtle flex items-center gap-3 text-[11px]">
+      <div className="px-3 py-1.5 border-t border-border-subtle flex items-center gap-3 text-xs">
         {run.session_id && (
           <Link
             to={`/chat/${run.session_id}`}
diff --git a/web/src/components/Chat/tools/WorkflowToolBlock.tsx b/web/src/components/Chat/tools/WorkflowToolBlock.tsx
index 26647a56..dae5dee8 100644
--- a/web/src/components/Chat/tools/WorkflowToolBlock.tsx
+++ b/web/src/components/Chat/tools/WorkflowToolBlock.tsx
@@ -1,6 +1,7 @@
-import { Workflow as WorkflowIcon, Loader2, Check, X, Ban, ArrowRight } from 'lucide-react';
+import { Workflow as WorkflowIcon, Loader2, Check, X, Ban, ArrowRight } from '../../ui/icons';
 import type { ToolCallBlockData, WorkflowSnapshot } from '../../../types/chat';
 import { useChatStore } from '../../../stores/chatStore';
+import { Button } from '../../ui';
 
 /** Current phase index (1-based) = the highest phase that has agents, biased
  *  toward any phase with a running agent. Falls back to phases length. */
@@ -65,54 +66,57 @@ export function WorkflowToolBlock({ block }: { block: ToolCallBlockData }) {
   };
 
   const StatusIcon = isRunning ? (
+    // Identity, not status: the spinner carries the workflow's violet so a
+    // running card still reads as "workflow" at a glance.
     <Loader2 size={14} className="text-hue-violet animate-spin shrink-0" />
   ) : isFailed ? (
-    <X size={14} className="text-hue-red shrink-0" />
+    <X size={14} className="text-error shrink-0" />
   ) : status === 'stopped' ? (
     <Ban size={14} className="text-text-muted shrink-0" />
   ) : (
-    <Check size={14} className="text-hue-emerald shrink-0" />
+    <Check size={14} className="text-success shrink-0" />
   );
 
   return (
-    <div className="my-1.5 border border-violet-400/20 rounded-lg bg-surface overflow-hidden">
+    <div className="my-1.5 border border-hue-violet/20 rounded-lg bg-surface overflow-hidden">
       <div className="flex items-center gap-2 px-3 py-2">
         {StatusIcon}
         <WorkflowIcon size={14} className="text-hue-violet shrink-0" />
-        <span className="text-[13px] font-medium text-text-secondary truncate">{name}</span>
+        <span className="text-sm leading-tight font-medium text-text-secondary truncate">{name}</span>
 
         {phaseCount > 0 && (
-          <span className="text-[11px] text-text-faint shrink-0">
+          <span className="text-xs text-text-faint shrink-0">
             phase {curPhase}/{phaseCount}{curPhaseTitle ? ` · ${curPhaseTitle}` : ''}
           </span>
         )}
 
         <div className="ml-auto shrink-0 flex items-center gap-2">
           {total > 0 && (
-            <span className="text-[11px] text-text-faint font-mono" title="agents done / total">
+            <span className="text-xs text-text-faint font-mono" title="agents done / total">
               {done}/{total} agents
             </span>
           )}
           {tokens > 0 && (
-            <span className="text-[11px] text-text-faint font-mono" title="total tokens">
+            <span className="text-xs text-text-faint font-mono" title="total tokens">
               {tokens >= 1000 ? `${Math.round(tokens / 1000)}k` : tokens} tok
             </span>
           )}
           {(isRunning || wf) && (
-            <button
+            <Button
+              variant="subtle"
+              size="xs"
               onClick={handleViewInPanel}
-              className="flex items-center gap-1 px-2 py-0.5 text-[11px] text-text-dim hover:text-text-secondary cursor-pointer transition-colors rounded hover:bg-surface-raised"
               title="View workflow in side panel"
             >
               View <ArrowRight size={10} />
-            </button>
+            </Button>
           )}
         </div>
       </div>
 
       {/* Summary line when settled */}
       {!isRunning && wf?.summary && (
-        <div className="px-3 pb-2 text-[11px] text-text-faint truncate">{wf.summary}</div>
+        <div className="px-3 pb-2 text-xs text-text-faint truncate">{wf.summary}</div>
       )}
     </div>
   );
diff --git a/web/src/components/Cron/CronSidebar.tsx b/web/src/components/Cron/CronSidebar.tsx
index 061eaca8..5b6b92fc 100644
--- a/web/src/components/Cron/CronSidebar.tsx
+++ b/web/src/components/Cron/CronSidebar.tsx
@@ -1,5 +1,5 @@
-import { Timer } from 'lucide-react';
 import { useCronStore } from '../../stores/cronStore';
+import { Timer } from '../ui/icons';
 import { chatPath, jobLabel } from './utils';
 import { ChatLink, TriggerButton, JobTypeIcon } from './controls';
 
@@ -22,12 +22,20 @@ export function CronSidebar({ inDrawer = false, onSelect }: {
       // fixed 220px column and its own border would fight them.
       ? 'w-full flex-1 min-h-0 flex flex-col overflow-y-auto'
       : 'w-[220px] border-r border-border-subtle flex flex-col shrink-0 overflow-y-auto'}>
+      {/* Native buttons, not `Button`: these are `justify-between` rows — label
+          on the left, count or hover controls on the right — and the
+          primitive's base `justify-center` wins over a `justify-between` from
+          the call site (Tailwind emits it later), so the layout cannot come
+          from there. The job rows below also carry their own controls
+          (`ChatLink`, `TriggerButton`), which makes each row a container for
+          interactive children as much as a control. Selected treatment is
+          `subtle active`'s. */}
       <div className="p-2 space-y-1">
         <button onClick={() => { selectJob(null); onSelect?.(); }}
-          className={`w-full flex items-center justify-between px-2 py-1.5 rounded text-[13px] transition-colors cursor-pointer
+          className={`w-full flex items-center justify-between px-2 py-1.5 rounded text-sm transition-colors cursor-pointer
             ${selectedJobId === null ? 'bg-accent/15 text-accent' : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'}`}>
           <span className="flex items-center gap-2"><Timer size={14} /> All Jobs</span>
-          <span className="text-[11px] opacity-70">{jobs.length}</span>
+          <span className="text-xs opacity-70">{jobs.length}</span>
         </button>
 
         {jobs.map(job => (
@@ -49,7 +57,7 @@ export function CronSidebar({ inDrawer = false, onSelect }: {
                   window.open(chatPath(job.last_session_id), '_blank', 'noopener');
                 }
               }}
-              className={`w-full flex items-center justify-between px-2 py-1.5 rounded text-[13px] transition-colors cursor-pointer
+              className={`w-full flex items-center justify-between px-2 py-1.5 rounded text-sm transition-colors cursor-pointer
                 ${selectedJobId === job.id ? 'bg-accent/15 text-accent' : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'}`}>
               <span className="flex items-center gap-2 min-w-0 truncate">
                 <JobTypeIcon type={job.type} />
@@ -72,7 +80,7 @@ export function CronSidebar({ inDrawer = false, onSelect }: {
         ))}
 
         {jobs.length === 0 && (
-          <div className="text-[12px] text-text-faint text-center py-4">No jobs configured</div>
+          <div className="text-xs text-text-faint text-center py-4">No jobs configured</div>
         )}
       </div>
     </div>
diff --git a/web/src/components/Cron/JobInfoCard.tsx b/web/src/components/Cron/JobInfoCard.tsx
index 0a35c2d1..eda38bb7 100644
--- a/web/src/components/Cron/JobInfoCard.tsx
+++ b/web/src/components/Cron/JobInfoCard.tsx
@@ -1,5 +1,6 @@
-import { Filter, FileText } from 'lucide-react';
 import type { CronJob } from '../../stores/cronStore';
+import { Badge } from '../ui';
+import { Filter, FileText } from '../ui/icons';
 import { formatRelativeTime, formatSchedule } from './utils';
 import { ChatLink, JobTypeBadge, JobTypeIcon, RotateButton, TriggerButton } from './controls';
 
@@ -10,16 +11,14 @@ export function JobInfoCard({ job }: { job: CronJob }) {
         <div>
           <div className="flex items-center gap-2 mb-1">
             <JobTypeBadge type={job.type} />
-            <span className="text-[14px] text-text font-medium">{job.id}</span>
-            {!job.enabled && (
-              <span className="text-[10px] px-1.5 py-0.5 rounded bg-border-subtle/50 text-text-muted border border-border-subtle">disabled</span>
-            )}
+            <span className="text-sm text-text font-medium">{job.id}</span>
+            {!job.enabled && <Badge>disabled</Badge>}
           </div>
           {job.description && (
-            <div className="text-[13px] text-text-muted mt-1">{job.description}</div>
+            <div className="text-sm text-text-muted mt-1">{job.description}</div>
           )}
           {job.prompt_file && (
-            <div className="text-[11px] text-text-dim mt-1 flex items-center gap-1 font-mono">
+            <div className="text-xs text-text-dim mt-1 flex items-center gap-1 font-mono">
               <FileText size={11} /> {job.prompt_file}
             </div>
           )}
@@ -33,19 +32,19 @@ export function JobInfoCard({ job }: { job: CronJob }) {
 
       <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
         <div>
-          <div className="text-[11px] text-text-dim mb-0.5">Schedule</div>
-          <div className="text-[13px] text-text-secondary">{formatSchedule(job.schedule)}</div>
-          <div className="text-[11px] text-text-faint font-mono">{job.schedule}</div>
+          <div className="text-xs text-text-dim mb-0.5">Schedule</div>
+          <div className="text-sm text-text-secondary">{formatSchedule(job.schedule)}</div>
+          <div className="text-xs text-text-faint font-mono">{job.schedule}</div>
         </div>
         <div>
-          <div className="text-[11px] text-text-dim mb-0.5">Next Run</div>
-          <div className="text-[13px] text-text-secondary">
+          <div className="text-xs text-text-dim mb-0.5">Next Run</div>
+          <div className="text-sm text-text-secondary">
             {job.next_run ? formatRelativeTime(job.next_run) : '—'}
           </div>
         </div>
         <div>
-          <div className="text-[11px] text-text-dim mb-0.5">Type</div>
-          <div className="flex items-center gap-1.5 text-[13px] text-text-secondary">
+          <div className="text-xs text-text-dim mb-0.5">Type</div>
+          <div className="flex items-center gap-1.5 text-sm text-text-secondary">
             <JobTypeIcon type={job.type} /> {job.type}
           </div>
         </div>
@@ -53,15 +52,16 @@ export function JobInfoCard({ job }: { job: CronJob }) {
 
       {job.gates && job.gates.length > 0 && (
         <div className="mt-3 pt-3 border-t border-border-subtle">
-          <div className="text-[11px] text-text-dim mb-1.5 flex items-center gap-1">
+          <div className="text-xs text-text-dim mb-1.5 flex items-center gap-1">
             <Filter size={11} /> Runs only if{job.gates.length > 1 ? ' (all)' : ''}
           </div>
           <div className="flex flex-wrap gap-1.5">
             {job.gates.map((gate, i) => (
-              <span key={i}
-                className="text-[12px] px-2 py-0.5 rounded bg-surface-raised text-text-secondary border border-border-subtle">
+              // Outlined rather than filled: a gate is a condition, and the
+              // filled chips beside it already mean "this job is of type X".
+              <Badge key={i} size="sm" className="border border-border-subtle">
                 {gate}
-              </span>
+              </Badge>
             ))}
           </div>
         </div>
diff --git a/web/src/components/Cron/LogsTable.tsx b/web/src/components/Cron/LogsTable.tsx
index 51396ac0..72fe9342 100644
--- a/web/src/components/Cron/LogsTable.tsx
+++ b/web/src/components/Cron/LogsTable.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
 import { useCronStore, LOGS_PAGE_SIZE, type CronLog } from '../../stores/cronStore';
+import { IconButton } from '../ui';
+import { ChevronLeft, ChevronRight, Loader2 } from '../ui/icons';
 import { formatDuration, formatRelativeTime } from './utils';
 import { ChatLink, StatusBadge } from './controls';
 
@@ -26,7 +27,10 @@ export function LogsTable({ showJobColumn }: { showJobColumn: boolean }) {
   return (
     <div className="flex-1 flex flex-col min-h-0">
       <div className="flex-1 overflow-y-auto">
-        <table className="w-full text-[13px]">
+        {/* `text-sm` carries a 20px line-height, which on `py-2` cells would
+            add 4px to every row of a log that is often hundreds long.
+            `leading-tight` (17.5px) keeps the run history dense. */}
+        <table className="w-full text-sm leading-tight">
           <thead className="sticky top-0 bg-bg">
             <tr className="text-text-muted">
               {showJobColumn && <th className="text-left px-3 py-2 font-medium">Job</th>}
@@ -59,24 +63,19 @@ function LogsPagination() {
   const hasPrev = logsOffset > 0;
   const hasNext = to < logsTotal;
 
-  const btn = (enabled: boolean) =>
-    `p-1.5 rounded transition-colors ${enabled
-      ? 'text-text-muted hover:text-text-secondary hover:bg-surface-raised cursor-pointer'
-      : 'text-text-faint cursor-not-allowed'}`;
-
   return (
     <div className="border-t border-border-subtle px-3 py-1.5 flex items-center justify-end gap-2 shrink-0 bg-bg">
-      <span className="text-[12px] text-text-dim tabular-nums">
+      <span className="text-xs text-text-dim tabular-nums">
         {from}–{to} of {logsTotal}
       </span>
-      <button className={btn(hasPrev)} disabled={!hasPrev || loading}
-        onClick={() => setLogsPage(logsOffset - LOGS_PAGE_SIZE)} title="Previous page">
+      <IconButton label="Previous page" size="xs" disabled={!hasPrev || loading}
+        onClick={() => setLogsPage(logsOffset - LOGS_PAGE_SIZE)}>
         <ChevronLeft size={14} />
-      </button>
-      <button className={btn(hasNext)} disabled={!hasNext || loading}
-        onClick={() => setLogsPage(logsOffset + LOGS_PAGE_SIZE)} title="Next page">
+      </IconButton>
+      <IconButton label="Next page" size="xs" disabled={!hasNext || loading}
+        onClick={() => setLogsPage(logsOffset + LOGS_PAGE_SIZE)}>
         <ChevronRight size={14} />
-      </button>
+      </IconButton>
     </div>
   );
 }
@@ -97,13 +96,13 @@ function LogRow({ log, showJobColumn }: { log: CronLog; showJobColumn: boolean }
         onClick={() => isLong && setExpanded(!expanded)}>
         {showJobColumn && (
           <td className="px-3 py-2">
-            <span className="text-text-secondary font-mono text-[12px]">{log.job_id}</span>
+            <span className="text-text-secondary font-mono text-xs">{log.job_id}</span>
           </td>
         )}
         <td className="px-3 py-2 text-text-muted whitespace-nowrap">{formatRelativeTime(log.started_at)}</td>
         <td className="px-3 py-2 text-text-dim">
           {!log.finished_at ? (
-            <span className="flex items-center gap-1 text-hue-amber">
+            <span className="flex items-center gap-1 text-warning">
               <Loader2 size={12} className="animate-spin" /> running
             </span>
           ) : (
@@ -114,7 +113,7 @@ function LogRow({ log, showJobColumn }: { log: CronLog; showJobColumn: boolean }
           {log.status ? <StatusBadge status={log.status} /> : <span className="text-text-dim">—</span>}
         </td>
         <td className="px-3 py-2 text-text-dim max-w-[300px]">
-          <span className={`truncate block ${log.error ? 'text-hue-red/70' : ''}`}>
+          <span className={`truncate block ${log.error ? 'text-error/70' : ''}`}>
             {preview}{isLong && !expanded ? '…' : ''}
           </span>
         </td>
@@ -125,7 +124,7 @@ function LogRow({ log, showJobColumn }: { log: CronLog; showJobColumn: boolean }
       {expanded && hasOutput && (
         <tr className="bg-surface">
           <td colSpan={showJobColumn ? 6 : 5} className="px-3 py-2">
-            <pre className="text-[12px] text-text-muted whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto font-mono">
+            <pre className="text-xs text-text-muted whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto font-mono">
               {log.error ? `Error: ${log.error}` : log.output}
             </pre>
           </td>
diff --git a/web/src/components/Cron/controls.tsx b/web/src/components/Cron/controls.tsx
index da6fd14d..f80c323d 100644
--- a/web/src/components/Cron/controls.tsx
+++ b/web/src/components/Cron/controls.tsx
@@ -1,9 +1,10 @@
 import { Link } from 'react-router-dom';
+import { useCronStore } from '../../stores/cronStore';
+import { Badge, Button, IconButton, type BadgeTone } from '../ui';
 import {
   RotateCw, Play, Loader2, Clock, Inbox, MessageSquare,
   CheckCircle2, XCircle,
-} from 'lucide-react';
-import { useCronStore } from '../../stores/cronStore';
+} from '../ui/icons';
 import { chatPath } from './utils';
 
 export function JobTypeIcon({ type }: { type: string }) {
@@ -14,28 +15,31 @@ export function JobTypeIcon({ type }: { type: string }) {
   }
 }
 
+/**
+ * Which kind of job this is — identity, not status, so it uses the `hue-*`
+ * colours (through the Badge tones that carry them) and pairs with the amber /
+ * blue of `JobTypeIcon` above. A green badge here would read as "healthy",
+ * which is what `StatusBadge` is for.
+ */
+const JOB_TYPE_TONES: Record<string, BadgeTone> = {
+  cron: 'warning',
+  source: 'info',
+};
+
 export function JobTypeBadge({ type }: { type: string }) {
-  const styles: Record<string, string> = {
-    cron: 'text-amber-600 bg-amber-500/15',
-    source: 'text-blue-600 bg-blue-500/15',
-  };
-  return (
-    <span className={`text-[10px] px-1.5 py-0.5 rounded ${styles[type] || 'text-text-muted bg-surface-raised'}`}>
-      {type}
-    </span>
-  );
+  return <Badge tone={JOB_TYPE_TONES[type] ?? 'neutral'}>{type}</Badge>;
 }
 
 export function StatusBadge({ status }: { status: string | null | undefined }) {
   if (status === 'success') {
-    return <span className="flex items-center gap-1 text-hue-emerald"><CheckCircle2 size={12} /> ok</span>;
+    return <span className="flex items-center gap-1 text-success"><CheckCircle2 size={12} /> ok</span>;
   }
   if (status === 'error') {
-    return <span className="flex items-center gap-1 text-hue-red"><XCircle size={12} /> error</span>;
+    return <span className="flex items-center gap-1 text-error"><XCircle size={12} /> error</span>;
   }
   if (!status) {
     return (
-      <span className="flex items-center gap-1 text-hue-amber">
+      <span className="flex items-center gap-1 text-warning">
         <Loader2 size={12} className="animate-spin" /> running
       </span>
     );
@@ -52,7 +56,7 @@ export function ChatLink({ sessionId, small = false, label }: { sessionId: strin
       onAuxClick={(e) => e.stopPropagation()}
       className={`flex items-center gap-1 rounded transition-colors cursor-pointer shrink-0
         text-text-muted hover:text-text-secondary hover:bg-surface-raised
-        ${small ? 'p-1' : 'px-2 py-1.5 text-[12px]'}`}
+        ${small ? 'p-1' : 'px-2 py-1.5 text-xs'}`}
       title="Open chat">
       <MessageSquare size={small ? 12 : 14} />
       {!small && <span>{label || 'Chat'}</span>}
@@ -70,16 +74,25 @@ export function TriggerButton({ jobId, small = false }: { jobId: string; small?:
     await triggerJob(jobId);
   };
 
+  const glyph = isTriggering
+    ? <Loader2 size={small ? 12 : 14} className="animate-spin" />
+    : <Play size={small ? 12 : 14} />;
+
+  if (small) {
+    return (
+      <IconButton label="Trigger now" size="xs" onClick={handleClick}
+        disabled={isTriggering} onAuxClick={(e) => e.stopPropagation()}>
+        {glyph}
+      </IconButton>
+    );
+  }
+
   return (
-    <button onClick={handleClick} disabled={isTriggering}
-      onAuxClick={(e) => e.stopPropagation()}
-      className={`flex items-center gap-1 rounded transition-colors cursor-pointer shrink-0
-        ${isTriggering ? 'text-text-faint cursor-not-allowed' : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'}
-        ${small ? 'p-1' : 'px-2 py-1.5 text-[12px]'}`}
-      title="Trigger now">
-      {isTriggering ? <Loader2 size={small ? 12 : 14} className="animate-spin" /> : <Play size={small ? 12 : 14} />}
-      {!small && !isTriggering && <span>Run</span>}
-    </button>
+    <Button variant="subtle" onClick={handleClick} disabled={isTriggering}
+      onAuxClick={(e) => e.stopPropagation()} title="Trigger now">
+      {glyph}
+      {!isTriggering && <span>Run</span>}
+    </Button>
   );
 }
 
@@ -94,12 +107,10 @@ export function RotateButton({ jobId }: { jobId: string }) {
   };
 
   return (
-    <button onClick={handleClick} disabled={isRotating}
-      className={`flex items-center gap-1 rounded transition-colors cursor-pointer px-2 py-1.5 text-[12px]
-        ${isRotating ? 'text-text-faint cursor-not-allowed' : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'}`}
+    <Button variant="subtle" onClick={handleClick} disabled={isRotating}
       title="Start a fresh chat (current chat is kept)">
       {isRotating ? <Loader2 size={14} className="animate-spin" /> : <RotateCw size={14} />}
       {!isRotating && <span>Rotate</span>}
-    </button>
+    </Button>
   );
 }
diff --git a/web/src/components/ExternalAgents/ExternalAgentsSection.tsx b/web/src/components/ExternalAgents/ExternalAgentsSection.tsx
index c791bd51..fbc948d3 100644
--- a/web/src/components/ExternalAgents/ExternalAgentsSection.tsx
+++ b/web/src/components/ExternalAgents/ExternalAgentsSection.tsx
@@ -13,6 +13,8 @@
  */
 
 import { useEffect, useState, useCallback } from 'react';
+import { api } from '../../api/client';
+import { Badge, Button } from '../ui';
 import {
   Activity,
   AlertCircle,
@@ -25,8 +27,7 @@ import {
   RefreshCw,
   Trash2,
   XCircle,
-} from 'lucide-react';
-import { api } from '../../api/client';
+} from '../ui/icons';
 
 type AgentFile = {
   path: string;
@@ -139,7 +140,7 @@ export function ExternalAgentsSection() {
   if (loading) {
     return (
       <section>
-        <h2 className="text-[14px] font-medium text-text-muted mb-3 flex items-center gap-2">
+        <h2 className="text-sm font-medium text-text-muted mb-3 flex items-center gap-2">
           <ExternalLink size={14} /> External Agents
         </h2>
         <div className="text-text-faint text-sm">Loading...</div>
@@ -150,10 +151,10 @@ export function ExternalAgentsSection() {
   if (!state) {
     return (
       <section>
-        <h2 className="text-[14px] font-medium text-text-muted mb-3 flex items-center gap-2">
+        <h2 className="text-sm font-medium text-text-muted mb-3 flex items-center gap-2">
           <ExternalLink size={14} /> External Agents
         </h2>
-        <div className="text-hue-red text-sm">Failed to load</div>
+        <div className="text-error text-sm">Failed to load</div>
       </section>
     );
   }
@@ -165,21 +166,17 @@ export function ExternalAgentsSection() {
   return (
     <section>
       <div className="flex items-center justify-between mb-3">
-        <h2 className="text-[14px] font-medium text-text-muted flex items-center gap-2">
+        <h2 className="text-sm font-medium text-text-muted flex items-center gap-2">
           <ExternalLink size={14} /> External Agents
-          <span className="text-text-faint text-[11px]">
+          <span className="text-text-faint text-xs">
             (sync every {state.sync_interval_minutes}m, policy: {state.conflict_policy})
           </span>
         </h2>
         {configured.length > 0 && (
-          <button
+          <Button
+            size="md"
             onClick={onSyncAll}
             disabled={syncing}
-            className={`flex items-center gap-1.5 px-3 py-2 text-[12px] bg-surface border border-border-subtle rounded-lg cursor-pointer transition-colors shrink-0 ${
-              syncing
-                ? 'text-text-faint cursor-not-allowed'
-                : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'
-            }`}
             title="Re-render every configured agent's memory bundle"
           >
             {syncing ? (
@@ -191,7 +188,7 @@ export function ExternalAgentsSection() {
                 <RefreshCw size={12} /> Sync now
               </>
             )}
-          </button>
+          </Button>
         )}
       </div>
 
@@ -215,14 +212,14 @@ export function ExternalAgentsSection() {
       </div>
 
       {unconfigured.length > 0 && (
-        <div className="mt-4 text-[12px] text-text-faint">
+        <div className="mt-4 text-xs text-text-faint">
           <div className="mb-1">Available but not configured:</div>
           <ul className="list-disc pl-5 space-y-0.5">
             {unconfigured.map((a) => (
               <li key={a.name}>
                 {a.display_name}
                 {a.cli_installed && (
-                  <span className="text-hue-emerald"> (CLI installed)</span>
+                  <span className="text-success"> (CLI installed)</span>
                 )}
               </li>
             ))}
@@ -255,19 +252,15 @@ function AgentCard({
     <div className="border border-border-subtle rounded-lg p-4 bg-surface">
       <div className="flex items-start justify-between mb-3">
         <div>
-          <div className="flex items-center gap-2 text-[14px] font-medium text-text-secondary">
+          <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             {agent.display_name ?? agent.name}
-            {!enabled && (
-              <span className="text-[11px] text-text-faint border border-border-subtle px-1.5 py-0.5 rounded">
-                paused
-              </span>
-            )}
+            {!enabled && <Badge size="sm">paused</Badge>}
           </div>
-          <div className="text-[11px] text-text-dim mt-1 flex items-center gap-2 flex-wrap">
+          <div className="text-xs text-text-dim mt-1 flex items-center gap-2 flex-wrap">
             <span className="flex items-center gap-1">
               {installed ? (
                 <>
-                  <CheckCircle2 size={11} className="text-hue-emerald" />
+                  <CheckCircle2 size={11} className="text-success" />
                   CLI installed
                   {agent.cli_version && (
                     <span className="text-text-faint">({agent.cli_version})</span>
@@ -288,14 +281,10 @@ function AgentCard({
         </div>
 
         <div className="flex items-center gap-1.5 shrink-0">
-          <button
+          <Button
+            size="xs"
             onClick={() => onToggle(agent.name, !enabled)}
             disabled={busy}
-            className={`flex items-center gap-1 px-2 py-1 text-[11px] border border-border-subtle rounded transition-colors ${
-              busy
-                ? 'text-text-faint cursor-not-allowed'
-                : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised cursor-pointer'
-            }`}
             title={enabled ? 'Pause sync for this agent' : 'Resume sync'}
           >
             {enabled ? (
@@ -307,24 +296,24 @@ function AgentCard({
                 <Play size={11} /> Resume
               </>
             )}
-          </button>
-          <button
+          </Button>
+          {/* `dangerGhost`, not `danger`: this sits on a card that is repeated
+              once per agent, and a red-at-rest button on every one of them
+              reads as an alarm rather than an action. */}
+          <Button
+            variant="dangerGhost"
+            size="xs"
             onClick={() => onRemove(agent.name)}
             disabled={busy}
-            className={`flex items-center gap-1 px-2 py-1 text-[11px] border border-border-subtle rounded transition-colors ${
-              busy
-                ? 'text-text-faint cursor-not-allowed'
-                : 'text-hue-red/80 hover:text-hue-red hover:bg-surface-raised cursor-pointer'
-            }`}
             title="Remove from sync (files on disk are left intact)"
           >
             <Trash2 size={11} /> Remove
-          </button>
+          </Button>
         </div>
       </div>
 
       {agent.last_error && (
-        <div className="text-[11px] text-hue-red flex items-start gap-1.5 mb-3">
+        <div className="text-xs text-error flex items-start gap-1.5 mb-3">
           <AlertCircle size={11} className="mt-0.5 shrink-0" />
           <span className="break-all">{agent.last_error}</span>
         </div>
@@ -335,7 +324,7 @@ function AgentCard({
           {files.map((f) => (
             <div
               key={f.path}
-              className="flex items-center justify-between gap-3 text-[11px]"
+              className="flex items-center justify-between gap-3 text-xs"
             >
               <div className="flex items-center gap-1.5 min-w-0 flex-1">
                 <FileText size={11} className="text-text-faint shrink-0" />
@@ -348,11 +337,11 @@ function AgentCard({
                 {f.skipped ? (
                   <span className="text-text-faint">unchanged</span>
                 ) : f.error ? (
-                  <span className="text-hue-red flex items-center gap-1">
+                  <span className="text-error flex items-center gap-1">
                     <XCircle size={11} /> error
                   </span>
                 ) : f.written_at ? (
-                  <span className="text-hue-emerald flex items-center gap-1">
+                  <span className="text-success flex items-center gap-1">
                     <CheckCircle2 size={11} /> {relativeTime(f.written_at)}
                   </span>
                 ) : null}
diff --git a/web/src/components/Files/EditorTabBar.tsx b/web/src/components/Files/EditorTabBar.tsx
index 5c9aed5b..3df12212 100644
--- a/web/src/components/Files/EditorTabBar.tsx
+++ b/web/src/components/Files/EditorTabBar.tsx
@@ -1,4 +1,5 @@
-import { X } from 'lucide-react';
+import { IconButton } from '../ui';
+import { X } from '../ui/icons';
 
 interface OpenFile {
   path: string;
@@ -19,7 +20,7 @@ export function EditorTabBar({ files, activePath, onSelect, onClose }: {
       {files.map(f => (
         <div
           key={f.path}
-          className={`flex items-center gap-1.5 px-3 py-2 text-[13px] cursor-pointer border-r border-border-subtle shrink-0
+          className={`flex items-center gap-1.5 px-3 py-2 text-sm cursor-pointer border-r border-border-subtle shrink-0
             ${f.path === activePath
               ? 'bg-bg text-text border-b-2 border-b-accent'
               : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'
@@ -28,12 +29,15 @@ export function EditorTabBar({ files, activePath, onSelect, onClose }: {
         >
           <span>{f.name}</span>
           {f.modified && <span className="w-1.5 h-1.5 rounded-full bg-accent" />}
-          <button
+          {/* Named per tab: a row of identical "Close" buttons tells a screen
+              reader nothing about which file each one closes. */}
+          <IconButton
+            label={`Close ${f.name}`}
+            size="xs"
             onClick={(e) => { e.stopPropagation(); onClose(f.path); }}
-            className="p-0.5 hover:bg-border-subtle rounded cursor-pointer"
           >
             <X size={12} />
-          </button>
+          </IconButton>
         </div>
       ))}
     </div>
diff --git a/web/src/components/Files/FileEditor.tsx b/web/src/components/Files/FileEditor.tsx
index aa418e2a..f773093d 100644
--- a/web/src/components/Files/FileEditor.tsx
+++ b/web/src/components/Files/FileEditor.tsx
@@ -1,6 +1,7 @@
 import { useState, useCallback } from 'react';
-import { Eye, Edit3, Lock, Save } from 'lucide-react';
 import { MarkdownContent } from '../Chat/MarkdownContent';
+import { Button, IconButton } from '../ui';
+import { Eye, Edit3, Lock, Save } from '../ui/icons';
 
 interface FileEditorProps {
   path: string;
@@ -28,39 +29,37 @@ export function FileEditor({ path, content, modified, readOnly, saving, onConten
     <div className="flex-1 flex flex-col min-h-0">
       {/* Toolbar */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border-subtle bg-bg shrink-0">
-        <span className="text-[13px] text-text-dim font-mono">{path}</span>
+        <span className="text-sm text-text-dim font-mono">{path}</span>
         <div className="flex items-center gap-2">
+          {/* A segmented pair. IconButton's required label gives each half an
+              accessible name, and `active` is the accent tint the rest of the
+              app uses for a current selection. `px-2.5` keeps the segments
+              wide — the `p-1` of size xs would halve them. */}
           <div className="flex bg-surface-raised rounded-md border border-border">
-            <button
-              onClick={() => setMode('edit')}
-              className={`px-2.5 py-1 text-[12px] rounded-l-md cursor-pointer
-                ${mode === 'edit' ? 'bg-surface-raised text-text' : 'text-text-dim hover:text-text-muted'}`}
+            <IconButton
+              label="Edit source" size="xs" className="px-2.5"
+              active={mode === 'edit'} onClick={() => setMode('edit')}
             >
               <Edit3 size={13} />
-            </button>
-            <button
-              onClick={() => setMode('preview')}
-              className={`px-2.5 py-1 text-[12px] rounded-r-md cursor-pointer
-                ${mode === 'preview' ? 'bg-surface-raised text-text' : 'text-text-dim hover:text-text-muted'}`}
+            </IconButton>
+            <IconButton
+              label="Preview rendered" size="xs" className="px-2.5"
+              active={mode === 'preview'} onClick={() => setMode('preview')}
             >
               <Eye size={13} />
-            </button>
+            </IconButton>
           </div>
           {readOnly && (
-            <span className="flex items-center gap-1.5 text-[12px] text-text-dim">
+            <span className="flex items-center gap-1.5 text-xs text-text-dim">
               <Lock size={12} />
               Read-only (lockdown)
             </span>
           )}
           {modified && !readOnly && (
-            <button
-              onClick={onSave}
-              disabled={saving}
-              className="flex items-center gap-1.5 px-3 py-1 text-[12px] bg-accent hover:bg-accent-hover text-white rounded-md cursor-pointer disabled:opacity-50"
-            >
+            <Button variant="primary" onClick={onSave} disabled={saving}>
               <Save size={12} />
               {saving ? 'Saving...' : 'Save'}
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -72,7 +71,11 @@ export function FileEditor({ path, content, modified, readOnly, saving, onConten
           onChange={(e) => onContentChange(e.target.value)}
           onKeyDown={handleKeyDown}
           readOnly={readOnly}
-          className="flex-1 p-4 bg-bg-sunken text-[14px] text-text outline-none resize-none editor-textarea"
+          // Not the `TextArea` primitive: `.editor-textarea` carries the mono
+          // stack and `tab-size: 2` that make this a code editor rather than a
+          // form field, and the primitive's field chrome (border, radius,
+          // raised surface, px-3 py-2) is wrong for a full-pane editor.
+          className="flex-1 p-4 bg-bg-sunken text-sm text-text outline-none resize-none editor-textarea"
           spellCheck={false}
         />
       ) : (
diff --git a/web/src/components/Files/FileTree.tsx b/web/src/components/Files/FileTree.tsx
index c23fa297..1d5b6fd6 100644
--- a/web/src/components/Files/FileTree.tsx
+++ b/web/src/components/Files/FileTree.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { ChevronRight, ChevronDown, File, Folder, FolderOpen, Lock } from 'lucide-react';
 import type { FileNode } from '../../utils/fileTree';
+import { ChevronRight, ChevronDown, File, Folder, FolderOpen, Lock } from '../ui/icons';
 
 function FileTreeNode({ node, depth, selectedPath, onSelect }: {
   node: FileNode;
@@ -13,9 +13,14 @@ function FileTreeNode({ node, depth, selectedPath, onSelect }: {
   if (node.type === 'directory') {
     return (
       <div>
+        {/* Native, like the app's other list rows. `Button`'s `xs`/`sm` sizes
+            pin the label to `text-xs`, and Tailwind emits `.text-xs` after
+            `.text-sm`, so a call site cannot ask for a 14px tree row; the one
+            size that does carry `text-sm` is `md`, whose `py-2` doubles the
+            height of a row in a tree that is often 200 deep. */}
         <button
           onClick={() => setExpanded(!expanded)}
-          className="flex items-center gap-1.5 w-full text-left px-2 py-1 text-[13px] text-text-muted hover:bg-surface-raised cursor-pointer rounded"
+          className="flex items-center gap-1.5 w-full text-left px-2 py-1 text-sm text-text-muted hover:bg-surface-raised cursor-pointer rounded"
           style={{ paddingLeft: depth * 16 + 8 }}
         >
           {expanded
@@ -45,7 +50,7 @@ function FileTreeNode({ node, depth, selectedPath, onSelect }: {
   return (
     <button
       onClick={() => onSelect(node.path)}
-      className={`flex items-center gap-1.5 w-full text-left px-2 py-1 text-[13px] cursor-pointer rounded
+      className={`flex items-center gap-1.5 w-full text-left px-2 py-1 text-sm cursor-pointer rounded
         ${isSelected ? 'bg-accent/10 text-text' : 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'}`}
       style={{ paddingLeft: depth * 16 + 20 }}
       title={node.readOnly ? `${node.name} — read-only (lockdown)` : node.name}
diff --git a/web/src/components/Layout/BottomNav.tsx b/web/src/components/Layout/BottomNav.tsx
index c29ec762..5203b211 100644
--- a/web/src/components/Layout/BottomNav.tsx
+++ b/web/src/components/Layout/BottomNav.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { MoreHorizontal, LogOut, X } from 'lucide-react';
 import { useAuthStore } from '../../stores/authStore';
 import { useNotificationStore } from '../../stores/notificationStore';
 import { ws } from '../../api/websocket';
 import { api } from '../../api/client';
-import { Drawer } from '../ui/Drawer';
+import { Drawer, IconButton } from '../ui';
+import { MoreHorizontal, LogOut, X } from '../ui/icons';
 import { ThemeToggle } from './ThemeToggle';
 import { NAV_ITEMS, PRIMARY_PATHS, type NavItem } from './navItems';
 
@@ -65,6 +65,11 @@ export function BottomNav() {
           const active = location.pathname.startsWith(path);
           const isNotifs = path === '/notifications';
           return (
+            // Native, like the nav rail's cells and for the same reason: a tab
+            // bar cell is a flexed column of glyph-over-label whose geometry is
+            // the component, not the button. Keeping both navs on the same
+            // shape means the phone and the desktop agree on what a current
+            // destination looks like. See NavRail for the ordering detail.
             <button
               key={path}
               onClick={() => go(path)}
@@ -75,9 +80,14 @@ export function BottomNav() {
               }`}
             >
               <Icon size={20} />
-              <span className="text-[10px]">{label}</span>
+              {/* leading-none: the 14px line-height of text-2xs would otherwise
+                  push the pair off-centre in the 56px cell. */}
+              <span className="text-2xs leading-none">{label}</span>
+              {/* bg-error-solid, not bg-error — see the matching badge in
+                  NavRail. The bare token is a feedback *foreground*, pale in
+                  dark mode, giving 1.62:1 under white text. */}
               {isNotifs && pendingCount > 0 && (
-                <span className="absolute right-1/2 top-1.5 flex h-4 w-4 translate-x-3 items-center justify-center rounded-full bg-red-500 text-[9px] font-medium text-white">
+                <span className="absolute right-1/2 top-1.5 flex h-4 w-4 translate-x-3 items-center justify-center rounded-full bg-error-solid text-2xs font-medium leading-none text-white">
                   {pendingCount > 9 ? '9+' : pendingCount}
                 </span>
               )}
@@ -98,7 +108,7 @@ export function BottomNav() {
           }`}
         >
           <MoreHorizontal size={20} />
-          <span className="text-[10px]">More</span>
+          <span className="text-2xs leading-none">More</span>
         </button>
       </nav>
 
@@ -109,21 +119,23 @@ export function BottomNav() {
           <span className="text-sm font-medium">More</span>
           <div className="flex items-center gap-3">
             <span
-              className={`h-2 w-2 rounded-full ${ws.connected ? 'bg-emerald-400' : 'bg-red-400'}`}
+              className={`h-2 w-2 rounded-full ${ws.connected ? 'bg-success' : 'bg-error'}`}
               title={ws.connected ? 'Connected' : 'Disconnected'}
             />
             <ThemeToggle />
             {/* Escape closes it too, but only this is discoverable. */}
-            <button
-              onClick={() => setMoreOpen(false)}
-              aria-label="Close menu"
-              className="cursor-pointer text-text-faint transition-colors hover:text-text-muted"
-            >
+            <IconButton label="Close menu" size="xs" onClick={() => setMoreOpen(false)}>
               <X size={16} />
-            </button>
+            </IconButton>
           </div>
         </div>
 
+        {/* Native, for a different reason from the tab cells above: `Button`'s
+            largest size is `px-3 py-2`, which on a phone drops these rows from
+            a 44px touch target to ~36px. Setting `px-4 py-3` from the call
+            site does work today — but only because Tailwind happens to emit
+            the larger value of a utility later, which is not a rule to build a
+            touch target on. */}
         <div className="flex-1 overflow-y-auto py-1">
           {overflow.map(({ path, icon: Icon, label }) => {
             const active = location.pathname.startsWith(path);
diff --git a/web/src/components/Layout/NavRail.tsx b/web/src/components/Layout/NavRail.tsx
index fe52d8cb..144c286b 100644
--- a/web/src/components/Layout/NavRail.tsx
+++ b/web/src/components/Layout/NavRail.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { LogOut } from 'lucide-react';
 import { useAuthStore } from '../../stores/authStore';
 import { useNotificationStore } from '../../stores/notificationStore';
 import { ws } from '../../api/websocket';
 import { api } from '../../api/client';
+import { IconButton } from '../ui';
+import { LogOut } from '../ui/icons';
 import { ThemeToggle } from './ThemeToggle';
 import { NAV_ITEMS } from './navItems';
 
@@ -38,6 +39,15 @@ export function NavRail() {
           const active = location.pathname.startsWith(path);
           const isNotifs = path === '/notifications';
           return (
+            // A native button, not `Button`/`IconButton`: this is a 40×40 cell
+            // holding an icon *above* a label, and every `Button` size carries
+            // at least `px-2`. Tailwind emits the values of one utility in
+            // ascending order, so a call site's `px-0` loses to the variant's
+            // `px-2` at equal specificity — the padding cannot be removed, and
+            // 40px minus 16px does not fit the word "Notifs".
+            //
+            // The active treatment below is `Button variant="subtle" active`'s,
+            // spelled out, so the two agree on what "current" looks like.
             <button
               key={path}
               onClick={() => navigate(path)}
@@ -49,9 +59,15 @@ export function NavRail() {
               title={label}
             >
               <Icon size={18} />
-              <span className="text-[9px]">{label}</span>
+              {/* 10px/14px: the label has to clear the 18px glyph inside 40px. */}
+              <span className="text-2xs leading-none">{label}</span>
+              {/* bg-error-solid, not bg-error. The bare status token is Click
+                  UI's feedback *foreground* — pale #ffbaba in dark — so white
+                  on it is 1.62:1. `-solid` is a theme-independent ramp entry
+                  (#c10000, 6.43:1 both ways). The plain token is still right
+                  for the connection dot, which carries no text. */}
               {isNotifs && pendingCount > 0 && (
-                <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-red-500 rounded-full text-[9px] text-white flex items-center justify-center font-medium">
+                <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-error-solid rounded-full text-2xs leading-none text-white flex items-center justify-center font-medium">
                   {pendingCount > 9 ? '9+' : pendingCount}
                 </span>
               )}
@@ -61,16 +77,12 @@ export function NavRail() {
       </div>
 
       <div className="flex flex-col items-center gap-2">
-        <div className={`w-2 h-2 rounded-full ${ws.connected ? 'bg-emerald-400' : 'bg-red-400'}`}
+        <div className={`w-2 h-2 rounded-full ${ws.connected ? 'bg-success' : 'bg-error'}`}
              title={ws.connected ? 'Connected' : 'Disconnected'} />
         <ThemeToggle />
-        <button
-          onClick={logout}
-          className="w-10 h-10 rounded-lg flex items-center justify-center text-text-faint hover:text-text-muted hover:bg-surface-hover cursor-pointer"
-          title="Logout"
-        >
+        <IconButton label="Logout" size="md" onClick={logout}>
           <LogOut size={16} />
-        </button>
+        </IconButton>
       </div>
     </div>
   );
diff --git a/web/src/components/Layout/ThemeToggle.tsx b/web/src/components/Layout/ThemeToggle.tsx
index 19cfd4e6..9f1f03d6 100644
--- a/web/src/components/Layout/ThemeToggle.tsx
+++ b/web/src/components/Layout/ThemeToggle.tsx
@@ -1,5 +1,6 @@
-import { Sun, Moon, Monitor } from 'lucide-react';
 import { useThemeStore } from '../../stores/themeStore';
+import { IconButton } from '../ui';
+import { Sun, Moon, Monitor } from '../ui/icons';
 
 const THEME_ICONS = {
   system: Monitor,
@@ -18,13 +19,13 @@ export function ThemeToggle() {
   const cycleTheme = useThemeStore((s) => s.cycleTheme);
   const Icon = THEME_ICONS[preference];
 
+  // The label names the *current* preference, which is what the cycle
+  // dark → light → system needs to expose: the glyph alone cannot say which of
+  // the three states you are in. IconButton spends it as both `title` and
+  // `aria-label`, so the control has an accessible name.
   return (
-    <button
-      onClick={cycleTheme}
-      className="w-10 h-10 rounded-lg flex items-center justify-center text-text-faint hover:text-text-muted hover:bg-surface-hover cursor-pointer transition-colors"
-      title={THEME_LABELS[preference]}
-    >
+    <IconButton label={THEME_LABELS[preference]} size="md" onClick={cycleTheme}>
       <Icon size={16} />
-    </button>
+    </IconButton>
   );
 }
diff --git a/web/src/components/Layout/navItems.ts b/web/src/components/Layout/navItems.ts
index 0ae0683e..12f7c911 100644
--- a/web/src/components/Layout/navItems.ts
+++ b/web/src/components/Layout/navItems.ts
@@ -1,11 +1,13 @@
 import {
   MessageSquare, FolderOpen, CheckSquare, Inbox, Activity, Brain, Clock,
-  Lightbulb, Sparkles, Bell, Plug, Workflow, Rocket,
-} from 'lucide-react';
+  Lightbulb, Sparkles, Bell, Plug, Workflow, Rocket, type Icon,
+} from '../ui/icons';
 
 export type NavItem = {
   path: string;
-  icon: typeof MessageSquare;
+  /** The destination's glyph. `Icon` is the shape every icon in `ui/icons`
+   *  has, so NavRail and BottomNav can both render it as `<Icon size={n}/>`. */
+  icon: Icon;
   label: string;
   /** Hidden unless the named feature is enabled. */
   feature?: 'ultracode';
diff --git a/web/src/components/Memory/MemoryBrowser.tsx b/web/src/components/Memory/MemoryBrowser.tsx
index c332fc4b..e29a3480 100644
--- a/web/src/components/Memory/MemoryBrowser.tsx
+++ b/web/src/components/Memory/MemoryBrowser.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { api } from '../../api/client';
+import { Button } from '../ui';
 
 interface MemFile {
   path: string;
@@ -78,31 +79,27 @@ export function MemoryBrowser() {
               <div className="flex gap-2">
                 {editing ? (
                   <>
-                    <button
-                      onClick={saveFile}
-                      disabled={saving}
-                      className="text-xs px-2 py-1 bg-accent rounded text-white cursor-pointer"
-                    >
+                    <Button variant="primary" size="xs" onClick={saveFile} disabled={saving}>
                       {saving ? 'Saving...' : 'Save'}
-                    </button>
-                    <button
+                    </Button>
+                    <Button
+                      size="xs"
                       onClick={() => { setEditing(false); openFile(selected); }}
-                      className="text-xs px-2 py-1 bg-surface-raised border border-border-subtle rounded text-text-muted cursor-pointer"
                     >
                       Cancel
-                    </button>
+                    </Button>
                   </>
                 ) : (
-                  <button
-                    onClick={() => setEditing(true)}
-                    className="text-xs px-2 py-1 bg-surface-raised border border-border-subtle rounded text-text-muted hover:text-text cursor-pointer"
-                  >
+                  <Button size="xs" onClick={() => setEditing(true)}>
                     Edit
-                  </button>
+                  </Button>
                 )}
               </div>
             </div>
             {editing ? (
+              // Native, like FileEditor's: the `TextArea` primitive is a form
+              // field (bordered, rounded, raised surface, px-3 py-2) and this
+              // is a full-height editing pane flush with the panel.
               <textarea
                 value={content}
                 onChange={(e) => setContent(e.target.value)}
diff --git a/web/src/components/Notifications/NotificationToast.tsx b/web/src/components/Notifications/NotificationToast.tsx
index 1f6c0fe1..0337fe73 100644
--- a/web/src/components/Notifications/NotificationToast.tsx
+++ b/web/src/components/Notifications/NotificationToast.tsx
@@ -1,14 +1,20 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Bell, HelpCircle, ShieldCheck, X } from 'lucide-react';
 import { useNotificationStore, type Notification } from '../../stores/notificationStore';
+import { Button, IconButton, type ButtonVariant } from '../ui';
+import { Bell, HelpCircle, ShieldCheck, X } from '../ui/icons';
 
 const TOAST_DURATION = 5000;
 
-const APPROVAL_QUICK_BUTTON_STYLES: Record<string, string> = {
-  approve: 'bg-emerald-400/15 text-hue-emerald border-emerald-400/30 hover:bg-emerald-400/25',
-  decline: 'bg-red-400/15 text-hue-red border-red-400/30 hover:bg-red-400/25',
-  snooze_24h: 'bg-border-subtle/40 text-text-muted border-border-subtle hover:bg-border-subtle/60',
+/**
+ * The three canonical approval answers, as button variants. `success` and
+ * `danger` are both *tinted*: `--theme-success` is a feedback foreground (pale
+ * mint in dark mode) and would be unreadable as a solid fill.
+ */
+const APPROVAL_QUICK_VARIANTS: Record<string, ButtonVariant> = {
+  approve: 'success',
+  decline: 'danger',
+  snooze_24h: 'secondary',
 };
 
 const APPROVAL_QUICK_LABELS: Record<string, string> = {
@@ -72,12 +78,13 @@ export function NotificationToast() {
                   >
                     {notif.title}
                   </p>
-                  <button
+                  <IconButton
+                    label="Dismiss"
+                    size="xs"
                     onClick={() => dismissToast(notif.id)}
-                    className="text-text-faint hover:text-text-muted shrink-0 cursor-pointer"
                   >
                     <X size={14} />
-                  </button>
+                  </IconButton>
                 </div>
                 {notif.body && (
                   <p className="text-xs text-text-muted mt-0.5 line-clamp-2">{notif.body}</p>
@@ -85,38 +92,40 @@ export function NotificationToast() {
                 {/* Quick answer buttons for questions */}
                 {isQuestion && options && notif.status === 'pending' && (
                   <div className="flex flex-wrap gap-1.5 mt-2">
+                    {/* The pill chip, in its selected treatment: an answer
+                        option is a choice among a set. */}
                     {options.slice(0, 3).map((opt: string) => (
-                      <button
+                      <Button
                         key={opt}
+                        variant="pill"
+                        size="xs"
+                        active
                         onClick={() => {
                           answerNotification(notif.id, opt);
                           dismissToast(notif.id);
                         }}
-                        className="px-2 py-0.5 bg-accent/15 text-accent rounded text-xs border border-accent/30 hover:bg-accent/25 cursor-pointer"
                       >
                         {opt}
-                      </button>
+                      </Button>
                     ))}
                   </div>
                 )}
                 {/* Quick action buttons for approvals */}
                 {isApproval && options && notif.status === 'pending' && (
                   <div className="flex flex-wrap gap-1.5 mt-2">
-                    {options.slice(0, 3).map((value: string) => {
-                      const style = APPROVAL_QUICK_BUTTON_STYLES[value] || 'bg-accent/15 text-accent border-accent/30 hover:bg-accent/25';
-                      return (
-                        <button
-                          key={value}
-                          onClick={() => {
-                            answerNotification(notif.id, value);
-                            dismissToast(notif.id);
-                          }}
-                          className={`px-2 py-0.5 rounded text-xs border cursor-pointer ${style}`}
-                        >
-                          {quickLabel(value, notif)}
-                        </button>
-                      );
-                    })}
+                    {options.slice(0, 3).map((value: string) => (
+                      <Button
+                        key={value}
+                        variant={APPROVAL_QUICK_VARIANTS[value] ?? 'secondary'}
+                        size="xs"
+                        onClick={() => {
+                          answerNotification(notif.id, value);
+                          dismissToast(notif.id);
+                        }}
+                      >
+                        {quickLabel(value, notif)}
+                      </Button>
+                    ))}
                   </div>
                 )}
               </div>
diff --git a/web/src/components/ShortcutsModal.tsx b/web/src/components/ShortcutsModal.tsx
index b1f88052..4839f283 100644
--- a/web/src/components/ShortcutsModal.tsx
+++ b/web/src/components/ShortcutsModal.tsx
@@ -76,7 +76,7 @@ export function ShortcutsModal() {
       <div className="p-5 space-y-5">
         {SECTIONS.map((section) => (
           <div key={section.title}>
-            <h3 className="text-[11px] uppercase tracking-wider text-text-faint font-medium mb-2">
+            <h3 className="text-xs uppercase tracking-wider text-text-faint font-medium mb-2">
               {section.title}
             </h3>
             <div className="space-y-1.5">
@@ -85,7 +85,7 @@ export function ShortcutsModal() {
                   key={idx}
                   className="flex items-center justify-between gap-4 py-1"
                 >
-                  <span className="text-[13px] text-text-secondary">{item.description}</span>
+                  <span className="text-sm text-text-secondary">{item.description}</span>
                   <Kbd combo={item.combo} label={item.label} />
                 </div>
               ))}
@@ -99,7 +99,7 @@ export function ShortcutsModal() {
 
 function Kbd({ combo, label }: { combo: ShortcutCombo; label?: string }) {
   return (
-    <kbd className="px-2 py-1 text-[11px] font-mono text-text-secondary bg-surface border border-border-subtle rounded shrink-0 tabular-nums">
+    <kbd className="px-2 py-1 text-xs leading-none font-mono text-text-secondary bg-surface border border-border-subtle rounded shrink-0 tabular-nums">
       {label ?? formatCombo(combo)}
     </kbd>
   );
diff --git a/web/src/components/Sources/renderers/EmailRenderer.tsx b/web/src/components/Sources/renderers/EmailRenderer.tsx
index 88fc7e30..642e5297 100644
--- a/web/src/components/Sources/renderers/EmailRenderer.tsx
+++ b/web/src/components/Sources/renderers/EmailRenderer.tsx
@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
+import { Button } from '../../ui';
 import { MarkdownRenderer } from './MarkdownRenderer';
 
 interface Props {
@@ -39,10 +40,19 @@ export function EmailRenderer({ content, rawContent, summary }: Props) {
     return <MarkdownRenderer content={content} />;
   }
 
-  // Inject base styles for dark-mode-friendly rendering.
-  // Many HTML emails have hardcoded light backgrounds — we let those render
-  // as-is since the iframe isolates them.  The base styles provide sensible
-  // defaults for emails without explicit styling.
+  // Base styles for the sandboxed document, deliberately light in BOTH themes.
+  //
+  // Not a token oversight: HTML email is authored against a white background,
+  // and a large share of it sets foreground colours (dark body text, dark table
+  // borders) without setting a background. Painting this document dark would
+  // leave that mail dark-on-dark and unreadable, which is worse than a light
+  // panel inside a dark page. The iframe is the isolation boundary that makes
+  // the choice safe: nothing here leaks into the app's palette, and the frame
+  // itself carries the app's border and radius.
+  //
+  // Consequence to keep in mind: `bg-white` on the frame below is load-bearing
+  // for the same reason — it stops a transparent-background email from
+  // rendering its dark text straight onto the app's dark surface.
   const styledHtml = `<!DOCTYPE html>
 <html><head><meta charset="utf-8"><style>
 body {
@@ -66,22 +76,13 @@ pre { white-space: pre-wrap; }
 
   return (
     <div>
-      {/* Toggle between HTML and text views */}
       <div className="flex items-center gap-1 mb-3">
-        <button
-          onClick={() => setShowHtml(true)}
-          className={`text-[12px] px-2 py-1 rounded transition-colors cursor-pointer
-            ${showHtml ? 'bg-accent/15 text-accent' : 'text-text-dim hover:text-text-muted'}`}
-        >
+        <Button variant="pill" size="xs" active={showHtml} onClick={() => setShowHtml(true)}>
           HTML
-        </button>
-        <button
-          onClick={() => setShowHtml(false)}
-          className={`text-[12px] px-2 py-1 rounded transition-colors cursor-pointer
-            ${!showHtml ? 'bg-accent/15 text-accent' : 'text-text-dim hover:text-text-muted'}`}
-        >
+        </Button>
+        <Button variant="pill" size="xs" active={!showHtml} onClick={() => setShowHtml(false)}>
           Text
-        </button>
+        </Button>
       </div>
 
       {showHtml ? (
diff --git a/web/src/components/Sources/renderers/GitHubRenderer.tsx b/web/src/components/Sources/renderers/GitHubRenderer.tsx
index f41b155e..11886b37 100644
--- a/web/src/components/Sources/renderers/GitHubRenderer.tsx
+++ b/web/src/components/Sources/renderers/GitHubRenderer.tsx
@@ -1,4 +1,5 @@
-import { Github, ExternalLink } from 'lucide-react';
+import { Badge } from '../../ui';
+import { Github, ExternalLink } from '../../ui/icons';
 import { MarkdownRenderer } from './MarkdownRenderer';
 
 interface Props {
@@ -21,21 +22,15 @@ export function GitHubRenderer({ content, metadata, summary: _summary }: Props)
         <div className="mb-4 p-3 bg-surface border border-border-subtle rounded-lg">
           <div className="flex items-center gap-2 mb-1 flex-wrap">
             <Github size={14} className="text-hue-purple shrink-0" />
-            <span className="text-[13px] text-text-secondary font-medium">{repoName}</span>
-            {subjectType && (
-              <span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-500/15 text-purple-600">
-                {subjectType}
-              </span>
-            )}
-            {reason && (
-              <span className="text-[10px] px-1.5 py-0.5 rounded bg-surface-raised text-text-muted">
-                {reason}
-              </span>
-            )}
+            <span className="text-sm text-text-secondary font-medium">{repoName}</span>
+            {/* Purple is GitHub's identity here, not a status — it matches the
+                `text-hue-purple` mark above it. */}
+            {subjectType && <Badge tone="purple">{subjectType}</Badge>}
+            {reason && <Badge>{reason}</Badge>}
           </div>
           {subjectUrl && (
             <a href={subjectUrl} target="_blank" rel="noopener noreferrer"
-              className="flex items-center gap-1 text-[12px] text-accent hover:text-link transition-colors">
+              className="flex items-center gap-1 text-xs text-accent hover:text-link transition-colors">
               <ExternalLink size={11} /> View on GitHub
             </a>
           )}
diff --git a/web/src/components/Sources/renderers/MarkdownRenderer.tsx b/web/src/components/Sources/renderers/MarkdownRenderer.tsx
index 7cf5c982..150ad48d 100644
--- a/web/src/components/Sources/renderers/MarkdownRenderer.tsx
+++ b/web/src/components/Sources/renderers/MarkdownRenderer.tsx
@@ -6,12 +6,20 @@ interface Props {
   muted?: boolean;
 }
 
+/**
+ * Styled by `.markdown-content` (index.css), the app's own markdown
+ * stylesheet, which the chat transcript uses too — so a GitHub notification
+ * and an agent message render the same way. `prose*` classes are not an
+ * option here: `@tailwindcss/typography` is not installed, so they generate no
+ * CSS at all.
+ *
+ * The base text colour stays on this element: `.markdown-content` colours
+ * links, blockquotes and code, but inherits the body colour, which is what
+ * `muted` is for.
+ */
 export function MarkdownRenderer({ content, muted = false }: Props) {
   return (
-    <div className={`prose prose-invert prose-sm max-w-none
-      prose-headings:text-text prose-a:text-accent prose-code:text-text-secondary
-      prose-pre:bg-surface prose-pre:border prose-pre:border-border-subtle
-      ${muted ? 'text-text-muted' : 'text-text-secondary'}`}>
+    <div className={`markdown-content ${muted ? 'text-text-muted' : 'text-text-secondary'}`}>
       <ReactMarkdown remarkPlugins={[remarkGfm]}>
         {content || '*(empty)*'}
       </ReactMarkdown>
diff --git a/web/src/components/Tasks/Board/BoardCard.tsx b/web/src/components/Tasks/Board/BoardCard.tsx
index 96802fed..245c78c8 100644
--- a/web/src/components/Tasks/Board/BoardCard.tsx
+++ b/web/src/components/Tasks/Board/BoardCard.tsx
@@ -1,9 +1,10 @@
 import { memo } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Calendar, Clock, ExternalLink, Hourglass } from 'lucide-react';
 import type { Task } from '../../../api/client';
 import { formatTimeAgo } from '../../../utils/dateGroups';
+import { Badge } from '../../ui';
+import { Calendar, Clock, ExternalLink, Hourglass } from '../../ui/icons';
 
 /**
  * Deadline urgency, as a token class rather than a raw colour so it tracks
@@ -79,29 +80,26 @@ function BoardCardInner({ task, statusSince, onOpen }: BoardCardProps) {
         hover:border-border cursor-pointer transition-colors
         ${isDragging ? 'opacity-40' : ''}`}
     >
-      <h3 className="text-[13px] font-medium text-text leading-snug line-clamp-2 mb-2">
+      <h3 className="text-sm font-medium text-text leading-snug line-clamp-2 mb-2">
         {task.title}
       </h3>
 
       {tags.length > 0 && (
         <div className="flex flex-wrap gap-1 mb-2">
           {tags.slice(0, 3).map((tag) => (
-            <span
-              key={tag}
-              className="px-1.5 py-0.5 text-[10px] rounded bg-surface-raised text-text-dim border border-border-subtle"
-            >
-              {tag}
-            </span>
+            <Badge key={tag}>{tag}</Badge>
           ))}
           {tags.length > 3 && (
-            <span className="px-1 py-0.5 text-[10px] text-text-faint">
+            <span className="px-1 py-0.5 text-2xs text-text-faint">
               +{tags.length - 3}
             </span>
           )}
         </div>
       )}
 
-      <div className="flex items-center gap-2.5 text-[11px] flex-wrap">
+      {/* `text-xs` carries a 1rem line-height, so the meta line — the densest
+          row on the board — pins its own leading. */}
+      <div className="flex items-center gap-2.5 text-xs leading-tight flex-wrap">
         {task.deadline && (
           <span className={`flex items-center gap-1 ${deadlineTone(task.deadline)}`}>
             <Calendar size={10} /> {task.deadline}
@@ -155,18 +153,13 @@ export function BoardCardOverlay({ task }: { task: Task }) {
   const tags = parseTags(task.tags);
   return (
     <div className="w-[272px] p-3 bg-surface border border-accent/50 rounded-lg shadow-xl rotate-2">
-      <h3 className="text-[13px] font-medium text-text leading-snug line-clamp-2">
+      <h3 className="text-sm font-medium text-text leading-snug line-clamp-2">
         {task.title}
       </h3>
       {tags.length > 0 && (
         <div className="flex flex-wrap gap-1 mt-2">
           {tags.slice(0, 3).map((tag) => (
-            <span
-              key={tag}
-              className="px-1.5 py-0.5 text-[10px] rounded bg-surface-raised text-text-dim border border-border-subtle"
-            >
-              {tag}
-            </span>
+            <Badge key={tag}>{tag}</Badge>
           ))}
         </div>
       )}
diff --git a/web/src/components/Tasks/Board/BoardColumn.tsx b/web/src/components/Tasks/Board/BoardColumn.tsx
index 69f5e908..d23c22e9 100644
--- a/web/src/components/Tasks/Board/BoardColumn.tsx
+++ b/web/src/components/Tasks/Board/BoardColumn.tsx
@@ -1,10 +1,11 @@
 import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { ChevronLeft, ChevronRight, GripVertical, Plus } from 'lucide-react';
 import { columnDragId } from './dropIntent';
 import type { Task, TaskStatusDef } from '../../../api/client';
 import type { Lane } from '../../../stores/taskStore';
+import { IconButton } from '../../ui';
+import { ChevronLeft, ChevronRight, GripVertical, Plus } from '../../ui/icons';
 import { BoardCard } from './BoardCard';
 
 export interface BoardColumnProps {
@@ -72,24 +73,23 @@ export function BoardColumn({
           ${isColumnDragging ? 'opacity-40' : ''}`}
       >
         {dragHandle}
-        <button
+        <IconButton
+          label={`Expand ${label} column`}
+          size="xs"
           onClick={() => onToggleCollapse(lane.status)}
-          className="text-text-faint hover:text-text-muted cursor-pointer"
-          aria-label={`Expand ${label} column`}
-          title={`Expand ${label}`}
         >
           <ChevronRight size={15} />
-        </button>
+        </IconButton>
         <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
         {/* Vertical rail: the label reads bottom-to-top so long status
             names stay legible instead of being truncated to a glyph. */}
         <span
-          className="text-[12px] font-medium text-text-secondary whitespace-nowrap"
+          className="text-xs font-medium text-text-secondary whitespace-nowrap"
           style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
         >
           {label}
         </span>
-        <span className="text-[11px] text-text-faint tabular-nums">{lane.total}</span>
+        <span className="text-xs text-text-faint tabular-nums">{lane.total}</span>
       </div>
     );
   }
@@ -105,29 +105,30 @@ export function BoardColumn({
         <div className="flex items-center gap-2">
           {dragHandle}
           <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: color }} />
-          <h2 className="text-[13px] font-semibold text-text-secondary truncate">{label}</h2>
-          <span className="text-[11px] text-text-faint tabular-nums">{lane.total}</span>
+          {/* The named type steps carry a line-height, so the header pins its
+              own — a lane header is chrome and must not grow at the cards'
+              expense. */}
+          <h2 className="text-sm leading-tight font-semibold text-text-secondary truncate">{label}</h2>
+          <span className="text-xs leading-tight text-text-faint tabular-nums">{lane.total}</span>
           <div className="ml-auto flex items-center gap-0.5">
-            <button
+            <IconButton
+              label={`New task in ${label}`}
+              size="xs"
               onClick={() => onCreate(lane.status)}
-              className="p-1 text-text-faint hover:text-text-muted cursor-pointer rounded"
-              aria-label={`New task in ${label}`}
-              title={`New task in ${label}`}
             >
               <Plus size={14} />
-            </button>
-            <button
+            </IconButton>
+            <IconButton
+              label={`Collapse ${label} column`}
+              size="xs"
               onClick={() => onToggleCollapse(lane.status)}
-              className="p-1 text-text-faint hover:text-text-muted cursor-pointer rounded"
-              aria-label={`Collapse ${label} column`}
-              title="Collapse"
             >
               <ChevronLeft size={14} />
-            </button>
+            </IconButton>
           </div>
         </div>
         {status?.description && (
-          <p className="mt-1 text-[11px] text-text-faint line-clamp-1" title={status.description}>
+          <p className="mt-1 text-xs leading-tight text-text-faint line-clamp-1" title={status.description}>
             {status.description}
           </p>
         )}
@@ -154,7 +155,7 @@ export function BoardColumn({
 
         {lane.tasks.length === 0 && (
           <div
-            className={`h-20 flex items-center justify-center text-[12px] rounded-lg border border-dashed
+            className={`h-20 flex items-center justify-center text-xs rounded-lg border border-dashed
               ${isOver
                 ? 'border-accent/40 text-accent'
                 : 'border-border-subtle text-text-faint'}`}
@@ -166,7 +167,7 @@ export function BoardColumn({
         {hidden > 0 && (
           // The lane is paginated server-side; say so rather than silently
           // showing a partial column whose count doesn't match its cards.
-          <p className="pt-1 pb-2 text-center text-[11px] text-text-faint">
+          <p className="pt-1 pb-2 text-center text-xs leading-tight text-text-faint">
             +{hidden} more — narrow the filters or use List view
           </p>
         )}
diff --git a/web/src/components/Tasks/Board/BoardFilterBar.tsx b/web/src/components/Tasks/Board/BoardFilterBar.tsx
index ebb48159..ae80cdeb 100644
--- a/web/src/components/Tasks/Board/BoardFilterBar.tsx
+++ b/web/src/components/Tasks/Board/BoardFilterBar.tsx
@@ -1,5 +1,6 @@
-import { Tag, X } from 'lucide-react';
 import { useTaskStore } from '../../../stores/taskStore';
+import { Button } from '../../ui';
+import { Tag, X } from '../../ui/icons';
 
 /** How many tag facets to offer before it stops being a filter bar. */
 const MAX_FACETS = 12;
@@ -29,27 +30,23 @@ export function BoardFilterBar() {
       {facets.map((tag) => {
         const active = tag.name === tagFilter;
         return (
-          <button
+          <Button
             key={tag.name}
-            onClick={() => setTagFilter(active ? '' : tag.name)}
+            variant="pill"
+            size="xs"
+            active={active}
             aria-pressed={active}
-            className={`shrink-0 px-2 py-0.5 text-[11px] rounded-full border cursor-pointer transition-colors
-              ${active
-                ? 'bg-accent/15 border-accent/40 text-accent'
-                : 'bg-surface-raised border-border-subtle text-text-dim hover:text-text-secondary hover:border-border'}`}
+            onClick={() => setTagFilter(active ? '' : tag.name)}
           >
             {tag.name}
-            <span className="ml-1 tabular-nums opacity-60">{tag.count}</span>
-          </button>
+            <span className="tabular-nums opacity-60">{tag.count}</span>
+          </Button>
         );
       })}
       {tagFilter && (
-        <button
-          onClick={() => setTagFilter('')}
-          className="shrink-0 flex items-center gap-1 px-2 py-0.5 text-[11px] text-text-faint hover:text-text-muted cursor-pointer"
-        >
+        <Button variant="ghost" size="xs" onClick={() => setTagFilter('')}>
           <X size={11} /> Clear
-        </button>
+        </Button>
       )}
     </div>
   );
diff --git a/web/src/components/Tasks/Board/TaskBoard.tsx b/web/src/components/Tasks/Board/TaskBoard.tsx
index 33230507..86d8f53b 100644
--- a/web/src/components/Tasks/Board/TaskBoard.tsx
+++ b/web/src/components/Tasks/Board/TaskBoard.tsx
@@ -142,7 +142,7 @@ export function TaskBoard({ onOpenTask }: { onOpenTask: (task: Task) => void })
   // itself were empty.
   if (searchQuery.trim() && lanes.every((lane) => lane.tasks.length === 0)) {
     return (
-      <div className="text-text-faint text-center py-10 text-[13px]">
+      <div className="text-text-faint text-center py-10 text-sm">
         No tasks matching &ldquo;{searchQuery.trim()}&rdquo;
       </div>
     );
@@ -151,7 +151,7 @@ export function TaskBoard({ onOpenTask }: { onOpenTask: (task: Task) => void })
   return (
     <>
       {boardError && (
-        <div className="mx-4 mb-2 px-3 py-2 text-[12px] text-hue-red bg-red-400/10 border border-red-400/20 rounded-lg">
+        <div className="mx-4 mb-2 px-3 py-2 text-xs text-error bg-error-bg border border-error-border rounded-lg">
           {boardError}
         </div>
       )}
@@ -188,7 +188,7 @@ export function TaskBoard({ onOpenTask }: { onOpenTask: (task: Task) => void })
         <DragOverlay dropAnimation={null}>
           {activeTask && <BoardCardOverlay task={activeTask} />}
           {activeColumn && (
-            <div className="w-[300px] px-3 py-2.5 bg-surface-raised border border-accent/50 rounded-xl shadow-xl text-[13px] font-semibold text-text-secondary">
+            <div className="w-[300px] px-3 py-2.5 bg-surface-raised border border-accent/50 rounded-xl shadow-xl text-sm leading-tight font-semibold text-text-secondary">
               {statusByName.get(activeColumn)?.label ?? activeColumn}
             </div>
           )}
diff --git a/web/src/components/Tasks/StatusControls.tsx b/web/src/components/Tasks/StatusControls.tsx
index cc990f22..8389443a 100644
--- a/web/src/components/Tasks/StatusControls.tsx
+++ b/web/src/components/Tasks/StatusControls.tsx
@@ -1,4 +1,5 @@
 import { useTaskStatusStore, statusBadgeStyle } from '../../stores/taskStatusStore';
+import { Badge, Select } from '../ui';
 
 /** Colored pill showing a task's status label (falls back to the raw name). */
 export function StatusBadge({ status, className = '' }: {
@@ -7,12 +8,12 @@ export function StatusBadge({ status, className = '' }: {
 }) {
   const meta = useTaskStatusStore((s) => s.statuses.find((x) => x.name === status));
   return (
-    <span
-      className={`px-2 py-0.5 rounded-full border ${className}`}
-      style={statusBadgeStyle(meta?.color)}
-    >
+    // The colour is a user-configured hex rather than a design token, so there
+    // is no utility class to name it and it has to be an inline style — which
+    // also puts it above `tone`'s classes without depending on their order.
+    <Badge size="sm" pill outline style={statusBadgeStyle(meta?.color)} className={className}>
       {meta?.label || status}
-    </span>
+    </Badge>
   );
 }
 
@@ -23,19 +24,17 @@ export function StatusSelect({ value, onChange, className = '' }: {
   className?: string;
 }) {
   const statuses = useTaskStatusStore((s) => s.statuses);
-  // Keep the current value selectable even if it's somehow not in the
-  // configured set (defensive — deletion is blocked while a status is in use).
-  const hasValue = statuses.some((s) => s.name === value);
   return (
-    <select
+    <Select
+      fieldSize="sm"
       value={value}
       onChange={(e) => onChange(e.target.value)}
+      // Keep the current value selectable even if it's somehow not in the
+      // configured set (defensive — deletion is blocked while a status is in
+      // use). `Select` renders an unmatched `value` as its own option rather
+      // than letting the control snap to — and then submit — option one.
+      options={statuses.map((s) => ({ value: s.name, label: s.label }))}
       className={className}
-    >
-      {!hasValue && value && <option value={value}>{value}</option>}
-      {statuses.map((s) => (
-        <option key={s.name} value={s.name}>{s.label}</option>
-      ))}
-    </select>
+    />
   );
 }
diff --git a/web/src/components/Tasks/TaskCard.tsx b/web/src/components/Tasks/TaskCard.tsx
index b7812a14..ee4e3d79 100644
--- a/web/src/components/Tasks/TaskCard.tsx
+++ b/web/src/components/Tasks/TaskCard.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { Calendar, Clock, ExternalLink } from 'lucide-react';
+import { Calendar, Clock, ExternalLink } from '../ui/icons';
 import type { Task } from '../../stores/taskStore';
 import { formatTimeAgo } from '../../utils/dateGroups';
 import { StatusBadge, StatusSelect } from './StatusControls';
@@ -23,11 +23,11 @@ export function TaskCard({ task, onStatusChange }: {
             phone   title / meta + controls
             ≥ sm    title + controls / meta                                */}
       <div className="flex flex-wrap items-start gap-x-3 gap-y-2">
-        <h3 className="font-medium text-[15px] text-text min-w-0 basis-full sm:basis-0 sm:flex-1 order-0">
+        <h3 className="font-medium text-base text-text min-w-0 basis-full sm:basis-0 sm:flex-1 order-0">
           {task.title}
         </h3>
 
-        <div className="flex items-center gap-3 text-[12px] min-w-0 order-2 sm:order-3 sm:basis-full">
+        <div className="flex items-center gap-3 text-xs min-w-0 order-2 sm:order-3 sm:basis-full">
           {/* Hidden on a phone: the select sitting beside it already names
               the status, and one value is not worth showing twice. */}
           <span className="hidden sm:flex">
@@ -60,6 +60,10 @@ export function TaskCard({ task, onStatusChange }: {
               href={task.source_url}
               target="_blank"
               rel="noopener noreferrer"
+              // A link, not a button, so not an `IconButton` — but the icon is
+              // `aria-hidden`, so the name has to be spelled out here.
+              title="Open source link"
+              aria-label="Open source link"
               className="p-1.5 text-text-faint hover:text-text-muted hover:bg-surface-hover rounded cursor-pointer"
             >
               <ExternalLink size={14} />
@@ -68,7 +72,6 @@ export function TaskCard({ task, onStatusChange }: {
           <StatusSelect
             value={task.status}
             onChange={(status) => onStatusChange(task.id, status)}
-            className="text-[12px] px-2 py-1 bg-surface-raised border border-border rounded text-text-muted outline-none cursor-pointer"
           />
         </div>
       </div>
diff --git a/web/src/components/Tasks/TaskCreateDialog.tsx b/web/src/components/Tasks/TaskCreateDialog.tsx
index e560d225..45b70175 100644
--- a/web/src/components/Tasks/TaskCreateDialog.tsx
+++ b/web/src/components/Tasks/TaskCreateDialog.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Modal } from '../ui/Modal';
+import { Button, Modal, TextArea, TextField } from '../ui';
 
 const FORM_ID = 'task-create-form';
 
@@ -26,52 +26,47 @@ export function TaskCreateDialog({ onClose, onCreate }: {
       closeOnBackdrop={false}
       footer={
         <>
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-[13px] text-text-muted hover:text-text-secondary cursor-pointer"
-          >
+          <Button variant="ghost" size="md" onClick={onClose}>
             Cancel
-          </button>
+          </Button>
           {/* Outside the <form>, associated by id — keeps the button in the
               modal's footer slot while Enter-to-submit still works. */}
-          <button
+          <Button
+            variant="primary"
+            size="md"
             type="submit"
             form={FORM_ID}
-            className="px-4 py-2 text-[13px] bg-accent hover:bg-accent-hover text-white rounded-lg cursor-pointer disabled:opacity-50"
             disabled={!title.trim()}
           >
             Create
-          </button>
+          </Button>
         </>
       }
     >
       <form id={FORM_ID} onSubmit={handleSubmit} className="p-5 space-y-4">
         <div>
-          <label className="block text-[12px] text-text-muted mb-1">Title</label>
-          <input
+          <label className="block text-xs text-text-muted mb-1">Title</label>
+          <TextField
             value={title}
             onChange={e => setTitle(e.target.value)}
             autoFocus
-            className="w-full px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[14px] text-text outline-none focus:border-accent/50"
           />
         </div>
         <div>
-          <label className="block text-[12px] text-text-muted mb-1">Details</label>
-          <textarea
+          <label className="block text-xs text-text-muted mb-1">Details</label>
+          <TextArea
             value={content}
             onChange={e => setContent(e.target.value)}
             rows={4}
-            className="w-full px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[14px] text-text outline-none focus:border-accent/50 resize-none"
           />
         </div>
         <div>
-          <label className="block text-[12px] text-text-muted mb-1">Deadline</label>
-          <input
+          <label className="block text-xs text-text-muted mb-1">Deadline</label>
+          <TextField
             type="date"
             value={deadline}
             onChange={e => setDeadline(e.target.value)}
-            className="px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[14px] text-text outline-none focus:border-accent/50"
+            fullWidth={false}
           />
         </div>
       </form>
diff --git a/web/src/components/Tasks/TaskDetailBody.tsx b/web/src/components/Tasks/TaskDetailBody.tsx
index 13f9b982..e3c30635 100644
--- a/web/src/components/Tasks/TaskDetailBody.tsx
+++ b/web/src/components/Tasks/TaskDetailBody.tsx
@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Calendar, Edit3, ExternalLink, Eye, History, Save } from 'lucide-react';
 import type { Task } from '../../api/client';
 import { useTaskStore } from '../../stores/taskStore';
+import { Button, IconButton } from '../ui';
+import { Calendar, Edit3, ExternalLink, Eye, History, Save } from '../ui/icons';
 import { StatusBadge, StatusSelect } from './StatusControls';
 import { MarkdownContent } from '../Chat/MarkdownContent';
 import { TaskTimeline } from './TaskTimeline';
@@ -58,12 +59,11 @@ export function TaskDetailBody({ task }: { task: Task }) {
 
   return (
     <div className="flex flex-col h-full min-h-0">
-      <div className="flex items-center gap-3 px-5 py-2.5 text-[12px] border-b border-border-subtle shrink-0 flex-wrap">
+      <div className="flex items-center gap-3 px-5 py-2.5 text-xs border-b border-border-subtle shrink-0 flex-wrap">
         <StatusBadge status={task.status} />
         <StatusSelect
           value={task.status}
           onChange={(status) => updateStatus(task.id, status)}
-          className="text-[12px] px-2 py-1 bg-surface-raised border border-border rounded text-text-muted outline-none cursor-pointer"
         />
         {task.deadline && (
           <span className="flex items-center gap-1 text-text-dim">
@@ -83,51 +83,48 @@ export function TaskDetailBody({ task }: { task: Task }) {
         )}
 
         <div className="ml-auto flex items-center gap-2">
-          <button
-            onClick={() => setShowHistory((v) => !v)}
+          <IconButton
+            label="Status history"
+            size="xs"
+            active={showHistory}
             aria-pressed={showHistory}
-            title="Status history"
-            aria-label="Status history"
-            className={`flex items-center gap-1 px-2 py-1 rounded-md cursor-pointer transition-colors
-              ${showHistory ? 'text-accent' : 'text-text-dim hover:text-text-muted'}`}
+            onClick={() => setShowHistory((v) => !v)}
           >
             <History size={13} />
-          </button>
+          </IconButton>
           {dirty && (
             <>
               {saveError && (
-                <span role="alert" className="text-[12px] text-hue-red">
+                <span role="alert" className="text-xs text-error">
                   Save failed — not saved yet.
                 </span>
               )}
-              <button
-                onClick={handleSave}
-                disabled={saving}
-                className="flex items-center gap-1.5 px-3 py-1 text-[12px] bg-accent hover:bg-accent-hover text-white rounded-md cursor-pointer disabled:opacity-50"
-              >
+              <Button variant="primary" size="xs" onClick={handleSave} disabled={saving}>
                 <Save size={12} /> {saving ? 'Saving...' : 'Save'}
-              </button>
+              </Button>
             </>
           )}
-          <div className="flex bg-surface-raised rounded-md border border-border">
-            <button
-              onClick={() => setMode('edit')}
+          {/* `overflow-hidden` so the segments' own radii are clipped by the
+              group rather than fought with a per-corner override. */}
+          <div className="flex bg-surface-raised rounded-md border border-border overflow-hidden">
+            <IconButton
+              label="Edit"
+              size="xs"
+              active={mode === 'edit'}
               aria-pressed={mode === 'edit'}
-              title="Edit"
-              className={`px-2.5 py-1 rounded-l-md cursor-pointer transition-colors
-                ${mode === 'edit' ? 'text-text' : 'text-text-dim hover:text-text-muted'}`}
+              onClick={() => setMode('edit')}
             >
               <Edit3 size={13} />
-            </button>
-            <button
-              onClick={() => setMode('preview')}
+            </IconButton>
+            <IconButton
+              label="Preview"
+              size="xs"
+              active={mode === 'preview'}
               aria-pressed={mode === 'preview'}
-              title="Preview"
-              className={`px-2.5 py-1 rounded-r-md cursor-pointer transition-colors
-                ${mode === 'preview' ? 'text-text' : 'text-text-dim hover:text-text-muted'}`}
+              onClick={() => setMode('preview')}
             >
               <Eye size={13} />
-            </button>
+            </IconButton>
           </div>
         </div>
       </div>
@@ -139,11 +136,19 @@ export function TaskDetailBody({ task }: { task: Task }) {
       )}
 
       {mode === 'edit' ? (
+        // Deliberately *not* the house `TextArea`. That primitive is a form
+        // field — `bg-surface-raised`, a border, a radius and `px-3 py-2` — and
+        // this is a full-bleed document pane that fills the panel and sits on
+        // the sunken surface. Its chrome cannot be undone from here either:
+        // Tailwind emits same-property utilities alphabetically, so
+        // `bg-bg-sunken` on the call site loses to the primitive's
+        // `bg-surface-raised` at equal specificity. The type scale below is the
+        // design system's; the box is this pane's own.
         <textarea
           value={localContent}
           onChange={(e) => { setLocalContent(e.target.value); setDirty(true); setSaveError(false); }}
           onKeyDown={handleKeyDown}
-          className="flex-1 min-h-0 p-5 bg-bg-sunken text-[13px] text-text font-mono leading-relaxed outline-none resize-none"
+          className="flex-1 min-h-0 p-5 bg-bg-sunken text-sm text-text font-mono leading-relaxed outline-none resize-none"
           spellCheck={false}
           placeholder="Task content..."
         />
diff --git a/web/src/components/Tasks/TaskDetailModal.tsx b/web/src/components/Tasks/TaskDetailModal.tsx
index 5a11bd24..decc4ec8 100644
--- a/web/src/components/Tasks/TaskDetailModal.tsx
+++ b/web/src/components/Tasks/TaskDetailModal.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Maximize2 } from 'lucide-react';
 import { useTaskStore } from '../../stores/taskStore';
 import { useTaskStatusStore } from '../../stores/taskStatusStore';
-import { Modal } from '../ui/Modal';
+import { IconButton, Modal } from '../ui';
+import { Maximize2 } from '../ui/icons';
 import { TaskDetailBody } from './TaskDetailBody';
 
 /**
@@ -48,14 +48,13 @@ export function TaskDetailModal() {
         <span className="flex items-center gap-2 min-w-0">
           <span className="truncate">{title}</span>
           {taskId && (
-            <button
+            <IconButton
+              label="Open as full page"
+              size="xs"
               onClick={() => navigate(`/tasks/${taskId}`, { replace: true })}
-              title="Open as full page"
-              aria-label="Open as full page"
-              className="shrink-0 text-text-faint hover:text-text-muted cursor-pointer"
             >
               <Maximize2 size={13} />
-            </button>
+            </IconButton>
           )}
         </span>
       }
@@ -66,10 +65,10 @@ export function TaskDetailModal() {
       className="h-[85vh] max-h-[85vh]"
     >
       {detailLoading && (
-        <div className="p-8 text-center text-text-faint text-[13px]">Loading...</div>
+        <div className="p-8 text-center text-text-faint text-sm">Loading...</div>
       )}
       {!detailLoading && !selectedTask && (
-        <div className="p-8 text-center text-text-faint text-[13px]">Task not found.</div>
+        <div className="p-8 text-center text-text-faint text-sm">Task not found.</div>
       )}
       {!detailLoading && selectedTask && <TaskDetailBody task={selectedTask} />}
     </Modal>
diff --git a/web/src/components/Tasks/TaskFilters.tsx b/web/src/components/Tasks/TaskFilters.tsx
index 470bf556..092495c6 100644
--- a/web/src/components/Tasks/TaskFilters.tsx
+++ b/web/src/components/Tasks/TaskFilters.tsx
@@ -1,4 +1,5 @@
 import { useTaskStatusStore } from '../../stores/taskStatusStore';
+import { Button } from '../ui';
 
 export function TaskFilters({ active, onChange }: {
   active: string;
@@ -13,17 +14,16 @@ export function TaskFilters({ active, onChange }: {
   return (
     <div className="flex gap-1">
       {filters.map(f => (
-        <button
+        <Button
           key={f.value || 'active'}
+          variant="pill"
+          size="sm"
+          active={active === f.value}
+          aria-pressed={active === f.value}
           onClick={() => onChange(f.value)}
-          className={`px-3 py-1.5 text-[13px] rounded-md cursor-pointer transition-colors
-            ${active === f.value
-              ? 'bg-accent/15 text-accent font-medium'
-              : 'text-text-dim hover:text-text-muted hover:bg-surface-raised'
-            }`}
         >
           {f.label}
-        </button>
+        </Button>
       ))}
     </div>
   );
diff --git a/web/src/components/Tasks/TaskStatusManager.tsx b/web/src/components/Tasks/TaskStatusManager.tsx
index 72b4b626..6229339a 100644
--- a/web/src/components/Tasks/TaskStatusManager.tsx
+++ b/web/src/components/Tasks/TaskStatusManager.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
-import { X, Plus, Trash2, Pencil, Check, Lock } from 'lucide-react';
 import {
   useTaskStatusStore,
   statusBadgeStyle,
   type TaskStatusDef,
 } from '../../stores/taskStatusStore';
-import { Modal } from '../ui/Modal';
+import { Badge, Button, IconButton, Modal, TextArea, TextField } from '../ui';
+import { X, Plus, Trash2, Pencil, Check, Lock } from '../ui/icons';
 
 const PALETTE = [
   '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e',
@@ -112,6 +112,9 @@ export function TaskStatusManager({ onClose }: { onClose: () => void }) {
           style={{ backgroundColor: color }}
           title="Pick a color"
         >
+          {/* A bare `<input>`, not `TextField`: it is invisible, stretched over
+              the swatch, and the swatch itself is the control. `TextField`'s
+              field chrome would be painted onto something with `opacity-0`. */}
           <input
             type="color"
             value={color}
@@ -119,50 +122,51 @@ export function TaskStatusManager({ onClose }: { onClose: () => void }) {
             className="absolute inset-0 opacity-0 cursor-pointer"
           />
         </label>
-        <input
+        <TextField
           value={name}
           onChange={e => setName(e.target.value)}
           placeholder="name (e.g. in_review)"
           autoFocus
-          className="flex-1 px-3 py-2 bg-surface border border-border-subtle rounded-lg text-[13px] text-text outline-none focus:border-accent/50"
+          fullWidth={false}
+          className="flex-1"
         />
-        <input
+        <TextField
           value={label}
           onChange={e => setLabel(e.target.value)}
           placeholder="Label (optional)"
-          className="flex-1 px-3 py-2 bg-surface border border-border-subtle rounded-lg text-[13px] text-text outline-none focus:border-accent/50"
+          fullWidth={false}
+          className="flex-1"
         />
       </div>
-      <textarea
+      <TextArea
         value={description}
         onChange={e => setDescription(e.target.value)}
         rows={2}
         placeholder="Description (optional)"
-        className="w-full px-3 py-2 bg-surface border border-border-subtle rounded-lg text-[13px] text-text outline-none focus:border-accent/50 resize-none"
       />
       <div className="flex justify-end gap-2">
-        <button
-          onClick={resetAdd}
-          className="px-3 py-1.5 text-[13px] text-text-muted hover:text-text cursor-pointer"
-        >
+        <Button variant="ghost" onClick={resetAdd}>
           Cancel
-        </button>
-        <button
+        </Button>
+        <Button
+          variant="primary"
           onClick={handleCreate}
           disabled={busy || !name.trim()}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-[13px] bg-accent hover:bg-accent-hover text-white rounded-lg cursor-pointer disabled:opacity-50"
         >
           <Plus size={14} /> Add status
-        </button>
+        </Button>
       </div>
     </div>
   ) : (
-    <button
+    // `accent` rather than a ghost carrying an accent class: a call site cannot
+    // recolour a variant (Tailwind orders colour utilities alphabetically), and
+    // this control is an accent-text affordance, not a selected one.
+    <Button
+      variant="accent"
       onClick={() => { setColor(randomColor()); setShowAdd(true); }}
-      className="flex items-center gap-1.5 px-3 py-1.5 text-[13px] text-accent hover:bg-accent/10 rounded-lg cursor-pointer"
     >
       <Plus size={14} /> New status
-    </button>
+    </Button>
   );
 
   return (
@@ -176,7 +180,7 @@ export function TaskStatusManager({ onClose }: { onClose: () => void }) {
     >
       <div className="p-5 space-y-2">
         {error && (
-          <div className="px-3 py-2 mb-1 text-[12px] text-hue-red bg-red-400/10 border border-red-400/20 rounded-lg">
+          <div className="px-3 py-2 mb-1 text-xs text-error bg-error-bg border border-error-border rounded-lg">
             {error}
           </div>
         )}
@@ -184,7 +188,8 @@ export function TaskStatusManager({ onClose }: { onClose: () => void }) {
           {statuses.map(s => (
             <div key={s.name} className="border border-border-subtle rounded-lg p-3">
               <div className="flex items-center gap-3">
-                {/* Color swatch — click to recolor */}
+                {/* Color swatch — click to recolor. Bare `<input>` for the
+                    same reason as the one in the add form above. */}
                 <label
                   className="relative w-6 h-6 rounded-full border border-border shrink-0 cursor-pointer"
                   style={{ backgroundColor: s.color }}
@@ -200,78 +205,87 @@ export function TaskStatusManager({ onClose }: { onClose: () => void }) {
 
                 <div className="min-w-0 flex-1">
                   {editing === s.name ? (
-                    <input
+                    <TextField
+                      fieldSize="sm"
                       value={editLabel}
                       onChange={e => setEditLabel(e.target.value)}
-                      className="w-full px-2 py-1 text-[13px] bg-surface border border-border-subtle rounded text-text outline-none focus:border-accent/50"
                       placeholder="Label"
                     />
                   ) : (
                     <div className="flex items-center gap-2">
-                      <span style={statusBadgeStyle(s.color)} className="px-2 py-0.5 rounded-full border text-[12px]">
+                      {/* User-configured hex, not a theme token — inline, as
+                          `Badge` leaves `style` open for. */}
+                      <Badge size="sm" pill outline style={statusBadgeStyle(s.color)}>
                         {s.label}
-                      </span>
-                      <code className="text-[11px] text-text-faint">{s.name}</code>
+                      </Badge>
+                      <code className="text-xs text-text-faint">{s.name}</code>
                       {!!s.is_system && (
-                        <span className="flex items-center gap-1 text-[10px] text-text-faint" title="Protected — cannot be deleted">
-                          <Lock size={10} /> protected
-                        </span>
+                        <Badge size="xs" title="Protected — cannot be deleted">
+                          <Lock size={10} />
+                          protected
+                        </Badge>
                       )}
                     </div>
                   )}
                   {editing !== s.name && s.description && (
-                    <div className="text-[12px] text-text-dim mt-1">{s.description}</div>
+                    <div className="text-xs text-text-dim mt-1">{s.description}</div>
                   )}
                 </div>
 
                 <div className="flex items-center gap-1 shrink-0">
                   {editing === s.name ? (
                     <>
-                      <button
+                      {/* `IconButton` has no success tone and a green class on
+                          the button would lose to the variant's own colour, so
+                          the hue goes on the icon — the house convention for a
+                          tinted control. */}
+                      <IconButton
+                        label="Save"
+                        size="xs"
                         onClick={() => saveEdit(s)}
                         disabled={busy}
-                        className="p-1.5 text-hue-green hover:bg-surface-hover rounded cursor-pointer disabled:opacity-50"
-                        title="Save"
                       >
-                        <Check size={14} />
-                      </button>
-                      <button
+                        <Check size={14} className="text-hue-green" />
+                      </IconButton>
+                      <IconButton
+                        label="Cancel"
+                        size="xs"
                         onClick={() => setEditing(null)}
-                        className="p-1.5 text-text-faint hover:bg-surface-hover rounded cursor-pointer"
-                        title="Cancel"
                       >
                         <X size={14} />
-                      </button>
+                      </IconButton>
                     </>
                   ) : (
                     <>
-                      <button
+                      <IconButton
+                        label="Edit label & description"
+                        size="xs"
                         onClick={() => beginEdit(s)}
-                        className="p-1.5 text-text-faint hover:text-text-muted hover:bg-surface-hover rounded cursor-pointer"
-                        title="Edit label & description"
                       >
                         <Pencil size={14} />
-                      </button>
-                      <button
+                      </IconButton>
+                      <IconButton
+                        label={s.is_system ? 'Protected status' : 'Delete'}
+                        size="xs"
+                        variant="dangerGhost"
                         onClick={() => handleDelete(s)}
                         disabled={!!s.is_system}
-                        className="p-1.5 text-text-faint hover:text-hue-red hover:bg-surface-hover rounded cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
-                        title={s.is_system ? 'Protected status' : 'Delete'}
                       >
                         <Trash2 size={14} />
-                      </button>
+                      </IconButton>
                     </>
                   )}
                 </div>
               </div>
 
               {editing === s.name && (
-                <textarea
+                <TextArea
+                  fieldSize="sm"
                   value={editDesc}
                   onChange={e => setEditDesc(e.target.value)}
                   rows={2}
                   placeholder="Description (optional)"
-                  className="mt-2 w-full px-2 py-1 text-[12px] bg-surface border border-border-subtle rounded text-text outline-none focus:border-accent/50 resize-none"
+                  className="mt-2"
                 />
               )}
             </div>
diff --git a/web/src/components/Tasks/TaskTimeline.tsx b/web/src/components/Tasks/TaskTimeline.tsx
index b98544ae..78f39376 100644
--- a/web/src/components/Tasks/TaskTimeline.tsx
+++ b/web/src/components/Tasks/TaskTimeline.tsx
@@ -37,12 +37,12 @@ export function TaskTimeline({ taskId, currentStatus }: {
   }, [taskId]);
 
   if (events === null) {
-    return <p className="text-[12px] text-text-faint">Loading history...</p>;
+    return <p className="text-xs text-text-faint">Loading history...</p>;
   }
   if (events.length === 0) {
     // Tasks that last changed status before v044 have no history, and
     // inventing one would be worse than saying so.
-    return <p className="text-[12px] text-text-faint">No status history recorded.</p>;
+    return <p className="text-xs text-text-faint">No status history recorded.</p>;
   }
 
   const nowIso = new Date().toISOString();
@@ -54,7 +54,7 @@ export function TaskTimeline({ taskId, currentStatus }: {
         const dwell = span(event.created_at, next?.created_at ?? nowIso);
         const isCurrent = !next && event.to_status === currentStatus;
         return (
-          <li key={event.id} className="flex items-start gap-2.5 text-[12px]">
+          <li key={event.id} className="flex items-start gap-2.5 text-xs">
             <span
               className={`mt-1 w-1.5 h-1.5 rounded-full shrink-0
                 ${isCurrent ? 'bg-accent' : 'bg-border'}`}
diff --git a/web/src/components/ui/Badge.tsx b/web/src/components/ui/Badge.tsx
new file mode 100644
index 00000000..a385e02b
--- /dev/null
+++ b/web/src/components/ui/Badge.tsx
@@ -0,0 +1,96 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { overridable } from './styles';
+
+/**
+ * A status chip.
+ *
+ * `tone` uses the `hue-*` and status tokens rather than stock Tailwind colours
+ * (`text-emerald-400`, `bg-red-500/15`): stock colours are dark-theme values
+ * that do not move when the light theme is on, and the tokens do, so every tone
+ * here is theme-adaptive by construction.
+ *
+ * Not Click UI's `Badge`: that one takes its content as a `text` prop with a
+ * `state` from a fixed semantic set, and several of these badges are coloured
+ * from a user-configured hex — task statuses are editable in the UI. `style`
+ * stays open for exactly that case.
+ */
+
+export type BadgeTone =
+  | 'neutral'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'purple';
+
+/**
+ * The four tones that mean *outcome* use the status tokens; the three that mean
+ * *identity* use hue tokens.
+ *
+ * A chip saying "failed" and a banner saying "failed" must be the same red, so
+ * the outcome tones follow the status tokens. Those are also the pairs Click UI
+ * designed and the pairs we have measured — success 10.5:1 dark / 7.3:1 light,
+ * warning 5.7 / 5.3, danger 8.6 / 5.1, info 7.2 / 6.2.
+ *
+ * `accent`, `purple` and `neutral` label a *kind* of thing (a plan type, a
+ * skill, a transport), not how something went, and there is no status token
+ * that means "purple".
+ *
+ * `purple` pairs a hue with a 15% tint of itself. `hue-purple` over its own
+ * tint measures 3.93:1 in dark (3.68 on a raised surface), so the foreground is
+ * `hue-violet`: the same ramp two steps lighter — the step index.css keeps
+ * lighter precisely because it is the one used under an alpha modifier. Over
+ * the same tint that reads 5.72 / 5.37 dark and 5.00 / 4.59 light (surface /
+ * raised).
+ */
+const TONES: Record<BadgeTone, string> = {
+  neutral: 'text-text-muted bg-border-subtle',
+  accent: 'text-accent bg-accent/15',
+  success: 'text-success bg-success-bg',
+  warning: 'text-warning bg-warning-bg',
+  danger: 'text-error bg-error-bg',
+  info: 'text-info bg-info-bg',
+  purple: 'text-hue-violet bg-hue-purple/15',
+};
+
+export type BadgeSize = 'xs' | 'sm';
+
+const SIZES: Record<BadgeSize, string> = {
+  xs: 'text-2xs px-1.5 py-0.5 gap-1',
+  sm: 'text-xs px-2 py-0.5 gap-1',
+};
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: BadgeTone;
+  size?: BadgeSize;
+  /** Fully rounded rather than the default small radius. */
+  pill?: boolean;
+  /** Hairline border in the tone's colour, for badges on a busy background. */
+  outline?: boolean;
+  children?: ReactNode;
+}
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  { tone = 'neutral', size = 'xs', pill = false, outline = false, className, children, ...rest },
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      className={overridable(
+        [
+          'inline-flex items-center font-medium whitespace-nowrap',
+          SIZES[size],
+          TONES[tone],
+          pill ? 'rounded-full' : 'rounded',
+          outline && 'border border-current/25',
+        ],
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+});
diff --git a/web/src/components/ui/Button.test.tsx b/web/src/components/ui/Button.test.tsx
new file mode 100644
index 00000000..d07542f2
--- /dev/null
+++ b/web/src/components/ui/Button.test.tsx
@@ -0,0 +1,367 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Badge } from './Badge';
+import { Button, type ButtonVariant } from './Button';
+import { Checkbox } from './Checkbox';
+import { IconButton, type IconButtonVariant } from './IconButton';
+import { Select } from './Select';
+import { overridable } from './styles';
+import { TextArea, TextField } from './TextField';
+
+/**
+ * These specs hold one rule that no other check can see: `tsc`, eslint and the
+ * build all pass a class collision straight through.
+ *
+ * Tailwind v4 emits same-property utilities in alphabetical order of class
+ * name. Between two colour classes on one element, the winner is therefore the
+ * later-*sorting* name — not the one written last in the `class` attribute, and
+ * not the one from the "more specific" lookup table. `.text-accent` sorts
+ * before every other colour token in this app, so a selected treatment appended
+ * after a coloured base loses.
+ *
+ * None of that is visible in jsdom, which applies no CSS at all. What can be
+ * asserted is the structural rule that makes the ordering irrelevant: an
+ * element must never carry two classes that set the same property.
+ */
+
+/** Classes that set `color`. The `text-xs`/`text-sm` steps set size, not colour. */
+function textColours(el: Element): string[] {
+  return [...el.classList].filter(
+    (c) => c.startsWith('text-') && !/^text-(xs|sm|base|lg|xl|\[)/.test(c),
+  );
+}
+
+/** Classes that set `background-color`, ignoring `hover:` and other variants. */
+function backgrounds(el: Element): string[] {
+  return [...el.classList].filter((c) => c.startsWith('bg-'));
+}
+
+/** Classes that set `border-color`. `border`/`border-b-2` set width, not colour. */
+function borderColours(el: Element): string[] {
+  return [...el.classList].filter(
+    (c) => c.startsWith('border-') && !/^border-(b|t|l|r|x|y)?-?\d+$/.test(c),
+  );
+}
+
+/**
+ * The same collision, for the properties that are not colours.
+ *
+ * Tailwind orders numerically as well as alphabetically, so a *smaller* value
+ * always sorts earlier and therefore loses: `size="md"` plus a call site's
+ * `py-1` renders `py-2`, and `size="xs"` plus `px-0` renders `px-2`. The rule a
+ * caller could actually rely on is "you may increase a spacing value but never
+ * decrease it", which nobody will remember — so the variant and size tables must
+ * simply never emit two of the same property, exactly as with colour.
+ *
+ * Grouped by the precise utility prefix rather than by CSS property, because
+ * `px-2` and `pl-8` legitimately coexist: the longhand sorts after the shorthand
+ * and is meant to win. Only a genuine duplicate — two `px-*`, two `rounded-*` —
+ * is a bug.
+ */
+const SPACING_GROUPS = ['p', 'px', 'py', 'gap', 'rounded'] as const;
+
+function duplicateSpacing(el: Element): string[] {
+  const classes = [...el.classList].filter((c) => !c.includes(':'));
+  const clashes: string[] = [];
+  for (const group of SPACING_GROUPS) {
+    const hits = classes.filter(
+      (c) => c === group || c.startsWith(`${group}-`),
+    );
+    if (hits.length > 1) clashes.push(`${group}: ${hits.join(' + ')}`);
+  }
+  // Font size is the same shape: `text-xs` against `text-sm`.
+  const sizes = classes.filter((c) => /^text-(2xs|xs|sm|base|lg|xl|display)$/.test(c));
+  if (sizes.length > 1) clashes.push(`font-size: ${sizes.join(' + ')}`);
+  return clashes;
+}
+
+/**
+ * Every variant, as a `Record` keyed by the union rather than a plain array.
+ *
+ * This is the part that keeps the suite honest while several people are adding
+ * variants to these components: a new member of `ButtonVariant` leaves this
+ * record missing a key, which is a *compile* error in this file. Whoever adds
+ * the variant is made to list it here, and listing it is what enrols it in the
+ * colour-collision checks below. An array would have gone quietly stale.
+ */
+const ALL_BUTTON_VARIANTS: Record<ButtonVariant, true> = {
+  primary: true,
+  secondary: true,
+  ghost: true,
+  subtle: true,
+  danger: true,
+  dangerGhost: true,
+  dangerSolid: true,
+  success: true,
+  accentSoft: true,
+  warning: true,
+  info: true,
+  accent: true,
+  link: true,
+  pill: true,
+  tab: true,
+};
+
+const ALL_ICON_VARIANTS: Record<IconButtonVariant, true> = {
+  ghost: true,
+  subtle: true,
+  primary: true,
+  danger: true,
+  dangerGhost: true,
+};
+
+const BUTTON_VARIANTS = Object.keys(ALL_BUTTON_VARIANTS) as ButtonVariant[];
+const ICON_VARIANTS = Object.keys(ALL_ICON_VARIANTS) as IconButtonVariant[];
+
+/**
+ * Hover feedback that only exists as a surface change disappears when the
+ * parent already carries that surface. No other check can see it: the classes
+ * are all present and well-formed, nothing collides, and the failure is purely
+ * that the user sees nothing happen.
+ *
+ * `subtle` hovers *both* the text and the surface, and the surface half looks
+ * like the redundant one, so "we already hover the background, drop the text
+ * move" reads as an obvious cleanup. It is backwards: on a raised parent the
+ * surface step is the invisible half, roughly 2/255 in dark and 4/255 in light
+ * (see the comment on INACTIVE.subtle for the arithmetic). A comment cannot
+ * fail a build. This can.
+ */
+describe('Button hover feedback survives its container', () => {
+  it('subtle keeps a text hover: its surface hover is invisible on a raised parent', () => {
+    // TasksPage's Board/List switch is the live example — `bg-surface-raised`
+    // on the container, `subtle` segments sitting directly on it.
+    render(<Button variant="subtle">List</Button>);
+    expect(screen.getByRole('button')).toHaveClass('hover:text-text');
+  });
+});
+
+describe('Button colour classes are unambiguous', () => {
+  for (const variant of BUTTON_VARIANTS) {
+    for (const active of [false, true]) {
+      it(`${variant}${active ? ' (active)' : ''} sets each colour property at most once`, () => {
+        render(
+          <Button variant={variant} active={active}>
+            label
+          </Button>,
+        );
+        const el = screen.getByRole('button');
+        expect(textColours(el)).toHaveLength(1);
+        expect(backgrounds(el).length).toBeLessThanOrEqual(1);
+        expect(borderColours(el).length).toBeLessThanOrEqual(1);
+      });
+    }
+  }
+
+  // Every variant against every size, because the clash is between the two
+  // tables rather than inside either one.
+  for (const variant of BUTTON_VARIANTS) {
+    for (const size of ['xs', 'sm', 'md'] as const) {
+      it(`${variant} at ${size} sets each spacing property at most once`, () => {
+        render(
+          <Button variant={variant} size={size}>
+            label
+          </Button>,
+        );
+        expect(duplicateSpacing(screen.getByRole('button'))).toEqual([]);
+      });
+    }
+  }
+
+  it('renders the accent treatment when active, not the resting colour', () => {
+    render(<Button variant="ghost" active>on</Button>);
+    expect(textColours(screen.getByRole('button'))).toEqual(['text-accent']);
+  });
+
+  it('swaps the tab border rather than stacking it', () => {
+    render(<Button variant="tab" active>on</Button>);
+    const el = screen.getByRole('button');
+    expect(el).toHaveClass('border-accent');
+    expect(el).not.toHaveClass('border-transparent');
+  });
+
+  it('never puts white on the accent fill', () => {
+    // The accent is ClickHouse yellow in dark mode, so `text-white` on it is
+    // unreadable — and `.text-white` outsorts `.text-on-accent`, so a call site
+    // cannot correct it either.
+    render(<Button variant="primary">go</Button>);
+    const el = screen.getByRole('button');
+    expect(el).toHaveClass('bg-accent');
+    expect(el).not.toHaveClass('text-white');
+  });
+
+  it('drops the padding for a link, which cannot be overridden from outside', () => {
+    render(<Button variant="link">more</Button>);
+    const el = screen.getByRole('button');
+    expect(el).not.toHaveClass('px-3');
+    expect(el).toHaveClass('text-accent');
+  });
+});
+
+describe('IconButton colour classes are unambiguous', () => {
+  for (const variant of ICON_VARIANTS) {
+    for (const active of [false, true]) {
+      it(`${variant}${active ? ' (active)' : ''} sets each colour property at most once`, () => {
+        render(
+          <IconButton variant={variant} active={active} label="act">
+            <svg />
+          </IconButton>,
+        );
+        const el = screen.getByRole('button');
+        expect(textColours(el)).toHaveLength(1);
+        expect(backgrounds(el).length).toBeLessThanOrEqual(1);
+      });
+    }
+  }
+
+  it('renders the accent treatment when active, not the resting colour', () => {
+    render(<IconButton variant="ghost" active label="act"><svg /></IconButton>);
+    expect(textColours(screen.getByRole('button'))).toEqual(['text-accent']);
+  });
+
+  it('names itself from `label`, for both pointer and screen reader', () => {
+    render(<IconButton label="Delete task"><svg /></IconButton>);
+    const el = screen.getByRole('button', { name: 'Delete task' });
+    expect(el).toHaveAttribute('title', 'Delete task');
+  });
+});
+
+/**
+ * The caller's side of the same rule.
+ *
+ * Everything above pins the *primitive* to one class per property. That is
+ * necessary and not sufficient: a call site that writes `className="px-0"` is
+ * adding the second one from outside, and `.px-0` is emitted before `.px-2`, so
+ * on class order alone the primitive's padding wins and the override is inert.
+ * `overridable` drops the default instead.
+ *
+ * The assertions are `not.toHaveClass` on the default rather than `toHaveClass`
+ * on the override: the override is present either way, so only the default
+ * being gone tells a working merge from an inert one, and that is what jsdom can
+ * see without a stylesheet.
+ */
+describe('a caller className replaces the primitive default', () => {
+  const CASES = [
+    // [what, props, className, displaced default, note]
+    ['horizontal padding', { size: 'xs' } as const, 'px-0', 'px-2', 'PromptRewriteCard'],
+    ['vertical padding', { size: 'sm' } as const, 'py-0.5', 'py-1.5', 'TodoPanel'],
+    ['type size', { size: 'sm' } as const, 'text-sm', 'text-xs', 'TodoPanel'],
+    ['gap', { size: 'md' } as const, 'gap-2.5', 'gap-2', 'ReviewLoopCard'],
+    ['flex shrink', {} as const, 'shrink', 'shrink-0', 'NotificationsPage session link'],
+    ['radius', { variant: 'pill' } as const, 'rounded', 'rounded-full', 'InteractiveQuestionCard'],
+    ['radius', { variant: 'primary' } as const, 'rounded', 'rounded-lg', 'InteractiveQuestionCard'],
+    ['radius', { variant: 'subtle' } as const, 'rounded-none', 'rounded', 'ChatInput menu'],
+  ] as const;
+
+  for (const [what, props, override, displaced, note] of CASES) {
+    it(`${what}: ${override} displaces ${displaced} (${note})`, () => {
+      render(
+        <Button {...props} className={override}>
+          label
+        </Button>,
+      );
+      const el = screen.getByRole('button');
+      expect(el).toHaveClass(override);
+      expect(el).not.toHaveClass(displaced);
+    });
+  }
+
+  it('leaves the properties the caller did not name alone', () => {
+    // The failure mode on the other side: a merge that is too eager strips the
+    // variant's colour or the size's type scale along with its padding.
+    render(<Button variant="primary" size="sm" className="px-0">go</Button>);
+    const el = screen.getByRole('button');
+    expect(el).toHaveClass('text-on-accent', 'bg-accent', 'text-xs', 'gap-1.5');
+    expect(el).not.toHaveClass('px-3');
+  });
+
+  it('keeps a longhand beside the shorthand it refines', () => {
+    // `pl-8` indents the run-later submenu items under their parent row; it is
+    // meant to sit *with* `px-3`, not to replace it. Tailwind gives the longhand
+    // the win on its own, and dropping `px-3` here would lose the right padding.
+    render(<Button size="sm" className="pl-8">1 hour</Button>);
+    const el = screen.getByRole('button');
+    expect(el).toHaveClass('px-3', 'pl-8');
+  });
+
+  it('lets a caller cancel a hover it does not want', () => {
+    render(<Button variant="ghost" className="hover:bg-transparent">x</Button>);
+    const el = screen.getByRole('button');
+    expect(el).toHaveClass('hover:bg-transparent');
+    expect(el).not.toHaveClass('hover:bg-surface-raised');
+  });
+
+  it('applies to IconButton, whose radius and box the composer overrides', () => {
+    render(
+      <IconButton label="More options" size="md" className="rounded-xl">
+        <svg />
+      </IconButton>,
+    );
+    const el = screen.getByRole('button');
+    expect(el).toHaveClass('rounded-xl', 'w-10', 'h-10');
+    // `md` already sets `rounded-xl`, so nothing is displaced here — the point
+    // is that the size's box survives a radius override.
+  });
+
+  it('applies to Badge', () => {
+    render(<Badge className="text-xs px-2">42</Badge>);
+    const el = screen.getByText('42');
+    expect(el).toHaveClass('text-xs', 'px-2');
+    expect(el).not.toHaveClass('text-2xs', 'px-1.5');
+  });
+
+  it('applies to TextField and TextArea', () => {
+    render(
+      <>
+        <TextField aria-label="answer" className="px-2.5 rounded" />
+        <TextArea aria-label="prompt" className="text-sm" />
+      </>,
+    );
+    const input = screen.getByRole('textbox', { name: 'answer' });
+    expect(input).toHaveClass('px-2.5', 'rounded', 'py-2');
+    expect(input).not.toHaveClass('px-3', 'rounded-lg');
+
+    const area = screen.getByRole('textbox', { name: 'prompt' });
+    expect(area).toHaveClass('text-sm', 'resize-none');
+  });
+
+  it('applies to Select', () => {
+    render(<Select aria-label="status" fieldSize="sm" className="py-1.5" />);
+    const el = screen.getByRole('combobox');
+    expect(el).toHaveClass('py-1.5', 'px-2', 'cursor-pointer');
+    expect(el).not.toHaveClass('py-1');
+  });
+
+  it('applies to Checkbox, on the input and on its label wrapper', () => {
+    render(<Checkbox label="Archived" className="w-3.5" labelClassName="text-xs" />);
+    const input = screen.getByRole('checkbox', { name: 'Archived' });
+    expect(input).toHaveClass('w-3.5', 'accent-accent');
+
+    const label = input.closest('label');
+    expect(label).toHaveClass('text-xs');
+    expect(label).not.toHaveClass('text-sm');
+  });
+});
+
+/**
+ * `overridable` resolves the caller against the tables and stops there.
+ *
+ * Running the whole string through tailwind-merge in one go would be shorter
+ * and would also silently fix collisions *between* the size and variant tables,
+ * which is what the rest of this file checks for. These specs pin the boundary,
+ * because the "simplification" that erases it looks like an improvement in
+ * review.
+ */
+describe('overridable leaves the primitive tables alone', () => {
+  it('does not resolve a collision inside the defaults', () => {
+    expect(overridable(['px-2 px-3'], 'text-sm')).toBe('px-2 px-3 text-sm');
+  });
+
+  it('does not resolve one while also applying an override', () => {
+    expect(overridable(['px-2 px-3 py-1'], 'py-0')).toBe('px-2 px-3 py-0');
+  });
+
+  it('is a plain join when the caller passes nothing', () => {
+    expect(overridable(['a b', false, 'c'])).toBe('a b c');
+  });
+});
diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx
new file mode 100644
index 00000000..2ee3f4ab
--- /dev/null
+++ b/web/src/components/ui/Button.tsx
@@ -0,0 +1,259 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { overridable } from './styles';
+
+/**
+ * The app's button.
+ *
+ * Deliberately **not** Click UI's `Button`: that one renders its content from a
+ * `label` string plus an `iconLeft`/`iconRight` icon name, and takes no
+ * children. Most buttons in this app hold real markup — an icon element, a
+ * truncating span, a count badge — which it cannot take. Click UI's `Button` is
+ * the right thing for a plain labelled button; import it directly.
+ *
+ * Everything the design system does contribute reaches this through the
+ * semantic tokens (`bg-accent`, `text-text-muted`, `border-border-subtle`),
+ * which is where Click UI's palette is bound.
+ */
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'ghost'
+  | 'subtle'
+  | 'danger'
+  | 'dangerGhost'
+  | 'dangerSolid'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'accent'
+  | 'accentSoft'
+  | 'link'
+  | 'pill'
+  | 'tab';
+
+export type ButtonSize = 'xs' | 'sm' | 'md';
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  /**
+   * The page's one committing action.
+   *
+   * `text-on-accent`, never `text-white`: the accent is ClickHouse yellow in
+   * dark mode, where white is unreadable on it. `overridable` lets a call site
+   * correct a wrong default, but 1.1:1 text is not something a reviewer will
+   * spot at the call site, so it has to be right here.
+   */
+  primary: 'text-on-accent bg-accent hover:bg-accent-hover rounded-lg font-medium',
+  /** Sits beside a primary without competing with it. */
+  secondary:
+    'text-text-secondary bg-surface-raised hover:bg-surface-hover border border-border rounded-lg',
+  /**
+   * Bare label; only the text colour moves. For "Cancel", "Show more".
+   * Resting colour lives in INACTIVE — see the note there.
+   */
+  ghost: 'rounded',
+  /**
+   * The menu/list-row shape: no chrome at rest, a surface on hover.
+   * Resting colour lives in INACTIVE — see the note there.
+   */
+  subtle: 'rounded',
+  /**
+   * Destructive, tinted. Uses `hue-red` rather than a stock `red-*` so it
+   * follows the light theme; a stock red is one fixed value in both themes.
+   */
+  danger:
+    'text-hue-red bg-hue-red/15 hover:bg-hue-red/25 rounded-md font-medium',
+  /**
+   * Affirmative, but *not* the page's primary action — "Accept as-is",
+   * "Adopt & continue", "Start review loop". Green rather than accent, because
+   * the accent is ClickHouse yellow and reads as neither.
+   *
+   * Tinted, not solid, and that is forced rather than chosen: `--theme-success`
+   * is Click UI's feedback *foreground*, which in dark mode is a pale mint
+   * (#ccffd0). `bg-success text-white` measures 1.12:1. Text-on-tint is the
+   * only pairing legible in both themes (10.5:1 dark, 7.3:1 light).
+   */
+  success:
+    'text-success bg-success-bg border border-success-border hover:border-success rounded-md font-medium',
+  /** Same shape as `success`, for a cautionary action. 5.7:1 dark, 5.3:1 light. */
+  warning:
+    'text-warning bg-warning-bg border border-warning-border hover:border-warning rounded-md font-medium',
+  /** Same shape as `success`, for an informational action. 7.2:1 dark, 6.2:1 light. */
+  info: 'text-info bg-info-bg border border-info-border hover:border-info rounded-md font-medium',
+  /**
+   * The accent member of the tinted family, for a committing action that must
+   * not shout — a list of answer options where every one is equally valid, or a
+   * button standing beside `success`/`danger` siblings that has to read as the
+   * same kind of control. `primary` would be too loud on all of them, and
+   * `accent` has no fill so it reads as a link.
+   *
+   * Like the other tinted variants it is never paired with `active`, so it sets
+   * its colour directly rather than going through INACTIVE.
+   */
+  accentSoft:
+    'text-accent bg-accent/15 border border-accent/30 hover:bg-accent/25 rounded-md font-medium',
+  /**
+   * An accent-coloured text button that is *not* a selection — "Clear filter",
+   * "View processing session". Distinct from `link` (which drops the padding to
+   * sit inside a sentence) and from `ghost active` (which would claim the
+   * control is currently selected).
+   */
+  accent: 'text-accent hover:bg-surface-raised rounded',
+  /**
+   * Destructive, but quiet until pointed at — the row-level delete/remove/purge
+   * treatment. Distinct from `danger`, which is already red at rest and shouts
+   * from inside a list.
+   */
+  dangerGhost: 'text-text-dim hover:text-hue-red hover:bg-hue-red/10 rounded',
+  /**
+   * Destructive and unmissable — for the confirm step, not the trigger.
+   *
+   * `bg-error-solid`, not `bg-hue-red`. `hue-red` is an *identity* hue meant
+   * for text on the page background, so it flips to a light #ff7575 in dark
+   * mode, where white on it measures 2.61:1. `error-solid` is a
+   * theme-independent palette entry (#c10000 both ways), giving 6.43:1 in
+   * either theme.
+   */
+  dangerSolid:
+    'text-white bg-error-solid hover:bg-error-solid/90 rounded-md font-medium',
+  /** An inline affordance that reads as a link but acts as a button. */
+  link: 'text-accent hover:underline rounded',
+  /** Filter chip. Pair with `active`. */
+  pill: 'rounded-full border whitespace-nowrap',
+  /** Underlined tab. Pair with `active`. */
+  tab: 'font-medium border-b-2 rounded-none',
+};
+
+/**
+ * The selected treatment, per variant: an active control is accent on an accent
+ * tint.
+ *
+ * **Any variant with an entry here must set no colour in VARIANTS.** Its
+ * resting colour goes in INACTIVE instead, so that exactly one of the two sets
+ * is ever on the element.
+ *
+ * That is not tidiness, it is the only thing that works. Tailwind v4 emits
+ * same-property utilities in alphabetical order of class name, so between two
+ * colour classes on one element the later-*sorting* name wins — not the one
+ * written last, and not the one from the "more specific" map. `.text-accent`
+ * sorts before every other colour token in this app; measured in the built
+ * stylesheet it lands at offset 49085, against `.text-hue-red` 51903,
+ * `.text-on-accent` 52978, `.text-text-dim` 53924, `.text-text-faint` 53967,
+ * `.text-text-muted` 54167, `.text-text-secondary` 54214 and `.text-white`
+ * 54310. An accent `ACTIVE` appended after a coloured base therefore loses,
+ * silently, and a `border-transparent` in the base outsorts, and so beats,
+ * `ACTIVE.tab`'s `border-accent`.
+ *
+ * `overridable` does not rescue this. It resolves the *caller's* `className`
+ * against these tables and deliberately leaves collisions between the tables
+ * themselves in place, so that they still reach the DOM where the test can see
+ * them. `Button.test.tsx` pins the invariant.
+ */
+const ACTIVE: Partial<Record<ButtonVariant, string>> = {
+  pill: 'bg-accent/15 text-accent border-accent/30',
+  tab: 'text-accent border-accent',
+  subtle: 'bg-accent/15 text-accent',
+  ghost: 'text-accent',
+};
+
+const INACTIVE: Partial<Record<ButtonVariant, string>> = {
+  pill: 'text-text-dim border-border hover:text-text-muted',
+  tab: 'text-text-dim border-transparent hover:text-text-muted',
+  ghost: 'text-text-muted hover:text-text-secondary',
+  /**
+   * `hover:text-text` is the load-bearing half of this. Do not drop it.
+   *
+   * `subtle` is the menu/list-row variant, and rows frequently sit *inside* a
+   * raised group — a segmented control puts `bg-surface-raised` on the
+   * container and the segments sit directly on it (`TasksPage`'s Board/List
+   * switch is exactly that shape). A `hover:bg-surface-raised` segment would
+   * then be hovering to the colour it is already on, and the control would go
+   * dead.
+   *
+   * `surface-hover` rather than `surface-raised` is better, but it does not
+   * rescue that case on its own, so it is no reason to drop the text move. Both
+   * are `color-mix` of the same two near-neutral greys: `surface-raised` is
+   * 50/50, `surface-hover` is 25/75. In dark those inputs are #282828 and
+   * #323232, so the two land roughly 2 units apart out of 255; in light
+   * (#f6f7fa, #e6e7e9) roughly 4. On a raised parent that step is essentially
+   * invisible, and the text is the only thing the eye actually gets. A
+   * genuinely distinct surface step would need a token the palette does not
+   * have.
+   *
+   * The text moves *up* from the resting colour rather than the resting colour
+   * moving down: dimming ~71 list rows at rest to buy a hover state on one
+   * segmented control would be a bad trade. Both hovers are `hover:`-prefixed,
+   * so they carry a pseudo-class and sit outside the ordering hazard on ACTIVE
+   * — this pair is decided by specificity, not by class name.
+   */
+  subtle: 'text-text-secondary hover:text-text hover:bg-surface-hover',
+};
+
+const SIZES: Record<ButtonSize, string> = {
+  xs: 'px-2 py-1 text-xs gap-1',
+  sm: 'px-3 py-1.5 text-xs gap-1.5',
+  md: 'px-3 py-2 text-sm gap-2',
+};
+
+/**
+ * `link` takes the type scale but not the padding — a link sitting in a
+ * sentence cannot carry a button's box.
+ *
+ * A separate table rather than a `px-0` at each of the ~30 call sites: the
+ * padding is wrong for *every* link, not for some of them, and `overridable`
+ * exists for the exceptions rather than for the rule.
+ */
+const LINK_SIZES: Record<ButtonSize, string> = {
+  xs: 'text-xs gap-1',
+  sm: 'text-xs gap-1.5',
+  md: 'text-sm gap-2',
+};
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Selected/current. Only `pill`, `tab`, `subtle` and `ghost` render it. */
+  active?: boolean;
+  /** Stretch to the container. Off by default; a bare `w-full` in the base
+   *  classes would fight every caller that wants an intrinsic width. */
+  fullWidth?: boolean;
+  children?: ReactNode;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = 'secondary',
+    size = 'sm',
+    active = false,
+    fullWidth = false,
+    className,
+    type,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const state = active ? ACTIVE[variant] : INACTIVE[variant];
+  return (
+    <button
+      ref={ref}
+      // Buttons inside a form default to `submit` and will submit it. Almost
+      // none of these are submit buttons, and the ones that are say so.
+      type={type ?? 'button'}
+      className={overridable(
+        [
+          'inline-flex items-center justify-center shrink-0 cursor-pointer',
+          'transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
+          variant === 'link' ? LINK_SIZES[size] : SIZES[size],
+          VARIANTS[variant],
+          state,
+          fullWidth && 'w-full',
+        ],
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});
diff --git a/web/src/components/ui/Checkbox.tsx b/web/src/components/ui/Checkbox.tsx
new file mode 100644
index 00000000..530da176
--- /dev/null
+++ b/web/src/components/ui/Checkbox.tsx
@@ -0,0 +1,98 @@
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';
+import { overridable } from './styles';
+
+/**
+ * A checkbox, with its label.
+ *
+ * Native, and keeping the native `onChange(e)` with `e.target.checked` — Click
+ * UI's `Checkbox` is Radix's, whose `onCheckedChange` hands back a
+ * `boolean | 'indeterminate'` instead. Radix's is the right one when a checkbox
+ * needs a tri-state or has to be styled beyond `accent-color`; this one is for
+ * the plain ones.
+ *
+ * The label is rendered as a `<label>` wrapping both, so the text is part of
+ * the hit area and not just the 13px box.
+ */
+/**
+ * The label's typography, as props rather than as classes on `labelClassName`.
+ *
+ * These are the only two properties the app's checkbox labels vary, and naming
+ * them keeps the choice closed and type-checked — `labelTone="dim"` is checked
+ * at compile time where `labelClassName="text-text-dim"` is a string nobody
+ * validates. `labelClassName` takes anything else, and wins over these props.
+ */
+export type CheckboxLabelSize = 'xs' | 'sm';
+export type CheckboxLabelTone = 'secondary' | 'muted' | 'dim';
+
+const LABEL_SIZES: Record<CheckboxLabelSize, string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+};
+
+const LABEL_TONES: Record<CheckboxLabelTone, string> = {
+  secondary: 'text-text-secondary',
+  muted: 'text-text-muted',
+  dim: 'text-text-dim',
+};
+
+export interface CheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  label?: ReactNode;
+  /**
+   * Classes for the `<label>` wrapper; `className` goes to the input.
+   * Use `labelSize`/`labelTone` for typography — see the note above.
+   */
+  labelClassName?: string;
+  labelSize?: CheckboxLabelSize;
+  labelTone?: CheckboxLabelTone;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(
+    {
+      label,
+      className,
+      labelClassName,
+      labelSize = 'sm',
+      labelTone = 'secondary',
+      disabled,
+      ...rest
+    },
+    ref,
+  ) {
+    const input = (
+      <input
+        ref={ref}
+        type="checkbox"
+        disabled={disabled}
+        // `accent-accent` is the whole styling budget: it tints the native
+        // control with the theme's accent and leaves the platform's own check,
+        // focus ring and touch target alone.
+        className={overridable(
+          ['accent-accent cursor-pointer disabled:cursor-not-allowed'],
+          className,
+        )}
+        {...rest}
+      />
+    );
+
+    if (label === undefined) return input;
+
+    return (
+      <label
+        className={overridable(
+          [
+            'inline-flex items-center gap-2',
+            LABEL_SIZES[labelSize],
+            LABEL_TONES[labelTone],
+            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+          ],
+          labelClassName,
+        )}
+      >
+        {input}
+        {label}
+      </label>
+    );
+  },
+);
diff --git a/web/src/components/ui/Drawer.tsx b/web/src/components/ui/Drawer.tsx
index b4303fc5..260c6803 100644
--- a/web/src/components/ui/Drawer.tsx
+++ b/web/src/components/ui/Drawer.tsx
@@ -19,6 +19,25 @@ import { safeAreaInsets } from '../../utils/safeArea';
  * `side` distinguishes the two jobs navigation does on a phone: `left` for
  * "which item within this section" (the chat session list), `right` for
  * "which section of the app" (the nav overflow behind More).
+ *
+ * **Why this is not Click UI's `Flyout`.** Four reasons, and each is one of the
+ * behaviours above:
+ *
+ * 1. `Flyout` defaults to `modal={false}` — a non-modal Radix dialog, so no
+ *    focus trap, no `aria-modal`, and nothing stopping Tab from walking onto
+ *    the transcript behind it. On a phone this surface *is* covering the page.
+ * 2. It unmounts its content when closed. The slide has to animate in both
+ *    directions, which is why this one stays mounted and parked off-screen.
+ * 3. Radix dismisses on Escape with `preventDefault()` and nothing more, so the
+ *    global Escape shortcut ("stop the agent") would still fire behind it.
+ *    `useModalSurface` claims the key with `stopPropagation()`.
+ * 4. Its sizes are the desktop side-panel set (`narrow`/`wide`/`widest`) over a
+ *    relative or absolute positioning strategy — not a 85vw-capped-at-320px
+ *    sheet pinned to the viewport, and nothing in it pays the safe-area inset
+ *    that a viewport-pinned surface owes.
+ *
+ * `Flyout` is the right component for a desktop detail panel. This is a phone
+ * sheet. Click UI reaches it through the surface and border tokens below.
  */
 export function Drawer({ open, onClose, side = 'left', label, children }: {
   open: boolean;
diff --git a/web/src/components/ui/IconButton.tsx b/web/src/components/ui/IconButton.tsx
new file mode 100644
index 00000000..b9de5fdc
--- /dev/null
+++ b/web/src/components/ui/IconButton.tsx
@@ -0,0 +1,135 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { overridable } from './styles';
+
+/**
+ * A button whose whole content is an icon.
+ *
+ * `label` is required and is spent twice — as `title`, so a pointer gets a
+ * tooltip, and as `aria-label`, so the control has a name at all. That is the
+ * point of the component: an icon-only button with no `aria-label` announces as
+ * "button" and nothing else, and a required prop makes that impossible.
+ *
+ * Not Click UI's `IconButton`, which picks its glyph by name from a closed
+ * union of Click UI icons. This app's icons are components (see `icons.tsx`),
+ * and several of these buttons swap their icon by state — a spinner while
+ * busy, the action's glyph otherwise. Taking the icon as children covers both.
+ */
+
+export type IconButtonSize = 'xs' | 'sm' | 'md';
+
+/**
+ * Square hit areas. `sm` matches the pane and sidebar toggles, `md` the chat
+ * composer's controls; `xs` is the inline affordance that sits inside a row of
+ * text and cannot afford to set the row's height.
+ */
+const SIZES: Record<IconButtonSize, string> = {
+  xs: 'p-1 rounded',
+  sm: 'w-8 h-8 rounded',
+  md: 'w-10 h-10 rounded-xl',
+};
+
+export type IconButtonVariant =
+  | 'ghost'
+  | 'subtle'
+  | 'primary'
+  | 'danger'
+  | 'dangerGhost';
+
+/**
+ * The colour a variant carries **when it is not active**.
+ *
+ * Held apart from ACTIVE because Tailwind v4 emits same-property utilities in
+ * alphabetical order of class name, so between two colour classes on one
+ * element the later-*sorting* name wins rather than the one written last.
+ * `.text-accent` sorts before every other colour token in this app (offset
+ * 49085 in the built stylesheet, against `.text-hue-red` 51903, `.text-on-accent`
+ * 52978, `.text-text-dim` 53924, `.text-text-faint` 53967, `.text-text-muted`
+ * 54167), so an accent `active` treatment appended after a coloured base would
+ * lose. Emitting exactly one of REST/ACTIVE makes the result independent of
+ * that order.
+ */
+const REST: Record<IconButtonVariant, string> = {
+  /** Quiet until pointed at — the default, and what most of these are. */
+  ghost: 'text-text-faint hover:text-text-muted hover:bg-surface-raised',
+  /** Carries a surface at rest, for controls sitting on the page background. */
+  subtle: 'text-text-muted bg-surface-raised hover:bg-surface-hover',
+  /**
+   * `text-on-accent`, never `text-white`: the accent is ClickHouse yellow in
+   * dark mode, where white is unreadable on it. See the same note on `Button`'s
+   * `primary` — it has to be right here, not corrected per call site.
+   */
+  primary: 'text-on-accent bg-accent hover:bg-accent-hover',
+  /** Destructive and already red at rest, for a control that sits alone. */
+  danger: 'text-hue-red hover:bg-hue-red/15',
+  /**
+   * Destructive but quiet until pointed at. This is the row-level
+   * delete/remove/purge treatment — inside a list, `danger` reads as an alarm
+   * on every row.
+   */
+  dangerGhost: 'text-text-dim hover:text-hue-red hover:bg-hue-red/10',
+};
+
+/** The selected treatment. Mutually exclusive with REST — see the note above. */
+const ACTIVE: Record<IconButtonVariant, string> = {
+  ghost: 'text-accent bg-accent/15',
+  subtle: 'text-accent bg-accent/15',
+  // Already the loudest thing on screen; staying lit is the whole point.
+  primary: 'text-on-accent bg-accent-hover',
+  danger: 'text-hue-red bg-hue-red/15',
+  dangerGhost: 'text-hue-red bg-hue-red/10',
+};
+
+/** Non-colour classes a variant always carries. */
+const SHAPE: Partial<Record<IconButtonVariant, string>> = {
+  subtle: 'border border-border',
+};
+
+export interface IconButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'aria-label'> {
+  /** Names the action. Becomes both the tooltip and the accessible name. */
+  label: string;
+  size?: IconButtonSize;
+  variant?: IconButtonVariant;
+  /** Selected/current — for toggles that stay lit while their pane is open. */
+  active?: boolean;
+  /** The icon element. */
+  children: ReactNode;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(
+    {
+      label,
+      size = 'sm',
+      variant = 'ghost',
+      active = false,
+      className,
+      type,
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type={type ?? 'button'}
+        title={label}
+        aria-label={label}
+        className={overridable(
+          [
+            'inline-flex items-center justify-center shrink-0 cursor-pointer',
+            'transition-colors disabled:opacity-50 disabled:cursor-not-allowed',
+            SIZES[size],
+            SHAPE[variant],
+            active ? ACTIVE[variant] : REST[variant],
+          ],
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+);
diff --git a/web/src/components/ui/Modal.test.tsx b/web/src/components/ui/Modal.test.tsx
index 09488ab1..fd24f900 100644
--- a/web/src/components/ui/Modal.test.tsx
+++ b/web/src/components/ui/Modal.test.tsx
@@ -13,6 +13,22 @@ import { Modal } from './Modal';
  * and the mousedown-not-click backdrop — rather than its markup.
  */
 
+/**
+ * The backdrop, found by its own class rather than by its position relative to
+ * the panel.
+ *
+ * `getByRole('dialog').parentElement` only holds while the backdrop is the
+ * panel's *direct* parent. Insert any wrapper between them (a transition
+ * container, a portal's own node) and that lookup silently retargets at the
+ * wrapper: the clicks still land on something, `onClose` still isn't called,
+ * and the specs pass without testing the backdrop at all.
+ */
+function backdrop(): HTMLElement {
+  const el = document.querySelector<HTMLElement>('.modal-backdrop');
+  if (!el) throw new Error('no .modal-backdrop in the document');
+  return el;
+}
+
 function Basic({
   onClose = () => {},
   ...props
@@ -86,7 +102,7 @@ describe('Modal dismissal', () => {
     const onClose = vi.fn();
     render(<Basic onClose={onClose} />);
 
-    await userEvent.click(screen.getByRole('dialog').parentElement!);
+    await userEvent.click(backdrop());
 
     expect(onClose).toHaveBeenCalledTimes(1);
   });
@@ -106,11 +122,10 @@ describe('Modal dismissal', () => {
     // mid-interaction; closing on mousedown does not.
     const onClose = vi.fn();
     render(<Basic onClose={onClose} />);
-    const backdrop = screen.getByRole('dialog').parentElement!;
 
     await userEvent.pointer([
       { target: screen.getByText('first'), keys: '[MouseLeft>]' },
-      { target: backdrop, keys: '[/MouseLeft]' },
+      { target: backdrop(), keys: '[/MouseLeft]' },
     ]);
 
     expect(onClose).not.toHaveBeenCalled();
@@ -120,7 +135,7 @@ describe('Modal dismissal', () => {
     const onClose = vi.fn();
     render(<Basic onClose={onClose} closeOnBackdrop={false} />);
 
-    await userEvent.click(screen.getByRole('dialog').parentElement!);
+    await userEvent.click(backdrop());
 
     expect(onClose).not.toHaveBeenCalled();
     // Escape still works — the guard is about stray clicks, not lock-in.
diff --git a/web/src/components/ui/Modal.tsx b/web/src/components/ui/Modal.tsx
index c224a4d7..7089a248 100644
--- a/web/src/components/ui/Modal.tsx
+++ b/web/src/components/ui/Modal.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useId, useRef, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
-import { X } from 'lucide-react';
+import { X } from './icons';
+import { IconButton } from './IconButton';
 import { modalStack } from './modalStack';
 
 /**
@@ -11,6 +12,17 @@ import { modalStack } from './modalStack';
  * scroll, and none carried dialog semantics for a screen reader. Behaviour
  * that every dialog needs belongs in one place.
  *
+ * **Why this is not Click UI's `Dialog`.** That one is Radix's, and Radix
+ * dismisses on Escape by calling `preventDefault()` and nothing else — it never
+ * stops the event propagating. This app's global shortcuts are a bubble-phase
+ * `document` listener (`useKeyboardShortcuts`) that does not consult
+ * `defaultPrevented`, so under Radix an Escape would close the dialog *and*
+ * stop a generation running behind it. Radix would also bring a second
+ * body-scroll lock alongside the refcounted one below, and it renders its
+ * overlay as a *sibling* of the panel rather than its parent, which changes
+ * what "click the backdrop" means. Click UI's `Dialog` remains the right choice
+ * for a dialog that does not have to coexist with these global handlers.
+ *
  * Three details are load-bearing:
  *
  * **Escape is captured, not bubbled.** The app installs document-level
@@ -229,17 +241,12 @@ export function Modal({
       >
         {title && (
           <div className="flex items-center justify-between px-5 py-3 border-b border-border shrink-0">
-            <h2 id={titleId} className="text-[15px] font-semibold">
+            <h2 id={titleId} className="text-base font-semibold">
               {title}
             </h2>
-            <button
-              onClick={onClose}
-              className="text-text-faint hover:text-text-muted cursor-pointer p-1"
-              aria-label="Close dialog"
-              title="Close"
-            >
+            <IconButton label="Close dialog" size="xs" onClick={onClose}>
               <X size={18} />
-            </button>
+            </IconButton>
           </div>
         )}
 
diff --git a/web/src/components/ui/PageHeader.tsx b/web/src/components/ui/PageHeader.tsx
index f2d4a4cf..a43acc61 100644
--- a/web/src/components/ui/PageHeader.tsx
+++ b/web/src/components/ui/PageHeader.tsx
@@ -21,6 +21,16 @@ import type { ReactNode } from 'react';
  * so tab order follows what is on screen at both sizes — a flex `order` swap
  * would move them visually while leaving the keyboard to step through every
  * filter and the search box first.
+ *
+ * This is Nerve's layout, not a library component: the three rules above are
+ * answers to this app's viewport and this app's headers, and none of them is a
+ * shape a design system ships. Every colour is a theme token —
+ * `border-border-subtle`, `bg-bg` and the text colours — so this header
+ * repaints with the rest of the app and holds no colour of its own.
+ *
+ * For the slots: `filters` takes `Button variant="pill"` with `active`, `search`
+ * takes a `TextField`, and `actions` takes `Button`/`IconButton` — the
+ * primitives beside this file.
  */
 export function PageHeader({ leading, icon, title, filters, search, actions }: {
   /**
diff --git a/web/src/components/ui/PaneToggle.tsx b/web/src/components/ui/PaneToggle.tsx
index f56d5393..1b6936a1 100644
--- a/web/src/components/ui/PaneToggle.tsx
+++ b/web/src/components/ui/PaneToggle.tsx
@@ -1,11 +1,13 @@
-import { PanelLeftOpen, PanelLeftClose } from 'lucide-react';
+import { PanelLeftClose, PanelLeftOpen } from './icons';
+import { IconButton } from './IconButton';
 
 /**
  * Opens/closes a page's side pane once it has collapsed into a drawer.
  *
  * Same icon pair and position as the chat header's sidebar toggle, so the
  * control for "show me the list" is in the same corner on every page that
- * has a list.
+ * has a list. Both glyphs keep the bar on the same edge, so only the arrow
+ * turns over as the toggle flips.
  */
 export function PaneToggle({ open, onToggle, label }: {
   open: boolean;
@@ -15,14 +17,15 @@ export function PaneToggle({ open, onToggle, label }: {
 }) {
   const action = `${open ? 'Hide' : 'Show'} ${label}`;
   return (
-    <button
+    <IconButton
+      label={action}
       onClick={onToggle}
-      title={action}
-      aria-label={action}
       aria-expanded={open}
-      className="w-8 h-8 -ml-1 shrink-0 flex items-center justify-center rounded text-text-faint hover:text-text-muted hover:bg-surface-raised cursor-pointer transition-colors"
+      // Pulls the button's own box back out of the header's leading gap, so the
+      // glyph lines up with the title beside it rather than the button's edge.
+      className="-ml-1"
     >
       {open ? <PanelLeftClose size={16} /> : <PanelLeftOpen size={16} />}
-    </button>
+    </IconButton>
   );
 }
diff --git a/web/src/components/ui/Select.tsx b/web/src/components/ui/Select.tsx
new file mode 100644
index 00000000..54be3805
--- /dev/null
+++ b/web/src/components/ui/Select.tsx
@@ -0,0 +1,93 @@
+import { forwardRef, type ReactNode, type SelectHTMLAttributes } from 'react';
+import { FIELD_BASE, FIELD_SIZES, overridable, type FieldSize } from './styles';
+
+/**
+ * A dropdown, on the native `<select>`.
+ *
+ * Click UI's `Select` is the richer control — it is searchable, groupable and
+ * styleable — but it is not a drop-in here, for two reasons beyond the obvious
+ * one that its API is `onSelect(value)` rather than `onChange(e)`:
+ *
+ * **It portals.** Radix renders the open list into `document.body`. Three of
+ * this app's selects live inside a `Modal`, whose focus trap only knows about
+ * nodes inside its own panel and whose Escape handler runs on the capture phase
+ * — so an open Click UI list inside a dialog would be untabbable, and Escape
+ * would close the dialog instead of the list. Making that work means teaching
+ * the Modal about Radix's layer stack.
+ *
+ * **It is not a native control.** This app is used on a phone (the whole
+ * `PageHeader` breakpoint story exists for that reason), and a native `<select>`
+ * gets the platform's own picker there.
+ *
+ * So: use this for the app's plain selects. Reach for Click UI's `Select`
+ * directly when one needs search or option groups — and keep it out of dialogs
+ * until the Modal knows about Radix layers.
+ */
+
+export interface SelectOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SelectProps
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'children'> {
+  fieldSize?: FieldSize;
+  fullWidth?: boolean;
+  /** Options, if you would rather not write `<option>`s. */
+  options?: SelectOption[];
+  /**
+   * Rendered first with an empty value, for the `<option value="">All …
+   * </option>` idiom the filter bars use.
+   */
+  emptyLabel?: ReactNode;
+  /**
+   * Keep showing a `value` that isn't in `options` rather than silently
+   * snapping the control to the first option. Statuses are user-configurable
+   * and a task can hold one that has since been renamed away.
+   */
+  children?: ReactNode;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  {
+    fieldSize = 'md',
+    fullWidth = false,
+    options,
+    emptyLabel,
+    className,
+    value,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const known =
+    options === undefined ||
+    value === undefined ||
+    value === '' ||
+    options.some((o) => o.value === value);
+
+  return (
+    <select
+      ref={ref}
+      value={value}
+      className={overridable(
+        [FIELD_BASE, FIELD_SIZES[fieldSize], 'cursor-pointer', fullWidth && 'w-full'],
+        className,
+      )}
+      {...rest}
+    >
+      {emptyLabel !== undefined && <option value="">{emptyLabel}</option>}
+      {/* A value with no matching option would otherwise make the control
+          display — and on the next change, submit — some other option. */}
+      {!known && typeof value === 'string' && <option value={value}>{value}</option>}
+      {options?.map((o) => (
+        <option key={o.value} value={o.value} disabled={o.disabled}>
+          {o.label}
+        </option>
+      ))}
+      {children}
+    </select>
+  );
+});
diff --git a/web/src/components/ui/TextField.tsx b/web/src/components/ui/TextField.tsx
new file mode 100644
index 00000000..114414b0
--- /dev/null
+++ b/web/src/components/ui/TextField.tsx
@@ -0,0 +1,124 @@
+import {
+  forwardRef,
+  type InputHTMLAttributes,
+  type TextareaHTMLAttributes,
+} from 'react';
+import {
+  FIELD_BARE,
+  FIELD_BASE,
+  FIELD_SIZES,
+  overridable,
+  type FieldSize,
+} from './styles';
+
+/**
+ * Text inputs.
+ *
+ * These keep the **native** event shape — `onChange(e)` with `e.target.value` —
+ * which is what the app's inputs and textareas use. Click UI's `TextField`
+ * takes `onChange(value, e?)` with the event optional, and narrows `type` to
+ * text/email/tel/url; the app needs `password`, `number`, `date`, `color` and
+ * `file` as well. It is the better component for a *new* form — import it
+ * directly — but not a drop-in for these.
+ *
+ * `fullWidth` is a prop rather than a `w-full` in the base classes because some
+ * number inputs are deliberately narrow (`w-16`, `w-24`); defaulting it on with
+ * a named opt-out states that better than a `w-auto` at each of them.
+ */
+
+/**
+ * Drop the field chrome — background, border, radius and padding — keeping only
+ * the focus and placeholder behaviour.
+ *
+ * For the full-bleed editing surfaces — the markdown editor pane, the chat
+ * composer — which want the shared focus and disabled handling but own their own
+ * background. One flag rather than the five negating classes it would otherwise
+ * take at each call site.
+ */
+export interface FieldChromeProps {
+  /** Render as a bare editing surface rather than a bordered form field. */
+  bare?: boolean;
+}
+
+export interface TextFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    FieldChromeProps {
+  fieldSize?: FieldSize;
+  /** Stretch to the container. */
+  fullWidth?: boolean;
+}
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  function TextField(
+    {
+      fieldSize = 'md',
+      fullWidth = true,
+      bare = false,
+      className,
+      type = 'text',
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        className={overridable(
+          [
+            bare ? FIELD_BARE : FIELD_BASE,
+            !bare && FIELD_SIZES[fieldSize],
+            fullWidth && 'w-full',
+          ],
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
+
+export interface TextAreaProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
+    FieldChromeProps {
+  fieldSize?: FieldSize;
+  fullWidth?: boolean;
+  /**
+   * Let the user drag the bottom edge. Off by default: most of the app's
+   * textareas sit in a dialog whose height is already pinned, where a resize
+   * handle just pushes the footer off screen.
+   */
+  resizable?: boolean;
+}
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  function TextArea(
+    {
+      fieldSize = 'md',
+      fullWidth = true,
+      resizable = false,
+      bare = false,
+      className,
+      rows = 3,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <textarea
+        ref={ref}
+        rows={rows}
+        className={overridable(
+          [
+            bare ? FIELD_BARE : FIELD_BASE,
+            !bare && FIELD_SIZES[fieldSize],
+            fullWidth && 'w-full',
+            resizable ? 'resize-y' : 'resize-none',
+          ],
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
diff --git a/web/src/components/ui/Tooltip.tsx b/web/src/components/ui/Tooltip.tsx
new file mode 100644
index 00000000..5638e5c2
--- /dev/null
+++ b/web/src/components/ui/Tooltip.tsx
@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import { Tooltip as ClickTooltip } from '@clickhouse/click-ui/Tooltip';
+
+/**
+ * A hover/focus tooltip, on Click UI's.
+ *
+ * Click UI's `Tooltip` is a Radix compound — `Root` / `Trigger` / `Content` —
+ * and its provider is mounted by `ClickUIProvider`. This wraps the three in one
+ * component, so a tip is a one-prop change at the call site.
+ *
+ * A native `title` is fine and should stay wherever it is doing its job; reach
+ * for this when the tip needs markup, needs to be readable (native titles are
+ * slow to appear and unstyleable), or sits on something with no other hover
+ * affordance.
+ *
+ * Note it does **not** give the trigger an accessible name — Radix's tooltip is
+ * described-by, not labelled-by. An icon-only control still needs its own
+ * `aria-label`; `IconButton` handles that from its required `label`.
+ */
+export function Tooltip({
+  content,
+  children,
+  side = 'top',
+  align = 'center',
+  showArrow = true,
+  maxWidth,
+  /** Suppress the tip without unmounting the trigger — e.g. while disabled. */
+  disabled = false,
+  delayDuration,
+}: {
+  content: ReactNode;
+  /** The trigger. Must be a single element that forwards its ref and props. */
+  children: ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  align?: 'start' | 'center' | 'end';
+  showArrow?: boolean;
+  maxWidth?: string;
+  disabled?: boolean;
+  delayDuration?: number;
+}) {
+  if (disabled || content === null || content === undefined || content === '') {
+    return <>{children}</>;
+  }
+  return (
+    <ClickTooltip delayDuration={delayDuration}>
+      {/* `asChild` so the trigger is the caller's own button rather than a
+          wrapper div — a div around a flex child changes the layout, and around
+          a button it breaks the hit area. */}
+      <ClickTooltip.Trigger asChild>{children}</ClickTooltip.Trigger>
+      <ClickTooltip.Content side={side} align={align} showArrow={showArrow} maxWidth={maxWidth}>
+        {content}
+      </ClickTooltip.Content>
+    </ClickTooltip>
+  );
+}
diff --git a/web/src/components/ui/icons.tsx b/web/src/components/ui/icons.tsx
new file mode 100644
index 00000000..c3b58911
--- /dev/null
+++ b/web/src/components/ui/icons.tsx
@@ -0,0 +1,49 @@
+import { Star, type LucideProps } from 'lucide-react';
+
+/**
+ * The app's icon set.
+ *
+ * Every icon comes from here rather than from `lucide-react` directly. The
+ * indirection costs nothing and gives the set one seam: a glyph can be swapped
+ * for a different set, or drawn locally, without touching the 75 files that
+ * render it.
+ *
+ * Call sites render icons as `<Name size={14} className="…"/>`. `size` is
+ * pixels, `className` lands on the `<svg>` itself, and colour comes from
+ * `currentColor`, so a `text-hue-red` on the call site or on any ancestor
+ * carries.
+ */
+
+export type { LucideIcon as Icon } from 'lucide-react';
+
+export {
+  Activity, AlertCircle, AlertTriangle, Archive, ArchiveRestore, ArrowLeft,
+  ArrowRight, Ban, BarChart3, Bell, BellOff, BookOpen, Bot, Brain,
+  Calendar, Check, CheckCheck, CheckCircle, CheckCircle2, CheckSquare,
+  ChevronDown, ChevronLeft, ChevronRight, Circle, CircleCheck,
+  CircleDashed, CircleDollarSign, CircleHelp, CircleX, Clock, Clock3,
+  Columns3, Copy, CornerDownLeft, Cpu, Database, DollarSign, Download,
+  Edit3, ExternalLink, Eye, EyeOff, File, FileCheck, FileDiff, FileEdit,
+  FilePlus, FileText, FileX, Files, Filter, Folder, FolderOpen, GitBranch,
+  Github, Globe, GripVertical, Hammer, HardDrive, HelpCircle, History,
+  Hourglass, Inbox, Lightbulb, List, ListTodo, Loader2, Lock, LogOut, Mail,
+  Maximize2, MessageCircle, MessageCircleQuestion, MessageSquare, Monitor,
+  Moon, MoreHorizontal, OctagonX, PanelLeftClose, PanelLeftOpen, Paperclip,
+  Pause, Pencil, Play, Plug, Plus, Radio, RefreshCw, Repeat, Rocket,
+  RotateCcw, RotateCw, Save, Search, SearchCheck, Send, Server,
+  ShieldCheck, ShieldQuestion, SlidersHorizontal, Sparkle, Sparkles,
+  Square, SquareTerminal, Star, StickyNote, Sun, Tag, Terminal, Timer,
+  Trash2, TrendingDown, TrendingUp, Unlink, Workflow, WrapText, Wrench, X,
+  XCircle, Zap
+} from 'lucide-react';
+
+/**
+ * A star with its interior filled, for a session that is starred.
+ *
+ * lucide ships the outline only. Filling from `currentColor` rather than a
+ * fixed colour keeps one `text-*` class on the call site in charge of both the
+ * stroke and the fill.
+ */
+export function StarFilled(props: LucideProps) {
+  return <Star fill="currentColor" {...props} />;
+}
diff --git a/web/src/components/ui/index.ts b/web/src/components/ui/index.ts
new file mode 100644
index 00000000..02640062
--- /dev/null
+++ b/web/src/components/ui/index.ts
@@ -0,0 +1,40 @@
+/**
+ * The app's UI primitives, in one import.
+ *
+ *   import { Button, IconButton, TextField, Badge } from '../ui';
+ *
+ * Icons are deliberately *not* re-exported here. There are over a hundred of
+ * them and they shadow common words (`File`, `List`, `Filter`, `Search`,
+ * `Square`), so folding them into this barrel would make every wildcard import
+ * ambiguous and every name collision silent. Import them from `../ui/icons`
+ * instead.
+ */
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeTone } from './Badge';
+export {
+  Button,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+} from './Button';
+export { Checkbox, type CheckboxProps } from './Checkbox';
+export { Drawer } from './Drawer';
+export {
+  IconButton,
+  type IconButtonProps,
+  type IconButtonSize,
+  type IconButtonVariant,
+} from './IconButton';
+export { Modal, type ModalProps, type ModalSize } from './Modal';
+export { isModalOpen, modalStack } from './modalStack';
+export { PageHeader } from './PageHeader';
+export { PaneToggle } from './PaneToggle';
+export { Select, type SelectOption, type SelectProps } from './Select';
+export { cx, type FieldSize } from './styles';
+export {
+  TextArea,
+  type TextAreaProps,
+  TextField,
+  type TextFieldProps,
+} from './TextField';
+export { Tooltip } from './Tooltip';
diff --git a/web/src/components/ui/styles.ts b/web/src/components/ui/styles.ts
new file mode 100644
index 00000000..23138132
--- /dev/null
+++ b/web/src/components/ui/styles.ts
@@ -0,0 +1,120 @@
+/**
+ * Shared bits for the primitives in this folder.
+ *
+ * Its own module rather than an export from one of the components so that
+ * importing a class string from a sibling doesn't turn that file into a mixed
+ * component/util module — which react-refresh treats as an error.
+ */
+
+import { extendTailwindMerge } from 'tailwind-merge';
+
+/** Join class names, dropping the falsy ones. */
+export function cx(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
+}
+
+/**
+ * tailwind-merge, taught the two font-size steps this app adds to Tailwind's
+ * scale (`--text-2xs` and `--text-display`, in index.css).
+ *
+ * `2xs` already matches tailwind-merge's t-shirt-size validator, so it needs no
+ * help. `display` does not, and `text-<anything not a known size>` falls
+ * through to the *colour* group — so without this line a caller's
+ * `text-display` would leave a primitive's `text-sm` standing and would displace
+ * its text colour instead. Add any further `--text-*` step here at the same
+ * time as index.css.
+ */
+const twMerge = extendTailwindMerge({
+  extend: { theme: { text: ['display'] } },
+});
+
+/**
+ * One entry per (defaults, override) pair actually rendered — a few hundred at
+ * most, since both halves come from a fixed set of tables and literals. Cleared
+ * wholesale rather than evicted one at a time: reaching the limit means
+ * something is generating class strings dynamically, and an LRU would then
+ * thrash rather than fail visibly.
+ */
+const MERGE_CACHE_LIMIT = 1000;
+const mergeCache = new Map<string, string>();
+
+/**
+ * A primitive's own classes, with the caller's `className` allowed to win.
+ *
+ * Tailwind v4 emits same-property utilities in alphabetical/numeric order of
+ * class name, so between two of them the later-*sorting* name wins — not the one
+ * written last in the `class` attribute. On class order alone a primitive beats
+ * its own callers at whatever it sets: `size="xs"` with a caller's `px-0` would
+ * render `px-2`, and `size="sm"` with `text-sm` would render `text-xs`.
+ *
+ * This drops the defaults that the override contradicts, so the escape hatch the
+ * props cannot cover behaves the way its name implies.
+ *
+ * **It merges the override against the defaults, and nothing else.** Passing the
+ * whole string through `twMerge` in one go would be shorter, and would also
+ * quietly resolve collisions *between* the variant and size tables, which is
+ * what `Button.test.tsx` checks for. Those tables must never emit two of the
+ * same property, and a duplicate inside them must reach the DOM where the test
+ * can see it. Filtering per default class keeps both properties: internal
+ * duplicates survive untouched, and only the caller displaces anything.
+ */
+export function overridable(
+  base: Array<string | false | null | undefined>,
+  override?: string | false | null,
+): string {
+  const defaults = cx(...base);
+  if (!override) return defaults;
+
+  const key = `${defaults}\u0000${override}`;
+  const cached = mergeCache.get(key);
+  if (cached !== undefined) return cached;
+
+  const verbatim = new Set(override.split(/\s+/).filter(Boolean));
+  const kept = defaults.split(' ').filter((c) => {
+    // Already spelled out by the caller — keeping it too would just duplicate it.
+    if (verbatim.has(c)) return false;
+    // tailwind-merge preserves input order for survivors, so `c` survived iff it
+    // is still the first token.
+    const merged = twMerge(c, override);
+    return merged === c || merged.startsWith(`${c} `);
+  });
+
+  const result = kept.length > 0 ? `${kept.join(' ')} ${override}` : override;
+  if (mergeCache.size >= MERGE_CACHE_LIMIT) mergeCache.clear();
+  mergeCache.set(key, result);
+  return result;
+}
+
+/**
+ * The one focus treatment in the app: the border takes the accent colour and
+ * nothing else moves. There is no focus ring anywhere in this codebase, so
+ * adding one here would make these controls look unlike their neighbours.
+ */
+export const FIELD_BASE =
+  'bg-surface-raised border border-border-subtle text-text outline-none ' +
+  'transition-colors focus:border-accent/50 placeholder:text-text-faint ' +
+  'disabled:opacity-50 disabled:cursor-not-allowed';
+
+/**
+ * A field with no chrome: the shared focus, placeholder and disabled behaviour,
+ * but no background, border, radius or padding — the caller owns the surface.
+ *
+ * For full-bleed editing panes (the markdown editor, the chat composer) that sit
+ * directly on the page rather than in a form. It sets no colour or spacing at
+ * all, so a caller that wants a `p-5` and a `bg-bg-sunken` states them once
+ * rather than stating them *against* a form field's chrome. `overridable` would
+ * let the caller win either way; this is a named mode because "bare editing
+ * surface" is a different thing from "form field with the padding changed", not
+ * because the cascade forces it.
+ */
+export const FIELD_BARE =
+  'bg-transparent border-0 text-text outline-none ' +
+  'placeholder:text-text-faint disabled:opacity-50 disabled:cursor-not-allowed';
+
+/** Padding/type-scale steps the app actually uses on inputs. */
+export const FIELD_SIZES = {
+  sm: 'px-2 py-1 text-xs rounded',
+  md: 'px-3 py-2 text-sm rounded-lg',
+} as const;
+
+export type FieldSize = keyof typeof FIELD_SIZES;
diff --git a/web/src/hooks/useToastHotkeyShim.test.tsx b/web/src/hooks/useToastHotkeyShim.test.tsx
new file mode 100644
index 00000000..2d881e00
--- /dev/null
+++ b/web/src/hooks/useToastHotkeyShim.test.tsx
@@ -0,0 +1,103 @@
+import { ClickUIProvider } from '@clickhouse/click-ui';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { useToastHotkeyShim } from './useToastHotkeyShim';
+
+/**
+ * Rendered against the **real** `ClickUIProvider`, not a stand-in.
+ *
+ * The behaviour under test belongs to a Radix listener three packages down that
+ * Click UI mounts unconditionally and configures with nothing. A fake provider
+ * would assert that our own hook calls `stopPropagation`, which is not in doubt;
+ * what is worth pinning is that doing so is still enough to reach Radix's
+ * listener after a Click UI or Radix upgrade moves it.
+ *
+ * The `shim={false}` case is the negative control. Without it the suite would
+ * keep passing if Click UI dropped the toast viewport, if Radix changed the
+ * hotkey, or if the harness never dispatched a real F8 — three ways to be green
+ * while testing nothing.
+ */
+function Harness({ shim }: { shim: boolean }) {
+  return (
+    <ClickUIProvider theme="dark" persistTheme={false}>
+      {shim ? <WithShim /> : null}
+      <input aria-label="composer" />
+    </ClickUIProvider>
+  );
+}
+
+function WithShim() {
+  useToastHotkeyShim();
+  return null;
+}
+
+function pressF8(target: Element) {
+  fireEvent.keyDown(target, { key: 'F8', code: 'F8' });
+}
+
+describe('Click UI toast hotkey', () => {
+  const listeners: Array<() => void> = [];
+  afterEach(() => {
+    listeners.splice(0).forEach((off) => off());
+  });
+
+  function spyOnDocument() {
+    const seen = vi.fn();
+    document.addEventListener('keydown', seen);
+    listeners.push(() => document.removeEventListener('keydown', seen));
+    return seen;
+  }
+
+  it('steals focus from a text field when nothing intercepts it', () => {
+    // Negative control: with no shim, F8 pulls focus into the toast viewport.
+    render(<Harness shim={false} />);
+    const input = screen.getByRole('textbox', { name: 'composer' });
+    input.focus();
+    expect(document.activeElement).toBe(input);
+
+    pressF8(input);
+
+    expect(document.activeElement).not.toBe(input);
+    expect(document.activeElement?.tagName).toBe('OL');
+  });
+
+  it('leaves focus alone once the shim is mounted', () => {
+    render(<Harness shim />);
+    const input = screen.getByRole('textbox', { name: 'composer' });
+    input.focus();
+
+    pressF8(input);
+
+    expect(document.activeElement).toBe(input);
+  });
+
+  it('swallows only F8, and only as far as `document`', () => {
+    const seen = spyOnDocument();
+    render(<Harness shim />);
+    const input = screen.getByRole('textbox', { name: 'composer' });
+    input.focus();
+
+    fireEvent.keyDown(input, { key: 'b', code: 'KeyB' });
+    fireEvent.keyDown(input, { key: 'Escape', code: 'Escape' });
+    expect(seen).toHaveBeenCalledTimes(2);
+
+    pressF8(input);
+    expect(seen).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not suppress the key itself', () => {
+    // The browser and the platform own F8 — this is about one library's
+    // listener, so the event must not come back `defaultPrevented`.
+    render(<Harness shim />);
+    const input = screen.getByRole('textbox', { name: 'composer' });
+    const event = new KeyboardEvent('keydown', {
+      key: 'F8',
+      code: 'F8',
+      bubbles: true,
+      cancelable: true,
+    });
+    input.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(false);
+  });
+});
diff --git a/web/src/hooks/useToastHotkeyShim.ts b/web/src/hooks/useToastHotkeyShim.ts
new file mode 100644
index 00000000..890b4f9a
--- /dev/null
+++ b/web/src/hooks/useToastHotkeyShim.ts
@@ -0,0 +1,51 @@
+import { useEffect } from 'react'
+
+/**
+ * Keep Click UI's toast viewport from taking focus when F8 is pressed.
+ *
+ * `ClickUIProvider` unconditionally nests a `ToastProvider`, which
+ * unconditionally renders a Radix `Toast.Viewport`. Radix gives that viewport a
+ * default hotkey of F8 and implements it as a bare
+ * `document.addEventListener('keydown', …)` that calls `viewport.focus()`.
+ * Click UI renders `<RadixUIToast.Viewport className={…} />` with no other
+ * props, so its `hotkey` — which Radix would accept as `[]` to switch the
+ * behaviour off, it guards on `hotkey.length !== 0` — cannot be reached from
+ * outside the package.
+ *
+ * Nerve has no Click UI toast call sites, so the viewport is a permanently
+ * empty, invisible `<ol tabindex="-1">`. Pressing F8 therefore moves focus out
+ * of whatever the user was typing in and into nothing, with no visible
+ * feedback. That is worse than it sounds: the page-level shortcut handlers
+ * decide whether to act by asking whether focus is in a text field, so after an
+ * F8 the next plain `b`, `l`, `n` or `/` runs a shortcut instead of typing a
+ * character. It can also pull focus out of an open modal.
+ *
+ * `stopPropagation` on the **capture** phase at `window` is the earliest point
+ * in the dispatch, so the event never reaches the `document` listener Radix
+ * registered — regardless of which mounted first. `preventDefault` is
+ * deliberately NOT called: F8 belongs to the browser and the platform (it is
+ * "resume script execution" while devtools are paused), and this is about one
+ * library's listener, not about the key.
+ *
+ * The cost is that F8 reaches nothing below `window` — including React's own
+ * synthetic handlers, which are attached at the root container. Nothing in this
+ * app binds F8, and other `window`-capture listeners still receive it
+ * (`stopPropagation`, not `stopImmediatePropagation`).
+ *
+ * **Remove this** once Click UI forwards viewport props — passing
+ * `config={{ toast: { hotkey: [] } }}` through `ClickUIProvider` would then say
+ * the same thing declaratively — or exposes a way to opt out of the toast layer
+ * altogether. Verified against @clickhouse/click-ui 0.10.0 /
+ * @radix-ui/react-toast 1.2.2.
+ */
+export function useToastHotkeyShim(): void {
+  useEffect(() => {
+    const swallow = (event: KeyboardEvent) => {
+      // Matched on `code` because that is what Radix matches on:
+      // `hotkey.every((key) => event[key] || event.code === key)`.
+      if (event.code === 'F8') event.stopPropagation()
+    }
+    window.addEventListener('keydown', swallow, true)
+    return () => window.removeEventListener('keydown', swallow, true)
+  }, [])
+}
diff --git a/web/src/index.css b/web/src/index.css
index 9f02e423..c9b8c87c 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,7 +1,132 @@
+/* Cascade layer order — load-bearing, do not reorder.
+   Click UI ships all its styles (component rules AND design tokens) in one
+   `clickui` layer. Layer order beats selector specificity, so this line alone
+   decides who wins, and both neighbours matter:
+
+     base < clickui   Tailwind's preflight resets bare `button`/`input`/`select`
+                      /`textarea` to transparent, zero-padding, zero-radius,
+                      font:inherit. If preflight outranked click-ui, every
+                      Click UI control would render unstyled.
+     clickui < utilities
+                      so `className="mt-4"` on a Click UI component still wins,
+                      with no `!important`.
+
+   Declaring it explicitly also removes the dependency on the order Vite happens
+   to inject the CSS Module stylesheets in, which is not guaranteed. */
+@layer theme, base, clickui, components, utilities;
+
+/* Click UI's own stylesheets are NOT imported here: <ClickUIProvider> pulls in
+   tokens-light.css / tokens-dark.css / global.css itself, and each component
+   imports its own CSS Module. That keeps the per-component tree-shaking the
+   library is built for. (The package `exports` map has no wildcard, so deep
+   `dist/...` CSS imports do not resolve anyway.) */
 @import "tailwindcss";
 @import "highlight.js/styles/github-dark.min.css";
 
-/* ── Theme tokens ── */
+/* ═══════════════════════════════════════════════════════════════════════════
+   TOKEN REFERENCE — read this before touching a className.
+
+   Everything below is generated from Click UI's design tokens. Nerve keeps its
+   own `--theme-*` names, but every value derives from a Click UI token, so
+   light/dark switching is handled by `data-cui-theme` on <html> and there is
+   exactly one palette definition.
+
+   ───────────────────────────────────────────────────────────────────────────
+   1. TYPE SCALE — use a named step, never `text-[Npx]`.
+
+   Click UI's scale is 10/12/14/16/18/20/32px. Tailwind's built-in
+   xs/sm/base/lg/xl are already 12/14/16/18/20, so they ARE the Click UI scale
+   and are NOT redefined. Only the 10px step (`text-2xs`) and the 32px display
+   step (`text-display`) are added.
+
+       CLASS           PX
+       text-2xs        10
+       text-xs         12
+       text-sm         14
+       text-base       16
+       text-lg         18
+       text-xl         20
+       text-display    32
+
+   There is no step between them: round up. Two consequences of leaving the
+   built-ins alone:
+     • A named step carries a line-height; an arbitrary pixel size does not (it
+       inherits `normal`). `text-xs` is 12px/1rem, `text-sm` is 14px/1.25rem.
+       If a row must stay tight, add an explicit `leading-*` — do NOT go back
+       to an arbitrary pixel size.
+     • `text-2xs` ships 10px/14px so the densest rows stay dense.
+
+   ───────────────────────────────────────────────────────────────────────────
+   2. STATUS TOKENS — use these, not raw palette utilities (`emerald`/`red`/
+      `amber`/`blue`/`green`/`slate`-400/500 with /10–/25 alpha).
+
+   Each status has three variants, and the suffix names the CSS property it is
+   for, so there is nothing to guess:
+
+       STATUS    text (+ solid fill)   tinted surface     tinted border
+       success   text-success          bg-success-bg      border-success-border
+       error     text-error            bg-error-bg        border-error-border
+       warning   text-warning          bg-warning-bg      border-warning-border
+       info      text-info             bg-info-bg         border-info-border
+       neutral   text-neutral          bg-neutral-bg      border-neutral-bg
+
+   A tinted chip is `bg-success-bg border border-success-border text-success`.
+
+   ⚠ A SOLID FILL IS NOT `bg-<status>`. The bare status token is Click UI's
+   feedback *foreground*, a colour meant to sit as TEXT on the matching `-bg`
+   tint, so in dark mode it is pale: error #ffbaba, success #ccffd0, warning
+   #ffb88f. `bg-error text-white` measures 1.62:1. For a solid chip, dot or
+   badge use the `-solid` tokens, which are theme-independent and hold white
+   text in both themes:
+
+       bg-error-solid   text-white
+       bg-info-solid    text-white
+       bg-success-solid text-white
+       bg-warning-solid text-white
+
+   A small coloured dot with no text on it can use `bg-error` etc. quite
+   happily — the rule only bites when something has to be legible on top.
+
+   `-bg` is an opaque tint from `--global-color-feedback-*-background`; do not
+   stack an alpha modifier on it. `-border` is the foreground at 30% alpha, so
+   it reads on top of the matching `-bg`. Nerve's `error` is Click UI's
+   `danger`; the token name is `error` because that is what call sites use.
+
+   Hue identity colours (`text-hue-red`, `text-hue-emerald`, …) are for tool /
+   badge / category IDENTITY, not status. Keep using them for that; use the
+   status tokens above whenever the colour means "this succeeded / failed".
+
+   ───────────────────────────────────────────────────────────────────────────
+   3. ACCENT IS CLICKHOUSE YELLOW IN DARK MODE.
+
+   `--theme-accent` is #faff69 (dark) / #151515 (light). White text on it is
+   unreadable in dark mode, so text on accent must be `text-on-accent`:
+
+       bg-accent text-on-accent
+
+   `text-on-accent` is Click UI's primary-button text colour (#1f1f1c dark /
+   #ffffff light) and stays legible in both themes. Same for `bg-accent-hover`.
+   `text-accent` on a page/`bg-accent/10` surface is fine as-is.
+
+   ───────────────────────────────────────────────────────────────────────────
+   4. FONTS. Inter (sans) and Inconsolata (mono) are self-hosted via
+   @fontsource and imported in main.tsx. Use `font-mono` for monospace; it
+   resolves to Click UI's mono stack. Click UI also names 'Basier Square' for
+   display type — it is commercial, we do not ship it, and it falls back to
+   Inter. There is no `font-display` utility for that reason.
+
+   ───────────────────────────────────────────────────────────────────────────
+   5. NOT AVAILABLE. `prose*` classes appear in SourcesPage.tsx and
+   Sources/renderers/MarkdownRenderer.tsx but @tailwindcss/typography is not
+   installed, so they generate nothing today. Do not build on them — use
+   `.markdown-content` (defined below) instead.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Tailwind colour theme ──
+   `inline` matters: it makes `bg-accent/15` expand to
+   color-mix(… var(--theme-accent) …) instead of going through a second
+   indirection, which is what keeps alpha modifiers working on tokens whose
+   value changes at runtime with the theme. */
 @theme inline {
   /* Surfaces */
   --color-bg: var(--theme-bg);
@@ -25,13 +150,30 @@
   --color-accent-hover: var(--theme-accent-hover);
   --color-accent-muted: var(--theme-accent-muted);
   --color-accent-text: var(--theme-accent-text);
+  --color-on-accent: var(--theme-on-accent);
   /* Links */
   --color-link: var(--theme-link);
-  /* Semantic */
+  --color-link-hover: var(--theme-link-hover);
+  /* Semantic status — text/solid, tinted surface, tinted border */
   --color-success: var(--theme-success);
+  --color-success-bg: var(--theme-success-bg);
+  --color-success-border: var(--theme-success-border);
   --color-error: var(--theme-error);
+  --color-error-bg: var(--theme-error-bg);
+  --color-error-border: var(--theme-error-border);
+  --color-error-solid: var(--theme-error-solid);
+  --color-success-solid: var(--theme-success-solid);
+  --color-warning-solid: var(--theme-warning-solid);
+  --color-info-solid: var(--theme-info-solid);
   --color-warning: var(--theme-warning);
+  --color-warning-bg: var(--theme-warning-bg);
+  --color-warning-border: var(--theme-warning-border);
   --color-info: var(--theme-info);
+  --color-info-bg: var(--theme-info-bg);
+  --color-info-border: var(--theme-info-border);
+  --color-neutral: var(--theme-neutral);
+  --color-neutral-bg: var(--theme-neutral-bg);
+  --color-neutral-border: var(--theme-neutral-border);
   /* Diff */
   --color-diff-add: var(--theme-diff-add);
   --color-diff-del: var(--theme-diff-del);
@@ -50,6 +192,39 @@
   --color-hue-teal: var(--theme-hue-teal);
   --color-hue-sky: var(--theme-hue-sky);
   --color-hue-violet: var(--theme-hue-violet);
+
+  /* Font stacks — sourced from Click UI so there is one definition. The
+     fallback list keeps text readable if the token layer has not loaded. */
+  --font-sans: var(--typography-font-families-regular, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
+  --font-mono: var(--typography-font-families-mono, "Inconsolata", ui-monospace, "SFMono-Regular", Consolas, monospace);
+}
+
+/* ── Tailwind type scale ──
+   Only the two steps Tailwind lacks. xs/sm/base/lg/xl already equal Click UI's
+   12/14/16/18/20 and are deliberately left untouched — see §1 above. */
+@theme {
+  --text-2xs: 0.625rem;                        /* 10px — Click UI font-sizes-0 */
+  --text-2xs--line-height: calc(0.875 / 0.625);/* 14px, keeps dense rows dense */
+  --text-display: 2rem;                        /* 32px — Click UI font-sizes-6 */
+  --text-display--line-height: calc(2.5 / 2);  /* 40px */
+
+  /* ── Emphasis weights for Inter ──
+     The panel leans on `font-medium` for almost all of its emphasis: 151 of the
+     170 weighted elements in the app, against 17 `font-semibold` and 2
+     `font-bold`. Inter's steps sit close together — measured on one string at
+     14px, 400 sets 186.6px and 500 sets 188.9px, a 1.2% difference — too little
+     to separate a heading, label or count from body copy. 600 against 400 is
+     191.0px against 186.6px plus visibly heavier stems.
+
+     Remapping the scale keeps `font-medium` meaning "the emphasised one" and
+     leaves a single place to tune it. Both target weights are loaded (main.tsx
+     ships Inter 400/500/600/700), so this costs nothing.
+
+     `font-semibold` moves with it so the two do not collapse into one level;
+     `font-bold` stays at 700 and coincides with semibold, which is fine at two
+     call sites. If this reads too heavy, 500/600 is the lighter pairing. */
+  --font-weight-medium: 600;
+  --font-weight-semibold: 700;
 }
 
 /* ── Layout (theme-independent) ── */
@@ -57,150 +232,292 @@
   /* Conversation reading-column max width. Defaults to the previous fixed
      768px cap; ChatWidthHandle overrides this on :root at runtime so the
      column is drag-resizable (persisted to localStorage 'nerve_chat_width'). */
-  --chat-width: 48rem; /* 768px */
+  --chat-width: 48rem;
 }
 
-/* ── Dark palette (default) ── */
+/* ═══ Palette ═══
+   Unlayered on purpose. Click UI's tokens live in the `clickui` layer, so
+   unlayered declarations here outrank them and we can safely re-point Nerve's
+   names at Click UI's without an !important anywhere.
+
+   There is only ONE definition of almost every `--theme-*` variable, because
+   the Click UI globals it derives from are themselves defined twice — on
+   `:root, [data-cui-theme="light"]` and on `[data-cui-theme="dark"]` — and
+   themeStore always writes the *resolved* theme to `data-cui-theme` (including
+   when the preference is 'system', and it re-writes on OS change). So the theme
+   switch happens one level down. */
 :root {
+  /* Surfaces. Click UI gives two page surfaces (background-default and
+     background-muted); the intermediate steps interpolate towards
+     stroke-default, which is the next tone up in dark and the next tone down
+     in light — so one formula produces the right direction in both themes. */
+  --theme-bg: var(--click-global-color-background-default);
+  --theme-surface: var(--click-global-color-background-muted);
+  --theme-surface-raised: color-mix(in oklab, var(--click-global-color-background-muted) 50%, var(--click-global-color-stroke-default));
+  --theme-surface-hover: color-mix(in oklab, var(--click-global-color-background-muted) 25%, var(--click-global-color-stroke-default));
+  /* Code wells match the muted surface (Click UI's own code/split tone); the
+     1px border on `.markdown-content pre` is what separates them. */
+  --theme-code-bg: var(--click-global-color-background-muted);
+  /* --theme-bg-sunken is defined per theme below: "recessed" is darker than the
+     page in both themes, and a single percentage cannot move white and #1f1f1c
+     by the same perceptual amount. */
+
+  /* Text. Click UI ships three levels (default / muted / disabled); Nerve needs
+     five, so the ramp is interpolated between `text-default` and
+     `text-disabled` — the two ends of Click UI's own grey axis.
+
+     The percentages are NOT evenly spaced, and they DIFFER PER THEME — the
+     light overrides live in the `[data-cui-theme="light"]` block below. Each is
+     solved so the step lands on a target contrast ratio against
+     `--theme-surface-raised`, the LIGHTEST of the three backgrounds body text
+     sits on (#2d2d2d dark, #ecedee light) and therefore the worst case. Solving
+     against `--theme-surface` instead leaves every badge and pill that sits on
+     a raised surface at 4.43:1 — under the line by just enough to matter, and
+     invisible unless you audit against all three. Targets are 11 / 7.5 / 5.7 /
+     4.7 on that worst background. Measured (bg / surface / raised):
+
+                       dark                     light
+       text            16.52 / 14.74 / 13.77    18.20 / 16.99 / 15.53
+       text-secondary  13.20 / 11.78 / 11.00    12.89 / 12.04 / 11.00
+       text-muted       9.00 /  8.03 /  7.50     8.79 /  8.21 /  7.50
+       text-dim         6.84 /  6.10 /  5.70     6.68 /  6.24 /  5.70
+       text-faint       5.64 /  5.03 /  4.70     5.51 /  5.14 /  4.70
+
+     One shared set of percentages does NOT work: the two themes travel opposite
+     directions from `text-default`, and contrast is not linear in the mix, so
+     the light `text-faint` lands at 3.86:1 on dark's numbers. Both sets are
+     needed.
+
+     Click UI's own `text-muted` and `text-disabled` cannot serve as the lower
+     steps. `text-disabled` is a *control* colour — deliberately inert, never
+     meant to carry copy — while Nerve spends these steps on timestamps, counts,
+     paths and labels. Light `text-muted` is itself only 4.77:1 on `surface`, so
+     there is no room to fit two more legible steps under it. The whole ramp is
+     solved instead.
+
+     To retune: change a target, re-run `ladder2.mjs` in the sweep harness, and
+     paste the percentages back into BOTH blocks. Do not hand-edit a percentage
+     without re-measuring — the mix is in oklab, so ratio is not linear in it. */
+  --theme-text: var(--click-global-color-text-default);
+  --theme-text-secondary: color-mix(in oklab, var(--click-global-color-text-default) 81%, var(--click-global-color-text-disabled));
+  --theme-text-muted: color-mix(in oklab, var(--click-global-color-text-default) 51%, var(--click-global-color-text-disabled));
+  --theme-text-dim: color-mix(in oklab, var(--click-global-color-text-default) 32%, var(--click-global-color-text-disabled));
+  --theme-text-faint: color-mix(in oklab, var(--click-global-color-text-default) 19%, var(--click-global-color-text-disabled));
+  /* Placeholders are the one text-like role where `disabled` IS the right
+     token: an empty field is genuinely inert, and the label above it carries
+     the meaning. Left on Click UI's own value deliberately. */
+  --theme-placeholder: var(--click-global-color-text-disabled);
+
+  /* Borders. stroke-muted is identical to stroke-default in both Click UI
+     themes, so `subtle` fades stroke-default towards the page instead. */
+  --theme-border: var(--click-global-color-stroke-default);
+  --theme-border-subtle: color-mix(in oklab, var(--click-global-color-stroke-default) 75%, var(--click-global-color-background-default));
+
+  /* Accent — ClickHouse yellow in dark, near-black in light. `on-accent` is the
+     only legible text colour on top of it; see §3 above. */
+  --theme-accent: var(--click-global-color-accent-default);
+  --theme-accent-hover: var(--click-button-basic-color-primary-background-hover);
+  --theme-accent-muted: color-mix(in oklab, var(--click-global-color-accent-default) 15%, transparent);
+  --theme-accent-text: var(--click-global-color-accent-default);
+  --theme-on-accent: var(--click-button-basic-color-primary-text-default);
+
+  /* Links */
+  --theme-link: var(--click-global-color-text-link-default);
+  --theme-link-hover: var(--click-global-color-text-link-hover);
+
+  /* Status. Click UI's feedback pairs are foreground (text/icon) + background
+     (opaque tint); the border is the foreground at 30% so it reads on the tint. */
+  --theme-success: var(--global-color-feedback-success-foreground);
+  --theme-success-bg: var(--global-color-feedback-success-background);
+  --theme-success-border: color-mix(in oklab, var(--global-color-feedback-success-foreground) 30%, transparent);
+  --theme-error: var(--global-color-feedback-danger-foreground);
+  --theme-error-bg: var(--global-color-feedback-danger-background);
+  --theme-error-border: color-mix(in oklab, var(--global-color-feedback-danger-foreground) 30%, transparent);
+  /* ── Solid status fills, for a saturated block of colour carrying white text:
+     a notification count badge, a delete-confirm button.
+
+     These exist because `bg-error` and friends are WRONG for a fill and it is
+     not obvious. The bare status token is Click UI's feedback *foreground* — a
+     colour meant to sit as text on the matching `-bg` tint — so in dark mode it
+     is pale: `error` #ffbaba, `success` #ccffd0, `warning` #ffb88f. White on
+     `bg-error` measures 1.62:1. `hue-*` is no better: it is an identity colour
+     for text on the page, so it flips per theme (#ff7575 in dark, 2.61:1).
+
+     Raw ramp entries, deliberately: the ramp is theme-independent, which is the
+     only way one fill can hold white text in both themes. 6.4–7.7:1 each. */
+  --theme-error-solid: var(--palette-danger-600);    /* #c10000  6.43:1 */
+  --theme-success-solid: var(--palette-success-800); /* #006108  7.74:1 */
+  --theme-warning-solid: var(--palette-warning-700); /* #a33c00  6.56:1 */
+  --theme-info-solid: var(--palette-info-600);       /* #104ec6  7.17:1 */
+  --theme-warning: var(--global-color-feedback-warning-foreground);
+  --theme-warning-bg: var(--global-color-feedback-warning-background);
+  --theme-warning-border: color-mix(in oklab, var(--global-color-feedback-warning-foreground) 30%, transparent);
+  --theme-info: var(--global-color-feedback-info-foreground);
+  --theme-info-bg: var(--global-color-feedback-info-background);
+  --theme-info-border: color-mix(in oklab, var(--global-color-feedback-info-foreground) 30%, transparent);
+  --theme-neutral: var(--global-color-feedback-neutral-foreground);
+  --theme-neutral-bg: var(--global-color-feedback-neutral-background);
+  --theme-neutral-border: var(--global-color-feedback-neutral-stroke);
+
+  /* Diff. `*-bg` is the row tint; the other two are the +/- indicator and
+     gutter colour. Chat/diffTheme.ts forwards all four into the @pierre/diffs
+     shadow root, so do not rename them. Deriving them from the feedback pair
+     means the tint is pale-on-dark and dark-on-light automatically. */
+  --theme-diff-add: var(--global-color-feedback-success-foreground);
+  --theme-diff-del: var(--global-color-feedback-danger-foreground);
+  --theme-diff-add-bg: var(--global-color-feedback-success-background);
+  --theme-diff-del-bg: var(--global-color-feedback-danger-background);
+}
+
+/* ── Per-theme remainder ──
+   `--palette-*` is the raw ramp: 152 entries with identical values in both
+   Click UI theme files, so anything derived from it has to pick its own step
+   per theme. That is the whole reason these two blocks exist; keep them small.
+   Same specificity as each other (0,1,0), so the light block wins by coming
+   second whenever the attribute says light. */
+:root,
+[data-cui-theme="dark"] {
   color-scheme: dark;
-  --theme-bg: #0f0f0f;
-  --theme-bg-sunken: #0c0c0c;
-  --theme-surface: #141414;
-  --theme-surface-raised: #1a1a1a;
-  --theme-surface-hover: #1f1f1f;
-  --theme-code-bg: #161616;
-  --theme-text: #e0e0e0;
-  --theme-text-secondary: #cccccc;
-  --theme-text-muted: #888888;
-  --theme-text-dim: #666666;
-  --theme-text-faint: #444444;
-  --theme-placeholder: #555555;
-  --theme-border: #2a2a2a;
-  --theme-border-subtle: #222222;
-  --theme-accent: #6366f1;
-  --theme-accent-hover: #818cf8;
-  --theme-accent-muted: rgba(99, 102, 241, 0.15);
-  --theme-accent-text: #c7d2fe;
-  --theme-link: #818cf8;
-  --theme-success: #4ade80;
-  --theme-error: #f87171;
-  --theme-warning: #fbbf24;
-  --theme-info: #60a5fa;
-  --theme-diff-add: var(--color-green-300);    /* original: light pastel text */
-  --theme-diff-del: var(--color-red-300);      /* original: light pastel text */
-  --theme-diff-add-bg: var(--color-green-950); /* original: very dark tint base */
-  --theme-diff-del-bg: var(--color-red-950);   /* original: very dark tint base */
-  /* Hue indicators: -400 for dark mode (bright on dark bg) */
-  --theme-hue-yellow: var(--color-yellow-400);
-  --theme-hue-blue: var(--color-blue-400);
-  --theme-hue-emerald: var(--color-emerald-400);
-  --theme-hue-green: var(--color-green-400);
-  --theme-hue-red: var(--color-red-400);
-  --theme-hue-purple: var(--color-purple-400);
-  --theme-hue-amber: var(--color-amber-400);
-  --theme-hue-cyan: var(--color-cyan-400);
-  --theme-hue-orange: var(--color-orange-400);
-  --theme-hue-teal: var(--color-teal-400);
-  --theme-hue-sky: var(--color-sky-400);
-  --theme-hue-violet: var(--color-violet-400);
-}
-
-/* ── Light palette (explicit) ── */
-[data-theme="light"] {
+  --theme-bg-sunken: var(--palette-neutral-800);   /* #1d1d1d, under #1f1f1c */
+  /* Identity hues — bright steps so they carry on a dark page. */
+  --theme-hue-yellow: var(--palette-brand-300);    /* #faff69 */
+  --theme-hue-amber: var(--palette-sunrise-300);   /* #ffcf33 */
+  --theme-hue-orange: var(--palette-warning-300);  /* #ff9457 */
+  --theme-hue-red: var(--palette-danger-300);      /* #ff7575 */
+  --theme-hue-emerald: var(--palette-success-300); /* #66ff73 */
+  --theme-hue-green: var(--palette-success-400);   /* #33ff44 */
+  --theme-hue-teal: var(--palette-teal-300);       /* #6df8e1 */
+  --theme-hue-cyan: var(--palette-babyblue-300);   /* #33e4ff */
+  --theme-hue-sky: var(--palette-info-300);        /* #6d9bf3 */
+  --theme-hue-blue: var(--palette-info-400);       /* #437eef */
+  /* Violet sits two ramp steps lighter than the other identity hues on purpose.
+     It is the most saturated ramp in the palette and it collapses fastest under
+     an opacity modifier, which is how these are almost always used. At -300 and
+     -400, `text-hue-violet/60` measures 2.79:1 on the sidebar and
+     `text-hue-purple/60` just 2.03:1 on a raised surface — below the 3:1 floor
+     for a non-text glyph. -200/-300 give 3.71 and 2.79 at 60%, and clear 4.5:1
+     by /80. */
+  --theme-hue-violet: var(--palette-violet-200);   /* #dd99ff */
+  --theme-hue-purple: var(--palette-violet-300);   /* #cc66ff */
+}
+
+[data-cui-theme="light"] {
   color-scheme: light;
-  --theme-bg: #f5f5f5;
-  --theme-bg-sunken: #ebebeb;
-  --theme-surface: #ffffff;
-  --theme-surface-raised: #f8f8f8;
-  --theme-surface-hover: #e8e8e8;
-  --theme-code-bg: #f3f4f6;
-  --theme-text: #1a1a1a;
-  --theme-text-secondary: #333333;
-  --theme-text-muted: #666666;
-  --theme-text-dim: #999999;
-  --theme-text-faint: #bbbbbb;
-  --theme-placeholder: #9ca3af;
-  --theme-border: #d4d4d4;
-  --theme-border-subtle: #e5e7eb;
-  --theme-accent: #4f46e5;
-  --theme-accent-hover: #4338ca;
-  --theme-accent-muted: rgba(79, 70, 229, 0.10);
-  --theme-accent-text: #3730a3;
-  --theme-link: #4f46e5;
-  --theme-success: #16a34a;
-  --theme-error: #dc2626;
-  --theme-warning: #d97706;
-  --theme-info: #2563eb;
-  --theme-diff-add: var(--color-green-800);    /* dark text on light bg */
-  --theme-diff-del: var(--color-red-800);      /* dark text on light bg */
-  --theme-diff-add-bg: var(--color-green-300); /* light tint base */
-  --theme-diff-del-bg: var(--color-red-300);   /* light tint base */
-  /* Hue indicators: -600 for light mode (dark on light bg) */
-  --theme-hue-yellow: var(--color-yellow-600);
-  --theme-hue-blue: var(--color-blue-600);
-  --theme-hue-emerald: var(--color-emerald-600);
-  --theme-hue-green: var(--color-green-600);
-  --theme-hue-red: var(--color-red-600);
-  --theme-hue-purple: var(--color-purple-600);
-  --theme-hue-amber: var(--color-amber-600);
-  --theme-hue-cyan: var(--color-cyan-600);
-  --theme-hue-orange: var(--color-orange-400);
-  --theme-hue-teal: var(--color-teal-600);
-  --theme-hue-sky: var(--color-sky-600);
-  --theme-hue-violet: var(--color-violet-600);
-}
-
-/* ── System preference (when no explicit data-theme) ── */
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme="dark"]) {
-    color-scheme: light;
-    --theme-bg: #f5f5f5;
-    --theme-bg-sunken: #ebebeb;
-    --theme-surface: #ffffff;
-    --theme-surface-raised: #f8f8f8;
-    --theme-surface-hover: #e8e8e8;
-    --theme-code-bg: #f3f4f6;
-    --theme-text: #1a1a1a;
-    --theme-text-secondary: #333333;
-    --theme-text-muted: #666666;
-    --theme-text-dim: #999999;
-    --theme-text-faint: #bbbbbb;
-    --theme-placeholder: #9ca3af;
-    --theme-border: #d4d4d4;
-    --theme-border-subtle: #e5e7eb;
-    --theme-accent: #4f46e5;
-    --theme-accent-hover: #4338ca;
-    --theme-accent-muted: rgba(79, 70, 229, 0.10);
-    --theme-accent-text: #3730a3;
-    --theme-link: #4f46e5;
-    --theme-success: #16a34a;
-    --theme-error: #dc2626;
-    --theme-warning: #d97706;
-    --theme-info: #2563eb;
-    --theme-diff-add: var(--color-green-800);    /* dark text on light bg */
-    --theme-diff-del: var(--color-red-800);      /* dark text on light bg */
-    --theme-diff-add-bg: var(--color-green-300); /* light tint base */
-    --theme-diff-del-bg: var(--color-red-300);   /* light tint base */
-    --theme-hue-yellow: var(--color-yellow-600);
-    --theme-hue-blue: var(--color-blue-600);
-    --theme-hue-emerald: var(--color-emerald-600);
-    --theme-hue-green: var(--color-green-600);
-    --theme-hue-red: var(--color-red-600);
-    --theme-hue-purple: var(--color-purple-600);
-    --theme-hue-amber: var(--color-amber-600);
-    --theme-hue-cyan: var(--color-cyan-600);
-    --theme-hue-orange: var(--color-orange-400);
-    --theme-hue-teal: var(--color-teal-600);
-    --theme-hue-sky: var(--color-sky-600);
-    --theme-hue-violet: var(--color-violet-600);
-  }
+
+  /* ── Elevation runs the other way in light ──
+     The shared derivation above maps `bg` onto Click UI's `background-default`
+     and `surface` onto `background-muted`. In dark that is right: muted (#1c1c1c)
+     is lighter than default (#151515), so a card lifts off the page. In light it
+     inverts — default is #ffffff and muted is #f6f7fa — which would make the
+     page the brightest thing on screen and put every card *below* it, in a grey
+     2/255 from the lane behind it: 1.016:1 card-to-lane, close enough that the
+     cards vanish into the columns of the task board.
+
+     So light gets its own ramp: a grey page, white cards, and controls tinted
+     back down towards the page. That is what "raised" has to mean when the page
+     is not the darkest surface, and it holds card-to-lane at 1.053.
+
+       bg      #f6f7fa   page
+       sunken  #edeef1   recessed wells
+       surface #ffffff   cards, panels, assistant messages
+       raised  #fafbfc   inputs and secondary buttons sitting on a card
+       hover   #eff0f3   hover, which has to darken rather than lighten here
+
+     The text ramp below is solved against the darkest background, `sunken`
+     #edeef1, where the measured floor is 4.68 — over AA. Re-measure if you move
+     `sunken`, since that is the binding one. */
+  --theme-bg: var(--click-global-color-background-muted);
+  --theme-bg-sunken: color-mix(in oklab, var(--click-global-color-background-muted) 45%, var(--click-global-color-stroke-default));
+  --theme-surface: var(--click-global-color-background-default);
+  --theme-surface-raised: color-mix(in oklab, var(--click-global-color-background-default) 45%, var(--click-global-color-background-muted));
+  --theme-surface-hover: color-mix(in oklab, var(--click-global-color-background-muted) 55%, var(--click-global-color-stroke-default));
+
+  /* Text ramp, light half. Same construction as the dark ramp in the block
+     above — see the long note there for why these exist and how to retune —
+     but solved against white / #f6f7fa, which needs its own percentages. */
+  --theme-text-secondary: color-mix(in oklab, var(--click-global-color-text-default) 77%, var(--click-global-color-text-disabled));
+  --theme-text-muted: color-mix(in oklab, var(--click-global-color-text-default) 58%, var(--click-global-color-text-disabled));
+  --theme-text-dim: color-mix(in oklab, var(--click-global-color-text-default) 45%, var(--click-global-color-text-disabled));
+  --theme-text-faint: color-mix(in oklab, var(--click-global-color-text-default) 37%, var(--click-global-color-text-disabled));
+
+  /* ── Two AA corrections, each one palette step darker ──
+     Click UI's own light-theme values fail WCAG AA on their intended
+     backgrounds, so these are the only places we knowingly diverge from the
+     design system. Both replacements are still Click UI palette entries, and
+     `info-600` is the colour Click UI itself uses for link-hover.
+
+       token         Click UI's value  ours              on white     on its tint
+       --theme-info  info-400 #437eef  info-600 #104ec6  3.84 / 7.17  3.32 / 6.20
+       --theme-link  same as info
+
+     Each ratio pair reads Click UI's value / ours.
+
+     `hue-emerald` and `hue-green` follow `--theme-success` for the same reason:
+     they are spent on text 23 times (the `$` in every shell block,
+     "Available"/"Connected" labels, skill counts) rather than only on dots.
+
+     Dark mode needs no correction — it passes comfortably (success 10.5,
+     info 7.2). Revert by deleting these lines if design-system fidelity is
+     worth more than AA here.
+
+     ── The green, specifically ──
+     Click UI's light `success` foreground is success-700 #008a0b, which is
+     3.90:1 on the darkest light background — under AA. The next step down,
+     success-800 #006108, passes at 6.67 but reads as a forest green rather
+     than a green.
+
+     `#007109` is the greenest point on the 700 -> 800 line that still clears
+     4.5:1 on every background the sweep actually finds it on — solved rather
+     than picked, and the binding case is not a plain surface:
+
+       plain    white 5.85   page 5.46   raised 5.65   sunken 5.05
+       15% wash of itself, which is what MemuPage's type chips do:
+                white 4.96   page 4.65   raised 4.82   sunken 4.32*
+
+     Colour on a 15% wash of *itself* is inherently low-contrast — the tint moves
+     with the foreground — so the chips set the floor. Going further, to
+     `#007e0a`, is a visibly better green and still clears everything plain
+     (worst 4.54), but drops the `knowledge` chip on /memory to 4.24. Change the
+     percentage below to move along that line.
+
+     (*) no chip sits on a sunken surface today; the sweep is the authority on
+     which combinations exist. Re-solve if that changes. */
+  --theme-info: var(--palette-info-600);
+  --theme-link: var(--palette-info-600);
+  --theme-success: color-mix(in oklab, var(--palette-success-700) 35%, var(--palette-success-800));
+  /* Identity hues — dark steps so they carry on a white page. */
+  /* ── Yellow moves ramps in light ──
+     brand is a LIME yellow (hue 62°), and darkening lime lands on olive:
+     brand-700 #686b00 reads as moss, which is wrong for a starred star. The
+     sunrise ramp is the same yellow at 46° — true gold — so light mode takes
+     its dark step instead. sunrise-700 alone is 4.41:1 on `sunken` and 4.49 on
+     `hover`, both under AA, so a step of -800 is mixed in until every light
+     surface clears 4.5 (same construction as the green above): 90/10 lands at
+     ≈#866600, measured white 5.37 / hover 4.71 / sunken 4.62. This makes
+     hue-yellow and hue-amber near-neighbours in light; they share no call
+     sites (yellow = stars/board, amber = plan/workflow chrome), and
+     emerald/green already set the precedent of hues converging in light.
+     Dark mode keeps brand-300 = the accent yellow. */
+  --theme-hue-yellow: color-mix(in oklab, var(--palette-sunrise-700) 90%, var(--palette-sunrise-800));
+  --theme-hue-amber: var(--palette-sunrise-700);   /* #8a6900 */
+  --theme-hue-orange: var(--palette-warning-700);  /* #a33c00 */
+  --theme-hue-red: var(--palette-danger-600);      /* #c10000 */
+  --theme-hue-emerald: var(--theme-success);       /* #007109 — see the green note above */
+  --theme-hue-green: var(--theme-success);         /* #007109 */
+  --theme-hue-teal: var(--palette-teal-700);       /* #067462 */
+  --theme-hue-cyan: var(--palette-babyblue-700);   /* #006170 */
+  --theme-hue-sky: var(--palette-info-500);        /* #1d64ec */
+  --theme-hue-blue: var(--palette-info-600);       /* #104ec6 */
+  --theme-hue-violet: var(--palette-violet-600);   /* #8800cc */
+  --theme-hue-purple: var(--palette-violet-700);   /* #660099 */
 }
 
+
 body {
   margin: 0;
   background: var(--theme-bg);
   color: var(--theme-text);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-family: var(--typography-font-families-regular, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
 }
 
 * { box-sizing: border-box; }
@@ -218,14 +535,12 @@ body {
    to a greyer surface so the two roles read as distinct bands when scrolling. */
 .msg-assistant { background: var(--theme-bg-sunken); }
 .msg-user { background: var(--theme-surface-hover); }
-/* Light: invert — assistant messages are lighter (white) to stand out; user
-   prompts stay on the page bg (already distinct from the white assistant band). */
-[data-theme="light"] .msg-assistant { background: var(--theme-surface); }
-[data-theme="light"] .msg-user { background: transparent; }
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme="dark"]) .msg-assistant { background: var(--theme-surface); }
-  :root:not([data-theme="dark"]) .msg-user { background: transparent; }
-}
+/* Light: the page is white, so "stand out" has to mean the tinted surface
+   rather than a lighter one — the polarity flips but the two roles still read
+   as alternating bands. Keyed on `data-cui-theme`, which always holds the
+   resolved theme, so this also covers preference='system'. */
+[data-cui-theme="light"] .msg-assistant { background: var(--theme-surface); }
+[data-cui-theme="light"] .msg-user { background: transparent; }
 
 /* Markdown rendering styles */
 .markdown-content h1 { font-size: 1.5em; font-weight: 600; margin: 0.8em 0 0.4em; }
@@ -236,7 +551,7 @@ body {
 .markdown-content li { margin: 0.2em 0; line-height: 1.5; }
 .markdown-content blockquote { border-left: 3px solid var(--theme-text-faint); padding-left: 1em; margin: 0.5em 0; color: var(--theme-text-muted); }
 .markdown-content a { color: var(--theme-link); text-decoration: none; }
-.markdown-content a:hover { text-decoration: underline; }
+.markdown-content a:hover { color: var(--theme-link-hover); text-decoration: underline; }
 .markdown-content table { border-collapse: collapse; margin: 0.5em 0; width: 100%; }
 .markdown-content th, .markdown-content td { border: 1px solid var(--theme-border-subtle); padding: 0.4em 0.8em; text-align: left; }
 .markdown-content th { background: var(--theme-surface-raised); font-weight: 600; }
@@ -250,7 +565,7 @@ body {
   padding: 0.15em 0.4em;
   border-radius: 3px;
   font-size: 0.9em;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-family: var(--typography-font-families-mono, "Inconsolata", ui-monospace, "SFMono-Regular", Consolas, monospace);
 }
 
 /* Code blocks */
@@ -266,52 +581,40 @@ body {
 .markdown-content pre code {
   background: none;
   padding: 0;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-family: var(--typography-font-families-mono, "Inconsolata", ui-monospace, "SFMono-Regular", Consolas, monospace);
 }
 
 /* File editor line numbers */
 .editor-textarea {
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-family: var(--typography-font-families-mono, "Inconsolata", ui-monospace, "SFMono-Regular", Consolas, monospace);
   tab-size: 2;
   line-height: 1.5;
 }
 
-/* ── Highlight.js light mode overrides ── */
-/* Both explicit [data-theme="light"] and system-preference light share the same syntax palette.
-   We use :is() to merge selectors and avoid duplication. */
-:is([data-theme="light"], :root:not([data-theme="dark"]):where(@media (prefers-color-scheme: light) *)) .hljs {
-  color: #24292e;
-  background: var(--theme-code-bg);
-}
-[data-theme="light"] .hljs { color: #24292e; background: var(--theme-code-bg); }
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme="dark"]) .hljs { color: #24292e; background: var(--theme-code-bg); }
-}
-
-/* Shared light syntax colors — helper class applied via both selectors */
-[data-theme="light"] .hljs-comment, [data-theme="light"] .hljs-quote { color: #6a737d; }
-[data-theme="light"] .hljs-keyword, [data-theme="light"] .hljs-selector-tag { color: #d73a49; }
-[data-theme="light"] .hljs-string { color: #032f62; }
-[data-theme="light"] .hljs-number, [data-theme="light"] .hljs-literal { color: #005cc5; }
-[data-theme="light"] .hljs-built_in, [data-theme="light"] .hljs-type { color: #e36209; }
-[data-theme="light"] .hljs-title, [data-theme="light"] .hljs-section, [data-theme="light"] .hljs-name { color: #6f42c1; }
-[data-theme="light"] .hljs-attr, [data-theme="light"] .hljs-attribute { color: #005cc5; }
-[data-theme="light"] .hljs-variable { color: #e36209; }
-[data-theme="light"] .hljs-deletion { color: #b31d28; background: #ffeef0; }
-[data-theme="light"] .hljs-addition { color: #22863a; background: #f0fff4; }
-
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme="dark"]) .hljs-comment, :root:not([data-theme="dark"]) .hljs-quote { color: #6a737d; }
-  :root:not([data-theme="dark"]) .hljs-keyword, :root:not([data-theme="dark"]) .hljs-selector-tag { color: #d73a49; }
-  :root:not([data-theme="dark"]) .hljs-string { color: #032f62; }
-  :root:not([data-theme="dark"]) .hljs-number, :root:not([data-theme="dark"]) .hljs-literal { color: #005cc5; }
-  :root:not([data-theme="dark"]) .hljs-built_in, :root:not([data-theme="dark"]) .hljs-type { color: #e36209; }
-  :root:not([data-theme="dark"]) .hljs-title, :root:not([data-theme="dark"]) .hljs-section, :root:not([data-theme="dark"]) .hljs-name { color: #6f42c1; }
-  :root:not([data-theme="dark"]) .hljs-attr, :root:not([data-theme="dark"]) .hljs-attribute { color: #005cc5; }
-  :root:not([data-theme="dark"]) .hljs-variable { color: #e36209; }
-  :root:not([data-theme="dark"]) .hljs-deletion { color: #b31d28; background: #ffeef0; }
-  :root:not([data-theme="dark"]) .hljs-addition { color: #22863a; background: #f0fff4; }
-}
+/* ── Highlight.js light mode overrides ──
+   github-dark.min.css is imported unconditionally above (unlayered, all rules
+   at specificity 0,1,0) and patched here for light mode at 0,2,0. Keyed on
+   `data-cui-theme` so it also covers preference='system', and driven off the
+   Click UI palette so the syntax colours belong to the same system as the
+   rest of the UI. */
+[data-cui-theme="light"] .hljs { color: var(--theme-text); background: var(--theme-code-bg); }
+[data-cui-theme="light"] .hljs-comment,
+[data-cui-theme="light"] .hljs-quote { color: var(--palette-slate-600); }
+[data-cui-theme="light"] .hljs-keyword,
+[data-cui-theme="light"] .hljs-selector-tag { color: var(--palette-danger-600); }
+[data-cui-theme="light"] .hljs-string { color: var(--palette-info-700); }
+[data-cui-theme="light"] .hljs-number,
+[data-cui-theme="light"] .hljs-literal { color: var(--palette-info-600); }
+[data-cui-theme="light"] .hljs-built_in,
+[data-cui-theme="light"] .hljs-type { color: var(--palette-warning-700); }
+[data-cui-theme="light"] .hljs-title,
+[data-cui-theme="light"] .hljs-section,
+[data-cui-theme="light"] .hljs-name { color: var(--palette-violet-600); }
+[data-cui-theme="light"] .hljs-attr,
+[data-cui-theme="light"] .hljs-attribute { color: var(--palette-info-600); }
+[data-cui-theme="light"] .hljs-variable { color: var(--palette-warning-700); }
+[data-cui-theme="light"] .hljs-deletion { color: var(--theme-diff-del); background: var(--theme-diff-del-bg); }
+[data-cui-theme="light"] .hljs-addition { color: var(--theme-diff-add); background: var(--theme-diff-add-bg); }
 
 /* Pulse animation for streaming cursor */
 @keyframes blink {
@@ -380,14 +683,11 @@ body {
   animation: rewrite-shimmer 1.4s ease-in-out infinite;
 }
 
-/* Plan panel slide-in */
+/* Plan panel slide-in. No rule applies it; a plan panel opts in by name. */
 @keyframes plan-panel-enter {
   from { opacity: 0; transform: translateX(20px); }
   to { opacity: 1; transform: translateX(0); }
 }
-.plan-panel {
-  animation: plan-panel-enter 0.15s ease-out;
-}
 
 /* Question block entry */
 @keyframes question-slide-in {
@@ -435,17 +735,8 @@ body {
   .todo-row,
   .quote-card,
   .rewrite-card,
-  .plan-panel,
   .question-block,
   .question-option {
     animation: none;
   }
 }
-
-/* Line clamp utility */
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index cbeac7ed..19566d39 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -1,13 +1,42 @@
+// MUST be the first import. index.css opens with the `@layer` statement that
+// fixes cascade order, and a layer's position is set where it is FIRST seen.
+// Click UI's stylesheets arrive via its JS import, so if that import were
+// evaluated first its `@layer clickui {...}` block would pin `clickui` to the
+// weakest position and Tailwind's preflight would flatten every Click UI
+// control. Import order here is load-bearing, not cosmetic.
+import './index.css'
+
+// Click UI names Inter (regular) and Inconsolata (mono) in its typography
+// tokens but ships no font files — the package contains zero @font-face rules.
+// Self-hosted via @fontsource rather than a Google Fonts <link>, so the app
+// keeps working offline and behind a firewall, and no request leaves the box.
+// These come after index.css: they are pure @font-face declarations with no
+// @layer of their own, so they cannot disturb the cascade order above, and
+// keeping index.css first preserves the invariant this file depends on.
+// Weights match what the UI actually uses: 400 body, 500 `font-medium`,
+// 600 `font-semibold` / markdown headings, 700 `font-bold`.
+// ('Basier Square', Click UI's display face, is commercial — we do not ship it
+// and it falls back to Inter.)
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/600.css'
+import '@fontsource/inter/700.css'
+import '@fontsource/inconsolata/400.css'
+import '@fontsource/inconsolata/500.css'
+
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
-import './index.css'
-import App from './App'
+// ThemedApp pulls in Click UI. That is safe here and keeps the import-order
+// rule above: this import is evaluated after `./index.css`, so the layer
+// statement sets the cascade order before Click UI's own `@layer clickui`
+// block is seen.
+import { ThemedApp } from './ThemedApp'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
-      <App />
+      <ThemedApp />
     </BrowserRouter>
   </StrictMode>,
 )
diff --git a/web/src/pages/ChatPage.tsx b/web/src/pages/ChatPage.tsx
index 6a278c53..f4c4d387 100644
--- a/web/src/pages/ChatPage.tsx
+++ b/web/src/pages/ChatPage.tsx
@@ -12,7 +12,8 @@ import { SidePanel } from '../components/Chat/SidePanel';
 import { ChatWidthHandle } from '../components/Chat/ChatWidthHandle';
 import { BackgroundJobs } from '../components/Chat/BackgroundJobs';
 import { ReviewLoopCard } from '../components/Chat/ReviewLoopCard';
-import { Loader2, PanelLeftOpen, PanelLeftClose, Files, ExternalLink } from 'lucide-react';
+import { Loader2, Files, ExternalLink } from '../components/ui/icons';
+import { Button, PaneToggle } from '../components/ui';
 import { api } from '../api/client';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import { useIsMobile } from '../hooks/useMediaQuery';
@@ -249,15 +250,8 @@ export function ChatPage() {
           {/* Header */}
           <div className="border-b border-border-subtle px-3 md:px-5 py-2.5 flex items-center justify-between gap-2 bg-bg shrink-0">
             <div className="flex items-center gap-2 min-w-0">
-              <button
-                onClick={toggleSessionList}
-                className="w-6 h-6 shrink-0 flex items-center justify-center text-text-faint hover:text-text-muted cursor-pointer transition-colors rounded"
-                title={sessionListOpen ? 'Hide sidebar' : 'Show sidebar'}
-                aria-expanded={sessionListOpen}
-              >
-                {sessionListOpen ? <PanelLeftClose size={15} /> : <PanelLeftOpen size={15} />}
-              </button>
-              <span className="font-medium text-[15px] truncate">
+              <PaneToggle open={sessionListOpen} onToggle={toggleSessionList} label="sidebar" />
+              <span className="font-medium text-base truncate">
                 {virtualSession?.id === activeSession
                   ? 'New chat'
                   : (activeSessionRow?.title || activeSession)}
@@ -269,10 +263,12 @@ export function ChatPage() {
                 return (
                   <span
                     title={`Agent backend: ${backend}`}
-                    className={`hidden md:inline shrink-0 text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded border ${
+                    // Which backend is running is identity, not status, so
+                    // this stays on the `hue-*` scale.
+                    className={`hidden md:inline shrink-0 text-2xs uppercase tracking-wide px-1.5 py-0.5 rounded border ${
                       backend === 'codex'
-                        ? 'text-hue-teal border-teal-400/25 bg-teal-400/10'
-                        : 'text-hue-orange border-orange-400/25 bg-orange-400/10'
+                        ? 'text-hue-teal border-hue-teal/25 bg-hue-teal/10'
+                        : 'text-hue-orange border-hue-orange/25 bg-hue-orange/10'
                     }`}
                   >
                     {backend}
@@ -282,7 +278,7 @@ export function ChatPage() {
               {(() => {
                 const model = activeSessionRow?.model;
                 return model ? (
-                  <span className="hidden md:inline shrink-0 text-[11px] text-text-faint bg-surface-raised px-1.5 py-0.5 rounded">
+                  <span className="hidden md:inline shrink-0 text-xs text-text-faint bg-surface-raised px-1.5 py-0.5 rounded">
                     {formatModelLabel(model)}
                   </span>
                 ) : null;
@@ -299,17 +295,20 @@ export function ChatPage() {
                   : rl.status === 'failed' ? `failed${rl.failure_reason ? ` (${rl.failure_reason})` : ''}`
                   : rl.status === 'killed' ? 'killed'
                   : rl.status;
+                // A review loop's state is status, so these are the feedback
+                // tokens. The default branch is the live loop, which takes the
+                // same green as `passed`.
                 const tone = rl.status === 'passed'
-                  ? 'text-emerald-400 border-emerald-400/25 bg-emerald-400/10'
+                  ? 'text-success border-success-border bg-success-bg'
                   : rl.status === 'awaiting_user'
-                  ? 'text-hue-orange border-orange-400/25 bg-orange-400/10'
+                  ? 'text-warning border-warning-border bg-warning-bg'
                   : rl.status === 'failed' || rl.status === 'killed'
-                  ? 'text-error border-red-400/25 bg-red-400/10'
-                  : 'text-emerald-400 border-emerald-400/25 bg-emerald-400/10';
+                  ? 'text-error border-error-border bg-error-bg'
+                  : 'text-success border-success-border bg-success-bg';
                 return (
                   <span
                     title={`Review loop ${rl.id}: ${rl.status}${rl.failure_reason ? ` — ${rl.failure_reason}` : ''}`}
-                    className={`text-[11px] px-1.5 py-0.5 rounded border flex items-center gap-1.5 ${tone}`}
+                    className={`text-xs px-1.5 py-0.5 rounded border flex items-center gap-1.5 ${tone}`}
                   >
                     {live && <span className="w-1.5 h-1.5 rounded-full bg-current animate-pulse" />}
                     🔁 {rl.iteration}/{rl.max_iterations} — {label}
@@ -317,7 +316,7 @@ export function ChatPage() {
                 );
               })()}
               {statusLabel && (
-                <div className="flex items-center gap-1.5 min-w-0 text-[12px] text-text-muted">
+                <div className="flex items-center gap-1.5 min-w-0 text-xs text-text-muted">
                   <Loader2 size={12} className="shrink-0 animate-spin text-accent" />
                   <span className="truncate">{statusLabel}</span>
                 </div>
@@ -329,7 +328,7 @@ export function ChatPage() {
                 const used = rateLimits?.primary?.usedPercent;
                 return (
                   <span
-                    className="text-[11px] text-text-faint"
+                    className="text-xs text-text-faint"
                     title={JSON.stringify(backendStatus.data)}
                   >
                     Codex limit{typeof used === 'number' ? ` ${used}% used` : ' updated'}
@@ -343,19 +342,14 @@ export function ChatPage() {
                 activeSession={activeSession}
                 onSelect={switchSession}
               />
+              {/* House convention for a tinted action: the identity hue rides
+                  the icon and the label stays neutral, so nothing competes
+                  with `subtle`'s own text colour. */}
               {fileCount > 0 && (
-                <button
-                  onClick={openFilesPanel}
-                  className={`flex items-center gap-1.5 px-2 py-1 rounded text-[12px] transition-colors cursor-pointer ${
-                    filesPanelActive
-                      ? 'text-hue-teal bg-teal-400/10'
-                      : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'
-                  }`}
-                  title="Modified files"
-                >
-                  <Files size={14} />
+                <Button variant="subtle" size="xs" onClick={openFilesPanel} title="Modified files">
+                  <Files size={14} className={filesPanelActive ? 'text-hue-teal' : undefined} />
                   <span className="tabular-nums">{fileCount}</span>
-                </button>
+                </Button>
               )}
               {contextUsage && (
                 <div className="hidden md:flex">
@@ -367,7 +361,7 @@ export function ChatPage() {
                   href={`${langfuse.host}/sessions?sessionId=${encodeURIComponent(activeSession)}`}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="hidden md:flex items-center gap-1 px-2 py-1 rounded text-[12px] text-text-faint hover:text-text-secondary hover:bg-surface-raised transition-colors cursor-pointer"
+                  className="hidden md:flex items-center gap-1 px-2 py-1 rounded text-xs text-text-faint hover:text-text-secondary hover:bg-surface-raised transition-colors cursor-pointer"
                   title="View this session's trace in Langfuse"
                 >
                   <ExternalLink size={12} />
diff --git a/web/src/pages/CronPage.tsx b/web/src/pages/CronPage.tsx
index ad14f476..04cbf0d8 100644
--- a/web/src/pages/CronPage.tsx
+++ b/web/src/pages/CronPage.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { RefreshCw, Loader2 } from 'lucide-react';
+import { RefreshCw, Loader2 } from '../components/ui/icons';
+import { IconButton } from '../components/ui';
 import { useCronStore } from '../stores/cronStore';
 import { CronSidebar } from '../components/Cron/CronSidebar';
 import { JobInfoCard } from '../components/Cron/JobInfoCard';
@@ -57,11 +58,9 @@ export function CronPage() {
           : undefined}
         title="Cron Jobs"
         actions={
-          <button onClick={handleRefresh} disabled={refreshing}
-            className="text-text-dim hover:text-text-muted cursor-pointer p-1.5 hover:bg-surface-raised rounded"
-            title="Refresh" aria-label="Refresh">
+          <IconButton label="Refresh" onClick={handleRefresh} disabled={refreshing}>
             {refreshing ? <Loader2 size={16} className="animate-spin" /> : <RefreshCw size={16} />}
-          </button>
+          </IconButton>
         }
       />
 
diff --git a/web/src/pages/DiagnosticsPage.tsx b/web/src/pages/DiagnosticsPage.tsx
index 65dd9808..7585840d 100644
--- a/web/src/pages/DiagnosticsPage.tsx
+++ b/web/src/pages/DiagnosticsPage.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 // import { useNavigate } from 'react-router-dom';
 import { api } from '../api/client';
-import { Server, HardDrive, RefreshCw, Clock, CheckCircle2, XCircle, Database, Activity, Brain, Play, Loader2, DollarSign, Zap, BarChart3 } from 'lucide-react';
+import { Server, HardDrive, RefreshCw, Clock, CheckCircle2, XCircle, Database, Activity, Brain, Play, Loader2, DollarSign, Zap, BarChart3 } from '../components/ui/icons';
+import { Button, IconButton } from '../components/ui';
 import { ExternalAgentsSection } from '../components/ExternalAgents/ExternalAgentsSection';
 
 function formatUptime(isoDate: string): string {
@@ -45,21 +46,14 @@ function RunButton({ onClick, label, title }: { onClick: () => Promise<void>; la
   };
 
   return (
-    <button
-      onClick={handleClick}
-      disabled={running}
-      className={`flex items-center gap-1.5 px-3 py-2 text-[12px] bg-surface border border-border-subtle rounded-lg cursor-pointer transition-colors shrink-0 ${
-        running
-          ? 'text-text-faint cursor-not-allowed'
-          : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'
-      }`}
-      title={title}
-    >
+    // `disabled` carries the running state: `Button` already dims the control
+    // and blocks the cursor.
+    <Button variant="secondary" onClick={handleClick} disabled={running} title={title}>
       {running
         ? <><Loader2 size={12} className="animate-spin" /> Running...</>
         : <><Play size={12} /> {label}</>
       }
-    </button>
+    </Button>
   );
 }
 
@@ -98,9 +92,9 @@ export function DiagnosticsPage() {
     <div className="h-full overflow-y-auto">
       <div className="border-b border-border-subtle px-6 py-3 flex items-center justify-between bg-bg shrink-0">
         <h1 className="text-lg font-semibold">Diagnostics</h1>
-        <button onClick={load} className="text-text-dim hover:text-text-muted cursor-pointer p-1.5 hover:bg-surface-raised rounded">
+        <IconButton label="Refresh diagnostics" onClick={load}>
           <RefreshCw size={16} />
-        </button>
+        </IconButton>
       </div>
 
       <div className="p-6 max-w-5xl mx-auto space-y-6">
@@ -114,7 +108,7 @@ export function DiagnosticsPage() {
 
         {/* Observability — Langfuse status */}
         {data.langfuse && (
-          <div className="text-[12px] text-text-dim flex items-center gap-3 flex-wrap">
+          <div className="text-xs text-text-dim flex items-center gap-3 flex-wrap">
             <span className="flex items-center gap-1.5">
               {data.langfuse.enabled ? (
                 <CheckCircle2 size={12} className="text-hue-green" />
@@ -149,7 +143,7 @@ export function DiagnosticsPage() {
         {/* Usage & Cost */}
         {usage?.last_7d && (
           <section>
-            <h2 className="text-[14px] font-medium text-text-muted mb-3 flex items-center gap-2">
+            <h2 className="text-sm font-medium text-text-muted mb-3 flex items-center gap-2">
               <DollarSign size={14} /> Usage & Cost (7 days)
             </h2>
 
@@ -168,7 +162,7 @@ export function DiagnosticsPage() {
             {/* Daily usage chart — simple CSS bar chart */}
             {usage.daily?.length > 0 && (
               <div className="mb-3">
-                <div className="text-[11px] text-text-dim mb-2">Daily cost</div>
+                <div className="text-xs text-text-dim mb-2">Daily cost</div>
                 <div className="flex items-end gap-1 h-20">
                   {[...usage.daily].reverse().map((day: any) => {
                     const cost = day.cost_usd || 0;
@@ -187,12 +181,12 @@ export function DiagnosticsPage() {
                             style={{ height: `${heightPct}%` }}
                           >
                             <div className="absolute -top-6 left-1/2 -translate-x-1/2 hidden group-hover:block z-10
-                              bg-surface-raised border border-border-subtle rounded px-1.5 py-0.5 text-[10px] text-text-secondary whitespace-nowrap shadow-lg">
+                              bg-surface-raised border border-border-subtle rounded px-1.5 py-0.5 text-2xs text-text-secondary whitespace-nowrap shadow-lg">
                               {formatTokens((day.input_tokens || 0) + (day.output_tokens || 0))} &middot; ${cost.toFixed(2)}
                             </div>
                           </div>
                         </div>
-                        <span className="text-[9px] text-text-faint tabular-nums">{dateLabel}</span>
+                        <span className="text-2xs text-text-faint tabular-nums">{dateLabel}</span>
                       </div>
                     );
                   })}
@@ -203,7 +197,7 @@ export function DiagnosticsPage() {
             {/* By model breakdown */}
             {usage.by_model?.length > 0 && (
               <div className="border border-border-subtle rounded-lg overflow-hidden mb-3">
-                <table className="w-full text-[13px]">
+                <table className="w-full text-sm">
                   <thead>
                     <tr className="bg-surface text-text-muted">
                       <th className="text-left px-4 py-2 font-medium">Model</th>
@@ -216,7 +210,7 @@ export function DiagnosticsPage() {
                   <tbody>
                     {usage.by_model.map((m: any) => (
                       <tr key={m.model} className="border-t border-border-subtle hover:bg-surface">
-                        <td className="px-4 py-2 font-mono text-text-secondary text-[12px]">{formatModelName(m.model)}</td>
+                        <td className="px-4 py-2 font-mono text-text-secondary text-xs">{formatModelName(m.model)}</td>
                         <td className="px-4 py-2 text-right text-text-dim tabular-nums">{m.turns}</td>
                         <td className="px-4 py-2 text-right text-text-secondary tabular-nums">{formatTokens(m.input_tokens || 0)}</td>
                         <td className="px-4 py-2 text-right text-text-secondary tabular-nums">{formatTokens(m.output_tokens || 0)}</td>
@@ -231,7 +225,7 @@ export function DiagnosticsPage() {
             {/* By source breakdown */}
             {usage.by_source?.length > 0 && (
               <div className="border border-border-subtle rounded-lg overflow-hidden">
-                <table className="w-full text-[13px]">
+                <table className="w-full text-sm">
                   <thead>
                     <tr className="bg-surface text-text-muted">
                       <th className="text-left px-4 py-2 font-medium">Source</th>
@@ -263,7 +257,7 @@ export function DiagnosticsPage() {
         {/* memU Health */}
         {memuHealth && (
           <section>
-            <h2 className="text-[14px] font-medium text-text-muted mb-3 flex items-center gap-2">
+            <h2 className="text-sm font-medium text-text-muted mb-3 flex items-center gap-2">
               <Database size={14} /> memU Memory Service
             </h2>
 
@@ -283,25 +277,25 @@ export function DiagnosticsPage() {
             {memuHealth.database?.type_distribution && (
               <div className="flex gap-2 mb-3 flex-wrap">
                 {Object.entries(memuHealth.database.type_distribution).map(([type, count]) => (
-                  <span key={type} className="text-[12px] px-2 py-1 bg-surface border border-border-subtle rounded">
+                  <span key={type} className="text-xs px-2 py-1 bg-surface border border-border-subtle rounded">
                     <span className="text-text-muted">{type}:</span>{' '}
                     <span className="text-text-secondary">{String(count)}</span>
                   </span>
                 ))}
                 {memuHealth.database?.total_categories > 0 && (
-                  <span className="text-[12px] px-2 py-1 bg-surface border border-border-subtle rounded">
+                  <span className="text-xs px-2 py-1 bg-surface border border-border-subtle rounded">
                     <span className="text-text-muted">categories:</span>{' '}
                     <span className="text-text-secondary">{memuHealth.database.total_categories}</span>
                   </span>
                 )}
                 {memuHealth.database?.total_resources > 0 && (
-                  <span className="text-[12px] px-2 py-1 bg-surface border border-border-subtle rounded">
+                  <span className="text-xs px-2 py-1 bg-surface border border-border-subtle rounded">
                     <span className="text-text-muted">resources:</span>{' '}
                     <span className="text-text-secondary">{memuHealth.database.total_resources}</span>
                   </span>
                 )}
                 {memuHealth.database?.events_missing_happened_at > 0 && (
-                  <span className="text-[12px] px-2 py-1 bg-amber-500/10 border border-amber-500/20 rounded text-amber-600">
+                  <span className="text-xs px-2 py-1 bg-warning-bg border border-warning-border rounded text-warning">
                     {memuHealth.database.events_missing_happened_at} events missing happened_at
                   </span>
                 )}
@@ -310,10 +304,10 @@ export function DiagnosticsPage() {
 
             {/* In-flight operations */}
             {memuHealth.in_flight?.length > 0 && (
-              <div className="mb-3 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg">
-                <div className="text-[12px] text-blue-600 mb-1">In-flight operations:</div>
+              <div className="mb-3 p-3 bg-info-bg border border-info-border rounded-lg">
+                <div className="text-xs text-info mb-1">In-flight operations:</div>
                 {memuHealth.in_flight.map((op: any, i: number) => (
-                  <div key={i} className="text-[12px] text-text-secondary">
+                  <div key={i} className="text-xs text-text-secondary">
                     {op.operation} — <span className="text-text-muted">{op.description}</span> ({op.elapsed_s}s)
                   </div>
                 ))}
@@ -322,7 +316,7 @@ export function DiagnosticsPage() {
 
             {/* Operation stats table */}
             <div className="border border-border-subtle rounded-lg overflow-hidden">
-              <table className="w-full text-[13px]">
+              <table className="w-full text-sm">
                 <thead>
                   <tr className="bg-surface text-text-muted">
                     <th className="text-left px-4 py-2 font-medium">Operation</th>
@@ -346,7 +340,7 @@ export function DiagnosticsPage() {
                           : <span className="text-text-dim">0</span>
                         }
                       </td>
-                      <td className="px-4 py-2 text-hue-red text-[12px] truncate max-w-xs">{stats.last_error || ''}</td>
+                      <td className="px-4 py-2 text-hue-red text-xs truncate max-w-xs">{stats.last_error || ''}</td>
                     </tr>
                   ))}
                 </tbody>
@@ -358,7 +352,7 @@ export function DiagnosticsPage() {
         {/* Memorization Sweep */}
         {data.memorization && (
           <section>
-            <h2 className="text-[14px] font-medium text-text-muted mb-3 flex items-center gap-2">
+            <h2 className="text-sm font-medium text-text-muted mb-3 flex items-center gap-2">
               <Brain size={14} /> Memorization Sweep
             </h2>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-3">
@@ -371,21 +365,21 @@ export function DiagnosticsPage() {
             {/* Last run details */}
             <div className="flex items-center gap-3 mb-3">
               <div className="flex-1 p-3 bg-surface border border-border-subtle rounded-lg">
-                <div className="text-[11px] text-text-dim mb-1">Last run</div>
-                <div className="text-[13px] text-text-secondary">
+                <div className="text-xs text-text-dim mb-1">Last run</div>
+                <div className="text-sm text-text-secondary">
                   {data.memorization.last_run_at
                     ? new Date(data.memorization.last_run_at).toLocaleString()
                     : 'Not yet'}
                 </div>
                 {data.memorization.last_result && !data.memorization.last_result.error && (
-                  <div className="text-[12px] text-text-dim mt-1">
+                  <div className="text-xs text-text-dim mt-1">
                     {data.memorization.last_result.sessions_indexed > 0
                       ? `${data.memorization.last_result.sessions_indexed} sessions, ${data.memorization.last_result.messages_indexed} messages indexed`
                       : 'Nothing to index'}
                   </div>
                 )}
                 {data.memorization.last_result?.error && (
-                  <div className="text-[12px] text-hue-red mt-1 truncate">
+                  <div className="text-xs text-hue-red mt-1 truncate">
                     Error: {data.memorization.last_result.error}
                   </div>
                 )}
@@ -404,14 +398,14 @@ export function DiagnosticsPage() {
 
         {/* Cron Logs */}
         <section>
-          <h2 className="text-[14px] font-medium text-text-muted mb-3 flex items-center gap-2">
+          <h2 className="text-sm font-medium text-text-muted mb-3 flex items-center gap-2">
             <Clock size={14} /> Cron Logs
           </h2>
           {cronLogs.length === 0 ? (
             <div className="text-text-faint text-sm">No cron logs</div>
           ) : (
             <div className="border border-border-subtle rounded-lg overflow-hidden">
-              <table className="w-full text-[13px]">
+              <table className="w-full text-sm">
                 <thead>
                   <tr className="bg-surface text-text-muted">
                     <th className="text-left px-4 py-2 font-medium">Job</th>
@@ -431,7 +425,7 @@ export function DiagnosticsPage() {
                         }
                       </td>
                       <td className="px-4 py-2 text-text-dim">{log.started_at}</td>
-                      <td className="px-4 py-2 text-hue-red text-[12px] truncate max-w-xs">{log.error || ''}</td>
+                      <td className="px-4 py-2 text-hue-red text-xs truncate max-w-xs">{log.error || ''}</td>
                     </tr>
                   ))}
                 </tbody>
@@ -440,7 +434,7 @@ export function DiagnosticsPage() {
           )}
         </section>
 
-        <div className="text-[12px] text-text-faint pt-2">
+        <div className="text-xs text-text-faint pt-2">
           Workspace: {data.workspace} | Sessions: {data.sessions_count}
         </div>
       </div>
@@ -451,10 +445,10 @@ export function DiagnosticsPage() {
 function InfoCard({ icon: Icon, label, value }: { icon: typeof Server; label: string; value: string }) {
   return (
     <div className="p-3 bg-surface border border-border-subtle rounded-lg">
-      <div className="flex items-center gap-1.5 text-[11px] text-text-dim mb-1">
+      <div className="flex items-center gap-1.5 text-xs text-text-dim mb-1">
         <Icon size={12} /> {label}
       </div>
-      <div className="text-[14px] text-text-secondary truncate">{value}</div>
+      <div className="text-sm text-text-secondary truncate">{value}</div>
     </div>
   );
 }
diff --git a/web/src/pages/FilesPage.tsx b/web/src/pages/FilesPage.tsx
index b6c0da80..d617d79c 100644
--- a/web/src/pages/FilesPage.tsx
+++ b/web/src/pages/FilesPage.tsx
@@ -3,7 +3,7 @@ import { useFilesStore } from '../stores/filesStore';
 import { FileTree } from '../components/Files/FileTree';
 import { EditorTabBar } from '../components/Files/EditorTabBar';
 import { FileEditor } from '../components/Files/FileEditor';
-import { FolderOpen } from 'lucide-react';
+import { FolderOpen } from '../components/ui/icons';
 
 export function FilesPage() {
   const {
diff --git a/web/src/pages/McpServerDetailPage.tsx b/web/src/pages/McpServerDetailPage.tsx
index 180aefb9..ee0f0eaf 100644
--- a/web/src/pages/McpServerDetailPage.tsx
+++ b/web/src/pages/McpServerDetailPage.tsx
@@ -1,15 +1,17 @@
 import { useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Zap, CheckCircle, XCircle, Clock, Plug } from 'lucide-react';
+import { ArrowLeft, Zap, CheckCircle, XCircle, Clock, Plug } from '../components/ui/icons';
+import { Badge, IconButton } from '../components/ui';
 import { useMcpStore } from '../stores/mcpStore';
 import { formatMcpName } from '../utils/formatMcpName';
 
+/** Transport identity, not status — so `hue-*` rather than a feedback token. */
 const TYPE_COLORS: Record<string, string> = {
   sdk: 'text-accent bg-accent/10',
-  stdio: 'text-hue-emerald bg-emerald-400/10',
-  sse: 'text-hue-amber bg-amber-400/10',
-  http: 'text-hue-sky bg-sky-400/10',
-  plugin: 'text-hue-violet bg-violet-400/10',
+  stdio: 'text-hue-emerald bg-hue-emerald/10',
+  sse: 'text-hue-amber bg-hue-amber/10',
+  http: 'text-hue-sky bg-hue-sky/10',
+  plugin: 'text-hue-violet bg-hue-violet/10',
 };
 
 function UsageBar({ total, success }: { total: number; success: number }) {
@@ -18,7 +20,7 @@ function UsageBar({ total, success }: { total: number; success: number }) {
   return (
     <div className="w-full bg-surface-raised rounded-full h-1.5">
       <div
-        className={`h-1.5 rounded-full ${pct >= 90 ? 'bg-emerald-500' : pct >= 70 ? 'bg-amber-500' : 'bg-red-500'}`}
+        className={`h-1.5 rounded-full ${pct >= 90 ? 'bg-success' : pct >= 70 ? 'bg-warning' : 'bg-error'}`}
         style={{ width: `${pct}%` }}
       />
     </div>
@@ -55,22 +57,15 @@ export function McpServerDetailPage() {
     <div className="flex-1 flex flex-col h-full overflow-hidden">
       {/* Header */}
       <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
-        <button
-          onClick={() => navigate('/mcp')}
-          className="text-text-dim hover:text-text-secondary cursor-pointer"
-        >
+        <IconButton label="Back to MCP servers" onClick={() => navigate('/mcp')}>
           <ArrowLeft size={16} />
-        </button>
+        </IconButton>
         <div className="flex items-center gap-2 flex-1">
           <h1 className="text-sm font-medium text-text">{formatMcpName(s.name)}</h1>
-          <span className={`text-[10px] px-1.5 py-0.5 rounded font-mono ${typeClass}`}>
+          <span className={`text-2xs px-1.5 py-0.5 rounded font-mono ${typeClass}`}>
             {s.type}
           </span>
-          {!s.enabled && (
-            <span className="text-[10px] text-hue-amber/70 bg-amber-500/10 px-1.5 py-0.5 rounded">
-              disabled
-            </span>
-          )}
+          {!s.enabled && <Badge tone="warning">disabled</Badge>}
         </div>
       </div>
 
@@ -126,7 +121,7 @@ export function McpServerDetailPage() {
                 {s.recent_usage.map(u => (
                   <div
                     key={u.id}
-                    className="flex items-center gap-3 px-3 py-1.5 text-[11px] bg-surface-raised border border-border rounded"
+                    className="flex items-center gap-3 px-3 py-1.5 text-xs bg-surface-raised border border-border rounded"
                   >
                     {u.success
                       ? <CheckCircle size={10} className="text-hue-emerald shrink-0" />
diff --git a/web/src/pages/McpServersPage.tsx b/web/src/pages/McpServersPage.tsx
index 234bfecd..1fd74672 100644
--- a/web/src/pages/McpServersPage.tsx
+++ b/web/src/pages/McpServersPage.tsx
@@ -1,15 +1,17 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { RefreshCw, Zap, CheckCircle, XCircle, Clock, Plug } from 'lucide-react';
+import { RefreshCw, Zap, CheckCircle, XCircle, Clock, Plug } from '../components/ui/icons';
+import { Badge, Button } from '../components/ui';
 import { useMcpStore, type McpServer } from '../stores/mcpStore';
 import { formatMcpName } from '../utils/formatMcpName';
 
+/** Transport identity, not status — so `hue-*` rather than a feedback token. */
 const TYPE_COLORS: Record<string, string> = {
   sdk: 'text-accent bg-accent/10',
-  stdio: 'text-hue-emerald bg-emerald-400/10',
-  sse: 'text-hue-amber bg-amber-400/10',
-  http: 'text-hue-sky bg-sky-400/10',
-  plugin: 'text-hue-violet bg-violet-400/10',
+  stdio: 'text-hue-emerald bg-hue-emerald/10',
+  sse: 'text-hue-amber bg-hue-amber/10',
+  http: 'text-hue-sky bg-hue-sky/10',
+  plugin: 'text-hue-violet bg-hue-violet/10',
 };
 
 function ServerCard({ server }: { server: McpServer }) {
@@ -28,19 +30,17 @@ function ServerCard({ server }: { server: McpServer }) {
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
             <h3 className="text-sm font-medium text-text truncate">{formatMcpName(server.name)}</h3>
-            <span className={`text-[10px] px-1.5 py-0.5 rounded font-mono ${typeClass}`}>
+            <span className={`text-2xs px-1.5 py-0.5 rounded font-mono ${typeClass}`}>
               {server.type}
             </span>
           </div>
         </div>
         {!server.enabled && (
-          <span className="text-[10px] text-hue-amber/70 bg-amber-500/10 px-1.5 py-0.5 rounded ml-2">
-            disabled
-          </span>
+          <Badge tone="warning" className="ml-2">disabled</Badge>
         )}
       </div>
 
-      <div className="flex items-center gap-4 mt-3 text-[10px] text-text-dim">
+      <div className="flex items-center gap-4 mt-3 text-2xs text-text-dim">
         {server.tool_count > 0 && (
           <div className="flex items-center gap-1">
             <Plug size={10} />
@@ -81,19 +81,18 @@ export function McpServersPage() {
       <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
         <div className="flex items-center gap-2">
           <h1 className="text-sm font-medium text-text">MCP Servers</h1>
-          <span className="text-[10px] text-text-dim bg-surface-raised px-1.5 py-0.5 rounded">
-            {servers.length}
-          </span>
+          <Badge>{servers.length}</Badge>
         </div>
-        <button
+        <Button
+          variant="subtle"
+          size="xs"
           onClick={reloadServers}
           disabled={reloading}
-          className="flex items-center gap-1 px-2 py-1 text-xs text-text-muted hover:text-text-secondary hover:bg-surface-hover rounded cursor-pointer disabled:opacity-50"
           title="Reload MCP config from YAML files"
         >
           <RefreshCw size={12} className={reloading ? 'animate-spin' : ''} />
           Reload
-        </button>
+        </Button>
       </div>
 
       {/* Content */}
diff --git a/web/src/pages/MemuPage.tsx b/web/src/pages/MemuPage.tsx
index 33d8e2f6..f5b574ab 100644
--- a/web/src/pages/MemuPage.tsx
+++ b/web/src/pages/MemuPage.tsx
@@ -2,22 +2,37 @@ import { useEffect, useState, useMemo } from 'react';
 import {
   Database, Search, Plus, X, Pencil, Trash2, ChevronDown, ChevronRight,
   FileText, Clock, Circle, History,
-} from 'lucide-react';
+} from '../components/ui/icons';
+import { Badge, Button, IconButton, Select, TextArea, TextField } from '../components/ui';
 import { useMemoryStore, type Category, type MemoryItem, type Resource, type TabView } from '../stores/memoryStore';
 import { PageHeader } from '../components/ui/PageHeader';
 import { PaneToggle } from '../components/ui/PaneToggle';
 import { Drawer } from '../components/ui/Drawer';
 import { useIsMobile } from '../hooks/useMediaQuery';
 
+/**
+ * Memory-type identity colours. Data-driven: the map is read at runtime to
+ * colour a dot, a badge and a badge tint, so these stay CSS colour *values*
+ * rather than becoming utility classes. They are `--theme-hue-*` tokens, so
+ * the identity colour follows the light/dark theme like the rest of the page.
+ */
 const TYPE_COLORS: Record<string, string> = {
   profile: 'var(--theme-accent)',
-  event: '#f59e0b',
-  knowledge: '#22c55e',
-  behavior: '#ef4444',
-  skill: '#3b82f6',
-  tool: '#a855f7',
+  event: 'var(--theme-hue-amber)',
+  knowledge: 'var(--theme-hue-green)',
+  behavior: 'var(--theme-hue-red)',
+  skill: 'var(--theme-hue-blue)',
+  tool: 'var(--theme-hue-purple)',
 };
 
+/**
+ * A 15% wash of an identity colour, matching the 15% alpha `Badge`'s tones use.
+ *
+ * `color-mix` rather than an alpha suffix on the colour: the map holds
+ * `var(--theme-*)` tokens, and a suffix only works on a literal hex.
+ */
+const tint = (color: string) => `color-mix(in oklab, ${color} 15%, transparent)`;
+
 const FACT_TYPES = ['profile', 'knowledge', 'behavior', 'skill', 'tool'];
 
 const TABS: { key: TabView; label: string }[] = [
@@ -38,6 +53,16 @@ function formatDateGroup(iso: string): string {
   return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
 }
 
+/** The memory-type chip, coloured from `TYPE_COLORS`. */
+function TypeBadge({ type, className }: { type: string; className?: string }) {
+  const color = TYPE_COLORS[type] || 'var(--theme-text-muted)';
+  return (
+    <Badge className={className} style={{ backgroundColor: tint(color), color }}>
+      {type}
+    </Badge>
+  );
+}
+
 // --- Inline Edit Form ---
 
 function EditForm({ item, onSave, onCancel }: {
@@ -79,39 +104,38 @@ function EditForm({ item, onSave, onCancel }: {
 
   return (
     <div className="border border-accent/30 rounded-lg p-3 bg-accent/5 space-y-2">
-      <textarea
+      <TextArea
         value={content}
         onChange={e => setContent(e.target.value)}
         rows={3}
-        className="w-full bg-surface-raised border border-border-subtle rounded px-3 py-2 text-[13px] text-text-secondary outline-none focus:border-accent/50 resize-none"
       />
       <div className="flex items-center gap-2">
-        <select
+        <Select
+          fieldSize="sm"
           value={memType}
           onChange={e => setMemType(e.target.value)}
-          className="bg-surface-raised border border-border-subtle rounded px-2 py-1 text-[12px] text-text-secondary outline-none focus:border-accent/50"
-        >
-          {Object.keys(TYPE_COLORS).map(t => (
-            <option key={t} value={t}>{t}</option>
-          ))}
-        </select>
+          options={Object.keys(TYPE_COLORS).map(t => ({ value: t, label: t }))}
+        />
         <div className="flex-1" />
-        <button onClick={onCancel} className="px-3 py-1 text-xs text-text-muted hover:text-text-secondary cursor-pointer transition-colors">Cancel</button>
-        <button onClick={handleSave} disabled={saving || !content.trim()} className="px-3 py-1 bg-accent text-white text-xs rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-accent-hover transition-colors">
+        <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+        <Button variant="primary" onClick={handleSave} disabled={saving || !content.trim()}>
           {saving ? 'Saving...' : 'Save'}
-        </button>
+        </Button>
       </div>
       {categories.length > 0 && (
         <div className="flex flex-wrap gap-1 pt-1 border-t border-border-subtle/50">
-          <span className="text-[10px] text-text-dim self-center mr-1">Categories:</span>
-          {categories.map(cat => {
-            const selected = selectedCatIds.has(cat.id);
-            return (
-              <button key={cat.id} onClick={() => toggleCat(cat.id)} className={`text-[10px] px-1.5 py-0.5 rounded cursor-pointer transition-colors ${selected ? 'bg-accent/25 text-accent border border-accent/40' : 'bg-surface-raised text-text-dim border border-border-subtle hover:text-text-muted hover:border-border'}`}>
-                {cat.name.replace(/_/g, ' ')}
-              </button>
-            );
-          })}
+          <span className="text-2xs text-text-dim self-center mr-1">Categories:</span>
+          {categories.map(cat => (
+            <Button
+              key={cat.id}
+              variant="pill"
+              size="xs"
+              active={selectedCatIds.has(cat.id)}
+              onClick={() => toggleCat(cat.id)}
+            >
+              {cat.name.replace(/_/g, ' ')}
+            </Button>
+          ))}
         </div>
       )}
     </div>
@@ -124,14 +148,14 @@ function DeleteConfirm({ item, onConfirm, onCancel }: { item: MemoryItem; onConf
   const [deleting, setDeleting] = useState(false);
   const handleDelete = async () => { setDeleting(true); try { await onConfirm(); } finally { setDeleting(false); } };
   return (
-    <div className="border border-red-500/30 rounded-lg p-3 bg-red-500/5">
-      <div className="text-[12px] text-text-secondary mb-2">Delete this memory item?</div>
-      <div className="text-[11px] text-text-muted mb-3 line-clamp-2">{item.summary}</div>
+    <div className="border border-error-border rounded-lg p-3 bg-error-bg">
+      <div className="text-xs text-text-secondary mb-2">Delete this memory item?</div>
+      <div className="text-xs text-text-muted mb-3 line-clamp-2">{item.summary}</div>
       <div className="flex items-center gap-2 justify-end">
-        <button onClick={onCancel} className="px-3 py-1 text-xs text-text-muted hover:text-text-secondary cursor-pointer transition-colors">Cancel</button>
-        <button onClick={handleDelete} disabled={deleting} className="px-3 py-1 bg-red-600 text-white text-xs rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-red-700 transition-colors">
+        <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+        <Button variant="dangerSolid" onClick={handleDelete} disabled={deleting}>
           {deleting ? 'Deleting...' : 'Delete'}
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -149,13 +173,11 @@ function ItemRow({ item, isEditing, isDeleting, onEdit, onDelete, onSave, onCanc
   if (isDeleting) return <DeleteConfirm item={item} onConfirm={onConfirmDelete} onCancel={onCancelDelete} />;
   return (
     <div className="group flex items-start gap-2 px-3 py-2 rounded hover:bg-surface-raised transition-colors">
-      <span className="text-[10px] px-1.5 py-0.5 rounded mt-0.5 shrink-0" style={{ backgroundColor: (TYPE_COLORS[item.memory_type] || '#666') + '20', color: TYPE_COLORS[item.memory_type] || '#666' }}>
-        {item.memory_type}
-      </span>
-      <span className="text-[12px] text-text-secondary flex-1">{item.summary}</span>
+      <TypeBadge type={item.memory_type} />
+      <span className="text-xs text-text-secondary flex-1">{item.summary}</span>
       <div className="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-        <button onClick={onEdit} className="p-1 rounded hover:bg-surface-raised text-text-dim hover:text-text-muted cursor-pointer transition-colors" title="Edit"><Pencil size={12} /></button>
-        <button onClick={onDelete} className="p-1 rounded hover:bg-surface-raised text-text-dim hover:text-hue-red cursor-pointer transition-colors" title="Delete"><Trash2 size={12} /></button>
+        <IconButton size="xs" label="Edit" onClick={onEdit}><Pencil size={12} /></IconButton>
+        <IconButton size="xs" variant="dangerGhost" label="Delete" onClick={onDelete}><Trash2 size={12} /></IconButton>
       </div>
     </div>
   );
@@ -174,7 +196,7 @@ function CategorySummaryEditor({ category }: { category: Category }) {
   if (!isEditing) {
     return (
       <div
-        className="px-3 py-2 bg-bg-sunken text-[11px] text-text-muted whitespace-pre-wrap border-b border-border-subtle group/summary cursor-pointer hover:bg-surface-hover transition-colors"
+        className="px-3 py-2 bg-bg-sunken text-xs text-text-muted whitespace-pre-wrap border-b border-border-subtle group/summary cursor-pointer hover:bg-surface-hover transition-colors"
         onClick={() => setEditingCategoryId(category.id)}
         title="Click to edit summary"
       >
@@ -191,12 +213,12 @@ function CategorySummaryEditor({ category }: { category: Category }) {
 
   return (
     <div className="px-3 py-2 bg-bg-sunken border-b border-border-subtle">
-      <textarea value={value} onChange={e => setValue(e.target.value)} rows={3} autoFocus className="w-full bg-surface-raised border border-border-subtle rounded px-2 py-1.5 text-[11px] text-text-secondary outline-none focus:border-accent/50 resize-none" />
+      <TextArea fieldSize="sm" value={value} onChange={e => setValue(e.target.value)} rows={3} autoFocus />
       <div className="flex justify-end gap-2 mt-1">
-        <button onClick={() => setEditingCategoryId(null)} className="px-2 py-0.5 text-[10px] text-text-muted hover:text-text-secondary cursor-pointer">Cancel</button>
-        <button onClick={handleSave} disabled={saving} className="px-2 py-0.5 bg-accent text-white text-[10px] rounded cursor-pointer disabled:opacity-40 hover:bg-accent-hover transition-colors">
+        <Button variant="ghost" size="xs" onClick={() => setEditingCategoryId(null)}>Cancel</Button>
+        <Button variant="primary" size="xs" onClick={handleSave} disabled={saving}>
           {saving ? 'Saving...' : 'Save'}
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -220,14 +242,14 @@ function CreateCategoryForm({ onClose }: { onClose: () => void }) {
   return (
     <div className="border border-accent/30 rounded-lg p-3 bg-accent/5 mx-3 mb-3">
       <div className="flex items-center justify-between mb-2">
-        <span className="text-[12px] font-medium">New Category</span>
-        <button onClick={onClose} className="text-text-faint hover:text-text-muted cursor-pointer"><X size={12} /></button>
+        <span className="text-xs font-medium">New Category</span>
+        <IconButton size="xs" label="Close" onClick={onClose}><X size={12} /></IconButton>
       </div>
-      <input type="text" placeholder="Name (e.g. travel_plans)" value={name} onChange={e => setName(e.target.value)} className="w-full bg-surface-raised border border-border-subtle rounded px-2 py-1 text-[12px] text-text-secondary mb-2 outline-none focus:border-accent/50" />
-      <input type="text" placeholder="Description" value={desc} onChange={e => setDesc(e.target.value)} className="w-full bg-surface-raised border border-border-subtle rounded px-2 py-1 text-[12px] text-text-secondary mb-2 outline-none focus:border-accent/50" />
-      <button onClick={handleCreate} disabled={!name.trim() || creating} className="px-3 py-1 bg-accent text-white text-[11px] rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-accent-hover transition-colors">
+      <TextField fieldSize="sm" placeholder="Name (e.g. travel_plans)" value={name} onChange={e => setName(e.target.value)} className="mb-2" />
+      <TextField fieldSize="sm" placeholder="Description" value={desc} onChange={e => setDesc(e.target.value)} className="mb-2" />
+      <Button variant="primary" size="xs" onClick={handleCreate} disabled={!name.trim() || creating}>
         {creating ? 'Creating...' : 'Create'}
-      </button>
+      </Button>
     </div>
   );
 }
@@ -267,17 +289,20 @@ function Heatmap({ items, onDayClick, selectedDate }: { items: MemoryItem[]; onD
     return result;
   }, [dayCounts]);
 
+  // Data-driven, so these stay colour values rather than utilities. The three
+  // steps are one hue at three alphas, keyed off item count; `color-mix` lets
+  // that hue be the theme token.
   const getColor = (count: number, dateStr: string) => {
     if (selectedDate === dateStr) return 'var(--theme-accent)';
     if (count === 0) return 'var(--theme-surface)';
-    if (count <= 2) return '#f59e0b33';
-    if (count <= 5) return '#f59e0b88';
-    return '#f59e0b';
+    if (count <= 2) return 'color-mix(in oklab, var(--theme-hue-amber) 20%, transparent)';
+    if (count <= 5) return 'color-mix(in oklab, var(--theme-hue-amber) 53%, transparent)';
+    return 'var(--theme-hue-amber)';
   };
 
   return (
     <div className="px-3 py-2 border-b border-border-subtle overflow-x-auto">
-      <div className="text-[10px] text-text-faint mb-1">Memory activity — last 6 months</div>
+      <div className="text-2xs text-text-faint mb-1">Memory activity — last 6 months</div>
       <div style={{ display: 'flex', gap: 2 }}>
         {weeks.map((week, wi) => (
           <div key={wi} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
@@ -351,11 +376,11 @@ function FactsView() {
     <div className="space-y-1 p-3">
       {grouped.map(({ category, items: catItems }) => (
         <div key={category.id} className="border border-border-subtle rounded-lg overflow-hidden">
-          <button onClick={() => toggle(category.id)} className="w-full px-3 py-2.5 flex items-center gap-2 hover:bg-surface-raised cursor-pointer transition-colors">
+          <Button variant="subtle" size="md" fullWidth onClick={() => toggle(category.id)} className="justify-start rounded-none">
             {collapsed[category.id] ? <ChevronRight size={13} className="text-text-faint" /> : <ChevronDown size={13} className="text-text-faint" />}
-            <span className="font-medium text-[13px]">{category.name.replace(/_/g, ' ')}</span>
-            <span className="text-[11px] text-text-faint">{catItems.length}</span>
-          </button>
+            <span className="font-medium">{category.name.replace(/_/g, ' ')}</span>
+            <span className="text-xs text-text-faint">{catItems.length}</span>
+          </Button>
           {!collapsed[category.id] && (
             <div className="border-t border-border-subtle">
               <CategorySummaryEditor category={category} />
@@ -374,11 +399,11 @@ function FactsView() {
 
       {uncategorized.length > 0 && (
         <div className="border border-border-subtle rounded-lg overflow-hidden">
-          <button onClick={() => toggle('__uncategorized')} className="w-full px-3 py-2.5 flex items-center gap-2 hover:bg-surface-raised cursor-pointer transition-colors">
+          <Button variant="subtle" size="md" fullWidth onClick={() => toggle('__uncategorized')} className="justify-start rounded-none">
             {collapsed['__uncategorized'] ? <ChevronRight size={13} className="text-text-faint" /> : <ChevronDown size={13} className="text-text-faint" />}
-            <span className="font-medium text-[13px] text-text-muted">uncategorized</span>
-            <span className="text-[11px] text-text-faint">{uncategorized.length}</span>
-          </button>
+            <span className="font-medium text-text-muted">uncategorized</span>
+            <span className="text-xs text-text-faint">{uncategorized.length}</span>
+          </Button>
           {!collapsed['__uncategorized'] && (
             <div className="border-t border-border-subtle divide-y divide-border-subtle">
               {uncategorized.map(item => (
@@ -393,7 +418,7 @@ function FactsView() {
       )}
 
       {grouped.length === 0 && uncategorized.length === 0 && (
-        <div className="text-center text-text-faint text-[13px] py-12">{searchQuery ? 'No facts match your search' : 'No facts found'}</div>
+        <div className="text-center text-text-faint text-sm py-12">{searchQuery ? 'No facts match your search' : 'No facts found'}</div>
       )}
     </div>
   );
@@ -460,20 +485,20 @@ function TimelineView() {
     <div className="flex flex-col h-full">
       <Heatmap items={allEvents} onDayClick={handleDayClick} selectedDate={filterDate} />
       {filterDate && (
-        <div className="px-3 py-1.5 bg-warning/10 border-b border-border-subtle flex items-center gap-2">
-          <span className="text-[11px] text-warning">Showing: {filterDate}</span>
-          <button onClick={() => setFilterDate(null)} className="text-warning hover:text-warning cursor-pointer"><X size={12} /></button>
+        <div className="px-3 py-1.5 bg-warning-bg border-b border-border-subtle flex items-center gap-2">
+          <span className="text-xs text-warning">Showing: {filterDate}</span>
+          <IconButton size="xs" label="Clear date filter" className="text-warning" onClick={() => setFilterDate(null)}><X size={12} /></IconButton>
         </div>
       )}
       <div className="flex-1 overflow-y-auto p-3">
         {grouped.length === 0 && (
-          <div className="text-center text-text-faint text-[13px] py-12">{searchQuery ? 'No events match your search' : 'No events found'}</div>
+          <div className="text-center text-text-faint text-sm py-12">{searchQuery ? 'No events match your search' : 'No events found'}</div>
         )}
         {grouped.map(group => (
           <div key={group.dateKey} id={`timeline-date-${group.dateKey}`} className="mb-4">
             <div className="flex items-center gap-2 mb-2 px-2">
               <Clock size={12} className="text-warning" />
-              <span className="text-[12px] text-warning font-medium">{formatDateGroup(group.date)}</span>
+              <span className="text-xs text-warning font-medium">{formatDateGroup(group.date)}</span>
             </div>
             <div className="border-l-2 border-border-subtle ml-3 pl-4 space-y-1">
               {group.items.map(item => {
@@ -484,16 +509,16 @@ function TimelineView() {
                   <div key={item.id} className="group flex items-start gap-2 px-2 py-1.5 rounded hover:bg-surface-raised transition-colors">
                     <div className="w-2 h-2 rounded-full bg-warning mt-1.5 shrink-0" />
                     <div className="flex-1 min-w-0">
-                      <div className="text-[12px] text-text-secondary">{item.summary}</div>
+                      <div className="text-xs text-text-secondary">{item.summary}</div>
                       {catIds.length > 0 && (
                         <div className="flex gap-1 mt-1">
-                          {catIds.map(cid => { const cat = categoryMap.get(cid); return cat ? <span key={cid} className="text-[10px] px-1.5 py-0.5 rounded bg-border-subtle text-text-muted">{cat.name}</span> : null; })}
+                          {catIds.map(cid => { const cat = categoryMap.get(cid); return cat ? <Badge key={cid}>{cat.name}</Badge> : null; })}
                         </div>
                       )}
                     </div>
                     <div className="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <button onClick={() => setEditingItemId(item.id)} className="p-1 rounded hover:bg-surface-raised text-text-dim hover:text-text-muted cursor-pointer transition-colors" title="Edit"><Pencil size={12} /></button>
-                      <button onClick={() => setDeletingItemId(item.id)} className="p-1 rounded hover:bg-surface-raised text-text-dim hover:text-hue-red cursor-pointer transition-colors" title="Delete"><Trash2 size={12} /></button>
+                      <IconButton size="xs" label="Edit" onClick={() => setEditingItemId(item.id)}><Pencil size={12} /></IconButton>
+                      <IconButton size="xs" variant="dangerGhost" label="Delete" onClick={() => setDeletingItemId(item.id)}><Trash2 size={12} /></IconButton>
                     </div>
                   </div>
                 );
@@ -538,8 +563,8 @@ function SourcesView() {
         <div key={group.date}>
           <div className="flex items-center gap-2 mb-2 px-1">
             <Clock size={12} className="text-info" />
-            <span className="text-[12px] text-info font-medium">{formatDateGroup(group.date)}</span>
-            <span className="text-[10px] text-text-faint">{group.resources.length} sources</span>
+            <span className="text-xs text-info font-medium">{formatDateGroup(group.date)}</span>
+            <span className="text-2xs text-text-faint">{group.resources.length} sources</span>
           </div>
           <div className="space-y-2 ml-3">
             {group.resources.map(res => {
@@ -547,25 +572,25 @@ function SourcesView() {
               const isExpanded = expanded.has(res.id);
               return (
                 <div key={res.id} className="border border-border-subtle rounded-lg overflow-hidden">
-                  <button onClick={() => toggleExpand(res.id)} className="w-full p-3 flex items-center gap-2 hover:bg-surface-raised cursor-pointer transition-colors text-left">
+                  <Button variant="subtle" size="md" fullWidth onClick={() => toggleExpand(res.id)} className="justify-start rounded-none text-left">
                     {isExpanded ? <ChevronDown size={13} className="text-text-faint" /> : <ChevronRight size={13} className="text-text-faint" />}
                     <FileText size={13} className="text-text-dim" />
-                    <span className="text-[12px] font-medium flex-1 truncate">{formatPath(res.url)}</span>
-                    <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ backgroundColor: '#3b82f620', color: '#3b82f6' }}>{res.modality}</span>
-                    <span className="text-[11px] text-text-faint">{resItems.length} items</span>
-                  </button>
+                    <span className="text-xs font-medium flex-1 truncate">{formatPath(res.url)}</span>
+                    <Badge tone="info">{res.modality}</Badge>
+                    <span className="text-xs text-text-faint">{resItems.length} items</span>
+                  </Button>
                   {isExpanded && resItems.length > 0 && (
                     <div className="border-t border-border-subtle divide-y divide-border-subtle">
                       {resItems.map(item => (
                         <div key={item.id} className="flex items-start gap-2 px-3 py-2">
-                          <span className="text-[10px] px-1.5 py-0.5 rounded mt-0.5 shrink-0" style={{ backgroundColor: (TYPE_COLORS[item.memory_type] || '#666') + '20', color: TYPE_COLORS[item.memory_type] || '#666' }}>{item.memory_type}</span>
-                          <span className="text-[11px] text-text-muted">{item.summary}</span>
+                          <TypeBadge type={item.memory_type} className="mt-0.5" />
+                          <span className="text-xs text-text-muted">{item.summary}</span>
                         </div>
                       ))}
                     </div>
                   )}
                   {isExpanded && resItems.length === 0 && (
-                    <div className="border-t border-border-subtle px-3 py-2 text-[11px] text-text-faint">No items extracted from this source</div>
+                    <div className="border-t border-border-subtle px-3 py-2 text-xs text-text-faint">No items extracted from this source</div>
                   )}
                 </div>
               );
@@ -573,60 +598,72 @@ function SourcesView() {
           </div>
         </div>
       ))}
-      {resources.length === 0 && <div className="text-center text-text-faint text-[13px] py-12">No sources found</div>}
+      {resources.length === 0 && <div className="text-center text-text-faint text-sm py-12">No sources found</div>}
     </div>
   );
 }
 
 // --- Audit Log Tab ---
 
+/** Audit-action identity colours. Same contract as `TYPE_COLORS` above. */
 const ACTION_COLORS: Record<string, string> = {
-  item_created: '#22c55e',
+  item_created: 'var(--theme-hue-green)',
   item_updated: 'var(--theme-accent)',
-  item_deleted: '#ef4444',
-  category_created: '#a855f7',
-  category_updated: '#a855f7',
-  conversation_indexed: '#f59e0b',
-  file_indexed: '#3b82f6',
+  item_deleted: 'var(--theme-hue-red)',
+  category_created: 'var(--theme-hue-purple)',
+  category_updated: 'var(--theme-hue-purple)',
+  conversation_indexed: 'var(--theme-hue-amber)',
+  file_indexed: 'var(--theme-hue-blue)',
 };
 
 function LogView() {
   const { auditLogs, auditLoading, auditFilter, loadAuditLogs, setAuditFilter } = useMemoryStore();
   useEffect(() => { loadAuditLogs(); }, []);
 
-  if (auditLoading) return <div className="text-center text-text-faint text-[13px] py-12">Loading audit log...</div>;
+  if (auditLoading) return <div className="text-center text-text-faint text-sm py-12">Loading audit log...</div>;
 
   return (
     <div className="p-3 space-y-1">
       <div className="flex gap-2 mb-3">
-        <select value={auditFilter.action} onChange={e => setAuditFilter({ action: e.target.value })} className="bg-surface-raised border border-border-subtle rounded px-2 py-1 text-[12px] text-text-secondary outline-none">
-          <option value="">All actions</option>
-          {Object.keys(ACTION_COLORS).map(a => <option key={a} value={a}>{a.replace(/_/g, ' ')}</option>)}
-        </select>
-        <select value={auditFilter.target_type} onChange={e => setAuditFilter({ target_type: e.target.value })} className="bg-surface-raised border border-border-subtle rounded px-2 py-1 text-[12px] text-text-secondary outline-none">
-          <option value="">All types</option>
-          <option value="item">item</option>
-          <option value="category">category</option>
-          <option value="resource">resource</option>
-        </select>
+        <Select
+          fieldSize="sm"
+          value={auditFilter.action}
+          onChange={e => setAuditFilter({ action: e.target.value })}
+          emptyLabel="All actions"
+          options={Object.keys(ACTION_COLORS).map(a => ({ value: a, label: a.replace(/_/g, ' ') }))}
+        />
+        <Select
+          fieldSize="sm"
+          value={auditFilter.target_type}
+          onChange={e => setAuditFilter({ target_type: e.target.value })}
+          emptyLabel="All types"
+          options={[
+            { value: 'item', label: 'item' },
+            { value: 'category', label: 'category' },
+            { value: 'resource', label: 'resource' },
+          ]}
+        />
       </div>
 
-      {auditLogs.map(entry => (
-        <div key={entry.id} className="flex items-start gap-2 px-3 py-2 rounded hover:bg-surface-raised transition-colors border border-border-subtle">
-          <span className="text-[10px] px-1.5 py-0.5 rounded mt-0.5 shrink-0" style={{ backgroundColor: (ACTION_COLORS[entry.action] || '#666') + '20', color: ACTION_COLORS[entry.action] || '#666' }}>
-            {entry.action.replace(/_/g, ' ')}
-          </span>
-          <div className="flex-1 min-w-0">
-            <div className="text-[12px] text-text-secondary">
-              {entry.target_type}{entry.target_id ? `: ${entry.target_id.length > 20 ? entry.target_id.substring(0, 20) + '...' : entry.target_id}` : ''}
+      {auditLogs.map(entry => {
+        const color = ACTION_COLORS[entry.action] || 'var(--theme-text-muted)';
+        return (
+          <div key={entry.id} className="flex items-start gap-2 px-3 py-2 rounded hover:bg-surface-raised transition-colors border border-border-subtle">
+            <Badge className="mt-0.5" style={{ backgroundColor: tint(color), color }}>
+              {entry.action.replace(/_/g, ' ')}
+            </Badge>
+            <div className="flex-1 min-w-0">
+              <div className="text-xs text-text-secondary">
+                {entry.target_type}{entry.target_id ? `: ${entry.target_id.length > 20 ? entry.target_id.substring(0, 20) + '...' : entry.target_id}` : ''}
+              </div>
+              {entry.source && <span className="text-2xs text-text-dim">via {entry.source}</span>}
             </div>
-            {entry.source && <span className="text-[10px] text-text-dim">via {entry.source}</span>}
+            <span className="text-2xs text-text-faint shrink-0">{new Date(entry.timestamp).toLocaleString()}</span>
           </div>
-          <span className="text-[10px] text-text-faint shrink-0">{new Date(entry.timestamp).toLocaleString()}</span>
-        </div>
-      ))}
+        );
+      })}
 
-      {auditLogs.length === 0 && <div className="text-center text-text-faint text-[13px] py-12">No audit log entries</div>}
+      {auditLogs.length === 0 && <div className="text-center text-text-faint text-sm py-12">No audit log entries</div>}
     </div>
   );
 }
@@ -664,32 +701,43 @@ function Sidebar({ inDrawer = false, onSelect }: {
       ? 'w-full flex-1 min-h-0 flex flex-col overflow-hidden'
       : 'w-52 shrink-0 border-r border-border-subtle flex flex-col overflow-hidden'}>
       <div className="p-3 border-b border-border-subtle">
-        <div className="text-[11px] text-text-dim uppercase tracking-wider mb-2">Types</div>
+        <div className="text-xs text-text-dim uppercase tracking-wider mb-2">Types</div>
         <div className="space-y-1">
           {Object.entries(TYPE_COLORS).map(([type, color]) => (
             <div key={type} className="flex items-center gap-2">
+              {/* `fill` opts the glyph into Click UI's recolour rule and
+                  `color` supplies the value, so the dot is filled with the
+                  type's identity colour. */}
               <Circle size={8} fill={color} color={color} />
-              <span className="text-[12px] text-text-muted flex-1">{type}</span>
-              <span className="text-[11px] text-text-dim">{stats[type] || 0}</span>
+              <span className="text-xs text-text-muted flex-1">{type}</span>
+              <span className="text-xs text-text-dim">{stats[type] || 0}</span>
             </div>
           ))}
         </div>
       </div>
       <div className="flex-1 overflow-y-auto p-3">
-        <div className="text-[11px] text-text-dim uppercase tracking-wider mb-2">Categories</div>
+        <div className="text-xs text-text-dim uppercase tracking-wider mb-2">Categories</div>
         {selectedCategory && (
-          <button onClick={() => { setSelectedCategory(null); onSelect?.(); }} className="w-full text-left px-2 py-1 mb-1 text-[11px] text-accent hover:bg-surface-raised rounded cursor-pointer transition-colors flex items-center gap-1">
+          <Button variant="accent" size="xs" fullWidth onClick={() => { setSelectedCategory(null); onSelect?.(); }} className="justify-start mb-1">
             <X size={10} /> Clear filter
-          </button>
+          </Button>
         )}
         <div className="space-y-0.5">
           {categories.map(cat => {
             const isActive = selectedCategory === cat.id;
             return (
-              <button key={cat.id} onClick={() => { setSelectedCategory(isActive ? null : cat.id); onSelect?.(); }} className={`w-full text-left px-2 py-1.5 rounded text-[12px] cursor-pointer transition-colors flex items-center gap-2 ${isActive ? 'bg-accent/15 text-accent' : 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'}`}>
-                <span className="flex-1 truncate">{cat.name.replace(/_/g, ' ')}</span>
-                <span className="text-[10px] text-text-dim">{catCounts[cat.id] || 0}</span>
-              </button>
+              <Button
+                key={cat.id}
+                variant="subtle"
+                size="xs"
+                fullWidth
+                active={isActive}
+                onClick={() => { setSelectedCategory(isActive ? null : cat.id); onSelect?.(); }}
+                className="justify-start px-2 py-1.5 gap-2"
+              >
+                <span className="flex-1 truncate text-left">{cat.name.replace(/_/g, ' ')}</span>
+                <span className="text-2xs text-text-dim">{catCounts[cat.id] || 0}</span>
+              </Button>
             );
           })}
         </div>
@@ -698,9 +746,9 @@ function Sidebar({ inDrawer = false, onSelect }: {
         <CreateCategoryForm onClose={() => setShowCreateCat(false)} />
       ) : (
         <div className="p-3 border-t border-border-subtle">
-          <button onClick={() => setShowCreateCat(true)} className="w-full flex items-center justify-center gap-1.5 px-3 py-1.5 rounded border border-dashed border-border-subtle text-[12px] text-text-dim hover:text-text-muted hover:border-border cursor-pointer transition-colors">
+          <Button variant="ghost" fullWidth onClick={() => setShowCreateCat(true)} className="rounded border border-dashed border-border-subtle hover:border-border">
             <Plus size={12} /> Category
-          </button>
+          </Button>
         </div>
       )}
     </div>
@@ -763,9 +811,9 @@ export function MemuPage() {
           : undefined}
         title="Semantic Memory"
         filters={TABS.map(tab => (
-          <button key={tab.key} onClick={() => setActiveTab(tab.key)} className={`px-3 py-1 rounded text-xs cursor-pointer transition-colors whitespace-nowrap ${activeTab === tab.key ? 'bg-accent/20 text-accent' : 'text-text-dim hover:text-text-muted'}`}>
-            {tab.key === 'log' && <History size={11} className="inline mr-1 -mt-0.5" />}{tab.label}
-          </button>
+          <Button key={tab.key} variant="pill" active={activeTab === tab.key} onClick={() => setActiveTab(tab.key)}>
+            {tab.key === 'log' && <History size={11} />}{tab.label}
+          </Button>
         ))}
         actions={
           // The counts are context, not a control: below `lg` the tabs and
@@ -789,9 +837,22 @@ export function MemuPage() {
             <div className="px-3 py-2 border-b border-border-subtle shrink-0">
               <div className="relative">
                 <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-faint" />
-                <input type="text" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder={`Search ${activeTab === 'facts' ? 'facts' : 'events'}...`} className="w-full bg-surface-raised border border-border-subtle rounded pl-8 pr-3 py-1.5 text-[12px] text-text-secondary outline-none focus:border-border-subtle placeholder:text-text-faint" />
+                <TextField
+                  fieldSize="sm"
+                  value={searchQuery}
+                  onChange={e => setSearchQuery(e.target.value)}
+                  placeholder={`Search ${activeTab === 'facts' ? 'facts' : 'events'}...`}
+                  className="pl-8 pr-8 py-1.5"
+                />
                 {searchQuery && (
-                  <button onClick={() => setSearchQuery('')} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-faint hover:text-text-muted cursor-pointer"><X size={12} /></button>
+                  <IconButton
+                    size="xs"
+                    label="Clear search"
+                    onClick={() => setSearchQuery('')}
+                    className="absolute right-1 top-1/2 -translate-y-1/2"
+                  >
+                    <X size={12} />
+                  </IconButton>
                 )}
               </div>
             </div>
diff --git a/web/src/pages/NotificationsPage.tsx b/web/src/pages/NotificationsPage.tsx
index 1d267da2..ddaf405d 100644
--- a/web/src/pages/NotificationsPage.tsx
+++ b/web/src/pages/NotificationsPage.tsx
@@ -1,28 +1,35 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Bell, X, CheckCheck, EyeOff, Check, XCircle, Moon, BellOff, Trash2, Plus, RotateCw, Clock } from 'lucide-react';
+import { Bell, X, CheckCheck, EyeOff, Check, XCircle, Moon, BellOff, Trash2, Plus, RotateCw, Clock } from '../components/ui/icons';
+import { Badge, Button, IconButton, TextField, type BadgeTone, type ButtonVariant } from '../components/ui';
 import { useNotificationStore, type Notification, type Silence } from '../stores/notificationStore';
 import { PageHeader } from '../components/ui/PageHeader';
 
-const STATUS_STYLES: Record<string, string> = {
-  pending: 'bg-yellow-400/10 text-hue-yellow border-yellow-400/20',
-  answered: 'bg-emerald-400/10 text-hue-emerald border-emerald-400/20',
-  expired: 'bg-border-subtle/50 text-text-muted border-border-subtle',
-  dismissed: 'bg-border-subtle/50 text-text-dim border-border-subtle',
-  silenced: 'bg-border-subtle/50 text-text-dim border-border-subtle',
+/** Lifecycle state — a status, so it takes a `Badge` tone. */
+const STATUS_TONES: Record<string, BadgeTone> = {
+  pending: 'warning',
+  answered: 'success',
+  expired: 'neutral',
+  dismissed: 'neutral',
+  silenced: 'neutral',
 };
 
+/**
+ * Priority dot. Only urgent and high get one; `bg-error`/`bg-warning` are the
+ * solid-fill status tokens, so the dot tracks the theme.
+ */
 const PRIORITY_DOTS: Record<string, string> = {
-  urgent: 'bg-red-500',
-  high: 'bg-orange-400',
+  urgent: 'bg-error',
+  high: 'bg-warning',
   normal: '',
   low: '',
 };
 
-const TYPE_BADGE_STYLES: Record<string, string> = {
-  question: 'bg-blue-400/10 text-hue-blue border-blue-400/20',
-  approval: 'bg-violet-400/10 text-hue-violet border-violet-400/20',
-  notify: 'bg-border-subtle/50 text-text-muted border-border-subtle',
+/** Which kind of notification this is — identity, not status. */
+const TYPE_BADGE_TONES: Record<string, BadgeTone> = {
+  question: 'info',
+  approval: 'purple',
+  notify: 'neutral',
 };
 
 const STATUS_FILTERS = [
@@ -43,18 +50,12 @@ const TYPE_FILTERS = [
 // Approval-kind button styling. Keyed by the option ``value`` the
 // dispatcher receives, not the human label, so the styling stays
 // stable even when labels are renamed.
-const APPROVAL_BUTTON_STYLES: Record<string, string> = {
-  approve:
-    'bg-emerald-400/15 text-hue-emerald border-emerald-400/30 hover:bg-emerald-400/25',
-  decline:
-    'bg-red-400/15 text-hue-red border-red-400/30 hover:bg-red-400/25',
-  snooze_24h:
-    'bg-border-subtle/40 text-text-muted border-border-subtle hover:bg-border-subtle/60',
+const APPROVAL_BUTTON_VARIANTS: Record<string, ButtonVariant> = {
+  approve: 'success',
+  decline: 'danger',
+  snooze_24h: 'secondary',
 };
 
-const APPROVAL_DEFAULT_BUTTON_STYLE =
-  'bg-accent/15 text-accent border-accent/30 hover:bg-accent/25';
-
 const APPROVAL_BUTTON_ICONS: Record<string, typeof Check> = {
   approve: Check,
   decline: XCircle,
@@ -133,19 +134,20 @@ function FreeTextInput({ onSubmit }: { onSubmit: (text: string) => void }) {
 
   if (!open) {
     return (
-      <button
+      <Button
+        variant="ghost"
+        size="md"
         onClick={() => setOpen(true)}
-        className="px-3 py-1 text-sm text-text-dim border border-dashed border-border rounded-lg hover:border-border-subtle hover:text-text-muted cursor-pointer"
+        className="border border-dashed border-border rounded-lg hover:border-border-subtle"
       >
         Custom answer...
-      </button>
+      </Button>
     );
   }
 
   return (
     <div className="flex items-center gap-2 w-full mt-1">
-      <input
-        type="text"
+      <TextField
         autoFocus
         value={text}
         onChange={(e) => setText(e.target.value)}
@@ -157,10 +159,13 @@ function FreeTextInput({ onSubmit }: { onSubmit: (text: string) => void }) {
           }
           if (e.key === 'Escape') setOpen(false);
         }}
-        className="flex-1 bg-surface-raised border border-border-subtle rounded-lg px-3 py-1 text-sm text-text outline-none focus:border-accent"
+        fullWidth={false}
+        className="flex-1"
         placeholder="Type your answer..."
       />
-      <button
+      <Button
+        variant="accentSoft"
+        size="md"
         onClick={() => {
           if (text.trim()) {
             onSubmit(text.trim());
@@ -168,16 +173,12 @@ function FreeTextInput({ onSubmit }: { onSubmit: (text: string) => void }) {
             setOpen(false);
           }
         }}
-        className="px-3 py-1 bg-accent/15 text-accent rounded-lg text-sm border border-accent/30 hover:bg-accent/25 cursor-pointer"
       >
         Send
-      </button>
-      <button
-        onClick={() => { setText(''); setOpen(false); }}
-        className="text-text-dim hover:text-text-muted cursor-pointer"
-      >
+      </Button>
+      <IconButton size="xs" label="Cancel" onClick={() => { setText(''); setOpen(false); }}>
         <X size={14} />
-      </button>
+      </IconButton>
     </div>
   );
 }
@@ -205,53 +206,55 @@ function NotificationCard({ notif }: { notif: Notification }) {
               floating beside the second line. */}
           <div className="flex items-start gap-2">
             {priorityDot && <span className={`w-2 h-2 mt-1.5 rounded-full shrink-0 ${priorityDot}`} />}
-            <h3 className="font-medium text-[15px] text-text">{notif.title}</h3>
+            <h3 className="font-medium text-base text-text">{notif.title}</h3>
           </div>
           {notif.body && (
             <p className="text-sm text-text-muted mt-1 whitespace-pre-wrap">{notif.body}</p>
           )}
           {isApproval && notif.target_kind && notif.target_id && (
-            <p className="text-[11px] text-text-faint mt-1 font-mono">
+            <p className="text-xs text-text-faint mt-1 font-mono">
               {notif.target_kind}: {notif.target_id}
             </p>
           )}
         </div>
-        <div className="flex flex-wrap items-center gap-2 text-[12px] shrink-0 order-0 sm:order-none">
+        <div className="flex flex-wrap items-center gap-2 shrink-0 order-0 sm:order-none">
           {(notif.redelivery_count ?? 0) > 0 && (
-            <span
-              className="flex items-center gap-1 px-2 py-0.5 rounded-full border bg-sky-400/10 text-hue-blue border-sky-400/20"
+            <Badge
+              tone="info"
+              size="sm"
+              pill
+              outline
               title={`Re-delivered after snooze (cycle ${notif.redelivery_count})`}
             >
               <RotateCw size={10} />
               {(notif.redelivery_count ?? 0) > 1 ? `×${notif.redelivery_count}` : 're-delivered'}
-            </span>
+            </Badge>
           )}
-          <span className={`px-2 py-0.5 rounded-full border ${STATUS_STYLES[notif.status] || STATUS_STYLES.dismissed}`}>
+          <Badge tone={STATUS_TONES[notif.status] || 'neutral'} size="sm" pill outline>
             {notif.status}
-          </span>
-          <span className={`px-2 py-0.5 rounded-full border ${TYPE_BADGE_STYLES[notif.type] || TYPE_BADGE_STYLES.notify}`}>
+          </Badge>
+          <Badge tone={TYPE_BADGE_TONES[notif.type] || 'neutral'} size="sm" pill outline>
             {notif.type}
-          </span>
+          </Badge>
         </div>
       </div>
 
       {/* Session link + meta */}
-      <div className="flex items-center gap-3 mt-2 text-[12px]">
-        <button
+      <div className="flex items-center gap-3 mt-2 text-xs">
+        <Button
+          variant="link"
+          size="xs"
           onClick={() => navigate(`/chat/${notif.session_id}`)}
-          className="text-accent hover:underline cursor-pointer"
+          className="min-w-0 shrink whitespace-normal wrap-anywhere text-left"
         >
           Session: {notif.session_title || notif.session_id}
-        </button>
+        </Button>
         <span className="text-text-faint">{notif.created_at?.slice(0, 16).replace('T', ' ')}</span>
         {notif.status === 'pending' && notif.type === 'notify' && (
-          <button
-            onClick={() => dismissNotification(notif.id)}
-            className="flex items-center gap-1 px-2 py-0.5 rounded text-text-muted hover:text-text-secondary hover:bg-surface-hover cursor-pointer transition-colors"
-          >
+          <Button variant="ghost" size="xs" onClick={() => dismissNotification(notif.id)}>
             <EyeOff size={11} />
             <span>Dismiss</span>
-          </button>
+          </Button>
         )}
       </div>
 
@@ -259,13 +262,14 @@ function NotificationCard({ notif }: { notif: Notification }) {
       {notif.type === 'question' && notif.status === 'pending' && (
         <div className="mt-3 flex flex-wrap gap-2">
           {options?.map((opt: string) => (
-            <button
+            <Button
               key={opt}
+              variant="accentSoft"
+              size="md"
               onClick={() => answerNotification(notif.id, opt)}
-              className="px-3 py-1.5 bg-accent/15 text-accent rounded-lg text-sm border border-accent/30 hover:bg-accent/25 cursor-pointer transition-colors"
             >
               {opt}
-            </button>
+            </Button>
           ))}
           <FreeTextInput onSubmit={(text) => answerNotification(notif.id, text)} />
         </div>
@@ -276,17 +280,22 @@ function NotificationCard({ notif }: { notif: Notification }) {
         <div className="mt-3 flex flex-wrap gap-2">
           {options?.map((value: string) => {
             const Icon = APPROVAL_BUTTON_ICONS[value];
-            const buttonStyle = APPROVAL_BUTTON_STYLES[value] || APPROVAL_DEFAULT_BUTTON_STYLE;
+            // `accentSoft` for anything outside approve/decline/snooze_24h, so
+            // an unrecognised option still reads as the same kind of control as
+            // the `success`/`danger` siblings beside it.
+            const variant = APPROVAL_BUTTON_VARIANTS[value] || 'accentSoft';
             const label = approvalLabel(value, optionLabels);
             return (
-              <button
+              <Button
                 key={value}
+                variant={variant}
+                size="md"
+                className="gap-1.5"
                 onClick={() => answerNotification(notif.id, value)}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm border cursor-pointer transition-colors ${buttonStyle}`}
               >
                 {Icon ? <Icon size={14} /> : null}
                 <span>{label}</span>
-              </button>
+              </Button>
             );
           })}
         </div>
@@ -294,7 +303,7 @@ function NotificationCard({ notif }: { notif: Notification }) {
 
       {/* Snoozed: still pending server-side, will be re-delivered */}
       {notif.status === 'pending' && notif.redeliver_at && (
-        <div className="mt-2 flex items-center gap-1.5 text-[12px] text-text-dim">
+        <div className="mt-2 flex items-center gap-1.5 text-xs text-text-dim">
           <Clock size={12} className="shrink-0" />
           <span>
             Snoozed — returns {formatLocalTime(notif.redeliver_at)}. You can still decide now.
@@ -304,7 +313,7 @@ function NotificationCard({ notif }: { notif: Notification }) {
 
       {/* Show answer if answered */}
       {notif.status === 'answered' && (
-        <div className="mt-2 text-sm text-hue-emerald">
+        <div className="mt-2 text-sm text-success">
           Answer: {isApproval ? approvalLabel(notif.answer || '', optionLabels) : notif.answer}{' '}
           <span className="text-text-faint">(via {notif.answered_by})</span>
         </div>
@@ -314,7 +323,7 @@ function NotificationCard({ notif }: { notif: Notification }) {
       {notif.status === 'silenced' && (() => {
         const info = parseSilenceInfo(notif);
         return (
-          <div className="mt-2 flex items-start gap-1.5 text-[12px] text-text-dim">
+          <div className="mt-2 flex items-start gap-1.5 text-xs text-text-dim">
             <BellOff size={12} className="mt-0.5 shrink-0" />
             <div className="min-w-0">
               <span>Silenced{info?.silenced_by ? ` by ${info.silenced_by}` : ''} — not delivered.</span>
@@ -335,7 +344,7 @@ function NotificationCard({ notif }: { notif: Notification }) {
 function SilenceRow({ s, onRemove }: { s: Silence; onRemove: () => void }) {
   const overridden = s.override_count > 0;
   return (
-    <div className="flex items-center gap-3 px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-[12px]">
+    <div className="flex items-center gap-3 px-3 py-2 bg-surface-raised border border-border-subtle rounded-lg text-xs">
       <code className="font-mono text-text-muted shrink-0">{s.id}</code>
       <code className="font-mono text-accent truncate flex-1 min-w-0">{s.pattern}</code>
       <span className="text-text-muted shrink-0">
@@ -349,15 +358,11 @@ function SilenceRow({ s, onRemove }: { s: Silence; onRemove: () => void }) {
         </span>
       )}
       {overridden && (
-        <span className="text-hue-yellow shrink-0" title="Force-overridden — this pattern may be too broad">⚠</span>
+        <span className="text-warning shrink-0" title="Force-overridden — this pattern may be too broad">⚠</span>
       )}
-      <button
-        onClick={onRemove}
-        className="text-text-dim hover:text-hue-red cursor-pointer shrink-0"
-        title="Remove silence"
-      >
+      <IconButton size="xs" variant="dangerGhost" label="Remove silence" onClick={onRemove}>
         <Trash2 size={13} />
-      </button>
+      </IconButton>
     </div>
   );
 }
@@ -393,49 +398,47 @@ function SilencesPanel() {
       <div className="flex items-center gap-2 mb-3 flex-wrap">
         <BellOff size={15} className="text-text-muted" />
         <h2 className="text-sm font-semibold text-text">Silences</h2>
-        <span className="text-[12px] text-text-faint">
+        <span className="text-xs text-text-faint">
           Suppress known-benign alert classes — matched notifications are recorded but not delivered (priority unchanged).
         </span>
       </div>
 
       <div className="flex flex-wrap items-center gap-2 mb-2">
-        <input
-          type="text"
+        <TextField
           value={pattern}
           onChange={(e) => setPattern(e.target.value)}
           onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
           placeholder="Regex pattern (matches title + body)"
-          className="flex-1 min-w-[14rem] bg-surface-raised border border-border-subtle rounded-lg px-3 py-1.5 text-sm text-text outline-none focus:border-accent font-mono"
+          fullWidth={false}
+          className="flex-1 min-w-[14rem] font-mono"
         />
-        <input
-          type="text"
+        <TextField
           value={reason}
           onChange={(e) => setReason(e.target.value)}
           onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
           placeholder="Reason"
-          className="flex-1 min-w-[10rem] bg-surface-raised border border-border-subtle rounded-lg px-3 py-1.5 text-sm text-text outline-none focus:border-accent"
+          fullWidth={false}
+          className="flex-1 min-w-[10rem]"
         />
-        <input
+        <TextField
           type="number"
           min="0"
           value={ttlHours}
           onChange={(e) => setTtlHours(e.target.value)}
           onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
           placeholder="TTL h (0=∞)"
-          className="w-28 bg-surface-raised border border-border-subtle rounded-lg px-3 py-1.5 text-sm text-text outline-none focus:border-accent"
+          fullWidth={false}
+          className="w-28"
         />
-        <button
-          onClick={submit}
-          disabled={adding}
-          className="flex items-center gap-1 px-3 py-1.5 bg-accent/15 text-accent rounded-lg text-sm border border-accent/30 hover:bg-accent/25 cursor-pointer disabled:opacity-50"
-        >
+        <Button variant="accentSoft" size="md"
+          onClick={submit} disabled={adding}>
           <Plus size={14} /> Add
-        </button>
+        </Button>
       </div>
-      {error && <div className="text-[12px] text-hue-red mb-2">{error}</div>}
+      {error && <div className="text-xs text-error mb-2">{error}</div>}
 
       {silences.length === 0 ? (
-        <div className="text-[12px] text-text-faint">No silences configured.</div>
+        <div className="text-xs text-text-faint">No silences configured.</div>
       ) : (
         <div className="space-y-1.5">
           {silences.map((s) => (
@@ -465,59 +468,39 @@ export function NotificationsPage() {
           <>
             {/* Status filters */}
             {STATUS_FILTERS.map(f => (
-              <button
-                key={f.value}
-                onClick={() => setFilter(f.value)}
-                className={`px-3 py-1 text-[12px] rounded-full border cursor-pointer transition-colors whitespace-nowrap
-                  ${filter === f.value
-                    ? 'bg-accent/15 text-accent border-accent/30'
-                    : 'text-text-dim border-border hover:border-border hover:text-text-muted'
-                  }`}
-              >
+              <Button key={f.value} variant="pill" active={filter === f.value}
+                onClick={() => setFilter(f.value)}>
                 {f.label}
-              </button>
+              </Button>
             ))}
             {/* Type filters — separated by a rule rather than the old ml-1,
                 which read as one undifferentiated run of pills once they
                 shared a scroller. */}
             <span className="mx-1 h-4 w-px shrink-0 bg-border-subtle" aria-hidden="true" />
             {TYPE_FILTERS.map(f => (
-              <button
-                key={f.value}
-                onClick={() => setTypeFilter(f.value)}
-                className={`px-3 py-1 text-[12px] rounded-full border cursor-pointer transition-colors whitespace-nowrap
-                  ${typeFilter === f.value
-                    ? 'bg-accent/15 text-accent border-accent/30'
-                    : 'text-text-dim border-border hover:border-border hover:text-text-muted'
-                  }`}
-              >
+              <Button key={f.value} variant="pill" active={typeFilter === f.value}
+                onClick={() => setTypeFilter(f.value)}>
                 {f.label}
-              </button>
+              </Button>
             ))}
           </>
         }
         actions={
           <>
-          <button
-            onClick={() => setShowSilences(v => !v)}
-            className={`flex items-center gap-1.5 px-3 py-1 text-[12px] rounded-lg border cursor-pointer transition-colors whitespace-nowrap
-              ${showSilences
-                ? 'bg-accent/15 text-accent border-accent/30'
-                : 'border-border text-text-muted hover:text-text-secondary hover:bg-surface-raised'
-              }`}
-          >
+          {/* A toggle, not a filter chip, so it keeps the rounded-lg button
+              shape — `pill` supplies the same active treatment either way. */}
+          <Button variant="pill" active={showSilences}
+            className="rounded-lg whitespace-nowrap"
+            onClick={() => setShowSilences(v => !v)}>
             <BellOff size={13} />
             Silences
-          </button>
+          </Button>
           {/* Dismiss All */}
           {pendingCount > 0 && (
-            <button
-              onClick={dismissAll}
-              className="flex items-center gap-1.5 px-3 py-1 text-[12px] rounded-lg border border-border text-text-muted hover:text-text-secondary hover:border-border hover:bg-surface-raised cursor-pointer transition-colors whitespace-nowrap"
-            >
+            <Button variant="secondary" className="whitespace-nowrap" onClick={dismissAll}>
               <CheckCheck size={13} />
               Dismiss All
-            </button>
+            </Button>
           )}
           </>
         }
diff --git a/web/src/pages/PlanDetailPage.tsx b/web/src/pages/PlanDetailPage.tsx
index 7fb8f131..8cd2ff62 100644
--- a/web/src/pages/PlanDetailPage.tsx
+++ b/web/src/pages/PlanDetailPage.tsx
@@ -1,21 +1,24 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Check, X, MessageSquare, ExternalLink } from 'lucide-react';
+import { ArrowLeft, Check, X, MessageSquare, ExternalLink } from '../components/ui/icons';
+import { Badge, type BadgeTone, Button, IconButton, TextArea } from '../components/ui';
 import { usePlanStore } from '../stores/planStore';
 import { MarkdownContent } from '../components/Chat/MarkdownContent';
 
-const STATUS_STYLES: Record<string, string> = {
-  pending: 'bg-yellow-400/10 text-hue-yellow border-yellow-400/20',
-  approved: 'bg-emerald-400/10 text-hue-emerald border-emerald-400/20',
-  implementing: 'bg-blue-400/10 text-hue-blue border-blue-400/20',
-  declined: 'bg-red-400/10 text-hue-red border-red-400/20',
-  superseded: 'bg-border-subtle/50 text-text-muted border-border-subtle',
-  failed: 'bg-red-400/10 text-hue-red border-red-400/20',
+/** A plan's lifecycle state, as a `Badge` tone. `superseded` is the fallback. */
+const STATUS_TONES: Record<string, BadgeTone> = {
+  pending: 'warning',
+  approved: 'success',
+  implementing: 'info',
+  declined: 'danger',
+  superseded: 'neutral',
+  failed: 'danger',
 };
 
-const TYPE_STYLES: Record<string, { label: string; className: string }> = {
-  'skill-create': { label: 'Skill', className: 'bg-purple-400/10 text-hue-purple border-purple-400/20' },
-  'skill-update': { label: 'Skill Update', className: 'bg-purple-400/10 text-hue-purple border-purple-400/20' },
+/** Plan type is identity, not status — hence `purple` rather than a feedback tone. */
+const TYPE_LABELS: Record<string, string> = {
+  'skill-create': 'Skill',
+  'skill-update': 'Skill Update',
 };
 
 export function PlanDetailPage() {
@@ -81,41 +84,34 @@ export function PlanDetailPage() {
       {/* Header */}
       <div className="border-b border-border-subtle px-6 py-3 bg-bg shrink-0">
         <div className="flex items-center gap-3 mb-2">
-          <button
-            onClick={() => navigate('/plans')}
-            className="p-1 text-text-faint hover:text-text-muted hover:bg-surface-hover rounded cursor-pointer"
-          >
+          <IconButton label="Back to plans" size="xs" onClick={() => navigate('/plans')}>
             <ArrowLeft size={16} />
-          </button>
+          </IconButton>
           <h1 className="text-lg font-semibold text-text">
             {plan.task_title || plan.task_id}
           </h1>
-          <span className={`px-2 py-0.5 text-[12px] rounded-full border ${STATUS_STYLES[plan.status] || STATUS_STYLES.superseded}`}>
+          <Badge size="sm" pill outline tone={STATUS_TONES[plan.status] ?? 'neutral'}>
             {plan.status}
-          </span>
-          {plan.plan_type && plan.plan_type !== 'generic' && TYPE_STYLES[plan.plan_type] && (
-            <span className={`px-2 py-0.5 text-[11px] rounded-full border ${TYPE_STYLES[plan.plan_type].className}`}>
-              {TYPE_STYLES[plan.plan_type].label}
-            </span>
+          </Badge>
+          {plan.plan_type && plan.plan_type !== 'generic' && TYPE_LABELS[plan.plan_type] && (
+            <Badge size="sm" pill outline tone="purple">
+              {TYPE_LABELS[plan.plan_type]}
+            </Badge>
           )}
-          <span className="text-[12px] text-text-faint">v{plan.version}</span>
+          <span className="text-xs text-text-faint">v{plan.version}</span>
         </div>
-        <div className="flex items-center gap-4 text-[12px] text-text-faint ml-7">
+        <div className="flex items-center gap-4 text-xs text-text-faint ml-7">
           <span>{plan.created_at?.slice(0, 16).replace('T', ' ')}</span>
           {plan.model && <span>{plan.model}</span>}
-          <button
-            onClick={() => navigate(`/tasks/${plan.task_id}`)}
-            className="flex items-center gap-1 text-accent hover:text-link cursor-pointer"
-          >
+          <Button variant="link" size="xs" onClick={() => navigate(`/tasks/${plan.task_id}`)}>
             <ExternalLink size={11} /> View task
-          </button>
+          </Button>
           {isImplementing && plan.impl_session_id && (
-            <button
-              onClick={() => navigate(`/chat/${plan.impl_session_id}`)}
-              className="flex items-center gap-1 text-hue-blue hover:text-hue-blue cursor-pointer"
-            >
-              <MessageSquare size={11} /> Watch implementation
-            </button>
+            // House convention for a tinted inline action: the identity hue
+            // rides the icon, the label stays neutral.
+            <Button variant="ghost" size="xs" onClick={() => navigate(`/chat/${plan.impl_session_id}`)}>
+              <MessageSquare size={11} className="text-hue-blue" /> Watch implementation
+            </Button>
           )}
         </div>
       </div>
@@ -132,8 +128,8 @@ export function PlanDetailPage() {
             <div className="mt-4 flex gap-0">
               <div className="w-1 bg-accent/40 rounded-full shrink-0" />
               <div className="pl-3 py-2">
-                <div className="text-[11px] text-accent/60 font-medium mb-1">Revision feedback</div>
-                <div className="text-[13px] text-text-muted leading-relaxed whitespace-pre-wrap">{plan.feedback}</div>
+                <div className="text-xs text-accent/60 font-medium mb-1">Revision feedback</div>
+                <div className="text-sm text-text-muted leading-relaxed whitespace-pre-wrap">{plan.feedback}</div>
               </div>
             </div>
           )}
@@ -142,52 +138,49 @@ export function PlanDetailPage() {
           {isPending && (
             <div className="mt-6 space-y-3">
               <div className="flex items-center gap-3">
-                <button
-                  onClick={handleApprove}
-                  disabled={actionLoading}
-                  className="flex items-center gap-1.5 px-4 py-2 text-[13px] disabled:opacity-50 text-white rounded-lg cursor-pointer bg-emerald-600 hover:bg-emerald-500"
-                >
+                {/* Approving is this page's one committing action, so it takes
+                    the `primary` treatment. The alternatives do not hold:
+                    `success` is tinted, which would leave the affirmative
+                    action quieter than the `dangerSolid` Decline beside it, and
+                    there is no solid-success pair to build one from —
+                    `--theme-success` is a feedback *foreground*. */}
+                <Button variant="primary" size="md" onClick={handleApprove} disabled={actionLoading}>
                   <Check size={14} />
                   Approve &amp; Implement
-                </button>
-                <button
+                </Button>
+                <Button
+                  variant="dangerSolid"
+                  size="md"
                   onClick={() => setShowDeclineFeedback(!showDeclineFeedback)}
                   disabled={actionLoading}
-                  className="flex items-center gap-1.5 px-4 py-2 text-[13px] bg-red-600/80 hover:bg-red-500/80 disabled:opacity-50 text-white rounded-lg cursor-pointer"
                 >
                   <X size={14} /> Decline
-                </button>
-                <button
-                  onClick={() => setShowFeedback(!showFeedback)}
-                  className="flex items-center gap-1.5 px-4 py-2 text-[13px] bg-surface-raised hover:bg-surface-hover text-text-secondary rounded-lg cursor-pointer"
-                >
+                </Button>
+                <Button variant="secondary" size="md" onClick={() => setShowFeedback(!showFeedback)}>
                   <MessageSquare size={14} /> Request Revision
-                </button>
+                </Button>
               </div>
 
               {showDeclineFeedback && (
                 <div className="space-y-2">
                   <div className="flex gap-0">
-                    <div className="w-1 bg-red-500/40 rounded-full shrink-0" />
+                    <div className="w-1 bg-error/40 rounded-full shrink-0" />
                     <div className="flex-1 pl-3">
-                      <textarea
+                      {/* No red focus border here: FIELD_BASE is the app's one
+                          focus treatment and it is accent. */}
+                      <TextArea
                         value={declineFeedback}
                         onChange={e => setDeclineFeedback(e.target.value)}
                         placeholder="Optional: why is this plan being declined? (leave empty to close without a reason)"
-                        className="w-full p-3 text-[13px] bg-surface-raised border border-border-subtle rounded-lg text-text-secondary placeholder:text-placeholder focus:outline-none focus:border-red-500/50 resize-none"
                         rows={3}
                         autoFocus
                       />
                     </div>
                   </div>
                   <div className="flex justify-end">
-                    <button
-                      onClick={handleDecline}
-                      disabled={actionLoading}
-                      className="px-4 py-2 text-[13px] bg-red-600/80 hover:bg-red-500/80 disabled:opacity-50 text-white rounded-lg cursor-pointer"
-                    >
+                    <Button variant="dangerSolid" size="md" onClick={handleDecline} disabled={actionLoading}>
                       Confirm Decline
-                    </button>
+                    </Button>
                   </div>
                 </div>
               )}
@@ -197,14 +190,13 @@ export function PlanDetailPage() {
                   <div className="flex gap-0">
                     <div className="w-1 bg-accent/30 rounded-full shrink-0" />
                     <div className="flex-1 pl-3">
-                      <textarea
+                      <TextArea
                         value={feedback}
                         onChange={e => {
                           setFeedback(e.target.value);
                           if (actionError) clearActionError();
                         }}
                         placeholder="Describe what to change..."
-                        className="w-full p-3 text-[13px] bg-surface-raised border border-border-subtle rounded-lg text-text-secondary placeholder:text-placeholder focus:outline-none focus:border-accent/50 resize-none"
                         rows={3}
                         autoFocus
                       />
@@ -212,18 +204,19 @@ export function PlanDetailPage() {
                   </div>
                   {actionError && (
                     <div className="flex gap-0">
-                      <div className="w-1 bg-red-500/40 rounded-full shrink-0" />
-                      <div className="pl-3 py-1 text-[12px] text-hue-red">{actionError}</div>
+                      <div className="w-1 bg-error/40 rounded-full shrink-0" />
+                      <div className="pl-3 py-1 text-xs text-hue-red">{actionError}</div>
                     </div>
                   )}
                   <div className="flex justify-end">
-                    <button
+                    <Button
+                      variant="primary"
+                      size="md"
                       onClick={handleRevise}
                       disabled={actionLoading || !feedback.trim()}
-                      className="px-4 py-2 text-[13px] bg-accent hover:bg-accent-hover disabled:opacity-50 text-white rounded-lg cursor-pointer"
                     >
                       Send Revision Request
-                    </button>
+                    </Button>
                   </div>
                 </div>
               )}
diff --git a/web/src/pages/PlansPage.tsx b/web/src/pages/PlansPage.tsx
index 942f6260..db709b26 100644
--- a/web/src/pages/PlansPage.tsx
+++ b/web/src/pages/PlansPage.tsx
@@ -1,21 +1,23 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Lightbulb } from 'lucide-react';
+import { Lightbulb } from '../components/ui/icons';
 import { usePlanStore, type Plan } from '../stores/planStore';
-import { PageHeader } from '../components/ui/PageHeader';
+import { Badge, type BadgeTone, Button, PageHeader } from '../components/ui';
 
-const STATUS_STYLES: Record<string, string> = {
-  pending: 'bg-yellow-400/10 text-hue-yellow border-yellow-400/20',
-  approved: 'bg-emerald-400/10 text-hue-emerald border-emerald-400/20',
-  implementing: 'bg-blue-400/10 text-hue-blue border-blue-400/20',
-  declined: 'bg-red-400/10 text-hue-red border-red-400/20',
-  superseded: 'bg-border-subtle/50 text-text-muted border-border-subtle',
-  failed: 'bg-red-400/10 text-hue-red border-red-400/20',
+/** A plan's lifecycle state, as a `Badge` tone. `superseded` is the fallback. */
+const STATUS_TONES: Record<string, BadgeTone> = {
+  pending: 'warning',
+  approved: 'success',
+  implementing: 'info',
+  declined: 'danger',
+  superseded: 'neutral',
+  failed: 'danger',
 };
 
-const TYPE_STYLES: Record<string, { label: string; className: string }> = {
-  'skill-create': { label: 'Skill', className: 'bg-purple-400/10 text-hue-purple border-purple-400/20' },
-  'skill-update': { label: 'Skill Update', className: 'bg-purple-400/10 text-hue-purple border-purple-400/20' },
+/** Plan type is identity, not status — hence `purple` rather than a feedback tone. */
+const TYPE_LABELS: Record<string, string> = {
+  'skill-create': 'Skill',
+  'skill-update': 'Skill Update',
 };
 
 const FILTERS = [
@@ -36,17 +38,17 @@ function PlanCard({ plan }: { plan: Plan }) {
     >
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0 flex-1">
-          <h3 className="font-medium text-[15px] text-text mb-1">
+          <h3 className="font-medium text-base text-text mb-1">
             {plan.task_title || plan.task_id}
           </h3>
-          <div className="flex items-center gap-3 text-[12px]">
-            <span className={`px-2 py-0.5 rounded-full border ${STATUS_STYLES[plan.status] || STATUS_STYLES.superseded}`}>
+          <div className="flex items-center gap-3 text-xs">
+            <Badge size="sm" pill outline tone={STATUS_TONES[plan.status] ?? 'neutral'}>
               {plan.status}
-            </span>
-            {plan.plan_type && plan.plan_type !== 'generic' && TYPE_STYLES[plan.plan_type] && (
-              <span className={`px-2 py-0.5 rounded-full border text-[11px] ${TYPE_STYLES[plan.plan_type].className}`}>
-                {TYPE_STYLES[plan.plan_type].label}
-              </span>
+            </Badge>
+            {plan.plan_type && plan.plan_type !== 'generic' && TYPE_LABELS[plan.plan_type] && (
+              <Badge size="sm" pill outline tone="purple">
+                {TYPE_LABELS[plan.plan_type]}
+              </Badge>
             )}
             <span className="text-text-faint">v{plan.version}</span>
             <span className="text-text-faint">{plan.created_at?.slice(0, 10)}</span>
@@ -69,17 +71,14 @@ export function PlansPage() {
         icon={<Lightbulb size={18} className="text-accent shrink-0" />}
         title="Plans"
         filters={FILTERS.map(f => (
-          <button
+          <Button
             key={f.value}
+            variant="pill"
+            active={filter === f.value}
             onClick={() => setFilter(f.value)}
-            className={`px-3 py-1 text-[12px] rounded-full border cursor-pointer transition-colors whitespace-nowrap
-              ${filter === f.value
-                ? 'bg-accent/15 text-accent border-accent/30'
-                : 'text-text-dim border-border hover:border-border hover:text-text-muted'
-              }`}
           >
             {f.label}
-          </button>
+          </Button>
         ))}
       />
 
diff --git a/web/src/pages/SkillDetailPage.tsx b/web/src/pages/SkillDetailPage.tsx
index 3eb3d8c9..d46b481c 100644
--- a/web/src/pages/SkillDetailPage.tsx
+++ b/web/src/pages/SkillDetailPage.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Save, Trash2, Zap, CheckCircle, XCircle, Clock, FileText } from 'lucide-react';
+import { ArrowLeft, Save, Trash2, Zap, CheckCircle, XCircle, Clock, FileText } from '../components/ui/icons';
 import { useSkillsStore } from '../stores/skillsStore';
-import { Modal } from '../components/ui/Modal';
+import { Badge, Button, IconButton, Modal, TextArea } from '../components/ui';
 
 function UsageBar({ total, success }: { total: number; success: number }) {
   if (total === 0) return null;
@@ -10,7 +10,7 @@ function UsageBar({ total, success }: { total: number; success: number }) {
   return (
     <div className="w-full bg-surface-raised rounded-full h-1.5">
       <div
-        className={`h-1.5 rounded-full ${pct >= 90 ? 'bg-emerald-500' : pct >= 70 ? 'bg-amber-500' : 'bg-red-500'}`}
+        className={`h-1.5 rounded-full ${pct >= 90 ? 'bg-success' : pct >= 70 ? 'bg-warning' : 'bg-error'}`}
         style={{ width: `${pct}%` }}
       />
     </div>
@@ -75,44 +75,42 @@ export function SkillDetailPage() {
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
         <div className="flex items-center gap-3">
-          <button onClick={() => navigate('/skills')} className="text-text-dim hover:text-text-secondary cursor-pointer">
+          <IconButton label="Back to skills" onClick={() => navigate('/skills')}>
             <ArrowLeft size={16} />
-          </button>
+          </IconButton>
           <div>
             <div className="flex items-center gap-2">
               <h1 className="text-sm font-medium text-text">{selectedSkill.name}</h1>
-              <span className="text-[10px] text-text-dim bg-surface-raised px-1.5 py-0.5 rounded">v{selectedSkill.version}</span>
+              <Badge>v{selectedSkill.version}</Badge>
             </div>
-            <p className="text-[10px] text-text-dim mt-0.5">{selectedSkill.id}</p>
+            <p className="text-2xs text-text-dim mt-0.5">{selectedSkill.id}</p>
           </div>
         </div>
         <div className="flex items-center gap-2">
-          <button
+          {/* A state readout that toggles: `success` when on, plain when off.
+              Not `pill active` — accent would read as a selected filter. */}
+          <Button
+            variant={selectedSkill.enabled ? 'success' : 'secondary'}
+            size="xs"
+            aria-pressed={selectedSkill.enabled}
             onClick={() => toggleSkill(selectedSkill.id, !selectedSkill.enabled)}
-            className={`px-2 py-1 text-xs rounded cursor-pointer ${
-              selectedSkill.enabled
-                ? 'bg-emerald-500/15 text-emerald-600 hover:bg-emerald-500/25'
-                : 'bg-surface-raised text-text-dim hover:bg-surface-raised'
-            }`}
           >
             {selectedSkill.enabled ? 'Enabled' : 'Disabled'}
-          </button>
+          </Button>
           {hasChanges && (
-            <button
-              onClick={handleSave}
-              disabled={actionLoading}
-              className="flex items-center gap-1 px-2 py-1 text-xs bg-accent text-white rounded hover:bg-accent-hover cursor-pointer disabled:opacity-50"
-            >
+            <Button variant="primary" size="xs" onClick={handleSave} disabled={actionLoading}>
               <Save size={12} />
               Save
-            </button>
+            </Button>
           )}
-          <button
+          <IconButton
+            label="Delete skill"
+            variant="dangerGhost"
+            size="xs"
             onClick={() => setShowDeleteConfirm(true)}
-            className="flex items-center gap-1 px-2 py-1 text-xs text-hue-red hover:bg-red-900/20 rounded cursor-pointer"
           >
             <Trash2 size={12} />
-          </button>
+          </IconButton>
         </div>
       </div>
 
@@ -123,12 +121,15 @@ export function SkillDetailPage() {
           <div className="px-4 py-2 border-b border-border flex items-center gap-2">
             <FileText size={12} className="text-text-dim" />
             <span className="text-xs text-text-muted">SKILL.md</span>
-            {hasChanges && <span className="text-[10px] text-hue-amber">unsaved</span>}
+            {hasChanges && <span className="text-2xs text-hue-amber">unsaved</span>}
           </div>
-          <textarea
+          {/* `bare`: a full-bleed editor pane, so no surface, border or radius
+              — FIELD_BARE leaves the spacing and colour to this call site. */}
+          <TextArea
+            bare
             value={editContent}
             onChange={e => { setEditContent(e.target.value); setHasChanges(true); }}
-            className="flex-1 bg-bg text-text-secondary text-xs font-mono p-4 resize-none outline-none leading-relaxed"
+            className="flex-1 text-text-secondary text-xs font-mono p-4 leading-relaxed"
             spellCheck={false}
             onKeyDown={e => {
               if ((e.metaKey || e.ctrlKey) && e.key === 's') {
@@ -205,7 +206,7 @@ export function SkillDetailPage() {
                   <span className="text-text-dim">Allowed Tools</span>
                   <div className="flex flex-wrap gap-1 mt-1">
                     {selectedSkill.allowed_tools.map(t => (
-                      <span key={t} className="text-[10px] bg-surface-raised text-text-muted px-1.5 py-0.5 rounded">{t}</span>
+                      <Badge key={t}>{t}</Badge>
                     ))}
                   </div>
                 </div>
@@ -231,7 +232,7 @@ export function SkillDetailPage() {
               <h3 className="text-xs font-medium text-text-muted mb-2">Recent Usage</h3>
               <div className="space-y-2">
                 {selectedSkill.recent_usage.map(u => (
-                  <div key={u.id} className="flex items-center justify-between text-[10px]">
+                  <div key={u.id} className="flex items-center justify-between text-2xs">
                     <div className="flex items-center gap-1.5">
                       {u.success ? (
                         <CheckCircle size={10} className="text-hue-emerald" />
@@ -260,16 +261,12 @@ export function SkillDetailPage() {
         size="sm"
         footer={
           <>
-            <button onClick={() => setShowDeleteConfirm(false)} className="px-3 py-1.5 text-xs text-text-muted hover:text-text-secondary cursor-pointer">
+            <Button variant="ghost" onClick={() => setShowDeleteConfirm(false)}>
               Cancel
-            </button>
-            <button
-              onClick={handleDelete}
-              disabled={actionLoading}
-              className="px-3 py-1.5 text-xs bg-red-600 text-white rounded hover:bg-red-700 cursor-pointer disabled:opacity-50"
-            >
+            </Button>
+            <Button variant="dangerSolid" onClick={handleDelete} disabled={actionLoading}>
               {actionLoading ? 'Deleting...' : 'Delete'}
-            </button>
+            </Button>
           </>
         }
       >
diff --git a/web/src/pages/SkillsPage.tsx b/web/src/pages/SkillsPage.tsx
index ec9c6ce3..a9da23e3 100644
--- a/web/src/pages/SkillsPage.tsx
+++ b/web/src/pages/SkillsPage.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Plus, RefreshCw, Zap, CheckCircle, XCircle, Clock } from 'lucide-react';
+import { Plus, RefreshCw, Zap, CheckCircle, XCircle, Clock } from '../components/ui/icons';
 import { useSkillsStore, type Skill } from '../stores/skillsStore';
-import { Modal } from '../components/ui/Modal';
+import { Badge, Button, Modal, TextArea, TextField } from '../components/ui';
 
 function SkillCard({ skill }: { skill: Skill }) {
   const navigate = useNavigate();
@@ -20,24 +20,30 @@ function SkillCard({ skill }: { skill: Skill }) {
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
             <h3 className="text-sm font-medium text-text truncate">{skill.name}</h3>
-            <span className="text-[10px] text-text-dim bg-surface-raised px-1.5 py-0.5 rounded">
-              v{skill.version}
-            </span>
+            <Badge>v{skill.version}</Badge>
           </div>
           <p className="text-xs text-text-muted mt-1 line-clamp-2">{skill.description}</p>
         </div>
+        {/* A switch, not an icon button: the track *is* the control, so there
+            is no glyph for `IconButton` to take as children.
+
+            `bg-success-solid`, not `bg-success`: the white knob has to stay
+            legible on the track, and the bare token is a feedback *foreground*
+            — pale mint in dark mode, where the knob would vanish. */}
         <button
+          type="button"
           onClick={(e) => { e.stopPropagation(); toggleSkill(skill.id, !skill.enabled); }}
           className={`ml-3 w-8 h-4 rounded-full transition-colors flex items-center shrink-0 cursor-pointer ${
-            skill.enabled ? 'bg-emerald-600 justify-end' : 'bg-border-subtle justify-start'
+            skill.enabled ? 'bg-success-solid justify-end' : 'bg-border-subtle justify-start'
           }`}
           title={skill.enabled ? 'Enabled' : 'Disabled'}
+          aria-pressed={skill.enabled}
         >
           <div className="w-3 h-3 rounded-full bg-white mx-0.5" />
         </button>
       </div>
 
-      <div className="flex items-center gap-4 mt-3 text-[10px] text-text-dim">
+      <div className="flex items-center gap-4 mt-3 text-2xs text-text-dim">
         <div className="flex items-center gap-1">
           <Zap size={10} />
           <span>{skill.total_invocations} uses</span>
@@ -87,42 +93,43 @@ function CreateSkillDialog() {
       closeOnBackdrop={false}
       footer={
         <>
-          <button onClick={() => setShowCreateDialog(false)} className="px-3 py-1.5 text-xs text-text-muted hover:text-text-secondary cursor-pointer">
+          <Button variant="ghost" onClick={() => setShowCreateDialog(false)}>
             Cancel
-          </button>
-          <button
+          </Button>
+          <Button
+            variant="primary"
             onClick={handleCreate}
             disabled={!name.trim() || !description.trim() || actionLoading}
-            className="px-3 py-1.5 text-xs bg-accent text-white rounded hover:bg-accent-hover disabled:opacity-50 cursor-pointer disabled:cursor-default"
           >
             {actionLoading ? 'Creating...' : 'Create Skill'}
-          </button>
+          </Button>
         </>
       }
     >
       <div className="p-4 space-y-3">
         <div>
           <label className="text-xs text-text-muted block mb-1">Name</label>
-          <input
+          <TextField
             value={name} onChange={e => setName(e.target.value)}
-            className="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm text-text outline-none focus:border-accent"
             placeholder="e.g. code-review"
             autoFocus
           />
         </div>
         <div>
           <label className="text-xs text-text-muted block mb-1">Description</label>
-          <textarea
+          <TextArea
             value={description} onChange={e => setDescription(e.target.value)}
-            className="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm text-text outline-none focus:border-accent min-h-[60px] resize-y"
+            resizable
+            className="min-h-[60px]"
             placeholder='This skill should be used when the user asks to "review code"...'
           />
         </div>
         <div>
           <label className="text-xs text-text-muted block mb-1">Instructions (optional)</label>
-          <textarea
+          <TextArea
             value={content} onChange={e => setContent(e.target.value)}
-            className="w-full bg-bg border border-border rounded px-3 py-1.5 text-sm text-text outline-none focus:border-accent min-h-[120px] resize-y font-mono text-xs"
+            resizable
+            className="min-h-[120px] font-mono text-xs"
             placeholder="Markdown instructions for the agent..."
           />
         </div>
@@ -142,27 +149,23 @@ export function SkillsPage() {
       <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
         <div className="flex items-center gap-2">
           <h1 className="text-sm font-medium text-text">Skills</h1>
-          <span className="text-[10px] text-text-dim bg-surface-raised px-1.5 py-0.5 rounded">
-            {skills.length}
-          </span>
+          <Badge>{skills.length}</Badge>
         </div>
         <div className="flex items-center gap-2">
-          <button
+          <Button
+            variant="subtle"
+            size="xs"
             onClick={syncSkills}
             disabled={actionLoading}
-            className="flex items-center gap-1 px-2 py-1 text-xs text-text-muted hover:text-text-secondary hover:bg-surface-hover rounded cursor-pointer disabled:opacity-50"
             title="Re-scan filesystem for new skills"
           >
             <RefreshCw size={12} className={actionLoading ? 'animate-spin' : ''} />
             Sync
-          </button>
-          <button
-            onClick={() => setShowCreateDialog(true)}
-            className="flex items-center gap-1 px-2 py-1 text-xs bg-accent text-white rounded hover:bg-accent-hover cursor-pointer"
-          >
+          </Button>
+          <Button variant="primary" size="xs" onClick={() => setShowCreateDialog(true)}>
             <Plus size={12} />
             New Skill
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/web/src/pages/SourcesPage.tsx b/web/src/pages/SourcesPage.tsx
index 47536bf6..a6372e45 100644
--- a/web/src/pages/SourcesPage.tsx
+++ b/web/src/pages/SourcesPage.tsx
@@ -6,7 +6,8 @@ import {
   RefreshCw, Play, Loader2, Mail, Github, MessageCircle, Inbox,
   ExternalLink, Trash2, ChevronDown, ChevronRight,
   CheckCircle2, XCircle, HardDrive, Database, Filter, AlertTriangle,
-} from 'lucide-react';
+} from '../components/ui/icons';
+import { Badge, Button, Checkbox, IconButton, type BadgeTone } from '../components/ui';
 import { useSourcesStore, type SourceOverviewEntry } from '../stores/sourcesStore';
 import { MessageContent } from '../components/Sources/MessageContent';
 
@@ -40,14 +41,18 @@ function sourceIcon(source: string) {
   }
 }
 
-function sourceBadgeColor(source: string): string {
+/**
+ * Identity, not status — the tone says *which* source this is, so it stays on
+ * the `hue-*` ramp `Badge` is built from rather than the success/error tokens.
+ */
+function sourceBadgeTone(source: string): BadgeTone {
   const type = source.split(':')[0];
   switch (type) {
-    case 'gmail': return 'text-red-600 bg-red-500/15';
-    case 'github': return 'text-purple-600 bg-purple-500/15';
-    case 'github_repos': return 'text-purple-600 bg-purple-500/15';
-    case 'telegram': return 'text-blue-600 bg-blue-500/15';
-    default: return 'text-text-muted bg-surface-raised';
+    case 'gmail': return 'danger';
+    case 'github': return 'purple';
+    case 'github_repos': return 'purple';
+    case 'telegram': return 'info';
+    default: return 'neutral';
   }
 }
 
@@ -71,15 +76,23 @@ function SyncButton({ onClick, small = false }: { onClick: () => Promise<void>;
     setRunning(true);
     try { await onClick(); } finally { setRunning(false); }
   };
+  const glyph = running
+    ? <Loader2 size={small ? 12 : 14} className="animate-spin" />
+    : <Play size={small ? 12 : 14} />;
+
+  if (small) {
+    return (
+      <IconButton size="xs" label="Sync now" onClick={handleClick} disabled={running}>
+        {glyph}
+      </IconButton>
+    );
+  }
+
   return (
-    <button onClick={handleClick} disabled={running}
-      className={`flex items-center gap-1 rounded transition-colors cursor-pointer shrink-0
-        ${running ? 'text-text-faint cursor-not-allowed' : 'text-text-dim hover:text-text-secondary hover:bg-surface-raised'}
-        ${small ? 'p-1' : 'px-2 py-1.5 text-[12px]'}`}
-      title="Sync now">
-      {running ? <Loader2 size={small ? 12 : 14} className="animate-spin" /> : <Play size={small ? 12 : 14} />}
-      {!small && !running && <span>Sync</span>}
-    </button>
+    <Button variant="ghost" onClick={handleClick} disabled={running} title="Sync now">
+      {glyph}
+      {!running && <span>Sync</span>}
+    </Button>
   );
 }
 
@@ -88,19 +101,18 @@ function SyncButton({ onClick, small = false }: { onClick: () => Promise<void>;
 function HealthBadge({ state }: { state: 'healthy' | 'degraded' | 'open' | undefined }) {
   if (!state || state === 'healthy') return null;
 
-  const config = {
-    degraded: { Icon: AlertTriangle, color: 'text-amber-600', bg: 'bg-amber-500/15', label: 'degraded' },
-    open:     { Icon: XCircle,       color: 'text-red-600',   bg: 'bg-red-500/15',   label: 'circuit open' },
+  const config: { Icon: typeof AlertTriangle; tone: BadgeTone; label: string } | undefined = {
+    degraded: { Icon: AlertTriangle, tone: 'warning' as const, label: 'degraded' },
+    open:     { Icon: XCircle,       tone: 'danger' as const,  label: 'circuit open' },
   }[state];
   if (!config) return null;
 
   const { Icon } = config;
   return (
-    <span className={`flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded ${config.color} ${config.bg}`}
-          title={`Source is ${config.label} — check runs tab for errors`}>
+    <Badge tone={config.tone} title={`Source is ${config.label} — check runs tab for errors`}>
       <Icon size={10} />
       {config.label}
-    </span>
+    </Badge>
   );
 }
 
@@ -119,30 +131,29 @@ function SourceSidebar() {
       {/* Tab toggle */}
       <div className="flex border-b border-border-subtle">
         {(['inbox', 'runs', 'consumers'] as const).map(tab => (
-          <button key={tab} onClick={() => setActiveTab(tab)}
-            className={`flex-1 py-2 text-[12px] font-medium transition-colors cursor-pointer
-              ${activeTab === tab ? 'text-accent border-b-2 border-accent' : 'text-text-dim hover:text-text-muted'}`}>
+          <Button key={tab} variant="tab" active={activeTab === tab}
+            onClick={() => setActiveTab(tab)} className="flex-1 py-2">
             {tab === 'inbox' ? 'Inbox' : tab === 'runs' ? 'Runs' : 'Consumers'}
-          </button>
+          </Button>
         ))}
       </div>
 
       {/* Source list */}
       <div className="p-2 space-y-1">
-        <button onClick={() => setActiveSource(null)}
-          className={`w-full flex items-center justify-between px-2 py-1.5 rounded text-[13px] transition-colors cursor-pointer
-            ${activeSource === null ? 'bg-accent/15 text-accent' : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'}`}>
+        <Button variant="subtle" size="sm" fullWidth active={activeSource === null}
+          onClick={() => setActiveSource(null)}
+          className="justify-between">
           <span className="flex items-center gap-2"><Inbox size={14} /> All</span>
-          <span className="text-[11px] opacity-70 tabular-nums shrink-0">{totalMessages}</span>
-        </button>
+          <span className="text-xs opacity-70 tabular-nums shrink-0">{totalMessages}</span>
+        </Button>
 
         {Object.entries(sources).map(([src, info]) => {
           const unread = consumers.find(c => c.consumer === 'inbox' && c.source === src)?.unread || 0;
           return (
             <div key={src} className="group">
-              <button onClick={() => setActiveSource(src)}
-                className={`w-full flex items-center justify-between px-2 py-1.5 rounded text-[13px] transition-colors cursor-pointer
-                  ${activeSource === src ? 'bg-accent/15 text-accent' : 'text-text-muted hover:text-text-secondary hover:bg-surface-raised'}`}>
+              <Button variant="subtle" size="sm" fullWidth active={activeSource === src}
+                onClick={() => setActiveSource(src)}
+                className="justify-between">
                 <span className="flex items-center gap-1.5 min-w-0 truncate">
                   {sourceIcon(src)}
                   <span className="truncate">{sourceLabel(src)}</span>
@@ -150,12 +161,12 @@ function SourceSidebar() {
                 </span>
                 <span className="shrink-0 flex items-center gap-1.5">
                   {unread > 0 && (
-                    <span className="text-[10px] tabular-nums bg-amber-500/20 text-hue-amber px-1 py-0.5 rounded-full leading-none font-medium">
+                    <Badge tone="warning" pill className="tabular-nums leading-none">
                       {unread}
-                    </span>
+                    </Badge>
                   )}
                   <span className="relative w-6 h-5 flex items-center justify-end">
-                    <span className="text-[11px] opacity-70 tabular-nums group-hover:opacity-0 transition-opacity">
+                    <span className="text-xs opacity-70 tabular-nums group-hover:opacity-0 transition-opacity">
                       {info.message_count}
                     </span>
                     <span className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
@@ -163,7 +174,7 @@ function SourceSidebar() {
                     </span>
                   </span>
                 </span>
-              </button>
+              </Button>
             </div>
           );
         })}
@@ -172,36 +183,42 @@ function SourceSidebar() {
       {/* Storage section */}
       <div className="mt-auto border-t border-border-subtle p-3 space-y-2">
         <div className="flex items-center justify-between">
-          <span className="text-[11px] text-text-dim flex items-center gap-1"><HardDrive size={11} /> Storage</span>
-          <span className="text-[12px] text-text-muted">{formatBytes(totalStorage)}</span>
+          <span className="text-xs text-text-dim flex items-center gap-1"><HardDrive size={11} /> Storage</span>
+          <span className="text-xs text-text-muted">{formatBytes(totalStorage)}</span>
         </div>
         {Object.entries(sources).filter(([, s]) => s.storage_bytes > 0).map(([src, s]) => (
-          <div key={src} className="flex items-center justify-between text-[11px]">
+          <div key={src} className="flex items-center justify-between text-xs">
             <span className="text-text-dim truncate">{sourceLabel(src)}</span>
             <span className="text-text-muted">{formatBytes(s.storage_bytes)}</span>
           </div>
         ))}
 
-        {/* Purge buttons */}
+        {/* Purge buttons. The confirm step escalates from the quiet
+            hover-to-red treatment to the tinted one, which is the whole
+            difference between the two variants. */}
         <div className="flex gap-1 pt-1">
           {activeSource ? (
-            <button onClick={() => {
-              if (purgeConfirm === activeSource) { purgeMessages(activeSource); setPurgeConfirm(null); }
-              else setPurgeConfirm(activeSource);
-            }}
-              className={`flex-1 flex items-center justify-center gap-1 px-2 py-1 text-[11px] rounded transition-colors cursor-pointer
-                ${purgeConfirm === activeSource ? 'bg-red-500/15 text-red-600 border border-red-500/30' : 'text-text-dim hover:text-hue-red bg-surface border border-border-subtle'}`}>
+            <Button
+              variant={purgeConfirm === activeSource ? 'danger' : 'dangerGhost'}
+              size="xs"
+              className="flex-1"
+              onClick={() => {
+                if (purgeConfirm === activeSource) { purgeMessages(activeSource); setPurgeConfirm(null); }
+                else setPurgeConfirm(activeSource);
+              }}>
               <Trash2 size={10} /> {purgeConfirm === activeSource ? 'Confirm?' : 'Purge source'}
-            </button>
+            </Button>
           ) : (
-            <button onClick={() => {
-              if (purgeConfirm === '_all') { purgeMessages(); setPurgeConfirm(null); }
-              else setPurgeConfirm('_all');
-            }}
-              className={`flex-1 flex items-center justify-center gap-1 px-2 py-1 text-[11px] rounded transition-colors cursor-pointer
-                ${purgeConfirm === '_all' ? 'bg-red-500/15 text-red-600 border border-red-500/30' : 'text-text-dim hover:text-hue-red bg-surface border border-border-subtle'}`}>
+            <Button
+              variant={purgeConfirm === '_all' ? 'danger' : 'dangerGhost'}
+              size="xs"
+              className="flex-1"
+              onClick={() => {
+                if (purgeConfirm === '_all') { purgeMessages(); setPurgeConfirm(null); }
+                else setPurgeConfirm('_all');
+              }}>
               <Trash2 size={10} /> {purgeConfirm === '_all' ? 'Confirm purge all?' : 'Purge all'}
-            </button>
+            </Button>
           )}
         </div>
 
@@ -214,7 +231,7 @@ function SourceSidebar() {
 
         {/* Health summary */}
         {sourceHealth && Object.values(sourceHealth).some(h => h.state !== 'healthy') && (
-          <div className="text-[11px] text-hue-amber flex items-center gap-1 pt-1">
+          <div className="text-xs text-warning flex items-center gap-1 pt-1">
             <AlertTriangle size={10} />
             {Object.values(sourceHealth).filter(h => h.state !== 'healthy').length} source(s) unhealthy
           </div>
@@ -227,14 +244,14 @@ function SourceSidebar() {
 function SourceStats({ info }: { info: SourceOverviewEntry }) {
   return (
     <div className="space-y-1 pt-1">
-      <div className="text-[11px] text-text-dim flex items-center gap-1"><Database size={10} /> Stats</div>
-      <div className="grid grid-cols-2 gap-x-3 text-[11px]">
+      <div className="text-xs text-text-dim flex items-center gap-1"><Database size={10} /> Stats</div>
+      <div className="grid grid-cols-2 gap-x-3 text-xs">
         <span className="text-text-dim">1h runs</span><span className="text-text-muted">{info.stats_1h.runs}</span>
         <span className="text-text-dim">1h fetched</span><span className="text-text-muted">{info.stats_1h.fetched}</span>
         <span className="text-text-dim">24h runs</span><span className="text-text-muted">{info.stats_24h.runs}</span>
         <span className="text-text-dim">24h fetched</span><span className="text-text-muted">{info.stats_24h.fetched}</span>
         {info.stats_24h.errors > 0 && <>
-          <span className="text-text-dim">24h errors</span><span className="text-hue-red">{info.stats_24h.errors}</span>
+          <span className="text-text-dim">24h errors</span><span className="text-error">{info.stats_24h.errors}</span>
         </>}
       </div>
     </div>
@@ -254,14 +271,14 @@ function AggregateStats({ sources }: { sources: Record<string, SourceOverviewEnt
   );
   return (
     <div className="space-y-1 pt-1">
-      <div className="text-[11px] text-text-dim flex items-center gap-1"><Database size={10} /> Stats (all)</div>
-      <div className="grid grid-cols-2 gap-x-3 text-[11px]">
+      <div className="text-xs text-text-dim flex items-center gap-1"><Database size={10} /> Stats (all)</div>
+      <div className="grid grid-cols-2 gap-x-3 text-xs">
         <span className="text-text-dim">1h runs</span><span className="text-text-muted">{totals.runs_1h}</span>
         <span className="text-text-dim">1h fetched</span><span className="text-text-muted">{totals.fetched_1h}</span>
         <span className="text-text-dim">24h runs</span><span className="text-text-muted">{totals.runs_24h}</span>
         <span className="text-text-dim">24h fetched</span><span className="text-text-muted">{totals.fetched_24h}</span>
         {totals.errors_24h > 0 && <>
-          <span className="text-text-dim">24h errors</span><span className="text-hue-red">{totals.errors_24h}</span>
+          <span className="text-text-dim">24h errors</span><span className="text-error">{totals.errors_24h}</span>
         </>}
       </div>
     </div>
@@ -295,16 +312,17 @@ function MessageList() {
       {messages.map((msg) => {
         const isSelected = selectedMessage?.id === msg.id && selectedMessage?.source === msg.source;
         return (
+          // A bare <button> rather than `Button`: this is a two-line card, and
+          // `Button`'s base `inline-flex items-center justify-center` would lay
+          // the two rows side by side rather than stacked.
           <button key={`${msg.source}:${msg.id}`} onClick={() => selectMessage(msg.source, msg.id)}
             className={`w-full text-left px-3 py-2.5 border-b border-border-subtle transition-colors cursor-pointer
               ${isSelected ? 'bg-accent/10 border-l-2 border-l-accent' : 'hover:bg-surface'}`}>
             <div className="flex items-center gap-2 mb-0.5">
-              <span className={`text-[10px] px-1.5 py-0.5 rounded ${sourceBadgeColor(msg.source)}`}>
-                {msg.source.split(':')[0]}
-              </span>
-              <span className="text-[11px] text-text-faint ml-auto">{formatRelativeTime(msg.timestamp)}</span>
+              <Badge tone={sourceBadgeTone(msg.source)}>{msg.source.split(':')[0]}</Badge>
+              <span className="text-xs text-text-faint ml-auto">{formatRelativeTime(msg.timestamp)}</span>
             </div>
-            <div className="text-[13px] text-text-secondary truncate">{msg.summary}</div>
+            <div className="text-sm text-text-secondary truncate">{msg.summary}</div>
           </button>
         );
       })}
@@ -342,13 +360,13 @@ function RunsList() {
     <div className="flex-1 flex flex-col overflow-hidden">
       {/* Health info card */}
       {isUnhealthy && (
-        <div className={`mx-3 mt-2 mb-1 p-2 rounded text-[12px] ${
+        <div className={`mx-3 mt-2 mb-1 p-2 rounded text-xs border ${
           healthEntry.state === 'open'
-            ? 'bg-red-500/10 border border-red-500/20'
-            : 'bg-amber-500/10 border border-amber-500/20'
+            ? 'bg-error-bg border-error-border'
+            : 'bg-warning-bg border-warning-border'
         }`}>
           <div className={`flex items-center gap-1.5 font-medium mb-1 ${
-            healthEntry.state === 'open' ? 'text-red-600' : 'text-amber-600'
+            healthEntry.state === 'open' ? 'text-error' : 'text-warning'
           }`}>
             <AlertTriangle size={12} />
             Circuit breaker: {healthEntry.state}
@@ -360,7 +378,7 @@ function RunsList() {
             )}
           </div>
           {healthEntry.last_error && (
-            <div className="mt-1 text-[11px] text-text-dim truncate">
+            <div className="mt-1 text-xs text-text-dim truncate">
               Last error: {healthEntry.last_error}
             </div>
           )}
@@ -369,23 +387,21 @@ function RunsList() {
 
       {/* Filter bar */}
       <div className="flex items-center justify-between px-3 py-1.5 border-b border-border-subtle shrink-0">
-        <span className="text-[11px] text-text-dim">
+        <span className="text-xs text-text-dim">
           {filteredRuns.length}{hideEmpty && filteredRuns.length !== runs.length ? ` of ${runs.length}` : ''} runs
         </span>
-        <label className="flex items-center gap-1.5 text-[11px] text-text-dim cursor-pointer select-none">
+        {/* Checkbox's own `label` prop is not used here: it renders the label
+            after the input, and this one puts the filter glyph first. The
+            wrapping <label> already makes the text part of the hit area. */}
+        <label className="flex items-center gap-1.5 text-xs text-text-dim cursor-pointer select-none">
           <Filter size={10} />
-          <input
-            type="checkbox"
-            checked={hideEmpty}
-            onChange={(e) => setHideEmpty(e.target.checked)}
-            className="accent-accent cursor-pointer"
-          />
+          <Checkbox checked={hideEmpty} onChange={(e) => setHideEmpty(e.target.checked)} />
           Hide empty
         </label>
       </div>
 
       <div className="flex-1 overflow-y-auto">
-        <table className="w-full text-[13px]">
+        <table className="w-full text-sm">
           <thead className="sticky top-0 bg-bg">
             <tr className="text-text-muted">
               <th className="text-left px-3 py-2 font-medium">Source</th>
@@ -411,9 +427,9 @@ function RunsList() {
                   <td className="px-3 py-2 text-text-muted">{run.records_fetched}/{run.records_processed}</td>
                   <td className="px-3 py-2">
                     {run.error ? (
-                      <span className="flex items-center gap-1 text-hue-red"><XCircle size={12} /> error</span>
+                      <span className="flex items-center gap-1 text-error"><XCircle size={12} /> error</span>
                     ) : (
-                      <span className="flex items-center gap-1 text-hue-emerald"><CheckCircle2 size={12} /> ok</span>
+                      <span className="flex items-center gap-1 text-success"><CheckCircle2 size={12} /> ok</span>
                     )}
                   </td>
                 </tr>
@@ -455,22 +471,22 @@ function RunDetail() {
       <div className="px-4 py-3 border-b border-border-subtle bg-bg">
         <div className="flex items-center gap-2 mb-1">
           {sourceIcon(run.source)}
-          <span className="text-[14px] text-text-secondary font-medium">{sourceLabel(run.source)}</span>
+          <span className="text-sm text-text-secondary font-medium">{sourceLabel(run.source)}</span>
           {run.error ? (
-            <span className="flex items-center gap-1 text-[11px] text-hue-red"><XCircle size={11} /> error</span>
+            <span className="flex items-center gap-1 text-xs text-error"><XCircle size={11} /> error</span>
           ) : (
-            <span className="flex items-center gap-1 text-[11px] text-hue-emerald"><CheckCircle2 size={11} /> ok</span>
+            <span className="flex items-center gap-1 text-xs text-success"><CheckCircle2 size={11} /> ok</span>
           )}
         </div>
-        <div className="text-[12px] text-text-dim">{new Date(run.ran_at).toLocaleString()}</div>
+        <div className="text-xs text-text-dim">{new Date(run.ran_at).toLocaleString()}</div>
 
         {/* Stats */}
         <div className="flex gap-4 mt-2">
-          <span className="text-[12px]">
+          <span className="text-xs">
             <span className="text-text-dim">Fetched:</span>{' '}
             <span className="text-text-muted">{run.records_fetched}</span>
           </span>
-          <span className="text-[12px]">
+          <span className="text-xs">
             <span className="text-text-dim">Processed:</span>{' '}
             <span className="text-text-muted">{run.records_processed}</span>
           </span>
@@ -478,23 +494,23 @@ function RunDetail() {
 
         {/* Error message */}
         {run.error && (
-          <div className="mt-2 p-2 bg-red-500/10 border border-red-500/20 rounded text-[12px] text-red-600">
+          <div className="mt-2 p-2 bg-error-bg border border-error-border rounded text-xs text-error">
             {run.error}
           </div>
         )}
 
         {/* Session link */}
         {run.session_id && (
-          <button onClick={() => navigate(`/chat/${run.session_id}`)}
-            className="flex items-center gap-1.5 mt-2 text-[12px] text-accent hover:text-link transition-colors cursor-pointer">
+          <Button variant="accent" size="xs" className="gap-1.5 mt-2"
+            onClick={() => navigate(`/chat/${run.session_id}`)}>
             <ExternalLink size={12} /> View processing session
-          </button>
+          </Button>
         )}
       </div>
 
       {/* Consumed messages */}
       <div className="px-4 py-3">
-        <div className="text-[12px] text-text-dim mb-2">
+        <div className="text-xs text-text-dim mb-2">
           {selectedRunMessages.length > 0
             ? `${selectedRunMessages.length} message${selectedRunMessages.length > 1 ? 's' : ''} consumed`
             : run.session_id ? 'No linked messages' : 'No session linked to this run'}
@@ -502,12 +518,12 @@ function RunDetail() {
         {selectedRunMessages.map((msg) => (
           <div key={`${msg.source}:${msg.id}`}
             className="flex items-start gap-2 px-2 py-2 rounded hover:bg-surface transition-colors border-b border-border-subtle last:border-0">
-            <span className={`text-[10px] px-1.5 py-0.5 rounded shrink-0 mt-0.5 ${sourceBadgeColor(msg.source)}`}>
+            <Badge tone={sourceBadgeTone(msg.source)} className="mt-0.5">
               {msg.record_type.replace('_', ' ')}
-            </span>
+            </Badge>
             <div className="min-w-0 flex-1">
-              <div className="text-[13px] text-text-secondary truncate">{msg.summary}</div>
-              <div className="text-[11px] text-text-faint">{formatRelativeTime(msg.timestamp)}</div>
+              <div className="text-sm text-text-secondary truncate">{msg.summary}</div>
+              <div className="text-xs text-text-faint">{formatRelativeTime(msg.timestamp)}</div>
             </div>
           </div>
         ))}
@@ -546,18 +562,18 @@ function MessageDetail() {
       {/* Header */}
       <div className="px-4 py-3 border-b border-border-subtle bg-bg">
         <div className="flex items-center gap-2 mb-1">
-          <span className={`text-[10px] px-1.5 py-0.5 rounded ${sourceBadgeColor(msg.source)}`}>
+          <Badge tone={sourceBadgeTone(msg.source)}>
             {msg.record_type}
-          </span>
-          <span className="text-[11px] text-text-faint">{new Date(msg.timestamp).toLocaleString()}</span>
+          </Badge>
+          <span className="text-xs text-text-faint">{new Date(msg.timestamp).toLocaleString()}</span>
         </div>
-        <div className="text-[14px] text-text-secondary font-medium">{msg.summary}</div>
+        <div className="text-sm text-text-secondary font-medium">{msg.summary}</div>
 
         {/* Metadata */}
         {msg.metadata && Object.keys(msg.metadata).length > 0 && (
           <div className="flex flex-wrap gap-2 mt-2">
             {Object.entries(msg.metadata).map(([k, v]) => (
-              <span key={k} className="text-[11px] px-1.5 py-0.5 bg-surface border border-border-subtle rounded">
+              <span key={k} className="text-xs px-1.5 py-0.5 bg-surface border border-border-subtle rounded">
                 <span className="text-text-dim">{k}:</span>{' '}
                 <span className="text-text-muted">{typeof v === 'object' ? JSON.stringify(v) : String(v)}</span>
               </span>
@@ -567,10 +583,10 @@ function MessageDetail() {
 
         {/* Session link */}
         {msg.run_session_id && (
-          <button onClick={() => navigate(`/chat/${msg.run_session_id}`)}
-            className="flex items-center gap-1.5 mt-2 text-[12px] text-accent hover:text-link transition-colors cursor-pointer">
+          <Button variant="accent" size="xs" className="gap-1.5 mt-2"
+            onClick={() => navigate(`/chat/${msg.run_session_id}`)}>
             <ExternalLink size={12} /> View processing session
-          </button>
+          </Button>
         )}
       </div>
 
@@ -588,14 +604,17 @@ function MessageDetail() {
       {/* Processed content toggle */}
       {hasProcessedContent && (
         <div className="px-4 pb-4">
-          <button onClick={() => setShowProcessed(!showProcessed)}
-            className="flex items-center gap-1.5 text-[12px] text-text-dim hover:text-text-muted transition-colors cursor-pointer mb-2">
+          <Button variant="ghost" size="xs" className="gap-1.5 mb-2"
+            onClick={() => setShowProcessed(!showProcessed)}>
             {showProcessed ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
             Processed version (what the agent saw)
-          </button>
+          </Button>
           {showProcessed && (
             <div className="p-3 bg-surface border border-border-subtle rounded-lg">
-              <div className="prose prose-invert prose-sm max-w-none text-text-muted">
+              {/* @tailwindcss/typography is not installed, so `prose` classes
+                  generate nothing. `.markdown-content` is this app's own rule
+                  set and covers the same ground. */}
+              <div className="markdown-content text-sm text-text-muted">
                 <ReactMarkdown remarkPlugins={[remarkGfm]}>
                   {msg.processed_content || ''}
                 </ReactMarkdown>
@@ -631,13 +650,13 @@ function ConsumersList() {
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
       <div className="flex items-center px-3 py-1.5 border-b border-border-subtle shrink-0">
-        <span className="text-[11px] text-text-dim">
+        <span className="text-xs text-text-dim">
           {consumers.length} cursor{consumers.length !== 1 ? 's' : ''} across {Object.keys(grouped).length} consumer{Object.keys(grouped).length !== 1 ? 's' : ''}
         </span>
       </div>
 
       <div className="flex-1 overflow-y-auto">
-        <table className="w-full text-[13px]">
+        <table className="w-full text-sm">
           <thead className="sticky top-0 bg-bg">
             <tr className="text-text-muted">
               <th className="text-left px-3 py-2 font-medium">Consumer</th>
@@ -652,14 +671,14 @@ function ConsumersList() {
             {consumers.map((c) => (
               <tr key={`${c.consumer}-${c.source}`}
                 className="border-t border-border-subtle hover:bg-surface transition-colors">
-                <td className="px-3 py-2 text-text-secondary font-mono text-[12px]">{c.consumer}</td>
+                <td className="px-3 py-2 text-text-secondary font-mono text-xs">{c.consumer}</td>
                 <td className="px-3 py-2">
                   <span className="flex items-center gap-1.5">
                     {sourceIcon(c.source)}
                     <span className="text-text-secondary truncate max-w-[140px]">{sourceLabel(c.source)}</span>
                   </span>
                 </td>
-                <td className="px-3 py-2 text-right text-text-muted font-mono tabular-nums text-[12px]">
+                <td className="px-3 py-2 text-right text-text-muted font-mono tabular-nums text-xs">
                   {c.cursor_seq}
                 </td>
                 <td className="px-3 py-2 text-right">
@@ -695,22 +714,23 @@ function ConsumersDetail() {
     <div className="flex-1 flex flex-col overflow-y-auto">
       <div className="px-4 py-3 border-b border-border-subtle bg-bg">
         <h3 className="text-sm font-medium text-text-secondary">Consumer Sessions</h3>
-        <p className="text-[11px] text-text-dim mt-0.5">Cron sessions processing the inbox</p>
+        <p className="text-xs text-text-dim mt-0.5">Cron sessions processing the inbox</p>
       </div>
       <div className="p-4 space-y-2">
         {sessions.length === 0 ? (
-          <div className="text-[13px] text-text-faint">No active consumer sessions</div>
+          <div className="text-sm text-text-faint">No active consumer sessions</div>
         ) : sessions.map(sid => {
           const cursorsForSession = consumers.filter(c => c.session_id === sid);
           const totalUnread = cursorsForSession.reduce((sum, c) => sum + c.unread, 0);
           return (
+            // Two-line card; see MessageList for why this is a bare <button>.
             <button key={sid} onClick={() => navigate(`/chat/${sid}`)}
               className="w-full text-left p-3 rounded border border-border-subtle hover:border-border-subtle hover:bg-surface transition-colors cursor-pointer">
               <div className="flex items-center justify-between">
-                <span className="text-[13px] text-text-secondary font-mono">{sid}</span>
+                <span className="text-sm text-text-secondary font-mono">{sid}</span>
                 <ExternalLink size={12} className="text-text-faint" />
               </div>
-              <div className="flex items-center gap-3 mt-1.5 text-[11px] text-text-dim">
+              <div className="flex items-center gap-3 mt-1.5 text-xs text-text-dim">
                 <span>{cursorsForSession.length} source{cursorsForSession.length !== 1 ? 's' : ''}</span>
                 {totalUnread > 0 && <span className="text-hue-amber">{totalUnread} unread</span>}
               </div>
@@ -752,17 +772,14 @@ export function SourcesPage() {
       <div className="border-b border-border-subtle px-4 py-2.5 flex items-center justify-between bg-bg shrink-0">
         <h1 className="text-lg font-semibold">Sources</h1>
         <div className="flex items-center gap-2">
-          <button onClick={handleSyncAll} disabled={syncing}
-            className={`flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-lg transition-colors cursor-pointer
-              ${syncing ? 'text-text-faint cursor-not-allowed bg-surface' : 'text-text-muted hover:text-text-secondary bg-surface hover:bg-surface-raised border border-border-subtle'}`}>
+          <Button variant="secondary" onClick={handleSyncAll} disabled={syncing}>
             {syncing ? <Loader2 size={13} className="animate-spin" /> : <Play size={13} />}
             {syncing ? 'Syncing...' : 'Sync All'}
-          </button>
-          <button onClick={() => { loadOverview(); if (activeTab === 'inbox') loadMessages(); }}
-            className="text-text-dim hover:text-text-muted cursor-pointer p-1.5 hover:bg-surface-raised rounded"
-            title="Refresh">
+          </Button>
+          <IconButton label="Refresh"
+            onClick={() => { loadOverview(); if (activeTab === 'inbox') loadMessages(); }}>
             <RefreshCw size={16} />
-          </button>
+          </IconButton>
         </div>
       </div>
 
diff --git a/web/src/pages/TaskDetailPage.tsx b/web/src/pages/TaskDetailPage.tsx
index 2719e8bc..59bee2fb 100644
--- a/web/src/pages/TaskDetailPage.tsx
+++ b/web/src/pages/TaskDetailPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft } from '../components/ui/icons';
+import { Button, IconButton } from '../components/ui';
 import { useTaskStore } from '../stores/taskStore';
 import { useTaskStatusStore } from '../stores/taskStatusStore';
 import { TaskDetailBody } from '../components/Tasks/TaskDetailBody';
@@ -38,12 +39,9 @@ export function TaskDetailPage() {
     return (
       <div className="h-full flex flex-col items-center justify-center gap-3 text-text-faint">
         <span>Task not found</span>
-        <button
-          onClick={() => navigate('/tasks')}
-          className="text-[13px] text-accent hover:underline cursor-pointer"
-        >
+        <Button variant="link" size="md" onClick={() => navigate('/tasks')}>
           Back to tasks
-        </button>
+        </Button>
       </div>
     );
   }
@@ -53,13 +51,9 @@ export function TaskDetailPage() {
     // overflowing it.
     <div className="h-full flex flex-col min-h-0">
       <div className="border-b border-border-subtle px-6 py-3 bg-bg shrink-0 flex items-center gap-3 min-w-0">
-        <button
-          onClick={() => navigate('/tasks')}
-          aria-label="Back to tasks"
-          className="p-1.5 text-text-dim hover:text-text-muted hover:bg-surface-raised rounded cursor-pointer shrink-0"
-        >
+        <IconButton label="Back to tasks" onClick={() => navigate('/tasks')}>
           <ArrowLeft size={18} />
-        </button>
+        </IconButton>
         <h1 className="text-lg font-semibold text-text truncate">{selectedTask.title}</h1>
       </div>
 
diff --git a/web/src/pages/TasksPage.tsx b/web/src/pages/TasksPage.tsx
index e3447e6d..f865fe5b 100644
--- a/web/src/pages/TasksPage.tsx
+++ b/web/src/pages/TasksPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { ChevronLeft, ChevronRight, Columns3, List, Plus, Search, SlidersHorizontal, X } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Columns3, List, Plus, Search, SlidersHorizontal, X } from '../components/ui/icons';
+import { Button, IconButton, Select, TextField } from '../components/ui';
 import { useTaskStore, TASKS_PAGE_SIZE, type TaskSort, type TaskViewMode } from '../stores/taskStore';
 import { useTaskStatusStore } from '../stores/taskStatusStore';
 import { TaskFilters } from '../components/Tasks/TaskFilters';
@@ -133,20 +134,21 @@ export function TasksPage() {
         title="Tasks"
         filters={
           <>
+            {/* A segmented control: `subtle` + `active` is the app's selected
+                treatment, so the raised-surface segment becomes an accent tint. */}
             <div className="flex items-center bg-surface-raised border border-border-subtle rounded-lg p-0.5 shrink-0 mr-2">
               {VIEW_OPTIONS.map(({ value, label, Icon }) => (
-                <button
+                <Button
                   key={value}
+                  variant="subtle"
+                  size="xs"
+                  active={viewMode === value}
                   onClick={() => setViewMode(value)}
                   aria-pressed={viewMode === value}
                   title={`${label} view`}
-                  className={`flex items-center gap-1.5 px-2.5 py-1 text-[12px] rounded-md cursor-pointer transition-colors
-                    ${viewMode === value
-                      ? 'bg-surface text-text shadow-sm'
-                      : 'text-text-faint hover:text-text-secondary'}`}
                 >
                   <Icon size={13} /> {label}
-                </button>
+                </Button>
               ))}
             </div>
 
@@ -158,23 +160,25 @@ export function TasksPage() {
         search={
           <div className="relative">
             <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-faint" />
-            <input
+            {/* `pl-8 pr-7` survives the field's own `px-3`: Tailwind emits the
+                per-side padding utilities after the axis ones. */}
+            <TextField
               ref={searchRef}
-              type="text"
               value={localQuery}
               onChange={e => handleSearchChange(e.target.value)}
               placeholder="Search..."
-              className="pl-8 pr-7 py-1.5 w-48 text-[13px] bg-surface-raised border border-border-subtle rounded-lg
-                text-text-secondary placeholder:text-placeholder focus:outline-none focus:border-accent/50
-                transition-colors"
+              fullWidth={false}
+              className="pl-8 pr-7 w-48"
             />
             {localQuery && (
-              <button
+              <IconButton
+                label="Clear search"
+                size="xs"
                 onClick={clearSearch}
-                className="absolute right-2 top-1/2 -translate-y-1/2 text-text-faint hover:text-text-muted cursor-pointer"
+                className="absolute right-2 top-1/2 -translate-y-1/2"
               >
                 <X size={13} />
-              </button>
+              </IconButton>
             )}
           </div>
         }
@@ -183,40 +187,42 @@ export function TasksPage() {
             {!isSearching && !isBoard && (
               // The "Sort by" label costs more than it explains once space is
               // tight; the select still names itself via title/aria-label.
-              <label className="flex items-center gap-1.5 text-[12px] text-text-faint">
+              <label className="flex items-center gap-1.5 text-xs text-text-faint">
                 <span className="hidden lg:inline">Sort by</span>
-                <select
+                {/* The house `Select` is a native `<select>`; a portalling one
+                    could not live inside this page's dialogs. */}
+                <Select
                   value={sort}
                   onChange={e => setSort(e.target.value as TaskSort)}
                   title="Sort tasks"
                   aria-label="Sort tasks"
-                  className="px-2 py-1.5 text-[13px] bg-surface-raised border border-border-subtle rounded-lg text-text-secondary focus:outline-none focus:border-accent/50 cursor-pointer"
-                >
-                  {SORT_OPTIONS.map(opt => (
-                    <option key={opt.value} value={opt.value}>{opt.label}</option>
-                  ))}
-                </select>
+                  options={SORT_OPTIONS}
+                />
               </label>
             )}
-            <button
+            <Button
+              variant="secondary"
+              size="md"
               onClick={() => setShowStatusManager(true)}
               title="Manage statuses"
               aria-label="Manage statuses"
-              className="flex items-center gap-1.5 px-3 py-1.5 text-[13px] text-text-secondary bg-surface-raised border border-border-subtle hover:border-border rounded-lg cursor-pointer whitespace-nowrap"
+              className="whitespace-nowrap"
             >
               <SlidersHorizontal size={14} /> <span className="hidden sm:inline">Statuses</span>
-            </button>
-            <button
+            </Button>
+            <Button
+              variant="primary"
+              size="md"
               onClick={() => setShowCreateDialog(true)}
               // The label collapses to an icon on narrow screens, so the
               // button carries its name explicitly rather than relying on
               // text that is not always rendered.
               title="New task"
               aria-label="New task"
-              className="flex items-center gap-1.5 px-3 py-1.5 text-[13px] bg-accent hover:bg-accent-hover text-white rounded-lg cursor-pointer whitespace-nowrap"
+              className="whitespace-nowrap"
             >
               <Plus size={14} /> <span className="hidden sm:inline">New Task</span>
-            </button>
+            </Button>
           </>
         }
       />
@@ -243,31 +249,31 @@ export function TasksPage() {
             ))}
 
             {!isSearching && total > 0 && (
-              <div className="flex items-center justify-between pt-4 text-[12px] text-text-faint">
+              <div className="flex items-center justify-between pt-4 text-xs text-text-faint">
                 <span>
                   Showing {pageStart}–{pageEnd} of {total}
                 </span>
                 {totalPages > 1 && (
                   <div className="flex items-center gap-1">
-                    <button
+                    <IconButton
+                      label="Previous page"
+                      size="xs"
                       onClick={() => setPage(page - 1)}
                       disabled={!hasPrev}
-                      className="p-1.5 rounded-md text-text-dim hover:bg-surface-raised hover:text-text-muted disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
-                      aria-label="Previous page"
                     >
                       <ChevronLeft size={14} />
-                    </button>
+                    </IconButton>
                     <span className="px-2 text-text-dim">
                       Page {page} of {totalPages}
                     </span>
-                    <button
+                    <IconButton
+                      label="Next page"
+                      size="xs"
                       onClick={() => setPage(page + 1)}
                       disabled={!hasNext}
-                      className="p-1.5 rounded-md text-text-dim hover:bg-surface-raised hover:text-text-muted disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
-                      aria-label="Next page"
                     >
                       <ChevronRight size={14} />
-                    </button>
+                    </IconButton>
                   </div>
                 )}
               </div>
diff --git a/web/src/pages/UltracodePage.tsx b/web/src/pages/UltracodePage.tsx
index 3bcd8459..8d880d41 100644
--- a/web/src/pages/UltracodePage.tsx
+++ b/web/src/pages/UltracodePage.tsx
@@ -13,7 +13,8 @@ import {
   Timer,
   Workflow,
   XCircle,
-} from 'lucide-react';
+} from '../components/ui/icons';
+import { Badge, Button, IconButton, type BadgeTone } from '../components/ui';
 import {
   api,
   type UltracodeRun,
@@ -39,33 +40,29 @@ function isFailureStatus(status?: string): boolean {
   return TERMINAL_FAILURES.has(normalizedStatus(status));
 }
 
-function statusClasses(status?: string): string {
+/** The `Badge` tone for a run/step status — succeeded / failed / running. */
+function statusTone(status?: string): BadgeTone {
   const value = normalizedStatus(status);
-  if (value === 'completed' || value === 'done' || value === 'success') {
-    return 'border-emerald-400/25 bg-emerald-400/10 text-hue-emerald';
-  }
-  if (isFailureStatus(value)) {
-    return 'border-red-400/25 bg-red-400/10 text-hue-red';
-  }
-  if (isActiveStatus(value)) {
-    return 'border-blue-400/25 bg-blue-400/10 text-hue-blue';
-  }
-  return 'border-border bg-surface-raised text-text-muted';
+  if (value === 'completed' || value === 'done' || value === 'success') return 'success';
+  if (isFailureStatus(value)) return 'danger';
+  if (isActiveStatus(value)) return 'info';
+  return 'neutral';
 }
 
 function StatusIcon({ status, size = 14 }: { status?: string; size?: number }) {
   const value = normalizedStatus(status);
   if (value === 'completed' || value === 'done' || value === 'success') {
-    return <CheckCircle2 size={size} className="text-hue-emerald shrink-0" />;
+    return <CheckCircle2 size={size} className="text-success shrink-0" />;
   }
   if (value === 'cancelled' || value === 'canceled' || value === 'refuted') {
-    return <Ban size={size} className="text-hue-red shrink-0" />;
+    return <Ban size={size} className="text-error shrink-0" />;
   }
   if (isFailureStatus(value)) {
-    return <XCircle size={size} className="text-hue-red shrink-0" />;
+    return <XCircle size={size} className="text-error shrink-0" />;
   }
   if (isActiveStatus(value)) {
-    return <Loader2 size={size} className="text-hue-blue animate-spin shrink-0" />;
+    // Click UI's `loading` is a static glyph, so the spin stays on the call site.
+    return <Loader2 size={size} className="text-info animate-spin shrink-0" />;
   }
   return <CircleDashed size={size} className="text-text-faint shrink-0" />;
 }
@@ -172,12 +169,12 @@ function StatCard({ icon, label, value, detail }: {
 }) {
   return (
     <div className="rounded-xl border border-border-subtle bg-surface px-3.5 py-3 min-w-0">
-      <div className="flex items-center gap-1.5 text-[10px] uppercase tracking-[0.13em] text-text-faint">
+      <div className="flex items-center gap-1.5 text-2xs uppercase tracking-[0.13em] text-text-faint">
         {icon}
         {label}
       </div>
       <div className="mt-1.5 text-lg font-semibold tabular-nums text-text truncate">{value}</div>
-      {detail && <div className="mt-0.5 text-[11px] text-text-dim truncate">{detail}</div>}
+      {detail && <div className="mt-0.5 text-xs text-text-dim truncate">{detail}</div>}
     </div>
   );
 }
@@ -188,6 +185,9 @@ function RunListItem({ run, selected, onSelect }: {
   onSelect: () => void;
 }) {
   const usage = run.aggregate_usage;
+  // A bare <button> rather than `Button`: this is a multi-line card, and
+  // `Button`'s base `inline-flex items-center justify-center` would lay its
+  // rows side by side.
   return (
     <button
       type="button"
@@ -202,18 +202,18 @@ function RunListItem({ run, selected, onSelect }: {
         <div className="pt-0.5"><StatusIcon status={run.status} size={15} /></div>
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between gap-2">
-            <span className="text-[13px] font-medium text-text-secondary truncate">{runTitle(run)}</span>
-            <span className="text-[10px] text-text-faint shrink-0">
+            <span className="text-sm font-medium text-text-secondary truncate">{runTitle(run)}</span>
+            <span className="text-2xs text-text-faint shrink-0">
               {relativeTime(run.updated_at || run.completed_at || run.started_at)}
             </span>
           </div>
           {run.task && run.task !== runTitle(run) && (
-            <div className="mt-0.5 text-[11px] text-text-dim truncate">{run.task}</div>
+            <div className="mt-0.5 text-xs text-text-dim truncate">{run.task}</div>
           )}
-          <div className="mt-2 flex items-center gap-2.5 text-[10px] text-text-faint tabular-nums">
-            <span className={`px-1.5 py-0.5 rounded border capitalize ${statusClasses(run.status)}`}>
+          <div className="mt-2 flex items-center gap-2.5 text-2xs text-text-faint tabular-nums">
+            <Badge tone={statusTone(run.status)} outline className="capitalize">
               {normalizedStatus(run.status).replace(/_/g, ' ')}
-            </span>
+            </Badge>
             <span>{workerCount(run)} agents</span>
             <span>{formatDuration(runDuration(run))}</span>
             {usage && <span>{formatCount(usageTotal(usage))} tok</span>}
@@ -238,14 +238,14 @@ function StepCard({ step, index }: { step: UltracodeRunStep; index: number }) {
           <StatusIcon status={step.status} size={16} />
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2 min-w-0">
-              <span className="text-[13px] font-medium text-text-secondary truncate">{title}</span>
+              <span className="text-sm font-medium text-text-secondary truncate">{title}</span>
               {step.kind && (
-                <span className="text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-surface-raised text-text-faint border border-border-subtle">
+                <span className="text-2xs uppercase tracking-wider px-1.5 py-0.5 rounded bg-surface-raised text-text-faint border border-border-subtle">
                   {step.kind}
                 </span>
               )}
             </div>
-            <div className="mt-1 flex items-center gap-3 text-[10px] text-text-dim min-w-0">
+            <div className="mt-1 flex items-center gap-3 text-2xs text-text-dim min-w-0">
               {step.model && <span className="truncate">{step.model}</span>}
               {step.reasoning_effort && <span>{step.reasoning_effort}</span>}
               {dependencies.length > 0 && (
@@ -256,8 +256,8 @@ function StepCard({ step, index }: { step: UltracodeRunStep; index: number }) {
             </div>
           </div>
           <div className="text-right shrink-0">
-            <div className="text-[11px] text-text-muted tabular-nums">{formatDuration(step.duration_ms)}</div>
-            {step.usage && <div className="text-[10px] text-text-faint tabular-nums">{formatCount(usageTotal(step.usage))} tok</div>}
+            <div className="text-xs text-text-muted tabular-nums">{formatDuration(step.duration_ms)}</div>
+            {step.usage && <div className="text-2xs text-text-faint tabular-nums">{formatCount(usageTotal(step.usage))} tok</div>}
           </div>
           <span className="text-text-faint group-open:rotate-90 transition-transform">›</span>
         </div>
@@ -265,15 +265,15 @@ function StepCard({ step, index }: { step: UltracodeRunStep; index: number }) {
       <div className="border-t border-border-subtle bg-bg-sunken px-4 py-3">
         {output.text ? (
           <>
-            <pre className={`text-[11px] leading-5 whitespace-pre-wrap break-words max-h-96 overflow-auto ${step.error ? 'text-hue-red' : 'text-text-muted'}`}>
+            <pre className={`text-xs leading-5 whitespace-pre-wrap break-words max-h-96 overflow-auto ${step.error ? 'text-error' : 'text-text-muted'}`}>
               {output.text}
             </pre>
             {output.truncated && (
-              <div className="mt-2 text-[10px] text-hue-amber">Output truncated in the dashboard.</div>
+              <div className="mt-2 text-2xs text-warning">Output truncated in the dashboard.</div>
             )}
           </>
         ) : (
-          <div className="text-[11px] text-text-faint">No output recorded yet.</div>
+          <div className="text-xs text-text-faint">No output recorded yet.</div>
         )}
       </div>
     </details>
@@ -288,22 +288,22 @@ function EventRow({ event }: { event: UltracodeRunEvent }) {
     <div className="relative pl-7 pb-4 last:pb-0">
       <div className="absolute left-[6px] top-4 bottom-0 w-px bg-border-subtle last:hidden" />
       <div className={`absolute left-0 top-1.5 w-[13px] h-[13px] rounded-full border-2 border-bg ${
-        hasFailure ? 'bg-red-400' : active ? 'bg-blue-400' : 'bg-emerald-400'
+        hasFailure ? 'bg-error' : active ? 'bg-info' : 'bg-success'
       }`} />
       <div className="flex items-start justify-between gap-4">
         <div className="min-w-0">
-          <div className="text-[12px] text-text-secondary">
-            <span className="font-mono text-[11px]">{event.type || 'event'}</span>
+          <div className="text-xs text-text-secondary">
+            <span className="font-mono text-xs">{event.type || 'event'}</span>
             {event.label && <span className="text-text-muted"> · {event.label}</span>}
           </div>
-          {event.message && <div className="mt-1 text-[11px] text-text-muted whitespace-pre-wrap">{event.message}</div>}
+          {event.message && <div className="mt-1 text-xs text-text-muted whitespace-pre-wrap">{event.message}</div>}
           {eventData.text && (
-            <pre className="mt-1.5 text-[10px] leading-4 text-text-dim whitespace-pre-wrap break-words max-h-32 overflow-auto">
+            <pre className="mt-1.5 text-2xs leading-4 text-text-dim whitespace-pre-wrap break-words max-h-32 overflow-auto">
               {eventData.text}
             </pre>
           )}
         </div>
-        <time className="text-[10px] text-text-faint tabular-nums shrink-0" title={formatTimestamp(event.at)}>
+        <time className="text-2xs text-text-faint tabular-nums shrink-0" title={formatTimestamp(event.at)}>
           {event.at ? new Date(event.at).toLocaleTimeString() : '—'}
         </time>
       </div>
@@ -319,14 +319,10 @@ function EmptyDashboard({ message, onRefresh }: { message: string; onRefresh: ()
           <Workflow size={26} className="text-text-faint" />
         </div>
         <h2 className="mt-4 text-base font-medium text-text-secondary">No Ultracode runs to show</h2>
-        <p className="mt-1.5 text-[13px] leading-5 text-text-dim">{message}</p>
-        <button
-          type="button"
-          onClick={onRefresh}
-          className="mt-4 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-surface text-[12px] text-text-muted hover:bg-surface-hover hover:text-text-secondary cursor-pointer"
-        >
+        <p className="mt-1.5 text-sm leading-5 text-text-dim">{message}</p>
+        <Button variant="secondary" className="mt-4" onClick={onRefresh}>
           <RefreshCw size={12} /> Refresh
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -440,41 +436,39 @@ export function UltracodePage() {
     <div className="h-full flex flex-col overflow-hidden bg-bg">
       <header className="h-[58px] shrink-0 border-b border-border-subtle px-5 flex items-center justify-between bg-bg">
         <div className="flex items-center gap-3 min-w-0">
-          <div className="w-8 h-8 rounded-lg bg-violet-400/10 border border-violet-400/20 flex items-center justify-center shrink-0">
+          <div className="w-8 h-8 rounded-lg bg-hue-violet/10 border border-hue-violet/20 flex items-center justify-center shrink-0">
             <Workflow size={17} className="text-hue-violet" />
           </div>
           <div className="min-w-0">
             <div className="flex items-center gap-2">
-              <h1 className="text-[15px] font-semibold text-text">Ultracode</h1>
-              <span className="text-[9px] uppercase tracking-[0.14em] px-1.5 py-0.5 rounded border border-border bg-surface-raised text-text-faint">
+              <h1 className="text-base font-semibold text-text">Ultracode</h1>
+              <span className="text-2xs uppercase tracking-[0.14em] px-1.5 py-0.5 rounded border border-border bg-surface-raised text-text-faint">
                 read only
               </span>
               {active && (
-                <span className="flex items-center gap-1 text-[10px] text-hue-blue">
+                <span className="flex items-center gap-1 text-2xs text-info">
                   <span className="relative flex h-1.5 w-1.5">
-                    <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-60 animate-ping" />
-                    <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-400" />
+                    <span className="absolute inline-flex h-full w-full rounded-full bg-info opacity-60 animate-ping" />
+                    <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-info" />
                   </span>
                   live
                 </span>
               )}
             </div>
-            <p className="text-[11px] text-text-dim">Parallel worker runs and execution journals</p>
+            <p className="text-xs text-text-dim">Parallel worker runs and execution journals</p>
           </div>
         </div>
-        <button
-          type="button"
-          onClick={() => { void refreshAll(); }}
+        <IconButton
+          label="Refresh runs"
           disabled={refreshing}
-          className="p-2 rounded-lg text-text-dim hover:text-text-secondary hover:bg-surface-raised disabled:opacity-50 cursor-pointer"
-          title="Refresh runs"
+          onClick={() => { void refreshAll(); }}
         >
           <RefreshCw size={15} className={refreshing ? 'animate-spin' : ''} />
-        </button>
+        </IconButton>
       </header>
 
       {error && (
-        <div className="shrink-0 px-4 py-2 border-b border-red-400/20 bg-red-400/5 flex items-center gap-2 text-[11px] text-hue-red">
+        <div className="shrink-0 px-4 py-2 border-b border-error-border bg-error-bg flex items-center gap-2 text-xs text-error">
           <AlertCircle size={13} />
           <span className="truncate">{error}</span>
         </div>
@@ -483,8 +477,8 @@ export function UltracodePage() {
       <div className="flex-1 min-h-0 flex">
         <aside className="w-[330px] shrink-0 border-r border-border-subtle bg-bg-sunken flex flex-col min-h-0">
           <div className="h-10 px-3.5 border-b border-border-subtle flex items-center justify-between shrink-0">
-            <span className="text-[10px] uppercase tracking-[0.13em] text-text-faint">Runs</span>
-            <span className="text-[10px] tabular-nums text-text-faint">{runs.length}</span>
+            <span className="text-2xs uppercase tracking-[0.13em] text-text-faint">Runs</span>
+            <span className="text-2xs tabular-nums text-text-faint">{runs.length}</span>
           </div>
           <div className="flex-1 overflow-y-auto">
             {loading ? (
@@ -502,7 +496,7 @@ export function UltracodePage() {
                 />
               ))
             ) : (
-              <div className="px-5 py-10 text-center text-[12px] text-text-faint">No run journals found.</div>
+              <div className="px-5 py-10 text-center text-xs text-text-faint">No run journals found.</div>
             )}
           </div>
         </aside>
@@ -524,14 +518,14 @@ export function UltracodePage() {
                       <div className="flex items-center gap-2.5">
                         <StatusIcon status={selectedRun.status} size={19} />
                         <h2 className="text-xl font-semibold text-text truncate">{runTitle(selectedRun)}</h2>
-                        <span className={`text-[10px] capitalize px-2 py-0.5 rounded-full border shrink-0 ${statusClasses(selectedRun.status)}`}>
+                        <Badge tone={statusTone(selectedRun.status)} outline pill className="capitalize">
                           {normalizedStatus(selectedRun.status).replace(/_/g, ' ')}
-                        </span>
+                        </Badge>
                       </div>
                       {selectedRun.task && selectedRun.task !== runTitle(selectedRun) && (
-                        <p className="mt-2 text-[13px] leading-5 text-text-muted max-w-3xl">{selectedRun.task}</p>
+                        <p className="mt-2 text-sm leading-5 text-text-muted max-w-3xl">{selectedRun.task}</p>
                       )}
-                      <div className="mt-2 flex items-center gap-3 text-[10px] text-text-dim min-w-0">
+                      <div className="mt-2 flex items-center gap-3 text-2xs text-text-dim min-w-0">
                         <span className="font-mono truncate" title={selectedRun.cwd || undefined}>{selectedRun.cwd || 'workspace'}</span>
                         <span className="shrink-0" title={formatTimestamp(selectedRun.started_at)}>
                           started {relativeTime(selectedRun.started_at)}
@@ -573,8 +567,8 @@ export function UltracodePage() {
                   <section className="rounded-xl border border-border-subtle bg-surface px-4 py-3">
                     <div className="flex items-center justify-between gap-4">
                       <div>
-                        <div className="text-[10px] uppercase tracking-[0.13em] text-text-faint">Usage</div>
-                        <div className="mt-0.5 text-[11px] text-text-dim">Aggregate across every worker in this run</div>
+                        <div className="text-2xs uppercase tracking-[0.13em] text-text-faint">Usage</div>
+                        <div className="mt-0.5 text-xs text-text-dim">Aggregate across every worker in this run</div>
                       </div>
                       <div className="flex items-center gap-5 text-right tabular-nums">
                         {[
@@ -584,8 +578,8 @@ export function UltracodePage() {
                           ['Reasoning', usage.reasoning_output_tokens],
                         ].map(([label, value]) => (
                           <div key={String(label)}>
-                            <div className="text-[10px] text-text-faint">{label}</div>
-                            <div className="mt-0.5 text-[12px] text-text-secondary">{formatCount(value as number | undefined)}</div>
+                            <div className="text-2xs text-text-faint">{label}</div>
+                            <div className="mt-0.5 text-xs text-text-secondary">{formatCount(value as number | undefined)}</div>
                           </div>
                         ))}
                       </div>
@@ -600,18 +594,15 @@ export function UltracodePage() {
                       ['events', `Events ${selectedRun.events?.length || 0}`],
                       ['result', 'Run detail'],
                     ] as Array<[DetailTab, string]>).map(([id, label]) => (
-                      <button
+                      <Button
                         key={id}
-                        type="button"
+                        variant="tab"
+                        active={tab === id}
                         onClick={() => setTab(id)}
-                        className={`px-3 py-2 text-[12px] border-b-2 -mb-px transition-colors cursor-pointer ${
-                          tab === id
-                            ? 'border-accent text-text-secondary'
-                            : 'border-transparent text-text-dim hover:text-text-muted'
-                        }`}
+                        className="px-3 py-2 -mb-px"
                       >
                         {label}
-                      </button>
+                      </Button>
                     ))}
                   </div>
 
@@ -620,7 +611,7 @@ export function UltracodePage() {
                       {steps.length > 0 ? steps.map((step, index) => (
                         <StepCard key={step.step_id || step.id || `${index}`} step={step} index={index} />
                       )) : (
-                        <div className="rounded-xl border border-dashed border-border p-8 text-center text-[12px] text-text-faint">
+                        <div className="rounded-xl border border-dashed border-border p-8 text-center text-xs text-text-faint">
                           No worker records in this journal.
                         </div>
                       )}
@@ -632,10 +623,10 @@ export function UltracodePage() {
                       {events.length > 0 ? events.map((event, index) => (
                         <EventRow key={`${event.at || 'event'}-${event.type || ''}-${index}`} event={event} />
                       )) : (
-                        <div className="py-6 text-center text-[12px] text-text-faint">No journal events recorded.</div>
+                        <div className="py-6 text-center text-xs text-text-faint">No journal events recorded.</div>
                       )}
                       {(selectedRun.events?.length || 0) > events.length && (
-                        <div className="pt-3 border-t border-border-subtle text-center text-[10px] text-text-faint">
+                        <div className="pt-3 border-t border-border-subtle text-center text-2xs text-text-faint">
                           Showing the latest {events.length} events.
                         </div>
                       )}
@@ -645,27 +636,27 @@ export function UltracodePage() {
                   {tab === 'result' && (
                     <div className="space-y-3">
                       <div className="rounded-xl border border-border-subtle bg-surface overflow-hidden">
-                        <div className="px-4 py-2.5 border-b border-border-subtle text-[10px] uppercase tracking-[0.13em] text-text-faint">
+                        <div className="px-4 py-2.5 border-b border-border-subtle text-2xs uppercase tracking-[0.13em] text-text-faint">
                           Final result
                         </div>
                         <div className="bg-bg-sunken px-4 py-3">
                           {topResult.text ? (
                             <>
-                              <pre className={`text-[11px] leading-5 whitespace-pre-wrap break-words max-h-[32rem] overflow-auto ${selectedRun.error ? 'text-hue-red' : 'text-text-muted'}`}>
+                              <pre className={`text-xs leading-5 whitespace-pre-wrap break-words max-h-[32rem] overflow-auto ${selectedRun.error ? 'text-error' : 'text-text-muted'}`}>
                                 {topResult.text}
                               </pre>
-                              {topResult.truncated && <div className="mt-2 text-[10px] text-hue-amber">Result truncated in the dashboard.</div>}
+                              {topResult.truncated && <div className="mt-2 text-2xs text-warning">Result truncated in the dashboard.</div>}
                             </>
                           ) : (
-                            <div className="text-[11px] text-text-faint">No top-level result recorded.</div>
+                            <div className="text-xs text-text-faint">No top-level result recorded.</div>
                           )}
                         </div>
                       </div>
                       <div className="rounded-xl border border-border-subtle bg-surface overflow-hidden">
-                        <div className="px-4 py-2.5 border-b border-border-subtle text-[10px] uppercase tracking-[0.13em] text-text-faint">
+                        <div className="px-4 py-2.5 border-b border-border-subtle text-2xs uppercase tracking-[0.13em] text-text-faint">
                           Run options
                         </div>
-                        <pre className="bg-bg-sunken px-4 py-3 text-[11px] leading-5 text-text-muted whitespace-pre-wrap break-words overflow-auto">
+                        <pre className="bg-bg-sunken px-4 py-3 text-xs leading-5 text-text-muted whitespace-pre-wrap break-words overflow-auto">
                           {formatValue(selectedRun.options || {}).text}
                         </pre>
                       </div>
diff --git a/web/src/pages/WorkflowRunsPage.tsx b/web/src/pages/WorkflowRunsPage.tsx
index 99952bb5..a38a603e 100644
--- a/web/src/pages/WorkflowRunsPage.tsx
+++ b/web/src/pages/WorkflowRunsPage.tsx
@@ -13,7 +13,8 @@ import {
   RefreshCw,
   Rocket,
   XCircle,
-} from 'lucide-react';
+} from '../components/ui/icons';
+import { Badge, type BadgeTone, Button, IconButton } from '../components/ui';
 import {
   api,
   type WorkflowRun,
@@ -30,18 +31,18 @@ function statusLabel(status: WorkflowRunStatus): string {
   return status.replace(/_/g, ' ');
 }
 
-function statusBadgeClasses(status: WorkflowRunStatus): string {
+function statusTone(status: WorkflowRunStatus): BadgeTone {
   switch (status) {
     case 'running':
-      return 'border-blue-400/25 bg-blue-400/10 text-hue-blue';
+      return 'info';
     case 'done':
-      return 'border-emerald-400/25 bg-emerald-400/10 text-hue-emerald';
+      return 'success';
     case 'failed':
-      return 'border-red-400/25 bg-red-400/10 text-hue-red';
+      return 'danger';
     case 'budget_exhausted':
-      return 'border-amber-400/25 bg-amber-400/10 text-hue-amber';
+      return 'warning';
     default: // pending, killed
-      return 'border-border bg-surface-raised text-text-muted';
+      return 'neutral';
   }
 }
 
@@ -118,27 +119,25 @@ function eventExtras(event: WorkflowRunJournalEvent): string {
 function BudgetBar({ run }: { run: WorkflowRun }) {
   if (run.budget_usd === null || run.budget_usd <= 0) {
     return (
-      <span className="text-[11px] text-text-dim tabular-nums whitespace-nowrap">
+      <span className="text-xs text-text-dim tabular-nums whitespace-nowrap">
         {fmtUsd(run.spent_usd)} spent
       </span>
     );
   }
   const pct = (run.spent_usd / run.budget_usd) * 100;
-  let color = '#10b981'; // emerald-500
-  if (pct >= 100) color = '#ef4444'; // red-500
-  else if (pct >= 80) color = '#f59e0b'; // amber-500
+  const fill = pct >= 100 ? 'bg-error' : pct >= 80 ? 'bg-warning' : 'bg-success';
   return (
     <div
       className="flex items-center gap-2 whitespace-nowrap"
       title={run.warned_at ? `Budget warning issued ${relativeTime(run.warned_at)}` : `${Math.round(pct)}% of budget`}
     >
-      <span className="text-[11px] text-text-dim tabular-nums">
+      <span className="text-xs text-text-dim tabular-nums">
         {fmtUsd(run.spent_usd)} / {fmtUsd(run.budget_usd)}
       </span>
       <div className="w-24 h-1.5 bg-border-subtle rounded-full overflow-hidden">
         <div
-          className="h-full rounded-full transition-all duration-300"
-          style={{ width: `${Math.min(pct, 100)}%`, backgroundColor: color }}
+          className={`h-full rounded-full transition-all duration-300 ${fill}`}
+          style={{ width: `${Math.min(pct, 100)}%` }}
         />
       </div>
     </div>
@@ -148,8 +147,8 @@ function BudgetBar({ run }: { run: WorkflowRun }) {
 function Meta({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
   return (
     <div className="min-w-0">
-      <div className="text-[9px] uppercase tracking-wider text-text-faint">{label}</div>
-      <div className={`mt-0.5 text-[11px] text-text-secondary truncate ${mono ? 'font-mono' : ''}`} title={value}>
+      <div className="text-2xs uppercase tracking-wider text-text-faint">{label}</div>
+      <div className={`mt-0.5 text-xs text-text-secondary truncate ${mono ? 'font-mono' : ''}`} title={value}>
         {value}
       </div>
     </div>
@@ -159,7 +158,7 @@ function Meta({ label, value, mono }: { label: string; value: string; mono?: boo
 function DetailBlock({ label, children }: { label: string; children: ReactNode }) {
   return (
     <div>
-      <div className="text-[10px] uppercase tracking-wider text-text-faint mb-1.5">{label}</div>
+      <div className="text-2xs uppercase tracking-wider text-text-faint mb-1.5">{label}</div>
       {children}
     </div>
   );
@@ -168,7 +167,7 @@ function DetailBlock({ label, children }: { label: string; children: ReactNode }
 function JournalEventRow({ event }: { event: WorkflowRunJournalEvent }) {
   const extras = eventExtras(event);
   return (
-    <div className="flex items-start gap-2.5 text-[11px] leading-5 min-w-0">
+    <div className="flex items-start gap-2.5 text-xs leading-5 min-w-0">
       <time className="text-text-faint tabular-nums shrink-0" title={formatTimestamp(event.ts)}>
         {event.ts ? new Date(event.ts).toLocaleTimeString() : '—'}
       </time>
@@ -233,21 +232,21 @@ function RunCard({ run }: { run: WorkflowRun }) {
           <StatusIcon status={run.status} />
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2 min-w-0">
-              <span className="text-[13px] font-medium text-text-secondary truncate">{runTitle(run)}</span>
-              <span className="shrink-0 text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-surface-raised text-text-faint border border-border-subtle font-mono">
+              <span className="text-sm font-medium text-text-secondary truncate">{runTitle(run)}</span>
+              <span className="shrink-0 text-2xs uppercase tracking-wider px-1.5 py-0.5 rounded bg-surface-raised text-text-faint border border-border-subtle font-mono">
                 {run.engine}
               </span>
             </div>
-            <div className="mt-1.5 flex items-center gap-2.5 text-[10px] text-text-faint min-w-0">
-              <span className={`inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-full border capitalize shrink-0 ${statusBadgeClasses(run.status)}`}>
+            <div className="mt-1.5 flex items-center gap-2.5 text-2xs text-text-faint min-w-0">
+              <Badge pill outline tone={statusTone(run.status)} className="capitalize gap-1.5 shrink-0">
                 {run.status === 'running' && (
                   <span className="relative flex h-1.5 w-1.5">
-                    <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-60 animate-ping" />
-                    <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-400" />
+                    <span className="absolute inline-flex h-full w-full rounded-full bg-info opacity-60 animate-ping" />
+                    <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-info" />
                   </span>
                 )}
                 {statusLabel(run.status)}
-              </span>
+              </Badge>
               <span className="font-mono shrink-0">{run.id}</span>
               <span className="shrink-0" title={formatTimestamp(run.created_at)}>
                 created {relativeTime(run.created_at)}
@@ -256,14 +255,13 @@ function RunCard({ run }: { run: WorkflowRun }) {
           </div>
           <BudgetBar run={run} />
           {run.session_id && (
-            <button
-              type="button"
+            <Button
+              variant="secondary"
               onClick={e => { e.stopPropagation(); navigate(`/chat/${run.session_id}`); }}
-              className="shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border bg-surface text-[11px] text-text-muted hover:bg-surface-hover hover:text-text-secondary cursor-pointer"
               title="Open the run's session chat"
             >
               <MessageSquare size={12} /> Chat
-            </button>
+            </Button>
           )}
           <ChevronRight
             size={15}
@@ -286,14 +284,14 @@ function RunCard({ run }: { run: WorkflowRun }) {
           </div>
 
           <DetailBlock label="Prompt">
-            <pre className="text-[11px] leading-5 whitespace-pre-wrap break-words max-h-64 overflow-auto text-text-muted">
+            <pre className="text-xs leading-5 whitespace-pre-wrap break-words max-h-64 overflow-auto text-text-muted">
               {run.spec?.prompt || '—'}
             </pre>
           </DetailBlock>
 
           {run.error && (
             <DetailBlock label="Error">
-              <pre className="text-[11px] leading-5 whitespace-pre-wrap break-words max-h-48 overflow-auto text-hue-red">
+              <pre className="text-xs leading-5 whitespace-pre-wrap break-words max-h-48 overflow-auto text-hue-red">
                 {run.error}
               </pre>
             </DetailBlock>
@@ -301,7 +299,7 @@ function RunCard({ run }: { run: WorkflowRun }) {
 
           {resultText && (
             <DetailBlock label="Result">
-              <pre className="text-[11px] leading-5 whitespace-pre-wrap break-words max-h-96 overflow-auto text-text-muted">
+              <pre className="text-xs leading-5 whitespace-pre-wrap break-words max-h-96 overflow-auto text-text-muted">
                 {resultText}
               </pre>
             </DetailBlock>
@@ -309,11 +307,11 @@ function RunCard({ run }: { run: WorkflowRun }) {
 
           <DetailBlock label={journal && events.length > 0 ? `Journal events (last ${events.length})` : 'Journal events'}>
             {journalLoading && !journal ? (
-              <div className="py-1 flex items-center gap-2 text-[11px] text-text-faint">
+              <div className="py-1 flex items-center gap-2 text-xs text-text-faint">
                 <Loader2 size={12} className="animate-spin" /> Loading journal…
               </div>
             ) : journalError ? (
-              <div className="text-[11px] text-hue-red">{journalError}</div>
+              <div className="text-xs text-hue-red">{journalError}</div>
             ) : events.length > 0 ? (
               <div className="space-y-1 max-h-64 overflow-auto">
                 {events.map((event, index) => (
@@ -321,21 +319,16 @@ function RunCard({ run }: { run: WorkflowRun }) {
                 ))}
               </div>
             ) : (
-              <div className="text-[11px] text-text-faint">No journal events recorded yet.</div>
+              <div className="text-xs text-text-faint">No journal events recorded yet.</div>
             )}
           </DetailBlock>
 
           {killable && (
             <div className="flex justify-end pt-0.5">
-              <button
-                type="button"
-                onClick={() => { void onKill(); }}
-                disabled={killing}
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-red-400/25 bg-red-400/10 text-hue-red text-[12px] hover:bg-red-400/20 disabled:opacity-50 cursor-pointer"
-              >
+              <Button variant="danger" onClick={() => { void onKill(); }} disabled={killing}>
                 {killing ? <Loader2 size={12} className="animate-spin" /> : <OctagonX size={12} />}
                 Kill run
-              </button>
+              </Button>
             </div>
           )}
         </div>
@@ -352,16 +345,16 @@ function EmptyState() {
           <Rocket size={26} className="text-text-faint" />
         </div>
         <h2 className="mt-4 text-base font-medium text-text-secondary">No workflow runs yet</h2>
-        <p className="mt-1.5 text-[13px] leading-5 text-text-dim">
+        <p className="mt-1.5 text-sm leading-5 text-text-dim">
           Workflow runs are long-lived autonomous agent runs with a hard spend budget.
           Each run executes in its own session, its cost is tracked while it works, and
           it is stopped automatically when the budget is exhausted.
         </p>
-        <p className="mt-2 text-[13px] leading-5 text-text-dim">
+        <p className="mt-2 text-sm leading-5 text-text-dim">
           Start one by asking the agent to use the{' '}
-          <code className="bg-surface-raised px-1.5 py-0.5 rounded text-[12px]">workflow_run_start</code>{' '}
+          <code className="bg-surface-raised px-1.5 py-0.5 rounded text-xs">workflow_run_start</code>{' '}
           tool, or via{' '}
-          <code className="bg-surface-raised px-1.5 py-0.5 rounded text-[12px]">POST /api/workflow-runs</code>.
+          <code className="bg-surface-raised px-1.5 py-0.5 rounded text-xs">POST /api/workflow-runs</code>.
         </p>
       </div>
     </div>
@@ -404,38 +397,33 @@ export function WorkflowRunsPage() {
     <div className="h-full flex flex-col overflow-hidden bg-bg">
       <header className="h-[58px] shrink-0 border-b border-border-subtle px-5 flex items-center justify-between bg-bg">
         <div className="flex items-center gap-3 min-w-0">
-          <div className="w-8 h-8 rounded-lg bg-amber-400/10 border border-amber-400/20 flex items-center justify-center shrink-0">
+          {/* The page's own icon tile — identity, not status, hence `hue-amber`. */}
+          <div className="w-8 h-8 rounded-lg bg-hue-amber/10 border border-hue-amber/20 flex items-center justify-center shrink-0">
             <Rocket size={17} className="text-hue-amber" />
           </div>
           <div className="min-w-0">
             <div className="flex items-center gap-2">
-              <h1 className="text-[15px] font-semibold text-text">Workflow Runs</h1>
+              <h1 className="text-base font-semibold text-text">Workflow Runs</h1>
               {hasActive && (
-                <span className="flex items-center gap-1 text-[10px] text-hue-blue">
+                <span className="flex items-center gap-1 text-2xs text-hue-blue">
                   <span className="relative flex h-1.5 w-1.5">
-                    <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-60 animate-ping" />
-                    <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-400" />
+                    <span className="absolute inline-flex h-full w-full rounded-full bg-info opacity-60 animate-ping" />
+                    <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-info" />
                   </span>
                   {activeCount} active
                 </span>
               )}
             </div>
-            <p className="text-[11px] text-text-dim">Budgeted autonomous agent runs</p>
+            <p className="text-xs text-text-dim">Budgeted autonomous agent runs</p>
           </div>
         </div>
-        <button
-          type="button"
-          onClick={() => { void onRefresh(); }}
-          disabled={refreshing}
-          className="p-2 rounded-lg text-text-dim hover:text-text-secondary hover:bg-surface-raised disabled:opacity-50 cursor-pointer"
-          title="Refresh runs"
-        >
+        <IconButton label="Refresh runs" onClick={() => { void onRefresh(); }} disabled={refreshing}>
           <RefreshCw size={15} className={refreshing ? 'animate-spin' : ''} />
-        </button>
+        </IconButton>
       </header>
 
       {error && (
-        <div className="shrink-0 px-4 py-2 border-b border-red-400/20 bg-red-400/5 flex items-center gap-2 text-[11px] text-hue-red">
+        <div className="shrink-0 px-4 py-2 border-b border-error-border bg-error-bg flex items-center gap-2 text-xs text-error">
           <AlertCircle size={13} />
           <span className="truncate">{error}</span>
         </div>
@@ -456,7 +444,7 @@ export function WorkflowRunsPage() {
               ))}
             </div>
             {total > runs.length && (
-              <div className="mt-4 text-center text-[10px] text-text-faint">
+              <div className="mt-4 text-center text-2xs text-text-faint">
                 Showing the latest {runs.length} of {total} runs.
               </div>
             )}
diff --git a/web/src/stores/themeStore.ts b/web/src/stores/themeStore.ts
index 9c75085c..2eebefe9 100644
--- a/web/src/stores/themeStore.ts
+++ b/web/src/stores/themeStore.ts
@@ -2,8 +2,13 @@ import { create } from 'zustand';
 
 type ThemePreference = 'system' | 'light' | 'dark';
 
+/** Click UI has no 'system' — every preference must resolve to a concrete theme. */
+export type ResolvedTheme = 'light' | 'dark';
+
 interface ThemeState {
   preference: ThemePreference;
+  /** `preference` with 'system' collapsed to what the OS actually asks for. */
+  resolved: ResolvedTheme;
   setTheme: (pref: ThemePreference) => void;
   cycleTheme: () => void;
 }
@@ -11,6 +16,14 @@ interface ThemeState {
 const STORAGE_KEY = 'nerve-theme';
 const CYCLE_ORDER: ThemePreference[] = ['dark', 'light', 'system'];
 
+function systemTheme(): ResolvedTheme {
+  return window.matchMedia?.('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+}
+
+function resolve(pref: ThemePreference): ResolvedTheme {
+  return pref === 'system' ? systemTheme() : pref;
+}
+
 function applyTheme(pref: ThemePreference) {
   const el = document.documentElement;
   if (pref === 'system') {
@@ -18,6 +31,10 @@ function applyTheme(pref: ThemePreference) {
   } else {
     el.setAttribute('data-theme', pref);
   }
+  // Click UI keys its tokens off `data-cui-theme` and has no 'system' value, so
+  // it always gets the resolved theme. Nerve's own `data-theme` stays the
+  // source of truth for Tailwind (absent = follow the OS via a media query).
+  el.setAttribute('data-cui-theme', resolve(pref));
 }
 
 function getInitialPreference(): ThemePreference {
@@ -31,13 +48,21 @@ export const useThemeStore = create<ThemeState>((set, get) => {
   const initial = getInitialPreference();
   applyTheme(initial);
 
+  // Keep 'system' honest: if the OS flips while the app is open, re-resolve.
+  window.matchMedia?.('(prefers-color-scheme: light)').addEventListener('change', () => {
+    if (get().preference !== 'system') return;
+    applyTheme('system');
+    set({ resolved: systemTheme() });
+  });
+
   return {
     preference: initial,
+    resolved: resolve(initial),
 
     setTheme: (pref) => {
       localStorage.setItem(STORAGE_KEY, pref);
       applyTheme(pref);
-      set({ preference: pref });
+      set({ preference: pref, resolved: resolve(pref) });
     },
 
     cycleTheme: () => {
diff --git a/web/src/test/setup.ts b/web/src/test/setup.ts
index 9ba161d8..0459efdc 100644
--- a/web/src/test/setup.ts
+++ b/web/src/test/setup.ts
@@ -31,6 +31,14 @@ if (!window.requestAnimationFrame) {
   window.cancelAnimationFrame = ((id: number) => clearTimeout(id)) as typeof window.cancelAnimationFrame;
 }
 
+// jsdom has no layout engine and ships no `scrollIntoView` at all — the method
+// is absent rather than a no-op. Components that keep a live region pinned to
+// the bottom call it from a mount effect, so without this they throw during
+// render for reasons unrelated to whatever is under test.
+if (!Element.prototype.scrollIntoView) {
+  Element.prototype.scrollIntoView = () => {};
+}
+
 // jsdom reports every element as having no layout, so `offsetParent` is
 // null for everything. The Modal's focus trap filters candidates by
 // visibility using exactly that, which would leave it with nothing to
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 83de2f6b..642ca355 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -23,5 +23,15 @@ export default defineConfig({
     // Components are asserted on behaviour and ARIA, never on Tailwind
     // classes, so there is nothing to gain from processing the stylesheet.
     css: false,
+    server: {
+      deps: {
+        // Click UI's components import their own CSS alongside themselves.
+        // Left external, those imports reach Node directly and it refuses the
+        // `.css` extension; run through Vite they resolve to the stub that
+        // `css: false` installs. Any spec that renders a Click UI component
+        // needs this.
+        inline: ['@clickhouse/click-ui'],
+      },
+    },
   },
 })